@transferwise/components 0.0.0-experimental-4af964d → 0.0.0-experimental-04f7ce3

package/build/chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={clsx('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : 'group'}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            role={!multiple ? 'radio' : 'checkbox'}\n            aria-checked={chipSelected}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={clsx('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,cAAA,CAACO,YAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,sBAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** True turns on Filter-mode, False is Choice */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={clsx('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : 'group'}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            role={!multiple ? 'radio' : 'checkbox'}\n            aria-checked={chipSelected}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={clsx('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,cAAA,CAACO,YAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,sBAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}

package/build/chips/Chips.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={clsx('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : 'group'}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            role={!multiple ? 'radio' : 'checkbox'}\n            aria-checked={chipSelected}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={clsx('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,IAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,GAAA,CAACO,IAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,QAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** True turns on Filter-mode, False is Choice */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={clsx('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : 'group'}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            role={!multiple ? 'radio' : 'checkbox'}\n            aria-checked={chipSelected}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={clsx('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCA,MAAMA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA;AAAa,KAAE,CAAC;EAC7D,CAAC;AAED,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,IAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC;MAC3C,oBACEQ,GAAA,CAACO,IAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,QAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG;WAAO;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY;SAC1D;OAAA,EAnBAD,IAAI,CAACb,KAmBH,CACP;IAEN,CAAC;AAAC,GACC,CAAC;AAEV;;;;"}

package/build/types/chips/Chips.d.ts

@@ -14,7 +14,7 @@ export type ChipsProps = CommonProps & AriaLabelProperty & {
     }) => void;
     /** Used to manage which chips are selected */
     selected: ChipValue | readonly ChipValue[];
-    /** Used to activate multi-selection */
+    /** True turns on Filter-mode, False is Choice */
     multiple?: boolean;
 };
 declare const Chips: ({ chips, onChange, selected, "aria-label": ariaLabel, className, multiple, }: ChipsProps) => import("react").JSX.Element;

package/build/types/chips/Chips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAI,8EAOZ,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAI,8EAOZ,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/common/commonProps.d.ts

@@ -1,10 +1,4 @@
 export type CommonProps = {
-    /**
-     * Space-separated list of the case-sensitive CSS classes,
-     * most would be applied to outermost element inside the component
-     *
-     * @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
-     */
     className?: string;
 };
 export type AriaLabelProperty = {

package/build/types/common/commonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4af964d",
+  "version": "0.0.0-experimental-04f7ce3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.1",
     "@transferwise/neptune-css": "14.27.1",
+    "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/button/_stories/Button.story.tsx

@@ -165,6 +165,7 @@ const meta: Meta<typeof Button> = {
         name: 'enum',
         value: ['lg', 'md', 'sm'],
       },
+      description: 'Sets the size of the button.',
       table: {
         type: {
           summary: 'ButtonSize',
@@ -176,6 +177,7 @@ const meta: Meta<typeof Button> = {
         name: 'enum',
         value: ['primary', 'secondary', 'secondary-neutral', 'tertiary'],
       },
+      description: 'Sets the visual hierarchy of the action.',
       table: {
         type: {
           summary: 'ButtonPriority',
@@ -195,7 +197,7 @@ const meta: Meta<typeof Button> = {
       },
     },
     disabled: {
-      description: 'Toggles the disabled state',
+      description: 'Toggles the disabled state.',
       table: {
         defaultValue: { summary: 'false' },
       },
@@ -215,12 +217,13 @@ const meta: Meta<typeof Button> = {
       type: {
         name: 'string',
       },
-      description: 'If set, the component will render as an HTML anchor.',
+      description: 'Renders the component as a link when provided.',
     },
     target: {
       type: {
         name: 'string',
       },
+      description: 'Controls where the linked document opens. Use `_blank` to open in a new tab.',
       table: {
         type: {
           summary: 'string',
@@ -248,12 +251,31 @@ const meta: Meta<typeof Button> = {
       },
     },
     children: {
+      description: 'Visible button label.',
       table: {
         type: {
           summary: 'ReactNode',
         },
       },
     },
+    id: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
+    className: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
+    onClick: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
   },
   args: {
     v2: true,

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -1,67 +1,148 @@
-import { action } from 'storybook/actions';
+import { useState, useEffect } from 'react';
+import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useState } from 'react';
 
-import CheckboxButton from './CheckboxButton';
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import CheckboxButton, { type CheckboxButtonProps } from './CheckboxButton';
+import { Label } from '../label/Label';
 
+/**
+ * Use <a href="?path=/docs/forms-checkbox--docs">Checkbox</a> component instead when pairing with a label. Only use CheckboxButton when you need a standalone checkbox (e.g. settings matrix) and provide an `aria-label`.
+ *
+ * **Design guidance**: <a href="https://wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
+ */
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
   args: {
+    checked: true,
     disabled: false,
-    onBlur: action('blur'),
-    onClick: action('click'),
-    onFocus: action('focus'),
+    indeterminate: false,
+    onBlur: fn(),
+    onChange: fn(),
+    onClick: fn(),
+    onFocus: fn(),
+  },
+  argTypes: {
+    'aria-label': {
+      description: 'Provides the accessible name when the control has no visible text label.',
+    },
+    checked: {
+      description: 'Controls whether the checkbox is checked.',
+    },
+    disabled: {
+      description: 'Toggles the disabled state.',
+    },
+    name: {
+      description: 'Name submitted with the form when the checkbox is checked.',
+    },
+    value: {
+      description: 'Value submitted with the form when the checkbox is checked.',
+    },
+    onChange: {
+      description: 'Called when the checked state changes.',
+    },
+    indeterminate: {
+      description:
+        'Sets the native mixed state — used when some (not all) child items are selected. Clicking resolves to checked; clear `indeterminate` in `onChange` to reflect the transition.',
+    },
+    defaultChecked: { description: '', table: { category: 'Common' } },
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+    onBlur: { description: '', table: { category: 'Common' } },
+    onClick: { description: '', table: { category: 'Common' } },
+    onFocus: { description: '', table: { category: 'Common' } },
+  },
+  parameters: {
+    docs: { toc: true },
   },
 } satisfies Meta<typeof CheckboxButton>;
 
 type Story = StoryObj<typeof CheckboxButton>;
 
-export const Basic: Story = {
-  args: {
-    'aria-label': 'Toggle email updates',
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(true);
+const withColumnLayout = (Story: () => JSX.Element) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <Story />
+  </div>
+);
 
-    return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
-  },
-};
+/** Interactive single checkbox — use the Controls panel to toggle `disabled` and `indeterminate`. */
+export const Playground: Story = storySourceWithoutNoise({
+  render: function Render(args: CheckboxButtonProps) {
+    const [checked, setChecked] = useState(args.checked ?? true);
 
-/**
- * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
- * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
- * It is used to indicate a mixed state, where some but not all items are selected, but does not
- * change the `checked` state of the input itself – it remains either checked or unchecked.
- *
- * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
- */
-export const Indeterminate: Story = {
-  args: {
-    indeterminate: true,
-  },
-  render: (args) => {
-    const [checked1, setChecked1] = useState<boolean | undefined>(false);
-    const [checked2, setChecked2] = useState<boolean | undefined>(true);
+    useEffect(() => {
+      setChecked(args.checked ?? true);
+    }, [args.checked]);
 
     return (
-      <>
+      <CheckboxButton
+        {...args}
+        aria-label="Playground checkbox"
+        checked={checked}
+        onChange={(e) => {
+          setChecked(e.currentTarget.checked);
+          args.onChange?.(e);
+        }}
+      />
+    );
+  },
+});
+
+/** Disabled state — checked and unchecked. */
+export const Disabled: Story = {
+  decorators: [withColumnLayout],
+  render: (args) => (
+    <>
+      <div>
+        <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
+        <CheckboxButton
+          id="disabled-unchecked"
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <Label htmlFor="disabled-checked">Disabled checked</Label>
         <CheckboxButton
-          {...args}
-          checked={checked1}
-          indeterminate={args.indeterminate}
-          aria-label="Initially disabled checkbox with indeterminate state"
-          onChange={() => setChecked1((current) => !current)}
+          id="disabled-checked"
+          aria-label="Disabled checked"
+          checked
+          disabled
+          onChange={() => {}}
         />
+      </div>
+    </>
+  ),
+};
 
+/** Indeterminate state — checked and unchecked. */
+export const Indeterminate: Story = {
+  decorators: [withColumnLayout],
+  render: (args) => (
+    <>
+      <div>
+        <Label htmlFor="indeterminate-unchecked">Indeterminate (unchecked)</Label>
         <CheckboxButton
-          {...args}
-          checked={checked2}
-          indeterminate={args.indeterminate}
-          aria-label="Initially enabled checkbox with indeterminate state"
-          onChange={() => setChecked2((current) => !current)}
+          id="indeterminate-unchecked"
+          aria-label="Indeterminate unchecked"
+          checked={false}
+          indeterminate
+          onChange={() => {}}
         />
-      </>
-    );
-  },
+      </div>
+      <div>
+        <Label htmlFor="indeterminate-checked">Indeterminate (checked)</Label>
+        <CheckboxButton
+          id="indeterminate-checked"
+          aria-label="Indeterminate checked"
+          checked
+          indeterminate
+          onChange={() => {}}
+        />
+      </div>
+    </>
+  ),
 };

package/src/checkboxButton/CheckboxButton.test.story.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import CheckboxButton from './CheckboxButton';
+
+export default {
+  component: CheckboxButton,
+  title: 'Actions/CheckboxButton/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof CheckboxButton>;
+
+type Story = StoryObj<typeof CheckboxButton>;
+
+/** All checkbox states across all themes. */
+export const Variants: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+        <CheckboxButton
+          aria-label="Unchecked"
+          checked={unchecked}
+          onChange={() => setUnchecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Checked"
+          checked={checked}
+          onChange={() => setChecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Indeterminate"
+          checked={indeterminate}
+          indeterminate
+          onChange={() => setIndeterminate((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
+      </div>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/**
+ * `Space` toggles when focused (requires `onChange`). Tab skips disabled checkboxes.
+ * Indeterminate resolves to checked on first `Space`, then toggles normally.
+ */
+export const KeyboardInteraction: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    const [disabledUnchecked] = useState(false);
+    const [disabledChecked] = useState(true);
+
+    const row: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    };
+
+    const label: React.CSSProperties = {
+      fontSize: '14px',
+      color: '#4a5568',
+      width: '140px',
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Unchecked"
+            checked={unchecked}
+            onChange={() => setUnchecked((v: boolean) => !v)}
+          />
+          <span style={label}>Unchecked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Checked"
+            checked={checked}
+            onChange={() => setChecked((v: boolean) => !v)}
+          />
+          <span style={label}>Checked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Indeterminate"
+            checked={indeterminate}
+            indeterminate
+            onChange={() => setIndeterminate((v: boolean) => !v)}
+          />
+          <span style={label}>Indeterminate</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Disabled unchecked"
+            checked={disabledUnchecked}
+            disabled
+            onChange={() => {}}
+          />
+          <span style={label}>Disabled unchecked</span>
+        </div>
+        <div style={row}>
+          <CheckboxButton
+            aria-label="Disabled checked"
+            checked={disabledChecked}
+            disabled
+            onChange={() => {}}
+          />
+          <span style={label}>Disabled checked</span>
+        </div>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const wait = async (ms: number) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+      });
+    const canvas = within(canvasElement);
+
+    await step('tab to Unchecked and toggle on then off', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^unchecked$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab to Checked and toggle off then on', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^checked$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab to Indeterminate and toggle on then off', async () => {
+      await userEvent.tab();
+      const cb = canvas.getByRole('checkbox', { name: /^indeterminate$/i });
+      await expect(cb).toHaveFocus();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).toBeChecked();
+      await wait(400);
+      await userEvent.keyboard(' ');
+      await expect(cb).not.toBeChecked();
+    });
+
+    await wait(400);
+
+    await step('tab skips both disabled checkboxes — focus leaves the component', async () => {
+      await userEvent.tab();
+      const disabledUnchecked = canvas.getByRole('checkbox', { name: /disabled unchecked/i });
+      const disabledChecked = canvas.getByRole('checkbox', { name: /disabled checked/i });
+      await expect(disabledUnchecked).not.toHaveFocus();
+      await expect(disabledChecked).not.toHaveFocus();
+    });
+  },
+};
+
+/** Base checkbox states in right-to-left layout. */
+export const RTL: Story = {
+  render: function Render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [indeterminate, setIndeterminate] = useState(false);
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+        <CheckboxButton
+          aria-label="Unchecked"
+          checked={unchecked}
+          onChange={() => setUnchecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Checked"
+          checked={checked}
+          onChange={() => setChecked((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Indeterminate"
+          checked={indeterminate}
+          indeterminate
+          onChange={() => setIndeterminate((v) => !v)}
+        />
+        <CheckboxButton
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
+      </div>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** Checkbox states at 400% zoom for accessibility testing. */
+export const Zoom400: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
+      <CheckboxButton aria-label="Unchecked" checked={false} onChange={() => {}} />
+      <CheckboxButton aria-label="Checked" checked onChange={() => {}} />
+      <CheckboxButton
+        aria-label="Indeterminate"
+        checked={false}
+        indeterminate
+        onChange={() => {}}
+      />
+    </div>
+  ),
+  ...withVariantConfig(['400%']),
+};