@wistia/ui 0.18.17-beta.c1f00b80.e6809d4 → 0.18.17-beta.f239f323.365cbcc

package/dist/index.d.mts

@@ -4354,7 +4354,7 @@ declare const SplitButton: {
     displayName: string;
 };
 
-type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
+type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text' | '--wui-typography-family-brand' | '--wui-typography-family-mono' | `--wui-typography-family-default` | `--wui-typography-weight-body-bold` | `--wui-typography-weight-body` | `--wui-typography-weight-heading` | `--wui-typography-weight-label-bold` | `--wui-typography-weight-label`;
 type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
     children: ReactNode;
     overrides: Partial<Record<CustomizableTokens, number | string>>;

package/dist/index.d.ts

@@ -4354,7 +4354,7 @@ declare const SplitButton: {
     displayName: string;
 };
 
-type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
+type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text' | '--wui-typography-family-brand' | '--wui-typography-family-mono' | `--wui-typography-family-default` | `--wui-typography-weight-body-bold` | `--wui-typography-weight-body` | `--wui-typography-weight-heading` | `--wui-typography-weight-label-bold` | `--wui-typography-weight-label`;
 type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
     children: ReactNode;
     overrides: Partial<Record<CustomizableTokens, number | string>>;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.17-beta.c1f00b80.e6809d4
+ * @license @wistia/ui v0.18.17-beta.f239f323.365cbcc
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1675,43 +1675,64 @@ var typographyTokens = css7`
   --wui-typography-heading-hero-family: var(--wui-typography-family-brand);
   --wui-typography-heading-hero-line-height: 58px;
   --wui-typography-heading-hero-size: 48px;
-  --wui-typography-heading-hero-weight: var(--wui-typography-weight-brand-black);
+  --wui-typography-heading-hero-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-black)
+  );
 
   /* Heading 1 */
   --wui-typography-heading-1-family: var(--wui-typography-family-brand);
   --wui-typography-heading-1-line-height: 44px;
   --wui-typography-heading-1-size: 36px;
-  --wui-typography-heading-1-weight: var(--wui-typography-weight-brand-black);
+  --wui-typography-heading-1-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-black)
+  );
 
   /* Heading 2 */
   --wui-typography-heading-2-family: var(--wui-typography-family-brand);
   --wui-typography-heading-2-line-height: 38px;
   --wui-typography-heading-2-size: 32px;
-  --wui-typography-heading-2-weight: var(--wui-typography-weight-brand-black);
+  --wui-typography-heading-2-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-black)
+  );
 
   /* Heading 3 */
   --wui-typography-heading-3-family: var(--wui-typography-family-brand);
   --wui-typography-heading-3-line-height: 30px;
   --wui-typography-heading-3-size: 24px;
-  --wui-typography-heading-3-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-3-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-bold)
+  );
 
   /* Heading 4 */
   --wui-typography-heading-4-family: var(--wui-typography-family-brand);
   --wui-typography-heading-4-line-height: 24px;
   --wui-typography-heading-4-size: 18px;
-  --wui-typography-heading-4-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-4-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-bold)
+  );
 
   /* Heading 5 */
   --wui-typography-heading-5-family: var(--wui-typography-family-brand);
   --wui-typography-heading-5-line-height: 22px;
   --wui-typography-heading-5-size: 16px;
-  --wui-typography-heading-5-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-5-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-bold)
+  );
 
   /* Heading 6 */
   --wui-typography-heading-6-family: var(--wui-typography-family-brand);
   --wui-typography-heading-6-line-height: 18px;
   --wui-typography-heading-6-size: 14px;
-  --wui-typography-heading-6-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-6-weight: var(
+    --wui-typography-weight-heading,
+    var(--wui-typography-weight-brand-bold)
+  );
 
   /* Body Weight */
   --wui-typography-weight-body: 425;
@@ -1834,7 +1855,8 @@ var colorTokens = css11`
   ${colorAliasTokens}
 `;
 var designTokens = css11`
-  :root {
+  :root,
+  [data-wui-theme='true'] {
     ${borderRadiusTokens}
     ${colorTokens}
     ${elevationTokens}
@@ -13958,22 +13980,12 @@ import { useRef as useRef15 } from "react";
 import { styled as styled58, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx278, jsxs as jsxs41 } from "react/jsx-runtime";
-var pulse = keyframes4`
-  0%,
-      100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.5;
-      }
-`;
 var StyledDataCard = styled58.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';
@@ -14001,17 +14013,6 @@ var StyledDataCard = styled58.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;
-    pointer-events: none;
-    border-radius: var(--wui-border-radius-01);
-    width: fit-content;
-  }
-
   &[data-click-region] {
     &:not([disabled]) {
       cursor: pointer;
@@ -14043,7 +14044,6 @@ var StyledDataCard = styled58.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);
       }
     }
 
@@ -14054,17 +14054,38 @@ var StyledDataCard = styled58.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
+var shimmer = keyframes4`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+var LoadingBackground = styled58.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 = styled58(LoadingBackground)`
+  width: 80px;
+  height: var(--wui-typography-heading-6-line-height);
+`;
+var StyledLoadingValue = styled58(LoadingBackground)`
+  width: 90%;
+  height: var(--wui-typography-heading-3-line-height);
+`;
 var StyledLabel3 = styled58(Heading)`
   grid-area: label;
-  &[data-wui-data-card-skeleton='true'] {
-    width: 80px;
-  }
 `;
 var StyledValue = styled58(Heading)`
   grid-area: value;
-  &[data-wui-data-card-skeleton='true'] {
-    width: min(90%, 156px);
-  }
 `;
 var StyledSlot = styled58.div`
   display: flex;
@@ -14098,19 +14119,17 @@ var DataCardInner = ({
       /* @__PURE__ */ jsx278(
         StyledLabel3,
         {
-          "data-wui-data-card-skeleton": isLoading,
           renderAs: "dt",
           variant: "heading6",
-          children: label
+          children: isLoading ? /* @__PURE__ */ jsx278(StyledLoadingLabel, {}) : label
         }
       ),
       /* @__PURE__ */ jsx278(
         StyledValue,
         {
-          "data-wui-data-card-skeleton": isLoading,
           renderAs: "dd",
           variant: "heading3",
-          children: value
+          children: isLoading ? /* @__PURE__ */ jsx278(StyledLoadingValue, {}) : value
         }
       ),
       isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx278(StyledSlot, { children: upperRightSlot }),
@@ -18722,6 +18741,7 @@ var CustomizableThemeWrapper = ({
   {
     ...props,
     $overrides: overrides,
+    "data-wui-theme": "true",
     children
   }
 );