@transferwise/components 46.165.5 → 46.167.0

package/build/CardWidget/CardWidget.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+var React = require('react');
+var CardContainer = require('../CardContainer/CardContainer.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('react-intl');
+require('../common/CloseButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Link = require('../Link/Link.js');
+var Title = require('../Title/Title.js');
+var CardWidgetAction = require('./CardWidgetAction.js');
+
+const renderAction = (action, slot) => CardWidgetAction.isCardWidgetActionButton(action) ? /*#__PURE__*/jsxRuntime.jsx(CardWidgetAction.default, {
+  action: action,
+  slot: slot
+}) : action;
+const CardWidgetHeaderComponent = ({
+  title,
+  as = 'h3',
+  titleAction,
+  action,
+  actionSecondary
+}) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+  className: "wds-card-widget__header",
+  children: [/*#__PURE__*/jsxRuntime.jsx(Title.default, {
+    as: as,
+    type: typography.Typography.TITLE_GROUP,
+    className: "wds-card-widget__title",
+    children: titleAction ? /*#__PURE__*/jsxRuntime.jsxs(Link.default, {
+      href: titleAction.href,
+      target: titleAction.target,
+      className: "wds-card-widget__title-link",
+      onClick: titleAction.onClick,
+      children: [title, /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "wds-card-widget__title-chevron",
+        "aria-hidden": true,
+        children: ['\u2060', /*#__PURE__*/jsxRuntime.jsx(icons.ChevronEnd, {
+          size: 16
+        })]
+      })]
+    }) : title
+  }), (action || actionSecondary) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "wds-card-widget__actions",
+    children: [actionSecondary && renderAction(actionSecondary, 'actionSecondary'), action && renderAction(action, 'action')]
+  })]
+});
+/**
+ * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
+ * its content. The card shows as hovered or pressed while the title link is, and as hovered while
+ * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it
+ * at rest.
+ */
+const CardWidget = /*#__PURE__*/React.forwardRef(({
+  header,
+  children,
+  className,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsxs(CardContainer.default, {
+  ref: ref,
+  className: clsx.clsx('wds-card-widget', header && 'wds-card-widget--with-header', className),
+  ...props,
+  // The widget's states follow its title link alone, so the card's own are left off.
+  interactive: false,
+  padding: "md",
+  children: [header && /*#__PURE__*/jsxRuntime.jsx(CardWidgetHeaderComponent, {
+    ...header
+  }), children != null && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "wds-card-widget__content",
+    children: children
+  })]
+}));
+CardWidget.displayName = 'CardWidget';
+
+exports.default = CardWidget;
+//# sourceMappingURL=CardWidget.js.map

package/build/CardWidget/CardWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardWidget.js","sources":["../../src/CardWidget/CardWidget.tsx"],"sourcesContent":["import { ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport CardContainer from '../CardContainer';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport Title from '../Title';\nimport type { CardWidgetHeader, CardWidgetProps } from './CardWidget.types';\nimport CardWidgetAction, {\n  isCardWidgetActionButton,\n  type CardWidgetActionSlot,\n} from './CardWidgetAction';\n\nconst renderAction = (action: CardWidgetHeader['action'], slot: CardWidgetActionSlot) =>\n  isCardWidgetActionButton(action) ? <CardWidgetAction action={action} slot={slot} /> : action;\n\nconst CardWidgetHeaderComponent = ({\n  title,\n  as = 'h3',\n  titleAction,\n  action,\n  actionSecondary,\n}: CardWidgetHeader) => (\n  <div className=\"wds-card-widget__header\">\n    <Title as={as} type={Typography.TITLE_GROUP} className=\"wds-card-widget__title\">\n      {titleAction ? (\n        <Link\n          href={titleAction.href}\n          target={titleAction.target}\n          className=\"wds-card-widget__title-link\"\n          onClick={titleAction.onClick}\n        >\n          {title}\n          {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}\n          <span className=\"wds-card-widget__title-chevron\" aria-hidden>\n            {'\\u2060'}\n            <ChevronEnd size={16} />\n          </span>\n        </Link>\n      ) : (\n        title\n      )}\n    </Title>\n    {(action || actionSecondary) && (\n      <div className=\"wds-card-widget__actions\">\n        {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}\n        {action && renderAction(action, 'action')}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * A `CardContainer` with an optional header — a title, a title link and up to two actions — above\n * its content. The card shows as hovered or pressed while the title link is, and as hovered while\n * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it\n * at rest.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n  ({ header, children, className, ...props }, ref) => (\n    <CardContainer\n      ref={ref}\n      className={clsx('wds-card-widget', header && 'wds-card-widget--with-header', className)}\n      {...props}\n      // The widget's states follow its title link alone, so the card's own are left off.\n      interactive={false}\n      padding=\"md\"\n    >\n      {header && <CardWidgetHeaderComponent {...header} />}\n      {children != null && <div className=\"wds-card-widget__content\">{children}</div>}\n    </CardContainer>\n  ),\n);\n\nCardWidget.displayName = 'CardWidget';\n\nexport default CardWidget;\n"],"names":["renderAction","action","slot","isCardWidgetActionButton","_jsx","CardWidgetAction","CardWidgetHeaderComponent","title","as","titleAction","actionSecondary","_jsxs","className","children","Title","type","Typography","TITLE_GROUP","Link","href","target","onClick","ChevronEnd","size","CardWidget","forwardRef","header","props","ref","CardContainer","clsx","interactive","padding","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAGA,CAACC,MAAkC,EAAEC,IAA0B,KAClFC,yCAAwB,CAACF,MAAM,CAAC,gBAAGG,cAAA,CAACC,wBAAgB,EAAA;AAACJ,EAAAA,MAAM,EAAEA,MAAO;AAACC,EAAAA,IAAI,EAAEA;AAAK,CAAA,CAAG,GAAGD,MAAM;AAE9F,MAAMK,yBAAyB,GAAGA,CAAC;EACjCC,KAAK;AACLC,EAAAA,EAAE,GAAG,IAAI;EACTC,WAAW;EACXR,MAAM;AACNS,EAAAA;AAAe,CACE,kBACjBC,eAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,SAAS,EAAC,yBAAyB;EAAAC,QAAA,EAAA,cACtCT,cAAA,CAACU,aAAK,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;IAACO,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACL,IAAAA,SAAS,EAAC,wBAAwB;AAAAC,IAAAA,QAAA,EAC5EJ,WAAW,gBACVE,eAAA,CAACO,YAAI,EAAA;MACHC,IAAI,EAAEV,WAAW,CAACU,IAAK;MACvBC,MAAM,EAAEX,WAAW,CAACW,MAAO;AAC3BR,MAAAA,SAAS,EAAC,6BAA6B;MACvCS,OAAO,EAAEZ,WAAW,CAACY,OAAQ;MAAAR,QAAA,EAAA,CAE5BN,KAAK,eAENI,eAAA,CAAA,MAAA,EAAA;AAAMC,QAAAA,SAAS,EAAC,gCAAgC;QAAC,aAAA,EAAA,IAAW;AAAAC,QAAAA,QAAA,EAAA,CACzD,QAAQ,eACTT,cAAA,CAACkB,gBAAU,EAAA;AAACC,UAAAA,IAAI,EAAE;AAAG,SAAA,CACvB;AAAA,OAAM,CACR;AAAA,KAAM,CAAC,GAEPhB;AACD,GACI,CACP,EAAC,CAACN,MAAM,IAAIS,eAAe,kBACzBC,eAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,GACtCH,eAAe,IAAIV,YAAY,CAACU,eAAe,EAAE,iBAAiB,CAAC,EACnET,MAAM,IAAID,YAAY,CAACC,MAAM,EAAE,QAAQ,CAAC;AAAA,GACtC,CACN;AAAA,CACE,CACN;AAED;;;;;AAKG;AACH,MAAMuB,UAAU,gBAAGC,gBAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;AAAK,CAAE,EAAEC,GAAG,kBAC7CjB,eAAA,CAACkB,qBAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;EACThB,SAAS,EAAEkB,SAAI,CAAC,iBAAiB,EAAEJ,MAAM,IAAI,8BAA8B,EAAEd,SAAS,CAAE;AAAA,EAAA,GACpFe,KAAK;AACT;AACAI,EAAAA,WAAW,EAAE,KAAM;AACnBC,EAAAA,OAAO,EAAC,IAAI;AAAAnB,EAAAA,QAAA,EAAA,CAEXa,MAAM,iBAAItB,cAAA,CAACE,yBAAyB,EAAA;IAAA,GAAKoB;AAAM,GAAC,CAAG,EACnDb,QAAQ,IAAI,IAAI,iBAAIT,cAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AAAA,CAClE,CAChB;AAGHW,UAAU,CAACS,WAAW,GAAG,YAAY;;"}

package/build/CardWidget/CardWidget.mjs

@@ -0,0 +1,94 @@
+import { ChevronEnd } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import CardContainer from '../CardContainer/CardContainer.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 'react-intl';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Link from '../Link/Link.mjs';
+import Title from '../Title/Title.mjs';
+import CardWidgetAction, { isCardWidgetActionButton } from './CardWidgetAction.mjs';
+
+const renderAction = (action, slot) => isCardWidgetActionButton(action) ? /*#__PURE__*/jsx(CardWidgetAction, {
+  action: action,
+  slot: slot
+}) : action;
+const CardWidgetHeaderComponent = ({
+  title,
+  as = 'h3',
+  titleAction,
+  action,
+  actionSecondary
+}) => /*#__PURE__*/jsxs("div", {
+  className: "wds-card-widget__header",
+  children: [/*#__PURE__*/jsx(Title, {
+    as: as,
+    type: Typography.TITLE_GROUP,
+    className: "wds-card-widget__title",
+    children: titleAction ? /*#__PURE__*/jsxs(Link, {
+      href: titleAction.href,
+      target: titleAction.target,
+      className: "wds-card-widget__title-link",
+      onClick: titleAction.onClick,
+      children: [title, /*#__PURE__*/jsxs("span", {
+        className: "wds-card-widget__title-chevron",
+        "aria-hidden": true,
+        children: ['\u2060', /*#__PURE__*/jsx(ChevronEnd, {
+          size: 16
+        })]
+      })]
+    }) : title
+  }), (action || actionSecondary) && /*#__PURE__*/jsxs("div", {
+    className: "wds-card-widget__actions",
+    children: [actionSecondary && renderAction(actionSecondary, 'actionSecondary'), action && renderAction(action, 'action')]
+  })]
+});
+/**
+ * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
+ * its content. The card shows as hovered or pressed while the title link is, and as hovered while
+ * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it
+ * at rest.
+ */
+const CardWidget = /*#__PURE__*/forwardRef(({
+  header,
+  children,
+  className,
+  ...props
+}, ref) => /*#__PURE__*/jsxs(CardContainer, {
+  ref: ref,
+  className: clsx('wds-card-widget', header && 'wds-card-widget--with-header', className),
+  ...props,
+  // The widget's states follow its title link alone, so the card's own are left off.
+  interactive: false,
+  padding: "md",
+  children: [header && /*#__PURE__*/jsx(CardWidgetHeaderComponent, {
+    ...header
+  }), children != null && /*#__PURE__*/jsx("div", {
+    className: "wds-card-widget__content",
+    children: children
+  })]
+}));
+CardWidget.displayName = 'CardWidget';
+
+export { CardWidget as default };
+//# sourceMappingURL=CardWidget.mjs.map

package/build/CardWidget/CardWidget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardWidget.mjs","sources":["../../src/CardWidget/CardWidget.tsx"],"sourcesContent":["import { ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport CardContainer from '../CardContainer';\nimport { Typography } from '../common';\nimport Link from '../Link';\nimport Title from '../Title';\nimport type { CardWidgetHeader, CardWidgetProps } from './CardWidget.types';\nimport CardWidgetAction, {\n  isCardWidgetActionButton,\n  type CardWidgetActionSlot,\n} from './CardWidgetAction';\n\nconst renderAction = (action: CardWidgetHeader['action'], slot: CardWidgetActionSlot) =>\n  isCardWidgetActionButton(action) ? <CardWidgetAction action={action} slot={slot} /> : action;\n\nconst CardWidgetHeaderComponent = ({\n  title,\n  as = 'h3',\n  titleAction,\n  action,\n  actionSecondary,\n}: CardWidgetHeader) => (\n  <div className=\"wds-card-widget__header\">\n    <Title as={as} type={Typography.TITLE_GROUP} className=\"wds-card-widget__title\">\n      {titleAction ? (\n        <Link\n          href={titleAction.href}\n          target={titleAction.target}\n          className=\"wds-card-widget__title-link\"\n          onClick={titleAction.onClick}\n        >\n          {title}\n          {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}\n          <span className=\"wds-card-widget__title-chevron\" aria-hidden>\n            {'\\u2060'}\n            <ChevronEnd size={16} />\n          </span>\n        </Link>\n      ) : (\n        title\n      )}\n    </Title>\n    {(action || actionSecondary) && (\n      <div className=\"wds-card-widget__actions\">\n        {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}\n        {action && renderAction(action, 'action')}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * A `CardContainer` with an optional header — a title, a title link and up to two actions — above\n * its content. The card shows as hovered or pressed while the title link is, and as hovered while\n * the link has keyboard focus. Hovering or pressing the rest of the card, or its actions, leaves it\n * at rest.\n */\nconst CardWidget = forwardRef<HTMLElement, CardWidgetProps>(\n  ({ header, children, className, ...props }, ref) => (\n    <CardContainer\n      ref={ref}\n      className={clsx('wds-card-widget', header && 'wds-card-widget--with-header', className)}\n      {...props}\n      // The widget's states follow its title link alone, so the card's own are left off.\n      interactive={false}\n      padding=\"md\"\n    >\n      {header && <CardWidgetHeaderComponent {...header} />}\n      {children != null && <div className=\"wds-card-widget__content\">{children}</div>}\n    </CardContainer>\n  ),\n);\n\nCardWidget.displayName = 'CardWidget';\n\nexport default CardWidget;\n"],"names":["renderAction","action","slot","isCardWidgetActionButton","_jsx","CardWidgetAction","CardWidgetHeaderComponent","title","as","titleAction","actionSecondary","_jsxs","className","children","Title","type","Typography","TITLE_GROUP","Link","href","target","onClick","ChevronEnd","size","CardWidget","forwardRef","header","props","ref","CardContainer","clsx","interactive","padding","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,YAAY,GAAGA,CAACC,MAAkC,EAAEC,IAA0B,KAClFC,wBAAwB,CAACF,MAAM,CAAC,gBAAGG,GAAA,CAACC,gBAAgB,EAAA;AAACJ,EAAAA,MAAM,EAAEA,MAAO;AAACC,EAAAA,IAAI,EAAEA;AAAK,CAAA,CAAG,GAAGD,MAAM;AAE9F,MAAMK,yBAAyB,GAAGA,CAAC;EACjCC,KAAK;AACLC,EAAAA,EAAE,GAAG,IAAI;EACTC,WAAW;EACXR,MAAM;AACNS,EAAAA;AAAe,CACE,kBACjBC,IAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,SAAS,EAAC,yBAAyB;EAAAC,QAAA,EAAA,cACtCT,GAAA,CAACU,KAAK,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;IAACO,IAAI,EAAEC,UAAU,CAACC,WAAY;AAACL,IAAAA,SAAS,EAAC,wBAAwB;AAAAC,IAAAA,QAAA,EAC5EJ,WAAW,gBACVE,IAAA,CAACO,IAAI,EAAA;MACHC,IAAI,EAAEV,WAAW,CAACU,IAAK;MACvBC,MAAM,EAAEX,WAAW,CAACW,MAAO;AAC3BR,MAAAA,SAAS,EAAC,6BAA6B;MACvCS,OAAO,EAAEZ,WAAW,CAACY,OAAQ;MAAAR,QAAA,EAAA,CAE5BN,KAAK,eAENI,IAAA,CAAA,MAAA,EAAA;AAAMC,QAAAA,SAAS,EAAC,gCAAgC;QAAC,aAAA,EAAA,IAAW;AAAAC,QAAAA,QAAA,EAAA,CACzD,QAAQ,eACTT,GAAA,CAACkB,UAAU,EAAA;AAACC,UAAAA,IAAI,EAAE;AAAG,SAAA,CACvB;AAAA,OAAM,CACR;AAAA,KAAM,CAAC,GAEPhB;AACD,GACI,CACP,EAAC,CAACN,MAAM,IAAIS,eAAe,kBACzBC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,GACtCH,eAAe,IAAIV,YAAY,CAACU,eAAe,EAAE,iBAAiB,CAAC,EACnET,MAAM,IAAID,YAAY,CAACC,MAAM,EAAE,QAAQ,CAAC;AAAA,GACtC,CACN;AAAA,CACE,CACN;AAED;;;;;AAKG;AACH,MAAMuB,UAAU,gBAAGC,UAAU,CAC3B,CAAC;EAAEC,MAAM;EAAEb,QAAQ;EAAED,SAAS;EAAE,GAAGe;AAAK,CAAE,EAAEC,GAAG,kBAC7CjB,IAAA,CAACkB,aAAa,EAAA;AACZD,EAAAA,GAAG,EAAEA,GAAI;EACThB,SAAS,EAAEkB,IAAI,CAAC,iBAAiB,EAAEJ,MAAM,IAAI,8BAA8B,EAAEd,SAAS,CAAE;AAAA,EAAA,GACpFe,KAAK;AACT;AACAI,EAAAA,WAAW,EAAE,KAAM;AACnBC,EAAAA,OAAO,EAAC,IAAI;AAAAnB,EAAAA,QAAA,EAAA,CAEXa,MAAM,iBAAItB,GAAA,CAACE,yBAAyB,EAAA;IAAA,GAAKoB;AAAM,GAAC,CAAG,EACnDb,QAAQ,IAAI,IAAI,iBAAIT,GAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,0BAA0B;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AAAA,CAClE,CAChB;AAGHW,UAAU,CAACS,WAAW,GAAG,YAAY;;"}

package/build/CardWidget/CardWidgetAction.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Button_resolver = require('../Button/Button.resolver.js');
+var IconButton = require('../IconButton/IconButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const BUTTON_PRIORITY = {
+  action: 'secondary',
+  actionSecondary: 'secondary-neutral'
+};
+const ICON_BUTTON_PRIORITY = {
+  action: 'secondary',
+  actionSecondary: 'tertiary'
+};
+/**
+ * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.
+ * Every button action has a `label` or an `icon`, which no React element, portal or array does.
+ */
+const isCardWidgetActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/React.isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
+/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */
+const CardWidgetAction = function CardWidgetAction({
+  action: {
+    label,
+    icon,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId,
+    href,
+    target,
+    onClick,
+    disabled
+  },
+  slot
+}) {
+  if (label === undefined) {
+    return /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
+      size: 32,
+      priority: ICON_BUTTON_PRIORITY[slot],
+      "aria-label": ariaLabel,
+      href: href,
+      target: target,
+      disabled: disabled,
+      "data-testid": dataTestId,
+      onClick: onClick,
+      children: icon
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
+    v2: true,
+    size: "sm",
+    priority: BUTTON_PRIORITY[slot],
+    "aria-label": ariaLabel,
+    href: href,
+    target: target,
+    disabled: disabled,
+    addonEnd: icon ? {
+      type: 'icon',
+      value: icon
+    } : undefined
+    // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.
+    ,
+    type: "button",
+    "data-testid": dataTestId,
+    onClick: onClick,
+    children: label
+  });
+};
+
+exports.default = CardWidgetAction;
+exports.isCardWidgetActionButton = isCardWidgetActionButton;
+//# sourceMappingURL=CardWidgetAction.js.map

package/build/CardWidget/CardWidgetAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardWidgetAction.js","sources":["../../src/CardWidget/CardWidgetAction.tsx"],"sourcesContent":["import { isValidElement, type MouseEventHandler, type ReactNode } from 'react';\n\nimport Button from '../Button';\nimport type { ButtonPriority, ButtonProps } from '../Button/Button.types';\nimport IconButton, { type IconButtonProps } from '../IconButton';\n\n/** The action slot a `CardWidgetActionButton` was passed to, which is what determines its emphasis. */\nexport type CardWidgetActionSlot = 'action' | 'actionSecondary';\n\ntype CardWidgetActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {\n  /**\n   * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`\n   * depending on whether `href` is set.\n   * @default undefined\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n\n  /**\n   * Rendered after `label`, or as the only content of an unlabelled action.\n   * Size it yourself — 16px is expected in both cases.\n   * @default undefined\n   */\n  icon?: ReactNode;\n  'data-testid'?: string;\n};\n\n/** An action with a visible label, rendered as a small button. */\ntype CardWidgetLabelledActionButton = CardWidgetActionButtonBase & {\n  /** Non-rendering values are excluded, so an unlabelled action has to meet the icon-only rules. */\n  label: Exclude<ButtonProps['children'], null | undefined | boolean>;\n  /** @default undefined */\n  'aria-label'?: string;\n};\n\n/**\n * An action with no visible label, rendered as a 32px icon button. The icon is\n * the only thing on screen and `aria-label` is the only accessible name, so\n * both are required.\n */\ntype CardWidgetIconActionButton = CardWidgetActionButtonBase & {\n  label?: never;\n  icon: ReactNode;\n  'aria-label': string;\n};\n\n/**\n * An action the `CardWidget` header renders as a button. With a `label` it is a small `Button`; without\n * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not\n * part of the object — it comes from the slot the action is passed to.\n */\nexport type CardWidgetActionButton = CardWidgetLabelledActionButton | CardWidgetIconActionButton;\n\nconst BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'secondary-neutral',\n} as const satisfies Record<CardWidgetActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'tertiary',\n} as const satisfies Record<CardWidgetActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.\n * Every button action has a `label` or an `icon`, which no React element, portal or array does.\n */\nexport const isCardWidgetActionButton = (value: unknown): value is CardWidgetActionButton =>\n  typeof value === 'object' &&\n  value !== null &&\n  !isValidElement(value) &&\n  !Array.isArray(value) &&\n  ('label' in value || 'icon' in value);\n\n/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */\nconst CardWidgetAction = function CardWidgetAction({\n  action: {\n    label,\n    icon,\n    'aria-label': ariaLabel,\n    'data-testid': dataTestId,\n    href,\n    target,\n    onClick,\n    disabled,\n  },\n  slot,\n}: {\n  action: CardWidgetActionButton;\n  slot: CardWidgetActionSlot;\n}) {\n  if (label === undefined) {\n    return (\n      <IconButton\n        size={32}\n        priority={ICON_BUTTON_PRIORITY[slot]}\n        aria-label={ariaLabel}\n        href={href}\n        target={target}\n        disabled={disabled}\n        data-testid={dataTestId}\n        onClick={onClick}\n      >\n        {icon}\n      </IconButton>\n    );\n  }\n\n  return (\n    <Button\n      v2\n      size=\"sm\"\n      priority={BUTTON_PRIORITY[slot]}\n      aria-label={ariaLabel}\n      href={href}\n      target={target}\n      disabled={disabled}\n      addonEnd={icon ? { type: 'icon', value: icon } : undefined}\n      // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.\n      type=\"button\"\n      data-testid={dataTestId}\n      onClick={onClick}\n    >\n      {label}\n    </Button>\n  );\n};\n\nexport default CardWidgetAction;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isCardWidgetActionButton","value","isValidElement","Array","isArray","CardWidgetAction","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;;;;;AAoDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC8C;AAEjE,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC2D;AAE9E;;;AAGG;AACI,MAAME,wBAAwB,GAAIC,KAAc,IACrD,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,eAACC,oBAAc,CAACD,KAAK,CAAC,IACtB,CAACE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,KACpB,OAAO,IAAIA,KAAK,IAAI,MAAM,IAAIA,KAAK;AAEtC;AACA,MAAMI,gBAAgB,GAAG,SAASA,gBAAgBA,CAAC;AACjDR,EAAAA,MAAM,EAAE;IACNS,KAAK;IACLC,IAAI;AACJ,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,aAAa,EAAEC,UAAU;IACzBC,IAAI;IACJC,MAAM;IACNC,OAAO;AACPC,IAAAA;GACD;AACDC,EAAAA;AAAI,CAIL,EAAA;EACC,IAAIR,KAAK,KAAKS,SAAS,EAAE;IACvB,oBACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAEpB,oBAAoB,CAACe,IAAI,CAAE;AACrC,MAAA,YAAA,EAAYN,SAAU;AACtBE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfE,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,aAAA,EAAaJ,UAAW;AACxBG,MAAAA,OAAO,EAAEA,OAAQ;AAAAQ,MAAAA,QAAA,EAEhBb;AAAI,KACK,CAAC;AAEjB,EAAA;EAEA,oBACES,cAAA,CAACK,uBAAM,EAAA;IACLC,EAAE,EAAA,IAAA;AACFJ,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,QAAQ,EAAEvB,eAAe,CAACkB,IAAI,CAAE;AAChC,IAAA,YAAA,EAAYN,SAAU;AACtBE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,QAAQ,EAAEA,QAAS;IACnBU,QAAQ,EAAEhB,IAAI,GAAG;AAAEiB,MAAAA,IAAI,EAAE,MAAM;AAAEvB,MAAAA,KAAK,EAAEM;AAAI,KAAE,GAAGQ;AACjD;AAAA;AACAS,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,aAAA,EAAaf,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;;"}

package/build/CardWidget/CardWidgetAction.mjs

@@ -0,0 +1,68 @@
+import { isValidElement } from 'react';
+import Button from '../Button/Button.resolver.mjs';
+import IconButton from '../IconButton/IconButton.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const BUTTON_PRIORITY = {
+  action: 'secondary',
+  actionSecondary: 'secondary-neutral'
+};
+const ICON_BUTTON_PRIORITY = {
+  action: 'secondary',
+  actionSecondary: 'tertiary'
+};
+/**
+ * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.
+ * Every button action has a `label` or an `icon`, which no React element, portal or array does.
+ */
+const isCardWidgetActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
+/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */
+const CardWidgetAction = function CardWidgetAction({
+  action: {
+    label,
+    icon,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId,
+    href,
+    target,
+    onClick,
+    disabled
+  },
+  slot
+}) {
+  if (label === undefined) {
+    return /*#__PURE__*/jsx(IconButton, {
+      size: 32,
+      priority: ICON_BUTTON_PRIORITY[slot],
+      "aria-label": ariaLabel,
+      href: href,
+      target: target,
+      disabled: disabled,
+      "data-testid": dataTestId,
+      onClick: onClick,
+      children: icon
+    });
+  }
+  return /*#__PURE__*/jsx(Button, {
+    v2: true,
+    size: "sm",
+    priority: BUTTON_PRIORITY[slot],
+    "aria-label": ariaLabel,
+    href: href,
+    target: target,
+    disabled: disabled,
+    addonEnd: icon ? {
+      type: 'icon',
+      value: icon
+    } : undefined
+    // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.
+    ,
+    type: "button",
+    "data-testid": dataTestId,
+    onClick: onClick,
+    children: label
+  });
+};
+
+export { CardWidgetAction as default, isCardWidgetActionButton };
+//# sourceMappingURL=CardWidgetAction.mjs.map

package/build/CardWidget/CardWidgetAction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardWidgetAction.mjs","sources":["../../src/CardWidget/CardWidgetAction.tsx"],"sourcesContent":["import { isValidElement, type MouseEventHandler, type ReactNode } from 'react';\n\nimport Button from '../Button';\nimport type { ButtonPriority, ButtonProps } from '../Button/Button.types';\nimport IconButton, { type IconButtonProps } from '../IconButton';\n\n/** The action slot a `CardWidgetActionButton` was passed to, which is what determines its emphasis. */\nexport type CardWidgetActionSlot = 'action' | 'actionSecondary';\n\ntype CardWidgetActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {\n  /**\n   * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`\n   * depending on whether `href` is set.\n   * @default undefined\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n\n  /**\n   * Rendered after `label`, or as the only content of an unlabelled action.\n   * Size it yourself — 16px is expected in both cases.\n   * @default undefined\n   */\n  icon?: ReactNode;\n  'data-testid'?: string;\n};\n\n/** An action with a visible label, rendered as a small button. */\ntype CardWidgetLabelledActionButton = CardWidgetActionButtonBase & {\n  /** Non-rendering values are excluded, so an unlabelled action has to meet the icon-only rules. */\n  label: Exclude<ButtonProps['children'], null | undefined | boolean>;\n  /** @default undefined */\n  'aria-label'?: string;\n};\n\n/**\n * An action with no visible label, rendered as a 32px icon button. The icon is\n * the only thing on screen and `aria-label` is the only accessible name, so\n * both are required.\n */\ntype CardWidgetIconActionButton = CardWidgetActionButtonBase & {\n  label?: never;\n  icon: ReactNode;\n  'aria-label': string;\n};\n\n/**\n * An action the `CardWidget` header renders as a button. With a `label` it is a small `Button`; without\n * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not\n * part of the object — it comes from the slot the action is passed to.\n */\nexport type CardWidgetActionButton = CardWidgetLabelledActionButton | CardWidgetIconActionButton;\n\nconst BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'secondary-neutral',\n} as const satisfies Record<CardWidgetActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'tertiary',\n} as const satisfies Record<CardWidgetActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `CardWidgetActionButton` object apart from any other node passed to an action slot.\n * Every button action has a `label` or an `icon`, which no React element, portal or array does.\n */\nexport const isCardWidgetActionButton = (value: unknown): value is CardWidgetActionButton =>\n  typeof value === 'object' &&\n  value !== null &&\n  !isValidElement(value) &&\n  !Array.isArray(value) &&\n  ('label' in value || 'icon' in value);\n\n/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */\nconst CardWidgetAction = function CardWidgetAction({\n  action: {\n    label,\n    icon,\n    'aria-label': ariaLabel,\n    'data-testid': dataTestId,\n    href,\n    target,\n    onClick,\n    disabled,\n  },\n  slot,\n}: {\n  action: CardWidgetActionButton;\n  slot: CardWidgetActionSlot;\n}) {\n  if (label === undefined) {\n    return (\n      <IconButton\n        size={32}\n        priority={ICON_BUTTON_PRIORITY[slot]}\n        aria-label={ariaLabel}\n        href={href}\n        target={target}\n        disabled={disabled}\n        data-testid={dataTestId}\n        onClick={onClick}\n      >\n        {icon}\n      </IconButton>\n    );\n  }\n\n  return (\n    <Button\n      v2\n      size=\"sm\"\n      priority={BUTTON_PRIORITY[slot]}\n      aria-label={ariaLabel}\n      href={href}\n      target={target}\n      disabled={disabled}\n      addonEnd={icon ? { type: 'icon', value: icon } : undefined}\n      // The v2 resolver drops `Button`'s own `button` default, so an action would submit a form.\n      type=\"button\"\n      data-testid={dataTestId}\n      onClick={onClick}\n    >\n      {label}\n    </Button>\n  );\n};\n\nexport default CardWidgetAction;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isCardWidgetActionButton","value","isValidElement","Array","isArray","CardWidgetAction","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;AAoDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC8C;AAEjE,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC2D;AAE9E;;;AAGG;AACI,MAAME,wBAAwB,GAAIC,KAAc,IACrD,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,eAACC,cAAc,CAACD,KAAK,CAAC,IACtB,CAACE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,KACpB,OAAO,IAAIA,KAAK,IAAI,MAAM,IAAIA,KAAK;AAEtC;AACA,MAAMI,gBAAgB,GAAG,SAASA,gBAAgBA,CAAC;AACjDR,EAAAA,MAAM,EAAE;IACNS,KAAK;IACLC,IAAI;AACJ,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,aAAa,EAAEC,UAAU;IACzBC,IAAI;IACJC,MAAM;IACNC,OAAO;AACPC,IAAAA;GACD;AACDC,EAAAA;AAAI,CAIL,EAAA;EACC,IAAIR,KAAK,KAAKS,SAAS,EAAE;IACvB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAE,EAAG;AACTC,MAAAA,QAAQ,EAAEpB,oBAAoB,CAACe,IAAI,CAAE;AACrC,MAAA,YAAA,EAAYN,SAAU;AACtBE,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,MAAM,EAAEA,MAAO;AACfE,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,aAAA,EAAaJ,UAAW;AACxBG,MAAAA,OAAO,EAAEA,OAAQ;AAAAQ,MAAAA,QAAA,EAEhBb;AAAI,KACK,CAAC;AAEjB,EAAA;EAEA,oBACES,GAAA,CAACK,MAAM,EAAA;IACLC,EAAE,EAAA,IAAA;AACFJ,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,QAAQ,EAAEvB,eAAe,CAACkB,IAAI,CAAE;AAChC,IAAA,YAAA,EAAYN,SAAU;AACtBE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,QAAQ,EAAEA,QAAS;IACnBU,QAAQ,EAAEhB,IAAI,GAAG;AAAEiB,MAAAA,IAAI,EAAE,MAAM;AAAEvB,MAAAA,KAAK,EAAEM;AAAI,KAAE,GAAGQ;AACjD;AAAA;AACAS,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,aAAA,EAAaf,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;"}

package/build/Display/Display.js

@@ -38,7 +38,9 @@ function Display({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Heading, {
     id: id,
-    className: clsx.clsx('np-display', `np-text-${type}`, 'text-primary', className),
+    className: clsx.clsx('np-display', `np-text-${type}`,
+    // display-extra-large has no locale-aware equivalent
+    type !== typography.Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/Display/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../src/Display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\nexport type DisplayProps = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: DisplayProps) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAE,CACW,EAAA;EACb,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA;AAAQ,GACF,CAAC;AAEd;;"}
+{"version":3,"file":"Display.js","sources":["../../src/Display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\nexport type DisplayProps = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: DisplayProps) {\n  return (\n    <Heading\n      id={id}\n      className={clsx(\n        'np-display',\n        `np-text-${type}`,\n        // display-extra-large has no locale-aware equivalent\n        type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`,\n        'text-primary',\n        className,\n      )}\n    >\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx","DISPLAY_EXTRA_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAE,CACW,EAAA;EACb,oBACEC,cAAA,CAACP,OAAO,EAAA;AACNM,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,SAAS,EAAEG,SAAI,CACb,YAAY,EACZ,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE;AACjB;AACAA,IAAAA,IAAI,KAAKC,qBAAU,CAACO,mBAAmB,IAAI,CAAA,SAAA,EAAYR,IAAI,CAAA,CAAE,EAC7D,cAAc,EACdI,SAAS,CACT;AAAAD,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd;;"}

package/build/Display/Display.mjs

@@ -34,7 +34,9 @@ function Display({
 }) {
   return /*#__PURE__*/jsx(Heading, {
     id: id,
-    className: clsx('np-display', `np-text-${type}`, 'text-primary', className),
+    className: clsx('np-display', `np-text-${type}`,
+    // display-extra-large has no locale-aware equivalent
+    type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/Display/Display.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.mjs","sources":["../../src/Display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\nexport type DisplayProps = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: DisplayProps) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAE,CACW,EAAA;EACb,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA;AAAQ,GACF,CAAC;AAEd;;"}
+{"version":3,"file":"Display.mjs","sources":["../../src/Display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\nexport type DisplayProps = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: DisplayProps) {\n  return (\n    <Heading\n      id={id}\n      className={clsx(\n        'np-display',\n        `np-text-${type}`,\n        // display-extra-large has no locale-aware equivalent\n        type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`,\n        'text-primary',\n        className,\n      )}\n    >\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx","DISPLAY_EXTRA_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAE,CACW,EAAA;EACb,oBACEC,GAAA,CAACP,OAAO,EAAA;AACNM,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,SAAS,EAAEG,IAAI,CACb,YAAY,EACZ,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE;AACjB;AACAA,IAAAA,IAAI,KAAKC,UAAU,CAACO,mBAAmB,IAAI,CAAA,SAAA,EAAYR,IAAI,CAAA,CAAE,EAC7D,cAAc,EACdI,SAAS,CACT;AAAAD,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd;;"}

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js

@@ -232,7 +232,7 @@ const AmountInput = ({
     className: "wds-amount-input-container",
     dir: "ltr",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: clsx.clsx('wds-amount-input-input-container', 'np-text-display-large--forced'),
+      className: clsx.clsx('wds-amount-input-input-container'),
       style: style,
       children: [/*#__PURE__*/jsxRuntime.jsx("input", {
         ref: ref,

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.js","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype AmountInputProps = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: AmountInputProps) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\" dir=\"ltr\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          dir=\"auto\"\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","dir","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}
+{"version":3,"file":"AmountInput.js","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype AmountInputProps = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: AmountInputProps) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\" dir=\"ltr\">\n      <div className={clsx('wds-amount-input-input-container')} style={style}>\n        <input\n          ref={ref}\n          dir=\"auto\"\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","dir","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs

@@ -230,7 +230,7 @@ const AmountInput = ({
     className: "wds-amount-input-container",
     dir: "ltr",
     children: /*#__PURE__*/jsxs("div", {
-      className: clsx('wds-amount-input-input-container', 'np-text-display-large--forced'),
+      className: clsx('wds-amount-input-input-container'),
       style: style,
       children: [/*#__PURE__*/jsx("input", {
         ref: ref,