@transferwise/components 0.0.0-experimental-63c3fc6 → 0.0.0-experimental-5f03867

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

@@ -1,52 +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. */
-export interface CardWidgetProps extends Omit<CardContainerProps, 'padding'> {
-    /**
-     * 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,2FAA2F;AAC3F,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;IAC1E;;;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,74 +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__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,112 +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-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;
-  }
-
-  // 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,118 +0,0 @@
-import { render, screen } 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();
-      },
-    );
-  });
-});

package/src/CardContainer/CardContainer.tsx

@@ -1,39 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-
-import type { CardContainerProps } from './CardContainer.types';
-
-/**
- * A bounded surface that groups related content. It has no slots of its own: children are stacked
- * with no gap between them. For a card with a title and actions, use `CardWidget`.
- */
-const CardContainer = forwardRef<HTMLElement, CardContainerProps>(
-  ({ spotlight, padding = 'md', children, as: Element = 'section', className, ...props }, ref) => {
-    return (
-      <Element
-        ref={ref as React.Ref<HTMLElement & HTMLDivElement>}
-        className={clsx(
-          'wds-card-container',
-          spotlight && `wds-card-container--${spotlight}`,
-          padding === 'none' && 'wds-card-container--padding-none',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-
-        {spotlight === 'inactive' && (
-          <span aria-hidden="true" className="wds-card-container__border">
-            <svg>
-              <rect />
-            </svg>
-          </span>
-        )}
-      </Element>
-    );
-  },
-);
-
-CardContainer.displayName = 'CardContainer';
-
-export default CardContainer;

package/src/CardContainer/CardContainer.types.ts

@@ -1,50 +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';
-
-  className?: string;
-  'data-testid'?: string;
-}

package/src/CardContainer/_stories/CardContainer.story.tsx

@@ -1,136 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Body from '../../Body';
-import CardContainer from '..';
-import type { CardContainerPadding, CardContainerSpotlight } from '..';
-import { CardsList, SampleContent } from './helpers';
-
-/**
- * A bounded surface that groups related content. It has no slots of its own: any content passed
- * as children is stacked with no gap, inside the card's padding.
- *
- * For a card with a title, a title link or actions, use `CardWidget`.
- */
-const meta: Meta<typeof CardContainer> = {
-  component: CardContainer,
-  title: 'Layouts/CardContainer',
-  tags: ['early-access'],
-  argTypes: {
-    spotlight: {
-      control: 'radio',
-      options: [undefined, 'active', 'inactive'],
-      table: {
-        defaultValue: { summary: 'undefined' },
-        type: { summary: 'CardContainerSpotlight' },
-      },
-    },
-    padding: {
-      control: 'radio',
-      options: ['md', 'none'],
-      table: { defaultValue: { summary: "'md'" }, type: { summary: 'CardContainerPadding' } },
-    },
-    as: {
-      control: 'radio',
-      options: ['section', 'div', 'article'],
-      table: { defaultValue: { summary: "'section'" }, type: { summary: 'string' } },
-    },
-    children: {
-      control: false,
-      table: { type: { summary: 'ReactNode' } },
-    },
-    className: { control: 'text', table: { type: { summary: 'string' } } },
-    'data-testid': { control: 'text', table: { type: { summary: 'string' } } },
-  },
-  args: {
-    spotlight: 'active',
-    padding: 'md',
-    as: 'section',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CardContainer>;
-
-/** Experiment with the card's props. */
-export const Playground: Story = {
-  render: (args) => (
-    <CardContainer {...args}>
-      <SampleContent />
-    </CardContainer>
-  ),
-};
-
-export const Sandbox = createSandboxStory({
-  code: `<CardContainer spotlight="active">
-  <Body>Your virtual card is ready to use.</Body>
-  <Body>Spend in 40+ currencies with the real exchange rate.</Body>
-</CardContainer>`,
-  scope: { ...globalScope, CardContainer },
-});
-
-/**
- * `spotlight` matches `ListItem`'s: `active` is raised, for live content, and `inactive` is
- * recessed with a dashed stroke, for a feature not set up yet. Without a spotlight the card is
- * flat.
- */
-export const Spotlight: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
-      {([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
-        (spotlight) => (
-          <CardContainer key={spotlight ?? 'none'} spotlight={spotlight}>
-            <Body>Spotlight: {spotlight ?? 'not set'}</Body>
-          </CardContainer>
-        ),
-      )}
-    </div>
-  ),
-};
-
-/**
- * `padding="md"` insets the content by 8px, and by 16px from the `md` breakpoint up.
- * `padding="none"` lets content such as images or charts run to the card's edges, clipped to its
- * rounded corners. The grey boxes fill the content area, so their edges show where the padding
- * ends.
- *
- * Focus rings are clipped at the edges too, so keep `none` for non-interactive content, and lists
- * on `md`.
- */
-export const Padding: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
-      {(['md', 'none'] as CardContainerPadding[]).map((padding) =>
-        ([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
-          (spotlight) => (
-            <CardContainer
-              key={`${padding}-${spotlight ?? 'none'}`}
-              padding={padding}
-              spotlight={spotlight}
-            >
-              <div
-                style={{ height: '120px', background: 'var(--color-background-screen-active)' }}
-              />
-            </CardContainer>
-          ),
-        ),
-      )}
-    </div>
-  ),
-};
-
-/** A `List` placed directly in the card. */
-export const WithList: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <CardContainer>
-      <CardsList />
-    </CardContainer>
-  ),
-};