@transferwise/components 0.0.0-experimental-a0f3d2d → 0.0.0-experimental-693e956

package/build/main.css

@@ -5467,6 +5467,9 @@ label.np-upload-button:not(.disabled):active {
   padding: 16px;
   padding: var(--padding-small);
 }
+.np-theme-personal .np-upload-input .np-upload-button .media {
+  align-items: start;
+}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -5474,6 +5477,9 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
+  display: inline-flex;
+  padding-top: 16px;
+  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -5496,6 +5502,10 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/build/styles/main.css

@@ -5467,6 +5467,9 @@ label.np-upload-button:not(.disabled):active {
   padding: 16px;
   padding: var(--padding-small);
 }
+.np-theme-personal .np-upload-input .np-upload-button .media {
+  align-items: start;
+}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -5474,6 +5477,9 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
+  display: inline-flex;
+  padding-top: 16px;
+  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -5496,6 +5502,10 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/build/styles/uploadInput/UploadInput.css

@@ -26,6 +26,9 @@
   padding: 16px;
   padding: var(--padding-small);
 }
+.np-theme-personal .np-upload-input .np-upload-button .media {
+  align-items: start;
+}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -33,6 +36,9 @@
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
+  display: inline-flex;
+  padding-top: 16px;
+  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -55,6 +61,10 @@
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/build/types/uploadInput/types.d.ts

@@ -13,9 +13,13 @@ export type UploadResponse = {
      */
     url?: string;
     /**
-     * Optionally set a translated error message when file was rejected
+     * Optionally sets a translated error message when file was rejected
      */
     error?: UploadError;
+    /**
+     * Optionally sets a translated errors messages when file was rejected
+     */
+    errors?: UploadError[];
     [key: string]: any;
 };
 export type UploadedFile = {
@@ -35,6 +39,10 @@ export type UploadedFile = {
      * Any API errors. The message should be localized.
      */
     error?: UploadError;
+    /**
+     * Any API errors array. The messages should be localized.
+     */
+    errors?: UploadError[];
     /**
      * Optional. An external URL where the file can be opened from.
      */

package/build/types/uploadInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,MAAM,WAAW,GACnB;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,GACD,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,MAAM,WAAW,GACnB;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,GACD,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IAEvB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAmHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAsIjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a0f3d2d",
+  "version": "0.0.0-experimental-693e956",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,17 +93,16 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
-    "rollup-preserve-directives": "^1.1.1",
     "storybook": "^7.6.19",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.10.0",
-    "@wise/components-theming": "0.0.0-experimental-a0f3d2d"
+    "@wise/components-theming": "1.3.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "0.0.0-experimental-a0f3d2d",
+    "@wise/components-theming": "^1.0.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"

package/src/main.css

@@ -5467,6 +5467,9 @@ label.np-upload-button:not(.disabled):active {
   padding: 16px;
   padding: var(--padding-small);
 }
+.np-theme-personal .np-upload-input .np-upload-button .media {
+  align-items: start;
+}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -5474,6 +5477,9 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
+  display: inline-flex;
+  padding-top: 16px;
+  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -5496,6 +5502,10 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/src/uploadInput/UploadInput.css

@@ -26,6 +26,9 @@
   padding: 16px;
   padding: var(--padding-small);
 }
+.np-theme-personal .np-upload-input .np-upload-button .media {
+  align-items: start;
+}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -33,6 +36,9 @@
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
+  display: inline-flex;
+  padding-top: 16px;
+  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -55,6 +61,10 @@
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/src/uploadInput/UploadInput.less

@@ -27,6 +27,10 @@
     .np-upload-button {
       border-radius: @small-border-minus-one;
       padding: var(--padding-small);
+
+      .media {
+        align-items: start;
+      }
     }
 
     .np-upload-input--square-top {
@@ -36,6 +40,8 @@
 
     .np-upload-item__remove-button {
       border-radius: unset;
+      display: inline-flex;
+      padding-top: var(--padding-small);
     }
 
     .np-upload-icon {
@@ -62,6 +68,11 @@
       }
     }
 
+    &-errors {
+      padding-left: 0;
+      list-style-position: inside;
+    }
+
     .status-circle {
       width: var(--size-x-small);
       height: var(--size-x-small);

package/src/uploadInput/UploadInput.story.tsx

@@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react';
 import { Status } from '../common';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
-import { UploadResponse } from './types';
+import { UploadedFile, UploadResponse } from './types';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
@@ -35,9 +35,9 @@ const files = [
     filename: 'receipt failed with error object.png',
     status: Status.SUCCEEDED,
   },
-];
+] satisfies UploadedFile[];
 
-const createDelayedPromise = ({
+const createDelayedPromise = async ({
   successful = true,
   delaySeconds = 3,
   response = { id: Math.round(Math.random() * 10000), url: '#' },
@@ -54,10 +54,10 @@ const createDelayedPromise = ({
   });
 
 const props = {
-  onUploadFile: (formData: FormData) => {
+  onUploadFile: async (formData: FormData) => {
     return createDelayedPromise();
   },
-  onDeleteFile: (id: string | number) => {
+  onDeleteFile: async (id: string | number) => {
     return createDelayedPromise();
   },
 };
@@ -93,6 +93,49 @@ WithMultipleExistingFiles.args = {
   multiple: true,
 };
 
+export const WithFileErrors: Story<UploadInputProps> = Template.bind({});
+WithFileErrors.args = {
+  ...props,
+  files: [
+    {
+      id: 1,
+      filename: 'Error with default message.png',
+      status: Status.FAILED,
+    },
+    {
+      id: 2,
+      filename: 'Error with `string` error.png',
+      status: Status.FAILED,
+      error: 'Single string error',
+    },
+    {
+      id: 3,
+      filename: 'Error with `obj` error ({ message : `string` }).png',
+      status: Status.FAILED,
+      error: { message: 'Single obj error' },
+    },
+    {
+      id: 4,
+      filename: 'Error with single error passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Single error in array'],
+    },
+    {
+      id: 5,
+      filename: 'Error with multiple `string` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Error 1', 'Error 2', 'Error 3'],
+    },
+    {
+      id: 6,
+      filename: 'Error with multiple `obj` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
+    },
+  ],
+  multiple: true,
+};
+
 export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
 WithoutDelete.args = {
   ...props,
@@ -105,7 +148,7 @@ export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
-  onUploadFile: () => createDelayedPromise({ successful: false }),
+  onUploadFile: async () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 
@@ -113,7 +156,7 @@ export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
-  onDeleteFile: () => createDelayedPromise({ successful: false }),
+  onDeleteFile: async () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 

package/src/uploadInput/types.ts

@@ -19,9 +19,14 @@ export type UploadResponse = {
   url?: string;
 
   /**
-   * Optionally set a translated error message when file was rejected
+   * Optionally sets a translated error message when file was rejected
    */
   error?: UploadError;
+
+  /**
+   * Optionally sets a translated errors messages when file was rejected
+   */
+  errors?: UploadError[];
   [key: string]: any;
 };
 
@@ -46,6 +51,11 @@ export type UploadedFile = {
    */
   error?: UploadError;
 
+  /**
+   * Any API errors array. The messages should be localized.
+   */
+  errors?: UploadError[];
+
   /**
    * Optional. An external URL where the file can be opened from.
    */

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -7,7 +7,7 @@ import Body from '../../body';
 import { Size, Status, Typography, Sentiment } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
 import StatusIcon from '../../statusIcon/StatusIcon';
-import { UploadedFile } from '../types';
+import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
 import { UploadItemBody } from './UploadItemBody';
@@ -43,13 +43,13 @@ const UploadItem = ({
   singleFileUpload,
 }: UploadItemProps) => {
   const { formatMessage } = useIntl();
-  const { status, filename, error, url } = file;
+  const { status, filename, error, errors, url } = file;
   const { isModern } = useTheme();
 
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
   const getIcon = () => {
-    if (error || status === Status.FAILED) {
+    if (error || errors?.length || status === Status.FAILED) {
       return isModern ? (
         <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
       ) : (
@@ -81,14 +81,33 @@ const UploadItem = ({
     return <span style={{ transform: 'scale(0.8335)' }}>{processIndicator}</span>; // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
 
-  const getErrorMessage = () =>
+  const getErrorMessage = (error?: UploadError) =>
     typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
 
+  const getMultipleErrors = (errors?: UploadError[]) => {
+    if (!errors?.length) {
+      return null;
+    }
+
+    if (errors?.length === 1) {
+      return getErrorMessage(errors[0]);
+    }
+
+    return (
+      <ul className="np-upload-input-errors m-b-0">
+        {errors.map((error, index) => {
+          // eslint-disable-next-line react/no-array-index-key
+          return <li key={index}>{getErrorMessage(error)}</li>;
+        })}
+      </ul>
+    );
+  };
+
   const getDescription = () => {
-    if (error || status === Status.FAILED) {
+    if (error || errors?.length || status === Status.FAILED) {
       return (
         <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-          {getErrorMessage()}
+          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
         </Body>
       );
     }

package/build/accordion/Accordion.js

@@ -1,40 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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;AACf,KAAA;AACD,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

@@ -1,38 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;AACf,KAAA;AACD,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

@@ -1,70 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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;;;;"}