@wistia/ui 0.19.0-beta.e04d42c5.ec25c59 → 0.19.1-beta.0651b8af.4b05dbd

package/dist/index.d.mts

@@ -471,6 +471,11 @@ type ActionButtonProps = {
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: 'focus' | 'hover' | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -499,6 +504,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -523,6 +533,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -1726,17 +1741,21 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 
@@ -4214,17 +4233,13 @@ type ThumbnailCollageProps = {
      * The type of gradient to show if no `Thumbnail`s are provided
      */
     gradientBackground?: GradientNameType;
-    /**
-     * If the collage should have a background or not.
-     */
-    hasBackground?: boolean;
 };
 /**
  * A `ThumbnailCollage` is a component that displays multiple `Thumbnail` components in a responsive grid layout.
  * It supports up to 3 thumbnails arranged in different configurations based on the number of children provided.
  * If no thumbnails are provided, it displays a fallback thumbnail with a gradient background.
  */
-declare const ThumbnailCollage: ({ children, gradientBackground, hasBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
+declare const ThumbnailCollage: ({ children, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
 
 type TooltipProps = {
     /**

package/dist/index.d.ts

@@ -471,6 +471,11 @@ type ActionButtonProps = {
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: 'focus' | 'hover' | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -499,6 +504,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -523,6 +533,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -1726,17 +1741,21 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 
@@ -4214,17 +4233,13 @@ type ThumbnailCollageProps = {
      * The type of gradient to show if no `Thumbnail`s are provided
      */
     gradientBackground?: GradientNameType;
-    /**
-     * If the collage should have a background or not.
-     */
-    hasBackground?: boolean;
 };
 /**
  * A `ThumbnailCollage` is a component that displays multiple `Thumbnail` components in a responsive grid layout.
  * It supports up to 3 thumbnails arranged in different configurations based on the number of children provided.
  * If no thumbnails are provided, it displays a fallback thumbnail with a gradient background.
  */
-declare const ThumbnailCollage: ({ children, gradientBackground, hasBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
+declare const ThumbnailCollage: ({ children, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
 
 type TooltipProps = {
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.0-beta.e04d42c5.ec25c59
+ * @license @wistia/ui v0.19.1-beta.0651b8af.4b05dbd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3363,8 +3363,8 @@ var buttonExtraLargeStyles = css17`
 `;
 var ghostButtonVariant = css17`
   --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);
 `;
@@ -3441,12 +3441,15 @@ var buttonBaseStyles = css17`
 
   &:focus-visible,
   &.force-state-focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
+    --wui-button-focus-color: var(--wui-color-focus-ring);
+
     background: var(--button-color-bg-hover);
+    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);
     }
   }
 
@@ -8080,22 +8083,28 @@ var StyledActionButton = styled7(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;
+  &:focus-visible,
+  &.force-state-focus {
+    --wui-action-button-focus-color: var(--wui-color-focus-ring);
+
+    box-shadow:
+      inset 0 0 0 2px var(--wui-action-button-focus-color),
+      inset 0 0 0 3px var(--wui-color-bg-app);
   }
 
   &[aria-disabled='true'] {
+    --wui-action-button-focus-color: var(--wui-color-focus-ring-disabled);
     background: var(--wui-color-bg-surface-disabled);
     color: var(--wui-color-text-disabled);
-    outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
     && {
@@ -8133,7 +8142,9 @@ var StyledSecondaryIcon = styled7.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;
       }
@@ -8162,6 +8173,7 @@ var ActionButton = forwardRef3(
     icon,
     colorScheme = "standard",
     disabled = false,
+    forceState,
     hoverColorScheme,
     variant = "default",
     children,
@@ -8182,6 +8194,7 @@ var ActionButton = forwardRef3(
         $colorScheme: colorScheme,
         $hoverColorScheme: resolvedHoverColorScheme,
         disabled,
+        forceState,
         unstyled: true,
         children: [
           /* @__PURE__ */ jsx210(StyledMainIcon, { children: icon }),
@@ -14059,6 +14072,10 @@ var StyledLabel3 = styled58(Heading)`
   &[data-wui-data-card-skeleton='true'] {
     width: 80px;
   }
+
+  button {
+    text-align: left;
+  }
 `;
 var StyledValue = styled58(Heading)`
   grid-area: value;
@@ -14100,7 +14117,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "div",
           variant: "heading6",
           children: label
         }
@@ -14109,7 +14126,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "div",
           variant: "heading3",
           children: value
         }
@@ -14162,9 +14179,16 @@ import { styled as styled59 } from "styled-components";
 import { jsx as jsx279 } from "react/jsx-runtime";
 var StyledDataCards = styled59(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};
   }
 `;
@@ -14172,19 +14196,22 @@ var DataCards = ({
   children,
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ jsx279(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }
@@ -18456,8 +18483,8 @@ var Thumbnail = forwardRef37(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import React from "react";
-import { css as css51, styled as styled109 } from "styled-components";
+import { cloneElement as cloneElement9, Children as Children11 } from "react";
+import { styled as styled109 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx336 } from "react/jsx-runtime";
 var ThumbnailCollageContainer = styled109.div`
@@ -18467,20 +18494,12 @@ var ThumbnailCollageContainer = styled109.div`
   display: flex;
 `;
 var StyledThumbnailCollage = styled109.div`
-  --wui-thumbnail-collage-spacing: var(--wui-space-01);
-  border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
   display: grid;
-  gap: var(--wui-thumbnail-collage-spacing);
+  gap: var(--wui-space-01);
   width: 100%;
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
 
-  ${({ $hasBackground }) => $hasBackground && css51`
-      background-color: var(--wui-color-bg-surface-secondary);
-      border: 1px solid rgba(0, 0, 0, 0.05);
-      padding: var(--wui-thumbnail-collage-spacing);
-    `}
-
   &:has(:nth-child(1)) {
     grid-template-areas:
       'a a'
@@ -18517,21 +18536,16 @@ var StyledThumbnailCollage = styled109.div`
     height: 100%;
     width: 100%;
   }
-
-  @container (min-width: 200px) {
-    --wui-thumbnail-collage-spacing: var(--wui-space-02);
-  }
 `;
 var ThumbnailCollage = ({
   children = [],
   gradientBackground = "defaultMidOne",
-  hasBackground = false,
   ...props
 }) => {
-  const thumbnailArray = React.Children.toArray(children);
+  const thumbnailArray = Children11.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return React.cloneElement(child, {
+    return cloneElement9(child, {
       ...child.props,
       children: void 0
     });
@@ -18550,7 +18564,6 @@ var ThumbnailCollage = ({
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
-      $hasBackground: hasBackground,
       "data-wui-thumbnail-collage": true,
       ...props,
       children: thumbnails
@@ -18559,7 +18572,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled110, css as css52 } from "styled-components";
+import { styled as styled110, css as css51 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx337, jsxs as jsxs71 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -18617,12 +18630,12 @@ var WistiaLogoComponent = styled110.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css52`
+      return css51`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css52`
+    return css51`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -18686,7 +18699,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 // src/components/SplitButton/SplitButton.tsx
 import { styled as styled111 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
-import { cloneElement as cloneElement9 } from "react";
+import { cloneElement as cloneElement10 } from "react";
 import { jsx as jsx338, jsxs as jsxs72 } from "react/jsx-runtime";
 var StyledSplitButton = styled111.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -18751,7 +18764,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil45(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil45(secondaryAction) && cloneElement10(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";