@transferwise/components 0.0.0-experimental-a8f3db2 → 0.0.0-experimental-8abc58f

package/build/main.css

@@ -5149,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;
@@ -5157,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;
@@ -5189,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;
@@ -5219,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/build/styles/main.css

@@ -5149,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;
@@ -5157,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;
@@ -5189,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;
@@ -5219,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/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/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": "0.0.0-experimental-a8f3db2",
+  "version": "0.0.0-experimental-8abc58f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/Accordion.story.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
@@ -6,6 +7,7 @@ import Modal from '../modal';
 import { lorem10, lorem40 } from '../test-utils';
 
 import Accordion from './Accordion';
+import Button from '../button/Button';
 
 /**
  * Metadata for the Accordion component story.
@@ -20,8 +22,8 @@ const meta: Meta<typeof Accordion> = {
           'A simple accordion component that displays a list of items that can be expanded or collapsed.',
       },
     },
-    tags: ['autodocs'],
   },
+  tags: ['autodocs'],
   args: {
     items: [
       {
@@ -133,28 +135,36 @@ export const WithinModal: Story = {
       delay: 1000,
     },
   },
-  render: (args) => {
+  render: (args, { viewMode }) => {
+    // Modal is open by default unless in docs view
+    const [open, setOpen] = useState(viewMode !== 'docs');
     const { items } = args;
+
     return (
-      <Modal
-        body={
-          <div className="p-a-1">
-            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
-            <Accordion {...args} items={[items[0]]} />
-            <Accordion {...args} items={[items[0]]} indexOpen={0} />
-            <Accordion {...args} items={items} />
-          </div>
-        }
-        scroll={Scroll.CONTENT}
-        size={Size.LARGE}
-        open
-        footer={
-          <div className="p-a-3 text-xs-center">
-            <a href="/large-amounts">Learn more</a>
-          </div>
-        }
-        onClose={() => {}}
-      />
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          body={
+            <div className="p-a-1">
+              <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
+              <Accordion {...args} items={[items[0]]} />
+              <Accordion {...args} items={[items[0]]} indexOpen={0} />
+              <Accordion {...args} items={items} />
+            </div>
+          }
+          scroll={Scroll.CONTENT}
+          size={Size.LARGE}
+          open={open}
+          footer={
+            <div className="p-a-3 text-xs-center">
+              <a href="/large-amounts">Learn more</a>
+            </div>
+          }
+          onClose={() => setOpen(false)}
+        />
+      </>
     );
   },
 };

package/src/avatarView/AvatarView.story.tsx

@@ -26,6 +26,7 @@ import Body from '../body';
 
 export default {
   title: 'Content/AvatarView',
+  tags: ['autodocs'],
 } satisfies Meta<typeof AvatarView>;
 
 type Story = StoryObj<typeof AvatarView>;
@@ -35,7 +36,6 @@ const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 export const Selected: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -69,7 +69,6 @@ export const Selected: Story = {
 };
 
 export const Notification: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -106,7 +105,6 @@ export const Notification: Story = {
 };
 
 export const Badge: Story = {
-  tags: ['autodocs'],
   render: () => {
     const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
     const icons = [
@@ -250,7 +248,6 @@ export const Badge: Story = {
 };
 
 export const Images: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -305,7 +302,6 @@ export const Images: Story = {
 };
 
 export const Profiles: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -388,7 +384,6 @@ export const ProfileBrokenImageFallback: Story = {
 };
 
 export const EdgeInstaces: Story = {
-  tags: ['autodocs'],
   render: () => {
     const css = `.custom-variant {
       border: 1px dashed var(--color-border-neutral);

package/src/carousel/Carousel.story.tsx

@@ -9,6 +9,7 @@ import Carousel, { type CarouselCard } from './Carousel';
 export default {
   component: Carousel,
   title: 'Navigation/Carousel',
+  tags: ['autodocs'],
 };
 
 const carouselCards: CarouselCard[] = [

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -16,13 +16,14 @@ export default {
   component: BottomSheet,
   title: 'Dialogs/BottomSheet',
   args: {
-    open: true,
+    open: false,
   },
-  render: (args) => {
-    const [open, setOpen] = useState(args.open);
+  tags: ['autodocs'],
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
 
     return (
-      <div style={{ height: '2000px' }}>
+      <div>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
         <BottomSheet
           {...args}

package/src/common/circle/Circle.story.tsx

@@ -9,6 +9,7 @@ import Body from '../../body';
 export default {
   title: 'Internal/Circle',
   component: Circle,
+  tags: ['autodocs'],
 } satisfies Meta<typeof Circle>;
 
 type Story = StoryObj<typeof Circle>;

package/src/dateLookup/DateLookup.story.tsx

@@ -11,6 +11,7 @@ import DateLookup from './DateLookup';
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup',
+  tags: ['autodocs'],
 };
 
 const epoch = new Date('2011-01-01');

package/src/decision/Decision.story.tsx

@@ -10,6 +10,7 @@ import AvatarView from '../avatarView';
 export default {
   component: Decision,
   title: 'Layouts/Decision',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/definitionList/DefinitionList.story.tsx

@@ -10,6 +10,7 @@ import Header from '../header';
 export default {
   component: DefinitionList,
   title: 'Typography/DefinitionList',
+  tags: ['autodocs'],
 };
 
 const layouts: DefinitionListLayout[] = [

package/src/dimmer/Dimmer.story.tsx

@@ -12,6 +12,7 @@ export default {
     fadeContentOnExit: false,
     disableClickToClose: false,
   },
+  tags: ['autodocs'],
 } satisfies Meta<typeof Dimmer>;
 
 type Story = StoryObj<typeof Dimmer>;

package/src/display/Display.story.tsx

@@ -6,6 +6,7 @@ import Display from './Display';
 
 export default {
   title: 'Typography/Display',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/drawer/Drawer.story.tsx

@@ -9,6 +9,7 @@ import Drawer from './Drawer';
 export default {
   component: Drawer,
   title: 'Dialogs/Drawer',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {