@transferwise/components 46.166.0 → 46.167.0

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

package/build/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  /**\n   * Vertical padding of the list item, in pixels.\n   * @default 12\n   */\n  paddingY?: 12 | 24;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  paddingY = 12,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            'wds-list-item-paddingY-24': paddingY === 24,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  /**\n   * Vertical padding of the list item, in pixels.\n   * @default 12\n   */\n  paddingY?: 8 | 12 | 16 | 24;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  paddingY = 12,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            'wds-list-item-paddingY-8': paddingY === 8,\n            'wds-list-item-paddingY-16': paddingY === 16,\n            'wds-list-item-paddingY-24': paddingY === 24,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}