@workos-inc/widgets 1.4.2 → 1.5.0

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

@@ -1,56 +1,171 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, 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";
-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] })] }));
+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
+    ] })
+  ] });
 };
-export const OrganizationSwitcherLoading = () => {
-    return (
+const OrganizationSwitcherLoading = () => {
+  return (
     // Always need DropdownMenu.Root to wrap children than may include
-    _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, {})] }) }));
+    /* @__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, {})
+    ] }) })
+  );
 };
-export function OrganizationSwitcherError(_) {
-    // TODO: consider other error state options
-    return null;
+function OrganizationSwitcherError(_) {
+  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;
+  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;
     }
-    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;
+  }
+  return organizationName.length - MAX_TRUNCATED_SUFFIX_LENGTH;
 };
 const splitOrganizationName = (organizationName) => {
-    const splitPosition = getSplitPosition(organizationName);
-    return [
-        organizationName.slice(0, splitPosition),
-        organizationName.slice(splitPosition),
-    ];
+  const splitPosition = getSplitPosition(organizationName);
+  return [
+    organizationName.slice(0, splitPosition),
+    organizationName.slice(splitPosition)
+  ];
 };
-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 })] }));
+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 })
+  ] });
+};
+export {
+  OrganizationSwitcher,
+  OrganizationSwitcherError,
+  OrganizationSwitcherLoading
 };
 //# sourceMappingURL=organization-switcher.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"organization-switcher.js","sourceRoot":"","sources":["../../../src/lib/organization-switcher.tsx"],"names":[],"mappings":"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"}
+{"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":[]}

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

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

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

@@ -1,62 +1,84 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, 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(undefined);
-export const Root = React.forwardRef(function Root({ name, id, defaultValue, value: valueProp, onValueChange, autoSubmit, children, readOnly, state, ...gridProps }, forwardedRef) {
+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 [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: (value) => onValueChange?.(value.join("")),
+      prop: getValueAsArray(valueProp, childCount),
+      defaultProp: getValueAsArray(defaultValue, childCount),
+      onChange: (value2) => onValueChange?.(value2.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,
@@ -64,85 +86,126 @@ export const Root = React.forwardRef(function Root({ name, id, defaultValue, val
         childCount,
         handleEnterPressed,
         handleChildAdd,
-        handleCharChange,
-    ]);
+        handleCharChange
+      ]
+    );
     React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);
-    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) {
+    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) {
     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 (_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 }) }) }));
-});
+    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
+      }
+    ) }) });
+  }
+);
 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 undefined;
-    }
-    return createEmptyArray(length).map((_, index) => value?.[index] ?? "");
+  if (!value) {
+    return void 0;
+  }
+  return createEmptyArray(length).map((_, index) => value?.[index] ?? "");
 };
 const createEmptyArray = (length) => Array.from({ length }).fill("");
+export {
+  Input,
+  Root
+};
 //# sourceMappingURL=otp-input.js.map