@wistia/ui 0.18.17-beta.c1f00b80.e6809d4 → 0.18.18-beta.5671ee8e.fdf9f16

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.17-beta.c1f00b80.e6809d4
+ * @license @wistia/ui v0.18.18-beta.5671ee8e.fdf9f16
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14159,7 +14159,6 @@ var StyledDataCard = import_styled_components77.styled.div`
     animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
     color: transparent;
     user-select: none;
-    pointer-events: none;
     border-radius: var(--wui-border-radius-01);
     width: fit-content;
   }
@@ -14208,12 +14207,14 @@ var StyledDataCard = import_styled_components77.styled.div`
 `;
 var StyledLabel3 = (0, import_styled_components77.styled)(Heading)`
   grid-area: label;
+
   &[data-wui-data-card-skeleton='true'] {
     width: 80px;
   }
 `;
 var StyledValue = (0, import_styled_components77.styled)(Heading)`
   grid-area: value;
+
   &[data-wui-data-card-skeleton='true'] {
     width: min(90%, 156px);
   }
@@ -14251,7 +14252,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "span",
           variant: "heading6",
           children: label
         }
@@ -14260,7 +14261,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "span",
           variant: "heading3",
           children: value
         }
@@ -14313,29 +14314,42 @@ var import_styled_components78 = require("styled-components");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var StyledDataCards = (0, import_styled_components78.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-data-cards-column-count: ${({ $columns }) => $columns === "auto" ? void 0 : $columns};
+  --wui-data-cards-total-column-gap-width: calc(var(--wui-data-cards-column-count) - 1) *
+    var(--wui-space-02);
+  --wui-data-cards-column-width: calc(
+    (100% - var(--wui-data-cards-total-column-gap-width)) / var(--wui-data-cards-column-count)
+  );
 
   > * {
-    min-width: 120px;
+    min-width: ${({ $cardMinWidth }) => $cardMinWidth};
+    flex-basis: var(--wui-data-cards-column-width, 0);
     max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 var DataCards = ({
   children,
+  cardMinWidth = "120px",
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMinWidth = useResponsiveProp(cardMinWidth);
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
+      $cardMinWidth: responsiveCardMinWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }