@protonradio/proton-ui 0.12.5 → 0.12.7

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"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"}
+{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox `input` element. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"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"}

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxRadioGroup.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, useId } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const idBase = useId();\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item, index) => {\n            const itemId = `${idBase}-item-${index}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","idBase","useId","errorId","jsx","RadixRadioGroup","csx","item","index","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"oXAqGaA,EAAqBC,EAAAA,WAIhC,CACE,CACE,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,YAAAC,EAAc,WACd,MAAAC,EAAQ,GACR,MAAAC,EACA,cAAeC,CAAA,EAEjBC,IACG,CACH,MAAMC,EAASC,EAAAA,MAAA,EACTC,EAAU,OAAOL,GAAU,SAAW,GAAGG,CAAM,SAAW,OAEhE,gCACG,MAAA,CACC,SAAA,CAAAG,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAL,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWU,EAAAA,IACT,4BACA,8BAA8BV,CAAW,EAAA,EAE3C,eAAc,EAAQE,EACtB,oBAAmBK,EACnB,cAAaJ,EAEZ,SAAAT,EAAM,IAAI,CAACiB,EAAMC,IAAU,CAC1B,MAAMC,EAAS,GAAGR,CAAM,SAASO,CAAK,GAChCE,EAAehB,GAAca,EAAK,WAClCI,EACJ,OAAOJ,EAAK,aAAgB,SACxB,GAAGE,CAAM,eACT,OAEN,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CAEC,UAAWN,EAAAA,IACTI,GAAgB,gCAAA,EAGlB,SAAA,CAAAE,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWN,EAAAA,IACT,kCACAT,GAAS,wCAAA,EAGX,SAAA,CAAAO,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAII,EACJ,MAAOF,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAAA,IACT,8BACAT,GAAS,qCACTC,GAAS,oCAAA,EAEX,mBAAkBa,EAElB,SAAAP,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,UAAhB,CACC,UAAWC,EAAAA,IACT,CAACT,GAAS,sCAAA,EAEZ,WAAU,GAEV,SAAAO,EAAAA,kBAAAA,IAACS,qBAAkB,MAAAhB,CAAA,CAAc,CAAA,CAAA,CACnC,CAAA,EAGD,OAAOU,EAAK,OAAU,SACrBH,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASK,EACT,UAAU,8BAET,SAAAF,EAAK,KAAA,CAAA,EAGRA,EAAK,KAAA,CAAA,CAAA,EAIR,OAAOA,EAAK,aAAgB,SAC3BH,EAAAA,kBAAAA,IAAC,MAAA,CACC,GAAIO,EACJ,UAAU,yCAET,SAAAJ,EAAK,WAAA,CAAA,EAGRA,EAAK,WAAA,CAAA,EApDFA,EAAK,KAAA,CAwDhB,CAAC,CAAA,CAAA,EAGF,OAAOT,GAAU,SAChBM,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAL,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAX,EAAmB,YAAc"}
+{"version":3,"file":"CheckboxRadioGroup.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, useId } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group elemnt `RadixRadioGroup.Root`\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const idBase = useId();\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item, index) => {\n            const itemId = `${idBase}-item-${index}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","idBase","useId","errorId","jsx","RadixRadioGroup","csx","item","index","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"oXAqGaA,EAAqBC,EAAAA,WAIhC,CACE,CACE,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,YAAAC,EAAc,WACd,MAAAC,EAAQ,GACR,MAAAC,EACA,cAAeC,CAAA,EAEjBC,IACG,CACH,MAAMC,EAASC,EAAAA,MAAA,EACTC,EAAU,OAAOL,GAAU,SAAW,GAAGG,CAAM,SAAW,OAEhE,gCACG,MAAA,CACC,SAAA,CAAAG,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,IAAAL,EACA,KAAAX,EACA,MAAAE,EACA,aAAAC,EACA,cAAeC,EACf,SAAUC,EACV,SAAUC,EACV,YAAAC,EACA,UAAWU,EAAAA,IACT,4BACA,8BAA8BV,CAAW,EAAA,EAE3C,eAAc,EAAQE,EACtB,oBAAmBK,EACnB,cAAaJ,EAEZ,SAAAT,EAAM,IAAI,CAACiB,EAAMC,IAAU,CAC1B,MAAMC,EAAS,GAAGR,CAAM,SAASO,CAAK,GAChCE,EAAehB,GAAca,EAAK,WAClCI,EACJ,OAAOJ,EAAK,aAAgB,SACxB,GAAGE,CAAM,eACT,OAEN,OACEG,EAAAA,kBAAAA,KAAC,MAAA,CAEC,UAAWN,EAAAA,IACTI,GAAgB,gCAAA,EAGlB,SAAA,CAAAE,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWN,EAAAA,IACT,kCACAT,GAAS,wCAAA,EAGX,SAAA,CAAAO,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,KAAhB,CACC,GAAII,EACJ,MAAOF,EAAK,MACZ,SAAUA,EAAK,WACf,UAAWD,EAAAA,IACT,8BACAT,GAAS,qCACTC,GAAS,oCAAA,EAEX,mBAAkBa,EAElB,SAAAP,EAAAA,kBAAAA,IAACC,EAAAA,WAAgB,UAAhB,CACC,UAAWC,EAAAA,IACT,CAACT,GAAS,sCAAA,EAEZ,WAAU,GAEV,SAAAO,EAAAA,kBAAAA,IAACS,qBAAkB,MAAAhB,CAAA,CAAc,CAAA,CAAA,CACnC,CAAA,EAGD,OAAOU,EAAK,OAAU,SACrBH,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASK,EACT,UAAU,8BAET,SAAAF,EAAK,KAAA,CAAA,EAGRA,EAAK,KAAA,CAAA,CAAA,EAIR,OAAOA,EAAK,aAAgB,SAC3BH,EAAAA,kBAAAA,IAAC,MAAA,CACC,GAAIO,EACJ,UAAU,yCAET,SAAAJ,EAAK,WAAA,CAAA,EAGRA,EAAK,WAAA,CAAA,EApDFA,EAAK,KAAA,CAwDhB,CAAC,CAAA,CAAA,EAGF,OAAOT,GAAU,SAChBM,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAU,8BACV,GAAID,EAEH,SAAAL,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAX,EAAmB,YAAc"}

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxRadioGroup.es.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, useId } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const idBase = useId();\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item, index) => {\n            const itemId = `${idBase}-item-${index}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","idBase","useId","errorId","jsx","RadixRadioGroup","csx","item","index","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"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"}
+{"version":3,"file":"CheckboxRadioGroup.es.js","sources":["../../../../src/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, useId } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\n\nimport { csx } from \"../../../utils\";\nimport \"../CheckboxInput/CheckboxInput.css\";\nimport \"./CheckboxRadioGroup.css\";\n\nexport interface CheckboxRadioGroupItem {\n  /**\n   * Unique value for the radio option.\n   */\n  value: string;\n\n  /**\n   * Label displayed next to the radio button.\n   */\n  label: string | ReactNode;\n\n  /**\n   * Optional description text below the label.\n   */\n  description?: string | ReactNode;\n\n  /**\n   * Whether this specific option is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n}\n\nexport interface CheckboxRadioGroupProps {\n  /**\n   * The name attribute for the radio group (for form submission).\n   */\n  name: string;\n\n  /**\n   * Array of radio options.\n   */\n  items: CheckboxRadioGroupItem[];\n\n  /**\n   * Currently selected value (controlled mode).\n   */\n  value?: string;\n\n  /**\n   * Default selected value (uncontrolled mode).\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when selection changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * Whether the entire group is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether selection is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Error message or element.\n   */\n  error?: ReactNode | string;\n\n  /**\n   * Layout orientation.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n\n  /**\n   * Whether radio buttons are round or square.\n   * @default false\n   */\n  round?: boolean;\n\n  /**\n   * Test ID for the group elemnt `RadixRadioGroup.Root`\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A declaritive radio group for single-select lists.\n *\n * API:\n *  - {@link CheckboxRadioGroupProps}\n *  - {@link CheckboxRadioGroupItem}\n */\nexport const CheckboxRadioGroup = forwardRef<\n  HTMLDivElement,\n  CheckboxRadioGroupProps\n>(\n  (\n    {\n      name,\n      items,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled = false,\n      isRequired = false,\n      orientation = \"vertical\",\n      round = false,\n      error,\n      \"data-testid\": testId,\n    },\n    ref,\n  ) => {\n    const idBase = useId();\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n\n    return (\n      <div>\n        <RadixRadioGroup.Root\n          ref={ref}\n          name={name}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onChange}\n          disabled={isDisabled}\n          required={isRequired}\n          orientation={orientation}\n          className={csx(\n            \"proton-CheckboxRadioGroup\",\n            `proton-CheckboxRadioGroup--${orientation}`,\n          )}\n          aria-invalid={Boolean(error)}\n          aria-errormessage={errorId}\n          data-testid={testId}\n        >\n          {items.map((item, index) => {\n            const itemId = `${idBase}-item-${index}`;\n            const itemDisabled = isDisabled || item.isDisabled;\n            const descriptionId =\n              typeof item.description === \"string\"\n                ? `${itemId}-description`\n                : undefined;\n\n            return (\n              <div\n                key={item.value}\n                className={csx(\n                  itemDisabled && \"proton-CheckboxInput--disabled\",\n                )}\n              >\n                <div\n                  className={csx(\n                    \"proton-CheckboxInput__container\",\n                    round && \"proton-CheckboxInput__container--round\",\n                  )}\n                >\n                  <RadixRadioGroup.Item\n                    id={itemId}\n                    value={item.value}\n                    disabled={item.isDisabled}\n                    className={csx(\n                      \"proton-CheckboxInput__input\",\n                      round && \"proton-CheckboxInput__input--round\",\n                      error && \"proton-CheckboxInput__input--error\",\n                    )}\n                    aria-describedby={descriptionId}\n                  >\n                    <RadixRadioGroup.Indicator\n                      className={csx(\n                        !round && \"proton-CheckboxRadioGroup__checkmark\",\n                      )}\n                      forceMount\n                    >\n                      <CheckboxIndicator round={round} />\n                    </RadixRadioGroup.Indicator>\n                  </RadixRadioGroup.Item>\n\n                  {typeof item.label === \"string\" ? (\n                    <label\n                      htmlFor={itemId}\n                      className=\"proton-CheckboxInput__label\"\n                    >\n                      {item.label}\n                    </label>\n                  ) : (\n                    item.label\n                  )}\n                </div>\n\n                {typeof item.description === \"string\" ? (\n                  <div\n                    id={descriptionId}\n                    className=\"proton-CheckboxRadioGroup__description\"\n                  >\n                    {item.description}\n                  </div>\n                ) : (\n                  item.description\n                )}\n              </div>\n            );\n          })}\n        </RadixRadioGroup.Root>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className=\"proton-CheckboxInput__error\"\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxRadioGroup.displayName = \"ProtonUICheckboxRadioGroup\";\n"],"names":["CheckboxRadioGroup","forwardRef","name","items","value","defaultValue","onChange","isDisabled","isRequired","orientation","round","error","testId","ref","idBase","useId","errorId","jsx","RadixRadioGroup","csx","item","index","itemId","itemDisabled","descriptionId","jsxs","CheckboxIndicator"],"mappings":"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"}

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

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

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

package/dist/components/Input/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","e","csx"],"mappings":"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"}
+{"version":3,"file":"OTPInput.cjs.js","sources":["../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, Fragment } from \"react\";\nimport type { ClipboardEvent, KeyboardEvent, ChangeEvent } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./OTPInput.css\";\n\nconst isValidEntry = (key: string) => /^[0-9]+$/.test(key);\n\nconst stringToValues = (s: string, length: number): string[] => {\n  const digits = s.replace(/\\D/g, \"\").split(\"\").slice(0, length);\n  return Array.from({ length }, (_, i) => digits[i] || \"\");\n};\n\nexport interface OTPInputProps {\n  /** Test ID for digit inputs \n   * @important The test id is applied to each digit as: \n   * ```\n   * ${dataTestId}-digit-${index + 1}\n   * ```\n  */\n  \"data-testid\"?: string;\n  /** Default value when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is in an error state. */\n  isError?: boolean;\n  /** Error message to display when the input is in an error state. */\n  errorMessage?: string;\n  /** Number of digit inputs to render.\n   * @default 6\n   */\n  length?: number;\n  /** Called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Called when all digits are filled. */\n  onComplete?: (value: string) => void;\n  /** Whether to show a separator dash in the middle (when length is even).\n   * @default true\n   */\n  showSeparator?: boolean;\n  /** Current value (controlled mode). */\n  value?: string;\n}\n\n/**\n * Numeric OTP number input with individual digit cells. Supports paste, keyboard navigation, and auto-focus.\n *\n * API:\n *  - {@link OTPInputProps}\n */\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      isError = false,\n      errorMessage,\n      isDisabled = false,\n      onChange,\n      onComplete,\n      showSeparator = true,\n      value: controlledValue,\n      defaultValue,\n      \"data-testid\": dataTestId = \"otp-input\",\n    },\n    ref,\n  ) => {\n    length = length > 0 ? length : 0;\n    const [values, setValues] = useState<string[]>(() =>\n      stringToValues(controlledValue ?? defaultValue ?? \"\", length),\n    );\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    inputRefs.current = inputRefs.current.slice(0, length);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setValues(stringToValues(controlledValue, length));\n      }\n    }, [controlledValue, length]);\n\n    useEffect(() => {\n      inputRefs.current[0]?.focus();\n    }, []);\n\n    const focusOnInput = (index: number) => {\n      inputRefs.current[index]?.focus();\n    };\n\n    const updateValues = (next: string[]) => {\n      setValues(next);\n      const joined = next.join(\"\");\n      onChange?.(joined);\n      if (joined.length === length) {\n        onComplete?.(joined);\n      }\n    };\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      const val = event.target.value;\n\n      if (isValidEntry(val)) {\n        const updated = [...values];\n        updated[index] = val;\n        updateValues(updated);\n        if (index < length - 1) focusOnInput(index + 1);\n      } else if (val === \"\" && values[index]) {\n        const updated = [...values];\n        updated[index] = \"\";\n        updateValues(updated);\n        if (index > 0) focusOnInput(index - 1);\n      } else {\n        event.target.value = values[index] || \"\";\n      }\n    };\n\n    const handleKeyUp = (\n      event: KeyboardEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      if (event.key === \"Backspace\" && !values[index] && index > 0) {\n        const prevIndex = index - 1;\n        const updated = [...values];\n        updated[prevIndex] = \"\";\n        updateValues(updated);\n        focusOnInput(prevIndex);\n      }\n    };\n\n    const handlePaste = (\n      event: ClipboardEvent<HTMLInputElement>,\n      currentIndex: number,\n    ) => {\n      event.preventDefault();\n      const pasted = event.clipboardData.getData(\"text\").trim();\n      if (!isValidEntry(pasted)) return;\n\n      const remaining = length - currentIndex;\n      const chars = pasted.slice(0, remaining).split(\"\");\n      const updated = [\n        ...values.slice(0, currentIndex),\n        ...chars,\n        ...values.slice(currentIndex + chars.length),\n      ];\n      updateValues(updated);\n      setTimeout(() => {\n        focusOnInput(Math.min(currentIndex + chars.length, length - 1));\n      }, 0);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"One-time password\"\n        data-testid={dataTestId}\n      >\n        {isError && errorMessage && (\n          <div className=\"proton-OTPInput__error\">{errorMessage}</div>\n        )}\n\n        <div className=\"proton-OTPInput__digits\">\n          {values.map((value, index) => (\n            <Fragment key={index}>\n              {showSeparator && length % 2 === 0 && index === length / 2 && (\n                <span className=\"proton-OTPInput__separator\" aria-hidden=\"true\">\n                  -\n                </span>\n              )}\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                id={`digit-${index + 1}`}\n                data-testid={`${dataTestId}-digit-${index + 1}`}\n                type=\"text\"\n                inputMode=\"numeric\"\n                pattern=\"[0-9]*\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={value}\n                disabled={isDisabled}\n                onChange={(e) => handleChange(e, index)}\n                onKeyUp={(e) => handleKeyUp(e, index)}\n                onPaste={(e) => handlePaste(e, index)}\n                className={csx(\n                  \"proton-OTPInput__digit\",\n                  isError && \"proton-OTPInput__digit--error\",\n                )}\n                aria-label={`Digit ${index + 1} of ${length}`}\n                aria-invalid={isError}\n              />\n            </Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"ProtonUIOTPInput\";\n"],"names":["isValidEntry","key","stringToValues","length","digits","_","i","OTPInput","forwardRef","isError","errorMessage","isDisabled","onChange","onComplete","showSeparator","controlledValue","defaultValue","dataTestId","ref","values","setValues","useState","inputRefs","useRef","useEffect","_a","focusOnInput","index","updateValues","next","joined","handleChange","event","val","updated","handleKeyUp","prevIndex","handlePaste","currentIndex","pasted","remaining","chars","jsxs","jsx","value","Fragment","el","e","csx"],"mappings":"sPAQMA,EAAgBC,GAAgB,WAAW,KAAKA,CAAG,EAEnDC,EAAiB,CAAC,EAAWC,IAA6B,CAC9D,MAAMC,EAAS,EAAE,QAAQ,MAAO,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAGD,CAAM,EAC7D,OAAO,MAAM,KAAK,CAAE,OAAAA,GAAU,CAACE,EAAGC,IAAMF,EAAOE,CAAC,GAAK,EAAE,CACzD,EAwCaC,EAAWC,EAAAA,WACtB,CACE,CACE,OAAAL,EAAS,EACT,QAAAM,EAAU,GACV,aAAAC,EACA,WAAAC,EAAa,GACb,SAAAC,EACA,WAAAC,EACA,cAAAC,EAAgB,GAChB,MAAOC,EACP,aAAAC,EACA,cAAeC,EAAa,WAAA,EAE9BC,IACG,CACHf,EAASA,EAAS,EAAIA,EAAS,EAC/B,KAAM,CAACgB,EAAQC,CAAS,EAAIC,EAAAA,SAAmB,IAC7CnB,EAAea,GAAmBC,GAAgB,GAAIb,CAAM,CAAA,EAExDmB,EAAYC,EAAAA,OAAoC,EAAE,EACxDD,EAAU,QAAUA,EAAU,QAAQ,MAAM,EAAGnB,CAAM,EAErDqB,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBK,EAAUlB,EAAea,EAAiBZ,CAAM,CAAC,CAErD,EAAG,CAACY,EAAiBZ,CAAM,CAAC,EAE5BqB,EAAAA,UAAU,IAAM,QACdC,EAAAH,EAAU,QAAQ,CAAC,IAAnB,MAAAG,EAAsB,OACxB,EAAG,CAAA,CAAE,EAEL,MAAMC,EAAgBC,GAAkB,QACtCF,EAAAH,EAAU,QAAQK,CAAK,IAAvB,MAAAF,EAA0B,OAC5B,EAEMG,EAAgBC,GAAmB,CACvCT,EAAUS,CAAI,EACd,MAAMC,EAASD,EAAK,KAAK,EAAE,EAC3BjB,GAAA,MAAAA,EAAWkB,GACPA,EAAO,SAAW3B,IACpBU,GAAA,MAAAA,EAAaiB,GAEjB,EAEMC,EAAe,CACnBC,EACAL,IACG,CACH,MAAMM,EAAMD,EAAM,OAAO,MAEzB,GAAIhC,EAAaiC,CAAG,EAAG,CACrB,MAAMC,EAAU,CAAC,GAAGf,CAAM,EAC1Be,EAAQP,CAAK,EAAIM,EACjBL,EAAaM,CAAO,EAChBP,EAAQxB,EAAS,GAAGuB,EAAaC,EAAQ,CAAC,CAChD,SAAWM,IAAQ,IAAMd,EAAOQ,CAAK,EAAG,CACtC,MAAMO,EAAU,CAAC,GAAGf,CAAM,EAC1Be,EAAQP,CAAK,EAAI,GACjBC,EAAaM,CAAO,EAChBP,EAAQ,GAAGD,EAAaC,EAAQ,CAAC,CACvC,MACEK,EAAM,OAAO,MAAQb,EAAOQ,CAAK,GAAK,EAE1C,EAEMQ,EAAc,CAClBH,EACAL,IACG,CACH,GAAIK,EAAM,MAAQ,aAAe,CAACb,EAAOQ,CAAK,GAAKA,EAAQ,EAAG,CAC5D,MAAMS,EAAYT,EAAQ,EACpBO,EAAU,CAAC,GAAGf,CAAM,EAC1Be,EAAQE,CAAS,EAAI,GACrBR,EAAaM,CAAO,EACpBR,EAAaU,CAAS,CACxB,CACF,EAEMC,EAAc,CAClBL,EACAM,IACG,CACHN,EAAM,eAAA,EACN,MAAMO,EAASP,EAAM,cAAc,QAAQ,MAAM,EAAE,KAAA,EACnD,GAAI,CAAChC,EAAauC,CAAM,EAAG,OAE3B,MAAMC,EAAYrC,EAASmC,EACrBG,EAAQF,EAAO,MAAM,EAAGC,CAAS,EAAE,MAAM,EAAE,EAC3CN,EAAU,CACd,GAAGf,EAAO,MAAM,EAAGmB,CAAY,EAC/B,GAAGG,EACH,GAAGtB,EAAO,MAAMmB,EAAeG,EAAM,MAAM,CAAA,EAE7Cb,EAAaM,CAAO,EACpB,WAAW,IAAM,CACfR,EAAa,KAAK,IAAIY,EAAeG,EAAM,OAAQtC,EAAS,CAAC,CAAC,CAChE,EAAG,CAAC,CACN,EAEA,OACEuC,EAAAA,kBAAAA,KAAC,MAAA,CACC,IAAAxB,EACA,KAAK,QACL,aAAW,oBACX,cAAaD,EAEZ,SAAA,CAAAR,GAAWC,GACViC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,yBAA0B,SAAAjC,EAAa,EAGxDiC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,0BACZ,SAAAxB,EAAO,IAAI,CAACyB,EAAOjB,IAClBe,EAAAA,kBAAAA,KAACG,EAAAA,SAAA,CACE,SAAA,CAAA/B,GAAiBX,EAAS,IAAM,GAAKwB,IAAUxB,EAAS,GACvDwC,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,6BAA6B,cAAY,OAAO,SAAA,IAEhE,EAEFA,EAAAA,kBAAAA,IAAC,QAAA,CACC,IAAMG,GAAO,CACXxB,EAAU,QAAQK,CAAK,EAAImB,CAC7B,EACA,GAAI,SAASnB,EAAQ,CAAC,GACtB,cAAa,GAAGV,CAAU,UAAUU,EAAQ,CAAC,GAC7C,KAAK,OACL,UAAU,UACV,QAAQ,SACR,aAAa,gBACb,UAAW,EACX,MAAAiB,EACA,SAAUjC,EACV,SAAWoC,GAAMhB,EAAagB,EAAGpB,CAAK,EACtC,QAAUoB,GAAMZ,EAAYY,EAAGpB,CAAK,EACpC,QAAUoB,GAAMV,EAAYU,EAAGpB,CAAK,EACpC,UAAWqB,EAAAA,IACT,yBACAvC,GAAW,+BAAA,EAEb,aAAY,SAASkB,EAAQ,CAAC,OAAOxB,CAAM,GAC3C,eAAcM,CAAA,CAAA,CAChB,CAAA,EA5BakB,CA6Bf,CACD,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,CACF,EAEApB,EAAS,YAAc"}

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

package/dist/components/Modal/Modal.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"),R=require("react"),E=require("../../hooks/useIsClosing.cjs.js"),_=require("../Button/Button.cjs.js");;/* empty css               */const h=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                              */const v=require("../../utils/string.cjs.js"),j=({children:t})=>o.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:t}),m=({children:t})=>o.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:t}),p=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:t}),C=t=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:o.jsxRuntimeExports.jsx(_.Button,{...t})}),b=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:t}),g={medium:"650px",full:"86vw"},q=({title:t,subtitle:s,body:e,onClose:r,children:l,isClosing:a,isOpen:i,width:n,"data-testid":d})=>o.jsxRuntimeExports.jsxs("div",{"data-testid":d,"data-disable-document-scroll":i,className:v.csx("proton-Modal",n&&`proton-Modal--${n}`,"proton-Elevation--glass",a&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[o.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:r,"aria-label":"Close",children:"×"}),t&&o.jsxRuntimeExports.jsx(j,{children:t}),s&&o.jsxRuntimeExports.jsx(m,{children:s}),e&&o.jsxRuntimeExports.jsx(p,{children:e}),o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:l})]}),f=({isOpen:t,onClose:s,title:e,subtitle:r,body:l,children:a,isOverlay:i=!0,width:n="full","data-testid":d})=>{const u=R.useRef(null),{isClosing:M,handleClose:c}=E.useIsClosing({onClose:s,overlayRef:u});if(!t)return null;const x=o.jsxRuntimeExports.jsx(q,{isOpen:t,title:e,subtitle:r,body:l,onClose:c,isClosing:M,"data-testid":d,width:n,children:a});return i?o.jsxRuntimeExports.jsx(h.ScreenOverlay,{fadeIn:!0,ref:u,onClose:c,children:x}):x},N=Object.assign(f,{Title:j,Subtitle:m,Body:p,Action:C,Actions:b});exports.Modal=N;exports.widthVariants=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),E=require("../../hooks/useIsClosing.cjs.js"),_=require("../Button/Button.cjs.js");;/* empty css               */const h=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                              */const C=require("../../utils/string.cjs.js"),m=({children:t})=>o.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:t}),j=({children:t})=>o.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:t}),p=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:t}),b=t=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:o.jsxRuntimeExports.jsx(_.Button,{...t})}),g=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:t}),v={medium:"medium",full:"full"},f=({title:t,subtitle:s,body:e,onClose:r,children:l,isClosing:a,isOpen:i,width:n,"data-testid":d})=>o.jsxRuntimeExports.jsxs("div",{"data-testid":d,"data-disable-document-scroll":i,className:C.csx("proton-Modal",n&&`proton-Modal--${n}`,"proton-Elevation--glass",a&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[o.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:r,"aria-label":"Close",children:"×"}),t&&o.jsxRuntimeExports.jsx(m,{children:t}),s&&o.jsxRuntimeExports.jsx(j,{children:s}),e&&o.jsxRuntimeExports.jsx(p,{children:e}),o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:l})]}),q=({isOpen:t,onClose:s,title:e,subtitle:r,body:l,children:a,isOverlay:i=!0,width:n="full","data-testid":d})=>{const u=R.useRef(null),{isClosing:M,handleClose:c}=E.useIsClosing({onClose:s,overlayRef:u});if(!t)return null;const x=o.jsxRuntimeExports.jsx(f,{isOpen:t,title:e,subtitle:r,body:l,onClose:c,isClosing:M,"data-testid":d,width:n,children:a});return i?o.jsxRuntimeExports.jsx(h.ScreenOverlay,{fadeIn:!0,ref:u,onClose:c,children:x}):x},N=Object.assign(q,{Title:m,Subtitle:j,Body:p,Action:b,Actions:g});exports.Modal=N;exports.WidthVariants=v;
 //# sourceMappingURL=Modal.cjs.js.map

package/dist/components/Modal/Modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\n// Different base fonts (10px on the client, 16px on release links) is really setting back development on the kit.\n// Known issue: We should standardize both repos to base font size of 16px... then we can use rems for all sizes.\n// For now lets use a width prop, with a todo: standardize these sizes to represent modal widths across release links / client\n\n/**\n * Width variant for the modal (will be standardized in future release)\n *  - medium: 650px  (standard modal width on client)\n *  - full: 86vw  (default modal width)\n */\nexport type WidthVariant = \"medium\" | \"full\";\nexport const widthVariants: Record<WidthVariant, string> = {\n  medium: \"650px\",\n  full: \"86vw\",\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  width,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        width && `proton-Modal--${width}`,\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n  /**\n   * Optional width variant for the modal\n   * - type {@link WidthVariant}\n   * @default \"full\"\n   * */\n  width?: WidthVariant;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  width = \"full\",\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n      width={width}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","widthVariants","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","width","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"qaAUMA,EAAa,CAAC,CAAE,SAAAC,KACbC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAA,CAAS,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KAChBC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAA,CAAS,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACZC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAA,CAAS,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,SAAA,CAAQ,GAAGD,EAAa,CAAA,CAC3B,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACfC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,EAa7CQ,EAA8C,CACzD,OAAQ,QACR,KAAM,MACR,EAEMC,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,OAAAC,EACA,MAAAC,EACA,cAAeC,CACjB,IAIIC,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAaD,EACb,+BAA8BF,EAC9B,UAAWI,EAAAA,IACT,eACAH,GAAS,iBAAiBA,CAAK,GAC/B,0BACAF,GAAa,uBAAA,EAEf,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAb,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASY,EACT,aAAW,QACZ,SAAA,GAAA,CAAA,EAGAH,GAAST,EAAAA,kBAAAA,IAACF,EAAA,CAAY,SAAAW,CAAA,CAAM,EAC5BC,GAAYV,EAAAA,kBAAAA,IAACC,EAAA,CAAe,SAAAS,CAAA,CAAS,EACrCC,GAAQX,EAAAA,kBAAAA,IAACE,EAAA,CAAW,SAAAS,CAAA,CAAK,EAC1BX,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,CAAA,CAAA,CAAA,EAqDjDoB,EAAe,CAAC,CACpB,OAAAL,EACA,QAAAF,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAqB,EAAY,GACZ,MAAAL,EAAQ,OACR,cAAeC,CACjB,IAAkB,CAChB,MAAMK,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,UAAAT,EAAW,YAAAU,CAAA,EAAgBC,eAAa,CAC9C,QAAAZ,EACA,WAAAS,CAAA,CACD,EAED,GAAI,CAACP,EAAQ,OAAO,KAEpB,MAAMW,EACJzB,EAAAA,kBAAAA,IAACQ,EAAA,CACC,OAAAM,EACA,MAAAL,EACA,SAAAC,EACA,KAAAC,EACA,QAASY,EACT,UAAAV,EACA,cAAaG,EACb,MAAAD,EAEC,SAAAhB,CAAA,CAAA,EAIL,OAAOqB,EACLpB,EAAAA,kBAAAA,IAAC0B,EAAAA,cAAA,CAAc,OAAM,GAAC,IAAKL,EAAY,QAASE,EAC7C,SAAAE,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOR,EAAc,CAI/C,MAAOrB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\n// Different base fonts (10px on the client, 16px on release links) is really setting back development on the kit.\n// Known issue: We should standardize both repos to base font size of 16px... then we can use rems for all sizes.\n// For now lets use a width prop, with a todo: standardize these sizes to represent modal widths across release links / client\n\n/**\n * Width variant for the modal (will be standardized in future release)\n *  - medium: 650px  (standard modal width on client)\n *  - full: 86vw  (default modal width)\n */\nexport type WidthVariant = \"medium\" | \"full\";\n\nexport const WidthVariants: Record<WidthVariant, WidthVariant> = {\n  medium: \"medium\",\n  full: \"full\",\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  width,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        width && `proton-Modal--${width}`,\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n  /**\n   * Optional width variant for the modal\n   * - type {@link WidthVariant}\n   * @default \"full\"\n   * */\n  width?: WidthVariant;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  width = \"full\",\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n      width={width}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","WidthVariants","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","width","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"qaAUMA,EAAa,CAAC,CAAE,SAAAC,KACbC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAA,CAAS,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KAChBC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAA,CAAS,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACZC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAA,CAAS,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,SAAA,CAAQ,GAAGD,EAAa,CAAA,CAC3B,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACfC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,EAc7CQ,EAAoD,CAC/D,OAAQ,SACR,KAAM,MACR,EAEMC,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,OAAAC,EACA,MAAAC,EACA,cAAeC,CACjB,IAIIC,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAaD,EACb,+BAA8BF,EAC9B,UAAWI,EAAAA,IACT,eACAH,GAAS,iBAAiBA,CAAK,GAC/B,0BACAF,GAAa,uBAAA,EAEf,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAb,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASY,EACT,aAAW,QACZ,SAAA,GAAA,CAAA,EAGAH,GAAST,EAAAA,kBAAAA,IAACF,EAAA,CAAY,SAAAW,CAAA,CAAM,EAC5BC,GAAYV,EAAAA,kBAAAA,IAACC,EAAA,CAAe,SAAAS,CAAA,CAAS,EACrCC,GAAQX,EAAAA,kBAAAA,IAACE,EAAA,CAAW,SAAAS,CAAA,CAAK,EAC1BX,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,CAAA,CAAA,CAAA,EAqDjDoB,EAAe,CAAC,CACpB,OAAAL,EACA,QAAAF,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAqB,EAAY,GACZ,MAAAL,EAAQ,OACR,cAAeC,CACjB,IAAkB,CAChB,MAAMK,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,UAAAT,EAAW,YAAAU,CAAA,EAAgBC,eAAa,CAC9C,QAAAZ,EACA,WAAAS,CAAA,CACD,EAED,GAAI,CAACP,EAAQ,OAAO,KAEpB,MAAMW,EACJzB,EAAAA,kBAAAA,IAACQ,EAAA,CACC,OAAAM,EACA,MAAAL,EACA,SAAAC,EACA,KAAAC,EACA,QAASY,EACT,UAAAV,EACA,cAAaG,EACb,MAAAD,EAEC,SAAAhB,CAAA,CAAA,EAIL,OAAOqB,EACLpB,EAAAA,kBAAAA,IAAC0B,EAAAA,cAAA,CAAc,OAAM,GAAC,IAAKL,EAAY,QAASE,EAC7C,SAAAE,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOR,EAAc,CAI/C,MAAOrB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}

package/dist/components/Modal/Modal.es.js

@@ -1,32 +1,32 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useRef as _ } from "react";
-import { useIsClosing as f } from "../../hooks/useIsClosing.es.js";
+import { useRef as f } from "react";
+import { useIsClosing as _ } from "../../hooks/useIsClosing.es.js";
 import { Button as h } from "../Button/Button.es.js";
 /* empty css             */
 import { ScreenOverlay as C } from "../ScreenOverlay/ScreenOverlay.es.js";
 /* empty css                            */
-import { csx as v } from "../../utils/string.es.js";
-const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), x = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), M = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), b = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(h, { ...o }) }), N = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), w = {
-  medium: "650px",
-  full: "86vw"
+import { csx as b } from "../../utils/string.es.js";
+const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), x = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), M = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), v = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(h, { ...o }) }), N = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), k = {
+  medium: "medium",
+  full: "full"
 }, g = ({
   title: o,
   subtitle: s,
-  body: n,
+  body: l,
   onClose: a,
   children: e,
   isClosing: r,
   isOpen: d,
-  width: l,
+  width: n,
   "data-testid": i
 }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
     "data-testid": i,
     "data-disable-document-scroll": d,
-    className: v(
+    className: b(
       "proton-Modal",
-      l && `proton-Modal--${l}`,
+      n && `proton-Modal--${n}`,
       "proton-Elevation--glass",
       r && "proton-Modal--closing"
     ),
@@ -46,22 +46,22 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
       ),
       o && /* @__PURE__ */ t.jsx(p, { children: o }),
       s && /* @__PURE__ */ t.jsx(x, { children: s }),
-      n && /* @__PURE__ */ t.jsx(M, { children: n }),
+      l && /* @__PURE__ */ t.jsx(M, { children: l }),
       /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__content", children: e })
     ]
   }
 ), y = ({
   isOpen: o,
   onClose: s,
-  title: n,
+  title: l,
   subtitle: a,
   body: e,
   children: r,
   isOverlay: d = !0,
-  width: l = "full",
+  width: n = "full",
   "data-testid": i
 }) => {
-  const c = _(null), { isClosing: j, handleClose: m } = f({
+  const c = f(null), { isClosing: j, handleClose: m } = _({
     onClose: s,
     overlayRef: c
   });
@@ -70,13 +70,13 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
     g,
     {
       isOpen: o,
-      title: n,
+      title: l,
       subtitle: a,
       body: e,
       onClose: m,
       isClosing: j,
       "data-testid": i,
-      width: l,
+      width: n,
       children: r
     }
   );
@@ -98,7 +98,7 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
    * Renders a Proton Button action
    * - @prop buttonProps {@link ButtonProps}
    * */
-  Action: b,
+  Action: v,
   /**
    * Renders a group of Proton Buttons
    * */
@@ -106,6 +106,6 @@ const p = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
 });
 export {
   O as Modal,
-  w as widthVariants
+  k as WidthVariants
 };
 //# sourceMappingURL=Modal.es.js.map