@transferwise/components 46.99.0 → 46.100.0

package/build/accordion/Accordion.js

@@ -33,6 +33,10 @@ const Accordion = ({
       subtitle: item.subtitle,
       content: item.content,
       icon: item.icon,
+      media: item.media,
+      showMediaAtAllSizes: item.showMediaAtAllSizes,
+      showMediaCircle: item.showMediaCircle,
+      isContainerAligned: item.isContainerAligned,
       onClick: () => handleOnClick(index)
     }, item.id || index))
   });

package/build/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../src/accordion/Accordion.tsx"],"sourcesContent":["import { useState, FC } from 'react';\n\nimport AccordionItem, { AccordionItemProps } from './AccordionItem';\n\nexport type AccordionItem = Pick<\n  AccordionItemProps,\n  'id' | 'title' | 'subtitle' | 'content' | 'icon'\n>;\n\nexport interface AccordionProps {\n  /** The index of the item that should be open by default. */\n  indexOpen?: number;\n  /** An array of items to display in the accordion. */\n  items: readonly AccordionItem[];\n  /** A callback function that is called when an item is clicked. */\n  onClick?: (index: number) => void;\n  /** @deprecated */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * Accordion\n *\n * A simple accordion component that displays a list of items that can be expanded or collapsed.\n *\n * @component\n * @param {number} indexOpen - index of the item that should be open\n * @param {Array<AccordionItemProps>} items - array of items to display\n * @param {Function} onClick - callback function\n * @example\n * // Example usage:\n *\n * import Accordion from './Accordion';\n *\n * const items = [\n *   {\n *     id: 'item1',\n *     title: 'Item 1',\n *     content: 'This is the content for item 1.',\n *   },\n *   {\n *     id: 'item2',\n *     title: 'Item 2',\n *     content: 'This is the content for item 2.',\n *   },\n *   {\n *     id: 'item3',\n *     title: 'Item 3',\n *     content: 'This is the content for item 3.',\n *   },\n * ];\n *\n * function App() {\n *   const handleItemClick = (index) => {\n *     console.log(`Item ${index} was clicked.`);\n *   };\n *\n *   return (\n *     <Accordion items={items} onClick={handleItemClick} />\n *   );\n * }\n */\nconst Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme = 'light' }) => {\n  const [itemsOpen, setItemsOpen] = useState(() =>\n    items.map((value, index) => index === indexOpen),\n  );\n\n  /**\n   * Handles a click event on an accordion item.\n   *\n   * @param index The index of the item that was clicked.\n   */\n  const handleOnClick = (index: number) => {\n    if (onClick) {\n      onClick(index);\n    }\n    const newItems = [...itemsOpen];\n    newItems[index] = !itemsOpen[index];\n    setItemsOpen(newItems);\n  };\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <AccordionItem\n          key={item.id || index}\n          open={itemsOpen[index]}\n          title={item.title}\n          subtitle={item.subtitle}\n          content={item.content}\n          icon={item.icon}\n          onClick={() => handleOnClick(index)}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default Accordion;\n"],"names":["Accordion","indexOpen","items","onClick","theme","itemsOpen","setItemsOpen","useState","map","value","index","handleOnClick","newItems","_jsx","_Fragment","children","item","AccordionItem","open","title","subtitle","content","icon","id"],"mappings":";;;;;;;;AA8DMA,MAAAA,SAAS,GAAuBA,CAAC;EAAEC,SAAS,GAAG,EAAE;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG;AAAO,CAAE,KAAI;EAC5F,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,MACzCL,KAAK,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKA,KAAK,KAAKT,SAAS,CAAC,CACjD;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;AAChB;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC;IACnCJ,YAAY,CAACM,QAAQ,CAAC;GACvB;EAED,oBACEC,cAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EACGb,KAAK,CAACM,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,kBACrBG,cAAA,CAACI,qBAAa,EAAA;AAEZC,MAAAA,IAAI,EAAEb,SAAS,CAACK,KAAK,CAAE;MACvBS,KAAK,EAAEH,IAAI,CAACG,KAAM;MAClBC,QAAQ,EAAEJ,IAAI,CAACI,QAAS;MACxBC,OAAO,EAAEL,IAAI,CAACK,OAAQ;MACtBC,IAAI,EAAEN,IAAI,CAACM,IAAK;AAChBnB,MAAAA,OAAO,EAAEA,MAAMQ,aAAa,CAACD,KAAK;AAAE,KAAA,EAN/BM,IAAI,CAACO,EAAE,IAAIb,KAOhB,CACH;AAAC,GACJ,CAAG;AAEP;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../../src/accordion/Accordion.tsx"],"sourcesContent":["import { useState, FC } from 'react';\n\nimport AccordionItem, { AccordionItemProps } from './AccordionItem';\n\nexport type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;\n\nexport interface AccordionProps {\n  /** The index of the item that should be open by default. */\n  indexOpen?: number;\n  /** An array of items to display in the accordion. */\n  items: readonly AccordionItem[];\n  /** A callback function that is called when an item is clicked. */\n  onClick?: (index: number) => void;\n  /** @deprecated */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * Accordion\n *\n * A simple accordion component that displays a list of items that can be expanded or collapsed.\n *\n * @component\n * @param {number} indexOpen - index of the item that should be open\n * @param {Array<AccordionItemProps>} items - array of items to display\n * @param {Function} onClick - callback function\n * @example\n * // Example usage:\n *\n * import Accordion from './Accordion';\n *\n * const items = [\n *   {\n *     id: 'item1',\n *     title: 'Item 1',\n *     content: 'This is the content for item 1.',\n *   },\n *   {\n *     id: 'item2',\n *     title: 'Item 2',\n *     content: 'This is the content for item 2.',\n *   },\n *   {\n *     id: 'item3',\n *     title: 'Item 3',\n *     content: 'This is the content for item 3.',\n *   },\n * ];\n *\n * function App() {\n *   const handleItemClick = (index) => {\n *     console.log(`Item ${index} was clicked.`);\n *   };\n *\n *   return (\n *     <Accordion items={items} onClick={handleItemClick} />\n *   );\n * }\n */\nconst Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme = 'light' }) => {\n  const [itemsOpen, setItemsOpen] = useState(() =>\n    items.map((value, index) => index === indexOpen),\n  );\n\n  /**\n   * Handles a click event on an accordion item.\n   *\n   * @param index The index of the item that was clicked.\n   */\n  const handleOnClick = (index: number) => {\n    if (onClick) {\n      onClick(index);\n    }\n    const newItems = [...itemsOpen];\n    newItems[index] = !itemsOpen[index];\n    setItemsOpen(newItems);\n  };\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <AccordionItem\n          key={item.id || index}\n          open={itemsOpen[index]}\n          title={item.title}\n          subtitle={item.subtitle}\n          content={item.content}\n          icon={item.icon}\n          media={item.media}\n          showMediaAtAllSizes={item.showMediaAtAllSizes}\n          showMediaCircle={item.showMediaCircle}\n          isContainerAligned={item.isContainerAligned}\n          onClick={() => handleOnClick(index)}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default Accordion;\n"],"names":["Accordion","indexOpen","items","onClick","theme","itemsOpen","setItemsOpen","useState","map","value","index","handleOnClick","newItems","_jsx","_Fragment","children","item","AccordionItem","open","title","subtitle","content","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","id"],"mappings":";;;;;;;;AA2DMA,MAAAA,SAAS,GAAuBA,CAAC;EAAEC,SAAS,GAAG,EAAE;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG;AAAO,CAAE,KAAI;EAC5F,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,MACzCL,KAAK,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKA,KAAK,KAAKT,SAAS,CAAC,CACjD;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;AAChB;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC;IACnCJ,YAAY,CAACM,QAAQ,CAAC;GACvB;EAED,oBACEC,cAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EACGb,KAAK,CAACM,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,kBACrBG,cAAA,CAACI,qBAAa,EAAA;AAEZC,MAAAA,IAAI,EAAEb,SAAS,CAACK,KAAK,CAAE;MACvBS,KAAK,EAAEH,IAAI,CAACG,KAAM;MAClBC,QAAQ,EAAEJ,IAAI,CAACI,QAAS;MACxBC,OAAO,EAAEL,IAAI,CAACK,OAAQ;MACtBC,IAAI,EAAEN,IAAI,CAACM,IAAK;MAChBC,KAAK,EAAEP,IAAI,CAACO,KAAM;MAClBC,mBAAmB,EAAER,IAAI,CAACQ,mBAAoB;MAC9CC,eAAe,EAAET,IAAI,CAACS,eAAgB;MACtCC,kBAAkB,EAAEV,IAAI,CAACU,kBAAmB;AAC5CvB,MAAAA,OAAO,EAAEA,MAAMQ,aAAa,CAACD,KAAK;AAAE,KAAA,EAV/BM,IAAI,CAACW,EAAE,IAAIjB,KAUoB,CAEvC;AAAC,GACJ,CAAG;AAEP;;;;"}

package/build/accordion/Accordion.mjs

@@ -29,6 +29,10 @@ const Accordion = ({
       subtitle: item.subtitle,
       content: item.content,
       icon: item.icon,
+      media: item.media,
+      showMediaAtAllSizes: item.showMediaAtAllSizes,
+      showMediaCircle: item.showMediaCircle,
+      isContainerAligned: item.isContainerAligned,
       onClick: () => handleOnClick(index)
     }, item.id || index))
   });

package/build/accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","sources":["../../src/accordion/Accordion.tsx"],"sourcesContent":["import { useState, FC } from 'react';\n\nimport AccordionItem, { AccordionItemProps } from './AccordionItem';\n\nexport type AccordionItem = Pick<\n  AccordionItemProps,\n  'id' | 'title' | 'subtitle' | 'content' | 'icon'\n>;\n\nexport interface AccordionProps {\n  /** The index of the item that should be open by default. */\n  indexOpen?: number;\n  /** An array of items to display in the accordion. */\n  items: readonly AccordionItem[];\n  /** A callback function that is called when an item is clicked. */\n  onClick?: (index: number) => void;\n  /** @deprecated */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * Accordion\n *\n * A simple accordion component that displays a list of items that can be expanded or collapsed.\n *\n * @component\n * @param {number} indexOpen - index of the item that should be open\n * @param {Array<AccordionItemProps>} items - array of items to display\n * @param {Function} onClick - callback function\n * @example\n * // Example usage:\n *\n * import Accordion from './Accordion';\n *\n * const items = [\n *   {\n *     id: 'item1',\n *     title: 'Item 1',\n *     content: 'This is the content for item 1.',\n *   },\n *   {\n *     id: 'item2',\n *     title: 'Item 2',\n *     content: 'This is the content for item 2.',\n *   },\n *   {\n *     id: 'item3',\n *     title: 'Item 3',\n *     content: 'This is the content for item 3.',\n *   },\n * ];\n *\n * function App() {\n *   const handleItemClick = (index) => {\n *     console.log(`Item ${index} was clicked.`);\n *   };\n *\n *   return (\n *     <Accordion items={items} onClick={handleItemClick} />\n *   );\n * }\n */\nconst Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme = 'light' }) => {\n  const [itemsOpen, setItemsOpen] = useState(() =>\n    items.map((value, index) => index === indexOpen),\n  );\n\n  /**\n   * Handles a click event on an accordion item.\n   *\n   * @param index The index of the item that was clicked.\n   */\n  const handleOnClick = (index: number) => {\n    if (onClick) {\n      onClick(index);\n    }\n    const newItems = [...itemsOpen];\n    newItems[index] = !itemsOpen[index];\n    setItemsOpen(newItems);\n  };\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <AccordionItem\n          key={item.id || index}\n          open={itemsOpen[index]}\n          title={item.title}\n          subtitle={item.subtitle}\n          content={item.content}\n          icon={item.icon}\n          onClick={() => handleOnClick(index)}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default Accordion;\n"],"names":["Accordion","indexOpen","items","onClick","theme","itemsOpen","setItemsOpen","useState","map","value","index","handleOnClick","newItems","_jsx","_Fragment","children","item","AccordionItem","open","title","subtitle","content","icon","id"],"mappings":";;;;AA8DMA,MAAAA,SAAS,GAAuBA,CAAC;EAAEC,SAAS,GAAG,EAAE;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG;AAAO,CAAE,KAAI;EAC5F,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,MACzCL,KAAK,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKA,KAAK,KAAKT,SAAS,CAAC,CACjD;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;AAChB;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC;IACnCJ,YAAY,CAACM,QAAQ,CAAC;GACvB;EAED,oBACEC,GAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,EACGb,KAAK,CAACM,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,kBACrBG,GAAA,CAACI,aAAa,EAAA;AAEZC,MAAAA,IAAI,EAAEb,SAAS,CAACK,KAAK,CAAE;MACvBS,KAAK,EAAEH,IAAI,CAACG,KAAM;MAClBC,QAAQ,EAAEJ,IAAI,CAACI,QAAS;MACxBC,OAAO,EAAEL,IAAI,CAACK,OAAQ;MACtBC,IAAI,EAAEN,IAAI,CAACM,IAAK;AAChBnB,MAAAA,OAAO,EAAEA,MAAMQ,aAAa,CAACD,KAAK;AAAE,KAAA,EAN/BM,IAAI,CAACO,EAAE,IAAIb,KAOhB,CACH;AAAC,GACJ,CAAG;AAEP;;;;"}
+{"version":3,"file":"Accordion.mjs","sources":["../../src/accordion/Accordion.tsx"],"sourcesContent":["import { useState, FC } from 'react';\n\nimport AccordionItem, { AccordionItemProps } from './AccordionItem';\n\nexport type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;\n\nexport interface AccordionProps {\n  /** The index of the item that should be open by default. */\n  indexOpen?: number;\n  /** An array of items to display in the accordion. */\n  items: readonly AccordionItem[];\n  /** A callback function that is called when an item is clicked. */\n  onClick?: (index: number) => void;\n  /** @deprecated */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * Accordion\n *\n * A simple accordion component that displays a list of items that can be expanded or collapsed.\n *\n * @component\n * @param {number} indexOpen - index of the item that should be open\n * @param {Array<AccordionItemProps>} items - array of items to display\n * @param {Function} onClick - callback function\n * @example\n * // Example usage:\n *\n * import Accordion from './Accordion';\n *\n * const items = [\n *   {\n *     id: 'item1',\n *     title: 'Item 1',\n *     content: 'This is the content for item 1.',\n *   },\n *   {\n *     id: 'item2',\n *     title: 'Item 2',\n *     content: 'This is the content for item 2.',\n *   },\n *   {\n *     id: 'item3',\n *     title: 'Item 3',\n *     content: 'This is the content for item 3.',\n *   },\n * ];\n *\n * function App() {\n *   const handleItemClick = (index) => {\n *     console.log(`Item ${index} was clicked.`);\n *   };\n *\n *   return (\n *     <Accordion items={items} onClick={handleItemClick} />\n *   );\n * }\n */\nconst Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme = 'light' }) => {\n  const [itemsOpen, setItemsOpen] = useState(() =>\n    items.map((value, index) => index === indexOpen),\n  );\n\n  /**\n   * Handles a click event on an accordion item.\n   *\n   * @param index The index of the item that was clicked.\n   */\n  const handleOnClick = (index: number) => {\n    if (onClick) {\n      onClick(index);\n    }\n    const newItems = [...itemsOpen];\n    newItems[index] = !itemsOpen[index];\n    setItemsOpen(newItems);\n  };\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <AccordionItem\n          key={item.id || index}\n          open={itemsOpen[index]}\n          title={item.title}\n          subtitle={item.subtitle}\n          content={item.content}\n          icon={item.icon}\n          media={item.media}\n          showMediaAtAllSizes={item.showMediaAtAllSizes}\n          showMediaCircle={item.showMediaCircle}\n          isContainerAligned={item.isContainerAligned}\n          onClick={() => handleOnClick(index)}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default Accordion;\n"],"names":["Accordion","indexOpen","items","onClick","theme","itemsOpen","setItemsOpen","useState","map","value","index","handleOnClick","newItems","_jsx","_Fragment","children","item","AccordionItem","open","title","subtitle","content","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","id"],"mappings":";;;;AA2DMA,MAAAA,SAAS,GAAuBA,CAAC;EAAEC,SAAS,GAAG,EAAE;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG;AAAO,CAAE,KAAI;EAC5F,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,MACzCL,KAAK,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKA,KAAK,KAAKT,SAAS,CAAC,CACjD;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;AAChB;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC;IACnCJ,YAAY,CAACM,QAAQ,CAAC;GACvB;EAED,oBACEC,GAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,EACGb,KAAK,CAACM,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,kBACrBG,GAAA,CAACI,aAAa,EAAA;AAEZC,MAAAA,IAAI,EAAEb,SAAS,CAACK,KAAK,CAAE;MACvBS,KAAK,EAAEH,IAAI,CAACG,KAAM;MAClBC,QAAQ,EAAEJ,IAAI,CAACI,QAAS;MACxBC,OAAO,EAAEL,IAAI,CAACK,OAAQ;MACtBC,IAAI,EAAEN,IAAI,CAACM,IAAK;MAChBC,KAAK,EAAEP,IAAI,CAACO,KAAM;MAClBC,mBAAmB,EAAER,IAAI,CAACQ,mBAAoB;MAC9CC,eAAe,EAAET,IAAI,CAACS,eAAgB;MACtCC,kBAAkB,EAAEV,IAAI,CAACU,kBAAmB;AAC5CvB,MAAAA,OAAO,EAAEA,MAAMQ,aAAa,CAACD,KAAK;AAAE,KAAA,EAV/BM,IAAI,CAACW,EAAE,IAAIjB,KAUoB,CAEvC;AAAC,GACJ,CAAG;AAEP;;;;"}

package/build/accordion/AccordionItem/AccordionItem.js

@@ -40,22 +40,28 @@ const AccordionItem = ({
   onClick,
   open,
   icon,
+  media,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned,
   theme = 'light'
 }) => {
-  const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
+  const mediaElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
-  }) : null;
+  }) : media;
   const fallbackId = React.useId();
   const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     id: accordionId,
-    className: clsx.clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
-      'np-accordion-item--open': open
+    className: clsx.clsx('np-accordion-item', {
+      'np-accordion-item--open': open,
+      'np-accordion-item--with-icon': Boolean(icon),
+      'np-accordion-item--with-media': Boolean(media)
     }),
     children: [/*#__PURE__*/jsxRuntime.jsx(Option.default, {
       "aria-label": ariaLabel,
       as: "button",
-      media: iconElement,
+      media: mediaElement,
       title: title,
       content: subtitle,
       button: /*#__PURE__*/jsxRuntime.jsx(Chevron.default, {
@@ -66,6 +72,9 @@ const AccordionItem = ({
       "aria-expanded": open,
       "aria-controls": `${accordionId}-section`,
       id: `${accordionId}-control`,
+      showMediaCircle: showMediaCircle,
+      showMediaAtAllSizes: showMediaAtAllSizes,
+      isContainerAligned: isContainerAligned,
       onClick: onClick
     }), open && /*#__PURE__*/jsxRuntime.jsx("div", {
       id: `${accordionId}-section`,

package/build/accordion/AccordionItem/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  /** An ID for the accordion item, used for accessibility purposes. */\n  id?: string;\n  /** The title of the accordion item. */\n  title: ReactNode;\n  /** The subtitle of the accordion item. */\n  subtitle?: ReactNode;\n  /** The content of the accordion item. */\n  content: ReactNode;\n  /** A callback function that is called when the accordion item is clicked. */\n  onClick: () => void;\n  /** Whether the accordion item is currently open or closed. */\n  open: boolean;\n  /** An optional icon to display next to the accordion item title. */\n  icon?: ReactNode;\n  /** @deprecated ... */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n *   const handleItemClick = () => {\n *     console.log('Accordion item was clicked.');\n *   };\n *\n *   return (\n *     <AccordionItem\n *       title={<h2>Item Title</h2>}\n *       content={<p>Item content goes here.</p>}\n *       onClick={handleItemClick}\n *       open={true}\n *       icon={<Chevron />}\n *     />\n *   );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n  'aria-label': ariaLabel,\n  id,\n  title,\n  subtitle,\n  content,\n  onClick,\n  open,\n  icon,\n  theme = 'light',\n}) => {\n  const iconElement = icon\n    ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n    : null;\n  const fallbackId = useId();\n  const accordionId = id ?? fallbackId;\n\n  return (\n    <div\n      id={accordionId}\n      className={clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {\n        'np-accordion-item--open': open,\n      })}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as=\"button\"\n        media={iconElement}\n        title={title}\n        content={subtitle}\n        button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n        inverseMediaCircle={false}\n        aria-expanded={open}\n        aria-controls={`${accordionId}-section`}\n        id={`${accordionId}-control`}\n        onClick={onClick}\n      />\n      {open && (\n        <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n          <Body\n            as=\"span\"\n            type={Typography.BODY_LARGE}\n            className={clsx('np-accordion-item__content', 'd-block', {\n              'has-icon': icon,\n            })}\n          >\n            {content}\n          </Body>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","theme","iconElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","children","_jsx","Option","as","media","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;AACJC,EAAAA,KAAK,GAAG;AACT,CAAA,KAAI;AACH,EAAA,MAAMC,WAAW,GAAGF,IAAI,gBACpBG,kBAAY,CAACH,IAAuC,EAAE;AAAEI,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnE,IAAI;AACR,EAAA,MAAMC,UAAU,GAAGC,WAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGb,EAAE,IAAIW,UAAU;AAEpC,EAAA,oBACEG,eAAA,CAAA,KAAA,EAAA;AACEd,IAAAA,EAAE,EAAEa,WAAY;IAChBE,SAAS,EAAEC,SAAI,CAAC,mBAAmB,EAAER,WAAW,GAAG,8BAA8B,GAAG,IAAI,EAAE;AACxF,MAAA,yBAAyB,EAAEH;AAC5B,KAAA,CAAE;IAAAY,QAAA,EAAA,cAEHC,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,YAAA,EAAYpB,SAAU;AACtBqB,MAAAA,EAAE,EAAC,QAAQ;AACXC,MAAAA,KAAK,EAAEb,WAAY;AACnBP,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBoB,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;QAACC,WAAW,EAAEnB,IAAI,GAAGoB,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,SAAI,CAACC;AAAO,OAAG,CAAC;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAezB,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGQ,WAAW,CAAW,QAAA,CAAA;MACxCb,EAAE,EAAE,CAAGa,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BT,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHa,cAAA,CAAA,KAAA,EAAA;MAAKlB,EAAE,EAAE,CAAGa,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAI,QAAA,eACzFC,cAAA,CAACc,YAAI,EAAA;AACHZ,QAAAA,EAAE,EAAC,MAAM;QACTa,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEV;AACb,SAAA,CAAE;AAAAW,QAAAA,QAAA,EAEFd;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  /** An ID for the accordion item, used for accessibility purposes. */\n  id?: string;\n  /** The title of the accordion item. */\n  title: ReactNode;\n  /** The subtitle of the accordion item. */\n  subtitle?: ReactNode;\n  /** The content of the accordion item. */\n  content: ReactNode;\n  /** A callback function that is called when the accordion item is clicked. */\n  onClick: () => void;\n  /** Whether the accordion item is currently open or closed. */\n  open: boolean;\n  /** An optional icon to display next to the accordion item title. */\n  icon?: ReactNode;\n  /** An optional media element to display next to the accordion item title. */\n  media?: ReactNode;\n  /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n  showMediaAtAllSizes?: boolean;\n  /** An optional showMediaCircle to display media within the circle. */\n  showMediaCircle?: boolean;\n  /** An optional isContainerAligned to display media aligned with the container. */\n  isContainerAligned?: boolean;\n  /** @deprecated ... */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n *   const handleItemClick = () => {\n *     console.log('Accordion item was clicked.');\n *   };\n *\n *   return (\n *     <AccordionItem\n *       title={<h2>Item Title</h2>}\n *       content={<p>Item content goes here.</p>}\n *       onClick={handleItemClick}\n *       open={true}\n *       icon={<Chevron />}\n *     />\n *   );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n  'aria-label': ariaLabel,\n  id,\n  title,\n  subtitle,\n  content,\n  onClick,\n  open,\n  icon,\n  media,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  theme = 'light',\n}) => {\n  const mediaElement = icon\n    ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n    : media;\n  const fallbackId = useId();\n  const accordionId = id ?? fallbackId;\n\n  return (\n    <div\n      id={accordionId}\n      className={clsx('np-accordion-item', {\n        'np-accordion-item--open': open,\n        'np-accordion-item--with-icon': Boolean(icon),\n        'np-accordion-item--with-media': Boolean(media),\n      })}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as=\"button\"\n        media={mediaElement}\n        title={title}\n        content={subtitle}\n        button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n        inverseMediaCircle={false}\n        aria-expanded={open}\n        aria-controls={`${accordionId}-section`}\n        id={`${accordionId}-control`}\n        showMediaCircle={showMediaCircle}\n        showMediaAtAllSizes={showMediaAtAllSizes}\n        isContainerAligned={isContainerAligned}\n        onClick={onClick}\n      />\n      {open && (\n        <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n          <Body\n            as=\"span\"\n            type={Typography.BODY_LARGE}\n            className={clsx('np-accordion-item__content', 'd-block', {\n              'has-icon': icon,\n            })}\n          >\n            {content}\n          </Body>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,kBAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,WAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,eAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;AAC/B,MAAA,8BAA8B,EAAEgB,OAAO,CAACf,IAAI,CAAC;MAC7C,+BAA+B,EAAEe,OAAO,CAACd,KAAK;AAC/C,KAAA,CAAE;IAAAe,QAAA,EAAA,cAEHC,cAAA,CAACC,cAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,cAAA,CAACI,eAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,SAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,cAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,cAAA,CAACa,YAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}

package/build/accordion/AccordionItem/AccordionItem.mjs

@@ -36,22 +36,28 @@ const AccordionItem = ({
   onClick,
   open,
   icon,
+  media,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned,
   theme = 'light'
 }) => {
-  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
+  const mediaElement = icon ? /*#__PURE__*/cloneElement(icon, {
     size: 24
-  }) : null;
+  }) : media;
   const fallbackId = useId();
   const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxs("div", {
     id: accordionId,
-    className: clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
-      'np-accordion-item--open': open
+    className: clsx('np-accordion-item', {
+      'np-accordion-item--open': open,
+      'np-accordion-item--with-icon': Boolean(icon),
+      'np-accordion-item--with-media': Boolean(media)
     }),
     children: [/*#__PURE__*/jsx(Option, {
       "aria-label": ariaLabel,
       as: "button",
-      media: iconElement,
+      media: mediaElement,
       title: title,
       content: subtitle,
       button: /*#__PURE__*/jsx(Chevron, {
@@ -62,6 +68,9 @@ const AccordionItem = ({
       "aria-expanded": open,
       "aria-controls": `${accordionId}-section`,
       id: `${accordionId}-control`,
+      showMediaCircle: showMediaCircle,
+      showMediaAtAllSizes: showMediaAtAllSizes,
+      isContainerAligned: isContainerAligned,
       onClick: onClick
     }), open && /*#__PURE__*/jsx("div", {
       id: `${accordionId}-section`,

package/build/accordion/AccordionItem/AccordionItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.mjs","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  /** An ID for the accordion item, used for accessibility purposes. */\n  id?: string;\n  /** The title of the accordion item. */\n  title: ReactNode;\n  /** The subtitle of the accordion item. */\n  subtitle?: ReactNode;\n  /** The content of the accordion item. */\n  content: ReactNode;\n  /** A callback function that is called when the accordion item is clicked. */\n  onClick: () => void;\n  /** Whether the accordion item is currently open or closed. */\n  open: boolean;\n  /** An optional icon to display next to the accordion item title. */\n  icon?: ReactNode;\n  /** @deprecated ... */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n *   const handleItemClick = () => {\n *     console.log('Accordion item was clicked.');\n *   };\n *\n *   return (\n *     <AccordionItem\n *       title={<h2>Item Title</h2>}\n *       content={<p>Item content goes here.</p>}\n *       onClick={handleItemClick}\n *       open={true}\n *       icon={<Chevron />}\n *     />\n *   );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n  'aria-label': ariaLabel,\n  id,\n  title,\n  subtitle,\n  content,\n  onClick,\n  open,\n  icon,\n  theme = 'light',\n}) => {\n  const iconElement = icon\n    ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n    : null;\n  const fallbackId = useId();\n  const accordionId = id ?? fallbackId;\n\n  return (\n    <div\n      id={accordionId}\n      className={clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {\n        'np-accordion-item--open': open,\n      })}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as=\"button\"\n        media={iconElement}\n        title={title}\n        content={subtitle}\n        button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n        inverseMediaCircle={false}\n        aria-expanded={open}\n        aria-controls={`${accordionId}-section`}\n        id={`${accordionId}-control`}\n        onClick={onClick}\n      />\n      {open && (\n        <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n          <Body\n            as=\"span\"\n            type={Typography.BODY_LARGE}\n            className={clsx('np-accordion-item__content', 'd-block', {\n              'has-icon': icon,\n            })}\n          >\n            {content}\n          </Body>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","theme","iconElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","children","_jsx","Option","as","media","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;AACJC,EAAAA,KAAK,GAAG;AACT,CAAA,KAAI;AACH,EAAA,MAAMC,WAAW,GAAGF,IAAI,gBACpBG,YAAY,CAACH,IAAuC,EAAE;AAAEI,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnE,IAAI;AACR,EAAA,MAAMC,UAAU,GAAGC,KAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGb,EAAE,IAAIW,UAAU;AAEpC,EAAA,oBACEG,IAAA,CAAA,KAAA,EAAA;AACEd,IAAAA,EAAE,EAAEa,WAAY;IAChBE,SAAS,EAAEC,IAAI,CAAC,mBAAmB,EAAER,WAAW,GAAG,8BAA8B,GAAG,IAAI,EAAE;AACxF,MAAA,yBAAyB,EAAEH;AAC5B,KAAA,CAAE;IAAAY,QAAA,EAAA,cAEHC,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYpB,SAAU;AACtBqB,MAAAA,EAAE,EAAC,QAAQ;AACXC,MAAAA,KAAK,EAAEb,WAAY;AACnBP,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBoB,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEnB,IAAI,GAAGoB,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,IAAI,CAACC;AAAO,OAAG,CAAC;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAezB,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGQ,WAAW,CAAW,QAAA,CAAA;MACxCb,EAAE,EAAE,CAAGa,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BT,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHa,GAAA,CAAA,KAAA,EAAA;MAAKlB,EAAE,EAAE,CAAGa,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAI,QAAA,eACzFC,GAAA,CAACc,IAAI,EAAA;AACHZ,QAAAA,EAAE,EAAC,MAAM;QACTa,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEV;AACb,SAAA,CAAE;AAAAW,QAAAA,QAAA,EAEFd;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}
+{"version":3,"file":"AccordionItem.mjs","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { FC, ReactNode, cloneElement, useId } from 'react';\n\nimport Body from '../../body';\nimport Chevron from '../../chevron';\nimport { Position, Size, Typography } from '../../common';\nimport Option from '../../common/Option';\n\nexport interface AccordionItemProps {\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  /** An ID for the accordion item, used for accessibility purposes. */\n  id?: string;\n  /** The title of the accordion item. */\n  title: ReactNode;\n  /** The subtitle of the accordion item. */\n  subtitle?: ReactNode;\n  /** The content of the accordion item. */\n  content: ReactNode;\n  /** A callback function that is called when the accordion item is clicked. */\n  onClick: () => void;\n  /** Whether the accordion item is currently open or closed. */\n  open: boolean;\n  /** An optional icon to display next to the accordion item title. */\n  icon?: ReactNode;\n  /** An optional media element to display next to the accordion item title. */\n  media?: ReactNode;\n  /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */\n  showMediaAtAllSizes?: boolean;\n  /** An optional showMediaCircle to display media within the circle. */\n  showMediaCircle?: boolean;\n  /** An optional isContainerAligned to display media aligned with the container. */\n  isContainerAligned?: boolean;\n  /** @deprecated ... */\n  theme?: 'light' | 'dark';\n}\n\n/**\n * AccordionItem\n *\n * A single item in an accordion component.\n *\n * @component\n * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.\n * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.\n * @param {ReactNode} title - The title of the accordion item.\n * @param {ReactNode} subtitle - The subtitle of the accordion item.\n * @param {ReactNode} content - The content of the accordion item.\n * @param {Function} onClick - A callback function that is called when the accordion item is clicked.\n * @param {boolean} open - Whether the accordion item is currently open or closed.\n * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.\n * @param {ReactNode} [media] - An optional media to display next to the accordion item.\n * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.\n * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.\n * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.\n * @example\n * // Example usage:\n *\n * import AccordionItem from './AccordionItem';\n *\n * function App() {\n *   const handleItemClick = () => {\n *     console.log('Accordion item was clicked.');\n *   };\n *\n *   return (\n *     <AccordionItem\n *       title={<h2>Item Title</h2>}\n *       content={<p>Item content goes here.</p>}\n *       onClick={handleItemClick}\n *       open={true}\n *       icon={<Chevron />}\n *     />\n *   );\n * }\n */\nconst AccordionItem: FC<AccordionItemProps> = ({\n  'aria-label': ariaLabel,\n  id,\n  title,\n  subtitle,\n  content,\n  onClick,\n  open,\n  icon,\n  media,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  theme = 'light',\n}) => {\n  const mediaElement = icon\n    ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })\n    : media;\n  const fallbackId = useId();\n  const accordionId = id ?? fallbackId;\n\n  return (\n    <div\n      id={accordionId}\n      className={clsx('np-accordion-item', {\n        'np-accordion-item--open': open,\n        'np-accordion-item--with-icon': Boolean(icon),\n        'np-accordion-item--with-media': Boolean(media),\n      })}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as=\"button\"\n        media={mediaElement}\n        title={title}\n        content={subtitle}\n        button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}\n        inverseMediaCircle={false}\n        aria-expanded={open}\n        aria-controls={`${accordionId}-section`}\n        id={`${accordionId}-control`}\n        showMediaCircle={showMediaCircle}\n        showMediaAtAllSizes={showMediaAtAllSizes}\n        isContainerAligned={isContainerAligned}\n        onClick={onClick}\n      />\n      {open && (\n        <div id={`${accordionId}-section`} role=\"region\" aria-labelledby={`${accordionId}-control`}>\n          <Body\n            as=\"span\"\n            type={Typography.BODY_LARGE}\n            className={clsx('np-accordion-item__content', 'd-block', {\n              'has-icon': icon,\n            })}\n          >\n            {content}\n          </Body>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AccordionItem;\n"],"names":["AccordionItem","ariaLabel","id","title","subtitle","content","onClick","open","icon","media","showMediaAtAllSizes","showMediaCircle","isContainerAligned","theme","mediaElement","cloneElement","size","fallbackId","useId","accordionId","_jsxs","className","clsx","Boolean","children","_jsx","Option","as","button","Chevron","orientation","Position","TOP","BOTTOM","Size","MEDIUM","inverseMediaCircle","role","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EMA,MAAAA,aAAa,GAA2BA,CAAC;AAC7C,EAAA,YAAY,EAAEC,SAAS;EACvBC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,KAAK,GAAG;AAAO,CAChB,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGN,IAAI,gBACrBO,YAAY,CAACP,IAAuC,EAAE;AAAEQ,IAAAA,IAAI,EAAE;GAAI,CAAC,GACnEP,KAAK;AACT,EAAA,MAAMQ,UAAU,GAAGC,KAAK,EAAE;AAC1B,EAAA,MAAMC,WAAW,GAAGjB,EAAE,IAAIe,UAAU;AAEpC,EAAA,oBACEG,IAAA,CAAA,KAAA,EAAA;AACElB,IAAAA,EAAE,EAAEiB,WAAY;AAChBE,IAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,EAAE;AACnC,MAAA,yBAAyB,EAAEf,IAAI;AAC/B,MAAA,8BAA8B,EAAEgB,OAAO,CAACf,IAAI,CAAC;MAC7C,+BAA+B,EAAEe,OAAO,CAACd,KAAK;AAC/C,KAAA,CAAE;IAAAe,QAAA,EAAA,cAEHC,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYzB,SAAU;AACtB0B,MAAAA,EAAE,EAAC,QAAQ;AACXlB,MAAAA,KAAK,EAAEK,YAAa;AACpBX,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,OAAO,EAAED,QAAS;MAClBwB,MAAM,eAAEH,GAAA,CAACI,OAAO,EAAA;QAACC,WAAW,EAAEvB,IAAI,GAAGwB,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,IAAI,CAACC;AAAO,OAAA,CAAI;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAe7B,IAAK;MACpB,eAAe,EAAA,CAAA,EAAGY,WAAW,CAAW,QAAA,CAAA;MACxCjB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAC7BR,MAAAA,eAAe,EAAEA,eAAgB;AACjCD,MAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCN,MAAAA,OAAO,EAAEA;AAAQ,KAEnB,CAAA,EAACC,IAAI,iBACHkB,GAAA,CAAA,KAAA,EAAA;MAAKvB,EAAE,EAAE,CAAGiB,EAAAA,WAAW,CAAW,QAAA,CAAA;AAACkB,MAAAA,IAAI,EAAC,QAAQ;MAAC,iBAAiB,EAAA,CAAA,EAAGlB,WAAW,CAAW,QAAA,CAAA;MAAAK,QAAA,eACzFC,GAAA,CAACa,IAAI,EAAA;AACHX,QAAAA,EAAE,EAAC,MAAM;QACTY,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE;AACvD,UAAA,UAAU,EAAEd;AACb,SAAA,CAAE;AAAAgB,QAAAA,QAAA,EAEFnB;OACG;AACR,KAAK,CACN;AAAA,GACE,CAAC;AAEV;;;;"}

package/build/main.css

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

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

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

package/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;;;;"}