Pin Input V3

[aguilera51284]

Hi!!!!!!!

When I updated to version 3 of Park, this happens to me:

https://github.com/cschroeter/park-ui/assets/7749319/9e708ddd-9c4d-49f5-8acc-65d8f53f28ed

and this is my component

export const PinInput = (props: PinInputProps) => {
  const [variantProps, pinInputProps] = splitProps(props, [
    "size",
    "class",
    "textColor",
  ]);
  const [localProps, rootProps] = splitProps(pinInputProps, [
    "children",
    "length",
  ]);
  const getChildren = children(() => localProps.children);
  const { root, control, label, input } = pinInput(variantProps);

  return (
    <ArkPinInput.Root class={root()} {...rootProps}>
      <Show when={getChildren()}>
        <ArkPinInput.Label class={label()}>{getChildren()}</ArkPinInput.Label>
      </Show>
      <ArkPinInput.Control class={control()}>
        <Index
          each={Array.from(
            { length: localProps.length ?? 4 },
            (_, index) => index,
          )}
        >
          {(index:Accessor<number>) => (
            <ArkPinInput.Input
              class={input()}
              index={index()}
              asChild={(props) => (
                <Input {...props()} size={variantProps.size} />
              )}
            />
          )}
        </Index>
      </ArkPinInput.Control>
    </ArkPinInput.Root>
  );
};

[cschroeter]

@aguilera51284

This should be fixed by now: https://park-ui.com/react/docs/components/pin-input