@transferwise/components 46.166.0 → 46.168.0

package/build/styles/Prompt/Snackbar/Snackbar.css

@@ -0,0 +1,134 @@
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: 1060;
+}
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
+  text-align: start;
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
+}
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
+  }
+}
+.wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
+  }
+}

package/build/styles/main.css

@@ -26203,6 +26203,192 @@ a[data-toggle="tooltip"] {
 .wds-container--fluid {
   max-inline-size: var(--wds-container-width-fluid);
 }
+.wds-card-container {
+  --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
+  --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: 0px;
+  --CardContainer-padding-inline: 0px;
+  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);
+  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;
+}
+/**
+ * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
+ * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
+ * green provider inside a light one turns the shadow off.
+ *
+ * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
+ * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
+ * 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.
+ */
+.np-theme-personal {
+  --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
+}
+.np-theme-personal.np-theme-personal--dark,
+    .np-theme-personal.np-theme-personal--bright-green,
+    .np-theme-personal.np-theme-personal--forest-green,
+    .np-theme-personal.np-theme-business--dark,
+    .np-theme-personal.np-theme-business--bright-green,
+    .np-theme-personal.np-theme-business--forest-green,
+    .np-theme-personal.np-theme-platform--forest-green {
+  --CardContainer-theme-shadow: none;
+}
+.wds-card-widget {
+  --CardWidget-inset: var(--size-8);
+  --CardWidget-header-spacing: var(--size-8);
+  --CardWidget-actions-gap: var(--size-8);
+}
+.wds-card-widget__header {
+  align-items: center;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  container-type: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: var(--CardWidget-inset);
+  row-gap: var(--size-8);
+}
+.wds-card-widget__header + .wds-card-widget__content {
+  margin-block-start: var(--CardWidget-header-spacing);
+}
+.wds-card-widget__title {
+  align-items: center;
+  color: var(--color-content-secondary);
+  display: grid;
+  flex: 1 1 0;
+  margin: 0;
+  min-block-size: var(--size-32);
+}
+@container (width <= 360px) {
+  .wds-card-widget__title {
+    flex-basis: auto;
+  }
+}
+.wds-card-widget__title-link.np-link {
+  color: inherit;
+  display: inline;
+  font: inherit;
+  justify-self: start;
+  letter-spacing: inherit;
+  text-align: start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-card-widget__title-link.np-link:hover,
+.wds-card-widget__title-link.np-link:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-card-widget__title-link.np-link .tw-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
+  white-space: nowrap;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
+  margin: 0;
+}
+.wds-card-widget__actions {
+  align-self: start;
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--CardWidget-actions-gap);
+}
+.wds-card-widget--with-header .wds-card-widget__content {
+  padding-inline: var(--CardWidget-inset);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
 .critical-comms {
   border-radius: var(--radius-medium);
   overflow: hidden;
@@ -26762,15 +26948,14 @@ a[data-toggle="tooltip"] {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-screen);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-hover));
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-screen-active));
 }
 .np-icon-button-secondary-default {
   color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
@@ -29190,6 +29375,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;
@@ -31220,6 +31413,140 @@ button.np-link {
     overflow: visible;
   }
 }
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: 1060;
+}
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
+  text-align: start;
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
+}
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
+}
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
+  }
+}
+.wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
+  }
+}
 .wds-expander-toggle {
   align-self: flex-start;
   flex-shrink: 0;
@@ -31322,77 +31649,6 @@ button.np-link {
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
-.snackbar {
-  text-align: center;
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  z-index: 1060;
-}
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
-  text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
-}
-@media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
-  }
-}
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: var(--size-16);
-}
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
-}
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
-}
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));

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