@transferwise/components 46.98.1 → 46.100.0

package/build/styles/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/build/styles/switchOption/SwitchOption.css

@@ -0,0 +1,4 @@
+.np-switch-option.disabled .np-switch {
+  filter: none;
+  opacity: 1;
+}

package/build/switch/Switch.js

@@ -19,36 +19,25 @@ const Switch = props => {
     onClick,
     disabled
   } = props;
-  const handleKeyDown = event => {
-    if (event.key === ' ') {
-      event.preventDefault();
-      onClick();
-    }
-  };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
     className: clsx.clsx('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    type: "button",
     role: "switch",
+    ...inputAttributes,
+    id: id,
     "aria-checked": checked,
     "aria-label": ariaLabel,
-    ...inputAttributes,
     "aria-labelledby": ariaLabelledby,
-    id: id,
-    "aria-disabled": disabled,
+    disabled: disabled,
     onClick: !disabled ? onClick : undefined,
-    onKeyDown: !disabled ? handleKeyDown : undefined,
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "np-switch--thumb"
-    }), /*#__PURE__*/jsxRuntime.jsx("input", {
-      type: "checkbox",
-      checked: checked,
-      readOnly: true
-    })]
+    })
   });
 };
 

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 ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"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;AAET,EAAA,MAAMW,cAAc,GAClB,CAACJ,SAAS,GAAGK,SAAS,GAAGJ,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEY,cAAA,CAAA,QAAA,EAAA;AACER,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACV,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFU,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACTf,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBI,cAAe;AAChCD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,cAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAC;KAClB;AAAA,GAAQ,CAAC;AAEb;;;;"}

package/build/switch/Switch.mjs

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { useInputAttributes } from '../inputs/contexts.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const Switch = props => {
   const inputAttributes = useInputAttributes({
@@ -15,36 +15,25 @@ const Switch = props => {
     onClick,
     disabled
   } = props;
-  const handleKeyDown = event => {
-    if (event.key === ' ') {
-      event.preventDefault();
-      onClick();
-    }
-  };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
-  return /*#__PURE__*/jsxs("span", {
+  return /*#__PURE__*/jsx("button", {
     className: clsx('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    type: "button",
     role: "switch",
+    ...inputAttributes,
+    id: id,
     "aria-checked": checked,
     "aria-label": ariaLabel,
-    ...inputAttributes,
     "aria-labelledby": ariaLabelledby,
-    id: id,
-    "aria-disabled": disabled,
+    disabled: disabled,
     onClick: !disabled ? onClick : undefined,
-    onKeyDown: !disabled ? handleKeyDown : undefined,
-    children: [/*#__PURE__*/jsx("span", {
+    children: /*#__PURE__*/jsx("span", {
       className: "np-switch--thumb"
-    }), /*#__PURE__*/jsx("input", {
-      type: "checkbox",
-      checked: checked,
-      readOnly: true
-    })]
+    })
   });
 };
 

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 ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"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;AAET,EAAA,MAAMW,cAAc,GAClB,CAACJ,SAAS,GAAGK,SAAS,GAAGJ,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEY,GAAA,CAAA,QAAA,EAAA;AACER,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACV,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFU,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACTf,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBI,cAAe;AAChCD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,GAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAC;KAClB;AAAA,GAAQ,CAAC;AAEb;;;;"}

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/body/Body.d.ts

@@ -9,6 +9,11 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * Default value: `div`
      */
     as?: "span" | "p" | "div";
+    /**
+     * When true, preserves newline characters in the text
+     * @default false
+     */
+    preserveNewlines?: boolean;
 } & import("react").RefAttributes<HTMLSpanElement | HTMLParagraphElement | HTMLDivElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/body/Body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/body/Body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAc,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAsBzE,QAAA,MAAM,IAAI;IAVR;;OAEG;WACI,SAAS;IAChB;;OAEG;SACE,MAAM,GAAG,GAAG,GAAG,KAAK;kGAsBzB,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/body/Body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAc,SAAS,EAAE,MAAM,kCAAkC,CAAC;AA2BzE,QAAA,MAAM,IAAI;IAfR;;OAEG;WACI,SAAS;IAChB;;OAEG;SACE,MAAM,GAAG,GAAG,GAAG,KAAK;IACzB;;;OAGG;uBACgB,OAAO;kGA0B1B,CAAC;AAEH,eAAe,IAAI,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.98.1",
+  "version": "46.100.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@formatjs/cli": "^6.7.1",
+    "@formatjs/cli": "^6.7.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
@@ -80,7 +80,7 @@
     "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.21.2",
     "@wise/eslint-config": "^12.3.0",
-    "babel-plugin-formatjs": "^10.5.38",
+    "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.27.0",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
@@ -88,7 +88,7 @@
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.11",
-    "rollup": "^4.42.0",
+    "rollup": "^4.43.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
     "@transferwise/neptune-css": "14.24.4",
@@ -110,14 +110,14 @@
     "@floating-ui/react": "^0.27.9",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.20.4",
-    "@react-aria/overlays": "^3.27.2",
+    "@react-aria/focus": "^3.20.5",
+    "@react-aria/overlays": "^3.27.3",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/neptune-validation": "^3.3.0",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.42.0",
+    "core-js": "^3.43.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.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/body/Body.css

@@ -0,0 +1,3 @@
+.np-text--pre-line {
+  white-space: pre-line;
+}

package/src/body/Body.less

@@ -0,0 +1,3 @@
+.np-text--pre-line {
+  white-space: pre-line;
+}

package/src/body/Body.spec.tsx

@@ -32,6 +32,14 @@ describe('Body', () => {
     expect(copy).toHaveAttribute('role', 'banner');
   });
 
+  it('renders newlines as line breaks when preserveNewlines is true', () => {
+    render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
+    const copy = screen.getByText(/Line 1\.\s*Line 2/);
+    expect(copy).toHaveClass('np-text--pre-line');
+    expect(copy).toHaveTextContent('Line 1.');
+    expect(copy).toHaveTextContent('Line 2');
+  });
+
   it('handles unsupported typography type', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error