@transferwise/components 46.44.1 → 46.46.0

package/build/accordion/Accordion.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var AccordionItem = require('./AccordionItem/AccordionItem.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Accordion = ({
+  indexOpen = -1,
+  items,
+  onClick,
+  theme = 'light'
+}) => {
+  const [itemsOpen, setItemsOpen] = React.useState(() => items.map((value, index) => index === indexOpen));
+  /**
+   * Handles a click event on an accordion item.
+   *
+   * @param index The index of the item that was clicked.
+   */
+  const handleOnClick = index => {
+    if (onClick) {
+      onClick(index);
+    }
+    const newItems = [...itemsOpen];
+    newItems[index] = !itemsOpen[index];
+    setItemsOpen(newItems);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: items.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(AccordionItem, {
+      open: itemsOpen[index],
+      title: item.title,
+      subtitle: item.subtitle,
+      content: item.content,
+      icon: item.icon,
+      onClick: () => handleOnClick(index)
+    }, item.id || index))
+  });
+};
+
+module.exports = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/build/accordion/Accordion.js.map

@@ -0,0 +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,CAAC,CAAC;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG,OAAA;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,CAAA;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC,CAAA;AAChB,KAAA;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC,CAAA;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC,CAAA;IACnCJ,YAAY,CAACM,QAAQ,CAAC,CAAA;GACvB,CAAA;EAED,oBACEC,cAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EACGb,KAAK,CAACM,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK,kBACrBG,cAAA,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,CAAA;AAAE,KAAA,EAN/BM,IAAI,CAACO,EAAE,IAAIb,KAOhB,CACH,CAAA;AAAC,GACJ,CAAG,CAAA;AAEP;;;;"}

package/build/accordion/Accordion.mjs

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import AccordionItem from './AccordionItem/AccordionItem.mjs';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Accordion = ({
+  indexOpen = -1,
+  items,
+  onClick,
+  theme = 'light'
+}) => {
+  const [itemsOpen, setItemsOpen] = useState(() => items.map((value, index) => index === indexOpen));
+  /**
+   * Handles a click event on an accordion item.
+   *
+   * @param index The index of the item that was clicked.
+   */
+  const handleOnClick = index => {
+    if (onClick) {
+      onClick(index);
+    }
+    const newItems = [...itemsOpen];
+    newItems[index] = !itemsOpen[index];
+    setItemsOpen(newItems);
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: items.map((item, index) => /*#__PURE__*/jsx(AccordionItem, {
+      open: itemsOpen[index],
+      title: item.title,
+      subtitle: item.subtitle,
+      content: item.content,
+      icon: item.icon,
+      onClick: () => handleOnClick(index)
+    }, item.id || index))
+  });
+};
+
+export { Accordion as default };
+//# sourceMappingURL=Accordion.mjs.map

package/build/accordion/Accordion.mjs.map

@@ -0,0 +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,CAAC,CAAC;EAAEC,KAAK;EAAEC,OAAO;AAAEC,EAAAA,KAAK,GAAG,OAAA;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,CAAA;AAED;;;;AAIG;EACH,MAAMU,aAAa,GAAID,KAAa,IAAI;AACtC,IAAA,IAAIP,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC,CAAA;AAChB,KAAA;AACA,IAAA,MAAME,QAAQ,GAAG,CAAC,GAAGP,SAAS,CAAC,CAAA;IAC/BO,QAAQ,CAACF,KAAK,CAAC,GAAG,CAACL,SAAS,CAACK,KAAK,CAAC,CAAA;IACnCJ,YAAY,CAACM,QAAQ,CAAC,CAAA;GACvB,CAAA;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,CAAA;AAAE,KAAA,EAN/BM,IAAI,CAACO,EAAE,IAAIb,KAOhB,CACH,CAAA;AAAC,GACJ,CAAG,CAAA;AAEP;;;;"}

package/build/accordion/AccordionItem/AccordionItem.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../../body/Body.js');
+var Chevron = require('../../chevron/Chevron.js');
+var Option = require('../../common/Option/Option.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../../common/propsValues/typography.js');
+var position = require('../../common/propsValues/position.js');
+var size = require('../../common/propsValues/size.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const AccordionItem = ({
+  'aria-label': ariaLabel,
+  id,
+  title,
+  subtitle,
+  content,
+  onClick,
+  open,
+  icon,
+  theme = 'light'
+}) => {
+  const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
+    size: 24
+  }) : null;
+  const fallbackId = React.useId();
+  const accordionId = id ?? fallbackId;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    id: accordionId,
+    className: classNames__default.default('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
+      'np-accordion-item--open': open
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Option, {
+      "aria-label": ariaLabel,
+      as: "button",
+      media: iconElement,
+      title: title,
+      content: subtitle,
+      button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
+        orientation: open ? position.Position.TOP : position.Position.BOTTOM,
+        size: size.Size.MEDIUM
+      }),
+      inverseMediaCircle: false,
+      "aria-expanded": open,
+      "aria-controls": `${accordionId}-section`,
+      id: `${accordionId}-control`,
+      onClick: onClick
+    }), open && /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: `${accordionId}-section`,
+      role: "region",
+      "aria-labelledby": `${accordionId}-control`,
+      children: /*#__PURE__*/jsxRuntime.jsx(Body, {
+        as: "span",
+        type: typography.Typography.BODY_LARGE,
+        className: classNames__default.default('np-accordion-item__content', 'd-block', {
+          'has-icon': icon
+        }),
+        children: content
+      })
+    })]
+  });
+};
+
+module.exports = AccordionItem;
+//# sourceMappingURL=AccordionItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport classNames from 'classnames';\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={classNames(\n        'np-accordion-item',\n        iconElement ? 'np-accordion-item--with-icon' : null,\n        {\n          'np-accordion-item--open': open,\n        },\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={classNames('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","classNames","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,OAAA;AACT,CAAA,KAAI;AACH,EAAA,MAAMC,WAAW,GAAGF,IAAI,gBACpBG,kBAAY,CAACH,IAAuC,EAAE;AAAEI,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GACnE,IAAI,CAAA;AACR,EAAA,MAAMC,UAAU,GAAGC,WAAK,EAAE,CAAA;AAC1B,EAAA,MAAMC,WAAW,GAAGb,EAAE,IAAIW,UAAU,CAAA;AAEpC,EAAA,oBACEG,eAAA,CAAA,KAAA,EAAA;AACEd,IAAAA,EAAE,EAAEa,WAAY;IAChBE,SAAS,EAAEC,2BAAU,CACnB,mBAAmB,EACnBR,WAAW,GAAG,8BAA8B,GAAG,IAAI,EACnD;AACE,MAAA,yBAAyB,EAAEH,IAAAA;AAC5B,KAAA,CACD;IAAAY,QAAA,EAAA,cAEFC,cAAA,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,cAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEnB,IAAI,GAAGoB,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAO;QAACjB,IAAI,EAAEkB,SAAI,CAACC,MAAAA;AAAO,OAAG,CAAC;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAezB,IAAK;MACpB,oBAAkBQ,WAAW,CAAW,QAAA,CAAA;MACxCb,EAAE,EAAK,CAAAa,EAAAA,YAAsB,QAAA,CAAA;AAC7BT,MAAAA,OAAO,EAAEA,OAAAA;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,iBAAoB,EAAA,CAAA,EAAAlB,WAAqB,CAAC,QAAA,CAAA;MAAAI,QAAA,eACzFC,cAAA,CAACc,IAAI,EAAA;AACHZ,QAAAA,EAAE,EAAC,MAAM;QACTa,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,2BAAU,CAAC,4BAA4B,EAAE,SAAS,EAAE;AAC7D,UAAA,UAAU,EAAEV,IAAAA;AACb,SAAA,CAAE;AAAAW,QAAAA,QAAA,EAEFd,OAAAA;OACG,CAAA;AACR,KAAK,CACN,CAAA;AAAA,GACE,CAAC,CAAA;AAEV;;;;"}

package/build/accordion/AccordionItem/AccordionItem.mjs

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { useId, cloneElement } from 'react';
+import Body from '../../body/Body.mjs';
+import Chevron from '../../chevron/Chevron.mjs';
+import Option from '../../common/Option/Option.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../common/propsValues/typography.mjs';
+import { Position } from '../../common/propsValues/position.mjs';
+import { Size } from '../../common/propsValues/size.mjs';
+
+const AccordionItem = ({
+  'aria-label': ariaLabel,
+  id,
+  title,
+  subtitle,
+  content,
+  onClick,
+  open,
+  icon,
+  theme = 'light'
+}) => {
+  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
+    size: 24
+  }) : null;
+  const fallbackId = useId();
+  const accordionId = id ?? fallbackId;
+  return /*#__PURE__*/jsxs("div", {
+    id: accordionId,
+    className: classNames('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
+      'np-accordion-item--open': open
+    }),
+    children: [/*#__PURE__*/jsx(Option, {
+      "aria-label": ariaLabel,
+      as: "button",
+      media: iconElement,
+      title: title,
+      content: subtitle,
+      button: /*#__PURE__*/jsx(Chevron, {
+        orientation: open ? Position.TOP : Position.BOTTOM,
+        size: Size.MEDIUM
+      }),
+      inverseMediaCircle: false,
+      "aria-expanded": open,
+      "aria-controls": `${accordionId}-section`,
+      id: `${accordionId}-control`,
+      onClick: onClick
+    }), open && /*#__PURE__*/jsx("div", {
+      id: `${accordionId}-section`,
+      role: "region",
+      "aria-labelledby": `${accordionId}-control`,
+      children: /*#__PURE__*/jsx(Body, {
+        as: "span",
+        type: Typography.BODY_LARGE,
+        className: classNames('np-accordion-item__content', 'd-block', {
+          'has-icon': icon
+        }),
+        children: content
+      })
+    })]
+  });
+};
+
+export { AccordionItem as default };
+//# sourceMappingURL=AccordionItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.mjs","sources":["../../../src/accordion/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import { IdIconProps } from '@transferwise/icons';\nimport classNames from 'classnames';\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={classNames(\n        'np-accordion-item',\n        iconElement ? 'np-accordion-item--with-icon' : null,\n        {\n          'np-accordion-item--open': open,\n        },\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={classNames('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","classNames","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,OAAA;AACT,CAAA,KAAI;AACH,EAAA,MAAMC,WAAW,GAAGF,IAAI,gBACpBG,YAAY,CAACH,IAAuC,EAAE;AAAEI,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GACnE,IAAI,CAAA;AACR,EAAA,MAAMC,UAAU,GAAGC,KAAK,EAAE,CAAA;AAC1B,EAAA,MAAMC,WAAW,GAAGb,EAAE,IAAIW,UAAU,CAAA;AAEpC,EAAA,oBACEG,IAAA,CAAA,KAAA,EAAA;AACEd,IAAAA,EAAE,EAAEa,WAAY;IAChBE,SAAS,EAAEC,UAAU,CACnB,mBAAmB,EACnBR,WAAW,GAAG,8BAA8B,GAAG,IAAI,EACnD;AACE,MAAA,yBAAyB,EAAEH,IAAAA;AAC5B,KAAA,CACD;IAAAY,QAAA,EAAA,cAEFC,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,MAAAA;AAAO,OAAG,CAAC;AAC3FC,MAAAA,kBAAkB,EAAE,KAAM;AAC1B,MAAA,eAAA,EAAezB,IAAK;MACpB,oBAAkBQ,WAAW,CAAW,QAAA,CAAA;MACxCb,EAAE,EAAK,CAAAa,EAAAA,YAAsB,QAAA,CAAA;AAC7BT,MAAAA,OAAO,EAAEA,OAAAA;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,iBAAoB,EAAA,CAAA,EAAAlB,WAAqB,CAAC,QAAA,CAAA;MAAAI,QAAA,eACzFC,GAAA,CAACc,IAAI,EAAA;AACHZ,QAAAA,EAAE,EAAC,MAAM;QACTa,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BpB,QAAAA,SAAS,EAAEC,UAAU,CAAC,4BAA4B,EAAE,SAAS,EAAE;AAC7D,UAAA,UAAU,EAAEV,IAAAA;AACb,SAAA,CAAE;AAAAW,QAAAA,QAAA,EAEFd,OAAAA;OACG,CAAA;AACR,KAAK,CACN,CAAA;AAAA,GACE,CAAC,CAAA;AAEV;;;;"}

package/build/actionButton/ActionButton.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var control = require('../common/propsValues/control.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const ActionButton = /*#__PURE__*/React.forwardRef(({
+  disabled = false,
+  className = undefined,
+  onClick,
+  priority = control.Priority.PRIMARY,
+  text,
+  children,
+  ...rest
+}, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
+  ref: reference,
+  type: "button",
+  className: classNames__default.default('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  disabled: disabled,
+  onClick: onClick,
+  ...rest,
+  children: children || text
+}));
+
+module.exports = ActionButton;
+//# sourceMappingURL=ActionButton.js.map

package/build/actionButton/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={classNames(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","classNames","SECONDARY"],"mappings":";;;;;;;;;;;AAaA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;AACbZ,EAAAA,SAAS,EAAEa,2BAAU,CACnB,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,EACrEd,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

package/build/actionButton/ActionButton.mjs

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Priority } from '../common/propsValues/control.mjs';
+
+const ActionButton = /*#__PURE__*/forwardRef(({
+  disabled = false,
+  className = undefined,
+  onClick,
+  priority = Priority.PRIMARY,
+  text,
+  children,
+  ...rest
+}, reference) => /*#__PURE__*/jsx("button", {
+  ref: reference,
+  type: "button",
+  className: classNames('np-action-btn', 'np-text-body-default-bold', priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  disabled: disabled,
+  onClick: onClick,
+  ...rest,
+  children: children || text
+}));
+
+export { ActionButton as default };
+//# sourceMappingURL=ActionButton.mjs.map

package/build/actionButton/ActionButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={classNames(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","classNames","SECONDARY"],"mappings":";;;;;AAaA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;AACbZ,EAAAA,SAAS,EAAEa,UAAU,CACnB,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,EACrEd,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

package/build/actionOption/ActionOption.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var classNames = require('classnames');
+var ActionButton = require('../actionButton/ActionButton.js');
+var Option = require('../common/Option/Option.js');
+var jsxRuntime = require('react/jsx-runtime');
+var control = require('../common/propsValues/control.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const ActionOption = ({
+  action,
+  priority = control.Priority.PRIMARY,
+  disabled,
+  onClick,
+  media,
+  title,
+  content,
+  complex,
+  className,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned
+}) => {
+  const sharedProps = {
+    media,
+    title,
+    content,
+    complex,
+    disabled,
+    showMediaAtAllSizes,
+    showMediaCircle,
+    className: classNames__default.default('tw-action-option', className),
+    isContainerAligned
+  };
+  const getAriaLabel = () => {
+    const labels = [];
+    if (typeof title === 'string') {
+      labels.push(title);
+    }
+    if (typeof action === 'string') {
+      labels.push(action);
+    }
+    return labels.join(', ') || undefined;
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Option, {
+    ...sharedProps,
+    button: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+      priority: priority,
+      disabled: disabled,
+      "aria-label": getAriaLabel(),
+      onClick: onClick,
+      children: action
+    })
+  });
+};
+
+module.exports = ActionOption;
+//# sourceMappingURL=ActionOption.js.map

package/build/actionOption/ActionOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,2BAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/actionOption/ActionOption.mjs

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import ActionButton from '../actionButton/ActionButton.mjs';
+import Option from '../common/Option/Option.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Priority } from '../common/propsValues/control.mjs';
+
+const ActionOption = ({
+  action,
+  priority = Priority.PRIMARY,
+  disabled,
+  onClick,
+  media,
+  title,
+  content,
+  complex,
+  className,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned
+}) => {
+  const sharedProps = {
+    media,
+    title,
+    content,
+    complex,
+    disabled,
+    showMediaAtAllSizes,
+    showMediaCircle,
+    className: classNames('tw-action-option', className),
+    isContainerAligned
+  };
+  const getAriaLabel = () => {
+    const labels = [];
+    if (typeof title === 'string') {
+      labels.push(title);
+    }
+    if (typeof action === 'string') {
+      labels.push(action);
+    }
+    return labels.join(', ') || undefined;
+  };
+  return /*#__PURE__*/jsx(Option, {
+    ...sharedProps,
+    button: /*#__PURE__*/jsx(ActionButton, {
+      priority: priority,
+      disabled: disabled,
+      "aria-label": getAriaLabel(),
+      onClick: onClick,
+      children: action
+    })
+  });
+};
+
+export { ActionOption as default };
+//# sourceMappingURL=ActionOption.mjs.map

package/build/actionOption/ActionOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,UAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/alert/Alert.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../body/Body.js');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var Title = require('../title/Title.js');
+var InlineMarkdown = require('./inlineMarkdown/InlineMarkdown.js');
+var Action = require('../common/action/Action.js');
+var jsxRuntime = require('react/jsx-runtime');
+var logActionRequired = require('../utilities/logActionRequired.js');
+var sentiment = require('../common/propsValues/sentiment.js');
+var size = require('../common/propsValues/size.js');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+exports.AlertArrowPosition = void 0;
+(function (AlertArrowPosition) {
+  AlertArrowPosition["TOP_LEFT"] = "up-left";
+  AlertArrowPosition["TOP"] = "up-center";
+  AlertArrowPosition["TOP_RIGHT"] = "up-right";
+  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
+  AlertArrowPosition["BOTTOM"] = "down-center";
+  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
+})(exports.AlertArrowPosition || (exports.AlertArrowPosition = {}));
+function resolveType(type) {
+  switch (type) {
+    case 'success':
+      return 'positive';
+    case 'info':
+      return 'neutral';
+    case 'error':
+      return 'negative';
+    default:
+      return type;
+  }
+}
+function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size: size$1,
+  title,
+  type = 'neutral',
+  variant = 'desktop'
+}) {
+  React.useEffect(() => {
+    if (arrow !== undefined) {
+      logActionRequired.logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
+    }
+  }, [arrow]);
+  React.useEffect(() => {
+    if (children !== undefined) {
+      logActionRequired.logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
+    }
+  }, [children]);
+  React.useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired.logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
+    }
+  }, [dismissible]);
+  React.useEffect(() => {
+    if (size$1 !== undefined) {
+      logActionRequired.logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size$1]);
+  const resolvedType = resolveType(type);
+  React.useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired.logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    }
+  }, [resolvedType, type]);
+  const [shouldFire, setShouldFire] = React.useState(false);
+  const closeButtonReference = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+    "data-testid": "alert",
+    onTouchStart: () => setShouldFire(true),
+    onTouchEnd: event => {
+      if (shouldFire && action?.href &&
+      // Check if current event is triggered from closeButton
+      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href);
+        } else {
+          window.top?.location.assign(action.href);
+        }
+      }
+      setShouldFire(false);
+    },
+    onTouchMove: () => setShouldFire(false),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames__default.default('alert__content', 'd-flex', 'flex-grow-1', variant),
+      "data-testid": variant,
+      children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "alert__icon",
+        children: icon
+      }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        size: size.Size.LARGE,
+        sentiment: resolvedType
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "alert__message",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          role: sentiment.Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
+          children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            className: "m-b-1",
+            type: typography.Typography.TITLE_BODY,
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+            as: "span",
+            className: "d-block",
+            type: typography.Typography.BODY_LARGE,
+            children: children || /*#__PURE__*/jsxRuntime.jsx(InlineMarkdown, {
+              children: message
+            })
+          })]
+        }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
+          action: action,
+          className: "m-t-1"
+        })]
+      })]
+    }), onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+      ref: closeButtonReference,
+      className: "m-l-2",
+      onClick: onDismiss
+    })]
+  });
+}
+function alertArrowClassNames(arrow) {
+  switch (arrow) {
+    case 'down-center':
+      return 'arrow arrow-bottom arrow-center';
+    case 'down-left':
+      return 'arrow arrow-bottom arrow-left';
+    case 'down-right':
+      return 'arrow arrow-bottom arrow-right';
+    case 'up-center':
+      return 'arrow arrow-center';
+    case 'up-right':
+      return 'arrow arrow-right';
+    case 'up-left':
+    default:
+      return 'arrow';
+  }
+}
+
+exports.default = Alert;
+//# sourceMappingURL=Alert.js.map