@transferwise/components 46.99.0 → 46.100.0

package/build/switchOption/SwitchOption.js

@@ -46,6 +46,7 @@ const SwitchOption = ({
   };
   return /*#__PURE__*/jsxRuntime.jsx(Option.default, {
     ...sharedProps,
+    className: "np-switch-option",
     button: /*#__PURE__*/jsxRuntime.jsx(Switch.default, {
       id: id,
       checked: checked,

package/build/switchOption/SwitchOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","button","Switch","onClick"],"mappings":";;;;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;GACnB;EAED,oBACEc,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,WAAW;IACfI,MAAM,eACJF,cAAA,CAACG,cAAM,EAAA;AACLb,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBO,MAAAA,OAAO,EAAEL;AAAO,KAEpB,CAAC;AACDK,IAAAA,OAAO,EAAEL;AAAO,GAChB,CAAA;AAEN;;;;"}
+{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      className=\"np-switch-option\"\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;GACnB;EAED,oBACEc,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,WAAW;AACfI,IAAAA,SAAS,EAAC,kBAAkB;IAC5BC,MAAM,eACJH,cAAA,CAACI,cAAM,EAAA;AACLd,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBQ,MAAAA,OAAO,EAAEN;AAAO,KAEpB,CAAC;AACDM,IAAAA,OAAO,EAAEN;AAAO,GAChB,CAAA;AAEN;;;;"}

package/build/switchOption/SwitchOption.mjs

@@ -42,6 +42,7 @@ const SwitchOption = ({
   };
   return /*#__PURE__*/jsx(Option, {
     ...sharedProps,
+    className: "np-switch-option",
     button: /*#__PURE__*/jsx(Switch, {
       id: id,
       checked: checked,

package/build/switchOption/SwitchOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.mjs","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","button","Switch","onClick"],"mappings":";;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;GACnB;EAED,oBACEc,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,WAAW;IACfI,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;AACLb,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBO,MAAAA,OAAO,EAAEL;AAAO,KAEpB,CAAC;AACDK,IAAAA,OAAO,EAAEL;AAAO,GAChB,CAAA;AAEN;;;;"}
+{"version":3,"file":"SwitchOption.mjs","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n  checked?: boolean;\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n  id?: string;\n  media?: React.ReactNode;\n  onChange: (newValue: boolean) => void;\n  title: React.ReactNode;\n  'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n  if (event) {\n    event.stopPropagation();\n    event.preventDefault();\n    event.nativeEvent?.stopImmediatePropagation?.();\n  }\n};\n\nconst SwitchOption = ({\n  checked,\n  complex,\n  content,\n  disabled,\n  id,\n  media,\n  onChange,\n  title,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n  'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaCircle,\n    showMediaAtAllSizes,\n    isContainerAligned,\n  };\n  const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n    stopPropagation(event);\n    if (disabled) {\n      return;\n    }\n\n    onChange(!checked);\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      className=\"np-switch-option\"\n      button={\n        <Switch\n          id={id}\n          checked={checked}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          onClick={toggle}\n        />\n      }\n      onClick={toggle}\n    />\n  );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;AAEKC,MAAAA,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;GACnB;EAED,oBACEc,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,WAAW;AACfI,IAAAA,SAAS,EAAC,kBAAkB;IAC5BC,MAAM,eACJH,GAAA,CAACI,MAAM,EAAA;AACLd,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBQ,MAAAA,OAAO,EAAEN;AAAO,KAEpB,CAAC;AACDM,IAAAA,OAAO,EAAEN;AAAO,GAChB,CAAA;AAEN;;;;"}

package/build/types/accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { AccordionItemProps } from './AccordionItem';
-export type AccordionItem = Pick<AccordionItemProps, 'id' | 'title' | 'subtitle' | 'content' | 'icon'>;
+export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;
 export interface AccordionProps {
     /** The index of the item that should be open by default. */
     indexOpen?: number;

package/build/types/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAErC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,kBAAkB,EAClB,IAAI,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CACjD,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkCjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAErC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEnF,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAsCjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/accordion/AccordionItem/AccordionItem.d.ts

@@ -16,6 +16,14 @@ export interface AccordionItemProps {
     open: boolean;
     /** An optional icon to display next to the accordion item title. */
     icon?: ReactNode;
+    /** An optional media element to display next to the accordion item title. */
+    media?: ReactNode;
+    /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */
+    showMediaAtAllSizes?: boolean;
+    /** An optional showMediaCircle to display media within the circle. */
+    showMediaCircle?: boolean;
+    /** An optional isContainerAligned to display media aligned with the container. */
+    isContainerAligned?: boolean;
     /** @deprecated ... */
     theme?: 'light' | 'dark';
 }
@@ -33,6 +41,10 @@ export interface AccordionItemProps {
  * @param {Function} onClick - A callback function that is called when the accordion item is clicked.
  * @param {boolean} open - Whether the accordion item is currently open or closed.
  * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.
+ * @param {ReactNode} [media] - An optional media to display next to the accordion item.
+ * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.
+ * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.
+ * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.
  * @example
  * // Example usage:
  *

package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA6DzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAiDjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/switchOption/SwitchOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchOption.d.ts","sourceRoot":"","sources":["../../../src/switchOption/SwitchOption.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,QAAA,MAAM,YAAY,GAAI,yJAanB,iBAAiB,gCAmCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SwitchOption.d.ts","sourceRoot":"","sources":["../../../src/switchOption/SwitchOption.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,QAAA,MAAM,YAAY,GAAI,yJAanB,iBAAiB,gCAoCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.99.0",
+  "version": "46.100.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,10 +91,10 @@
     "rollup": "^4.43.0",
     "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/components-theming": "1.6.3"
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",

package/src/accordion/Accordion.css

@@ -27,10 +27,13 @@
 }.np-accordion-item .np-option .np-option__title {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+}.np-theme-personal .np-accordion-item--with-media .media {
+  display: flex;
+  align-items: center;
 }.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
-}.np-theme-personal .np-accordion-item .media {
+}.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
 }.np-theme-personal .np-accordion-item .decision__title {

package/src/accordion/Accordion.less

@@ -41,15 +41,20 @@
   }
 
   .np-theme-personal & {
+    &--with-media {
+      .media {
+        display: flex;
+        align-items: center;
+      }
+    }
     &--with-icon {
       .np-accordion-item__content {
         padding: 0 var(--size-56) var(--size-16);
       }
-    }
-
-    .media {
-      display: flex;
-      align-items: flex-start;
+      .media {
+        display: flex;
+        align-items: flex-start;
+      }
     }
 
     .decision__title {

package/src/accordion/Accordion.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
 import { Scroll, Size } from '../common';
 import Modal from '../modal';
@@ -53,6 +53,34 @@ const meta: Meta<typeof Accordion> = {
         id: 'Item 5',
         icon: <FastFlagIcon size={24} />,
       },
+      {
+        title: 'Item 6',
+        subtitle: 'Sixth item',
+        content: lorem10,
+        id: 'Item 6',
+        icon: <CardWiseIcon size={24} />,
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+      },
+      {
+        title: 'Item 7',
+        subtitle: 'Seventh item',
+        content: lorem10,
+        id: 'Item 7',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaAtAllSizes: false,
+        showMediaCircle: false,
+        isContainerAligned: false,
+      },
     ],
   },
 };
@@ -81,6 +109,7 @@ export const Multiple: Story = {
         <Accordion {...args} items={[items[0]]} />
         <Accordion {...args} items={[items[0]]} indexOpen={0} />
         <Accordion {...args} items={items} />
+        <Accordion {...args} items={[items[6]]} indexOpen={0} />
       </>
     );
   },

package/src/accordion/Accordion.tsx

@@ -2,10 +2,7 @@ import { useState, FC } from 'react';
 
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
 
-export type AccordionItem = Pick<
-  AccordionItemProps,
-  'id' | 'title' | 'subtitle' | 'content' | 'icon'
->;
+export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;
 
 export interface AccordionProps {
   /** The index of the item that should be open by default. */
@@ -89,6 +86,10 @@ const Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme =
           subtitle={item.subtitle}
           content={item.content}
           icon={item.icon}
+          media={item.media}
+          showMediaAtAllSizes={item.showMediaAtAllSizes}
+          showMediaCircle={item.showMediaCircle}
+          isContainerAligned={item.isContainerAligned}
           onClick={() => handleOnClick(index)}
         />
       ))}

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -24,6 +24,14 @@ export interface AccordionItemProps {
   open: boolean;
   /** An optional icon to display next to the accordion item title. */
   icon?: ReactNode;
+  /** An optional media element to display next to the accordion item title. */
+  media?: ReactNode;
+  /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */
+  showMediaAtAllSizes?: boolean;
+  /** An optional showMediaCircle to display media within the circle. */
+  showMediaCircle?: boolean;
+  /** An optional isContainerAligned to display media aligned with the container. */
+  isContainerAligned?: boolean;
   /** @deprecated ... */
   theme?: 'light' | 'dark';
 }
@@ -42,6 +50,10 @@ export interface AccordionItemProps {
  * @param {Function} onClick - A callback function that is called when the accordion item is clicked.
  * @param {boolean} open - Whether the accordion item is currently open or closed.
  * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.
+ * @param {ReactNode} [media] - An optional media to display next to the accordion item.
+ * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.
+ * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.
+ * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.
  * @example
  * // Example usage:
  *
@@ -72,25 +84,31 @@ const AccordionItem: FC<AccordionItemProps> = ({
   onClick,
   open,
   icon,
+  media,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned,
   theme = 'light',
 }) => {
-  const iconElement = icon
+  const mediaElement = icon
     ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })
-    : null;
+    : media;
   const fallbackId = useId();
   const accordionId = id ?? fallbackId;
 
   return (
     <div
       id={accordionId}
-      className={clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
+      className={clsx('np-accordion-item', {
         'np-accordion-item--open': open,
+        'np-accordion-item--with-icon': Boolean(icon),
+        'np-accordion-item--with-media': Boolean(media),
       })}
     >
       <Option
         aria-label={ariaLabel}
         as="button"
-        media={iconElement}
+        media={mediaElement}
         title={title}
         content={subtitle}
         button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
@@ -98,6 +116,9 @@ const AccordionItem: FC<AccordionItemProps> = ({
         aria-expanded={open}
         aria-controls={`${accordionId}-section`}
         id={`${accordionId}-control`}
+        showMediaCircle={showMediaCircle}
+        showMediaAtAllSizes={showMediaAtAllSizes}
+        isContainerAligned={isContainerAligned}
         onClick={onClick}
       />
       {open && (

package/src/main.css

@@ -72,11 +72,15 @@
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+.np-theme-personal .np-accordion-item--with-media .media {
+  display: flex;
+  align-items: center;
+}
 .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
 }
-.np-theme-personal .np-accordion-item .media {
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
 }
@@ -5145,6 +5149,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   margin-top: var(--size-24);
 }
 .np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
@@ -5153,6 +5159,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  cursor: pointer;
 }
 .np-switch:focus {
   outline: none;
@@ -5185,21 +5192,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 [dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
 }
-.np-switch input {
-  position: absolute;
-  left: -100%;
-  display: none;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-[dir="rtl"] .np-switch input {
-  right: -100%;
-  left: auto;
-  left: initial;
-}
-.np-switch:not([aria-disabled]) {
-  cursor: pointer;
+.np-switch.disabled {
+  filter: grayscale(1);
+  opacity: 0.45;
+  cursor: not-allowed !important;
 }
 .np-theme-personal .np-switch {
   padding: 1px 2px;
@@ -5215,6 +5211,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
+.np-switch-option.disabled .np-switch {
+  filter: none;
+  opacity: 1;
+}
 .tabs {
   position: relative;
 }

package/src/main.less

@@ -65,6 +65,7 @@
 @import "./segmentedControl/SegmentedControl.less";
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
+@import "./switchOption/SwitchOption.less";
 @import "./tabs/Tabs.less";
 @import "./table/Table.less";
 @import "./tile/Tile.less";

package/src/switch/Switch.css

@@ -1,4 +1,8 @@
-.np-switch {
+@media (min-width: 768px) {
+}@media (min-width: 768px) {
+}.np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
@@ -7,61 +11,38 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-}
-.np-switch:focus {
+  cursor: pointer;
+}.np-switch:focus {
   outline: none;
-}
-.np-switch:focus-visible {
+}.np-switch:focus-visible {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
-}
-.np-switch--thumb {
+}.np-switch--thumb {
   display: flex;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-}
-.np-switch--thumb .tw-icon {
+}.np-switch--thumb .tw-icon {
   color: #fff;
-}
-.np-switch--unchecked {
+}.np-switch--unchecked {
   background: #c9cbce;
   background: var(--color-interactive-secondary);
-}
-.np-switch--unchecked .switch--thumb {
+}.np-switch--unchecked .switch--thumb {
   transform: translateX(0);
-}
-.np-switch--checked {
+}.np-switch--checked {
   background: #00a2dd;
   background: var(--color-interactive-accent);
-}
-.np-switch--checked .np-switch--thumb {
+}.np-switch--checked .np-switch--thumb {
   transform: translateX(20px)  ;
-}
-[dir="rtl"] .np-switch--checked .np-switch--thumb {
+}[dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
-}
-.np-switch input {
-  position: absolute;
-  left: -100%;
-  display: none;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-[dir="rtl"] .np-switch input {
-  right: -100%;
-  left: auto;
-  left: initial;
-}
-.np-switch:not([aria-disabled]) {
-  cursor: pointer;
-}
-.np-theme-personal .np-switch {
+}.np-switch.disabled {
+  filter: grayscale(1);
+  opacity: 0.45;
+  cursor: not-allowed !important;
+}.np-theme-personal .np-switch {
   padding: 1px 2px;
-}
-.np-theme-personal .np-switch--checked {
+}.np-theme-personal .np-switch--checked {
   background: var(--color-interactive-primary);
-}
-.np-theme-personal .np-switch--thumb {
+}.np-theme-personal .np-switch--thumb {
   width: 20px;
   height: 20px;
   margin: 3px;

package/src/switch/Switch.less

@@ -1,14 +1,18 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_scaffolding.less";
 
 .np-switch {
+  all: unset;
+  box-sizing: border-box;
   display: inline-flex;
   overflow: hidden;
   width: 50px;
   padding: 2px;
   border-radius: 16px;
   user-select: none;
+  cursor: pointer;
 
   .focus-ring();
 
@@ -37,18 +41,8 @@
     }
   }
 
-  input {
-    position: absolute;
-    .left(-100%);
-
-    display: none;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
-
-  &:not([aria-disabled]) {
-    cursor: pointer;
+  &.disabled{
+    .disabled();
   }
 }
 

package/src/switch/Switch.spec.tsx

@@ -1,5 +1,5 @@
 import { Field } from '../field/Field';
-import { render, fireEvent, screen } from '../test-utils';
+import { render, userEvent, fireEvent, screen } from '../test-utils';
 
 import Switch from './Switch';
 
@@ -22,7 +22,7 @@ describe('Switch', () => {
         onClick={props.onClick}
       />,
     );
-    expect(container).toMatchSnapshot();
+    expect(screen.getByRole('switch')).toBeChecked();
   });
 
   it('renders component associated with label', () => {
@@ -54,25 +54,27 @@ describe('Switch', () => {
         onClick={props.onClick}
       />,
     );
-    expect(container).toMatchSnapshot();
+    expect(screen.getByLabelText(props['aria-label'])).not.toBeChecked();
   });
 
-  it('calls onClick when user press space key', () => {
+  it('calls onClick when user press space or enter key', async () => {
     render(
       <Switch
-        checked={props.checked}
         className={props.className}
-        id={props.id}
         aria-label={props['aria-label']}
         onClick={props.onClick}
       />,
     );
 
-    const input = screen.getAllByRole('checkbox')[0];
-    fireEvent.keyDown(input, { key: 'Enter' });
     expect(props.onClick).not.toHaveBeenCalled();
-    fireEvent.keyDown(input, { key: ' ' });
+
+    await userEvent.tab();
+
+    await userEvent.keyboard(' ');
     expect(props.onClick).toHaveBeenCalledTimes(1);
+
+    await userEvent.keyboard('{Enter}');
+    expect(props.onClick).toHaveBeenCalledTimes(2);
   });
 
   it('should not call onClick if disabled', () => {