@wistia/ui 0.13.4-beta.9ff09e76.3034e8a → 0.13.4-beta.c07d56cb.473fb3c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.4-beta.9ff09e76.3034e8a
+ * @license @wistia/ui v0.13.4-beta.c07d56cb.473fb3c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -12321,8 +12321,8 @@ var import_type_guards37 = require("@wistia/type-guards");
 var import_jsx_runtime253 = require("react/jsx-runtime");
 var StyledDataCard = import_styled_components67.default.div`
   display: grid;
-  grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
-  grid-template-rows: auto auto auto;
+  grid-template-areas: 'label slot' 'value value';
+  grid-template-rows: auto auto;
   grid-template-columns: auto auto;
   gap: var(--wui-space-01);
   padding: var(--wui-space-03);
@@ -12332,6 +12332,11 @@ var StyledDataCard = import_styled_components67.default.div`
   position: relative;
   transition: background var(--wui-motion-duration-01) var(--wui-motion-ease);
 
+  &:has([data-wui-data-card-subtitle]) {
+    grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
+    grid-template-rows: auto auto auto;
+  }
+
   &[data-click-region] {
     [data-wui-data-card-hover-icon] {
       opacity: 0;
@@ -12418,7 +12423,7 @@ var StyledDataCardTrendContainer = import_styled_components67.default.div`
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledDataCardSubtitleContainer = import_styled_components67.default.div`
+var StyledSubtitle = (0, import_styled_components67.default)(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -12453,7 +12458,14 @@ var DataCardInner = ({
         }
       ),
       (0, import_type_guards37.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards37.isNotNull)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardSubtitleContainer, { children: subtitle }),
+      (0, import_type_guards37.isNotNull)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+        StyledSubtitle,
+        {
+          "data-wui-data-card-subtitle": true,
+          variant: "label4",
+          children: subtitle
+        }
+      ),
       (0, import_type_guards37.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
@@ -12516,6 +12528,7 @@ var DataCards = ({
       ...props,
       $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
+      alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",