@transferwise/components 46.60.0 → 46.61.1

package/build/checkboxButton/CheckboxButton.js

@@ -7,27 +7,38 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
   checked,
+  indeterminate = false,
   className,
   disabled,
   onChange,
   ...rest
 }, reference) {
   const inputAttributes = contexts.useInputAttributes();
+  const internalRef = React.useRef(null);
+  React.useImperativeHandle(reference, () => internalRef.current ?? {});
+  React.useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: clsx.clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       ...inputAttributes,
       ...rest,
-      ref: reference,
+      ref: reference ?? internalRef,
       type: "checkbox",
       disabled: disabled,
       checked: checked,
       onChange: onChange
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "tw-checkbox-button",
-      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "tw-checkbox-check"
-      })
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-tw-checkbox-indeterminate"
+      })]
     })]
   });
 });

package/build/checkboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,cAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n  indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, indeterminate = false, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  const internalRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n  useEffect(() => {\n    if (internalRef.current) {\n      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment\n      internalRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, reference]);\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference ?? internalRef}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AASA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;AAAEC,EAAAA,aAAa,GAAG,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAC1EC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;EAElDC,yBAAmB,CAACL,SAAS,EAAE,MAAMG,WAAW,CAACG,OAAO,IAAK,EAAuB,CAAC,CAAA;AAErFC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,WAAW,CAACG,OAAO,EAAE;AACvB;AACAH,MAAAA,WAAW,CAACG,OAAO,CAACX,aAAa,GAAGA,aAAa,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACA,aAAa,EAAEK,SAAS,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEQ,eAAA,CAAA,MAAA,EAAA;IAAMZ,SAAS,EAAEa,SAAI,CAAC,oBAAoB,EAAEb,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAa,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACMV,eAAe;AAAA,MAAA,GACfF,IAAI;MACRa,GAAG,EAAEZ,SAAS,IAAIG,WAAY;AAC9BU,MAAAA,IAAI,EAAC,UAAU;AACfhB,MAAAA,QAAQ,EAAEA,QAAS;AACnBH,MAAAA,OAAO,EAAEA,OAAQ;AACjBI,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAU,eAAA,CAAA,MAAA,EAAA;AAAMZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAc,MAAAA,QAAA,gBAClCC,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAe,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/checkboxButton/CheckboxButton.mjs

@@ -1,31 +1,42 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
   checked,
+  indeterminate = false,
   className,
   disabled,
   onChange,
   ...rest
 }, reference) {
   const inputAttributes = useInputAttributes();
+  const internalRef = useRef(null);
+  useImperativeHandle(reference, () => internalRef.current ?? {});
+  useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
   return /*#__PURE__*/jsxs("span", {
     className: clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsx("input", {
       ...inputAttributes,
       ...rest,
-      ref: reference,
+      ref: reference ?? internalRef,
       type: "checkbox",
       disabled: disabled,
       checked: checked,
       onChange: onChange
-    }), /*#__PURE__*/jsx("span", {
+    }), /*#__PURE__*/jsxs("span", {
       className: "tw-checkbox-button",
-      children: /*#__PURE__*/jsx("span", {
+      children: [/*#__PURE__*/jsx("span", {
         className: "tw-checkbox-check"
-      })
+      }), /*#__PURE__*/jsx("span", {
+        className: "np-tw-checkbox-indeterminate"
+      })]
     })]
   });
 });

package/build/checkboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,GAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n  indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, indeterminate = false, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  const internalRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n  useEffect(() => {\n    if (internalRef.current) {\n      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment\n      internalRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate, reference]);\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference ?? internalRef}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n        <span className=\"np-tw-checkbox-indeterminate\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AASA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;AAAEC,EAAAA,aAAa,GAAG,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAC1EC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,MAAMC,WAAW,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;EAElDC,mBAAmB,CAACL,SAAS,EAAE,MAAMG,WAAW,CAACG,OAAO,IAAK,EAAuB,CAAC,CAAA;AAErFC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,WAAW,CAACG,OAAO,EAAE;AACvB;AACAH,MAAAA,WAAW,CAACG,OAAO,CAACX,aAAa,GAAGA,aAAa,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACA,aAAa,EAAEK,SAAS,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEQ,IAAA,CAAA,MAAA,EAAA;IAAMZ,SAAS,EAAEa,IAAI,CAAC,oBAAoB,EAAEb,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAa,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACMV,eAAe;AAAA,MAAA,GACfF,IAAI;MACRa,GAAG,EAAEZ,SAAS,IAAIG,WAAY;AAC9BU,MAAAA,IAAI,EAAC,UAAU;AACfhB,MAAAA,QAAQ,EAAEA,QAAS;AACnBH,MAAAA,OAAO,EAAEA,OAAQ;AACjBI,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAU,IAAA,CAAA,MAAA,EAAA;AAAMZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAc,MAAAA,QAAA,gBAClCC,GAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAe,GAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/chips/Chips.js

@@ -29,6 +29,8 @@ const Chips = ({
     children: chips.map(chip => {
       const chipSelected = isSelected(chip.value);
       return /*#__PURE__*/jsxRuntime.jsx(Chip, {
+        role: !multiple ? 'radio' : 'checkbox',
+        "aria-checked": chipSelected,
         value: chip.value,
         label: chip.label,
         closeButton: {
@@ -41,13 +43,10 @@ const Chips = ({
           'p-r-1': multiple && chipSelected
         }),
         ...(multiple && chipSelected ? {
-          onRemove: () => handleOnChange(chip.value, chipSelected),
-          'aria-label': chip.label
+          onRemove: () => handleOnChange(chip.value, chipSelected)
         } : {
           onClick: () => handleOnChange(chip.value, chipSelected),
-          onKeyPress: () => handleOnChange(chip.value, chipSelected),
-          role: !multiple ? 'radio' : undefined,
-          'aria-checked': chipSelected
+          onKeyPress: () => handleOnChange(chip.value, chipSelected)
         })
       }, chip.value);
     })

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' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\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                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': 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","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB,CAAA;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;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    /** 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' : undefined}\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","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;AAEHN,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAcmB,YAAa;QAC3Bf,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACd,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chips.mjs

@@ -27,6 +27,8 @@ const Chips = ({
     children: chips.map(chip => {
       const chipSelected = isSelected(chip.value);
       return /*#__PURE__*/jsx(Chip, {
+        role: !multiple ? 'radio' : 'checkbox',
+        "aria-checked": chipSelected,
         value: chip.value,
         label: chip.label,
         closeButton: {
@@ -39,13 +41,10 @@ const Chips = ({
           'p-r-1': multiple && chipSelected
         }),
         ...(multiple && chipSelected ? {
-          onRemove: () => handleOnChange(chip.value, chipSelected),
-          'aria-label': chip.label
+          onRemove: () => handleOnChange(chip.value, chipSelected)
         } : {
           onClick: () => handleOnChange(chip.value, chipSelected),
-          onKeyPress: () => handleOnChange(chip.value, chipSelected),
-          role: !multiple ? 'radio' : undefined,
-          'aria-checked': chipSelected
+          onKeyPress: () => handleOnChange(chip.value, chipSelected)
         })
       }, chip.value);
     })

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' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\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                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': 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","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,GAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB,CAAA;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;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    /** 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' : undefined}\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","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;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,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,GAAA,CAACQ,IAAI,EAAA;AAEHN,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAcmB,YAAa;QAC3Bf,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACd,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}

package/build/main.css

@@ -796,7 +796,8 @@ div.critical-comms .critical-comms-body {
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -809,6 +810,24 @@ div.critical-comms .critical-comms-body {
   left: auto;
   left: initial;
 }
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
 .np-chip {
   background-color: transparent;
   border: 1px solid rgba(0,0,0,0.10196);

package/build/styles/checkboxButton/CheckboxButton.css

@@ -9,7 +9,8 @@
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -22,3 +23,21 @@
   left: auto;
   left: initial;
 }
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}

package/build/styles/main.css

@@ -796,7 +796,8 @@ div.critical-comms .critical-comms-body {
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -809,6 +810,24 @@ div.critical-comms .critical-comms-body {
   left: auto;
   left: initial;
 }
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
 .np-chip {
   background-color: transparent;
   border: 1px solid rgba(0,0,0,0.10196);

package/build/types/checkboxButton/CheckboxButton.d.ts

@@ -1,5 +1,9 @@
 import { InputHTMLAttributes } from 'react';
-export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
-declare const CheckboxButton: import("react").ForwardRefExoticComponent<CheckboxButtonProps & import("react").RefAttributes<HTMLInputElement>>;
+export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+    indeterminate?: boolean;
+};
+declare const CheckboxButton: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    indeterminate?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default CheckboxButton;
 //# sourceMappingURL=CheckboxButton.d.ts.map

package/build/types/checkboxButton/CheckboxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAExE,QAAA,MAAM,cAAc,kHAsBlB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAsD,MAAM,OAAO,CAAC;AAIhG,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc;oBAHF,OAAO;oDAqCvB,CAAC;AAEH,eAAe,cAAc,CAAC"}

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,iFAOR,UAAU,gCA8CZ,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,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,iFAOR,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.60.0",
+  "version": "46.61.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.13.4",
-    "@wise/components-theming": "1.6.0"
+    "@transferwise/neptune-css": "14.14.0",
+    "@wise/components-theming": "1.6.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -20,6 +20,9 @@ exports[`Checkbox renders the given label 1`] = `
           <span
             class="tw-checkbox-check"
           />
+          <span
+            class="np-tw-checkbox-indeterminate"
+          />
         </span>
       </span>
       <span

package/src/checkboxButton/CheckboxButton.css

@@ -9,7 +9,8 @@
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -22,3 +23,21 @@
   left: auto;
   left: initial;
 }
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}

package/src/checkboxButton/CheckboxButton.less

@@ -14,7 +14,7 @@
     }
   }
 
-  .tw-checkbox-check {
+  .tw-checkbox-check, .np-tw-checkbox-indeterminate {
     pointer-events: none;
   }
 }
@@ -27,3 +27,24 @@
     margin: 0;
   }
 }
+
+.np-tw-checkbox-indeterminate {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 2px;
+    top: 55%;
+    left: 50%;
+    background: var(--color-background-screen);
+    transform: translate(-50%, -50%);
+  }
+
+  .has-error {
+    &::after {
+      background-color: var(--color-interactive-negative);
+    }
+  }
+}

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import CheckboxButton from './CheckboxButton';
+import CheckboxButton, { CheckboxButtonProps } from './CheckboxButton';
 
 export default {
   component: CheckboxButton,
@@ -29,3 +29,26 @@ export const Basic: Story = {
     return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
   },
 };
+
+const Template = (props: CheckboxButtonProps) => {
+  const checked = true;
+  const [indeterminate, setIndeterminate] = useState(true);
+
+  return (
+    <CheckboxButton
+      {...props}
+      checked={checked}
+      indeterminate={indeterminate}
+      onChange={() => setIndeterminate(!indeterminate)}
+    />
+  );
+};
+
+export const Indeterminate = () => {
+  const args = {
+    'aria-label': 'Group checkbox with indeterminate state',
+    disabled: false,
+    indeterminate: true,
+  };
+  return <Template {...args} />;
+};

package/src/checkboxButton/CheckboxButton.tsx

@@ -1,22 +1,35 @@
 import { clsx } from 'clsx';
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 import { useInputAttributes } from '../inputs/contexts';
 
-export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
+export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {
+  indeterminate?: boolean;
+};
 
 const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(
-  { checked, className, disabled, onChange, ...rest },
+  { checked, indeterminate = false, className, disabled, onChange, ...rest },
   reference,
 ) {
   const inputAttributes = useInputAttributes();
 
+  const internalRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));
+
+  useEffect(() => {
+    if (internalRef.current) {
+      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, reference]);
+
   return (
     <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>
       <input
         {...inputAttributes}
         {...rest}
-        ref={reference}
+        ref={reference ?? internalRef}
         type="checkbox"
         disabled={disabled}
         checked={checked}
@@ -24,6 +37,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(functio
       />
       <span className="tw-checkbox-button">
         <span className="tw-checkbox-check" />
+        <span className="np-tw-checkbox-indeterminate" />
       </span>
     </span>
   );

package/src/chips/Chips.spec.tsx

@@ -85,7 +85,7 @@ describe('Chips', () => {
 
     it(`will pass previous state, updated state, and cleared value on clear`, () => {
       render(<Chips {...filterProps} />);
-      fireEvent.click(screen.getAllByRole('button')[3]);
+      fireEvent.click(screen.getByRole('button', { name: 'Clear Payments' }));
       expect(filterProps.onChange).toHaveBeenCalledWith({
         selectedValue: 'payments',
         isEnabled: false,

package/src/chips/Chips.tsx

@@ -59,6 +59,8 @@ const Chips = ({
         return (
           <Chip
             key={chip.value}
+            role={!multiple ? 'radio' : 'checkbox'}
+            aria-checked={chipSelected}
             value={chip.value}
             label={chip.label}
             closeButton={{
@@ -71,13 +73,10 @@ const Chips = ({
             {...(multiple && chipSelected
               ? {
                   onRemove: () => handleOnChange(chip.value, chipSelected),
-                  'aria-label': chip.label,
                 }
               : {
                   onClick: () => handleOnChange(chip.value, chipSelected),
                   onKeyPress: () => handleOnChange(chip.value, chipSelected),
-                  role: !multiple ? 'radio' : undefined,
-                  'aria-checked': chipSelected,
                 })}
           />
         );

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -72,7 +72,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
     <div
       aria-checked="false"
       class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="button"
+      role="checkbox"
       tabindex="0"
     >
       <span
@@ -85,7 +85,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
     <div
       aria-checked="false"
       class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="button"
+      role="checkbox"
       tabindex="0"
     >
       <span
@@ -98,7 +98,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
     <div
       aria-checked="false"
       class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="button"
+      role="checkbox"
       tabindex="0"
     >
       <span
@@ -109,8 +109,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       </span>
     </div>
     <div
-      aria-label="Payments"
+      aria-checked="true"
       class="np-chip d-flex align-items-center justify-content-between np-chip--removable text-xs-nowrap np-chip--selected p-r-1"
+      role="checkbox"
       tabindex="-1"
     >
       <span

package/src/main.css

@@ -796,7 +796,8 @@ div.critical-comms .critical-comms-body {
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
   cursor: pointer;
 }
-.np-checkbox-button .tw-checkbox-check {
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
@@ -809,6 +810,24 @@ div.critical-comms .critical-comms-body {
   left: auto;
   left: initial;
 }
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
 .np-chip {
   background-color: transparent;
   border: 1px solid rgba(0,0,0,0.10196);