@transferwise/components 46.98.1 → 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/body/Body.js

@@ -13,6 +13,7 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
   as: Element = 'div',
   type = DEFAULT_TYPE,
   className,
+  preserveNewlines,
   ...props
 }, reference) {
   const isTypeSupported = bodyTypes.has(type);
@@ -21,7 +22,7 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
     // @ts-expect-error TODO: Remove when component could be rewritten with generics
     // See: https://fettblog.eu/typescript-react-generic-forward-refs/
     ref: reference,
-    className: clsx.clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
+    className: clsx.clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, preserveNewlines && 'np-text--pre-line', className)
   });
 });
 

package/build/body/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAaF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC;EAC3C,oBACEM,cAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,SAAI,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS;AAAE,GAC/E,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAc,CAAA,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,SAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/body/Body.mjs

@@ -9,6 +9,7 @@ const Body = /*#__PURE__*/forwardRef(function Body({
   as: Element = 'div',
   type = DEFAULT_TYPE,
   className,
+  preserveNewlines,
   ...props
 }, reference) {
   const isTypeSupported = bodyTypes.has(type);
@@ -17,7 +18,7 @@ const Body = /*#__PURE__*/forwardRef(function Body({
     // @ts-expect-error TODO: Remove when component could be rewritten with generics
     // See: https://fettblog.eu/typescript-react-generic-forward-refs/
     ref: reference,
-    className: clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
+    className: clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, preserveNewlines && 'np-text--pre-line', className)
   });
 });
 

package/build/body/Body.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAaF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC;EAC3C,oBACEM,GAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,IAAI,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS;AAAE,GAC/E,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAc,CAAA,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,IAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/instructionsList/InstructionsList.js

@@ -77,6 +77,7 @@ function Instruction({
     }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
       className: "text-primary",
       type: typography.Typography.BODY_LARGE,
+      preserveNewlines: true,
       children: isInstructionNode ? item.content : item
     })]
   });

package/build/instructionsList/InstructionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.js","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li className=\"instruction\">\n      {type === 'do' ? (\n        <DoIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      ) : (\n        <DontIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","DoIcon","size","title","undefined","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB;AAAA,GACpB,CAAG,gBAEHG,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe;AAAA,GAClB,CACD;AAEH,EAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,SAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH;AAAmB,GAAK,CAAC;AACtF;AAEA,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI;AACxF,EAAA,oBACEK,eAAA,CAAA,IAAA,EAAA;AAAIf,IAAAA,SAAS,EAAC,aAAa;AAAAiB,IAAAA,QAAA,GACxBN,IAAI,KAAK,IAAI,gBACZH,cAAA,CAACY,qBAAM,EAAA;AACLC,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAC1D,CAAA,gBAEFf,cAAA,CAACgB,qBAAQ,EAAA;AACPH,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAAA,CAE7D,eACDf,cAAA,CAACiB,YAAI,EAAA;AAACzB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEe,qBAAU,CAACC,UAAW;AAAAV,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACkB,OAAO,GAAGlB;AAAI,KACpC,CACR;AAAA,GAAI,CAAC;AAET;;;;"}
+{"version":3,"file":"InstructionsList.js","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li className=\"instruction\">\n      {type === 'do' ? (\n        <DoIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      ) : (\n        <DontIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE} preserveNewlines>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","DoIcon","size","title","undefined","DontIcon","Body","Typography","BODY_LARGE","preserveNewlines","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB;AAAA,GACpB,CAAG,gBAEHG,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe;AAAA,GAClB,CACD;AAEH,EAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,SAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH;AAAmB,GAAK,CAAC;AACtF;AAEA,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI;AACxF,EAAA,oBACEK,eAAA,CAAA,IAAA,EAAA;AAAIf,IAAAA,SAAS,EAAC,aAAa;AAAAiB,IAAAA,QAAA,GACxBN,IAAI,KAAK,IAAI,gBACZH,cAAA,CAACY,qBAAM,EAAA;AACLC,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAC1D,CAAA,gBAEFf,cAAA,CAACgB,qBAAQ,EAAA;AACPH,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAAA,CAE7D,eACDf,cAAA,CAACiB,YAAI,EAAA;AAACzB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEe,qBAAU,CAACC,UAAW;MAACC,gBAAgB,EAAA,IAAA;AAAAX,MAAAA,QAAA,EACzEE,iBAAiB,GAAGT,IAAI,CAACmB,OAAO,GAAGnB;AAAI,KACpC,CACR;AAAA,GAAI,CAAC;AAET;;;;"}

package/build/instructionsList/InstructionsList.mjs

@@ -73,6 +73,7 @@ function Instruction({
     }), /*#__PURE__*/jsx(Body, {
       className: "text-primary",
       type: Typography.BODY_LARGE,
+      preserveNewlines: true,
       children: isInstructionNode ? item.content : item
     })]
   });

package/build/instructionsList/InstructionsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.mjs","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li className=\"instruction\">\n      {type === 'do' ? (\n        <DoIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      ) : (\n        <DontIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","DoIcon","size","title","undefined","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB;AAAA,GACpB,CAAG,gBAEHG,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe;AAAA,GAClB,CACD;AAEH,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,IAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH;AAAmB,GAAK,CAAC;AACtF;AAEA,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI;AACxF,EAAA,oBACEK,IAAA,CAAA,IAAA,EAAA;AAAIf,IAAAA,SAAS,EAAC,aAAa;AAAAiB,IAAAA,QAAA,GACxBN,IAAI,KAAK,IAAI,gBACZH,GAAA,CAACY,eAAM,EAAA;AACLC,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAC1D,CAAA,gBAEFf,GAAA,CAACgB,eAAQ,EAAA;AACPH,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAAA,CAE7D,eACDf,GAAA,CAACiB,IAAI,EAAA;AAACzB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEe,UAAU,CAACC,UAAW;AAAAV,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACkB,OAAO,GAAGlB;AAAI,KACpC,CACR;AAAA,GAAI,CAAC;AAET;;;;"}
+{"version":3,"file":"InstructionsList.mjs","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li className=\"instruction\">\n      {type === 'do' ? (\n        <DoIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      ) : (\n        <DontIcon\n          size={24}\n          className={type}\n          title={isInstructionNode ? item['aria-label'] : undefined}\n        />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE} preserveNewlines>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","DoIcon","size","title","undefined","DontIcon","Body","Typography","BODY_LARGE","preserveNewlines","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB;AAAA,GACpB,CAAG,gBAEHG,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe;AAAA,GAClB,CACD;AAEH,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,IAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH;AAAmB,GAAK,CAAC;AACtF;AAEA,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI;AACxF,EAAA,oBACEK,IAAA,CAAA,IAAA,EAAA;AAAIf,IAAAA,SAAS,EAAC,aAAa;AAAAiB,IAAAA,QAAA,GACxBN,IAAI,KAAK,IAAI,gBACZH,GAAA,CAACY,eAAM,EAAA;AACLC,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAC1D,CAAA,gBAEFf,GAAA,CAACgB,eAAQ,EAAA;AACPH,MAAAA,IAAI,EAAE,EAAG;AACTrB,MAAAA,SAAS,EAAEW,IAAK;AAChBW,MAAAA,KAAK,EAAEH,iBAAiB,GAAGT,IAAI,CAAC,YAAY,CAAC,GAAGa;AAAU,KAAA,CAE7D,eACDf,GAAA,CAACiB,IAAI,EAAA;AAACzB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEe,UAAU,CAACC,UAAW;MAACC,gBAAgB,EAAA,IAAA;AAAAX,MAAAA,QAAA,EACzEE,iBAAiB,GAAGT,IAAI,CAACmB,OAAO,GAAGnB;AAAI,KACpC,CACR;AAAA,GAAI,CAAC;AAET;;;;"}

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;
 }
@@ -658,6 +662,9 @@
   border-width: 1px;
   border-color: var(--badge-border-color);
 }
+.np-text--pre-line {
+  white-space: pre-line;
+}
 .np-btn {
   position: relative;
 }
@@ -5142,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;
@@ -5150,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;
@@ -5182,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;
@@ -5212,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/body/Body.css

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

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;
 }
@@ -658,6 +662,9 @@
   border-width: 1px;
   border-color: var(--badge-border-color);
 }
+.np-text--pre-line {
+  white-space: pre-line;
+}
 .np-btn {
   position: relative;
 }
@@ -5142,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;
@@ -5150,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;
@@ -5182,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;
@@ -5212,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;
 }