@transferwise/components 0.0.0-experimental-db6cf60 → 0.0.0-experimental-4678400

package/build/CardContainer/CardContainer.mjs

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

package/build/CardContainer/CardContainer.mjs.map

@@ -1 +0,0 @@
-{"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: compose a `Header`\n * and any other content as children, and the card stacks them with no gap between them.\n */\nconst CardContainer = forwardRef<HTMLElement, CardContainerProps>(\n  ({ spotlight, children, as: Element = 'section', className, ...props }, ref) => {\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          className,\n        )}\n        {...props}\n      >\n        {children}\n\n        {spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-card-container__border\">\n            <rect />\n          </svg>\n        )}\n      </Element>\n    );\n  },\n);\n\nCardContainer.displayName = 'CardContainer';\n\nexport default CardContainer;\n"],"names":["CardContainer","forwardRef","spotlight","children","as","Element","className","props","ref","_jsxs","clsx","_jsx","displayName"],"mappings":";;;;AASA,MAAMA,aAAa,gBAAGC,UAAU,CAC9B,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,EAAE,EAAEC,OAAO,GAAG,SAAS;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAE,EAAEC,GAAG,KAAI;EAC7E,oBACEC,IAAA,CAACJ,OAAO,EAAA;AACNG,IAAAA,GAAG,EAAEA,GAA+C;AACpDF,IAAAA,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpBR,SAAS,IAAI,CAAA,oBAAA,EAAuBA,SAAS,CAAA,CAAE,EAC/CI,SAAS,CACT;AAAA,IAAA,GACEC,KAAK;AAAAJ,IAAAA,QAAA,GAERA,QAAQ,EAERD,SAAS,KAAK,UAAU,iBACvBS,GAAA,CAAA,KAAA,EAAA;AAAK,MAAA,aAAA,EAAY,MAAM;AAACL,MAAAA,SAAS,EAAC,4BAA4B;MAAAH,QAAA,eAC5DQ,GAAA,CAAA,MAAA,EAAA,EAAK;AACP,KAAK,CACN;AAAA,GACM,CAAC;AAEd,CAAC;AAGHX,aAAa,CAACY,WAAW,GAAG,eAAe;;"}

package/build/Header/HeaderActionButton.js

@@ -1,70 +0,0 @@
-'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 `HeaderActionButton` 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 isHeaderActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/React.isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
-/** Renders a `HeaderActionButton` at the emphasis of the slot it was passed to. */
-const HeaderActionButtonComponent = function HeaderActionButton({
-  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,
-    "data-testid": dataTestId,
-    onClick: onClick,
-    children: label
-  });
-};
-
-exports.default = HeaderActionButtonComponent;
-exports.isHeaderActionButton = isHeaderActionButton;
-//# sourceMappingURL=HeaderActionButton.js.map

package/build/Header/HeaderActionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderActionButton.js","sources":["../../src/Header/HeaderActionButton.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 `HeaderActionButton` was passed to, which is what determines its emphasis. */\nexport type HeaderActionSlot = 'action' | 'actionSecondary';\n\ntype HeaderActionButtonBase = 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 HeaderLabelledActionButton = HeaderActionButtonBase & {\n  label: ButtonProps['children'];\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 HeaderIconActionButton = HeaderActionButtonBase & {\n  label?: never;\n  icon: ReactNode;\n  'aria-label': string;\n};\n\n/**\n * An action the `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 HeaderActionButton = HeaderLabelledActionButton | HeaderIconActionButton;\n\nconst BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'secondary-neutral',\n} as const satisfies Record<HeaderActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'tertiary',\n} as const satisfies Record<HeaderActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `HeaderActionButton` 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 isHeaderActionButton = (value: unknown): value is HeaderActionButton =>\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 `HeaderActionButton` at the emphasis of the slot it was passed to. */\nconst HeaderActionButtonComponent = function HeaderActionButton({\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: HeaderActionButton;\n  slot: HeaderActionSlot;\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      data-testid={dataTestId}\n      onClick={onClick}\n    >\n      {label}\n    </Button>\n  );\n};\n\nexport default HeaderActionButtonComponent;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isHeaderActionButton","value","isValidElement","Array","isArray","HeaderActionButtonComponent","HeaderActionButton","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;;;;;AAmDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC0C;AAE7D,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CACuD;AAE1E;;;AAGG;AACI,MAAME,oBAAoB,GAAIC,KAAc,IACjD,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,2BAA2B,GAAG,SAASC,kBAAkBA,CAAC;AAC9DT,EAAAA,MAAM,EAAE;IACNU,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,EAAErB,oBAAoB,CAACgB,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,EAAExB,eAAe,CAACmB,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;AAAExB,MAAAA,KAAK,EAAEO;AAAI,KAAE,GAAGQ,SAAU;AAC3D,IAAA,aAAA,EAAaN,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;;"}

package/build/Header/HeaderActionButton.mjs

@@ -1,65 +0,0 @@
-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 `HeaderActionButton` 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 isHeaderActionButton = value => typeof value === 'object' && value !== null && ! /*#__PURE__*/isValidElement(value) && !Array.isArray(value) && ('label' in value || 'icon' in value);
-/** Renders a `HeaderActionButton` at the emphasis of the slot it was passed to. */
-const HeaderActionButtonComponent = function HeaderActionButton({
-  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,
-    "data-testid": dataTestId,
-    onClick: onClick,
-    children: label
-  });
-};
-
-export { HeaderActionButtonComponent as default, isHeaderActionButton };
-//# sourceMappingURL=HeaderActionButton.mjs.map

package/build/Header/HeaderActionButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderActionButton.mjs","sources":["../../src/Header/HeaderActionButton.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 `HeaderActionButton` was passed to, which is what determines its emphasis. */\nexport type HeaderActionSlot = 'action' | 'actionSecondary';\n\ntype HeaderActionButtonBase = 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 HeaderLabelledActionButton = HeaderActionButtonBase & {\n  label: ButtonProps['children'];\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 HeaderIconActionButton = HeaderActionButtonBase & {\n  label?: never;\n  icon: ReactNode;\n  'aria-label': string;\n};\n\n/**\n * An action the `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 HeaderActionButton = HeaderLabelledActionButton | HeaderIconActionButton;\n\nconst BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'secondary-neutral',\n} as const satisfies Record<HeaderActionSlot, ButtonPriority>;\n\nconst ICON_BUTTON_PRIORITY = {\n  action: 'secondary',\n  actionSecondary: 'tertiary',\n} as const satisfies Record<HeaderActionSlot, IconButtonProps['priority']>;\n\n/**\n * Tells a `HeaderActionButton` 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 isHeaderActionButton = (value: unknown): value is HeaderActionButton =>\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 `HeaderActionButton` at the emphasis of the slot it was passed to. */\nconst HeaderActionButtonComponent = function HeaderActionButton({\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: HeaderActionButton;\n  slot: HeaderActionSlot;\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      data-testid={dataTestId}\n      onClick={onClick}\n    >\n      {label}\n    </Button>\n  );\n};\n\nexport default HeaderActionButtonComponent;\n"],"names":["BUTTON_PRIORITY","action","actionSecondary","ICON_BUTTON_PRIORITY","isHeaderActionButton","value","isValidElement","Array","isArray","HeaderActionButtonComponent","HeaderActionButton","label","icon","ariaLabel","dataTestId","href","target","onClick","disabled","slot","undefined","_jsx","IconButton","size","priority","children","Button","v2","addonEnd","type"],"mappings":";;;;;AAmDA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CAC0C;AAE7D,MAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,eAAe,EAAE;CACuD;AAE1E;;;AAGG;AACI,MAAME,oBAAoB,GAAIC,KAAc,IACjD,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,2BAA2B,GAAG,SAASC,kBAAkBA,CAAC;AAC9DT,EAAAA,MAAM,EAAE;IACNU,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,EAAErB,oBAAoB,CAACgB,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,EAAExB,eAAe,CAACmB,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;AAAExB,MAAAA,KAAK,EAAEO;AAAI,KAAE,GAAGQ,SAAU;AAC3D,IAAA,aAAA,EAAaN,UAAW;AACxBG,IAAAA,OAAO,EAAEA,OAAQ;AAAAQ,IAAAA,QAAA,EAEhBd;AAAK,GACA,CAAC;AAEb;;"}

package/build/styles/CardContainer/CardContainer.css

@@ -1,78 +0,0 @@
-.wds-card-container {
-  /**
-   * There is no shadow or elevation token in @transferwise/neptune-tokens, so the active
-   * spotlight's resting shadow is component-scoped for now, the way PromoCard scopes
-   * `--Card-box-shadow`. The value is the "Module shadow" effect style from Figma: `#0e0f0c` at
-   * 4%, kept literal so it doesn't drift with a theme's tokens. Collapses to a token reference
-   * once one is minted.
-   */
-  --CardContainer-shadow-color: rgba(14, 15, 12, 0.04);
-  --CardContainer-shadow: 0 2px 12px var(--CardContainer-shadow-color), 0 2px 32px var(--CardContainer-shadow-color);
-  --CardContainer-background-color: var(--color-background-screen);
-  --CardContainer-border-color: var(--color-border-neutral);
-  --CardContainer-border-radius: var(--radius-large);
-  --CardContainer-padding-block: var(--size-8);
-  --CardContainer-padding-inline: var(--size-16);
-  --CardContainer-header-spacing: var(--size-8);
-  background-color: var(--CardContainer-background-color);
-  border: 1px solid var(--CardContainer-border-color);
-  border-radius: var(--CardContainer-border-radius);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding-block: var(--CardContainer-padding-block);
-  padding-inline: var(--CardContainer-padding-inline);
-  inline-size: 100%;
-}
-@media (min-width: 840px) {
-  .wds-card-container {
-    --CardContainer-padding-block: var(--size-16);
-    --CardContainer-padding-inline: var(--size-24);
-  }
-}
-.wds-card-container > .np-header {
-  align-items: center;
-  border-block-end: 0;
-  grid-template-rows: minmax(var(--size-32), auto);
-  margin: 0;
-  padding: 0;
-}
-.wds-card-container > .np-header:not(:last-child) {
-  margin-block-end: var(--CardContainer-header-spacing);
-}
-.wds-card-container > .np-header.np-header--with-actions > .np-header__title {
-  align-items: center;
-  display: grid;
-  min-block-size: var(--size-32);
-}
-.wds-card-container--active {
-  --CardContainer-background-color: var(--color-background-elevated);
-  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
-}
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--bright-green):not(.np-theme-personal--forest-green):not(.np-theme-business--dark):not(.np-theme-business--bright-green):not(.np-theme-business--forest-green):not(.np-theme-platform--forest-green) .wds-card-container--active {
-  box-shadow: var(--CardContainer-shadow);
-}
-.wds-card-container--inactive {
-  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-  --CardContainer-border-color: transparent;
-  position: relative;
-}
-.wds-card-container__border {
-  block-size: calc(100% + 2px);
-  inset: -1px;
-  pointer-events: none;
-  position: absolute;
-  inline-size: calc(100% + 2px);
-}
-.wds-card-container__border rect {
-  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
-  fill: none;
-  block-size: calc(100% - 1px);
-  rx: calc(var(--CardContainer-border-radius) - 0.5px);
-  ry: calc(var(--CardContainer-border-radius) - 0.5px);
-  stroke: var(--color-border-neutral);
-  stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
-  inline-size: calc(100% - 1px);
-  x: 0.5px;
-  y: 0.5px;
-}

package/build/types/CardContainer/CardContainer.d.ts

@@ -1,8 +0,0 @@
-import type { CardContainerProps } from './CardContainer.types';
-/**
- * A bounded surface that groups related content. It has no slots of its own: compose a `Header`
- * and any other content as children, and the card stacks them with no gap between them.
- */
-declare const CardContainer: import("react").ForwardRefExoticComponent<CardContainerProps & import("react").RefAttributes<HTMLElement>>;
-export default CardContainer;
-//# sourceMappingURL=CardContainer.d.ts.map

package/build/types/CardContainer/CardContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardContainer.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/CardContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;GAGG;AACH,QAAA,MAAM,aAAa,4GAsBlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/build/types/CardContainer/CardContainer.types.d.ts

@@ -1,32 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-/**
- * Highlights the card, matching `ListItem`'s `spotlight`.
- *
- * - `active` — live content the user can act on. Raised, with a soft shadow and a hairline border.
- * - `inactive` — a feature the user has not set up yet. Recessed, with a dashed stroke.
- *
- * Without a spotlight the card is flat, with a solid stroke, for content that is present but not
- * actionable.
- */
-export type CardContainerSpotlight = 'active' | 'inactive';
-export interface CardContainerProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * Highlights the card as live content (`active`) or as a feature not set up yet (`inactive`).
-     * Leave unset for a flat card.
-     * @default undefined
-     */
-    spotlight?: CardContainerSpotlight;
-    /**
-     * Content, stacked with no gap. A `Header` is spaced from the content after it.
-     * @default undefined
-     */
-    children?: ReactNode;
-    /**
-     * Element rendered as the root.
-     * @default 'section'
-     */
-    as?: 'section' | 'div' | 'article';
-    className?: string;
-    'data-testid'?: string;
-}
-//# sourceMappingURL=CardContainer.types.d.ts.map

package/build/types/CardContainer/CardContainer.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardContainer.types.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/CardContainer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE;;;;OAIG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/build/types/CardContainer/_stories/helpers.d.ts

@@ -1,3 +0,0 @@
-export declare const SampleContent: () => import("react").JSX.Element;
-export declare const CardsList: () => import("react").JSX.Element;
-//# sourceMappingURL=helpers.d.ts.map

package/build/types/CardContainer/_stories/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/CardContainer/_stories/helpers.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,mCAKzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAoCrB,CAAC"}

package/build/types/CardContainer/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './CardContainer';
-export type { CardContainerProps, CardContainerSpotlight } from './CardContainer.types';
-//# sourceMappingURL=index.d.ts.map

package/build/types/CardContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CardContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}

package/build/types/Header/HeaderActionButton.d.ts

@@ -1,53 +0,0 @@
-import { type MouseEventHandler, type ReactNode } from 'react';
-import type { ButtonProps } from '../Button/Button.types';
-/** The action slot a `HeaderActionButton` was passed to, which is what determines its emphasis. */
-export type HeaderActionSlot = 'action' | 'actionSecondary';
-type HeaderActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {
-    /**
-     * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`
-     * depending on whether `href` is set.
-     * @default undefined
-     */
-    onClick?: MouseEventHandler<HTMLElement>;
-    /**
-     * Rendered after `label`, or as the only content of an unlabelled action.
-     * Size it yourself — 16px is expected in both cases.
-     * @default undefined
-     */
-    icon?: ReactNode;
-    'data-testid'?: string;
-};
-/** An action with a visible label, rendered as a small button. */
-type HeaderLabelledActionButton = HeaderActionButtonBase & {
-    label: ButtonProps['children'];
-    /** @default undefined */
-    'aria-label'?: string;
-};
-/**
- * An action with no visible label, rendered as a 32px icon button. The icon is
- * the only thing on screen and `aria-label` is the only accessible name, so
- * both are required.
- */
-type HeaderIconActionButton = HeaderActionButtonBase & {
-    label?: never;
-    icon: ReactNode;
-    'aria-label': string;
-};
-/**
- * An action the `Header` renders as a button. With a `label` it is a small `Button`; without
- * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not
- * part of the object — it comes from the slot the action is passed to.
- */
-export type HeaderActionButton = HeaderLabelledActionButton | HeaderIconActionButton;
-/**
- * Tells a `HeaderActionButton` 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.
- */
-export declare const isHeaderActionButton: (value: unknown) => value is HeaderActionButton;
-/** Renders a `HeaderActionButton` at the emphasis of the slot it was passed to. */
-declare const HeaderActionButtonComponent: ({ action: { label, icon, "aria-label": ariaLabel, "data-testid": dataTestId, href, target, onClick, disabled, }, slot, }: {
-    action: HeaderActionButton;
-    slot: HeaderActionSlot;
-}) => import("react").JSX.Element;
-export default HeaderActionButtonComponent;
-//# sourceMappingURL=HeaderActionButton.d.ts.map

package/build/types/Header/HeaderActionButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderActionButton.d.ts","sourceRoot":"","sources":["../../../src/Header/HeaderActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAG1E,mGAAmG;AACnG,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AAE5D,KAAK,sBAAsB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,GAAG;IAChF;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAEzC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,kEAAkE;AAClE,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAC/B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,KAAK,sBAAsB,GAAG,sBAAsB,GAAG;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,0BAA0B,GAAG,sBAAsB,CAAC;AAYrF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,kBAKxB,CAAC;AAExC,mFAAmF;AACnF,QAAA,MAAM,2BAA2B,GAA+B,0HAY7D;IACD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;CACxB,gCAkCA,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/src/CardContainer/CardContainer.css

@@ -1,78 +0,0 @@
-.wds-card-container {
-  /**
-   * There is no shadow or elevation token in @transferwise/neptune-tokens, so the active
-   * spotlight's resting shadow is component-scoped for now, the way PromoCard scopes
-   * `--Card-box-shadow`. The value is the "Module shadow" effect style from Figma: `#0e0f0c` at
-   * 4%, kept literal so it doesn't drift with a theme's tokens. Collapses to a token reference
-   * once one is minted.
-   */
-  --CardContainer-shadow-color: rgba(14, 15, 12, 0.04);
-  --CardContainer-shadow: 0 2px 12px var(--CardContainer-shadow-color), 0 2px 32px var(--CardContainer-shadow-color);
-  --CardContainer-background-color: var(--color-background-screen);
-  --CardContainer-border-color: var(--color-border-neutral);
-  --CardContainer-border-radius: var(--radius-large);
-  --CardContainer-padding-block: var(--size-8);
-  --CardContainer-padding-inline: var(--size-16);
-  --CardContainer-header-spacing: var(--size-8);
-  background-color: var(--CardContainer-background-color);
-  border: 1px solid var(--CardContainer-border-color);
-  border-radius: var(--CardContainer-border-radius);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding-block: var(--CardContainer-padding-block);
-  padding-inline: var(--CardContainer-padding-inline);
-  inline-size: 100%;
-}
-@media (min-width: 840px) {
-  .wds-card-container {
-    --CardContainer-padding-block: var(--size-16);
-    --CardContainer-padding-inline: var(--size-24);
-  }
-}
-.wds-card-container > .np-header {
-  align-items: center;
-  border-block-end: 0;
-  grid-template-rows: minmax(var(--size-32), auto);
-  margin: 0;
-  padding: 0;
-}
-.wds-card-container > .np-header:not(:last-child) {
-  margin-block-end: var(--CardContainer-header-spacing);
-}
-.wds-card-container > .np-header.np-header--with-actions > .np-header__title {
-  align-items: center;
-  display: grid;
-  min-block-size: var(--size-32);
-}
-.wds-card-container--active {
-  --CardContainer-background-color: var(--color-background-elevated);
-  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
-}
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--bright-green):not(.np-theme-personal--forest-green):not(.np-theme-business--dark):not(.np-theme-business--bright-green):not(.np-theme-business--forest-green):not(.np-theme-platform--forest-green) .wds-card-container--active {
-  box-shadow: var(--CardContainer-shadow);
-}
-.wds-card-container--inactive {
-  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-  --CardContainer-border-color: transparent;
-  position: relative;
-}
-.wds-card-container__border {
-  block-size: calc(100% + 2px);
-  inset: -1px;
-  pointer-events: none;
-  position: absolute;
-  inline-size: calc(100% + 2px);
-}
-.wds-card-container__border rect {
-  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
-  fill: none;
-  block-size: calc(100% - 1px);
-  rx: calc(var(--CardContainer-border-radius) - 0.5px);
-  ry: calc(var(--CardContainer-border-radius) - 0.5px);
-  stroke: var(--color-border-neutral);
-  stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
-  inline-size: calc(100% - 1px);
-  x: 0.5px;
-  y: 0.5px;
-}

package/src/CardContainer/CardContainer.less

@@ -1,111 +0,0 @@
-.wds-card-container {
-  /**
-   * There is no shadow or elevation token in @transferwise/neptune-tokens, so the active
-   * spotlight's resting shadow is component-scoped for now, the way PromoCard scopes
-   * `--Card-box-shadow`. The value is the "Module shadow" effect style from Figma: `#0e0f0c` at
-   * 4%, kept literal so it doesn't drift with a theme's tokens. Collapses to a token reference
-   * once one is minted.
-   */
-  --CardContainer-shadow-color: rgb(14 15 12 / 4%);
-  --CardContainer-shadow:
-    0 2px 12px var(--CardContainer-shadow-color), 0 2px 32px var(--CardContainer-shadow-color);
-  --CardContainer-background-color: var(--color-background-screen);
-  --CardContainer-border-color: var(--color-border-neutral);
-  --CardContainer-border-radius: var(--radius-large);
-  --CardContainer-padding-block: var(--size-8);
-  --CardContainer-padding-inline: var(--size-16);
-  --CardContainer-header-spacing: var(--size-8);
-
-  background-color: var(--CardContainer-background-color);
-  border: 1px solid var(--CardContainer-border-color);
-  border-radius: var(--CardContainer-border-radius);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: var(--CardContainer-padding-block) var(--CardContainer-padding-inline);
-  width: 100%;
-
-  @media (--screen-md) {
-    --CardContainer-padding-block: var(--size-16);
-    --CardContainer-padding-inline: var(--size-24);
-  }
-
-  // A `Header` composed into the card gives up its own group border and spacing for the card's.
-  // It is the only child spaced from the content after it; everything else stacks flush.
-  // Its title row is at least as tall as the 32px action buttons, so cards side by side line up
-  // their titles and content whether or not their headers have actions, or have stacked them.
-  > .np-header {
-    align-items: center;
-    border-bottom: 0;
-    grid-template-rows: minmax(var(--size-32), auto);
-    margin: 0;
-    padding: 0;
-
-    &:not(:last-child) {
-      margin-bottom: var(--CardContainer-header-spacing);
-    }
-
-    // With an action corner the header is a wrapping flex row, so the title sets its own row.
-    &.np-header--with-actions > .np-header__title {
-      align-items: center;
-      display: grid;
-      min-height: var(--size-32);
-    }
-  }
-
-  &--active {
-    --CardContainer-background-color: var(--color-background-elevated);
-    // The raised surface's shadow already separates it, so its border is a softer hairline.
-    --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
-
-    // The shadow is only designed for the light themes. Every theme root has `np-theme-personal`,
-    // so a light theme is one without any of the dark or green theme classes.
-    .np-theme-personal:not(
-        .np-theme-personal--dark,
-        .np-theme-personal--bright-green,
-        .np-theme-personal--forest-green,
-        .np-theme-business--dark,
-        .np-theme-business--bright-green,
-        .np-theme-business--forest-green,
-        .np-theme-platform--forest-green
-      )
-      & {
-      box-shadow: var(--CardContainer-shadow);
-    }
-  }
-
-  &--inactive {
-    --CardContainer-background-color: color-mix(
-      in srgb,
-      var(--color-background-neutral) 25%,
-      transparent
-    );
-    --CardContainer-border-color: transparent;
-
-    position: relative;
-  }
-
-  // Same treatment as ListItem's inactive spotlight: CSS `dashed` borders have a browser-chosen
-  // dash length, so the 6px/6px dashes are an SVG stroke that sits over the transparent border.
-  &__border {
-    height: calc(100% + 2px);
-    inset: -1px;
-    pointer-events: none;
-    position: absolute;
-    width: calc(100% + 2px);
-
-    rect {
-      --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
-
-      fill: none;
-      height: calc(100% - 1px);
-      rx: calc(var(--CardContainer-border-radius) - 0.5px);
-      ry: calc(var(--CardContainer-border-radius) - 0.5px);
-      stroke: var(--color-border-neutral);
-      stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
-      width: calc(100% - 1px);
-      x: 0.5px;
-      y: 0.5px;
-    }
-  }
-}