@wistia/ui 0.4.11-beta.96fbeb40.e289270 → 0.4.11-beta.b2fd894e.ecae805

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.11-beta.96fbeb40.e289270
+ * @license @wistia/ui v0.4.11-beta.b2fd894e.ecae805
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -40,6 +40,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ActionButton: () => ActionButton,
+  AnalyticsCard: () => AnalyticsCard,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
@@ -52,9 +53,6 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CheckboxMenuItem: () => CheckboxMenuItem,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
-  DataCard: () => DataCard,
-  DataCardTrend: () => DataCardTrend,
-  DataCards: () => DataCards,
   Divider: () => Divider,
   Ellipsis: () => Ellipsis,
   Form: () => Form,
@@ -9133,11 +9131,11 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   ] });
 };
 
-// src/components/DataCards/DataCard.tsx
+// src/components/AnalyticsCards/AnalyticsCard.tsx
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime211 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components59.default.div`
+var StyledAnalyticsCard = import_styled_components59.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -9148,7 +9146,6 @@ var StyledDataCard = import_styled_components59.default.div`
   background: var(--wui-color-bg-surface-secondary);
   flex: 1;
   border-radius: var(--wui-border-radius-02);
-  position: relative;
 `;
 var shimmer = import_styled_components59.keyframes`
   0% {
@@ -9171,11 +9168,11 @@ var LoadingBackground = import_styled_components59.default.div`
 `;
 var StyledLoadingLabel = (0, import_styled_components59.default)(LoadingBackground)`
   width: 80px;
-  height: var(--wui-typography-heading-6-line-height);
+  height: 20px;
 `;
 var StyledLoadingValue = (0, import_styled_components59.default)(LoadingBackground)`
-  width: 90%;
-  height: var(--wui-typography-heading-3-line-height);
+  width: 120px;
+  height: 32px;
 `;
 var StyledLabel4 = (0, import_styled_components59.default)(Heading)`
   grid-area: label;
@@ -9189,21 +9186,15 @@ var StyledSlot = import_styled_components59.default.div`
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components59.default.div`
-  position: absolute;
-  bottom: var(--wui-space-01);
-  right: var(--wui-space-01);
-`;
-var DataCard = ({
+var AnalyticsCard = ({
   label,
   value,
   upperRightSlot,
   colorScheme = "inherit",
   isLoading = false,
-  trend,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
-  StyledDataCard,
+  StyledAnalyticsCard,
   {
     $colorScheme: colorScheme,
     ...props,
@@ -9224,87 +9215,15 @@ var DataCard = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards34.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards34.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards34.isNotNull)(upperRightSlot) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledSlot, { children: upperRightSlot })
     ]
   }
 );
-DataCard.displayName = "DataCard";
-
-// src/components/DataCards/DataCards.tsx
-var import_styled_components60 = __toESM(require("styled-components"));
-var import_type_guards35 = require("@wistia/type-guards");
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components60.default)(Box)`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  > * {
-    min-width: 120px;
-    max-width: ${({ $cardMaxWidth }) => (0, import_type_guards35.isNotUndefined)($cardMaxWidth) ? `${$cardMaxWidth}px` : "none"};
-  }
-`;
-var DataCards = ({
-  children,
-  cardMaxWidth,
-  colorScheme = "inherit",
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
-    StyledDataCards,
-    {
-      ...props,
-      $cardMaxWidth: cardMaxWidth,
-      $colorScheme: colorScheme,
-      direction: "row",
-      fill: "horizontal",
-      gap: "space-02",
-      renderAs: "dl",
-      wrapItems: true,
-      children
-    }
-  );
-};
-DataCards.displayName = "DataCards";
-
-// src/components/DataCards/DataCardTrend.tsx
-var import_styled_components61 = __toESM(require("styled-components"));
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components61.default.div`
-  ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
-  background: var(--wui-color-bg-app);
-  border-radius: var(--wui-border-radius-rounded);
-  padding: var(--wui-space-01);
-  display: flex;
-  align-items: center;
-  gap: 2px;
-`;
-var DataCardTrend = ({
-  direction = "up",
-  outlook = "positive",
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
-      Icon,
-      {
-        size: "md",
-        type: direction === "up" ? "arrow-up" : "arrow-down",
-        ...props
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "label4",
-        children
-      }
-    )
-  ] });
-};
+AnalyticsCard.displayName = "AnalyticsCard";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
+  AnalyticsCard,
   Avatar,
   Badge,
   Box,
@@ -9317,9 +9236,6 @@ var DataCardTrend = ({
   CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
-  DataCard,
-  DataCardTrend,
-  DataCards,
   Divider,
   Ellipsis,
   Form,