@transferwise/components 0.0.0-experimental-4242b3a → 0.0.0-experimental-2007f10

package/build/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/switch/Switch.js

@@ -32,7 +32,7 @@ const Switch = props => {
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,

package/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAET,QAAQ,GAAG,EAAE,GAAG,CAAE;AAC5BU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/switch/Switch.mjs

@@ -28,7 +28,7 @@ const Switch = props => {
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,

package/build/switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAET,QAAQ,GAAG,EAAE,GAAG,CAAE;AAC5BU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA8GP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CAgHP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/ListItemNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAe9F,CAAC"}
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAkB9F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4242b3a",
+  "version": "0.0.0-experimental-2007f10",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,10 +91,10 @@
     "rollup": "^4.41.1",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
-    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/listItem/ListItem.less

@@ -72,6 +72,19 @@
       }
     }
 
+    &.disabled {
+      filter: none;
+      opacity: 1;
+
+      label {
+        cursor: not-allowed;
+      }
+
+      .tw-icon-backslash-circle {
+        color: var(--color-content-tertiary);
+      }
+    }
+
     &-spotlight {
         &-active {
             background-color: var(--color-background-neutral);

package/src/listItem/ListItem.story.tsx

@@ -458,4 +458,125 @@ export const ButtonInteractivity: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: () => (
+    <div>
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Navigation"
+        subtitle={lorem5}
+        control={<ListItem.Navigation onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button secondary neutral"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button primary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button tertiary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Icon Button"
+        subtitle={lorem5}
+        control={
+          <ListItem.IconButton>
+            <Plus />
+          </ListItem.IconButton>
+        }
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox checked"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox checked />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox indeterminate"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox indeterminate />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch on"
+        subtitle={lorem5}
+        control={<ListItem.Switch checked onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch off"
+        subtitle={lorem5}
+        control={<ListItem.Switch onClick={() => {}} />}
+      />
+    </div>
+  ),
+};
+
 // add intaces with dark mode

package/src/listItem/ListItem.tsx

@@ -134,6 +134,7 @@ export const ListItem = ({
           {
             'wds-list-item-interactive':
               controlType !== 'non-interactive' &&
+              !disabled &&
               !(controlProps as ListItemButtonProps | ListItemIconButtonProps)
                 ?.partiallyInteractive,
           },
@@ -144,6 +145,7 @@ export const ListItem = ({
           { disabled },
           className,
         )}
+        aria-disabled={disabled}
         aria-describedby={[ids.additionalInfo].join(' ')}
       >
         <View {...{ prompt, controlType, controlProps }}>

package/src/listItem/ListItemButton.tsx

@@ -6,7 +6,7 @@ export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled
 };
 
 export const Button = ({
-  priority = 'secondary-neutral',
+  priority = 'secondary',
   partiallyInteractive,
   ...props
 }: ListItemButtonProps) => {

package/src/listItem/ListItemNavigation.tsx

@@ -8,7 +8,10 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
 export const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {
   const { baseItemProps } = useItemControl('navigation', { href, ...props });
   const isLink = href !== '#';
-  const icon = baseItemProps.disabled ? <BackslashCircle size={24} /> : <ChevronRight size={24} />;
+  const icon = <ChevronRight size={24} />;
+
+  if (baseItemProps.disabled) return <BackslashCircle size={24} />;
+
   return isLink ? (
     <>{icon}</>
   ) : (

package/src/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/switch/Switch.tsx

@@ -55,7 +55,7 @@ const Switch = (props: SwitchProps) => {
         },
         className,
       )}
-      tabIndex={0}
+      tabIndex={disabled ? -1 : 0}
       role="switch"
       aria-checked={checked}
       aria-label={ariaLabel}