@transferwise/components 45.11.0 → 45.13.0

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

@@ -20,5 +20,6 @@ export declare enum TEST_IDS {
     uploadItem = "uploadItem",
     mediaBody = "mediaBody"
 }
-declare const UploadItem: ({ file, canDelete, onDelete, onDownload, singleFileUpload, }: UploadItemProps) => JSX.Element;
+declare const UploadItem: ({ file, canDelete, onDelete, onDownload, singleFileUpload, }: UploadItemProps) => import("react").JSX.Element;
 export default UploadItem;
+//# sourceMappingURL=UploadItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AAUA,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,gCAqHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -31,3 +31,4 @@ declare const _default: {
     };
 };
 export default _default;
+//# sourceMappingURL=UploadItem.messages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItem.messages.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAoCG"}

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

@@ -4,5 +4,6 @@ type UploadItemLinkProps = PropsWithChildren<{
     onDownload?: (event: MouseEvent) => void;
     singleFileUpload: boolean;
 }>;
-export declare const UploadItemBody: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => JSX.Element;
+export declare const UploadItemBody: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => import("react").JSX.Element;
 export {};
+//# sourceMappingURL=UploadItemBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItemBody.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAgBrB,CAAC"}

package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts

@@ -5,3 +5,4 @@ declare function deprecated(validator: any, { component, message, newProp: newPr
     newProp?: null | undefined;
     expiryDate?: null | undefined;
 }): (props: any, propertyName: any, ...rest: any[]) => any;
+//# sourceMappingURL=deprecatedProperty.d.ts.map

package/build/types/utilities/deprecatedProperty/deprecatedProperty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecatedProperty.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/deprecatedProperty.js"],"names":[],"mappings":";AAsBA;;;;;2DAgBG"}

package/build/types/utilities/deprecatedProperty/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./deprecatedProperty";
+//# sourceMappingURL=index.d.ts.map

package/build/types/utilities/deprecatedProperty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/deprecatedProperty/index.js"],"names":[],"mappings":""}

package/build/types/utilities/index.d.ts

@@ -1,2 +1,3 @@
 export { default as deprecated } from "./deprecatedProperty";
 export { logActionRequired, logActionRequiredIf } from "./logActionRequired";
+//# sourceMappingURL=index.d.ts.map

package/build/types/utilities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.js"],"names":[],"mappings":""}

package/build/types/utilities/logActionRequired.d.ts

@@ -1,2 +1,3 @@
 export function logActionRequired(message: any): void;
 export function logActionRequiredIf(message: any, conditional: any): void;
+//# sourceMappingURL=logActionRequired.d.ts.map

package/build/types/utilities/logActionRequired.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logActionRequired.d.ts","sourceRoot":"","sources":["../../../src/utilities/logActionRequired.js"],"names":[],"mappings":"AAAA,sDAKC;AAED,0EAIC"}

package/build/types/utils.d.ts

@@ -1 +1,2 @@
 export type Merge<Object1, Object2> = Omit<Object1, keyof Object2> & Object2;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,OAAO,CAAC"}

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts

@@ -87,3 +87,4 @@ declare namespace WithDisplayFormat {
 }
 import { Component } from "react";
 import { HistoryNavigator } from "../common";
+//# sourceMappingURL=WithDisplayFormat.d.ts.map

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.js"],"names":[],"mappings":";AAaA;IAcE;;;;;;aAkBC;IA/BD,wBAWC;IAPC;;;;;;MAMC;IAuBH,8CA0BE;IAEF,uBAME;IAEF,uDAME;IAEF,sCAuBE;IAEF,oCAQE;IAEF,wBAEE;IAEF,uCAKE;IAEF,qCA0BE;IAEF,mCAKE;IAEF,oCAME;IAEF,6DAuBE;IAEF,+CAkBE;IAEF,cAsCC;CACF"}

package/build/types/withDisplayFormat/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./WithDisplayFormat";
+//# sourceMappingURL=index.d.ts.map

package/build/types/withDisplayFormat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/index.js"],"names":[],"mappings":""}

package/build/types/withNextPortal/withNextPortal.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export default function withNextPortalWrapper<T extends Record<string, any>>(Component: React.FunctionComponent<T>): (props: T) => import("react").ReactPortal | null;
+//# sourceMappingURL=withNextPortal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAEb,CAAC,wCAQ1B"}

package/package.json

@@ -1,31 +1,37 @@
 {
   "name": "@transferwise/components",
-  "version": "45.11.0",
+  "version": "45.13.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
-  "main": "./build/umd/polyfill/main.js",
-  "module": "./build/es/polyfill/index.js",
-  "types": "./build/types/index.d.ts",
-  "style": "./build/main.css",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "build",
-    "scripts"
-  ],
   "repository": {
     "type": "git",
     "fullname": "transferwise/neptune",
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
+  "author": "Wise Payments Ltd.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./build/index.js",
+  "module": "./build/index.esm.js",
+  "types": "./build/types/index.d.ts",
+  "files": [
+    "build/",
+    "src/",
+    "!**/*.tsbuildinfo"
+  ],
   "devDependencies": {
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
     "@formatjs/cli": "^4.8.3",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@storybook/addon-a11y": "^7.0.6",
     "@storybook/addon-actions": "^7.0.6",
     "@storybook/addon-essentials": "^7.0.6",
@@ -46,8 +52,10 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@transferwise/icons": "^3.6.0",
+    "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-tokens": "^8.5.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.59",
@@ -56,7 +64,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@wise/art": "^2.0.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-formatjs": "^10.5.3",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
     "html-loader": "^1.3.2",
     "jest": "^27.0.6",
@@ -65,20 +74,18 @@
     "lodash.times": "^4.3.2",
     "npm-watch": "^0.11.0",
     "react-intl": "^5.10.0",
-    "rollup": "^2.34.0",
-    "rollup-plugin-uglify": "^6.0.4",
+    "rollup": "^3.28.1",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
     "@transferwise/neptune-css": "14.5.2",
-    "@wise/components-theming": "0.8.2"
+    "@wise/components-theming": "0.8.3"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.6.0",
+    "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.5.2",
     "@wise/art": "^2",
-    "@wise/components-theming": "^0.8.2",
+    "@wise/components-theming": "^0.8.3",
     "currency-flags": "^4.0.2",
-    "prop-types": "^15.7.2",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"
@@ -86,18 +93,15 @@
   "peerDependenciesMeta": {
     "currency-flags": {
       "optional": true
-    },
-    "prop-types": {
-      "optional": true
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.22.15",
     "@formatjs/intl-locale": "^2.4.14",
     "@popperjs/core": "^2.6.0",
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
-    "@transferwise/neptune-validation": "^3.0.12",
+    "@transferwise/neptune-validation": "^3.1.0",
     "@types/lodash.throttle": "^4.1.7",
     "classnames": "^2.2.6",
     "commonmark": "0.29.1",
@@ -107,6 +111,7 @@
     "lodash.difference": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
+    "prop-types": "^15.7.2",
     "react-merge-refs": "^1.1.0",
     "react-popper": "^2.2.4",
     "react-required-if": "^1.0.3",
@@ -133,12 +138,9 @@
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
-    "build:es": "NODE_ENV=es babel src --extensions '.tsx,.js,.ts' -d build/es/polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
-    "build:es-nopolyfill": "NODE_ENV=es-nopolyfill babel src --extensions '.tsx,.js,.ts' -d build/es/no-polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
-    "build:umd": "NODE_ENV=umd rollup -c",
-    "build:umd-nopolyfill": "NODE_ENV=umd-nopolyfill rollup -c",
+    "build:js": "rollup --config --sourcemap",
     "build:generate-types": "tsc && node ./scripts/generate-type-declarations.js",
-    "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build/es/polyfill & cpx 'src/**/!(db)/*.{json,svg}' build/es/no-polyfill",
+    "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
     "docs": "pnpm build",

package/src/accordion/Accordion.css

@@ -0,0 +1 @@
+.np-accordion-item{display:block;width:100%}.np-accordion-item--open .media{border:0!important}.np-accordion-item .decision:not(.disabled,:disabled):hover{background-color:transparent}.np-accordion-item.np-accordion-item--dark .media-body,.np-accordion-item.np-accordion-item--dark .np-text-title-body{color:#fff}.np-accordion-item__content{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);padding:0 12px 24px;padding:0 var(--size-12) var(--size-24) var(--size-12)}@media (min-width:480px){.np-accordion-item__content.has-icon{padding-left:68px}[dir=rtl] .np-accordion-item__content.has-icon{padding-left:0;padding-right:68px}}.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-icon .np-accordion-item__content{padding:0 56px 16px;padding:0 var(--size-56) var(--size-16)}.np-theme-personal .np-accordion-item .media{align-items:flex-start;display:flex}.np-theme-personal .np-accordion-item .decision__title{font-size:1.125rem;font-size:var(--font-size-18)}.np-theme-personal .np-accordion-item .np-option .np-option__title{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:0}.np-theme-personal .np-accordion-item .np-option .circle-sm{background-color:transparent;border-radius:0;height:24px;height:var(--size-24);width:24px;width:var(--size-24)}.np-theme-personal .np-accordion-item__content{border-bottom:none;color:#5d7079;color:var(--color-content-secondary);padding:0 56px 16px 16px;padding:0 var(--size-56) var(--size-16) var(--size-16)}

package/src/accordion/Accordion.less

@@ -0,0 +1,81 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+
+.np-accordion-item {
+  display: block;
+  width: 100%;
+
+  &--open {
+    .media {
+      border: 0 !important;
+    }
+  }
+
+  .decision:not(.disabled, :disabled):hover {
+    background-color: transparent;
+  }
+
+  &.np-accordion-item--dark {
+    .media-body,
+    .np-text-title-body {
+      color: @color-navy-content-primary;
+    }
+  }
+
+  &__content {
+    padding: 0 var(--size-12) var(--size-24) var(--size-12);
+    border-bottom: 1px solid var(--color-border-neutral);
+
+    @media (--screen-xs) {
+      &.has-icon {
+        .padding(left, 68px);
+      }
+    }
+  }
+
+  .np-option {
+    .np-option__title { 
+      font-weight: var(--font-weight-semi-bold);
+    } 
+  }
+
+  .np-theme-personal & {
+    &--with-icon {
+      .np-accordion-item__content {
+        padding: 0 var(--size-56) var(--size-16);
+      }
+    }
+
+    .media {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .decision__title {
+      font-size: var(--font-size-18);
+    }
+
+    .np-option {
+      .np-option__title {
+        margin-bottom: 0;
+        font-size: var(--font-size-18);
+        letter-spacing: var(--letter-spacing-negative-xs);
+        line-height: var(--line-height-24);
+      }
+
+      .circle-sm {
+        background-color: transparent;
+        width: var(--size-24);
+        height: var(--size-24);
+        border-radius: 0;
+      }
+    }
+
+    &__content {
+      padding: 0 var(--size-56) var(--size-16) var(--size-16);
+      border-bottom: none;
+      color: var(--color-content-secondary);
+    }
+  }
+}

package/src/accordion/Accordion.spec.js

@@ -0,0 +1,76 @@
+import { Freeze, HappyEmoji, New } from '@transferwise/icons';
+
+import { render, screen, userEvent } from '../test-utils';
+
+import Accordion from './Accordion';
+
+describe('Accordion', () => {
+  const items = [
+    {
+      title: 'Item 1 title',
+      content: 'Item 1 content',
+      icon: <Freeze />,
+    },
+    {
+      title: 'Item 2 title',
+      content: 'Item 2 content',
+      icon: <New />,
+    },
+    {
+      title: 'Item 3 title',
+      content: 'Item 3 content',
+      icon: <HappyEmoji />,
+    },
+  ];
+
+  describe('defaults', () => {
+    it('renders an empty list when no items are passed', () => {
+      expect(render(<Accordion items={[]} />).container).toMatchSnapshot();
+    });
+  });
+
+  describe('items', () => {
+    it('renders a list with all items closed if items passed', () => {
+      render(<Accordion items={items} />);
+
+      items.forEach((item) => {
+        expect(screen.getByText(item.title)).toBeInTheDocument();
+        expect(screen.queryByText(item.content)).not.toBeInTheDocument();
+      });
+    });
+
+    it('renders a list with a specified item open if indexOpen is set', () => {
+      render(<Accordion items={items} indexOpen={1} />);
+
+      expect(screen.queryByText(items[0].content)).not.toBeInTheDocument();
+      expect(screen.getByText(items[1].content)).toBeInTheDocument();
+      expect(screen.queryByText(items[2].content)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('open and close', () => {
+    it('can open and close an item when clicked', () => {
+      const item = items[0];
+      render(<Accordion items={items} />);
+
+      userEvent.click(screen.getByRole('button', { name: item.title }));
+      expect(screen.getByText(item.content)).toBeInTheDocument();
+
+      userEvent.click(screen.getByRole('button', { name: item.title }));
+      expect(screen.queryByText(item.content)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick when an item is clicked', () => {
+      const onClick = jest.fn();
+
+      render(<Accordion items={items} onClick={onClick} />);
+
+      userEvent.click(screen.getAllByRole('button')[0]);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(0);
+    });
+  });
+});

package/src/accordion/Accordion.story.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+
+import { Scroll, Size } from '../common';
+import Modal from '../modal';
+import { lorem10, lorem40 } from '../test-utils';
+
+import Accordion from './Accordion';
+
+/**
+ * Metadata for the Accordion component story.
+ */
+const meta: Meta<typeof Accordion> = {
+  component: Accordion,
+  title: 'Content/Accordion',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A simple accordion component that displays a list of items that can be expanded or collapsed.',
+      },
+    },
+    tags: ['autodocs'],
+  },
+  args: {
+    items: [
+      {
+        title: 'Item 1',
+        content: lorem10,
+        id: 'Item 1',
+      },
+      {
+        title: 'Item 2',
+        content: lorem40,
+        id: 'Item 2',
+      },
+      {
+        title: 'Item 3',
+        content: lorem10,
+        id: 'Item 3',
+      },
+      {
+        title: 'Item 4',
+        content: lorem10,
+        id: 'Item 4',
+        icon: <FastFlagIcon size={24} />,
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    indexOpen: 0,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A basic example of the Accordion component with one item open by default.',
+      },
+    },
+  },
+};
+
+export const Multiple: Story = {
+  render: (args) => {
+    const items = args.items;
+    return (
+      <>
+        <Accordion {...args} items={[items[0]]} />
+        <Accordion {...args} items={[items[0]]} indexOpen={0} />
+        <Accordion {...args} items={items} />
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An example of the Accordion component with multiple instances and items.',
+      },
+    },
+  },
+};
+
+export const WithinModal: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'An example of the Accordion component used inside a modal.',
+      },
+    },
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args) => {
+    const items = args.items;
+    return (
+      <Modal
+        body={
+          <div className="p-a-1">
+            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
+            <Accordion {...args} items={[items[0]]} />
+            <Accordion {...args} items={[items[0]]} indexOpen={0} />
+            <Accordion {...args} items={items} />
+          </div>
+        }
+        scroll={Scroll.CONTENT}
+        size={Size.LARGE}
+        open
+        footer={
+          <div className="p-a-3 text-xs-center">
+            <a href="/large-amounts">Learn more</a>
+          </div>
+        }
+        onClose={() => void {}}
+      />
+    );
+  },
+};

package/src/accordion/Accordion.tsx

@@ -0,0 +1,98 @@
+import { useState, FC } from 'react';
+
+import AccordionItem, { AccordionItemProps } from './AccordionItem';
+
+export interface AccordionProps {
+  /** The index of the item that should be open by default. */
+  indexOpen?: number;
+  /** An array of items to display in the accordion. */
+  items: {
+    id?: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+  }[];
+  /** A callback function that is called when an item is clicked. */
+  onClick?: (index: number) => void;
+  /** @deprecated */
+  theme?: 'light' | 'dark';
+}
+
+/**
+ * Accordion
+ *
+ * A simple accordion component that displays a list of items that can be expanded or collapsed.
+ *
+ * @component
+ * @param {number} indexOpen - index of the item that should be open
+ * @param {Array<AccordionItemProps>} items - array of items to display
+ * @param {Function} onClick - callback function
+ * @example
+ * // Example usage:
+ *
+ * import Accordion from './Accordion';
+ *
+ * const items = [
+ *   {
+ *     id: 'item1',
+ *     title: 'Item 1',
+ *     content: 'This is the content for item 1.',
+ *   },
+ *   {
+ *     id: 'item2',
+ *     title: 'Item 2',
+ *     content: 'This is the content for item 2.',
+ *   },
+ *   {
+ *     id: 'item3',
+ *     title: 'Item 3',
+ *     content: 'This is the content for item 3.',
+ *   },
+ * ];
+ *
+ * function App() {
+ *   const handleItemClick = (index) => {
+ *     console.log(`Item ${index} was clicked.`);
+ *   };
+ *
+ *   return (
+ *     <Accordion items={items} onClick={handleItemClick} />
+ *   );
+ * }
+ */
+const Accordion: FC<AccordionProps> = ({ 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: number) => {
+    if (onClick) {
+      onClick(index);
+    }
+    const newItems = [...itemsOpen];
+    newItems[index] = !itemsOpen[index];
+    setItemsOpen(newItems);
+  };
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <AccordionItem
+          key={item.id || index}
+          open={itemsOpen[index]}
+          title={item.title}
+          content={item.content}
+          icon={item.icon}
+          onClick={() => handleOnClick(index)}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Accordion;