@protonradio/proton-ui 0.11.34 → 0.12.1

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useRef } from \"react\";\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\nimport { useRadioGroupState } from \"@react-stately/radio\";\nimport { csx } from \"../../utils\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: React.ReactNode;\n}\n\nlet ButtonGroupContext = createContext(null);\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup(props: ButtonGroupProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useRadioGroupState(sanitizedProps);\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\n\n  return (\n    <div\n      {...radioGroupProps}\n      className=\"proton-ButtonGroup\"\n      data-value={state.selectedValue}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <ButtonGroupContext.Provider value={state}>\n        {props.children}\n      </ButtonGroupContext.Provider>\n    </div>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `selectedValue`.\n   */\n  value: string;\n\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: React.ReactNode;\n}\n\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useContext(ButtonGroupContext);\n  let ref = useRef(null);\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\n\n  return (\n    <label\n      className={csx(\n        \"proton-ButtonGroup__option\",\n        isSelected && \"proton-ButtonGroup__option--selected\"\n      )}\n      data-selected={isSelected || undefined}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <VisuallyHidden>\n        <input {...inputProps} ref={ref} />\n      </VisuallyHidden>\n      {props.children}\n    </label>\n  );\n};\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":";;;;;;;;AAiCA,IAAIA,IAAqBC,EAAc,IAAI;AAQpC,SAASC,EAAYC,GAAyB;AACnD,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQC,EAAmBF,CAAc,GACzC,EAAE,iBAAAG,EAAoB,IAAAC,EAAcJ,GAAgBC,CAAK;AAG3D,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAU;AAAA,MACV,cAAYF,EAAM;AAAA,MAClB,eAAaF,EAAM,aAAa,KAAK;AAAA,MAErC,gCAACH,EAAmB,UAAnB,EAA4B,OAAOK,GACjC,YAAM,UACT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;AAe1BA,EAAY,SAAS,SAA2BC,GAA+B;AAC7E,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQK,EAAWV,CAAkB,GACrCW,IAAMC,EAAO,IAAI,GACjB,EAAE,YAAAC,GAAY,YAAAC,MAAeC,EAASX,GAAgBC,GAAOM,CAAG;AAGlE,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,KAAc;AAAA,MAChB;AAAA,MACA,iBAAeA,KAAc;AAAA,MAC7B,eAAaX,EAAM,aAAa,KAAK;AAAA,MAErC,UAAA;AAAA,QAAAM,gBAAAA,MAACS,KACC,UAACT,gBAAAA,EAAA,IAAA,SAAA,EAAO,GAAGI,GAAY,KAAAF,EAAU,CAAA,GACnC;AAAA,QACCR,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The name of the ButtonGroup.\n   */\n  name?: string;\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: ReactNode;\n  /** The test ID for the component. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup({\n  name = \"ButtonGroup\",\n  value,\n  defaultValue,\n  onChange,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    () => defaultValue || \"\"\n  );\n  const dataValue = isControlled ? (value || \"\") : uncontrolledValue;\n\n  return (\n    <RadixRadioGroup.Root\n      name={name}\n      value={isControlled ? value : undefined}\n      defaultValue={isControlled ? undefined : defaultValue}\n      onValueChange={(v) => {\n        if (!isControlled) setUncontrolledValue(v);\n        onChange?.(v);\n      }}\n      orientation=\"horizontal\"\n      className=\"proton-ButtonGroup\"\n      data-value={dataValue || undefined}\n      data-testid={testId || undefined}\n      aria-label={name}\n    >\n      {children}\n    </RadixRadioGroup.Root>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `value`.\n   */\n  value: string;\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: ReactNode;\n  /** The test ID for this option. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A radio button option for the ButtonGroup.\n *\n * API:\n *  - {@link ButtonGroupOptionProps}\n */\nButtonGroup.Option = function ButtonGroupOption({\n  value,\n  children,\n  \"data-testid\": testId,\n}: ButtonGroupOptionProps) {\n  const accessibleLabel = typeof children === \"string\" ? children : value;\n\n  return (\n    <RadixRadioGroup.Item\n      value={value}\n      className=\"proton-ButtonGroup__option\"\n      data-testid={testId || undefined}\n      aria-label={accessibleLabel}\n    >\n      {children}\n    </RadixRadioGroup.Item>\n  );\n};\n"],"names":["ButtonGroup","name","value","defaultValue","onChange","children","testId","isControlled","uncontrolledValue","setUncontrolledValue","useState","dataValue","jsx","RadixRadioGroup","v","accessibleLabel"],"mappings":";;;;AAuCO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC;AACjB,GAAqB;AACnB,QAAMC,IAAeL,MAAU,QACzB,CAACM,GAAmBC,CAAoB,IAAIC;AAAA,IAChD,MAAMP,KAAgB;AAAA,EAAA,GAElBQ,IAAYJ,IAAgBL,KAAS,KAAMM;AAEjD,SACEI,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,MAAAZ;AAAA,MACA,OAAOM,IAAeL,IAAQ;AAAA,MAC9B,cAAcK,IAAe,SAAYJ;AAAA,MACzC,eAAe,CAACW,MAAM;AACpB,QAAKP,KAAcE,EAAqBK,CAAC,GACzCV,KAAA,QAAAA,EAAWU;AAAA,MACb;AAAA,MACA,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,cAAYH,KAAa;AAAA,MACzB,eAAaL,KAAU;AAAA,MACvB,cAAYL;AAAA,MAEX,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAL,EAAY,cAAc;AAsB1BA,EAAY,SAAS,SAA2B;AAAA,EAC9C,OAAAE;AAAA,EACA,UAAAG;AAAA,EACA,eAAeC;AACjB,GAA2B;AACzB,QAAMS,IAAkB,OAAOV,KAAa,WAAWA,IAAWH;AAElE,SACEU,gBAAAA,EAAAA;AAAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAAX;AAAA,MACA,WAAU;AAAA,MACV,eAAaI,KAAU;AAAA,MACvB,cAAYS;AAAA,MAEX,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),i=require("../Button/Button.cjs.js"),S=require("../Icon/IconComponents/ChevronDown.cjs.js"),E=require("../Menu/MenuTrigger.cjs.js");;/* empty css                          */const u=44;function x({items:e,defaultValue:o,children:l,onSelectionChange:d,disabledKeys:a,selectedKey:g,icon:j,variant:s,fullWidth:r,onPress:h,...n}){const m=r?u/2:0;return t.jsxRuntimeExports.jsxs("div",{className:"proton-ButtonWithSelect",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__button",style:{"--proton-button-text-shift":`${m}px`,"--flex":r?1:0},children:t.jsxRuntimeExports.jsx(i.Button,{...n,onPress:h,icon:j,fullWidth:r,variant:s,"data-testid":"ButtonWithSelect-Button",children:l})}),t.jsxRuntimeExports.jsx(E.MenuTrigger,{items:e,disabled:n.isDisabled,disabledKeys:a,onSelectionChange:d,selectedKey:g,renderTrigger:({isOpen:p,setIsOpen:B})=>t.jsxRuntimeExports.jsx(c,{...n,variant:s,onPress:()=>{B(!p)}})})]})}x.displayName="ProtonUIButtonWithSelect";const c=R.forwardRef((e,o)=>t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger",style:{"--trigger-width":`${u}px`},children:t.jsxRuntimeExports.jsx(i.Button,{...e,to:void 0,"data-testid":"ButtonWithSelect-Trigger",ref:o,children:t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger-content",children:t.jsxRuntimeExports.jsx(S.ChevronDown,{size:16})})})}));c.displayName="ProtonUIButtonWithSelectTrigger";exports.ButtonWithSelect=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),s=require("../Button/Button.cjs.js"),S=require("../Icon/IconComponents/ChevronDown.cjs.js"),E=require("../Menu/MenuTrigger.cjs.js");;/* empty css                          */const u=44;function x({items:e,defaultValue:i,children:l,onSelectionChange:d,disabledKeys:a,selectedKey:g,icon:j,variant:o,fullWidth:r,onPress:h,...n}){const m=r?u/2:0;return t.jsxRuntimeExports.jsxs("div",{className:"proton-ButtonWithSelect",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__button",style:{"--proton-button-text-shift":`${m}px`,"--flex":r?1:0},children:t.jsxRuntimeExports.jsx(s.Button,{...n,onPress:h,icon:j,fullWidth:r,variant:o,"data-testid":"ButtonWithSelect-Button",children:l})}),t.jsxRuntimeExports.jsx(E.MenuTrigger,{items:e,disabled:n.isDisabled,disabledKeys:a,onSelectionChange:d,selectedKey:g,renderTrigger:({isOpen:p,setIsOpen:B})=>t.jsxRuntimeExports.jsx(c,{...n,variant:o,onPress:()=>{B(!p)}})})]})}x.displayName="ProtonUIButtonWithSelect";const c=R.forwardRef((e,i)=>t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger",style:{"--trigger-width":`${u}px`},children:t.jsxRuntimeExports.jsx(s.Button,{...e,to:void 0,"data-testid":"ButtonWithSelect-Trigger",ref:i,children:t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger-content",children:t.jsxRuntimeExports.jsx(S.ChevronDown,{size:16})})})}));c.displayName="ProtonUIButtonWithSelectTrigger";exports.ButtonWithSelect=x;
 //# sourceMappingURL=ButtonWithSelect.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { ChevronDown } from \"../Icon/IconComponents/ChevronDown\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => {\n                setIsOpen(!isOpen);\n              }}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...{ ...props, to: undefined }} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <ChevronDown size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","ChevronDown"],"mappings":"+UAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAA,kBAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAM,CACbU,EAAU,CAACD,CAAM,CACnB,CAAA,CAAA,CAGN,CACF,CACF,CAAA,CAAA,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,SAAAe,EAAA,kBAAA,IAACC,UAAa,GAAGM,EAAO,GAAI,OAAa,cAAY,2BAA2B,IAAAC,EAC9E,SAAAR,EAAA,kBAAA,IAAC,OAAI,UAAU,2CACb,iCAACS,EAAY,YAAA,CAAA,KAAM,GAAI,CAAA,CACzB,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}
+{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { ChevronDown } from \"../Icon/IconComponents/ChevronDown\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => {\n                setIsOpen(!isOpen);\n              }}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...{ ...props, to: undefined }} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <ChevronDown size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","ChevronDown"],"mappings":"+UAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CACxB,MAAMC,EAAYH,EAAYV,EAAsB,EAAI,EAExD,OACEc,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAAA,EAI9B,SAAAK,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CAAA,CACH,CAAA,EAGFW,EAAAA,kBAAAA,IAACE,EAAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAAA,kBAAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAM,CACbU,EAAU,CAACD,CAAM,CACnB,CAAA,CAAA,CAGN,CAAA,CACF,EACF,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAAA,EAI7C,SAAAe,EAAAA,kBAAAA,IAACC,UAAa,GAAGM,EAAO,GAAI,OAAa,cAAY,2BAA2B,IAAAC,EAC9E,SAAAR,EAAAA,kBAAAA,IAAC,OAAI,UAAU,2CACb,iCAACS,EAAAA,YAAA,CAAY,KAAM,EAAA,CAAI,CAAA,CACzB,CAAA,CACF,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.es.js

@@ -8,14 +8,14 @@ const c = 44;
 function W({
   items: e,
   defaultValue: i,
-  children: a,
-  onSelectionChange: d,
-  disabledKeys: m,
-  selectedKey: u,
-  icon: g,
+  children: d,
+  onSelectionChange: a,
+  disabledKeys: u,
+  selectedKey: m,
+  icon: x,
   variant: n,
   fullWidth: r,
-  onPress: x,
+  onPress: g,
   ...o
 }) {
   const h = r ? c / 2 : 0;
@@ -32,12 +32,12 @@ function W({
           s,
           {
             ...o,
-            onPress: x,
-            icon: g,
+            onPress: g,
+            icon: x,
             fullWidth: r,
             variant: n,
             "data-testid": "ButtonWithSelect-Button",
-            children: a
+            children: d
           }
         )
       }
@@ -47,9 +47,9 @@ function W({
       {
         items: e,
         disabled: o.isDisabled,
-        disabledKeys: m,
-        onSelectionChange: d,
-        selectedKey: u,
+        disabledKeys: u,
+        onSelectionChange: a,
+        selectedKey: m,
         renderTrigger: ({ isOpen: p, setIsOpen: B }) => /* @__PURE__ */ t.jsx(
           l,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { ChevronDown } from \"../Icon/IconComponents/ChevronDown\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => {\n                setIsOpen(!isOpen);\n              }}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...{ ...props, to: undefined }} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <ChevronDown size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","ChevronDown"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAM;AACb,cAAAU,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,UAAAe,gBAAAA,EAAA,IAACC,KAAa,GAAGM,GAAO,IAAI,QAAa,eAAY,4BAA2B,KAAAC,GAC9E,UAAAR,gBAAAA,EAAA,IAAC,SAAI,WAAU,4CACb,gCAACS,GAAY,EAAA,MAAM,IAAI,EAAA,CACzB,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}
+{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { ChevronDown } from \"../Icon/IconComponents/ChevronDown\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => {\n                setIsOpen(!isOpen);\n              }}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...{ ...props, to: undefined }} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <ChevronDown size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","ChevronDown"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AACxB,QAAMC,IAAYH,IAAYV,IAAsB,IAAI;AAExD,SACEc,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAAA;AAAA,QAI9B,UAAAK,gBAAAA,EAAAA;AAAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAGFW,gBAAAA,EAAAA;AAAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAAA;AAAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAM;AACb,cAAAU,EAAU,CAACD,CAAM;AAAA,YACnB;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAAA;AAAA,IAI7C,UAAAe,gBAAAA,EAAAA,IAACC,KAAa,GAAGM,GAAO,IAAI,QAAa,eAAY,4BAA2B,KAAAC,GAC9E,UAAAR,gBAAAA,EAAAA,IAAC,SAAI,WAAU,4CACb,gCAACS,GAAA,EAAY,MAAM,GAAA,CAAI,EAAA,CACzB,EAAA,CACF;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}

package/dist/components/Checkbox/CheckboxIndicator.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js");;/* empty css                           */const e=require("../../utils/string.cjs.js"),r=({round:t=!1})=>t?o.jsxRuntimeExports.jsx("span",{className:e.csx("proton-CheckboxIndicator","proton-CheckboxIndicator--round"),"aria-hidden":!0,children:o.jsxRuntimeExports.jsx("span",{className:"proton-CheckboxIndicator__dot"})}):o.jsxRuntimeExports.jsx("svg",{className:e.csx("proton-CheckboxIndicator","proton-CheckboxIndicator--checkmark"),viewBox:"0 0 20 18","aria-hidden":!0,children:o.jsxRuntimeExports.jsx("path",{className:"proton-CheckboxIndicator__path",d:"M4 10l4 4 10-10",fill:"none",stroke:"currentColor",strokeWidth:"2.86",strokeLinecap:"round",strokeLinejoin:"round",pathLength:1})});r.displayName="ProtonUICheckboxIndicator";exports.CheckboxIndicator=r;
+//# sourceMappingURL=CheckboxIndicator.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.cjs.js","sources":["../../../src/components/Checkbox/CheckboxIndicator.tsx"],"sourcesContent":["\"use client\";\n\nimport { csx } from \"../../utils\";\nimport \"./CheckboxIndicator.css\";\n\nexport interface CheckboxIndicatorProps {\n  /**\n   * When true, show a round dot indicator.\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * Visual indicator for checkbox checked state.\n * @note Visibility is driven by parent checked state via CSS.\n */\nexport const CheckboxIndicator = ({\n  round = false,\n}: CheckboxIndicatorProps) => {\n  if (round) {\n    return (\n      <span\n        className={csx(\n          \"proton-CheckboxIndicator\",\n          \"proton-CheckboxIndicator--round\",\n        )}\n        aria-hidden\n      >\n        <span className=\"proton-CheckboxIndicator__dot\" />\n      </span>\n    );\n  }\n\n  return (\n    <svg\n      className={csx(\n        \"proton-CheckboxIndicator\",\n        \"proton-CheckboxIndicator--checkmark\",\n      )}\n      viewBox=\"0 0 20 18\"\n      aria-hidden\n    >\n      <path\n        className=\"proton-CheckboxIndicator__path\"\n        d=\"M4 10l4 4 10-10\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.86\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        pathLength={1}\n      />\n    </svg>\n  );\n};\n\nCheckboxIndicator.displayName = \"ProtonUICheckboxIndicator\";\n"],"names":["CheckboxIndicator","round","jsx","csx"],"mappings":"sOAiBaA,EAAoB,CAAC,CAChC,MAAAC,EAAQ,EACV,IACMA,EAEAC,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,IACT,2BACA,iCAAA,EAEF,cAAW,GAEX,SAAAD,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,+BAAA,CAAgC,CAAA,CAAA,EAMpDA,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,2BACA,qCAAA,EAEF,QAAQ,YACR,cAAW,GAEX,SAAAD,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,iCACV,EAAE,kBACF,KAAK,OACL,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACf,WAAY,CAAA,CAAA,CACd,CAAA,EAKNF,EAAkB,YAAc"}

package/dist/components/Checkbox/CheckboxIndicator.es.js

@@ -0,0 +1,44 @@
+import { j as o } from "../../node_modules/react/jsx-runtime.es.js";
+/* empty css                         */
+import { csx as r } from "../../utils/string.es.js";
+const e = ({
+  round: t = !1
+}) => t ? /* @__PURE__ */ o.jsx(
+  "span",
+  {
+    className: r(
+      "proton-CheckboxIndicator",
+      "proton-CheckboxIndicator--round"
+    ),
+    "aria-hidden": !0,
+    children: /* @__PURE__ */ o.jsx("span", { className: "proton-CheckboxIndicator__dot" })
+  }
+) : /* @__PURE__ */ o.jsx(
+  "svg",
+  {
+    className: r(
+      "proton-CheckboxIndicator",
+      "proton-CheckboxIndicator--checkmark"
+    ),
+    viewBox: "0 0 20 18",
+    "aria-hidden": !0,
+    children: /* @__PURE__ */ o.jsx(
+      "path",
+      {
+        className: "proton-CheckboxIndicator__path",
+        d: "M4 10l4 4 10-10",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.86",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        pathLength: 1
+      }
+    )
+  }
+);
+e.displayName = "ProtonUICheckboxIndicator";
+export {
+  e as CheckboxIndicator
+};
+//# sourceMappingURL=CheckboxIndicator.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.es.js","sources":["../../../src/components/Checkbox/CheckboxIndicator.tsx"],"sourcesContent":["\"use client\";\n\nimport { csx } from \"../../utils\";\nimport \"./CheckboxIndicator.css\";\n\nexport interface CheckboxIndicatorProps {\n  /**\n   * When true, show a round dot indicator.\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * Visual indicator for checkbox checked state.\n * @note Visibility is driven by parent checked state via CSS.\n */\nexport const CheckboxIndicator = ({\n  round = false,\n}: CheckboxIndicatorProps) => {\n  if (round) {\n    return (\n      <span\n        className={csx(\n          \"proton-CheckboxIndicator\",\n          \"proton-CheckboxIndicator--round\",\n        )}\n        aria-hidden\n      >\n        <span className=\"proton-CheckboxIndicator__dot\" />\n      </span>\n    );\n  }\n\n  return (\n    <svg\n      className={csx(\n        \"proton-CheckboxIndicator\",\n        \"proton-CheckboxIndicator--checkmark\",\n      )}\n      viewBox=\"0 0 20 18\"\n      aria-hidden\n    >\n      <path\n        className=\"proton-CheckboxIndicator__path\"\n        d=\"M4 10l4 4 10-10\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.86\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        pathLength={1}\n      />\n    </svg>\n  );\n};\n\nCheckboxIndicator.displayName = \"ProtonUICheckboxIndicator\";\n"],"names":["CheckboxIndicator","round","jsx","csx"],"mappings":";;;AAiBO,MAAMA,IAAoB,CAAC;AAAA,EAChC,OAAAC,IAAQ;AACV,MACMA,IAEAC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,eAAW;AAAA,IAEX,UAAAD,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,gCAAA,CAAgC;AAAA,EAAA;AAAA,IAMpDA,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,SAAQ;AAAA,IACR,eAAW;AAAA,IAEX,UAAAD,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd;AAAA;AAKNF,EAAkB,cAAc;"}

package/dist/components/Checkbox/CheckboxInput/CheckboxInput.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"),x=require("react");;/* empty css                       */const n=require("../../../utils/string.cjs.js"),k=x.forwardRef(({checked:a,defaultChecked:v,onChange:c,name:o,value:I,isDisabled:p=!1,isRequired:u=!1,id:m,"data-testid":_,label:s,description:r,error:t,indeterminate:l=!1,round:h=!1},R)=>{const y=x.useRef(null),i=R||y,b=a!==void 0;x.useEffect(()=>{i.current&&(i.current.indeterminate=l)},[l,i]);const C=g=>{c==null||c(g.target.checked)},f=m||`${o}-checkbox`,d=typeof t=="string"?`${o}-error`:void 0,j=typeof r=="string"?`${o}-description`:void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:n.csx(p&&"proton-CheckboxInput--disabled"),children:e.jsxRuntimeExports.jsxs("div",{className:n.csx("proton-CheckboxInput__container",h&&"proton-CheckboxInput__container--round"),children:[typeof s=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:f,className:"proton-CheckboxInput__label",children:s}):s,e.jsxRuntimeExports.jsx("input",{ref:i,id:f,name:o,type:"checkbox",checked:b?a:void 0,defaultChecked:b?void 0:v,value:I,disabled:p,required:u,onChange:C,className:n.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",h&&"proton-CheckboxInput__input--round"),"aria-label":s?void 0:o,"aria-invalid":!!t,"aria-errormessage":d,"aria-describedby":[d,j].filter(Boolean).join(" ")||void 0,"data-testid":_}),typeof r=="string"?e.jsxRuntimeExports.jsxs("div",{id:j,"aria-live":"polite",children:[r,u&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}):r]})}),typeof t=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:n.csx("proton-CheckboxInput__error"),id:d,children:t}):t]})});k.displayName="ProtonUICheckboxInput";exports.CheckboxInput=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),r=require("react"),N=require("../../../hooks/useMergedRef.cjs.js"),$=require("../CheckboxIndicator.cjs.js");;/* empty css                       */const n=require("../../../utils/string.cjs.js"),k=r.forwardRef(({checked:u,defaultChecked:m,onChange:i,name:p,value:I,isDisabled:l=!1,isRequired:h=!1,id:R,"data-testid":_,label:s,description:o,error:t,indeterminate:b=!1,round:c=!1},v)=>{const x=r.useRef(null),C=N.useMergedRef(x,v),y=u!==void 0,a=r.useId();r.useEffect(()=>{x.current&&(x.current.indeterminate=b)},[b]);const E=q=>{i==null||i(q.target.checked)},j=R||`${a}-checkbox`,d=typeof t=="string"?`${a}-error`:void 0,f=typeof o=="string"?`${a}-description`:void 0,g=[d,f].filter(Boolean).join(" ")||void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:n.csx(l&&"proton-CheckboxInput--disabled"),children:e.jsxRuntimeExports.jsxs("div",{className:n.csx("proton-CheckboxInput__container",c&&"proton-CheckboxInput__container--round"),children:[typeof s=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:j,className:"proton-CheckboxInput__label",children:s}):s,e.jsxRuntimeExports.jsxs("span",{className:"proton-CheckboxInput__box",children:[e.jsxRuntimeExports.jsx("input",{ref:C,id:j,name:p,type:"checkbox",...y?{checked:u}:{defaultChecked:m},value:I,disabled:l,required:h,onChange:E,className:n.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--error",c&&"proton-CheckboxInput__input--round"),"aria-label":s?void 0:p,"aria-invalid":!!t,"aria-errormessage":d,"aria-describedby":g,"data-testid":_}),e.jsxRuntimeExports.jsx($.CheckboxIndicator,{round:c})]}),typeof o=="string"?e.jsxRuntimeExports.jsxs("div",{id:f,"aria-live":"polite",children:[o,h&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}):o]})}),typeof t=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:n.csx("proton-CheckboxInput__error"),id:d,children:t}):t]})});k.displayName="ProtonUICheckboxInput";exports.CheckboxInput=k;
 //# sourceMappingURL=CheckboxInput.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: React.ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: React.ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled. \n   * @default false\n  */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required. \n   * @default false\n  */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | React.ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${name}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${name}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${name}-description` : undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <input\n              ref={ref}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              checked={isControlled ? controlledChecked : undefined}\n              defaultChecked={!isControlled ? defaultChecked : undefined}\n              value={value}\n              disabled={isDisabled}\n              required={isRequired}\n              onChange={handleChange}\n              className={csx(\n                \"proton-CheckboxInput__input\",\n                error && \"proton-CheckboxInput__input--error\",\n                round && \"proton-CheckboxInput__input--round\",\n              )}\n              aria-label={!label ? name : undefined}\n              aria-invalid={Boolean(error)}\n              aria-errormessage={errorId}\n              aria-describedby={\n                [errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n              }\n              data-testid={testId}\n            />\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  }\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","ref","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs"],"mappings":"2PA8EaA,EAAgBC,EAAA,WAC3B,CACE,CACE,QAASC,EACT,eAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,GAAAC,EACA,cAAeC,EACf,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EAAQ,IAEVC,IACG,CACG,MAAAC,EAAcC,SAAyB,IAAI,EAC3CC,EAAMH,GAAgBC,EACtBG,EAAelB,IAAsB,OAG3CmB,EAAAA,UAAU,IAAM,CACVF,EAAI,UACNA,EAAI,QAAQ,cAAgBL,EAC9B,EACC,CAACA,EAAeK,CAAG,CAAC,EAEjB,MAAAG,EAAgBC,GAA2C,CACpDnB,GAAA,MAAAA,EAAAmB,EAAE,OAAO,QAAO,EAGvBC,EAAaf,GAAM,GAAGJ,CAAI,YAC1BoB,EAAU,OAAOZ,GAAU,SAAW,GAAGR,CAAI,SAAW,OACxDqB,EACJ,OAAOd,GAAgB,SAAW,GAAGP,CAAI,eAAiB,OAE5D,gCACG,MACC,CAAA,SAAA,CAAAsB,wBAAC,MAAI,CAAA,UAAWC,EAAAA,IAAIrB,GAAc,gCAAgC,EAChE,SAAAsB,EAAA,kBAAA,KAAC,MAAA,CACC,UAAWD,EAAA,IACT,kCACAb,GAAS,wCACX,EAEC,SAAA,CAAA,OAAOJ,GAAU,SAChBgB,EAAA,kBAAA,IAAC,QAAA,CACC,QAASH,EACT,UAAU,8BAET,SAAAb,CAAA,CAAA,EAGHA,EAGFgB,EAAA,kBAAA,IAAC,QAAA,CACC,IAAAR,EACA,GAAIK,EACJ,KAAAnB,EACA,KAAK,WACL,QAASe,EAAelB,EAAoB,OAC5C,eAAiBkB,EAAgC,OAAjBjB,EAChC,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUc,EACV,UAAWM,EAAA,IACT,8BACAf,GAAS,qCACTE,GAAS,oCACX,EACA,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBY,EACnB,mBACE,CAACA,EAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,cAAahB,CAAA,CACf,EAEC,OAAOE,GAAgB,SACtBiB,EAAAA,kBAAAA,KAAC,OAAI,GAAIH,EAAe,YAAU,SAC/B,SAAA,CAAAd,EACAJ,GAAcmB,EAAA,kBAAA,IAAC,OAAK,CAAA,cAAY,OAAO,SAAO,KAAA,CAAA,CAAA,CACjD,EAEAf,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBc,EAAA,kBAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,MAAI,6BAA6B,EAC5C,GAAIH,EAEH,SAAAZ,CAAA,CAAA,EAGHA,CAEJ,CAAA,CAAA,CAEJ,CACF,EAEAb,EAAc,YAAc"}
+{"version":3,"file":"CheckboxInput.cjs.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":"oVAgFaA,EAAgBC,EAAAA,WAC3B,CACE,CACE,QAASC,EACT,eAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,GAAAC,EACA,cAAeC,EACf,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EAAQ,EAAA,EAEVC,IACG,CACH,MAAMC,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAUC,EAAAA,aAAaH,EAAaD,CAAY,EAChDK,EAAenB,IAAsB,OACrCoB,EAASC,EAAAA,MAAA,EAGfC,EAAAA,UAAU,IAAM,CACVP,EAAY,UACdA,EAAY,QAAQ,cAAgBH,EAExC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMW,EAAgBC,GAAqC,CACzDtB,GAAA,MAAAA,EAAWsB,EAAE,OAAO,QACtB,EAEMC,EAAalB,GAAM,GAAGa,CAAM,YAC5BM,EAAU,OAAOf,GAAU,SAAW,GAAGS,CAAM,SAAW,OAC1DO,EACJ,OAAOjB,GAAgB,SAAW,GAAGU,CAAM,eAAiB,OACxDQ,EACJ,CAACF,EAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAK,OAExD,gCACG,MAAA,CACC,SAAA,CAAAE,wBAAC,MAAA,CAAI,UAAWC,EAAAA,IAAIzB,GAAc,gCAAgC,EAChE,SAAA0B,EAAAA,kBAAAA,KAAC,MAAA,CACC,UAAWD,EAAAA,IACT,kCACAjB,GAAS,wCAAA,EAGV,SAAA,CAAA,OAAOJ,GAAU,SAChBoB,EAAAA,kBAAAA,IAAC,QAAA,CACC,QAASJ,EACT,UAAU,8BAET,SAAAhB,CAAA,CAAA,EAGHA,EAGFsB,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,4BACd,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,QAAA,CACC,IAAKZ,EACL,GAAIQ,EACJ,KAAAtB,EACA,KAAK,WACJ,GAAIgB,EACD,CAAE,QAASnB,CAAA,EACX,CAAE,eAAAC,CAAA,EACN,MAAAG,EACA,SAAUC,EACV,SAAUC,EACV,SAAUiB,EACV,UAAWO,EAAAA,IACT,8BACAnB,GAAS,qCACTE,GAAS,oCAAA,EAEX,aAAaJ,EAAe,OAAPN,EACrB,eAAc,EAAQQ,EACtB,oBAAmBe,EACnB,mBAAkBE,EAClB,cAAapB,CAAA,CAAA,EAEfqB,wBAACG,EAAAA,mBAAkB,MAAAnB,CAAA,CAAc,CAAA,EACnC,EAEC,OAAOH,GAAgB,SACtBqB,EAAAA,kBAAAA,KAAC,OAAI,GAAIJ,EAAe,YAAU,SAC/B,SAAA,CAAAjB,EACAJ,GAAcuB,EAAAA,kBAAAA,IAAC,OAAA,CAAK,cAAY,OAAO,SAAA,IAAA,CAAO,CAAA,CAAA,CACjD,EAEAnB,CAAA,CAAA,CAAA,EAGN,EAEC,OAAOC,GAAU,SAChBkB,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAWC,EAAAA,IAAI,6BAA6B,EAC5C,GAAIJ,EAEH,SAAAf,CAAA,CAAA,EAGHA,CAAA,EAEJ,CAEJ,CACF,EAEAb,EAAc,YAAc"}

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

@@ -1,77 +1,81 @@
 import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as N, useRef as g, useEffect as R } from "react";
+import { forwardRef as R, useRef as B, useId as $, useEffect as E } from "react";
+import { useMergedRef as w } from "../../../hooks/useMergedRef.es.js";
+import { CheckboxIndicator as F } from "../CheckboxIndicator.es.js";
 /* empty css                     */
 import { csx as s } from "../../../utils/string.es.js";
-const $ = N(
+const M = R(
   ({
-    checked: a,
-    defaultChecked: k,
-    onChange: c,
-    name: t,
-    value: v,
-    isDisabled: p = !1,
-    isRequired: l = !1,
+    checked: p,
+    defaultChecked: m,
+    onChange: i,
+    name: l,
+    value: k,
+    isDisabled: x = !1,
+    isRequired: h = !1,
     id: I,
     "data-testid": _,
-    label: r,
-    description: i,
+    label: t,
+    description: r,
     error: o,
-    indeterminate: x = !1,
-    round: h = !1
-  }, m) => {
-    const j = g(null), n = m || j, u = a !== void 0;
-    R(() => {
-      n.current && (n.current.indeterminate = x);
-    }, [x, n]);
-    const C = (y) => {
-      c == null || c(y.target.checked);
-    }, f = I || `${t}-checkbox`, d = typeof o == "string" ? `${t}-error` : void 0, b = typeof i == "string" ? `${t}-description` : void 0;
+    indeterminate: f = !1,
+    round: n = !1
+  }, j) => {
+    const c = B(null), v = w(c, j), C = p !== void 0, a = $();
+    E(() => {
+      c.current && (c.current.indeterminate = f);
+    }, [f]);
+    const y = (g) => {
+      i == null || i(g.target.checked);
+    }, u = I || `${a}-checkbox`, d = typeof o == "string" ? `${a}-error` : void 0, b = typeof r == "string" ? `${a}-description` : void 0, N = [d, b].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsx("div", { className: s(p && "proton-CheckboxInput--disabled"), children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: s(x && "proton-CheckboxInput--disabled"), children: /* @__PURE__ */ e.jsxs(
         "div",
         {
           className: s(
             "proton-CheckboxInput__container",
-            h && "proton-CheckboxInput__container--round"
+            n && "proton-CheckboxInput__container--round"
           ),
           children: [
-            typeof r == "string" ? /* @__PURE__ */ e.jsx(
+            typeof t == "string" ? /* @__PURE__ */ e.jsx(
               "label",
               {
-                htmlFor: f,
+                htmlFor: u,
                 className: "proton-CheckboxInput__label",
-                children: r
+                children: t
               }
-            ) : r,
-            /* @__PURE__ */ e.jsx(
-              "input",
-              {
-                ref: n,
-                id: f,
-                name: t,
-                type: "checkbox",
-                checked: u ? a : void 0,
-                defaultChecked: u ? void 0 : k,
-                value: v,
-                disabled: p,
-                required: l,
-                onChange: C,
-                className: s(
-                  "proton-CheckboxInput__input",
-                  o && "proton-CheckboxInput__input--error",
-                  h && "proton-CheckboxInput__input--round"
-                ),
-                "aria-label": r ? void 0 : t,
-                "aria-invalid": !!o,
-                "aria-errormessage": d,
-                "aria-describedby": [d, b].filter(Boolean).join(" ") || void 0,
-                "data-testid": _
-              }
-            ),
-            typeof i == "string" ? /* @__PURE__ */ e.jsxs("div", { id: b, "aria-live": "polite", children: [
-              i,
-              l && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: " *" })
-            ] }) : i
+            ) : t,
+            /* @__PURE__ */ e.jsxs("span", { className: "proton-CheckboxInput__box", children: [
+              /* @__PURE__ */ e.jsx(
+                "input",
+                {
+                  ref: v,
+                  id: u,
+                  name: l,
+                  type: "checkbox",
+                  ...C ? { checked: p } : { defaultChecked: m },
+                  value: k,
+                  disabled: x,
+                  required: h,
+                  onChange: y,
+                  className: s(
+                    "proton-CheckboxInput__input",
+                    o && "proton-CheckboxInput__input--error",
+                    n && "proton-CheckboxInput__input--round"
+                  ),
+                  "aria-label": t ? void 0 : l,
+                  "aria-invalid": !!o,
+                  "aria-errormessage": d,
+                  "aria-describedby": N,
+                  "data-testid": _
+                }
+              ),
+              /* @__PURE__ */ e.jsx(F, { round: n })
+            ] }),
+            typeof r == "string" ? /* @__PURE__ */ e.jsxs("div", { id: b, "aria-live": "polite", children: [
+              r,
+              h && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: " *" })
+            ] }) : r
           ]
         }
       ) }),
@@ -87,8 +91,8 @@ const $ = N(
     ] });
   }
 );
-$.displayName = "ProtonUICheckboxInput";
+M.displayName = "ProtonUICheckboxInput";
 export {
-  $ as CheckboxInput
+  M as CheckboxInput
 };
 //# sourceMappingURL=CheckboxInput.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: React.ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: React.ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled. \n   * @default false\n  */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required. \n   * @default false\n  */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | React.ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const ref = forwardedRef || checkboxRef;\n    const isControlled = controlledChecked !== undefined;\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate, ref]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${name}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${name}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${name}-description` : undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <input\n              ref={ref}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              checked={isControlled ? controlledChecked : undefined}\n              defaultChecked={!isControlled ? defaultChecked : undefined}\n              value={value}\n              disabled={isDisabled}\n              required={isRequired}\n              onChange={handleChange}\n              className={csx(\n                \"proton-CheckboxInput__input\",\n                error && \"proton-CheckboxInput__input--error\",\n                round && \"proton-CheckboxInput__input--round\",\n              )}\n              aria-label={!label ? name : undefined}\n              aria-invalid={Boolean(error)}\n              aria-errormessage={errorId}\n              aria-describedby={\n                [errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n              }\n              data-testid={testId}\n            />\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  }\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","ref","isControlled","useEffect","handleChange","e","checkboxId","errorId","descriptionId","jsx","csx","jsxs"],"mappings":";;;;AA8EO,MAAMA,IAAgBC;AAAA,EAC3B,CACE;AAAA,IACE,SAASC;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,IAAAC;AAAA,IACA,eAAeC;AAAA,IACf,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,OAAAC,IAAQ;AAAA,KAEVC,MACG;AACG,UAAAC,IAAcC,EAAyB,IAAI,GAC3CC,IAAMH,KAAgBC,GACtBG,IAAelB,MAAsB;AAG3C,IAAAmB,EAAU,MAAM;AACd,MAAIF,EAAI,YACNA,EAAI,QAAQ,gBAAgBL;AAAA,IAC9B,GACC,CAACA,GAAeK,CAAG,CAAC;AAEjB,UAAAG,IAAe,CAACC,MAA2C;AACpD,MAAAnB,KAAA,QAAAA,EAAAmB,EAAE,OAAO;AAAA,IAAO,GAGvBC,IAAaf,KAAM,GAAGJ,CAAI,aAC1BoB,IAAU,OAAOZ,KAAU,WAAW,GAAGR,CAAI,WAAW,QACxDqB,IACJ,OAAOd,KAAgB,WAAW,GAAGP,CAAI,iBAAiB;AAE5D,kCACG,OACC,EAAA,UAAA;AAAA,MAAAsB,gBAAAA,MAAC,OAAI,EAAA,WAAWC,EAAIrB,KAAc,gCAAgC,GAChE,UAAAsB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAb,KAAS;AAAA,UACX;AAAA,UAEC,UAAA;AAAA,YAAA,OAAOJ,KAAU,WAChBgB,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASH;AAAA,gBACT,WAAU;AAAA,gBAET,UAAAb;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,YAGFgB,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAAR;AAAA,gBACA,IAAIK;AAAA,gBACJ,MAAAnB;AAAA,gBACA,MAAK;AAAA,gBACL,SAASe,IAAelB,IAAoB;AAAA,gBAC5C,gBAAiBkB,IAAgC,SAAjBjB;AAAA,gBAChC,OAAAG;AAAA,gBACA,UAAUC;AAAA,gBACV,UAAUC;AAAA,gBACV,UAAUc;AAAA,gBACV,WAAWM;AAAA,kBACT;AAAA,kBACAf,KAAS;AAAA,kBACTE,KAAS;AAAA,gBACX;AAAA,gBACA,cAAaJ,IAAe,SAAPN;AAAA,gBACrB,gBAAc,EAAQQ;AAAA,gBACtB,qBAAmBY;AAAA,gBACnB,oBACE,CAACA,GAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,gBAExD,eAAahB;AAAA,cAAA;AAAA,YACf;AAAA,YAEC,OAAOE,KAAgB,WACtBiB,gBAAAA,EAAAA,KAAC,SAAI,IAAIH,GAAe,aAAU,UAC/B,UAAA;AAAA,cAAAd;AAAA,cACAJ,KAAcmB,gBAAAA,EAAA,IAAC,QAAK,EAAA,eAAY,QAAO,UAAO,MAAA;AAAA,YAAA,EAAA,CACjD,IAEAf;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEC,OAAOC,KAAU,WAChBc,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,6BAA6B;AAAA,UAC5C,IAAIH;AAAA,UAEH,UAAAZ;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;AAEAb,EAAc,cAAc;"}
+{"version":3,"file":"CheckboxInput.es.js","sources":["../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useId, useRef, type ForwardedRef, type ReactNode, type ChangeEvent } from \"react\";\n\nimport { useMergedRef } from \"../../../hooks/useMergedRef\";\nimport { csx } from \"../../../utils\";\nimport { CheckboxIndicator } from \"../CheckboxIndicator\";\nimport \"./CheckboxInput.css\";\n\nexport interface CheckboxInputProps {\n  /**\n   * Whether the checkbox is checked (controlled mode).\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the checkbox is checked by default (uncontrolled mode).\n   */\n  defaultChecked?: boolean;\n\n  /** The error attribute of the checkbox input. */\n  error?: ReactNode | string;\n\n  /** The description attribute of the checkbox input. */\n  description?: ReactNode | string;\n\n  /** The test id attribute of the checkbox input. */\n  \"data-testid\"?: string;\n\n  /**\n   * Callback fired when the checkbox state changes.\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the checkbox is in an indeterminate state. Used for checkboxes that are neither checked nor unchecked.\n   * @default false\n   * @external https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate\n   * @reference @external https://medium.com/indigoag-eng/indeterminate-checkboxes-are-weird-704b246c0f19\n   */\n  indeterminate?: boolean;\n\n  /** The id attribute of the checkbox input. */\n  id?: string;\n\n  /** Whether the checkbox is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /** Whether the checkbox is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /** The name attribute of the checkbox input. */\n  name: string;\n\n  /** The label attribute of the checkbox input. */\n  label?: string | ReactNode;\n\n  /**\n   * The value attribute of the checkbox input (for form submission).\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  value?: string;\n\n  /**\n   * Whether the checkbox should be rendered as a round control (with a dot indicator when checked).\n   * @default false\n   */\n  round?: boolean;\n}\n\n/**\n * A checkbox input component with support for labels, descriptions, error states, and controlled/uncontrolled modes.\n *\n * API:\n *  - {@link CheckboxInputProps}\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked,\n      onChange,\n      name,\n      value,\n      isDisabled = false,\n      isRequired = false,\n      id,\n      \"data-testid\": testId,\n      label,\n      description,\n      error,\n      indeterminate = false,\n      round = false,\n    },\n    forwardedRef: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const setRefs = useMergedRef(checkboxRef, forwardedRef);\n    const isControlled = controlledChecked !== undefined;\n    const idBase = useId();\n\n    // indeterminate state can only be set via JS\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked);\n    };\n\n    const checkboxId = id || `${idBase}-checkbox`;\n    const errorId = typeof error === \"string\" ? `${idBase}-error` : undefined;\n    const descriptionId =\n      typeof description === \"string\" ? `${idBase}-description` : undefined;\n    const ariaDescribedBy =\n      [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n    return (\n      <div>\n        <div className={csx(isDisabled && \"proton-CheckboxInput--disabled\")}>\n          <div\n            className={csx(\n              \"proton-CheckboxInput__container\",\n              round && \"proton-CheckboxInput__container--round\",\n            )}\n          >\n            {typeof label === \"string\" ? (\n              <label\n                htmlFor={checkboxId}\n                className=\"proton-CheckboxInput__label\"\n              >\n                {label}\n              </label>\n            ) : (\n              label\n            )}\n\n            <span className=\"proton-CheckboxInput__box\">\n              <input\n                ref={setRefs}\n                id={checkboxId}\n                name={name}\n                type=\"checkbox\"\n                {...(isControlled\n                  ? { checked: controlledChecked }\n                  : { defaultChecked })}\n                value={value}\n                disabled={isDisabled}\n                required={isRequired}\n                onChange={handleChange}\n                className={csx(\n                  \"proton-CheckboxInput__input\",\n                  error && \"proton-CheckboxInput__input--error\",\n                  round && \"proton-CheckboxInput__input--round\",\n                )}\n                aria-label={!label ? name : undefined}\n                aria-invalid={Boolean(error)}\n                aria-errormessage={errorId}\n                aria-describedby={ariaDescribedBy}\n                data-testid={testId}\n              />\n              <CheckboxIndicator round={round} />\n            </span>\n\n            {typeof description === \"string\" ? (\n              <div id={descriptionId} aria-live=\"polite\">\n                {description}\n                {isRequired && <span aria-hidden=\"true\">&nbsp;*</span>}\n              </div>\n            ) : (\n              description\n            )}\n          </div>\n        </div>\n\n        {typeof error === \"string\" ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-CheckboxInput__error\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : (\n          error\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxInput.displayName = \"ProtonUICheckboxInput\";\n"],"names":["CheckboxInput","forwardRef","controlledChecked","defaultChecked","onChange","name","value","isDisabled","isRequired","id","testId","label","description","error","indeterminate","round","forwardedRef","checkboxRef","useRef","setRefs","useMergedRef","isControlled","idBase","useId","useEffect","handleChange","e","checkboxId","errorId","descriptionId","ariaDescribedBy","jsx","csx","jsxs","CheckboxIndicator"],"mappings":";;;;;;AAgFO,MAAMA,IAAgBC;AAAA,EAC3B,CACE;AAAA,IACE,SAASC;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,IAAAC;AAAA,IACA,eAAeC;AAAA,IACf,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,OAAAC,IAAQ;AAAA,EAAA,GAEVC,MACG;AACH,UAAMC,IAAcC,EAAyB,IAAI,GAC3CC,IAAUC,EAAaH,GAAaD,CAAY,GAChDK,IAAenB,MAAsB,QACrCoB,IAASC,EAAA;AAGf,IAAAC,EAAU,MAAM;AACd,MAAIP,EAAY,YACdA,EAAY,QAAQ,gBAAgBH;AAAA,IAExC,GAAG,CAACA,CAAa,CAAC;AAElB,UAAMW,IAAe,CAACC,MAAqC;AACzD,MAAAtB,KAAA,QAAAA,EAAWsB,EAAE,OAAO;AAAA,IACtB,GAEMC,IAAalB,KAAM,GAAGa,CAAM,aAC5BM,IAAU,OAAOf,KAAU,WAAW,GAAGS,CAAM,WAAW,QAC1DO,IACJ,OAAOjB,KAAgB,WAAW,GAAGU,CAAM,iBAAiB,QACxDQ,IACJ,CAACF,GAASC,CAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAExD,kCACG,OAAA,EACC,UAAA;AAAA,MAAAE,gBAAAA,MAAC,OAAA,EAAI,WAAWC,EAAIzB,KAAc,gCAAgC,GAChE,UAAA0B,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAjB,KAAS;AAAA,UAAA;AAAA,UAGV,UAAA;AAAA,YAAA,OAAOJ,KAAU,WAChBoB,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASJ;AAAA,gBACT,WAAU;AAAA,gBAET,UAAAhB;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,YAGFsB,gBAAAA,EAAAA,KAAC,QAAA,EAAK,WAAU,6BACd,UAAA;AAAA,cAAAF,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKZ;AAAA,kBACL,IAAIQ;AAAA,kBACJ,MAAAtB;AAAA,kBACA,MAAK;AAAA,kBACJ,GAAIgB,IACD,EAAE,SAASnB,EAAA,IACX,EAAE,gBAAAC,EAAA;AAAA,kBACN,OAAAG;AAAA,kBACA,UAAUC;AAAA,kBACV,UAAUC;AAAA,kBACV,UAAUiB;AAAA,kBACV,WAAWO;AAAA,oBACT;AAAA,oBACAnB,KAAS;AAAA,oBACTE,KAAS;AAAA,kBAAA;AAAA,kBAEX,cAAaJ,IAAe,SAAPN;AAAA,kBACrB,gBAAc,EAAQQ;AAAA,kBACtB,qBAAmBe;AAAA,kBACnB,oBAAkBE;AAAA,kBAClB,eAAapB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEfqB,gBAAAA,MAACG,KAAkB,OAAAnB,EAAA,CAAc;AAAA,YAAA,GACnC;AAAA,YAEC,OAAOH,KAAgB,WACtBqB,gBAAAA,EAAAA,KAAC,SAAI,IAAIJ,GAAe,aAAU,UAC/B,UAAA;AAAA,cAAAjB;AAAA,cACAJ,KAAcuB,gBAAAA,EAAAA,IAAC,QAAA,EAAK,eAAY,QAAO,UAAA,KAAA,CAAO;AAAA,YAAA,EAAA,CACjD,IAEAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEC,OAAOC,KAAU,WAChBkB,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWC,EAAI,6BAA6B;AAAA,UAC5C,IAAIJ;AAAA,UAEH,UAAAf;AAAA,QAAA;AAAA,MAAA,IAGHA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEAb,EAAc,cAAc;"}

package/dist/components/Checkbox/CheckboxRadioGroup/CheckboxRadioGroup.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"),v=require("react"),n=require("radix-ui");;/* empty css                                      */;/* empty css                            */const s=require("../../../utils/string.cjs.js"),u=v.forwardRef(({name:i,items:x,value:b,defaultValue:h,onChange:R,isDisabled:a=!1,isRequired:j=!1,orientation:d="vertical",round:c=!1,error:r,"data-testid":_},C)=>{const p=typeof r=="string"?`${i}-error`:void 0;return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx(n.RadioGroup.Root,{ref:C,name:i,value:b,defaultValue:h,onValueChange:R,disabled:a,required:j,orientation:d,className:s.csx("proton-CheckboxRadioGroup",`proton-CheckboxRadioGroup--${d}`),"aria-invalid":!!r,"aria-errormessage":p,"data-testid":_,children:x.map(o=>{const t=`${i}-${o.value}`,k=a||o.isDisabled,l=typeof o.description=="string"?`${t}-description`:void 0;return e.jsxRuntimeExports.jsxs("div",{className:s.csx(k&&"proton-CheckboxInput--disabled"),children:[e.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-CheckboxInput__container",c&&"proton-CheckboxInput__container--round"),children:[e.jsxRuntimeExports.jsx(n.RadioGroup.Item,{id:t,value:o.value,disabled:o.isDisabled,className:s.csx("proton-CheckboxInput__input",c&&"proton-CheckboxInput__input--round",r&&"proton-CheckboxInput__input--error"),"aria-describedby":l,children:e.jsxRuntimeExports.jsx(n.RadioGroup.Indicator,{className:"proton-CheckboxRadioGroup__indicator"})}),typeof o.label=="string"?e.jsxRuntimeExports.jsx("label",{htmlFor:t,className:"proton-CheckboxInput__label",children:o.label}):o.label]}),typeof o.description=="string"?e.jsxRuntimeExports.jsx("div",{id:l,className:"proton-CheckboxRadioGroup__description",children:o.description}):o.description]},o.value)})}),typeof r=="string"?e.jsxRuntimeExports.jsx("div",{role:"alert",className:"proton-CheckboxInput__error",id:p,children:r}):r]})});u.displayName="ProtonUICheckboxRadioGroup";exports.CheckboxRadioGroup=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../node_modules/react/jsx-runtime.cjs.js"),u=require("react"),n=require("radix-ui"),f=require("../CheckboxIndicator.cjs.js");;/* empty css                                      */;/* empty css                            */const s=require("../../../utils/string.cjs.js"),l=u.forwardRef(({name:b,items:h,value:R,defaultValue:j,onChange:k,isDisabled:a=!1,isRequired:m=!1,orientation:c="vertical",round:t=!1,error:r,"data-testid":C},_)=>{const d=u.useId(),p=typeof r=="string"?`${d}-error`:void 0;return o.jsxRuntimeExports.jsxs("div",{children:[o.jsxRuntimeExports.jsx(n.RadioGroup.Root,{ref:_,name:b,value:R,defaultValue:j,onValueChange:k,disabled:a,required:m,orientation:c,className:s.csx("proton-CheckboxRadioGroup",`proton-CheckboxRadioGroup--${c}`),"aria-invalid":!!r,"aria-errormessage":p,"data-testid":C,children:h.map((e,I)=>{const i=`${d}-item-${I}`,v=a||e.isDisabled,x=typeof e.description=="string"?`${i}-description`:void 0;return o.jsxRuntimeExports.jsxs("div",{className:s.csx(v&&"proton-CheckboxInput--disabled"),children:[o.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-CheckboxInput__container",t&&"proton-CheckboxInput__container--round"),children:[o.jsxRuntimeExports.jsx(n.RadioGroup.Item,{id:i,value:e.value,disabled:e.isDisabled,className:s.csx("proton-CheckboxInput__input",t&&"proton-CheckboxInput__input--round",r&&"proton-CheckboxInput__input--error"),"aria-describedby":x,children:o.jsxRuntimeExports.jsx(n.RadioGroup.Indicator,{className:s.csx(!t&&"proton-CheckboxRadioGroup__checkmark"),forceMount:!0,children:o.jsxRuntimeExports.jsx(f.CheckboxIndicator,{round:t})})}),typeof e.label=="string"?o.jsxRuntimeExports.jsx("label",{htmlFor:i,className:"proton-CheckboxInput__label",children:e.label}):e.label]}),typeof e.description=="string"?o.jsxRuntimeExports.jsx("div",{id:x,className:"proton-CheckboxRadioGroup__description",children:e.description}):e.description]},e.value)})}),typeof r=="string"?o.jsxRuntimeExports.jsx("div",{role:"alert",className:"proton-CheckboxInput__error",id:p,children:r}):r]})});l.displayName="ProtonUICheckboxRadioGroup";exports.CheckboxRadioGroup=l;
 //# sourceMappingURL=CheckboxRadioGroup.cjs.js.map

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

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