@protonradio/proton-ui 0.11.34 → 0.12.0

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

@@ -1,33 +1,34 @@
 import { j as n } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as K, useRef as x, useEffect as S } from "react";
-import { useTheme as U } from "../../ThemeProvider.es.js";
+import { forwardRef as B, useRef as x, useEffect as K } from "react";
+import { useMergedRef as M } from "../../../hooks/useMergedRef.es.js";
+import { useTheme as S } from "../../ThemeProvider.es.js";
 /* empty css             */
-import { copyTextToClipboard as g } from "../../../utils/copy.es.js";
+import { copyTextToClipboard as U } from "../../../utils/copy.es.js";
 import { csx as o } from "../../../utils/string.es.js";
-const G = K(
+const G = B(
   ({
-    prefix: l,
+    prefix: f,
     suffix: d,
     description: s,
     descriptionPosition: W = "top",
     isDisabled: y,
     error: i,
-    onChange: _,
-    label: f,
+    onChange: m,
+    label: l,
     name: a,
     placeholder: k,
     type: A = "text",
     value: b,
     autoFocus: P,
     autoComplete: T,
-    isRequired: m = !1,
+    isRequired: _ = !1,
     isReadOnly: j = !1,
     onSubmit: N,
     onClear: w,
     "data-testid": D
   }, O) => {
-    const $ = x(null), c = x(null), p = x(null), r = x(null), { className: q } = U(), B = O || $;
-    S(() => {
+    const R = x(null), p = x(null), c = x(null), r = x(null), { className: g } = S(), q = M(R, O);
+    K(() => {
       if (!r.current) return;
       const t = {
         containerWidth: 200,
@@ -46,15 +47,15 @@ const G = K(
                 `${e}px`
               ), t.containerWidth = e);
             }
-            if (c.current) {
-              const e = c.current.offsetWidth || t.prefixWidth;
+            if (p.current) {
+              const e = p.current.offsetWidth || t.prefixWidth;
               e !== t.prefixWidth && ((E = r.current) == null || E.style.setProperty(
                 "--prefix-width",
                 `${e}px`
               ), t.prefixWidth = e);
             }
-            if (p.current) {
-              const e = p.current.offsetWidth || t.suffixWidth;
+            if (c.current) {
+              const e = c.current.offsetWidth || t.suffixWidth;
               e !== t.suffixWidth && ((F = r.current) == null || F.style.setProperty(
                 "--suffix-width",
                 `${e}px`
@@ -65,11 +66,11 @@ const G = K(
       };
       z();
       const h = new ResizeObserver(z);
-      return r.current && h.observe(r.current), c.current && h.observe(c.current), p.current && h.observe(p.current), () => {
+      return r.current && h.observe(r.current), p.current && h.observe(p.current), c.current && h.observe(c.current), () => {
         u !== null && cancelAnimationFrame(u), h.disconnect();
       };
-    }, [l, d]);
-    const R = `${a}-input`, I = `${a}-error`, v = `${a}-description`;
+    }, [f, d]);
+    const $ = `${a}-input`, I = `${a}-error`, v = `${a}-description`;
     return /* @__PURE__ */ n.jsxs("div", { ref: r, className: "proton-Input__container", children: [
       s && W === "top" && /* @__PURE__ */ n.jsx(
         "div",
@@ -85,30 +86,30 @@ const G = K(
         {
           className: o(
             "proton-Input__container-inner",
-            l && "proton-Input__has-prefix",
+            f && "proton-Input__has-prefix",
             d && "proton-Input__has-suffix"
           ),
           children: [
-            l && /* @__PURE__ */ n.jsx(
+            f && /* @__PURE__ */ n.jsx(
               "div",
               {
-                ref: c,
+                ref: p,
                 className: o(
                   "proton-Input__descriptor",
                   "proton-Input__prefix"
                 ),
-                children: l
+                children: f
               }
             ),
             /* @__PURE__ */ n.jsx(
               "input",
               {
-                id: R,
+                id: $,
                 name: a,
                 type: A,
                 value: b,
                 onChange: (t) => {
-                  _ == null || _(t.target.value);
+                  m == null || m(t.target.value);
                 },
                 onKeyDown: (t) => {
                   switch (t.key) {
@@ -122,49 +123,49 @@ const G = K(
                 },
                 onCopy: async () => {
                   var t;
-                  return await g((t = $.current) == null ? void 0 : t.value);
+                  return await U(((t = R.current) == null ? void 0 : t.value) || "");
                 },
                 disabled: y,
                 readOnly: j,
-                required: m,
+                required: _,
                 autoFocus: P,
                 autoComplete: T ? "on" : "off",
-                placeholder: f ? void 0 : k,
-                "aria-label": f || a,
+                placeholder: l ? void 0 : k,
+                "aria-label": l || a,
                 "aria-invalid": !!i,
                 "aria-errormessage": typeof i == "string" ? i : I,
-                "aria-required": m,
+                "aria-required": _,
                 "aria-readonly": j,
                 "aria-describedby": i ? I : s ? v : void 0,
                 "aria-disabled": y,
                 "data-testid": D,
-                ref: B,
+                ref: q,
                 className: o(
                   "proton-Input",
                   i && "proton-Input--error",
-                  f && "proton-Input__label-top",
-                  q
+                  l && "proton-Input__label-top",
+                  g
                 )
               }
             ),
             /* @__PURE__ */ n.jsxs(
               "label",
               {
-                htmlFor: R,
+                htmlFor: $,
                 className: o(
                   "proton-Input__label",
                   b && "proton-Input__label--filled"
                 ),
                 children: [
-                  f,
-                  m && /* @__PURE__ */ n.jsx("span", { "aria-hidden": "true", children: " *" })
+                  l,
+                  _ && /* @__PURE__ */ n.jsx("span", { "aria-hidden": "true", children: " *" })
                 ]
               }
             ),
             d && /* @__PURE__ */ n.jsx(
               "div",
               {
-                ref: p,
+                ref: c,
                 className: o(
                   "proton-Input__descriptor",
                   "proton-Input__suffix"

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, { forwardRef, useEffect, useRef } from \"react\";\n\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: React.RefObject<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 ref = forwardedRef || inputRef;\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 = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-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: React.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={typeof error === \"string\" ? error : errorId}\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={ref}\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","ref","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, { forwardRef, useEffect, useRef, type ForwardedRef } 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\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 = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-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: React.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={typeof error === \"string\" ? error : errorId}\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","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 p=require("../../../utils/string.cjs.js"),y=require("../../Icon/IconComponents/Copy.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("../../../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;
 //# 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 = ({ isCopied, onClick }) => {\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,WAAS,EAAK,EAG1C,OAAAC,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAA,kBAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,EAAAA,oBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACFF,GAAA,MAAAA,IACZ,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CACF,CAAA,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAAE,SAAAL,EAAU,QAAAO,KAE5BC,EAAA,kBAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAA,IACT,0BACAT,GAAY,iCACd,EACA,QAAAO,EACA,KAAK,SACL,aAAYP,EAAW,SAAW,oBAElC,SAAA,CAACG,EAAAA,kBAAAA,IAAAO,EAAA,KAAA,CAAS,KAAM,EAAI,CAAA,EACpBP,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWM,EAAA,IACT,+BACAT,GAAY,sCACd,EAEC,WAAW,UAAY,MAAA,CAC1B,CAAA,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":"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"}

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

@@ -3,8 +3,8 @@ import { useState as a } from "react";
 import { copyTextToClipboard as m } from "../../../utils/copy.es.js";
 import { Input as y } from "../BaseInput/Input.es.js";
 /* empty css                 */
-import { csx as e } from "../../../utils/string.es.js";
 import { Copy as c } from "../../Icon/IconComponents/Copy.es.js";
+import { csx as e } from "../../../utils/string.es.js";
 function N({
   name: t,
   value: p,
@@ -31,7 +31,10 @@ function N({
     }
   );
 }
-const x = ({ isCopied: t, onClick: p }) => /* @__PURE__ */ o.jsxs(
+const x = ({
+  isCopied: t,
+  onClick: p
+}) => /* @__PURE__ */ o.jsxs(
   "button",
   {
     "data-testid": "COPY_BUTTON",

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 = ({ isCopied, onClick }) => {\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;AAG1C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACFF,KAAA,QAAAA,KACZ,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC,EAAE,UAAAL,GAAU,SAAAO,QAE5BC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IACd;AAAA,IACA,SAAAO;AAAA,IACA,MAAK;AAAA,IACL,cAAYP,IAAW,WAAW;AAAA,IAElC,UAAA;AAAA,MAACG,gBAAAA,EAAAA,IAAAO,GAAA,EAAS,MAAM,GAAI,CAAA;AAAA,MACpBP,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UACd;AAAA,UAEC,cAAW,YAAY;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;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,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;"}

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 q=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 a;(a=n.current[0])==null||a.focus()},[]);const l=a=>{var t;(t=n.current[a])==null||t.focus()},m=a=>{_(a);const t=a.join("");p==null||p(t),t.length===s&&(j==null||j(t))},b=(a,t)=>{const e=a.target.value;if(R(e)){const r=[...i];r[t]=e,m(r),t<s-1&&l(t+1)}else if(e===""&&i[t]){const r=[...i];r[t]="",m(r),t>0&&l(t-1)}else a.target.value=i[t]||""},g=(a,t)=>{if(a.key==="Backspace"&&!i[t]&&t>0){const e=t-1,r=[...i];r[e]="",m(r),l(e)}},D=(a,t)=>{a.preventDefault();const e=a.clipboardData.getData("text").trim();if(!R(e))return;const r=s-t,P=e.slice(0,r).split(""),N=[...i.slice(0,t),...P,...i.slice(t+P.length)];m(N),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((a,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:e=>{n.current[t]=e},id:`digit-${t+1}`,"data-testid":`${O}-digit-${t+1}`,type:"text",inputMode:"numeric",pattern:"[0-9]*",autoComplete:"one-time-code",maxLength:1,value:a,disabled:v,onChange:e=>b(e,t),onKeyUp:e=>g(e,t),onPaste:e=>D(e,t),className:q.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 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;
 //# 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  \"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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"}
+{"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  \"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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.es.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  \"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.es.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  \"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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Search as SearchIcon } from \"../../Icon\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSA0CaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CAChB,MAAAC,EAAWC,SAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAS,SAAAR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAC1B,EACC,CAACA,CAAe,CAAC,EAEd,MAAAU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EAAQ,EAGfC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACDC,GAAA,MAAAA,KACVU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OAAM,EAIxB,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAM,OAAA,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAgB,kBAAA,CAAA,EACvBA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CACJ,CAAA,CAAA,CACF,EAEF,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAA,IACT,6BACA,2BACA,sBACF,EACA,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CACJ,CAAA,CAAA,CACF,CAAA,CAAA,EAEA,IAAA,CAER,CAAA,CAAA,CAGN"}
+{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Search as SearchIcon } from \"../../Icon\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSA0CaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CACtB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAE5B,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EACb,EAEMC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACXC,GAAA,MAAAA,KACAU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OACpB,EAEA,OACEC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAA,OAAM,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAA,kBAAA,CAAgB,EACvBA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CAAA,CACJ,CAAA,CAAA,EAGJ,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAAA,IACT,6BACA,2BACA,sBAAA,EAEF,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAA,OAAA,CAAK,EACZA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CAAA,CACJ,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAER,CAAA,CAGN"}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Search as SearchIcon } from \"../../Icon\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AA0CO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Search as SearchIcon } from \"../../Icon\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\",\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AA0CO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAE5B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EACb,GAEMC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACXC,KAAA,QAAAA,MACAU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EACpB;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAA;;AAAM,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAA,mBAAA,CAAgB;AAAA,gBACvBA,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAA,QAAA,CAAK;AAAA,oBACZA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEJA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGN;"}

package/dist/components/Menu/MenuTrigger.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react"),b=require("../../hooks/useBreakpoint.cjs.js"),O=require("../ActionMenu/ActionMenu.cjs.js"),k=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const y=require("../Icon/IconComponents/Ellipsis.cjs.js"),A=require("../../constants/breakpoint.cjs.js");function f({renderTrigger:a,size:R=24,title:c,items:p,disabled:g,onClose:s,triggerTestId:d="MenuTrigger-Trigger",menuTestId:q,onSelectionChange:i,selectedKey:u,disabledKeys:x}){const E=b.useBreakpoint(A.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),T=o.useRef(null),l=o.useMemo(()=>p.map(t=>({...t,id:t.key})),[p]),m=t=>{i==null||i(t),n(!1)},M=a?a({isOpen:e,disabled:g,setIsOpen:n}):r.jsxRuntimeExports.jsx("button",{"data-testid":d,disabled:g,className:"proton-MenuTrigger__button",ref:T,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:r.jsxRuntimeExports.jsx(y.Ellipsis,{size:R})});return E?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[M,e&&r.jsxRuntimeExports.jsx(O.ActionMenu,{actions:l,title:c,isOpen:e,onClose:()=>{n(!1),s==null||s()},showCancel:!0,"data-testid":q,selectionMode:"single",onSelectionChange:t=>{const j=Array.from(t)[0];j&&m(j)},selectedKeys:u?[u]:void 0,disabledKeys:x})]}):r.jsxRuntimeExports.jsx(k.PopoverMenu,{trigger:M,items:l,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:m,disabledKeys:x,title:c})}f.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react"),b=require("../../hooks/useBreakpoint.cjs.js"),O=require("../ActionMenu/ActionMenu.cjs.js"),k=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const y=require("../Icon/IconComponents/Ellipsis.cjs.js"),A=require("../../constants/breakpoint.cjs.js");function f({renderTrigger:a,size:q=24,title:c,items:p,disabled:g,onClose:s,triggerTestId:R="MenuTrigger-Trigger",menuTestId:d,onSelectionChange:i,selectedKey:u,disabledKeys:x}){const E=b.useBreakpoint(A.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),T=o.useRef(null),l=o.useMemo(()=>p.map(r=>({...r,id:r.key})),[p]),m=r=>{i==null||i(r),n(!1)},M=a?a({isOpen:e,disabled:g,setIsOpen:n}):t.jsxRuntimeExports.jsx("button",{"data-testid":R,disabled:g,className:"proton-MenuTrigger__button",ref:T,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:t.jsxRuntimeExports.jsx(y.Ellipsis,{size:q})});return E?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[M,e&&t.jsxRuntimeExports.jsx(O.ActionMenu,{actions:l,title:c,isOpen:e,onClose:()=>{n(!1),s==null||s()},showCancel:!0,"data-testid":d,selectionMode:"single",onSelectionChange:r=>{const j=Array.from(r)[0];j&&m(j)},selectedKeys:u?[u]:void 0,disabledKeys:x})]}):t.jsxRuntimeExports.jsx(k.PopoverMenu,{trigger:M,items:l,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:m,disabledKeys:x,title:c})}f.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=f;
 //# sourceMappingURL=MenuTrigger.cjs.js.map

package/dist/components/Menu/MenuTrigger.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"ycAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACN,MAAAC,EAAWC,EAAAA,cAAcC,EAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAaC,SAA0B,IAAI,EAE3CC,EAAYC,EAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CAAA,EAGXS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CACD,CAAA,EAEDU,EAAA,kBAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAA,kBAAA,IAACC,YAAa,KAAAzB,CAAY,CAAA,CAAA,CAAA,EAI9B,OAAIU,EAGGgB,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAAAJ,EACAV,GACCW,EAAA,kBAAA,IAACI,EAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACLV,GAAA,MAAAA,GACZ,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CACF,CAEJ,CAAA,CAAA,EAKFe,EAAA,kBAAA,IAACO,EAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}
+{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"ycAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACZ,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpCC,EAAaC,EAAAA,OAA0B,IAAI,EAE3CC,EAAYC,EAAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CACjB,EAEMS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CAAA,CACD,EAEDU,EAAAA,kBAAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAAA,kBAAAA,IAACC,YAAa,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAI9B,OAAIU,EAEAgB,EAAAA,kBAAAA,KAAAC,6BAAA,CACG,SAAA,CAAAJ,EACAV,GACCW,EAAAA,kBAAAA,IAACI,EAAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACfV,GAAA,MAAAA,GACF,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CAAA,CACF,EAEJ,EAKFe,EAAAA,kBAAAA,IAACO,EAAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}