@workos-inc/widgets 1.4.1 → 1.4.2

package/dist/esm/lib/organization-switcher.js

@@ -1,171 +1,56 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "@radix-ui/react-icons";
-import {
-  Box,
-  Button,
-  ChevronDownIcon,
-  DropdownMenu,
-  Flex,
-  Skeleton,
-  Text,
-  VisuallyHidden
-} from "@radix-ui/themes";
-const OrganizationSwitcher = ({
-  organizations,
-  switchToOrganization,
-  variant = "outline",
-  organizationLabel = "Organizations",
-  truncateBehavior = "right",
-  children
-}) => {
-  const currentOrganization = organizations.find(
-    (organization) => organization.current
-  );
-  if (!currentOrganization) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        color: "gray",
-        variant,
-        className: "OrganizationSwitcherTrigger",
-        children: /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            align: "center",
-            justify: "between",
-            gap: "2",
-            flexGrow: "1",
-            overflow: "hidden",
-            minWidth: "0",
-            children: [
-              /* @__PURE__ */ jsx(
-                TruncatedOrganizationName,
-                {
-                  organizationName: currentOrganization.name,
-                  truncateBehavior
-                }
-              ),
-              /* @__PURE__ */ jsx(Flex, { asChild: true, flexShrink: "0", children: /* @__PURE__ */ jsx(DropdownMenu.TriggerIcon, {}) })
-            ]
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-      /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
-        organizationLabel ? /* @__PURE__ */ jsx(DropdownMenu.Label, { children: /* @__PURE__ */ jsx(Text, { children: organizationLabel }) }) : null,
-        organizations.map((organization) => /* @__PURE__ */ jsx(
-          Flex,
-          {
-            asChild: true,
-            pr: "2",
-            maxWidth: "280px",
-            minWidth: "180px",
-            children: /* @__PURE__ */ jsx(
-              DropdownMenu.Item,
-              {
-                onClick: () => {
-                  if (organization.id !== currentOrganization.id) {
-                    switchToOrganization({ organizationId: organization.id });
-                  }
-                },
-                children: /* @__PURE__ */ jsxs(
-                  Flex,
-                  {
-                    justify: "between",
-                    align: "center",
-                    gap: "4",
-                    flexGrow: "1",
-                    overflow: "hidden",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TruncatedOrganizationName,
-                        {
-                          organizationName: organization.name,
-                          truncateBehavior
-                        }
-                      ),
-                      organization.current && /* @__PURE__ */ jsx(VisuallyHidden, { children: " (current)" }),
-                      /* @__PURE__ */ jsx(
-                        Flex,
-                        {
-                          "aria-hidden": true,
-                          align: "center",
-                          justify: "center",
-                          flexShrink: "0",
-                          children: organization.current ? /* @__PURE__ */ jsx(CheckIcon, { width: "18px", height: "18px" }) : (
-                            // make the extra space for
-                            /* @__PURE__ */ jsx(Box, { width: "18px", height: "18px" })
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          },
-          organization.id
-        ))
-      ] }),
-      children
-    ] })
-  ] });
+import { Box, Button, ChevronDownIcon, DropdownMenu, Flex, Skeleton, Text, VisuallyHidden, } from "@radix-ui/themes";
+export const OrganizationSwitcher = ({ organizations, switchToOrganization, variant = "outline", organizationLabel = "Organizations", truncateBehavior = "right", children, }) => {
+    const currentOrganization = organizations.find((organization) => organization.current);
+    // Possible if the user has no organizations - we should figure out what to do in this case
+    if (!currentOrganization) {
+        return null;
+    }
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { children: _jsx(Button, { color: "gray", variant: variant, className: "OrganizationSwitcherTrigger", children: _jsxs(Flex, { align: "center", justify: "between", gap: "2", flexGrow: "1", overflow: "hidden", minWidth: "0", children: [_jsx(TruncatedOrganizationName, { organizationName: currentOrganization.name, truncateBehavior: truncateBehavior }), _jsx(Flex, { asChild: true, flexShrink: "0", children: _jsx(DropdownMenu.TriggerIcon, {}) })] }) }) }), _jsxs(DropdownMenu.Content, { children: [_jsxs(DropdownMenu.Group, { children: [organizationLabel ? (_jsx(DropdownMenu.Label, { children: _jsx(Text, { children: organizationLabel }) })) : null, organizations.map((organization) => (_jsx(Flex, { asChild: true, pr: "2", maxWidth: "280px", minWidth: "180px", children: _jsx(DropdownMenu.Item, { onClick: () => {
+                                        if (organization.id !== currentOrganization.id) {
+                                            switchToOrganization({ organizationId: organization.id });
+                                        }
+                                    }, children: _jsxs(Flex, { justify: "between", align: "center", gap: "4", flexGrow: "1", overflow: "hidden", children: [_jsx(TruncatedOrganizationName, { organizationName: organization.name, truncateBehavior: truncateBehavior }), organization.current && (_jsx(VisuallyHidden, { children: " (current)" })), _jsx(Flex, { "aria-hidden": true, align: "center", justify: "center", flexShrink: "0", children: organization.current ? (_jsx(CheckIcon, { width: "18px", height: "18px" })) : (
+                                                // make the extra space for
+                                                _jsx(Box, { width: "18px", height: "18px" })) })] }) }) }, organization.id)))] }), children] })] }));
 };
-const OrganizationSwitcherLoading = () => {
-  return (
+export const OrganizationSwitcherLoading = () => {
+    return (
     // Always need DropdownMenu.Root to wrap children than may include
-    /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", disabled: true, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Text, { children: "Loading..." }) }),
-      /* @__PURE__ */ jsx(ChevronDownIcon, {})
-    ] }) })
-  );
+    _jsx(Button, { color: "gray", variant: "outline", disabled: true, children: _jsxs(Flex, { align: "center", gap: "2", children: [_jsx(Skeleton, { children: _jsx(Text, { children: "Loading..." }) }), _jsx(ChevronDownIcon, {})] }) }));
 };
-function OrganizationSwitcherError(_) {
-  return null;
+export function OrganizationSwitcherError(_) {
+    // TODO: consider other error state options
+    return null;
 }
 const MAX_TRUNCATED_SUFFIX_LENGTH = 10;
 const MIN_TRUNCATED_SUFFIX_LENGTH = 3;
 const WHITE_SPACE_REGEX = /\s/;
 const getSplitPosition = (organizationName) => {
-  if (organizationName.length <= MAX_TRUNCATED_SUFFIX_LENGTH) {
-    return organizationName.length;
-  }
-  for (let i = organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH; i < organizationName.length - MIN_TRUNCATED_SUFFIX_LENGTH; i++) {
-    if (WHITE_SPACE_REGEX.test(organizationName[i - 1])) {
-      return i;
+    if (organizationName.length <= MAX_TRUNCATED_SUFFIX_LENGTH) {
+        return organizationName.length;
     }
-  }
-  return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;
+    for (let i = organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH; i < organizationName.length - MIN_TRUNCATED_SUFFIX_LENGTH; i++) {
+        if (WHITE_SPACE_REGEX.test(organizationName[i - 1])) {
+            return i;
+        }
+    }
+    return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;
 };
 const splitOrganizationName = (organizationName) => {
-  const splitPosition = getSplitPosition(organizationName);
-  return [
-    organizationName.slice(0, splitPosition),
-    organizationName.slice(splitPosition)
-  ];
-};
-const TruncatedOrganizationName = ({
-  organizationName,
-  truncateBehavior
-}) => {
-  if (truncateBehavior === "right") {
-    return /* @__PURE__ */ jsx(Text, { truncate: true, children: organizationName });
-  }
-  const [organizationNameLeft, organizationNameRight] = splitOrganizationName(organizationName);
-  return /* @__PURE__ */ jsxs(Flex, { overflow: "hidden", children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Text, { children: organizationName }) }),
-    /* @__PURE__ */ jsx(Text, { "aria-hidden": true, truncate: true, style: { whiteSpace: "pre" }, children: organizationNameLeft }),
-    /* @__PURE__ */ jsx(Text, { "aria-hidden": true, children: organizationNameRight })
-  ] });
+    const splitPosition = getSplitPosition(organizationName);
+    return [
+        organizationName.slice(0, splitPosition),
+        organizationName.slice(splitPosition),
+    ];
 };
-export {
-  OrganizationSwitcher,
-  OrganizationSwitcherError,
-  OrganizationSwitcherLoading
+const TruncatedOrganizationName = ({ organizationName, truncateBehavior, }) => {
+    if (truncateBehavior === "right") {
+        return _jsx(Text, { truncate: true, children: organizationName });
+    }
+    const [organizationNameLeft, organizationNameRight] = splitOrganizationName(organizationName);
+    return (_jsxs(Flex, { overflow: "hidden", children: [_jsx(VisuallyHidden, { children: _jsx(Text, { children: organizationName }) }), _jsx(Text, { "aria-hidden": true, truncate: true, style: { whiteSpace: "pre" }, children: organizationNameLeft }), _jsx(Text, { "aria-hidden": true, children: organizationNameRight })] }));
 };
 //# sourceMappingURL=organization-switcher.js.map

package/dist/esm/lib/organization-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/organization-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport {\n  Box,\n  Button,\n  ChevronDownIcon,\n  DropdownMenu,\n  Flex,\n  Skeleton,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n  OrganizationInfo,\n  Organizations403,\n  Organizations404,\n} from \"../api/endpoint.js\";\n\ntype OrganizationSwitcherVariant = \"ghost\" | \"outline\";\n\n// Rename all uses of `org` to `organization`\nexport type OrganizationSwitcherPassthroughProps = {\n  switchToOrganization: ({\n    organizationId,\n  }: {\n    organizationId: string;\n  }) => void;\n  // Simple props to affect the overall style\n  variant?: OrganizationSwitcherVariant;\n  organizationLabel?: string | null;\n  children?: React.ReactNode;\n  /**\n   * Choose where to truncate organization name in the trigger and dropdown\n   * items.\n   *\n   * - `right`: Truncate the right side of the organization name\n   * - `middle`: Truncate the middle of the organization name, trying to keep\n   *  words whole\n   */\n  truncateBehavior?: \"right\" | \"middle\";\n};\n\nexport interface OrganizationSwitcherProps\n  extends OrganizationSwitcherPassthroughProps {\n  organizations: OrganizationInfo[];\n}\n\nexport const OrganizationSwitcher = ({\n  organizations,\n  switchToOrganization,\n  variant = \"outline\",\n  organizationLabel = \"Organizations\",\n  truncateBehavior = \"right\",\n  children,\n}: OrganizationSwitcherProps) => {\n  const currentOrganization = organizations.find(\n    (organization) => organization.current,\n  );\n\n  // Possible if the user has no organizations - we should figure out what to do in this case\n  if (!currentOrganization) {\n    return null;\n  }\n\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger>\n        <Button\n          color=\"gray\"\n          variant={variant}\n          className=\"OrganizationSwitcherTrigger\"\n        >\n          <Flex\n            align=\"center\"\n            justify=\"between\"\n            gap=\"2\"\n            flexGrow=\"1\"\n            overflow=\"hidden\"\n            minWidth=\"0\"\n          >\n            <TruncatedOrganizationName\n              organizationName={currentOrganization.name}\n              truncateBehavior={truncateBehavior}\n            />\n            <Flex asChild flexShrink=\"0\">\n              <DropdownMenu.TriggerIcon />\n            </Flex>\n          </Flex>\n        </Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Group>\n          {organizationLabel ? (\n            <DropdownMenu.Label>\n              <Text>{organizationLabel}</Text>\n            </DropdownMenu.Label>\n          ) : null}\n          {organizations.map((organization) => (\n            <Flex\n              key={organization.id}\n              asChild\n              pr=\"2\"\n              maxWidth=\"280px\"\n              minWidth=\"180px\"\n            >\n              <DropdownMenu.Item\n                onClick={() => {\n                  if (organization.id !== currentOrganization.id) {\n                    switchToOrganization({ organizationId: organization.id });\n                  }\n                }}\n              >\n                <Flex\n                  justify=\"between\"\n                  align=\"center\"\n                  gap=\"4\"\n                  flexGrow=\"1\"\n                  overflow=\"hidden\"\n                >\n                  <TruncatedOrganizationName\n                    organizationName={organization.name}\n                    truncateBehavior={truncateBehavior}\n                  />\n                  {organization.current && (\n                    <VisuallyHidden> (current)</VisuallyHidden>\n                  )}\n                  <Flex\n                    aria-hidden\n                    align=\"center\"\n                    justify=\"center\"\n                    flexShrink=\"0\"\n                  >\n                    {organization.current ? (\n                      <CheckIcon width=\"18px\" height=\"18px\" />\n                    ) : (\n                      // make the extra space for\n                      <Box width=\"18px\" height=\"18px\" />\n                    )}\n                  </Flex>\n                </Flex>\n              </DropdownMenu.Item>\n            </Flex>\n          ))}\n        </DropdownMenu.Group>\n        {children}\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n};\n\nexport const OrganizationSwitcherLoading: React.FC = () => {\n  return (\n    // Always need DropdownMenu.Root to wrap children than may include\n    <Button color=\"gray\" variant=\"outline\" disabled>\n      <Flex align=\"center\" gap=\"2\">\n        <Skeleton>\n          <Text>Loading...</Text>\n        </Skeleton>\n        <ChevronDownIcon />\n      </Flex>\n    </Button>\n  );\n};\n\ninterface OrganizationSwitcherErrorProps {\n  error: Organizations403 | Organizations404;\n}\n\nexport function OrganizationSwitcherError(_: OrganizationSwitcherErrorProps) {\n  // TODO: consider other error state options\n  return null;\n}\n\nconst MAX_TRUNCATED_SUFFIX_LENGTH = 10;\nconst MIN_TRUNCATED_SUFFIX_LENGTH = 3;\n\nconst WHITE_SPACE_REGEX = /\\s/;\n\nconst getSplitPosition = (organizationName: string) => {\n  if (organizationName.length <= MAX_TRUNCATED_SUFFIX_LENGTH) {\n    return organizationName.length;\n  }\n\n  for (\n    let i = organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;\n    i < organizationName.length - MIN_TRUNCATED_SUFFIX_LENGTH;\n    i++\n  ) {\n    if (WHITE_SPACE_REGEX.test(organizationName[i - 1])) {\n      return i;\n    }\n  }\n\n  return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;\n};\n\nconst splitOrganizationName = (organizationName: string) => {\n  const splitPosition = getSplitPosition(organizationName);\n  return [\n    organizationName.slice(0, splitPosition),\n    organizationName.slice(splitPosition),\n  ];\n};\n\nconst TruncatedOrganizationName = ({\n  organizationName,\n  truncateBehavior,\n}: {\n  organizationName: string;\n  truncateBehavior: \"right\" | \"middle\";\n}) => {\n  if (truncateBehavior === \"right\") {\n    return <Text truncate>{organizationName}</Text>;\n  }\n\n  const [organizationNameLeft, organizationNameRight] =\n    splitOrganizationName(organizationName);\n\n  return (\n    <Flex overflow=\"hidden\">\n      <VisuallyHidden>\n        <Text>{organizationName}</Text>\n      </VisuallyHidden>\n      <Text aria-hidden truncate style={{ whiteSpace: \"pre\" }}>\n        {organizationNameLeft}\n      </Text>\n      <Text aria-hidden>{organizationNameRight}</Text>\n    </Flex>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}

package/dist/esm/lib/otp-input.d.ts

@@ -1,8 +1,6 @@
-import { Grid } from '@radix-ui/themes';
-import * as React from 'react';
-import { TextField } from './elements.js';
-import '@radix-ui/themes/props';
-
+import { Grid } from "@radix-ui/themes";
+import * as React from "react";
+import { TextField } from "./elements.js";
 type OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     onValueChange?: (value: string) => void;
     id?: string;
@@ -13,10 +11,10 @@ type OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     defaultValue?: string;
     autoSubmit?: boolean;
 };
-declare const Root: React.ForwardRefExoticComponent<OtpRootProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Root: React.ForwardRefExoticComponent<OtpRootProps & React.RefAttributes<HTMLInputElement>>;
 interface InputProps extends React.ComponentProps<typeof TextField> {
     autoComplete?: "one-time-code" | "off";
 }
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-export { Input, Root };
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/esm/lib/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAc1C,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI,uFAyIhB,CAAC;AAEF,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,eAAe,GAAG,KAAK,CAAC;CACxC;AAED,eAAO,MAAM,KAAK,kGAkEjB,CAAC"}

package/dist/esm/lib/otp-input.js

@@ -1,84 +1,62 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import * as Form from "@radix-ui/react-form";
 import { Grid } from "@radix-ui/themes";
 import * as React from "react";
 import { TextField } from "./elements.js";
-const OtpContext = React.createContext(void 0);
-const Root = React.forwardRef(
-  function Root2({
-    name,
-    id,
-    defaultValue,
-    value: valueProp,
-    onValueChange,
-    autoSubmit,
-    children,
-    readOnly,
-    state,
-    ...gridProps
-  }, forwardedRef) {
+const OtpContext = React.createContext(undefined);
+export const Root = React.forwardRef(function Root({ name, id, defaultValue, value: valueProp, onValueChange, autoSubmit, children, readOnly, state, ...gridProps }, forwardedRef) {
     const [lastCharIndex, setLastCharIndex] = React.useState(0);
     const [allChildrenAdded, setAllChildrenAdded] = React.useState(false);
     const childCount = React.Children.count(children);
     const [value, setValue] = useControllableState({
-      prop: getValueAsArray(valueProp, childCount),
-      defaultProp: getValueAsArray(defaultValue, childCount),
-      onChange: (value2) => onValueChange?.(value2.join(""))
+        prop: getValueAsArray(valueProp, childCount),
+        defaultProp: getValueAsArray(defaultValue, childCount),
+        onChange: (value) => onValueChange?.(value.join("")),
     });
     const hiddenInputRef = React.useRef(null);
     const childrenRefs = React.useRef([]);
-    const attemptAutoSubmit = React.useCallback(
-      (enterPressed = false) => {
-        if (autoSubmit && value && value.every((char) => char !== "") && (enterPressed || lastCharIndex + 1 === childCount)) {
-          hiddenInputRef.current?.form?.requestSubmit();
+    const attemptAutoSubmit = React.useCallback((enterPressed = false) => {
+        if (autoSubmit &&
+            value &&
+            value.every((char) => char !== "") &&
+            (enterPressed || lastCharIndex + 1 === childCount)) {
+            hiddenInputRef.current?.form?.requestSubmit();
         }
-      },
-      [value, childCount, lastCharIndex, autoSubmit]
-    );
-    const handleEnterPressed = React.useCallback(
-      () => attemptAutoSubmit(true),
-      [attemptAutoSubmit]
-    );
-    const handleChildAdd = React.useCallback(
-      (input) => {
+    }, [value, childCount, lastCharIndex, autoSubmit]);
+    const handleEnterPressed = React.useCallback(() => attemptAutoSubmit(true), [attemptAutoSubmit]);
+    const handleChildAdd = React.useCallback((input) => {
         if (input) {
-          input.dataset.index = `${childrenRefs.current.length}`;
-          childrenRefs.current.push(input);
-        } else {
-          childrenRefs.current.pop();
+            input.dataset.index = `${childrenRefs.current.length}`;
+            childrenRefs.current.push(input);
+        }
+        else {
+            childrenRefs.current.pop();
         }
         if (childrenRefs.current.length === childCount) {
-          setAllChildrenAdded(true);
+            setAllChildrenAdded(true);
         }
-      },
-      [childCount]
-    );
-    const handleCharChange = React.useCallback(
-      (char, index) => {
+    }, [childCount]);
+    const handleCharChange = React.useCallback((char, index) => {
         setValue((previousValue) => {
-          const arrayToCopy = previousValue ?? createEmptyArray(childCount);
-          const newValue = [...arrayToCopy];
-          newValue[index] = char;
-          return newValue;
+            const arrayToCopy = previousValue ?? createEmptyArray(childCount);
+            const newValue = [...arrayToCopy];
+            newValue[index] = char;
+            return newValue;
         });
         setLastCharIndex(index);
-      },
-      [childCount, setValue]
-    );
-    const otpContext = React.useMemo(
-      () => ({
+    }, [childCount, setValue]);
+    const otpContext = React.useMemo(() => ({
         value: value ?? createEmptyArray(childCount),
         readOnly,
         state,
         allChildrenAdded,
         onEnterPressed: handleEnterPressed,
         onChildAdd: handleChildAdd,
-        onCharChange: handleCharChange
-      }),
-      [
+        onCharChange: handleCharChange,
+    }), [
         value,
         allChildrenAdded,
         readOnly,
@@ -86,126 +64,85 @@ const Root = React.forwardRef(
         childCount,
         handleEnterPressed,
         handleChildAdd,
-        handleCharChange
-      ]
-    );
+        handleCharChange,
+    ]);
     React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);
-    return /* @__PURE__ */ jsx(OtpContext.Provider, { value: otpContext, children: /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        columns: `repeat(${childCount}, 1fr)`,
-        ...gridProps,
-        onPaste: (event) => {
-          event.preventDefault();
-          const pastedValue = event.clipboardData.getData("Text");
-          const sanitizedValue = pastedValue.replace(/[^\d]/g, "").slice(0, childCount);
-          const value2 = sanitizedValue.padEnd(childCount, "#").split("").map((char) => char === "#" ? "" : char);
-          setValue(value2);
-          setLastCharIndex(sanitizedValue.length - 1);
-          const index = Math.min(sanitizedValue.length, childCount - 1);
-          childrenRefs.current?.[index]?.focus();
-        },
-        children: [
-          children,
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: composeRefs(forwardedRef, hiddenInputRef),
-              defaultValue: value?.join(""),
-              minLength: childCount,
-              name,
-              type: "hidden"
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
-const Input = React.forwardRef(
-  function Input2({ style, readOnly, autoComplete = "off", ...props }, forwardedRef) {
+    return (_jsx(OtpContext.Provider, { value: otpContext, children: _jsxs(Grid, { columns: `repeat(${childCount}, 1fr)`, ...gridProps, onPaste: (event) => {
+                event.preventDefault();
+                const pastedValue = event.clipboardData.getData("Text");
+                const sanitizedValue = pastedValue
+                    .replace(/[^\d]/g, "")
+                    .slice(0, childCount);
+                const value = sanitizedValue
+                    .padEnd(childCount, "#")
+                    .split("")
+                    .map((char) => (char === "#" ? "" : char));
+                setValue(value);
+                setLastCharIndex(sanitizedValue.length - 1);
+                const index = Math.min(sanitizedValue.length, childCount - 1);
+                childrenRefs.current?.[index]?.focus();
+            }, children: [children, _jsx("input", { ref: composeRefs(forwardedRef, hiddenInputRef), defaultValue: value?.join(""), minLength: childCount, name: name, type: "hidden" })] }) }));
+});
+export const Input = React.forwardRef(function Input({ style, readOnly, autoComplete = "off", ...props }, forwardedRef) {
     const otpContext = useOptContext();
     const inputRef = React.useRef(null);
-    const composedInputRef = useComposedRefs(
-      forwardedRef,
-      inputRef,
-      otpContext.onChildAdd
-    );
+    const composedInputRef = useComposedRefs(forwardedRef, inputRef, otpContext.onChildAdd);
     const index = Number(inputRef.current?.dataset.index ?? -1);
     const char = otpContext.value[index] ?? "";
-    return /* @__PURE__ */ jsx(Form.Field, { name: `otp-${index}`, asChild: true, children: /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
-      TextField,
-      {
-        ref: composedInputRef,
-        autoComplete: index === 0 ? autoComplete : "off",
-        color: otpContext.state === "invalid" ? "red" : void 0,
-        inputMode: "numeric",
-        maxLength: 1,
-        pattern: "\\d{1}",
-        readOnly: readOnly ?? otpContext.readOnly,
-        size: "3",
-        value: char,
-        variant: otpContext.state === "invalid" ? "soft" : void 0,
-        style: {
-          ...style,
-          height: "auto",
-          "--text-field-padding": 0,
-          textAlign: "center"
-        },
-        onChange: (event) => {
-          if (event.target.validity.valid) {
-            const char2 = event.target.value;
-            const index2 = Number(event.target.dataset.index ?? -1);
-            otpContext.onCharChange(char2, index2);
-            if (char2 !== "") {
-              focusSibling(event.currentTarget, { back: char2 === "" });
-            }
-          }
-        },
-        onKeyDown: (event) => {
-          if (event.key === "ArrowLeft") {
-            focusSibling(event.currentTarget, { back: true });
-            event.preventDefault();
-          } else if (event.key === "ArrowRight") {
-            focusSibling(event.currentTarget);
-            event.preventDefault();
-          } else if (event.key === "Backspace" && char === "") {
-            focusSibling(event.currentTarget, { back: true });
-          } else if (event.key === "Enter" && char !== "") {
-            otpContext.onEnterPressed();
-          }
-        },
-        ...props
-      }
-    ) }) });
-  }
-);
+    return (_jsx(Form.Field, { name: `otp-${index}`, asChild: true, children: _jsx(Form.Control, { asChild: true, children: _jsx(TextField, { ref: composedInputRef, autoComplete: index === 0 ? autoComplete : "off", color: otpContext.state === "invalid" ? "red" : undefined, inputMode: "numeric", maxLength: 1, pattern: "\\d{1}", readOnly: readOnly ?? otpContext.readOnly, size: "3", value: char, variant: otpContext.state === "invalid" ? "soft" : undefined, style: {
+                    ...style,
+                    height: "auto",
+                    "--text-field-padding": 0,
+                    textAlign: "center",
+                }, onChange: (event) => {
+                    // Only update the value if it matches the input pattern (number only)
+                    if (event.target.validity.valid) {
+                        const char = event.target.value;
+                        const index = Number(event.target.dataset.index ?? -1);
+                        otpContext.onCharChange(char, index);
+                        if (char !== "") {
+                            focusSibling(event.currentTarget, { back: char === "" });
+                        }
+                    }
+                }, onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                        focusSibling(event.currentTarget, { back: true });
+                        event.preventDefault();
+                    }
+                    else if (event.key === "ArrowRight") {
+                        focusSibling(event.currentTarget);
+                        event.preventDefault();
+                    }
+                    else if (event.key === "Backspace" && char === "") {
+                        focusSibling(event.currentTarget, { back: true });
+                    }
+                    else if (event.key === "Enter" && char !== "") {
+                        otpContext.onEnterPressed();
+                    }
+                }, ...props }) }) }));
+});
 const useOptContext = () => {
-  const optContext = React.useContext(OtpContext);
-  if (!optContext) {
-    throw new Error(
-      "OtpInput compound components cannot be rendered outside the OtpRoot component"
-    );
-  }
-  return optContext;
+    const optContext = React.useContext(OtpContext);
+    if (!optContext) {
+        throw new Error("OtpInput compound components cannot be rendered outside the OtpRoot component");
+    }
+    return optContext;
 };
 function focusSibling(input, { back = false } = {}) {
-  const sibling = back ? input.parentElement?.previousSibling : input.parentElement?.nextSibling;
-  const siblingInput = sibling?.firstChild;
-  if (siblingInput && siblingInput instanceof HTMLInputElement) {
-    siblingInput?.focus();
-    siblingInput?.select();
-  }
+    const sibling = back
+        ? input.parentElement?.previousSibling
+        : input.parentElement?.nextSibling;
+    const siblingInput = sibling?.firstChild;
+    if (siblingInput && siblingInput instanceof HTMLInputElement) {
+        siblingInput?.focus();
+        siblingInput?.select();
+    }
 }
 const getValueAsArray = (value, length) => {
-  if (!value) {
-    return void 0;
-  }
-  return createEmptyArray(length).map((_, index) => value?.[index] ?? "");
+    if (!value) {
+        return undefined;
+    }
+    return createEmptyArray(length).map((_, index) => value?.[index] ?? "");
 };
 const createEmptyArray = (length) => Array.from({ length }).fill("");
-export {
-  Input,
-  Root
-};
 //# sourceMappingURL=otp-input.js.map