@transferwise/components 46.60.0 → 46.61.0

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/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/package.json

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

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/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);