@transferwise/components 0.0.0-experimental-83c2313 → 0.0.0-experimental-c29cd95

package/build/Provider/Provider.mjs

@@ -0,0 +1,74 @@
+import { IntlProvider } from 'react-intl';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import '../common/PropsValues/control.mjs';
+import '../common/PropsValues/size.mjs';
+import '../common/PropsValues/typography.mjs';
+import '../common/PropsValues/width.mjs';
+import '../common/PropsValues/type.mjs';
+import '../common/PropsValues/dateMode.mjs';
+import '../common/PropsValues/monthFormat.mjs';
+import '../common/PropsValues/position.mjs';
+import '../common/PropsValues/layouts.mjs';
+import '../common/PropsValues/status.mjs';
+import '../common/PropsValues/sentiment.mjs';
+import '../common/PropsValues/profileType.mjs';
+import '../common/PropsValues/variant.mjs';
+import '../common/PropsValues/scroll.mjs';
+import '../common/PropsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common/Locale/index.mjs';
+import '@transferwise/icons';
+import 'clsx';
+import 'react';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+import en from '../i18n/en.json.mjs';
+import { DirectionProvider } from './Direction/DirectionProvider.mjs';
+import { LanguageProvider } from './Language/LanguageProvider.mjs';
+
+function Provider({
+  i18n,
+  children
+}) {
+  const {
+    locale,
+    messages,
+    defaultRichTextElements
+  } = i18n;
+  const adjustedLocale = adjustLocale(locale);
+  let intlConfig;
+  if (adjustedLocale === null) {
+    // eslint-disable-next-line no-console
+    console.warn(`Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`);
+    intlConfig = {
+      locale: DEFAULT_LOCALE,
+      messages: {
+        ...en,
+        ...messages
+      }
+    };
+  } else {
+    intlConfig = {
+      locale: adjustedLocale,
+      messages
+    };
+  }
+  return /*#__PURE__*/jsx(DirectionProvider, {
+    direction: getDirectionFromLocale(locale),
+    children: /*#__PURE__*/jsx(LanguageProvider, {
+      locale: locale,
+      children: /*#__PURE__*/jsx(IntlProvider, {
+        defaultLocale: DEFAULT_LOCALE,
+        locale: intlConfig.locale,
+        messages: intlConfig.messages,
+        defaultRichTextElements: defaultRichTextElements,
+        children: children
+      })
+    })
+  });
+}
+
+export { Provider as default };
+//# sourceMappingURL=Provider.mjs.map

package/build/Provider/Provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.mjs","sources":["../../src/Provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './Direction';\nimport { LanguageProvider } from './Language';\n\nexport interface ProviderProps {\n  i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n    Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n  children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n  const { locale, messages, defaultRichTextElements } = i18n;\n  const adjustedLocale = adjustLocale(locale);\n  let intlConfig;\n\n  if (adjustedLocale === null) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n    );\n\n    intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n  } else {\n    intlConfig = { locale: adjustedLocale, messages };\n  }\n\n  return (\n    <DirectionProvider direction={getDirectionFromLocale(locale)}>\n      <LanguageProvider locale={locale}>\n        <IntlProvider\n          defaultLocale={DEFAULT_LOCALE}\n          locale={intlConfig.locale}\n          messages={intlConfig.messages}\n          defaultRichTextElements={defaultRichTextElements}\n        >\n          {children}\n        </IntlProvider>\n      </LanguageProvider>\n    </DirectionProvider>\n  );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcc,SAAUA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAQ,CAAiB,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA;AAAuB,GAAE,GAAGJ,IAAI;AAC1D,EAAA,MAAMK,cAAc,GAAGC,YAAY,CAACJ,MAAM,CAAC;AAC3C,EAAA,IAAIK,UAAU;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAA,kBAAA,EAAqBQ,cAAc,GAAG,CACxF;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,cAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,EAAE;QAAE,GAAGR;AAAQ;KAAI;AAC3E,EAAA,CAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA;KAAU;AACnD,EAAA;EAEA,oBACES,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,sBAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,GAAA,CAACI,gBAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,GAAA,CAACK,YAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,cAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA;OACW;KACE;AACpB,GAAmB,CAAC;AAExB;;;;"}

package/build/Provider/overlay/OverlayIdProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIdProvider.js","sources":["../../../src/Provider/overlay/OverlayIdProvider.tsx"],"sourcesContent":["import { createContext, useId } from 'react';\n\nexport const OverlayIdContext = createContext<string | undefined>(undefined);\n\nexport type OverlayIdProviderProps = {\n  open: boolean;\n  children?: React.ReactNode;\n};\n\nexport const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {\n  const id = useId();\n  return (\n    <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>\n  );\n};\n"],"names":["OverlayIdContext","createContext","undefined","OverlayIdProvider","open","children","id","useId","_jsx","Provider","value"],"mappings":";;;;;MAEaA,gBAAgB,gBAAGC,mBAAa,CAAqBC,SAAS;AAOpE,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAQ,CAA0B,KAAI;AAC9E,EAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE;AAClB,EAAA,oBACEC,cAAA,CAACR,gBAAgB,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,IAAI,GAAGE,EAAE,GAAGJ,SAAU;AAAAG,IAAAA,QAAA,EAAEA;AAAQ,GAA4B,CAAC;AAEnG;;;;;"}

package/build/Provider/overlay/OverlayIdProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIdProvider.mjs","sources":["../../../src/Provider/overlay/OverlayIdProvider.tsx"],"sourcesContent":["import { createContext, useId } from 'react';\n\nexport const OverlayIdContext = createContext<string | undefined>(undefined);\n\nexport type OverlayIdProviderProps = {\n  open: boolean;\n  children?: React.ReactNode;\n};\n\nexport const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {\n  const id = useId();\n  return (\n    <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>\n  );\n};\n"],"names":["OverlayIdContext","createContext","undefined","OverlayIdProvider","open","children","id","useId","_jsx","Provider","value"],"mappings":";;;MAEaA,gBAAgB,gBAAGC,aAAa,CAAqBC,SAAS;AAOpE,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAQ,CAA0B,KAAI;AAC9E,EAAA,MAAMC,EAAE,GAAGC,KAAK,EAAE;AAClB,EAAA,oBACEC,GAAA,CAACR,gBAAgB,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,IAAI,GAAGE,EAAE,GAAGJ,SAAU;AAAAG,IAAAA,QAAA,EAAEA;AAAQ,GAA4B,CAAC;AAEnG;;;;"}

package/build/Radio/Radio.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var Body = require('../Body/Body.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('@transferwise/neptune-tokens');
+require('../common/PropsValues/control.js');
+require('../common/PropsValues/size.js');
+var typography = require('../common/PropsValues/typography.js');
+require('../common/PropsValues/width.js');
+require('../common/PropsValues/type.js');
+require('../common/PropsValues/dateMode.js');
+require('../common/PropsValues/monthFormat.js');
+require('../common/PropsValues/position.js');
+require('../common/PropsValues/layouts.js');
+require('../common/PropsValues/status.js');
+require('../common/PropsValues/sentiment.js');
+require('../common/PropsValues/profileType.js');
+require('../common/PropsValues/variant.js');
+require('../common/PropsValues/scroll.js');
+require('../common/PropsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/formatting');
+require('@transferwise/icons');
+require('react');
+require('react-intl');
+require('../common/CloseButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var RadioButton = require('../common/RadioButton/RadioButton.js');
+
+function Radio({
+  label,
+  id,
+  disabled,
+  className,
+  avatar,
+  secondary,
+  ...otherProps
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: clsx.clsx('radio np-radio', {
+      'radio-lg': secondary,
+      'radio-disabled': disabled
+    }, className),
+    children: /*#__PURE__*/jsxRuntime.jsxs("label", {
+      className: clsx.clsx({
+        disabled
+      }),
+      htmlFor: id,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "m-r-2 np-radio-button",
+        children: /*#__PURE__*/jsxRuntime.jsx(RadioButton.default, {
+          id: id,
+          disabled: disabled,
+          ...otherProps
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
+        as: "span",
+        type: secondary ? typography.Typography.BODY_LARGE_BOLD : typography.Typography.BODY_LARGE,
+        className: "np-radio__text",
+        children: [label, secondary && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          as: "span",
+          children: secondary
+        })]
+      }), avatar && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-radio__avatar m-l-auto",
+        children: avatar
+      })]
+    })
+  });
+}
+
+exports.default = Radio;
+//# sourceMappingURL=Radio.js.map

package/build/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../Body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n  avatar?: React.ReactNode;\n  label: string;\n  secondary?: string;\n  className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n  label,\n  id,\n  disabled,\n  className,\n  avatar,\n  secondary,\n  ...otherProps\n}: RadioProps<T>) {\n  return (\n    <div\n      className={clsx(\n        'radio np-radio',\n        {\n          'radio-lg': secondary,\n          'radio-disabled': disabled,\n        },\n        className,\n      )}\n    >\n      <label className={clsx({ disabled })} htmlFor={id}>\n        <span className=\"m-r-2 np-radio-button\">\n          <RadioButton id={id} disabled={disabled} {...otherProps} />\n        </span>\n        <Body\n          as=\"span\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n          className=\"np-radio__text\"\n        >\n          {label}\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n        {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcc,SAAUA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC;AAAU,CACC,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA;AAAQ,OAAE,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,mBAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI;SAAW;AAC1D,OAAM,CACN,eAAAI,eAAA,CAACG,YAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,YAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ;AAAS,SAAO,CAAC;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL;AAAM,OAAO,CAAC;KACjE;AACT,GAAK,CAAC;AAEV;;;;"}

package/build/Radio/Radio.mjs

@@ -0,0 +1,73 @@
+import { clsx } from 'clsx';
+import Body from '../Body/Body.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import '../common/PropsValues/control.mjs';
+import '../common/PropsValues/size.mjs';
+import { Typography } from '../common/PropsValues/typography.mjs';
+import '../common/PropsValues/width.mjs';
+import '../common/PropsValues/type.mjs';
+import '../common/PropsValues/dateMode.mjs';
+import '../common/PropsValues/monthFormat.mjs';
+import '../common/PropsValues/position.mjs';
+import '../common/PropsValues/layouts.mjs';
+import '../common/PropsValues/status.mjs';
+import '../common/PropsValues/sentiment.mjs';
+import '../common/PropsValues/profileType.mjs';
+import '../common/PropsValues/variant.mjs';
+import '../common/PropsValues/scroll.mjs';
+import '../common/PropsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/formatting';
+import '@transferwise/icons';
+import 'react';
+import 'react-intl';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import RadioButton from '../common/RadioButton/RadioButton.mjs';
+
+function Radio({
+  label,
+  id,
+  disabled,
+  className,
+  avatar,
+  secondary,
+  ...otherProps
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: clsx('radio np-radio', {
+      'radio-lg': secondary,
+      'radio-disabled': disabled
+    }, className),
+    children: /*#__PURE__*/jsxs("label", {
+      className: clsx({
+        disabled
+      }),
+      htmlFor: id,
+      children: [/*#__PURE__*/jsx("span", {
+        className: "m-r-2 np-radio-button",
+        children: /*#__PURE__*/jsx(RadioButton, {
+          id: id,
+          disabled: disabled,
+          ...otherProps
+        })
+      }), /*#__PURE__*/jsxs(Body, {
+        as: "span",
+        type: secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE,
+        className: "np-radio__text",
+        children: [label, secondary && /*#__PURE__*/jsx(Body, {
+          as: "span",
+          children: secondary
+        })]
+      }), avatar && /*#__PURE__*/jsx("span", {
+        className: "np-radio__avatar m-l-auto",
+        children: avatar
+      })]
+    })
+  });
+}
+
+export { Radio as default };
+//# sourceMappingURL=Radio.mjs.map

package/build/Radio/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../Body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n  avatar?: React.ReactNode;\n  label: string;\n  secondary?: string;\n  className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n  label,\n  id,\n  disabled,\n  className,\n  avatar,\n  secondary,\n  ...otherProps\n}: RadioProps<T>) {\n  return (\n    <div\n      className={clsx(\n        'radio np-radio',\n        {\n          'radio-lg': secondary,\n          'radio-disabled': disabled,\n        },\n        className,\n      )}\n    >\n      <label className={clsx({ disabled })} htmlFor={id}>\n        <span className=\"m-r-2 np-radio-button\">\n          <RadioButton id={id} disabled={disabled} {...otherProps} />\n        </span>\n        <Body\n          as=\"span\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n          className=\"np-radio__text\"\n        >\n          {label}\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n        {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcc,SAAUA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC;AAAU,CACC,EAAA;AACd,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,IAAI,CAAC;AAAEN,QAAAA;AAAQ,OAAE,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,GAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI;SAAW;AAC1D,OAAM,CACN,eAAAI,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ;AAAS,SAAO,CAAC;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL;AAAM,OAAO,CAAC;KACjE;AACT,GAAK,CAAC;AAEV;;;;"}

package/build/RadioGroup/RadioGroup.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Radio = require('../Radio/Radio.js');
+var contexts = require('../Inputs/contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function RadioGroup({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange,
+  UNSAFE_inputAttributes
+}) {
+  const inputAttributes = contexts.useInputAttributes({
+    nonLabelable: true
+  });
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "radiogroup",
+    ...inputAttributes,
+    ...UNSAFE_inputAttributes,
+    className: "wds-radio-group",
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsxRuntime.jsx(Radio.default
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...restProps,
+      name: name,
+      value: value,
+      checked: value === uncontrolledValue,
+      onChange: nextValue => {
+        setUncontrolledValue(nextValue);
+        onChange(nextValue);
+      }
+    }, index))
+  }) : null;
+}
+
+exports.default = RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

package/build/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../Radio';\nimport { RadioProps } from '../Radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../Inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div\n      role=\"radiogroup\"\n      {...inputAttributes}\n      {...UNSAFE_inputAttributes}\n      className=\"wds-radio-group\"\n    >\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","className","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;;;;;AAmBc,SAAUA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AAAsB,CACH,EAAA;EACnB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GACbR,eAAe;AAAA,IAAA,GACfD,sBAAsB;AAC1BU,IAAAA,SAAS,EAAC,iBAAiB;AAAAC,IAAAA,QAAA,EAE1Bf,MAAM,CAACgB,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAS,KAAE,EAAEC,KAAK,kBACnDP,cAAA,CAACQ;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACbnB,MAAAA,IAAI,EAAEA,IAAK;AACXkB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKT,iBAAkB;MACrCL,QAAQ,EAAGmB,SAAS,IAAI;QACtBb,oBAAoB,CAACa,SAAS,CAAC;QAC/BnB,QAAQ,CAACmB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KAQH,CAEL;GACE,CAAC,GACJ,IAAI;AACV;;;;"}

package/build/RadioGroup/RadioGroup.mjs

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Radio from '../Radio/Radio.mjs';
+import { useInputAttributes } from '../Inputs/contexts.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function RadioGroup({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange,
+  UNSAFE_inputAttributes
+}) {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsx("div", {
+    role: "radiogroup",
+    ...inputAttributes,
+    ...UNSAFE_inputAttributes,
+    className: "wds-radio-group",
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsx(Radio
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...restProps,
+      name: name,
+      value: value,
+      checked: value === uncontrolledValue,
+      onChange: nextValue => {
+        setUncontrolledValue(nextValue);
+        onChange(nextValue);
+      }
+    }, index))
+  }) : null;
+}
+
+export { RadioGroup as default };
+//# sourceMappingURL=RadioGroup.mjs.map

package/build/RadioGroup/RadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../Radio';\nimport { RadioProps } from '../Radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../Inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n  UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n  UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div\n      role=\"radiogroup\"\n      {...inputAttributes}\n      {...UNSAFE_inputAttributes}\n      className=\"wds-radio-group\"\n    >\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","className","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;AAmBc,SAAUA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA;AAAsB,CACH,EAAA;EACnB,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAACR,eAAe,CAAC;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GACbR,eAAe;AAAA,IAAA,GACfD,sBAAsB;AAC1BU,IAAAA,SAAS,EAAC,iBAAiB;AAAAC,IAAAA,QAAA,EAE1Bf,MAAM,CAACgB,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC;AAAS,KAAE,EAAEC,KAAK,kBACnDP,GAAA,CAACQ;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACbnB,MAAAA,IAAI,EAAEA,IAAK;AACXkB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKT,iBAAkB;MACrCL,QAAQ,EAAGmB,SAAS,IAAI;QACtBb,oBAAoB,CAACa,SAAS,CAAC;QAC/BnB,QAAQ,CAACmB,SAAS,CAAC;AACrB,MAAA;AAAE,KAAA,EARGH,KAQH,CAEL;GACE,CAAC,GACJ,IAAI;AACV;;;;"}

package/build/RadioOption/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sources":["../../src/RadioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends\n    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;;;AA0BA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,cAAA,CAACC,cAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,mBAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}

package/build/RadioOption/RadioOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.mjs","sources":["../../src/RadioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends\n    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://docs.wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AA0BA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}

package/build/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../src/Section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    as?: 'div' | 'fieldset' | 'section';\n    withHorizontalPadding?: boolean;\n  }\n> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n  as: Element = 'div',\n  children,\n  className,\n  withHorizontalPadding = false,\n  role = undefined,\n  ...restProps\n}: SectionProps) => {\n  return (\n    <Element\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n      role={role}\n      {...restProps}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","role","undefined","restProps","_jsx","clsx"],"mappings":";;;;;;;AAkBA,MAAMA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAK;AAC7BC,EAAAA,IAAI,GAAGC,SAAS;EAChB,GAAGC;AAAS,CACC,KAAI;EACjB,oBACEC,cAAA,CAACP,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEM,SAAI,CAAC,YAAY,EAAEN,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC;KACxC,CAAE;AACHC,IAAAA,IAAI,EAAEA,IAAK;AAAA,IAAA,GACPE,SAAS;AAAAL,IAAAA,QAAA,EAEZA;AAAQ,GACF,CAAC;AAEd;;;;"}

package/build/Section/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","sources":["../../src/Section/Section.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    as?: 'div' | 'fieldset' | 'section';\n    withHorizontalPadding?: boolean;\n  }\n> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({\n  as: Element = 'div',\n  children,\n  className,\n  withHorizontalPadding = false,\n  role = undefined,\n  ...restProps\n}: SectionProps) => {\n  return (\n    <Element\n      className={clsx('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n      role={role}\n      {...restProps}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Section;\n"],"names":["Section","as","Element","children","className","withHorizontalPadding","role","undefined","restProps","_jsx","clsx"],"mappings":";;;AAkBA,MAAMA,OAAO,GAAGA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;EACRC,SAAS;AACTC,EAAAA,qBAAqB,GAAG,KAAK;AAC7BC,EAAAA,IAAI,GAAGC,SAAS;EAChB,GAAGC;AAAS,CACC,KAAI;EACjB,oBACEC,GAAA,CAACP,OAAO,EAAA;AACNE,IAAAA,SAAS,EAAEM,IAAI,CAAC,YAAY,EAAEN,SAAS,EAAE;AACvC,MAAA,qCAAqC,EAAEC;KACxC,CAAE;AACHC,IAAAA,IAAI,EAAEA,IAAK;AAAA,IAAA,GACPE,SAAS;AAAAL,IAAAA,QAAA,EAEZA;AAAQ,GACF,CAAC;AAEd;;;;"}

package/build/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var React = require('react');
+var Body = require('../Body/Body.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('@transferwise/neptune-tokens');
+require('../common/PropsValues/control.js');
+require('../common/PropsValues/size.js');
+var typography = require('../common/PropsValues/typography.js');
+require('../common/PropsValues/width.js');
+require('../common/PropsValues/type.js');
+require('../common/PropsValues/dateMode.js');
+require('../common/PropsValues/monthFormat.js');
+require('../common/PropsValues/position.js');
+require('../common/PropsValues/layouts.js');
+require('../common/PropsValues/status.js');
+require('../common/PropsValues/sentiment.js');
+require('../common/PropsValues/profileType.js');
+require('../common/PropsValues/variant.js');
+require('../common/PropsValues/scroll.js');
+require('../common/PropsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/formatting');
+require('@transferwise/icons');
+require('react-intl');
+require('../common/CloseButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const SegmentedControl = ({
+  name,
+  value,
+  mode = 'input',
+  segments,
+  onChange
+}) => {
+  const isMountedRef = React.useRef(false);
+  const [animate, setAnimate] = React.useState(false);
+  const segmentsRef = React.useRef(null);
+  if (segments.length > 3) {
+    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/React.createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  React.useEffect(() => {
+    if (isMountedRef.current) {
+      setAnimate(true);
+    } else {
+      isMountedRef.current = true;
+    }
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, value]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: clsx.clsx('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: clsx.clsx('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      role: mode !== 'input' ? 'tablist' : undefined,
+      children: segmentsWithRefs.map(segment => {
+        const onSelect = () => {
+          setAnimate(true);
+          onChange(segment.value);
+        };
+        return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
+          ref: segment.ref,
+          htmlFor: segment.id,
+          className: clsx.clsx('segmented-control__segment', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "radio",
+            className: "segmented-control__radio-input",
+            id: segment.id,
+            name: name,
+            value: segment.value,
+            checked: value === segment.value,
+            onChange: onSelect
+          }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+            className: "segmented-control__text",
+            as: "span",
+            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
+            children: segment.label
+          })]
+        }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
+          ref: segment.ref,
+          type: "button",
+          role: "tab",
+          id: segment.id,
+          "aria-controls": segment.controls,
+          "aria-selected": value === segment.value,
+          className: clsx.clsx('segmented-control__segment', 'segmented-control__button', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          onClick: onSelect,
+          children: /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+            as: "span",
+            className: "segmented-control__text",
+            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
+            children: segment.label
+          })
+        }, segment.id);
+      })
+    })
+  });
+};
+
+exports.default = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.js.map

package/build/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}