@transferwise/components 46.166.0 → 46.168.0

package/README.md

@@ -55,7 +55,7 @@ mockResizeObserver(vi); // With Vitest
 
 ## Documentation
 
-Visit the [docs](https://transferwise.github.io/neptune-web/about/Home) for information on getting started, usage information and examples for each component.
+Visit the [docs](https://storybook.wise.design/) for information on getting started, usage information and examples for each component.
 
 ## Contributing
 

package/build/CardContainer/CardContainer.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const CardContainer = /*#__PURE__*/React.forwardRef(({
+  spotlight,
+  padding = 'md',
+  interactive = false,
+  children,
+  as: Element = 'div',
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
+    ref: ref,
+    className: clsx.clsx('wds-card-container', spotlight && `wds-card-container--${spotlight}`, padding === 'none' && 'wds-card-container--padding-none', interactive && 'wds-card-container--interactive', className),
+    ...props,
+    children: [children, spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("span", {
+      "aria-hidden": "true",
+      className: "wds-card-container__border",
+      children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
+      })
+    })]
+  });
+});
+CardContainer.displayName = 'CardContainer';
+
+exports.default = CardContainer;
+//# sourceMappingURL=CardContainer.js.map

package/build/CardContainer/CardContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContainer.js","sources":["../../src/CardContainer/CardContainer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { CardContainerProps } from './CardContainer.types';\n\n/**\n * A bounded surface that groups related content. It has no slots of its own: children are stacked\n * with no gap between them. For a card with a title and actions, use `CardWidget`.\n */\nconst CardContainer = forwardRef<HTMLElement, CardContainerProps>(\n  (\n    {\n      spotlight,\n      padding = 'md',\n      interactive = false,\n      children,\n      as: Element = 'div',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Element\n        ref={ref as React.Ref<HTMLElement & HTMLDivElement>}\n        className={clsx(\n          'wds-card-container',\n          spotlight && `wds-card-container--${spotlight}`,\n          padding === 'none' && 'wds-card-container--padding-none',\n          interactive && 'wds-card-container--interactive',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n\n        {spotlight === 'inactive' && (\n          <span aria-hidden=\"true\" className=\"wds-card-container__border\">\n            <svg>\n              <rect />\n            </svg>\n          </span>\n        )}\n      </Element>\n    );\n  },\n);\n\nCardContainer.displayName = 'CardContainer';\n\nexport default CardContainer;\n"],"names":["CardContainer","forwardRef","spotlight","padding","interactive","children","as","Element","className","props","ref","_jsxs","clsx","_jsx","displayName"],"mappings":";;;;;;;;AASA,MAAMA,aAAa,gBAAGC,gBAAU,CAC9B,CACE;EACEC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAG,KAAK;EACnBC,QAAQ;EACRC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,SAAS;EACT,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;EACF,oBACEC,eAAA,CAACJ,OAAO,EAAA;AACNG,IAAAA,GAAG,EAAEA,GAA+C;IACpDF,SAAS,EAAEI,SAAI,CACb,oBAAoB,EACpBV,SAAS,IAAI,CAAA,oBAAA,EAAuBA,SAAS,CAAA,CAAE,EAC/CC,OAAO,KAAK,MAAM,IAAI,kCAAkC,EACxDC,WAAW,IAAI,iCAAiC,EAChDI,SAAS,CACT;AAAA,IAAA,GACEC,KAAK;AAAAJ,IAAAA,QAAA,GAERA,QAAQ,EAERH,SAAS,KAAK,UAAU,iBACvBW,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,MAAM;AAACL,MAAAA,SAAS,EAAC,4BAA4B;AAAAH,MAAAA,QAAA,eAC7DQ,cAAA,CAAA,KAAA,EAAA;QAAAR,QAAA,eACEQ,cAAA,CAAA,MAAA,EAAA,EAAK;OACF;AACP,KAAM,CACP;AAAA,GACM,CAAC;AAEd,CAAC;AAGHb,aAAa,CAACc,WAAW,GAAG,eAAe;;"}

package/build/CardContainer/CardContainer.mjs

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const CardContainer = /*#__PURE__*/forwardRef(({
+  spotlight,
+  padding = 'md',
+  interactive = false,
+  children,
+  as: Element = 'div',
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(Element, {
+    ref: ref,
+    className: clsx('wds-card-container', spotlight && `wds-card-container--${spotlight}`, padding === 'none' && 'wds-card-container--padding-none', interactive && 'wds-card-container--interactive', className),
+    ...props,
+    children: [children, spotlight === 'inactive' && /*#__PURE__*/jsx("span", {
+      "aria-hidden": "true",
+      className: "wds-card-container__border",
+      children: /*#__PURE__*/jsx("svg", {
+        children: /*#__PURE__*/jsx("rect", {})
+      })
+    })]
+  });
+});
+CardContainer.displayName = 'CardContainer';
+
+export { CardContainer as default };
+//# sourceMappingURL=CardContainer.mjs.map

package/build/CardContainer/CardContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContainer.mjs","sources":["../../src/CardContainer/CardContainer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { CardContainerProps } from './CardContainer.types';\n\n/**\n * A bounded surface that groups related content. It has no slots of its own: children are stacked\n * with no gap between them. For a card with a title and actions, use `CardWidget`.\n */\nconst CardContainer = forwardRef<HTMLElement, CardContainerProps>(\n  (\n    {\n      spotlight,\n      padding = 'md',\n      interactive = false,\n      children,\n      as: Element = 'div',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Element\n        ref={ref as React.Ref<HTMLElement & HTMLDivElement>}\n        className={clsx(\n          'wds-card-container',\n          spotlight && `wds-card-container--${spotlight}`,\n          padding === 'none' && 'wds-card-container--padding-none',\n          interactive && 'wds-card-container--interactive',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n\n        {spotlight === 'inactive' && (\n          <span aria-hidden=\"true\" className=\"wds-card-container__border\">\n            <svg>\n              <rect />\n            </svg>\n          </span>\n        )}\n      </Element>\n    );\n  },\n);\n\nCardContainer.displayName = 'CardContainer';\n\nexport default CardContainer;\n"],"names":["CardContainer","forwardRef","spotlight","padding","interactive","children","as","Element","className","props","ref","_jsxs","clsx","_jsx","displayName"],"mappings":";;;;AASA,MAAMA,aAAa,gBAAGC,UAAU,CAC9B,CACE;EACEC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAG,KAAK;EACnBC,QAAQ;EACRC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,SAAS;EACT,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;EACF,oBACEC,IAAA,CAACJ,OAAO,EAAA;AACNG,IAAAA,GAAG,EAAEA,GAA+C;IACpDF,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpBV,SAAS,IAAI,CAAA,oBAAA,EAAuBA,SAAS,CAAA,CAAE,EAC/CC,OAAO,KAAK,MAAM,IAAI,kCAAkC,EACxDC,WAAW,IAAI,iCAAiC,EAChDI,SAAS,CACT;AAAA,IAAA,GACEC,KAAK;AAAAJ,IAAAA,QAAA,GAERA,QAAQ,EAERH,SAAS,KAAK,UAAU,iBACvBW,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,MAAM;AAACL,MAAAA,SAAS,EAAC,4BAA4B;AAAAH,MAAAA,QAAA,eAC7DQ,GAAA,CAAA,KAAA,EAAA;QAAAR,QAAA,eACEQ,GAAA,CAAA,MAAA,EAAA,EAAK;OACF;AACP,KAAM,CACP;AAAA,GACM,CAAC;AAEd,CAAC;AAGHb,aAAa,CAACc,WAAW,GAAG,eAAe;;"}

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/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n  Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type = Typography.LINK_DEFAULT,\n  'aria-label': ariaLabel,\n  onClick,\n  disabled,\n  ...props\n}: LinkProps) => {\n  const { formatMessage } = useIntl();\n  const isButton = Boolean(onClick) && href === undefined;\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n      'np-link--disabled': disabled,\n    },\n    className,\n  );\n\n  return isButton ? (\n    <PrimitiveButton\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={clsx(classNames, 'btn-unstyled')}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </PrimitiveButton>\n  ) : (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,qBAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,cAAA,CAACC,uBAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,SAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,eAAA,CAACC,uBAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,cAAA,CAACK,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,qBAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;"}
+{"version":3,"file":"Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n  Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://storybook.wise.design/?path=/docs/typography-link--docs\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type = Typography.LINK_DEFAULT,\n  'aria-label': ariaLabel,\n  onClick,\n  disabled,\n  ...props\n}: LinkProps) => {\n  const { formatMessage } = useIntl();\n  const isButton = Boolean(onClick) && href === undefined;\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n      'np-link--disabled': disabled,\n    },\n    className,\n  );\n\n  return isButton ? (\n    <PrimitiveButton\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={clsx(classNames, 'btn-unstyled')}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </PrimitiveButton>\n  ) : (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,qBAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,cAAA,CAACC,uBAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,SAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,eAAA,CAACC,uBAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,cAAA,CAACK,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,qBAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;"}

package/build/Link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n  Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type = Typography.LINK_DEFAULT,\n  'aria-label': ariaLabel,\n  onClick,\n  disabled,\n  ...props\n}: LinkProps) => {\n  const { formatMessage } = useIntl();\n  const isButton = Boolean(onClick) && href === undefined;\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n      'np-link--disabled': disabled,\n    },\n    className,\n  );\n\n  return isButton ? (\n    <PrimitiveButton\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={clsx(classNames, 'btn-unstyled')}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </PrimitiveButton>\n  ) : (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,UAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,GAAA,CAACC,eAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,IAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,IAAA,CAACC,eAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,GAAA,CAACK,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,QAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;"}
+{"version":3,"file":"Link.mjs","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../Primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../Primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type LinkProps = PrimitiveAnchorProps &\n  Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://storybook.wise.design/?path=/docs/typography-link--docs\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type = Typography.LINK_DEFAULT,\n  'aria-label': ariaLabel,\n  onClick,\n  disabled,\n  ...props\n}: LinkProps) => {\n  const { formatMessage } = useIntl();\n  const isButton = Boolean(onClick) && href === undefined;\n  const isBlank = target === '_blank';\n\n  const classNames = clsx(\n    'np-link',\n    'd-inline-flex',\n    {\n      [`np-text-${type}`]: type,\n      'np-link--disabled': disabled,\n    },\n    className,\n  );\n\n  return isButton ? (\n    <PrimitiveButton\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={clsx(classNames, 'btn-unstyled')}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </PrimitiveButton>\n  ) : (\n    <PrimitiveAnchor\n      href={href}\n      target={target}\n      className={classNames}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </PrimitiveAnchor>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,UAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACE,KAAI;EACd,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,GAAA,CAACC,eAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,IAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,IAAA,CAACC,eAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,GAAA,CAACK,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,QAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;"}

package/build/ListItem/ListItem.js

@@ -154,6 +154,8 @@ const ListItem = ({
         'wds-list-item-interactive': isFullyInteractive,
         'wds-list-item-partially-interactive': isPartiallyInteractive,
         [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+        'wds-list-item-paddingY-8': paddingY === 8,
+        'wds-list-item-paddingY-16': paddingY === 16,
         'wds-list-item-paddingY-24': paddingY === 24,
         disabled: disabled && !isPartiallyInteractive,
         'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive