@wistia/ui 0.19.0 → 0.19.1

package/dist/index.d.mts

@@ -1726,17 +1726,21 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1726,17 +1726,21 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.0
+ * @license @wistia/ui v0.19.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14059,6 +14059,10 @@ var StyledLabel3 = styled58(Heading)`
   &[data-wui-data-card-skeleton='true'] {
     width: 80px;
   }
+
+  button {
+    text-align: left;
+  }
 `;
 var StyledValue = styled58(Heading)`
   grid-area: value;
@@ -14100,7 +14104,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "div",
           variant: "heading6",
           children: label
         }
@@ -14109,7 +14113,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "div",
           variant: "heading3",
           children: value
         }
@@ -14162,9 +14166,16 @@ import { styled as styled59 } from "styled-components";
 import { jsx as jsx279 } from "react/jsx-runtime";
 var StyledDataCards = styled59(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;
+    flex-basis: var(--wui-data-cards-column-width, 0);
     max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
@@ -14172,19 +14183,22 @@ var DataCards = ({
   children,
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ jsx279(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }