@protonradio/proton-ui 0.13.0 → 0.13.1

package/dist/components/Input/BaseInput/Input.es.js

@@ -1,34 +1,34 @@
-import { j as n } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as M, useRef as h, useId as S, useEffect as U } from "react";
-import { useMergedRef as g } from "../../../hooks/useMergedRef.es.js";
-import { useTheme as G } from "../../ThemeProvider.es.js";
+import { jsxs as W, jsx as n } from "react/jsx-runtime";
+import { forwardRef as S, useRef as h, useId as U, useEffect as g } from "react";
+import { useMergedRef as G } from "../../../hooks/useMergedRef.es.js";
+import { useTheme as H } from "../../ThemeProvider.es.js";
 /* empty css             */
-import { copyTextToClipboard as H } from "../../../utils/copy.es.js";
+import { copyTextToClipboard as J } from "../../../utils/copy.es.js";
 import { csx as o } from "../../../utils/string.es.js";
-const J = M(
+const L = S(
   ({
     prefix: u,
     suffix: d,
-    description: s,
-    descriptionPosition: W = "top",
-    isDisabled: y,
+    description: a,
+    descriptionPosition: y = "top",
+    isDisabled: b,
     error: i,
     onChange: m,
     label: f,
-    name: b,
-    placeholder: A,
-    type: P = "text",
-    value: j,
-    autoFocus: T,
-    autoComplete: B,
-    isRequired: x = !1,
-    isReadOnly: N = !1,
-    onSubmit: w,
-    onClear: R,
-    "data-testid": D
-  }, O) => {
-    const $ = h(null), a = h(null), c = h(null), r = h(null), { className: q } = G(), K = g($, O), _ = S();
-    U(() => {
+    name: N,
+    placeholder: T,
+    type: j = "text",
+    value: w,
+    autoFocus: B,
+    autoComplete: D,
+    isRequired: _ = !1,
+    isReadOnly: R = !1,
+    onSubmit: $,
+    onClear: z,
+    "data-testid": O
+  }, q) => {
+    const F = h(null), s = h(null), c = h(null), r = h(null), { className: K } = H(), M = G(F, q), I = U();
+    g(() => {
       if (!r.current) return;
       const t = {
         containerWidth: 200,
@@ -36,9 +36,9 @@ const J = M(
         suffixWidth: 32
       };
       let p = null;
-      const E = () => {
+      const A = () => {
         p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
-          var F, k;
+          var E, P;
           if (r.current) {
             if (r.current) {
               const e = r.current.offsetWidth || t.containerWidth;
@@ -47,16 +47,16 @@ const J = M(
                 `${e}px`
               ), t.containerWidth = e);
             }
-            if (a.current) {
-              const e = a.current.offsetWidth || t.prefixWidth;
-              e !== t.prefixWidth && ((F = r.current) == null || F.style.setProperty(
+            if (s.current) {
+              const e = s.current.offsetWidth || t.prefixWidth;
+              e !== t.prefixWidth && ((E = r.current) == null || E.style.setProperty(
                 "--prefix-width",
                 `${e}px`
               ), t.prefixWidth = e);
             }
             if (c.current) {
               const e = c.current.offsetWidth || t.suffixWidth;
-              e !== t.suffixWidth && ((k = r.current) == null || k.style.setProperty(
+              e !== t.suffixWidth && ((P = r.current) == null || P.style.setProperty(
                 "--suffix-width",
                 `${e}px`
               ), t.suffixWidth = e);
@@ -64,24 +64,24 @@ const J = M(
           }
         });
       };
-      E();
-      const l = new ResizeObserver(E);
-      return r.current && l.observe(r.current), a.current && l.observe(a.current), c.current && l.observe(c.current), () => {
+      A();
+      const l = new ResizeObserver(A);
+      return r.current && l.observe(r.current), s.current && l.observe(s.current), c.current && l.observe(c.current), () => {
         p !== null && cancelAnimationFrame(p), l.disconnect();
       };
     }, [u, d]);
-    const z = `${_}-input`, I = `${_}-error`, v = `${_}-description`;
-    return /* @__PURE__ */ n.jsxs("div", { ref: r, className: "proton-Input__container", children: [
-      s && W === "top" && /* @__PURE__ */ n.jsx(
+    const k = `${I}-input`, x = `${I}-error`, v = `${I}-description`;
+    return /* @__PURE__ */ W("div", { ref: r, className: "proton-Input__container", children: [
+      a && y === "top" && /* @__PURE__ */ n(
         "div",
         {
           id: v,
           className: "proton-Input__text",
           "aria-live": "polite",
-          children: s
+          children: a
         }
       ),
-      /* @__PURE__ */ n.jsxs(
+      /* @__PURE__ */ W(
         "div",
         {
           className: o(
@@ -90,10 +90,10 @@ const J = M(
             d && "proton-Input__has-suffix"
           ),
           children: [
-            u && /* @__PURE__ */ n.jsx(
+            u && /* @__PURE__ */ n(
               "div",
               {
-                ref: a,
+                ref: s,
                 className: o(
                   "proton-Input__descriptor",
                   "proton-Input__prefix"
@@ -101,68 +101,68 @@ const J = M(
                 children: u
               }
             ),
-            /* @__PURE__ */ n.jsx(
+            /* @__PURE__ */ n(
               "input",
               {
-                id: z,
-                name: b,
-                type: P,
-                value: j,
+                id: k,
+                name: N,
+                type: j,
+                value: w,
                 onChange: (t) => {
                   m == null || m(t.target.value);
                 },
                 onKeyDown: (t) => {
                   switch (t.key) {
                     case "Enter":
-                      w && (t.preventDefault(), w(t));
+                      $ && (t.preventDefault(), $(t));
                       break;
                     case "Escape":
-                      R && (t.preventDefault(), R());
+                      z && (t.preventDefault(), z());
                       break;
                   }
                 },
                 onCopy: async () => {
                   var t;
-                  return await H(((t = $.current) == null ? void 0 : t.value) || "");
+                  return await J(((t = F.current) == null ? void 0 : t.value) || "");
                 },
-                disabled: y,
-                readOnly: N,
-                required: x,
-                autoFocus: T,
-                autoComplete: B ? "on" : "off",
-                placeholder: f ? void 0 : A,
-                "aria-label": f || b,
+                disabled: b,
+                readOnly: R,
+                required: _,
+                autoFocus: B,
+                autoComplete: D ? "on" : "off",
+                placeholder: f ? void 0 : T,
+                "aria-label": f || N,
                 "aria-invalid": !!i,
-                "aria-errormessage": i ? I : void 0,
-                "aria-required": x,
-                "aria-readonly": N,
-                "aria-describedby": i ? I : s ? v : void 0,
-                "aria-disabled": y,
-                "data-testid": D,
-                ref: K,
+                "aria-errormessage": i ? x : void 0,
+                "aria-required": _,
+                "aria-readonly": R,
+                "aria-describedby": i ? x : a ? v : void 0,
+                "aria-disabled": b,
+                "data-testid": O,
+                ref: M,
                 className: o(
                   "proton-Input",
                   i && "proton-Input--error",
                   f && "proton-Input__label-top",
-                  q
+                  K
                 )
               }
             ),
-            /* @__PURE__ */ n.jsxs(
+            /* @__PURE__ */ W(
               "label",
               {
-                htmlFor: z,
+                htmlFor: k,
                 className: o(
                   "proton-Input__label",
-                  j && "proton-Input__label--filled"
+                  w && "proton-Input__label--filled"
                 ),
                 children: [
                   f,
-                  x && /* @__PURE__ */ n.jsx("span", { "aria-hidden": "true", children: " *" })
+                  _ && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: " *" })
                 ]
               }
             ),
-            d && /* @__PURE__ */ n.jsx(
+            d && /* @__PURE__ */ n(
               "div",
               {
                 ref: c,
@@ -176,28 +176,28 @@ const J = M(
           ]
         }
       ),
-      i ? /* @__PURE__ */ n.jsx(
+      i ? /* @__PURE__ */ n(
         "div",
         {
           role: "alert",
           className: o("proton-Input__error", "proton-Input__text"),
-          id: I,
+          id: x,
           children: i
         }
-      ) : s && W === "bottom" ? /* @__PURE__ */ n.jsx(
+      ) : a && y === "bottom" ? /* @__PURE__ */ n(
         "div",
         {
           id: v,
           className: "proton-Input__text",
           "aria-live": "polite",
-          children: s
+          children: a
         }
       ) : null
     ] });
   }
 );
-J.displayName = "ProtonUIInput";
+L.displayName = "ProtonUIInput";
 export {
-  J as Input
+  L as Input
 };
 //# sourceMappingURL=Input.es.js.map

package/dist/components/Input/BaseInput/Input.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  ChangeEvent,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type ForwardedRef,\n} from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const setInputRef = useMergedRef(inputRef, forwardedRef);\n    const idBase = useId();\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const prevSizes = {\n        containerWidth: 200,\n        prefixWidth: 32,\n        suffixWidth: 32,\n      };\n\n      let rafId: number | null = null;\n\n      const updateSizes = () => {\n        if (rafId !== null) cancelAnimationFrame(rafId);\n\n        rafId = requestAnimationFrame(() => {\n          if (!containerRef.current) return;\n\n          if (containerRef.current) {\n            const containerWidth =\n              containerRef.current.offsetWidth || prevSizes.containerWidth;\n\n            if (containerWidth !== prevSizes.containerWidth) {\n              containerRef.current.style.setProperty(\n                \"--container-width\",\n                `${containerWidth}px`,\n              );\n              prevSizes.containerWidth = containerWidth;\n            }\n          }\n\n          if (prefixRef.current) {\n            const prefixWidth =\n              prefixRef.current.offsetWidth || prevSizes.prefixWidth;\n\n            if (prefixWidth !== prevSizes.prefixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--prefix-width\",\n                `${prefixWidth}px`,\n              );\n              prevSizes.prefixWidth = prefixWidth;\n            }\n          }\n\n          if (suffixRef.current) {\n            const suffixWidth =\n              suffixRef.current.offsetWidth || prevSizes.suffixWidth;\n\n            if (suffixWidth !== prevSizes.suffixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--suffix-width\",\n                `${suffixWidth}px`,\n              );\n              prevSizes.suffixWidth = suffixWidth;\n            }\n          }\n        });\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        if (rafId !== null) {\n          cancelAnimationFrame(rafId);\n        }\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${idBase}-input`;\n    const errorId = `${idBase}-error`;\n    const descriptionId = `${idBase}-description`;\n\n    return (\n      <div ref={containerRef} className=\"proton-Input__container\">\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div\n          className={csx(\n            \"proton-Input__container-inner\",\n            prefix && \"proton-Input__has-prefix\",\n            suffix && \"proton-Input__has-suffix\",\n          )}\n        >\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\",\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value || \"\")\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={error ? errorId : undefined}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={setInputRef}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className,\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\",\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","setInputRef","useMergedRef","idBase","useId","useEffect","prevSizes","rafId","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}
+{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  ChangeEvent,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type ForwardedRef,\n} from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const setInputRef = useMergedRef(inputRef, forwardedRef);\n    const idBase = useId();\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const prevSizes = {\n        containerWidth: 200,\n        prefixWidth: 32,\n        suffixWidth: 32,\n      };\n\n      let rafId: number | null = null;\n\n      const updateSizes = () => {\n        if (rafId !== null) cancelAnimationFrame(rafId);\n\n        rafId = requestAnimationFrame(() => {\n          if (!containerRef.current) return;\n\n          if (containerRef.current) {\n            const containerWidth =\n              containerRef.current.offsetWidth || prevSizes.containerWidth;\n\n            if (containerWidth !== prevSizes.containerWidth) {\n              containerRef.current.style.setProperty(\n                \"--container-width\",\n                `${containerWidth}px`,\n              );\n              prevSizes.containerWidth = containerWidth;\n            }\n          }\n\n          if (prefixRef.current) {\n            const prefixWidth =\n              prefixRef.current.offsetWidth || prevSizes.prefixWidth;\n\n            if (prefixWidth !== prevSizes.prefixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--prefix-width\",\n                `${prefixWidth}px`,\n              );\n              prevSizes.prefixWidth = prefixWidth;\n            }\n          }\n\n          if (suffixRef.current) {\n            const suffixWidth =\n              suffixRef.current.offsetWidth || prevSizes.suffixWidth;\n\n            if (suffixWidth !== prevSizes.suffixWidth) {\n              containerRef.current?.style.setProperty(\n                \"--suffix-width\",\n                `${suffixWidth}px`,\n              );\n              prevSizes.suffixWidth = suffixWidth;\n            }\n          }\n        });\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        if (rafId !== null) {\n          cancelAnimationFrame(rafId);\n        }\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${idBase}-input`;\n    const errorId = `${idBase}-error`;\n    const descriptionId = `${idBase}-description`;\n\n    return (\n      <div ref={containerRef} className=\"proton-Input__container\">\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div\n          className={csx(\n            \"proton-Input__container-inner\",\n            prefix && \"proton-Input__has-prefix\",\n            suffix && \"proton-Input__has-suffix\",\n          )}\n        >\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\",\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value || \"\")\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={error ? errorId : undefined}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={setInputRef}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className,\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\",\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","setInputRef","useMergedRef","idBase","useId","useEffect","prevSizes","rafId","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}

package/dist/components/Input/CopyInput/CopyInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),x=require("../../../utils/copy.cjs.js"),a=require("../BaseInput/Input.cjs.js");;/* empty css                   */const y=require("../../Icon/IconComponents/Copy.cjs.js"),p=require("../../../utils/string.cjs.js");function C({name:t,value:e,isDisabled:s,onError:u,onSuccess:n}){const[i,r]=c.useState(!1);return o.jsxRuntimeExports.jsx(a.Input,{name:t,value:e,isDisabled:s,suffix:o.jsxRuntimeExports.jsx(l,{isCopied:i,onClick:async()=>{await x.copyTextToClipboard(e,u)&&(r(!0),n==null||n(),setTimeout(()=>r(!1),5e3))}})})}const l=({isCopied:t,onClick:e})=>o.jsxRuntimeExports.jsxs("button",{"data-testid":"COPY_BUTTON",className:p.csx("proton-CopyInput-button",t&&"proton-CopyInput-button--copied"),onClick:e,type:"button","aria-label":t?"Copied":"Copy to clipboard",children:[o.jsxRuntimeExports.jsx(y.Copy,{size:12}),o.jsxRuntimeExports.jsx("span",{className:p.csx("proton-CopyInput-button-text",t&&"proton-CopyInput-button-text--copied"),children:t?"Copied!":"Copy"})]});exports.CopyInput=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react"),a=require("../../../utils/copy.cjs.js"),y=require("../BaseInput/Input.cjs.js");;/* empty css                   */const C=require("../../Icon/IconComponents/Copy.cjs.js"),r=require("../../../utils/string.cjs.js");function l({name:t,value:e,isDisabled:u,onError:s,onSuccess:n}){const[i,p]=c.useState(!1);return o.jsx(y.Input,{name:t,value:e,isDisabled:u,suffix:o.jsx(x,{isCopied:i,onClick:async()=>{await a.copyTextToClipboard(e,s)&&(p(!0),n==null||n(),setTimeout(()=>p(!1),5e3))}})})}const x=({isCopied:t,onClick:e})=>o.jsxs("button",{"data-testid":"COPY_BUTTON",className:r.csx("proton-CopyInput-button",t&&"proton-CopyInput-button--copied"),onClick:e,type:"button","aria-label":t?"Copied":"Copy to clipboard",children:[o.jsx(C.Copy,{size:12}),o.jsx("span",{className:r.csx("proton-CopyInput-button-text",t&&"proton-CopyInput-button-text--copied"),children:t?"Copied!":"Copy"})]});exports.CopyInput=l;
 //# sourceMappingURL=CopyInput.cjs.js.map

package/dist/components/Input/CopyInput/CopyInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Copy as CopyIcon } from \"../../Icon\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({\n  isCopied,\n  onClick,\n}: {\n  isCopied: boolean;\n  onClick: () => void | Promise<void>;\n}) => {\n  return (\n    <button\n      data-testid=\"COPY_BUTTON\"\n      className={csx(\n        \"proton-CopyInput-button\",\n        isCopied && \"proton-CopyInput-button--copied\",\n      )}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={isCopied ? \"Copied\" : \"Copy to clipboard\"}\n    >\n      <CopyIcon size={12} />\n      <span\n        className={csx(\n          \"proton-CopyInput-button-text\",\n          isCopied && \"proton-CopyInput-button-text--copied\",\n        )}\n      >\n        {isCopied ? \"Copied!\" : \"Copy\"}\n      </span>\n    </button>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx","CopyIcon"],"mappings":"yXA8BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAE5C,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAAA,kBAAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,sBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACdF,GAAA,MAAAA,IACA,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CAAA,CACF,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAClB,SAAAL,EACA,QAAAO,CACF,IAKIC,EAAAA,kBAAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAAA,IACT,0BACAT,GAAY,iCAAA,EAEd,QAAAO,EACA,KAAK,SACL,aAAYP,EAAW,SAAW,oBAElC,SAAA,CAAAG,EAAAA,kBAAAA,IAACO,EAAAA,KAAA,CAAS,KAAM,EAAA,CAAI,EACpBP,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWM,EAAAA,IACT,+BACAT,GAAY,sCAAA,EAGb,WAAW,UAAY,MAAA,CAAA,CAC1B,CAAA,CAAA"}
+{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Copy as CopyIcon } from \"../../Icon\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({\n  isCopied,\n  onClick,\n}: {\n  isCopied: boolean;\n  onClick: () => void | Promise<void>;\n}) => {\n  return (\n    <button\n      data-testid=\"COPY_BUTTON\"\n      className={csx(\n        \"proton-CopyInput-button\",\n        isCopied && \"proton-CopyInput-button--copied\",\n      )}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={isCopied ? \"Copied\" : \"Copy to clipboard\"}\n    >\n      <CopyIcon size={12} />\n      <span\n        className={csx(\n          \"proton-CopyInput-button-text\",\n          isCopied && \"proton-CopyInput-button-text--copied\",\n        )}\n      >\n        {isCopied ? \"Copied!\" : \"Copy\"}\n      </span>\n    </button>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx","CopyIcon"],"mappings":"4VA8BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAE5C,OACEC,EAAAA,IAACC,EAAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,sBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACdF,GAAA,MAAAA,IACA,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CAAA,CACF,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAClB,SAAAL,EACA,QAAAO,CACF,IAKIC,EAAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAAA,IACT,0BACAT,GAAY,iCAAA,EAEd,QAAAO,EACA,KAAK,SACL,aAAYP,EAAW,SAAW,oBAElC,SAAA,CAAAG,EAAAA,IAACO,EAAAA,KAAA,CAAS,KAAM,EAAA,CAAI,EACpBP,EAAAA,IAAC,OAAA,CACC,UAAWM,EAAAA,IACT,+BACAT,GAAY,sCAAA,EAGb,WAAW,UAAY,MAAA,CAAA,CAC1B,CAAA,CAAA"}

package/dist/components/Input/CopyInput/CopyInput.es.js

@@ -1,40 +1,40 @@
-import { j as o } from "../../../node_modules/react/jsx-runtime.es.js";
-import { useState as a } from "react";
-import { copyTextToClipboard as m } from "../../../utils/copy.es.js";
-import { Input as y } from "../BaseInput/Input.es.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { copyTextToClipboard as y } from "../../../utils/copy.es.js";
+import { Input as c } from "../BaseInput/Input.es.js";
 /* empty css                 */
-import { Copy as c } from "../../Icon/IconComponents/Copy.es.js";
+import { Copy as C } from "../../Icon/IconComponents/Copy.es.js";
 import { csx as e } from "../../../utils/string.es.js";
-function N({
+function j({
   name: t,
-  value: p,
+  value: o,
   isDisabled: i,
-  onError: s,
+  onError: u,
   onSuccess: r
 }) {
-  const [u, n] = a(!1);
-  return /* @__PURE__ */ o.jsx(
-    y,
+  const [a, n] = s(!1);
+  return /* @__PURE__ */ p(
+    c,
     {
       name: t,
-      value: p,
+      value: o,
       isDisabled: i,
-      suffix: /* @__PURE__ */ o.jsx(
-        x,
+      suffix: /* @__PURE__ */ p(
+        f,
         {
-          isCopied: u,
+          isCopied: a,
           onClick: async () => {
-            await m(p, s) && (n(!0), r == null || r(), setTimeout(() => n(!1), 5e3));
+            await y(o, u) && (n(!0), r == null || r(), setTimeout(() => n(!1), 5e3));
           }
         }
       )
     }
   );
 }
-const x = ({
+const f = ({
   isCopied: t,
-  onClick: p
-}) => /* @__PURE__ */ o.jsxs(
+  onClick: o
+}) => /* @__PURE__ */ m(
   "button",
   {
     "data-testid": "COPY_BUTTON",
@@ -42,12 +42,12 @@ const x = ({
       "proton-CopyInput-button",
       t && "proton-CopyInput-button--copied"
     ),
-    onClick: p,
+    onClick: o,
     type: "button",
     "aria-label": t ? "Copied" : "Copy to clipboard",
     children: [
-      /* @__PURE__ */ o.jsx(c, { size: 12 }),
-      /* @__PURE__ */ o.jsx(
+      /* @__PURE__ */ p(C, { size: 12 }),
+      /* @__PURE__ */ p(
         "span",
         {
           className: e(
@@ -61,6 +61,6 @@ const x = ({
   }
 );
 export {
-  N as CopyInput
+  j as CopyInput
 };
 //# sourceMappingURL=CopyInput.es.js.map

package/dist/components/Input/CopyInput/CopyInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Copy as CopyIcon } from \"../../Icon\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({\n  isCopied,\n  onClick,\n}: {\n  isCopied: boolean;\n  onClick: () => void | Promise<void>;\n}) => {\n  return (\n    <button\n      data-testid=\"COPY_BUTTON\"\n      className={csx(\n        \"proton-CopyInput-button\",\n        isCopied && \"proton-CopyInput-button--copied\",\n      )}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={isCopied ? \"Copied\" : \"Copy to clipboard\"}\n    >\n      <CopyIcon size={12} />\n      <span\n        className={csx(\n          \"proton-CopyInput-button-text\",\n          isCopied && \"proton-CopyInput-button-text--copied\",\n        )}\n      >\n        {isCopied ? \"Copied!\" : \"Copy\"}\n      </span>\n    </button>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx","CopyIcon"],"mappings":";;;;;;;AA8BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAE5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACdF,KAAA,QAAAA,KACA,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC;AAAA,EAClB,UAAAL;AAAA,EACA,SAAAO;AACF,MAKIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IAAA;AAAA,IAEd,SAAAO;AAAA,IACA,MAAK;AAAA,IACL,cAAYP,IAAW,WAAW;AAAA,IAElC,UAAA;AAAA,MAAAG,gBAAAA,EAAAA,IAACO,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,MACpBP,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UAAA;AAAA,UAGb,cAAW,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Copy as CopyIcon } from \"../../Icon\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({\n  isCopied,\n  onClick,\n}: {\n  isCopied: boolean;\n  onClick: () => void | Promise<void>;\n}) => {\n  return (\n    <button\n      data-testid=\"COPY_BUTTON\"\n      className={csx(\n        \"proton-CopyInput-button\",\n        isCopied && \"proton-CopyInput-button--copied\",\n      )}\n      onClick={onClick}\n      type=\"button\"\n      aria-label={isCopied ? \"Copied\" : \"Copy to clipboard\"}\n    >\n      <CopyIcon size={12} />\n      <span\n        className={csx(\n          \"proton-CopyInput-button-text\",\n          isCopied && \"proton-CopyInput-button-text--copied\",\n        )}\n      >\n        {isCopied ? \"Copied!\" : \"Copy\"}\n      </span>\n    </button>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx","CopyIcon"],"mappings":";;;;;;;AA8BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAE5C,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACE,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACdF,KAAA,QAAAA,KACA,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC;AAAA,EAClB,UAAAL;AAAA,EACA,SAAAO;AACF,MAKI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IAAA;AAAA,IAEd,SAAAO;AAAA,IACA,MAAK;AAAA,IACL,cAAYP,IAAW,WAAW;AAAA,IAElC,UAAA;AAAA,MAAA,gBAAAG,EAACO,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,MACpB,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UAAA;AAAA,UAGb,cAAW,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAAA;"}

package/dist/components/Input/OTPInput/OTPInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../node_modules/react/jsx-runtime.cjs.js"),o=require("react");;/* empty css                  */const N=require("../../../utils/string.cjs.js"),R=s=>/^[0-9]+$/.test(s),T=(s,u)=>{const d=s.replace(/\D/g,"").split("").slice(0,u);return Array.from({length:u},(v,p)=>d[p]||"")},y=o.forwardRef(({length:s=6,isError:u=!1,errorMessage:d,isDisabled:v=!1,onChange:p,onComplete:j,showSeparator:$=!0,value:f,defaultValue:E,"data-testid":O="otp-input"},I)=>{s=s>0?s:0;const[i,_]=o.useState(()=>T(f??E??"",s)),n=o.useRef([]);n.current=n.current.slice(0,s),o.useEffect(()=>{f!==void 0&&_(T(f,s))},[f,s]),o.useEffect(()=>{var e;(e=n.current[0])==null||e.focus()},[]);const l=e=>{var t;(t=n.current[e])==null||t.focus()},m=e=>{_(e);const t=e.join("");p==null||p(t),t.length===s&&(j==null||j(t))},b=(e,t)=>{const a=e.target.value;if(R(a)){const r=[...i];r[t]=a,m(r),t<s-1&&l(t+1)}else if(a===""&&i[t]){const r=[...i];r[t]="",m(r),t>0&&l(t-1)}else e.target.value=i[t]||""},g=(e,t)=>{if(e.key==="Backspace"&&!i[t]&&t>0){const a=t-1,r=[...i];r[a]="",m(r),l(a)}},q=(e,t)=>{e.preventDefault();const a=e.clipboardData.getData("text").trim();if(!R(a))return;const r=s-t,P=a.slice(0,r).split(""),D=[...i.slice(0,t),...P,...i.slice(t+P.length)];m(D),setTimeout(()=>{l(Math.min(t+P.length,s-1))},0)};return c.jsxRuntimeExports.jsxs("div",{ref:I,role:"group","aria-label":"One-time password","data-testid":O,children:[u&&d&&c.jsxRuntimeExports.jsx("div",{className:"proton-OTPInput__error",children:d}),c.jsxRuntimeExports.jsx("div",{className:"proton-OTPInput__digits",children:i.map((e,t)=>c.jsxRuntimeExports.jsxs(o.Fragment,{children:[$&&s%2===0&&t===s/2&&c.jsxRuntimeExports.jsx("span",{className:"proton-OTPInput__separator","aria-hidden":"true",children:"-"}),c.jsxRuntimeExports.jsx("input",{ref:a=>{n.current[t]=a},id:`digit-${t+1}`,"data-testid":`${O}-digit-${t+1}`,type:"text",inputMode:"numeric",pattern:"[0-9]*",autoComplete:"one-time-code",maxLength:1,value:e,disabled:v,onChange:a=>b(a,t),onKeyUp:a=>g(a,t),onPaste:a=>q(a,t),className:N.csx("proton-OTPInput__digit",u&&"proton-OTPInput__digit--error"),"aria-label":`Digit ${t+1} of ${s}`,"aria-invalid":u})]},t))})]})});y.displayName="ProtonUIOTPInput";exports.OTPInput=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),o=require("react");;/* empty css                  */const S=require("../../../utils/string.cjs.js"),T=s=>/^[0-9]+$/.test(s),y=(s,c)=>{const d=s.replace(/\D/g,"").split("").slice(0,c);return Array.from({length:c},(O,p)=>d[p]||"")},I=o.forwardRef(({length:s=6,isError:c=!1,errorMessage:d,isDisabled:O=!1,onChange:p,onComplete:P,showSeparator:b=!0,value:f,defaultValue:$,"data-testid":_="otp-input"},g)=>{s=s>0?s:0;const[r,j]=o.useState(()=>y(f??$??"",s)),n=o.useRef([]);n.current=n.current.slice(0,s),o.useEffect(()=>{f!==void 0&&j(y(f,s))},[f,s]),o.useEffect(()=>{var a;(a=n.current[0])==null||a.focus()},[]);const l=a=>{var t;(t=n.current[a])==null||t.focus()},m=a=>{j(a);const t=a.join("");p==null||p(t),t.length===s&&(P==null||P(t))},D=(a,t)=>{const e=a.target.value;if(T(e)){const i=[...r];i[t]=e,m(i),t<s-1&&l(t+1)}else if(e===""&&r[t]){const i=[...r];i[t]="",m(i),t>0&&l(t-1)}else a.target.value=r[t]||""},N=(a,t)=>{if(a.key==="Backspace"&&!r[t]&&t>0){const e=t-1,i=[...r];i[e]="",m(i),l(e)}},R=(a,t)=>{a.preventDefault();const e=a.clipboardData.getData("text").trim();if(!T(e))return;const i=s-t,v=e.slice(0,i).split(""),q=[...r.slice(0,t),...v,...r.slice(t+v.length)];m(q),setTimeout(()=>{l(Math.min(t+v.length,s-1))},0)};return u.jsxs("div",{ref:g,role:"group","aria-label":"One-time password","data-testid":_,children:[c&&d&&u.jsx("div",{className:"proton-OTPInput__error",children:d}),u.jsx("div",{className:"proton-OTPInput__digits",children:r.map((a,t)=>u.jsxs(o.Fragment,{children:[b&&s%2===0&&t===s/2&&u.jsx("span",{className:"proton-OTPInput__separator","aria-hidden":"true",children:"-"}),u.jsx("input",{ref:e=>{n.current[t]=e},id:`digit-${t+1}`,"data-testid":`${_}-digit-${t+1}`,type:"text",inputMode:"numeric",pattern:"[0-9]*",autoComplete:"one-time-code",maxLength:1,value:a,disabled:O,onChange:e=>D(e,t),onKeyUp:e=>N(e,t),onPaste:e=>R(e,t),className:S.csx("proton-OTPInput__digit",c&&"proton-OTPInput__digit--error"),"aria-label":`Digit ${t+1} of ${s}`,"aria-invalid":c})]},t))})]})});I.displayName="ProtonUIOTPInput";exports.OTPInput=I;
 //# sourceMappingURL=OTPInput.cjs.js.map

package/dist/components/Input/OTPInput/OTPInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.cjs.js","sources":["../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, Fragment } from \"react\";\nimport type { ClipboardEvent, KeyboardEvent, ChangeEvent } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./OTPInput.css\";\n\nconst isValidEntry = (key: string) => /^[0-9]+$/.test(key);\n\nconst stringToValues = (s: string, length: number): string[] => {\n  const digits = s.replace(/\\D/g, \"\").split(\"\").slice(0, length);\n  return Array.from({ length }, (_, i) => digits[i] || \"\");\n};\n\nexport interface OTPInputProps {\n  /** Test ID for digit inputs \n   * @important The test id is applied to each digit as: \n   * ```\n   * ${dataTestId}-digit-${index + 1}\n   * ```\n  */\n  \"data-testid\"?: string;\n  /** Default value when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is in an error state. */\n  isError?: boolean;\n  /** Error message to display when the input is in an error state. */\n  errorMessage?: string;\n  /** Number of digit inputs to render.\n   * @default 6\n   */\n  length?: number;\n  /** Called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Called when all digits are filled. */\n  onComplete?: (value: string) => void;\n  /** Whether to show a separator dash in the middle (when length is even).\n   * @default true\n   */\n  showSeparator?: boolean;\n  /** Current value (controlled mode). */\n  value?: string;\n}\n\n/**\n * Numeric OTP number input with individual digit cells. Supports paste, keyboard navigation, and auto-focus.\n *\n * API:\n *  - {@link OTPInputProps}\n */\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      isError = false,\n      errorMessage,\n      isDisabled = false,\n      onChange,\n      onComplete,\n      showSeparator = true,\n      value: controlledValue,\n      defaultValue,\n      \"data-testid\": dataTestId = \"otp-input\",\n    },\n    ref,\n  ) => {\n    length = length > 0 ? length : 0;\n    const [values, setValues] = useState<string[]>(() =>\n      stringToValues(controlledValue ?? defaultValue ?? \"\", length),\n    );\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    inputRefs.current = inputRefs.current.slice(0, length);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setValues(stringToValues(controlledValue, length));\n      }\n    }, [controlledValue, length]);\n\n    useEffect(() => {\n      inputRefs.current[0]?.focus();\n    }, []);\n\n    const focusOnInput = (index: number) => {\n      inputRefs.current[index]?.focus();\n    };\n\n    const updateValues = (next: string[]) => {\n      setValues(next);\n      const joined = next.join(\"\");\n      onChange?.(joined);\n      if (joined.length === length) {\n        onComplete?.(joined);\n      }\n    };\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      const val = event.target.value;\n\n      if (isValidEntry(val)) {\n        const updated = [...values];\n        updated[index] = val;\n        updateValues(updated);\n        if (index < length - 1) focusOnInput(index + 1);\n      } else if (val === \"\" && values[index]) {\n        const updated = [...values];\n        updated[index] = \"\";\n        updateValues(updated);\n        if (index > 0) focusOnInput(index - 1);\n      } else {\n        event.target.value = values[index] || \"\";\n      }\n    };\n\n    const handleKeyUp = (\n      event: KeyboardEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      if (event.key === \"Backspace\" && !values[index] && index > 0) {\n        const prevIndex = index - 1;\n        const updated = [...values];\n        updated[prevIndex] = \"\";\n        updateValues(updated);\n        focusOnInput(prevIndex);\n      }\n    };\n\n    const handlePaste = (\n      event: ClipboardEvent<HTMLInputElement>,\n      currentIndex: number,\n    ) => {\n      event.preventDefault();\n      const pasted = event.clipboardData.getData(\"text\").trim();\n      if (!isValidEntry(pasted)) return;\n\n      const remaining = length - currentIndex;\n      const chars = pasted.slice(0, remaining).split(\"\");\n      const updated = [\n        ...values.slice(0, currentIndex),\n        ...chars,\n        ...values.slice(currentIndex + chars.length),\n      ];\n      updateValues(updated);\n      setTimeout(() => {\n        focusOnInput(Math.min(currentIndex + chars.length, length - 1));\n      }, 0);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"One-time password\"\n        data-testid={dataTestId}\n      >\n        {isError && errorMessage && (\n          <div className=\"proton-OTPInput__error\">{errorMessage}</div>\n        )}\n\n        <div className=\"proton-OTPInput__digits\">\n          {values.map((value, index) => (\n            <Fragment key={index}>\n              {showSeparator && length % 2 === 0 && index === length / 2 && (\n                <span className=\"proton-OTPInput__separator\" aria-hidden=\"true\">\n                  -\n                </span>\n              )}\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                id={`digit-${index + 1}`}\n                data-testid={`${dataTestId}-digit-${index + 1}`}\n                type=\"text\"\n                inputMode=\"numeric\"\n                pattern=\"[0-9]*\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={value}\n                disabled={isDisabled}\n                onChange={(e) => handleChange(e, index)}\n                onKeyUp={(e) => handleKeyUp(e, index)}\n                onPaste={(e) => handlePaste(e, index)}\n                className={csx(\n                  \"proton-OTPInput__digit\",\n                  isError && \"proton-OTPInput__digit--error\",\n                )}\n                aria-label={`Digit ${index + 1} of ${length}`}\n                aria-invalid={isError}\n              />\n            </Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"ProtonUIOTPInput\";\n"],"names":["isValidEntry","key","stringToValues","length","digits","_","i","OTPInput","forwardRef","isError","errorMessage","isDisabled","onChange","onComplete","showSeparator","controlledValue","defaultValue","dataTestId","ref","values","setValues","useState","inputRefs","useRef","useEffect","_a","focusOnInput","index","updateValues","next","joined","handleChange","event","val","updated","handleKeyUp","prevIndex","handlePaste","currentIndex","pasted","remaining","chars","jsxs","jsx","value","Fragment","el","e","csx"],"mappings":"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"}
+{"version":3,"file":"OTPInput.cjs.js","sources":["../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, Fragment } from \"react\";\nimport type { ClipboardEvent, KeyboardEvent, ChangeEvent } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./OTPInput.css\";\n\nconst isValidEntry = (key: string) => /^[0-9]+$/.test(key);\n\nconst stringToValues = (s: string, length: number): string[] => {\n  const digits = s.replace(/\\D/g, \"\").split(\"\").slice(0, length);\n  return Array.from({ length }, (_, i) => digits[i] || \"\");\n};\n\nexport interface OTPInputProps {\n  /** Test ID for digit inputs \n   * @important The test id is applied to each digit as: \n   * ```\n   * ${dataTestId}-digit-${index + 1}\n   * ```\n  */\n  \"data-testid\"?: string;\n  /** Default value when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is in an error state. */\n  isError?: boolean;\n  /** Error message to display when the input is in an error state. */\n  errorMessage?: string;\n  /** Number of digit inputs to render.\n   * @default 6\n   */\n  length?: number;\n  /** Called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Called when all digits are filled. */\n  onComplete?: (value: string) => void;\n  /** Whether to show a separator dash in the middle (when length is even).\n   * @default true\n   */\n  showSeparator?: boolean;\n  /** Current value (controlled mode). */\n  value?: string;\n}\n\n/**\n * Numeric OTP number input with individual digit cells. Supports paste, keyboard navigation, and auto-focus.\n *\n * API:\n *  - {@link OTPInputProps}\n */\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      isError = false,\n      errorMessage,\n      isDisabled = false,\n      onChange,\n      onComplete,\n      showSeparator = true,\n      value: controlledValue,\n      defaultValue,\n      \"data-testid\": dataTestId = \"otp-input\",\n    },\n    ref,\n  ) => {\n    length = length > 0 ? length : 0;\n    const [values, setValues] = useState<string[]>(() =>\n      stringToValues(controlledValue ?? defaultValue ?? \"\", length),\n    );\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    inputRefs.current = inputRefs.current.slice(0, length);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setValues(stringToValues(controlledValue, length));\n      }\n    }, [controlledValue, length]);\n\n    useEffect(() => {\n      inputRefs.current[0]?.focus();\n    }, []);\n\n    const focusOnInput = (index: number) => {\n      inputRefs.current[index]?.focus();\n    };\n\n    const updateValues = (next: string[]) => {\n      setValues(next);\n      const joined = next.join(\"\");\n      onChange?.(joined);\n      if (joined.length === length) {\n        onComplete?.(joined);\n      }\n    };\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      const val = event.target.value;\n\n      if (isValidEntry(val)) {\n        const updated = [...values];\n        updated[index] = val;\n        updateValues(updated);\n        if (index < length - 1) focusOnInput(index + 1);\n      } else if (val === \"\" && values[index]) {\n        const updated = [...values];\n        updated[index] = \"\";\n        updateValues(updated);\n        if (index > 0) focusOnInput(index - 1);\n      } else {\n        event.target.value = values[index] || \"\";\n      }\n    };\n\n    const handleKeyUp = (\n      event: KeyboardEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      if (event.key === \"Backspace\" && !values[index] && index > 0) {\n        const prevIndex = index - 1;\n        const updated = [...values];\n        updated[prevIndex] = \"\";\n        updateValues(updated);\n        focusOnInput(prevIndex);\n      }\n    };\n\n    const handlePaste = (\n      event: ClipboardEvent<HTMLInputElement>,\n      currentIndex: number,\n    ) => {\n      event.preventDefault();\n      const pasted = event.clipboardData.getData(\"text\").trim();\n      if (!isValidEntry(pasted)) return;\n\n      const remaining = length - currentIndex;\n      const chars = pasted.slice(0, remaining).split(\"\");\n      const updated = [\n        ...values.slice(0, currentIndex),\n        ...chars,\n        ...values.slice(currentIndex + chars.length),\n      ];\n      updateValues(updated);\n      setTimeout(() => {\n        focusOnInput(Math.min(currentIndex + chars.length, length - 1));\n      }, 0);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"One-time password\"\n        data-testid={dataTestId}\n      >\n        {isError && errorMessage && (\n          <div className=\"proton-OTPInput__error\">{errorMessage}</div>\n        )}\n\n        <div className=\"proton-OTPInput__digits\">\n          {values.map((value, index) => (\n            <Fragment key={index}>\n              {showSeparator && length % 2 === 0 && index === length / 2 && (\n                <span className=\"proton-OTPInput__separator\" aria-hidden=\"true\">\n                  -\n                </span>\n              )}\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                id={`digit-${index + 1}`}\n                data-testid={`${dataTestId}-digit-${index + 1}`}\n                type=\"text\"\n                inputMode=\"numeric\"\n                pattern=\"[0-9]*\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={value}\n                disabled={isDisabled}\n                onChange={(e) => handleChange(e, index)}\n                onKeyUp={(e) => handleKeyUp(e, index)}\n                onPaste={(e) => handlePaste(e, index)}\n                className={csx(\n                  \"proton-OTPInput__digit\",\n                  isError && \"proton-OTPInput__digit--error\",\n                )}\n                aria-label={`Digit ${index + 1} of ${length}`}\n                aria-invalid={isError}\n              />\n            </Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"ProtonUIOTPInput\";\n"],"names":["isValidEntry","key","stringToValues","length","digits","_","i","OTPInput","forwardRef","isError","errorMessage","isDisabled","onChange","onComplete","showSeparator","controlledValue","defaultValue","dataTestId","ref","values","setValues","useState","inputRefs","useRef","useEffect","_a","focusOnInput","index","updateValues","next","joined","handleChange","event","val","updated","handleKeyUp","prevIndex","handlePaste","currentIndex","pasted","remaining","chars","jsxs","jsx","value","Fragment","el","csx"],"mappings":"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"}