@transferwise/components 0.0.0-experimental-47052c9 → 0.0.0-experimental-b2b287d

package/src/Snackbar/useSnackbarSwipeDismiss.ts

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants';
+
+const DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';
+const SETTLE_CLASS = 'wds-Snackbar--swipe-settle';
+
+type SwipePointer = {
+  id: number;
+  target: Element;
+  startX: number;
+  startY: number;
+  threshold: number;
+};
+
+/**
+ * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.
+ * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.
+ * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its
+ * follow-up click so dragging from the action cannot activate it.
+ */
+const useSnackbarSwipeDismiss = ({
+  onDismissRequest,
+  onSwipeChange,
+  visible,
+}: {
+  onDismissRequest: () => void;
+  /** Reports when a gesture starts and ends so auto-dismiss can pause beneath the pointer. */
+  onSwipeChange: (swiping: boolean) => void;
+  visible: boolean;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pointerRef = useRef<SwipePointer | null>(null);
+  const suppressClick = useRef(false);
+
+  const clearSwipePosition = useCallback(() => {
+    const pointer = pointerRef.current;
+    pointerRef.current = null;
+    if (pointer) {
+      if (pointer.target.hasPointerCapture?.(pointer.id)) {
+        pointer.target.releasePointerCapture(pointer.id);
+      }
+      onSwipeChange(false);
+    }
+    suppressClick.current = false;
+    containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);
+    containerRef.current?.style.removeProperty('transform');
+  }, [onSwipeChange]);
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !event.isPrimary || pointerRef.current) {
+      return;
+    }
+
+    clearSwipePosition();
+    const target = event.target as Element;
+    target.setPointerCapture?.(event.pointerId);
+    pointerRef.current = {
+      id: event.pointerId,
+      target,
+      startX: event.clientX,
+      startY: event.clientY,
+      threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD,
+    };
+    onSwipeChange(true);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    if (offsetY > 0 && offsetY > Math.abs(offsetX)) {
+      containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);
+    } else {
+      containerRef.current?.style.removeProperty('transform');
+    }
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    const container = containerRef.current;
+    const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();
+    clearSwipePosition();
+
+    if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {
+      if (container) {
+        // Include wrapper padding and the safe area, not only the surface, to clear the viewport.
+        container.classList.add(DISMISS_CLASS);
+        container.style.setProperty(
+          'transform',
+          `translateY(${Math.max(offsetY, container.offsetHeight)}px)`,
+        );
+      }
+      suppressClick.current = true;
+      onDismissRequest();
+    } else {
+      // Capture retargets clicks to the pressed control even when released outside it.
+      suppressClick.current =
+        !!bounds &&
+        (offsetX !== 0 || offsetY !== 0) &&
+        (event.clientX < bounds.left ||
+          event.clientX > bounds.right ||
+          event.clientY < bounds.top ||
+          event.clientY > bounds.bottom);
+      container?.classList.add(SETTLE_CLASS);
+    }
+  };
+
+  const handlePointerCancel = useCallback(
+    (event: Pick<PointerEvent, 'pointerId'>) => {
+      if (pointerRef.current?.id !== event.pointerId) {
+        return;
+      }
+
+      clearSwipePosition();
+      containerRef.current?.classList.add(SETTLE_CLASS);
+    },
+    [clearSwipePosition],
+  );
+
+  useEffect(() => {
+    if (visible) {
+      clearSwipePosition();
+    } else if (pointerRef.current) {
+      // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.
+      handlePointerCancel({ pointerId: pointerRef.current.id });
+    }
+  }, [visible, clearSwipePosition, handlePointerCancel]);
+
+  useEffect(() => {
+    // Removed descendants report capture loss on their document, not the Snackbar surface.
+    const ownerDocument = containerRef.current?.ownerDocument;
+    ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);
+    return () => {
+      ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);
+      clearSwipePosition();
+    };
+  }, [clearSwipePosition, handlePointerCancel]);
+
+  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (suppressClick.current && event.detail > 0) {
+      suppressClick.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  return {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  };
+};
+
+export default useSnackbarSwipeDismiss;

package/src/i18n/en.json

@@ -38,6 +38,7 @@
   "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
+  "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/index.ts

@@ -4,17 +4,6 @@
  * Types
  */
 export type { ContainerProps } from './Container';
-export type {
-  CardContainerProps,
-  CardContainerSpotlight,
-  CardContainerPadding,
-} from './CardContainer';
-export type {
-  CardWidgetProps,
-  CardWidgetHeader,
-  CardWidgetTitleAction,
-  CardWidgetActionButton,
-} from './CardWidget';
 export type { LogoProps, LogoSize, LogoAssetName } from './Logo';
 export type { FlowNavigationProps, CriticalBannerLegacyData } from './FlowNavigation';
 export type { AccordionItem, AccordionProps } from './Accordion';
@@ -146,7 +135,7 @@ export type {
   SelectProps,
 } from './_deprecated/Select';
 export type { SlidingPanelProps } from './SlidingPanel';
-export type { SnackbarProps, SnackbarProviderProps } from './Snackbar';
+export type { SnackbarCreationProps, SnackbarProviderProps } from './Snackbar';
 export type { SnackbarContextType } from './Snackbar/SnackbarContext';
 export type { StatusIconProps, StatusIconSentiment } from './StatusIcon';
 export type { StickyProps } from './Sticky';
@@ -229,8 +218,6 @@ export { default as Chevron } from './Chevron';
 export { Chip, default as Chips } from './Chips';
 export { default as CircularButton } from './CircularButton';
 export { default as Container } from './Container';
-export { default as CardContainer } from './CardContainer';
-export { default as CardWidget } from './CardWidget';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/BottomSheet';
 export { default as BaseCard } from './common/BaseCard';

package/src/main.css

@@ -26203,198 +26203,6 @@ 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--interactive: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--interactive: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--interactive:has(.wds-card-widget__title-link:active).wds-card-container--active {
-  --CardContainer-border-color: var(--color-border-neutral);
-}
-.wds-card-widget--interactive: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;
@@ -31514,75 +31322,138 @@ 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;
+.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-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 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;
+@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;
-  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);
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
 }
-.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);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.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);
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.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) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.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;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.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;
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.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;
   }
 }
 .status-circle.negative,

package/src/main.less

@@ -4,8 +4,6 @@
 @import "./PocketSurface/PocketSurface.less";
 
 @import "./Container/Container.less";
-@import "./CardContainer/CardContainer.less";
-@import "./CardWidget/CardWidget.less";
 @import "./_deprecated/CriticalBanner/CriticalCommsBanner.less";
 @import "./Accordion/Accordion.less";
 @import "./_deprecated/ActionButton/ActionButton.less";

package/build/CardContainer/CardContainer.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var clsx = require('clsx');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-const CardContainer = /*#__PURE__*/React.forwardRef(({
-  spotlight,
-  padding = 'md',
-  interactive = false,
-  children,
-  as: Element = 'section',
-  className,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
-    ref: ref,
-    className: clsx.clsx('wds-card-container', spotlight && `wds-card-container--${spotlight}`, padding === 'none' && 'wds-card-container--padding-none', interactive && 'wds-card-container--interactive', className),
-    ...props,
-    children: [children, spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("span", {
-      "aria-hidden": "true",
-      className: "wds-card-container__border",
-      children: /*#__PURE__*/jsxRuntime.jsx("svg", {
-        children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
-      })
-    })]
-  });
-});
-CardContainer.displayName = 'CardContainer';
-
-exports.default = CardContainer;
-//# sourceMappingURL=CardContainer.js.map

package/build/CardContainer/CardContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardContainer.js","sources":["../../src/CardContainer/CardContainer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { CardContainerProps } from './CardContainer.types';\n\n/**\n * A bounded surface that groups related content. It has no slots of its own: children are stacked\n * with no gap between them. For a card with a title and actions, use `CardWidget`.\n */\nconst CardContainer = forwardRef<HTMLElement, CardContainerProps>(\n  (\n    {\n      spotlight,\n      padding = 'md',\n      interactive = false,\n      children,\n      as: Element = 'section',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Element\n        ref={ref as React.Ref<HTMLElement & HTMLDivElement>}\n        className={clsx(\n          'wds-card-container',\n          spotlight && `wds-card-container--${spotlight}`,\n          padding === 'none' && 'wds-card-container--padding-none',\n          interactive && 'wds-card-container--interactive',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n\n        {spotlight === 'inactive' && (\n          <span aria-hidden=\"true\" className=\"wds-card-container__border\">\n            <svg>\n              <rect />\n            </svg>\n          </span>\n        )}\n      </Element>\n    );\n  },\n);\n\nCardContainer.displayName = 'CardContainer';\n\nexport default CardContainer;\n"],"names":["CardContainer","forwardRef","spotlight","padding","interactive","children","as","Element","className","props","ref","_jsxs","clsx","_jsx","displayName"],"mappings":";;;;;;;;AASA,MAAMA,aAAa,gBAAGC,gBAAU,CAC9B,CACE;EACEC,SAAS;AACTC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,WAAW,GAAG,KAAK;EACnBC,QAAQ;EACRC,EAAE,EAAEC,OAAO,GAAG,SAAS;EACvBC,SAAS;EACT,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;EACF,oBACEC,eAAA,CAACJ,OAAO,EAAA;AACNG,IAAAA,GAAG,EAAEA,GAA+C;IACpDF,SAAS,EAAEI,SAAI,CACb,oBAAoB,EACpBV,SAAS,IAAI,CAAA,oBAAA,EAAuBA,SAAS,CAAA,CAAE,EAC/CC,OAAO,KAAK,MAAM,IAAI,kCAAkC,EACxDC,WAAW,IAAI,iCAAiC,EAChDI,SAAS,CACT;AAAA,IAAA,GACEC,KAAK;AAAAJ,IAAAA,QAAA,GAERA,QAAQ,EAERH,SAAS,KAAK,UAAU,iBACvBW,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,MAAM;AAACL,MAAAA,SAAS,EAAC,4BAA4B;AAAAH,MAAAA,QAAA,eAC7DQ,cAAA,CAAA,KAAA,EAAA;QAAAR,QAAA,eACEQ,cAAA,CAAA,MAAA,EAAA,EAAK;OACF;AACP,KAAM,CACP;AAAA,GACM,CAAC;AAEd,CAAC;AAGHb,aAAa,CAACc,WAAW,GAAG,eAAe;;"}

package/build/CardContainer/CardContainer.mjs

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