@transferwise/components 46.165.5 → 46.167.0

package/build/styles/styles/less/panels.css

@@ -19,7 +19,7 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(var(--line-height-title) + 8px);
+  line-height: calc(var(--wds-line-height-title-section) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -69,7 +69,7 @@
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(var(--line-height-title) * 2);
+    line-height: calc(var(--wds-line-height-title-section) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;

package/build/styles/styles/less/popovers.css

@@ -1,4 +1,62 @@
-.close {
+.popover-title {
+  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.popover,
+.popover-content {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.close {
   float: inline-end;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
@@ -46,7 +104,7 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -61,10 +119,6 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -253,13 +307,7 @@ button.close {
   padding: 0;
   margin: 0;
   color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -303,10 +351,6 @@ button.close {
 }
 .popover-content {
   padding: 0;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: var(--color-content-secondary);
 }
@@ -475,13 +519,13 @@ button.popover-close {
   }
 }
 .popover-promotion .popover-title {
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: var(--font-size-20);
-    line-height: var(--line-height-title);
+    font-size: var(--wds-font-size-title-body);
+    line-height: var(--wds-line-height-title-body);
   }
 }
 @media (max-width: 320px) {

package/build/styles/styles/less/progress-bars.css

@@ -15,8 +15,8 @@
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   text-align: end;
   background-color: var(--color-content-accent);

package/build/styles/styles/less/sequences.css

@@ -4,7 +4,7 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -81,7 +81,7 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .sequence > li {
@@ -94,7 +94,7 @@
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -123,6 +123,10 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
+.sequence > li .wds-text-title-screen,
+.sequence > li .wds-text-title-section,
+.sequence > li .wds-text-title-subsection,
+.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -159,7 +163,7 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-content-primary);
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -184,7 +188,7 @@
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -203,7 +207,8 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default {
+.sequence-inverse > .active .np-text-body-default,
+.sequence-inverse > .active .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -351,7 +356,7 @@
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -442,14 +447,14 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/build/styles/styles/less/table.css

@@ -30,7 +30,7 @@ th {
 .table > tfoot > tr > td {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -41,7 +41,7 @@ th {
 .table > .tfoot > ol > li {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -81,12 +81,12 @@ th {
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -328,7 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--wds-font-weight-title-body);
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -342,7 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -358,7 +358,7 @@ table col[class*="col-"] {
     border-radius: 3px;
     margin-block-end: var(--size-24);
     padding-block: var(--size-24) 0;
-    padding-inline: var(--line-height-body);
+    padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
     padding: 0;

package/build/styles/styles/less/tooltip.css

@@ -1,8 +1,34 @@
-.tooltip {
+.tooltip-inner {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -43,10 +69,6 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/Body/Body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAc,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAWzE,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,eAAe,GAAG,oBAAoB,CAAC,GAAG;IAC/E,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qBAAqB;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,IAAI;IAXR,8BAA8B;WACvB,SAAS;IAChB,qBAAqB;SAChB,MAAM,GAAG,GAAG,GAAG,KAAK;IACzB;;;OAGG;uBACgB,OAAO;kGA0B1B,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/Body/Body.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAc,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAWzE,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,eAAe,GAAG,oBAAoB,CAAC,GAAG;IAC/E,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qBAAqB;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,IAAI;IAXR,8BAA8B;WACvB,SAAS;IAChB,qBAAqB;SAChB,MAAM,GAAG,GAAG,GAAG,KAAK;IACzB;;;OAGG;uBACgB,OAAO;kGA2B1B,CAAC;AAEH,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,8 @@
+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`.
+ */
+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

@@ -0,0 +1 @@
+{"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,4GAqClB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,55 @@
+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. Use `section` when the card is a standalone, major part of the
+     * page, or `article` for self-contained content such as a feed item. Leave most cards as a `div`,
+     * so a page of cards doesn't fill the landmark list with a region per card.
+     * @default 'div'
+     */
+    as?: 'div' | 'section' | '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

@@ -0,0 +1 @@
+{"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;;;;;OAKG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1 @@
+{"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,yGAcf,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1 @@
+{"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,gCAoCA,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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/build/types/Display/Display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Display.d.ts","sourceRoot":"","sources":["../../../src/Display/Display.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAc,MAAM,WAAW,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,OAAc,EAClB,IAA+B,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,GACH,EAAE,YAAY,+BAMd;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Display.d.ts","sourceRoot":"","sources":["../../../src/Display/Display.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAc,MAAM,WAAW,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,OAAc,EAClB,IAA+B,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,GACH,EAAE,YAAY,+BAgBd;AAED,eAAe,OAAO,CAAC"}

package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAmTlB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAezE,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,gBAAgB,gCAgTlB,CAAC"}

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,2BAA2B,+BAgG7B"}
+{"version":3,"file":"SelectInputBottomSheet.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,2BAA2B,+BAkG7B"}

package/build/types/Inputs/SelectInput/Popover/SelectInputPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputPopover.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,uBAAuB,+BAuFzB"}
+{"version":3,"file":"SelectInputPopover.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,uBAAuB,+BA2FzB"}