@wistia/ui 0.18.17-beta.0c8ce664.ca5f64a → 0.18.17-beta.0f6de3dd.0b7f75e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.17-beta.0c8ce664.ca5f64a
+ * @license @wistia/ui v0.18.17-beta.0f6de3dd.0b7f75e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -12918,7 +12918,7 @@ var SaturationAndValuePicker = ({
 SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 
 // src/components/Combobox/Combobox.tsx
-var Ariakit = __toESM(require("@ariakit/react"));
+var Ariakit = __toESM(require("@ariakit/react"), 1);
 var import_react54 = require("react");
 var import_match_sorter = require("match-sorter");
 var import_styled_components71 = require("styled-components");
@@ -14110,22 +14110,12 @@ var import_react62 = require("react");
 var import_styled_components77 = require("styled-components");
 var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime278 = require("react/jsx-runtime");
-var pulse = import_styled_components77.keyframes`
-  0%,
-      100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.5;
-      }
-`;
 var StyledDataCard = import_styled_components77.styled.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
   --wui-data-card-background-hover: var(--wui-color-bg-surface-secondary-hover);
   --wui-data-card-background-active: var(--wui-color-bg-surface-secondary-active);
-  --wui-data-card-skeleton-color: var(--wui-color-bg-surface-tertiary);
 
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -14153,16 +14143,6 @@ var StyledDataCard = import_styled_components77.styled.div`
     grid-template-rows: auto auto auto;
   }
 
-  [data-wui-data-card-skeleton='true'] {
-    pointer-events: none;
-    background-color: var(--wui-data-card-skeleton-color);
-    animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
-    color: transparent;
-    user-select: none;
-    border-radius: var(--wui-border-radius-01);
-    width: fit-content;
-  }
-
   &[data-click-region] {
     &:not([disabled]) {
       cursor: pointer;
@@ -14194,7 +14174,6 @@ var StyledDataCard = import_styled_components77.styled.div`
         --wui-data-card-background-hover: var(--wui-color-bg-surface-selected-hover);
         --wui-data-card-background-active: var(--wui-color-bg-surface-selected-active);
         --wui-data-card-focus-ring: var(--wui-color-border-selected);
-        --wui-data-card-skeleton-color: var(--wui-color-bg-surface-selected-active);
       }
     }
 
@@ -14205,19 +14184,38 @@ var StyledDataCard = import_styled_components77.styled.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
+var shimmer = import_styled_components77.keyframes`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+var LoadingBackground = import_styled_components77.styled.div`
+  background: linear-gradient(
+    90deg,
+    var(--wui-color-bg-surface-tertiary) 25%,
+    var(--wui-color-bg-surface-secondary) 37%,
+    var(--wui-color-bg-surface-tertiary) 63%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite;
+  border-radius: var(--wui-border-radius-01);
+`;
+var StyledLoadingLabel = (0, import_styled_components77.styled)(LoadingBackground)`
+  width: 80px;
+  height: var(--wui-typography-heading-6-line-height);
+`;
+var StyledLoadingValue = (0, import_styled_components77.styled)(LoadingBackground)`
+  width: 90%;
+  height: var(--wui-typography-heading-3-line-height);
+`;
 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);
-  }
 `;
 var StyledSlot = import_styled_components77.styled.div`
   display: flex;
@@ -14251,19 +14249,17 @@ var DataCardInner = ({
       /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
         StyledLabel3,
         {
-          "data-wui-data-card-skeleton": isLoading,
           renderAs: "dt",
           variant: "heading6",
-          children: label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
         StyledValue,
         {
-          "data-wui-data-card-skeleton": isLoading,
           renderAs: "dd",
           variant: "heading3",
-          children: value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledLoadingValue, {}) : value
         }
       ),
       (0, import_type_guards44.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledSlot, { children: upperRightSlot }),