@transferwise/components 0.0.0-experimental-588e71a → 0.0.0-experimental-2c3eb65

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

@@ -1,53 +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';
-/**
- * - `md` — 8px, and 16px from the `md` breakpoint up.
- * - `none` — content runs to the card's edges.
- */
-export type CardContainerPadding = 'md' | 'none';
-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;
-    /**
-     * Space between the card's edge and its content. `none` lets content such as images or charts
-     * run to the card's edges, clipped to its rounded corners. Anything clipped at the edges
-     * includes focus rings, so use `none` for non-interactive content, and keep lists on `md`.
-     * @default 'md'
-     */
-    padding?: CardContainerPadding;
-    /**
-     * Content, stacked with no gap.
-     * @default undefined
-     */
-    children?: ReactNode;
-    /**
-     * Element rendered as the root.
-     * @default 'section'
-     */
-    as?: 'section' | 'div' | 'article';
-    /**
-     * Shows the card as hovered or pressed while a direct child link (with an `href`) or enabled
-     * button is, such as a link that fills the card, and as hovered while that child has keyboard
-     * focus. The rest of the card,
-     * and controls nested deeper, don't trigger the states, so the card is only shown as something
-     * to act on where it can be clicked.
-     * @default false
-     */
-    interactive?: boolean;
-    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;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE;;;;OAIG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IAEnC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,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, CardContainerPadding, } 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,EACV,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC"}

package/build/types/CardWidget/CardWidget.d.ts

@@ -1,10 +0,0 @@
-import type { CardWidgetProps } from './CardWidget.types';
-/**
- * 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.
- */
-declare const CardWidget: import("react").ForwardRefExoticComponent<CardWidgetProps & import("react").RefAttributes<HTMLElement>>;
-export default CardWidget;
-//# sourceMappingURL=CardWidget.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CardWidget.d.ts","sourceRoot":"","sources":["../../../src/CardWidget/CardWidget.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA6C5E;;;;;GAKG;AACH,QAAA,MAAM,UAAU,yGAmBf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/build/types/CardWidget/CardWidget.types.d.ts

@@ -1,55 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Heading } from '../common';
-import type { CardContainerProps } from '../CardContainer';
-import type { LinkProps } from '../Link';
-import type { CardWidgetActionButton } from './CardWidgetAction';
-/**
- * Props passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs)
- * that the title is rendered as. A trailing chevron is rendered automatically, so do not put one
- * in `title`.
- */
-export type CardWidgetTitleAction = Pick<LinkProps, 'href' | 'target' | 'onClick'>;
-export interface CardWidgetHeader {
-    /** The widget's title. */
-    title: ReactNode;
-    /**
-     * Heading element rendered for the title.
-     * @default 'h3'
-     */
-    as?: Heading;
-    /**
-     * Makes the title a link with a trailing chevron.
-     * @default undefined
-     */
-    titleAction?: CardWidgetTitleAction;
-    /**
-     * A `CardWidgetActionButton` object (with a `label` or an `icon`) renders a small button,
-     * anchored to the inline end. Any other node is rendered as given.
-     * @default undefined
-     */
-    action?: CardWidgetActionButton | ReactNode;
-    /**
-     * Second action, at a lower emphasis, rendered before `action`. Two is the maximum, to keep
-     * the title legible. Takes the same values as `action`, and keeps its lower emphasis when used
-     * on its own.
-     * @default undefined
-     */
-    actionSecondary?: CardWidgetActionButton | ReactNode;
-}
-/**
- * The widget always has the card's default padding, so its header and content line up, and its
- * states always follow its title link.
- */
-export interface CardWidgetProps extends Omit<CardContainerProps, 'padding' | 'interactive'> {
-    /**
-     * The widget's header: a title, optionally a link, and up to two actions.
-     * @default undefined
-     */
-    header?: CardWidgetHeader;
-    /**
-     * The widget's content, rendered under the header.
-     * @default undefined
-     */
-    children?: ReactNode;
-}
-//# sourceMappingURL=CardWidget.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CardWidget.types.d.ts","sourceRoot":"","sources":["../../../src/CardWidget/CardWidget.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AAEnF,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IAEb;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;IAEpC;;;;OAIG;IACH,MAAM,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAE5C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;CACtD;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,aAAa,CAAC;IAC1F;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/build/types/CardWidget/CardWidgetAction.d.ts

@@ -1,54 +0,0 @@
-import { type MouseEventHandler, type ReactNode } from 'react';
-import type { ButtonProps } from '../Button/Button.types';
-/** The action slot a `CardWidgetActionButton` was passed to, which is what determines its emphasis. */
-export type CardWidgetActionSlot = 'action' | 'actionSecondary';
-type CardWidgetActionButtonBase = 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 CardWidgetLabelledActionButton = CardWidgetActionButtonBase & {
-    /** Non-rendering values are excluded, so an unlabelled action has to meet the icon-only rules. */
-    label: Exclude<ButtonProps['children'], null | undefined | boolean>;
-    /** @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 CardWidgetIconActionButton = CardWidgetActionButtonBase & {
-    label?: never;
-    icon: ReactNode;
-    'aria-label': string;
-};
-/**
- * An action the `CardWidget` 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 CardWidgetActionButton = CardWidgetLabelledActionButton | CardWidgetIconActionButton;
-/**
- * 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.
- */
-export declare const isCardWidgetActionButton: (value: unknown) => value is CardWidgetActionButton;
-/** Renders a `CardWidgetActionButton` at the emphasis of the slot it was passed to. */
-declare const CardWidgetAction: ({ action: { label, icon, "aria-label": ariaLabel, "data-testid": dataTestId, href, target, onClick, disabled, }, slot, }: {
-    action: CardWidgetActionButton;
-    slot: CardWidgetActionSlot;
-}) => import("react").JSX.Element;
-export default CardWidgetAction;
-//# sourceMappingURL=CardWidgetAction.d.ts.map

package/build/types/CardWidget/CardWidgetAction.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardWidgetAction.d.ts","sourceRoot":"","sources":["../../../src/CardWidget/CardWidgetAction.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,uGAAuG;AACvG,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AAEhE,KAAK,0BAA0B,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,GAAG;IACpF;;;;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,8BAA8B,GAAG,0BAA0B,GAAG;IACjE,kGAAkG;IAClG,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;IACpE,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,KAAK,0BAA0B,GAAG,0BAA0B,GAAG;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,8BAA8B,GAAG,0BAA0B,CAAC;AAYjG;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,sBAK5B,CAAC;AAExC,uFAAuF;AACvF,QAAA,MAAM,gBAAgB,GAA6B,0HAYhD;IACD,MAAM,EAAE,sBAAsB,CAAC;IAC/B,IAAI,EAAE,oBAAoB,CAAC;CAC5B,gCAkCA,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,4 +0,0 @@
-export { default } from './CardWidget';
-export type { CardWidgetProps, CardWidgetHeader, CardWidgetTitleAction } from './CardWidget.types';
-export type { CardWidgetActionButton } from './CardWidgetAction';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CardWidget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACnG,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}

package/src/CardContainer/CardContainer.css

@@ -1,96 +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-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-16);
-  }
-}
-.wds-card-container--padding-none {
-  --CardContainer-padding-block: 0;
-  --CardContainer-padding-inline: 0;
-  overflow: clip;
-}
-.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);
-  border-width: 0;
-  padding-block: calc(var(--CardContainer-padding-block) + 1px);
-  padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
-  position: relative;
-}
-.wds-card-container--interactive:has(
-      > a[href]:hover,
-      > button:enabled:hover,
-      > a[href]:focus-visible,
-      > button:enabled:focus-visible
-    ).wds-card-container--active {
-  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
-}
-.wds-card-container--interactive:has(
-      > a[href]:hover,
-      > button:enabled:hover,
-      > a[href]:focus-visible,
-      > button:enabled:focus-visible
-    ).wds-card-container--inactive {
-  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
-  --CardContainer-border-color: var(--color-border-neutral);
-}
-.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
-  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.wds-card-container__border {
-  container-type: size;
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
-}
-.wds-card-container__border svg {
-  display: block;
-  block-size: 100%;
-  inline-size: 100%;
-}
-.wds-card-container__border rect {
-  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
-  --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
-  fill: none;
-  block-size: calc(100% - 1px);
-  rx: var(--CardContainer-border-stroke-radius);
-  ry: var(--CardContainer-border-stroke-radius);
-  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,164 +0,0 @@
-// The hover and pressed states, as mixins so CardWidget can apply them to the card when only its
-// title is hovered or pressed. Applied to the card's root.
-.wds-card-container-hover-state() {
-  // The active spotlight keeps its resting shadow, and its hairline border strengthens.
-  &.wds-card-container--active {
-    --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
-  }
-
-  // The inactive spotlight's fill takes its hover value, at the same 25% strength as at rest.
-  &.wds-card-container--inactive {
-    --CardContainer-background-color: color-mix(
-      in srgb,
-      var(--color-background-neutral-hover) 25%,
-      transparent
-    );
-  }
-}
-
-.wds-card-container-pressed-state() {
-  // The active spotlight keeps its resting shadow, and its border is at full strength.
-  &.wds-card-container--active {
-    --CardContainer-border-color: var(--color-border-neutral);
-  }
-
-  // The inactive spotlight's fill takes its pressed value, at the same 25% strength as at rest.
-  &.wds-card-container--inactive {
-    --CardContainer-background-color: color-mix(
-      in srgb,
-      var(--color-background-neutral-active) 25%,
-      transparent
-    );
-  }
-}
-
-.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-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-16);
-  }
-
-  // Set through the padding variables, so the `inactive` spotlight's padding still composes.
-  &--padding-none {
-    --CardContainer-padding-block: 0;
-    --CardContainer-padding-inline: 0;
-
-    // Full-bleed content has to follow the card's rounded corners. `overflow` leaves the card's
-    // own shadow alone, which `clip-path` would cut off.
-    overflow: clip;
-  }
-
-  &--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
-    );
-
-    // The dashed stroke is drawn inside the card instead of on a border, so the stroke isn't
-    // clipped with `padding="none"`. The padding takes the border's 1px, so content stays put.
-    border-width: 0;
-    padding: calc(var(--CardContainer-padding-block) + 1px)
-      calc(var(--CardContainer-padding-inline) + 1px);
-    position: relative;
-  }
-
-  // An `interactive` card follows its direct child link or button, such as a link that fills the
-  // card, so it only looks clickable where it can be clicked. Keyboard focus on the child shows the
-  // hover state too. A card without a spotlight has no hover or pressed state.
-  &--interactive:has(
-      > a[href]:hover,
-      > button:enabled:hover,
-      > a[href]:focus-visible,
-      > button:enabled:focus-visible
-    ) {
-    .wds-card-container-hover-state();
-  }
-
-  // Pressed state, while the same direct child is pressed. After the hover rule, so pressed wins
-  // while the pointer is down.
-  &--interactive:has(> a[href]:active, > button:enabled:active) {
-    .wds-card-container-pressed-state();
-  }
-
-  // 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 along the card's edge.
-  &__border {
-    // A size container, so the stroke's corner radius can be capped by the card's height. An SVG
-    // `rect` clamps `rx` and `ry` separately, which turns the corners of a card shorter than twice
-    // the radius into ellipses, where `border-radius` keeps them round.
-    container-type: size;
-    inset: 0;
-    pointer-events: none;
-    position: absolute;
-
-    svg {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
-    rect {
-      --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
-      --CardContainer-border-stroke-radius: calc(
-        min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px
-      );
-
-      fill: none;
-      height: calc(100% - 1px);
-      rx: var(--CardContainer-border-stroke-radius);
-      ry: var(--CardContainer-border-stroke-radius);
-      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;
-    }
-  }
-}

package/src/CardContainer/CardContainer.test.tsx

@@ -1,150 +0,0 @@
-import { render, screen, userEvent } from '../test-utils';
-import CardContainer from './CardContainer';
-import type { CardContainerSpotlight } from './CardContainer.types';
-
-describe('CardContainer', () => {
-  const content = 'Container content';
-
-  describe('rendering', () => {
-    it('renders children', () => {
-      render(<CardContainer>{content}</CardContainer>);
-      expect(screen.getByText(content)).toBeInTheDocument();
-    });
-
-    it('renders as a section by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      expect(screen.getByTestId('container').tagName).toBe('SECTION');
-    });
-
-    it.each(['div', 'article'] as const)('renders as %s when as is provided', (as) => {
-      render(
-        <CardContainer as={as} data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container').tagName).toBe(as.toUpperCase());
-    });
-
-    it('applies className to the root element', () => {
-      render(
-        <CardContainer className="custom-class" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container')).toHaveClass('wds-card-container', 'custom-class');
-    });
-
-    it('spreads unknown props onto the root element', () => {
-      render(
-        <CardContainer aria-label="Cards" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container')).toHaveAttribute('aria-label', 'Cards');
-    });
-  });
-
-  describe('padding', () => {
-    it('has no padding modifier by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      expect(screen.getByTestId('container')).not.toHaveClass('wds-card-container--padding-none');
-    });
-
-    it('renders the padding-none modifier', () => {
-      render(
-        <CardContainer padding="none" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container')).toHaveClass('wds-card-container--padding-none');
-    });
-
-    it('keeps the dashed border for the inactive spotlight without padding', () => {
-      render(
-        <CardContainer padding="none" spotlight="inactive" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(
-        screen.getByTestId('container').querySelector('.wds-card-container__border'),
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('spotlight', () => {
-    it('has no spotlight modifier by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      const root = screen.getByTestId('container');
-      expect(root).not.toHaveClass('wds-card-container--active');
-      expect(root).not.toHaveClass('wds-card-container--inactive');
-    });
-
-    it.each<CardContainerSpotlight>(['active', 'inactive'])(
-      'renders the %s spotlight modifier',
-      (spotlight) => {
-        render(
-          <CardContainer spotlight={spotlight} data-testid="container">
-            {content}
-          </CardContainer>,
-        );
-        expect(screen.getByTestId('container')).toHaveClass(`wds-card-container--${spotlight}`);
-      },
-    );
-
-    it('draws a decorative dashed border for the inactive spotlight', () => {
-      render(
-        <CardContainer spotlight="inactive" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(
-        screen.getByTestId('container').querySelector('.wds-card-container__border'),
-      ).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    it.each<CardContainerSpotlight | undefined>(['active', undefined])(
-      'draws no dashed border for spotlight %s',
-      (spotlight) => {
-        render(
-          <CardContainer spotlight={spotlight} data-testid="container">
-            {content}
-          </CardContainer>,
-        );
-        const root = screen.getByTestId('container');
-        expect(root.querySelector('.wds-card-container__border')).not.toBeInTheDocument();
-      },
-    );
-  });
-
-  describe('interactive', () => {
-    it('is not interactive by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      expect(screen.getByTestId('container')).not.toHaveClass('wds-card-container--interactive');
-    });
-
-    it('adds the interactive modifier without changing the element', () => {
-      render(
-        <CardContainer interactive data-testid="container">
-          <a href="/cards">{content}</a>
-        </CardContainer>,
-      );
-      const root = screen.getByTestId('container');
-      expect(root.tagName).toBe('SECTION');
-      expect(root).toHaveClass('wds-card-container--interactive');
-      expect(root).not.toHaveAttribute('interactive');
-    });
-
-    it('spreads onClick onto the root element as a plain handler', async () => {
-      const onClick = jest.fn();
-      render(
-        <CardContainer data-testid="container" onClick={onClick}>
-          {content}
-        </CardContainer>,
-      );
-      const root = screen.getByTestId('container');
-      expect(root.tagName).toBe('SECTION');
-      await userEvent.click(root);
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});