@protonradio/proton-ui 0.12.0 → 0.12.2

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, ReactNode } 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 errorId = typeof error === \"string\" ? `${name}-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) => {\n            const itemId = `${name}-${item.value}`;\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","errorId","jsx","RadixRadioGroup","csx","item","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.\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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":"qWA4EO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,MACP,MAAAC,EAAQ,SACR,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,cAAeC,CACjB,EAAiB,CACf,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,OACEC,EAAAA,kBAAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMZ,EAAa,GAAQD,EAC3B,YAAAE,EACA,aAAeY,GAAY,CACrBb,GACJE,GAAA,MAAAA,EAAeW,EACjB,EAEA,SAAA,CAAAC,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,iCAAC,MAAA,CAAI,gBAAeZ,EAAa,SAAAH,CAAA,CAAQ,CAAA,CAC3C,EAEC,CAACG,GACAc,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,OAAb,CACC,SAAAE,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWM,EAAAA,IACT,iBACA,0BACAT,GAAkB,8BAClBE,CAAA,EAEF,cAAaD,EAEb,SAAAO,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,MACEX,GACES,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAE,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAhB,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,CAAA,CAIR,CAEAF,EAAQ,YAAc"}
+{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = RadixSide;\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = RadixAlign;\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   * @default \"top\"\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":"qWA+EO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,GACb,YAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,MACP,MAAAC,EAAQ,SACR,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,cAAeC,CACjB,EAAiB,CACf,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,OACEC,EAAAA,kBAAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAMZ,EAAa,GAAQD,EAC3B,YAAAE,EACA,aAAeY,GAAY,CACrBb,GACJE,GAAA,MAAAA,EAAeW,EACjB,EAEA,SAAA,CAAAC,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,iCAAC,MAAA,CAAI,gBAAeZ,EAAa,SAAAH,CAAA,CAAQ,CAAA,CAC3C,EAEC,CAACG,GACAc,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,OAAb,CACC,SAAAE,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWM,EAAAA,IACT,iBACA,0BACAT,GAAkB,8BAClBE,CAAA,EAEF,cAAaD,EAEb,SAAAO,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,MACEX,GACES,EAAAA,kBAAAA,IAACF,EAAAA,QAAa,MAAb,CAAmB,MAAO,EAAG,OAAQ,EACpC,SAAAE,EAAAA,kBAAAA,IAAC,OAAI,MAAO,EAAG,OAAQ,EAAG,QAAQ,UAChC,iCAAC,OAAA,CAAK,EAAE,gBAAA,CAAiB,CAAA,CAC3B,CAAA,CACF,EAIH,SAAAhB,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,CAAA,CAIR,CAEAF,EAAQ,YAAc"}

package/dist/components/Popover/Popover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":";;;;;;;AA4EO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC,EAAA;AAErD,SACEC,gBAAAA,EAAAA;AAAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMZ,IAAa,KAAQD;AAAA,MAC3B,aAAAE;AAAA,MACA,cAAc,CAACY,MAAY;AACzB,QAAIb,KACJE,KAAA,QAAAA,EAAeW;AAAA,MACjB;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC3B,gCAAC,OAAA,EAAI,iBAAeZ,GAAa,UAAAH,EAAA,CAAQ,EAAA,CAC3C;AAAA,QAEC,CAACG,KACAc,gBAAAA,EAAAA,IAACF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAAA;AAAAA,UAACF,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACAT,KAAkB;AAAA,cAClBE;AAAA,YAAA;AAAA,YAEF,eAAaD;AAAA,YAEb,UAAAO,gBAAAA,EAAAA;AAAAA,cAACE;AAAA,cAAA;AAAA,gBACC,OACEX,KACES,gBAAAA,EAAAA,IAACF,EAAa,OAAb,EAAmB,OAAO,GAAG,QAAQ,GACpC,UAAAE,gBAAAA,EAAAA,IAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,gCAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B,EAAA,CACF;AAAA,gBAIH,UAAAhB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAF,EAAQ,cAAc;"}
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { CSSProperties, ReactNode } from \"react\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport type { RadixAlign, RadixSide } from \"../../constants/placement\";\nimport { Overlay } from \"../Overlay/Overlay\";\n\nimport \"../Elevation/Elevation.css\";\nimport \"./Popover.css\";\n\n/** Radix `Popover.Content` `side` */\nexport type PopoverSide = RadixSide;\n/** Radix `Popover.Content` `align`*/\nexport type PopoverAlign = RadixAlign;\n\nexport interface PopoverProps {\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   * @default \"center\"\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   * @default false\n   */\n  arrow?: boolean;\n  /**\n   * The content of the popover.\n   */\n  children: ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Whether the popover is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: ReactNode;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   * @default \"top\"\n   */\n  side?: PopoverSide;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  isDisabled = false,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={isDisabled ? false : open}\n      defaultOpen={defaultOpen}\n      onOpenChange={(newOpen) => {\n        if (isDisabled) return;\n        onOpenChange?.(newOpen);\n      }}\n    >\n      <RadixPopover.Trigger asChild>\n        <div aria-disabled={isDisabled}>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      {!isDisabled && (\n        <RadixPopover.Portal>\n          <RadixPopover.Content\n            side={side}\n            sideOffset={2}\n            align={align}\n            style={themeStyle as CSSProperties}\n            className={csx(\n              \"proton-Popover\",\n              \"proton-Elevation--glass\",\n              constrainWidth && \"proton-Popover__constrained\",\n              themeClass,\n            )}\n            data-testid={testId}\n          >\n            <Overlay\n              arrow={\n                arrow && (\n                  <RadixPopover.Arrow width={8} height={8}>\n                    <svg width={8} height={8} viewBox=\"0 0 8 8\">\n                      <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                  </RadixPopover.Arrow>\n                )\n              }\n            >\n              {children}\n            </Overlay>\n          </RadixPopover.Content>\n        </RadixPopover.Portal>\n      )}\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"ProtonUIPopover\";\n"],"names":["Popover","trigger","children","open","isDisabled","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","newOpen","jsx","csx","Overlay"],"mappings":";;;;;;;AA+EO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC,EAAA;AAErD,SACEC,gBAAAA,EAAAA;AAAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAMZ,IAAa,KAAQD;AAAA,MAC3B,aAAAE;AAAA,MACA,cAAc,CAACY,MAAY;AACzB,QAAIb,KACJE,KAAA,QAAAA,EAAeW;AAAA,MACjB;AAAA,MAEA,UAAA;AAAA,QAAAC,gBAAAA,EAAAA,IAACF,EAAa,SAAb,EAAqB,SAAO,IAC3B,gCAAC,OAAA,EAAI,iBAAeZ,GAAa,UAAAH,EAAA,CAAQ,EAAA,CAC3C;AAAA,QAEC,CAACG,KACAc,gBAAAA,EAAAA,IAACF,EAAa,QAAb,EACC,UAAAE,gBAAAA,EAAAA;AAAAA,UAACF,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACAT,KAAkB;AAAA,cAClBE;AAAA,YAAA;AAAA,YAEF,eAAaD;AAAA,YAEb,UAAAO,gBAAAA,EAAAA;AAAAA,cAACE;AAAA,cAAA;AAAA,gBACC,OACEX,KACES,gBAAAA,EAAAA,IAACF,EAAa,OAAb,EAAmB,OAAO,GAAG,QAAQ,GACpC,UAAAE,gBAAAA,EAAAA,IAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,SAAQ,WAChC,gCAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB,EAAA,CAC3B,EAAA,CACF;AAAA,gBAIH,UAAAhB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAF,EAAQ,cAAc;"}

package/dist/components/Select/Select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),o=require("radix-ui"),B=require("../ThemeProvider.cjs.js"),A=require("../../hooks/useBreakpoint.cjs.js"),C=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */;/* empty css                              */const R=require("../../utils/string.cjs.js"),U=require("../../constants/breakpoint.cjs.js"),V=require("../Icon/IconComponents/CaretDown.cjs.js"),g=c.forwardRef(({disabled:s,isOpen:r,onClick:n,isRounded:i,selectedItem:a,"data-testid":l},j)=>e.jsxRuntimeExports.jsxs("button",{ref:j,type:"button",role:"combobox","aria-expanded":r,"aria-autocomplete":"none","data-state":r?"open":"closed","data-testid":l,disabled:s,onClick:n,className:R.csx("proton-Select__trigger","proton-Elevation--glass",s&&"proton-Select__trigger--disabled",!r&&"proton-Select__trigger--closed",r&&"proton-Select__trigger--opened",i&&"proton-Select__trigger--rounded"),children:[e.jsxRuntimeExports.jsx("span",{className:"proton-Select__value",children:a?a.label:"Select an option"}),e.jsxRuntimeExports.jsx("span",{className:R.csx("proton-Select__trigger_icon",r&&"proton-Select__trigger_icon--flipped"),children:e.jsxRuntimeExports.jsx(V.CaretDown,{size:16})})]}));g.displayName="ProtonUISelectButton";function N({label:s,name:r,isDisabled:n,disabledKeys:i,selectedKey:a,onSelectionChange:l,defaultSelectedKey:j,onOpen:m,onClose:S,items:h,isRounded:_=!1,"data-testid":f}){const[E,d]=c.useState(!1),p=a!==void 0,[k,v]=c.useState(j??""),{className:I,style:M}=B.useTheme(),T=A.useBreakpoint(U.BREAKPOINTS.MEDIUM),y=c.useRef(null),u=c.useRef(null),x=p?a:k,b=h.find(t=>t.key===x),q=t=>{p||v(t),l==null||l(t),u.current&&(u.current.value=t,u.current.dispatchEvent(new Event("change",{bubbles:!0})))},P=t=>{d(t),t?m==null||m():S==null||S()};c.useEffect(()=>{p&&v(a)},[p]);const w=h.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{q(t.key),d(!1)}}));return T?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:r,value:x,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsx(g,{isOpen:E,isRounded:_,ref:y,disabled:n,"data-testid":f,onClick:()=>d(!0),selectedItem:b}),e.jsxRuntimeExports.jsx(C.ActionMenu,{isOpen:E,onClose:()=>d(!1),actions:w,selectedKeys:[x],disabledKeys:i})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:r,value:x,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(o.Select.Root,{value:x,onValueChange:q,onOpenChange:P,disabled:n,children:[e.jsxRuntimeExports.jsx(o.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx(g,{isRounded:_,isOpen:E,ref:y,disabled:n,"data-testid":f,selectedItem:b})}),e.jsxRuntimeExports.jsx(o.Select.Portal,{children:e.jsxRuntimeExports.jsx(o.Select.Content,{className:R.csx("proton-Menu","proton-MenuTrigger__menu","proton-Elevation--glass",I),style:M,position:"popper",children:e.jsxRuntimeExports.jsx(o.Select.Viewport,{children:h.map(t=>e.jsxRuntimeExports.jsx(o.Select.Item,{value:t.key,disabled:i==null?void 0:i.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(o.Select.ItemText,{children:t.label})},t.key))})})})]})]})}N.displayName="ProtonUISelect";exports.Select=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),o=require("radix-ui"),B=require("../ThemeProvider.cjs.js"),A=require("../../hooks/useBreakpoint.cjs.js"),C=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */;/* empty css                              */const R=require("../../utils/string.cjs.js"),U=require("../../constants/breakpoint.cjs.js"),V=require("../Icon/IconComponents/CaretDown.cjs.js"),g=c.forwardRef(({disabled:s,isOpen:r,onClick:n,isRounded:i,selectedItem:a,ariaLabel:l,"data-testid":m},u)=>e.jsxRuntimeExports.jsxs("button",{ref:u,type:"button",role:"combobox","aria-label":l,"aria-expanded":r,"aria-autocomplete":"none","data-state":r?"open":"closed","data-testid":m,disabled:s,onClick:n,className:R.csx("proton-Select__trigger","proton-Elevation--glass",s&&"proton-Select__trigger--disabled",!r&&"proton-Select__trigger--closed",r&&"proton-Select__trigger--opened",i&&"proton-Select__trigger--rounded"),children:[e.jsxRuntimeExports.jsx("span",{className:"proton-Select__value",children:a?a.label:"Select an option"}),e.jsxRuntimeExports.jsx("span",{className:R.csx("proton-Select__trigger_icon",r&&"proton-Select__trigger_icon--flipped"),children:e.jsxRuntimeExports.jsx(V.CaretDown,{size:16})})]}));g.displayName="ProtonUISelectButton";function N({label:s,name:r,isDisabled:n,disabledKeys:i,selectedKey:a,onSelectionChange:l,defaultSelectedKey:m,onOpen:u,onClose:S,items:h,isRounded:_=!1,"data-testid":f}){const[E,p]=c.useState(!1),j=a!==void 0,[k,v]=c.useState(m??""),{className:I,style:M}=B.useTheme(),T=A.useBreakpoint(U.BREAKPOINTS.MEDIUM),b=c.useRef(null),x=c.useRef(null),d=j?a:k,y=h.find(t=>t.key===d),q=t=>{j||v(t),l==null||l(t),x.current&&(x.current.value=t,x.current.dispatchEvent(new Event("change",{bubbles:!0})))},P=t=>{p(t),t?u==null||u():S==null||S()};c.useEffect(()=>{j&&v(a)},[j]);const w=h.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{q(t.key),p(!1)}}));return T?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:r,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsx(g,{isOpen:E,isRounded:_,ref:b,disabled:n,ariaLabel:s||r,"data-testid":f,onClick:()=>p(!0),selectedItem:y}),e.jsxRuntimeExports.jsx(C.ActionMenu,{isOpen:E,onClose:()=>p(!1),actions:w,selectedKeys:[d],disabledKeys:i})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||r,"aria-disabled":n,children:[s&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:s}),e.jsxRuntimeExports.jsx("input",{ref:x,type:"hidden",name:r,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(o.Select.Root,{value:d,onValueChange:q,onOpenChange:P,disabled:n,children:[e.jsxRuntimeExports.jsx(o.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx(g,{isRounded:_,isOpen:E,ref:b,disabled:n,ariaLabel:s||r,"data-testid":f,selectedItem:y})}),e.jsxRuntimeExports.jsx(o.Select.Portal,{children:e.jsxRuntimeExports.jsx(o.Select.Content,{className:R.csx("proton-Menu","proton-MenuTrigger__menu","proton-Elevation--glass",I),style:M,position:"popper",children:e.jsxRuntimeExports.jsx(o.Select.Viewport,{children:h.map(t=>e.jsxRuntimeExports.jsx(o.Select.Item,{value:t.key,disabled:i==null?void 0:i.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(o.Select.ItemText,{children:t.label})},t.key))})})})]})]})}N.displayName="ProtonUISelect";exports.Select=N;
 //# sourceMappingURL=Select.cjs.js.map