@wistia/ui 0.19.0 → 0.19.1-beta.b5f9943f.e933a21

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.0
+ * @license @wistia/ui v0.19.1-beta.b5f9943f.e933a21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3545,8 +3545,8 @@ var buttonExtraLargeStyles = import_styled_components19.css`
 `;
 var ghostButtonVariant = import_styled_components19.css`
   --button-color-bg-override: transparent;
-  --button-color-bg-hover: var(--wui-color-bg-surface-hover);
-  --button-color-bg-active: var(--wui-color-bg-surface-active);
+  --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
+  --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
@@ -3586,6 +3586,24 @@ var pressedButtonVariant = import_styled_components19.css`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
+var buttonFocusStyles = import_styled_components19.css`
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &.force-state-focus {
+    --wui-button-focus-color: var(--wui-color-focus-ring);
+
+    box-shadow:
+      inset 0 0 0 2px var(--wui-button-focus-color),
+      inset 0 0 0 3px var(--wui-color-bg-app);
+
+    &[aria-disabled='true'] {
+      --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
+    }
+  }
+`;
 var buttonBaseStyles = import_styled_components19.css`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
@@ -3623,12 +3641,14 @@ var buttonBaseStyles = import_styled_components19.css`
 
   &:focus-visible,
   &.force-state-focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
-    background: var(--button-color-bg-hover);
+    --wui-button-focus-color: var(--wui-color-focus-ring);
+
+    box-shadow:
+      inset 0 0 0 2px var(--wui-button-focus-color),
+      inset 0 0 0 3px var(--wui-color-bg-app);
 
     &[aria-disabled='true'] {
-      outline-color: var(--wui-color-border-disabled);
+      --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
     }
   }
 
@@ -8262,22 +8282,20 @@ var StyledActionButton = (0, import_styled_components24.styled)(Button)`
   }
 
   &:hover,
-  &:focus-visible {
+  &:focus-visible,
+  &.force-state-hover,
+  &.force-state-focus {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
     background: var(--wui-color-bg-surface-tertiary);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
-  }
+  ${buttonFocusStyles}
 
   &[aria-disabled='true'] {
     background: var(--wui-color-bg-surface-disabled);
     color: var(--wui-color-text-disabled);
-    outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
     && {
@@ -8315,7 +8333,9 @@ var StyledSecondaryIcon = import_styled_components24.styled.div`
       opacity: 0;
       transform: translateX(-16px);
       ${StyledActionButton}:hover:not([aria-disabled="true"]) &,
-  ${StyledActionButton}:focus-visible:not([aria-disabled="true"]) & {
+      ${StyledActionButton}:focus-visible:not([aria-disabled="true"]) &,
+      ${StyledActionButton}.force-state-hover:not([aria-disabled="true"]) &,
+      ${StyledActionButton}.force-state-focus:not([aria-disabled="true"]) & {
         transform: translateX(0);
         opacity: 1;
       }
@@ -8344,6 +8364,7 @@ var ActionButton = (0, import_react24.forwardRef)(
     icon,
     colorScheme = "standard",
     disabled = false,
+    forceState,
     hoverColorScheme,
     variant = "default",
     children,
@@ -8364,6 +8385,7 @@ var ActionButton = (0, import_react24.forwardRef)(
         $colorScheme: colorScheme,
         $hoverColorScheme: resolvedHoverColorScheme,
         disabled,
+        forceState,
         unstyled: true,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(StyledMainIcon, { children: icon }),
@@ -14211,6 +14233,10 @@ var StyledLabel3 = (0, import_styled_components77.styled)(Heading)`
   &[data-wui-data-card-skeleton='true'] {
     width: 80px;
   }
+
+  button {
+    text-align: left;
+  }
 `;
 var StyledValue = (0, import_styled_components77.styled)(Heading)`
   grid-area: value;
@@ -14252,7 +14278,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "div",
           variant: "heading6",
           children: label
         }
@@ -14261,7 +14287,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "div",
           variant: "heading3",
           children: value
         }
@@ -14314,9 +14340,16 @@ var import_styled_components78 = require("styled-components");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var StyledDataCards = (0, import_styled_components78.styled)(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};
   }
 `;
@@ -14324,19 +14357,22 @@ var DataCards = ({
   children,
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }