@transferwise/components 0.0.0-experimental-1342849 → 0.0.0-experimental-1c45a6e

package/build/main.css

@@ -4755,6 +4755,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   transition: background 300ms;
   color: var(--color-interactive-primary);
 }
+.np-theme-personal .form-group .segmented-control__segment {
+  margin-bottom: 0;
+}
 .segmented-control__segment:first-child {
   margin-left: 0;
 }

package/build/styles/main.css

@@ -4755,6 +4755,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   transition: background 300ms;
   color: var(--color-interactive-primary);
 }
+.np-theme-personal .form-group .segmented-control__segment {
+  margin-bottom: 0;
+}
 .segmented-control__segment:first-child {
   margin-left: 0;
 }

package/build/styles/segmentedControl/SegmentedControl.css

@@ -60,6 +60,9 @@
   transition: background 300ms;
   color: var(--color-interactive-primary);
 }
+.np-theme-personal .form-group .segmented-control__segment {
+  margin-bottom: 0;
+}
 .segmented-control__segment:first-child {
   margin-left: 0;
 }

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCAiDZ,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA+CZ,CAAC"}

package/build/types/inputs/contexts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAS/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,+CAMnB,qBAAqB,gCA0HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,+CAMnB,qBAAqB,gCA6HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/tabs/TabList.d.ts

@@ -1,10 +1,5 @@
-export default TabList;
-declare function TabList({ children }: {
-    children: any;
-}): import("react").JSX.Element;
-declare namespace TabList {
-    namespace propTypes {
-        let children: any;
-    }
+export interface TabListProps {
+    children?: React.ReactNode;
 }
+export default function TabList({ children }: TabListProps): import("react").JSX.Element;
 //# sourceMappingURL=TabList.d.ts.map

package/build/types/tabs/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.js"],"names":[],"mappings":";AAEA;;gCAMC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAQzD"}

package/package.json

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

package/src/common/hooks/useVirtualKeyboard.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 /**
- * This progressive enhancement uses an experimental API, it might change,
+ * This progressive enhancement uses an experimental API, it might change, 
  * and at the time of authoring is not supported on iOS or mobile Firefox.
  * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
  */

package/src/field/Field.tsx

@@ -63,14 +63,12 @@ export const Field = ({
                 className,
               )}
             >
-              {label != null ? (
-                <Label id={labelId} htmlFor={inputId}>
+              {label ? (
+                <label id={labelId} htmlFor={inputId} className="control-label">
                   {label}
-                  {children}
-                </Label>
-              ) : (
-                children
-              )}
+                </label>
+              ) : null}
+              {children}
 
               {message && (
                 <InlineAlert type={sentiment} id={descriptionId}>

package/src/inputs/contexts.tsx

@@ -18,9 +18,10 @@ interface UseInputAttributesArgs {
 }
 
 export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
+  const id = useContext(InputIdContext);
   const labelId = useContext(FieldLabelIdContext);
   return {
-    id: useContext(InputIdContext),
+    id: !nonLabelable ? id : undefined,
     'aria-labelledby': nonLabelable ? labelId : undefined,
     'aria-describedby': useContext(InputDescribedByContext),
     'aria-invalid': useContext(InputInvalidContext),

package/src/main.css

@@ -4755,6 +4755,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   transition: background 300ms;
   color: var(--color-interactive-primary);
 }
+.np-theme-personal .form-group .segmented-control__segment {
+  margin-bottom: 0;
+}
 .segmented-control__segment:first-child {
   margin-left: 0;
 }

package/src/segmentedControl/SegmentedControl.css

@@ -60,6 +60,9 @@
   transition: background 300ms;
   color: var(--color-interactive-primary);
 }
+.np-theme-personal .form-group .segmented-control__segment {
+  margin-bottom: 0;
+}
 .segmented-control__segment:first-child {
   margin-left: 0;
 }

package/src/segmentedControl/SegmentedControl.less

@@ -54,6 +54,10 @@
   cursor: pointer;
   transition: background 300ms;
   color: var(--color-interactive-primary);
+
+  .np-theme-personal .form-group & {
+    margin-bottom: 0;
+  }
 }
 
 .segmented-control__segment:first-child {

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen, userEvent, waitFor } from '../test-utils';
 
 import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
+import { Field } from '../field/Field';
 
 const defaultSegments = [
   {
@@ -188,4 +189,13 @@ describe('SegmentedControl', () => {
       'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
     );
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Label">
+        <SegmentedControl {...defaultProps} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Label/);
+  });
 });

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,14 +1,18 @@
-import { StoryFn } from '@storybook/react';
-import React from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
 
 import Button from '../button';
 
 import SegmentedControl from './SegmentedControl';
+import { Field } from '../field/Field';
 
-export default {
+const meta = {
   component: SegmentedControl,
   title: 'Forms/SegmentedControl',
-};
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const Template: StoryFn = (args) => {
   const [segments, setSegments] = React.useState([
@@ -91,3 +95,37 @@ export const SegmentedControlView = {
     mode: 'view',
   },
 };
+
+export const WithinField = {
+  args: {
+    name: 'aSegmentedControl',
+    mode: 'input',
+    value: 'cupcakes',
+    segments: [
+      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+    ],
+    onChange: () => {},
+  },
+  render: function Render({ value: initialValue, onChange, ...args }) {
+    const [value, setValue] = useState(initialValue);
+    return (
+      <SegmentedControl
+        value={value}
+        onChange={(nextValue) => {
+          setValue(nextValue);
+          onChange?.(nextValue);
+        }}
+        {...args}
+      />
+    );
+  },
+  decorators: [
+    (Story) => (
+      <Field label="Label">
+        <Story />
+      </Field>
+    ),
+  ],
+} satisfies Story;

package/src/segmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -38,6 +39,8 @@ const SegmentedControl = ({
   segments,
   onChange,
 }: SegmentedControlProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -95,7 +98,8 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
-        role={mode !== 'input' ? 'tablist' : undefined}
+        role={mode !== 'input' ? 'tablist' : 'group'}
+        {...inputAttributes}
       >
         {segmentsWithRefs.map((segment) => {
           const onSelect = () => {

package/src/tabs/TabList.tsx

@@ -0,0 +1,15 @@
+import { useInputAttributes } from '../inputs/contexts';
+
+export interface TabListProps {
+  children?: React.ReactNode;
+}
+
+export default function TabList({ children }: TabListProps) {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
+  return (
+    <ul className="tabs__tab-list" role="tablist" {...inputAttributes}>
+      {children}
+    </ul>
+  );
+}

package/src/tabs/Tabs.rtl.spec.tsx

@@ -0,0 +1,40 @@
+import { Field } from '../field/Field';
+import { render, screen } from '../test-utils';
+
+import Tabs from '.';
+
+describe('Tabs', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Label">
+        <Tabs
+          tabs={[
+            {
+              title: 'Title 1',
+              disabled: false,
+              content: (
+                <div className="p-a-2">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis
+                  similique
+                </div>
+              ),
+            },
+            {
+              title: 'Title 2',
+              disabled: false,
+              content: (
+                <div className="p-a-2">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                </div>
+              ),
+            },
+          ]}
+          name="tabs-test"
+          selected={0}
+          onTabSelect={() => {}}
+        />
+      </Field>,
+    );
+    expect(screen.getByRole('tablist')).toHaveAccessibleName(/^Label/);
+  });
+});

package/src/tabs/Tabs.story.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Size, Width } from '../common';
+import { Field } from '../field/Field';
+
+import Tabs from './Tabs';
+
+const meta = {
+  component: Tabs,
+  title: 'Navigation/Tabs',
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    tabs: [
+      {
+        title: 'Title 1',
+        disabled: false,
+        content: (
+          <div className="p-a-2">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+          </div>
+        ),
+      },
+      {
+        title: 'Title 2',
+        disabled: false,
+        content: (
+          <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+        ),
+      },
+      {
+        title: 'Title 3',
+        disabled: true,
+        content: (
+          <div className="p-a-2">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+          </div>
+        ),
+      },
+    ],
+  },
+  render: function Render(args) {
+    const [selected, setSelected] = useState(0);
+    return (
+      <Tabs
+        className="tabs-custom-class"
+        name="tabs-docs"
+        transitionSpacing={Size.MEDIUM}
+        selected={selected}
+        animatePanelsOnClick
+        onTabSelect={(index: number) => setSelected(index)}
+        {...args}
+      />
+    );
+  },
+} satisfies Story;
+
+export const AutoTabHeaderWidth = {
+  ...Basic,
+  args: {
+    ...Basic.args,
+    headerWidth: Width.AUTO,
+  },
+} satisfies Story;
+
+export const NoPanelAnimation = {
+  ...Basic,
+  args: {
+    ...Basic.args,
+    animatePanelsOnClick: false,
+  },
+} satisfies Story;
+
+export const WithinField = {
+  ...Basic,
+  decorators: [
+    (Story) => (
+      <Field label="Label">
+        <Story />
+      </Field>
+    ),
+  ],
+} satisfies Story;

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;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

@@ -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;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

@@ -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;;;;"}