@wistia/ui 0.18.18-beta.fba14250.ac46dfb → 0.19.0-beta.e04d42c5.ec25c59

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.18-beta.fba14250.ac46dfb
+ * @license @wistia/ui v0.19.0-beta.e04d42c5.ec25c59
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14100,7 +14100,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "span",
+          renderAs: "dt",
           variant: "heading6",
           children: label
         }
@@ -14109,7 +14109,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "span",
+          renderAs: "dd",
           variant: "heading3",
           children: value
         }
@@ -14162,42 +14162,29 @@ 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: ${({ $cardMinWidth }) => $cardMinWidth};
-    flex-basis: var(--wui-data-cards-column-width, 0);
+    min-width: 120px;
     max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 var DataCards = ({
   children,
-  cardMinWidth = "120px",
   cardMaxWidth = "none",
   colorScheme = "inherit",
-  columns = "auto",
   ...props
 }) => {
-  const responsiveCardMinWidth = useResponsiveProp(cardMinWidth);
-  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
-  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ jsx279(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: responsiveCardMaxWidth,
-      $cardMinWidth: responsiveCardMinWidth,
+      $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
-      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
+      renderAs: "dl",
       wrapItems: true,
       children
     }
@@ -15088,11 +15075,23 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled68 } from "styled-components";
+import { styled as styled68, css as css36 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { Fragment as Fragment9, jsx as jsx293, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs47 } from "react/jsx-runtime";
+var inlineErrorStyles = css36`
+  grid-template-rows: 1fr auto;
+  grid-template-areas: 'label-description input' '. error';
+`;
+var inlineBaseGridAreaStyles = css36`
+  grid-template-rows: 1fr;
+  grid-template-areas: 'label-description input';
+`;
+var blockGridErrorStyles = css36`
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: 'label-description' 'input' 'error';
+`;
 var StyledFormField = styled68.div`
-  --form-field-spacing: var(--wui-space-01);
+  --form-field-spacing: var(--wui-space-02);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -15106,21 +15105,28 @@ var StyledFormField = styled68.div`
   &[data-label-position='inline-compact'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr auto;
+    ${inlineBaseGridAreaStyles}
+    ${({ $hasError }) => $hasError && inlineErrorStyles}
   }
 
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
-    grid-template-rows: 1fr auto;
+    ${inlineBaseGridAreaStyles}
+    ${({ $hasError }) => $hasError && inlineErrorStyles}
   }
 
   &[data-label-position='block'] {
     gap: var(--form-field-spacing);
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 'label-description' 'input';
+    ${({ $hasError }) => $hasError && blockGridErrorStyles}
   }
 `;
+var ErrorText = styled68(Text)`
+  grid-area: error;
+`;
 var StyledErrorList = styled68.ul`
   margin: 0;
   padding: 0;
@@ -15128,13 +15134,14 @@ var StyledErrorList = styled68.ul`
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-01);
+  grid-area: error;
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = isArray4(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
     return /* @__PURE__ */ jsx293(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15147,7 +15154,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ jsx293(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15192,12 +15199,16 @@ var FormField = ({
   const descriptionId = `${computedId}-description`;
   const errorId = `${computedId}-error`;
   const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+  const hasDescription = isNotNil28(description);
+  const hasError = isNotNil28(computedError);
+  const shouldRenderLabelDescriptionWrapper = !isIntegratedLabel || hasDescription;
   let childProps = {
     name,
     id: computedId,
     label: isIntegratedLabel ? label : void 0,
     "aria-describedby": ariaDescribedby,
-    "aria-invalid": isNotNil28(computedError),
+    "aria-invalid": hasError,
+    style: { gridArea: "input" },
     ...props
   };
   if (isUndefined4(value) && isNotUndefined12(defaultValue)) {
@@ -15227,28 +15238,38 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
+      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx293(
-          Label,
+        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs47(
+          Stack,
           {
-            htmlFor: computedId,
-            required,
-            children: label
+            direction: "vertical",
+            gap: "space-01",
+            style: {
+              gridArea: "label-description"
+            },
+            children: [
+              !isIntegratedLabel && /* @__PURE__ */ jsx293(
+                Label,
+                {
+                  htmlFor: computedId,
+                  required,
+                  children: label
+                }
+              ),
+              hasDescription ? /* @__PURE__ */ jsx293(FormControlLabelDescription, { id: descriptionId, children: description }) : null
+            ]
           }
-        ),
-        isNotNil28(description) ? /* @__PURE__ */ jsx293(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        ) : null,
         cloneElement8(children, childProps),
-        isNotNil28(computedError) ? /* @__PURE__ */ jsxs47(Fragment9, { children: [
-          /* @__PURE__ */ jsx293("div", {}),
-          /* @__PURE__ */ jsx293(
-            ErrorMessages,
-            {
-              errors: computedError,
-              id: errorId
-            }
-          )
-        ] }) : null
+        hasError ? /* @__PURE__ */ jsx293(
+          ErrorMessages,
+          {
+            errors: computedError,
+            id: errorId
+          }
+        ) : null
       ]
     }
   );
@@ -15284,24 +15305,24 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled69, css as css36 } from "styled-components";
+import { styled as styled69, css as css37 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx295 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
-    return css36`
+    return css37`
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     `;
   }
   const gridMode = expandItems ? "auto-fit" : "auto-fill";
   const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
   if (maxColumns === "auto") {
-    return css36`
+    return css37`
       grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
     `;
   }
-  return css36`
+  return css37`
     /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
     --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
     --wui-grid-max-column-width: calc(
@@ -15585,7 +15606,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled74, css as css37 } from "styled-components";
+import { styled as styled74, css as css38 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled73 } from "styled-components";
@@ -15604,7 +15625,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx300, jsxs as jsxs49 } from "react/jsx-runtime";
-var spacesStyle = css37`
+var spacesStyle = css38`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -15626,7 +15647,7 @@ var spacesStyle = css37`
     }
   }
 `;
-var commasStyle = css37`
+var commasStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15636,7 +15657,7 @@ var commasStyle = css37`
     }
   }
 `;
-var slashesStyle = css37`
+var slashesStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15647,7 +15668,7 @@ var slashesStyle = css37`
     }
   }
 `;
-var breadcrumbsStyle = css37`
+var breadcrumbsStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15658,7 +15679,7 @@ var breadcrumbsStyle = css37`
     }
   }
 `;
-var unbulletedStyle = css37`
+var unbulletedStyle = css38`
   list-style: none;
   padding-left: 0;
 `;
@@ -15840,7 +15861,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled78, css as css38, keyframes as keyframes5 } from "styled-components";
+import { styled as styled78, css as css39, keyframes as keyframes5 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15886,7 +15907,7 @@ var modalExit = keyframes5`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-var centeredModalStyles = css38`
+var centeredModalStyles = css39`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -15902,7 +15923,7 @@ var centeredModalStyles = css38`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var fixedTopModalStyles = css38`
+var fixedTopModalStyles = css39`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -15943,7 +15964,7 @@ var slideOutRight = keyframes5`
     transform: translateX(100%);
   }
 `;
-var rightSidePanelModalStyles = css38`
+var rightSidePanelModalStyles = css39`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -16141,7 +16162,7 @@ ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import { styled as styled82, css as css40 } from "styled-components";
+import { styled as styled82, css as css41 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -16151,7 +16172,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled81, css as css39, keyframes as keyframes7 } from "styled-components";
+import { styled as styled81, css as css40, keyframes as keyframes7 } from "styled-components";
 import { jsx as jsx307, jsxs as jsxs53 } from "react/jsx-runtime";
 var StyledPath = styled81.path`
   fill: var(--wui-color-border-secondary);
@@ -16185,7 +16206,7 @@ var StyledCircle = styled81.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css39`
+    ${({ $isAnimated }) => $isAnimated && css40`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16234,7 +16255,7 @@ import { jsx as jsx308, jsxs as jsxs54 } from "react/jsx-runtime";
 var StyledContent2 = styled82(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css40`
+  ${({ $unstyled }) => !$unstyled && css41`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -16384,17 +16405,17 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
-import { styled as styled84, css as css41 } from "styled-components";
+import { styled as styled84, css as css42 } from "styled-components";
 import { jsx as jsx310, jsxs as jsxs56 } from "react/jsx-runtime";
-var sizeSmall2 = css41`
+var sizeSmall2 = css42`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
 `;
-var sizeMedium2 = css41`
+var sizeMedium2 = css42`
   --wui-radio-size: 16px;
   --wui-radio-icon-size: 8px;
 `;
-var sizeLarge2 = css41`
+var sizeLarge2 = css42`
   --wui-radio-size: 20px;
   --wui-radio-icon-size: 10px;
 `;
@@ -16535,17 +16556,17 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import { styled as styled85, css as css42 } from "styled-components";
+import { styled as styled85, css as css43 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { jsx as jsx311, jsxs as jsxs57 } from "react/jsx-runtime";
-var checkedStyles = css42`
+var checkedStyles = css43`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-info);
   --wui-color-text: var(--wui-color-text-info);
   --wui-color-text-secondary: var(--wui-color-text-info);
 `;
-var disabledStyles = css42`
+var disabledStyles = css43`
   --wui-radio-card-border-color: var(--wui-color-border-disabled);
   --wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
   --wui-radio-card-cursor: not-allowed;
@@ -16553,10 +16574,10 @@ var disabledStyles = css42`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
-var focusStyles = css42`
+var focusStyles = css43`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = css42`
+var imageCoverStyles = css43`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -16962,7 +16983,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled91, css as css44 } from "styled-components";
+import { styled as styled91, css as css45 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -17000,7 +17021,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled90, css as css43 } from "styled-components";
+import { styled as styled90, css as css44 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -17017,7 +17038,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx317 } from "react/jsx-runtime";
-var selectedItemIndicatorStyles = css43`
+var selectedItemIndicatorStyles = css44`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
@@ -17049,7 +17070,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx318, jsxs as jsxs60 } from "react/jsx-runtime";
-var segmentedControlStyles = css44`
+var segmentedControlStyles = css45`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17099,11 +17120,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
-import { styled as styled92, css as css45 } from "styled-components";
+import { styled as styled92, css as css46 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 import { jsxs as jsxs61 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css45`
+var segmentedControlItemStyles = css46`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -17244,7 +17265,7 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled93, css as css46 } from "styled-components";
+import { styled as styled93, css as css47 } from "styled-components";
 import { jsx as jsx319, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledTrigger2 = styled93(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -17315,7 +17336,7 @@ var StyledContent3 = styled93(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css46`
+var scrollButtonStyles = css47`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -17601,25 +17622,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled97, css as css47 } from "styled-components";
+import { styled as styled97, css as css48 } from "styled-components";
 import { jsx as jsx323 } from "react/jsx-runtime";
 var StyledTable = styled97.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css47`
+  ${({ $divided }) => $divided && css48`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css47`
+  ${({ $striped }) => $striped && css48`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css47`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css48`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -17662,9 +17683,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled99, css as css48 } from "styled-components";
+import { styled as styled99, css as css49 } from "styled-components";
 import { jsx as jsx325 } from "react/jsx-runtime";
-var sharedStyles = css48`
+var sharedStyles = css49`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -17947,9 +17968,9 @@ import {
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil41 } from "@wistia/type-guards";
-import { css as css49 } from "styled-components";
+import { css as css50 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css49`
+  defaultDarkOne: css50`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -17957,7 +17978,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css49`
+  defaultDarkTwo: css50`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -17965,7 +17986,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css49`
+  defaultLightOne: css50`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -17973,13 +17994,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css49`
+  defaultLightTwo: css50`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css49`
+  defaultMidOne: css50`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -17987,13 +18008,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css49`
+  defaultMidTwo: css50`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css49`
+  green: css50`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -18001,7 +18022,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css49`
+  greenWithPop: css50`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -18009,7 +18030,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css49`
+  pink: css50`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -18017,7 +18038,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css49`
+  pinkWithPop: css50`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -18025,7 +18046,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css49`
+  playfulGradientOne: css50`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -18033,7 +18054,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css49`
+  playfulGradientTwo: css50`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -18041,13 +18062,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css49`
+  purple: css50`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css49`
+  purpleWithPop: css50`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -18055,7 +18076,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css49`
+  yellow: css50`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -18063,7 +18084,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css49`
+  yellowWithPop: css50`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -18435,8 +18456,8 @@ var Thumbnail = forwardRef37(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import { cloneElement as cloneElement9, Children as Children11 } from "react";
-import { styled as styled109 } from "styled-components";
+import React from "react";
+import { css as css51, styled as styled109 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx336 } from "react/jsx-runtime";
 var ThumbnailCollageContainer = styled109.div`
@@ -18446,12 +18467,20 @@ 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-space-01);
+  gap: var(--wui-thumbnail-collage-spacing);
   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'
@@ -18488,16 +18517,21 @@ 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 = Children11.toArray(children);
+  const thumbnailArray = React.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return cloneElement9(child, {
+    return React.cloneElement(child, {
       ...child.props,
       children: void 0
     });
@@ -18516,6 +18550,7 @@ var ThumbnailCollage = ({
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
+      $hasBackground: hasBackground,
       "data-wui-thumbnail-collage": true,
       ...props,
       children: thumbnails
@@ -18524,7 +18559,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled110, css as css50 } from "styled-components";
+import { styled as styled110, css as css52 } 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) => {
@@ -18582,12 +18617,12 @@ var WistiaLogoComponent = styled110.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css50`
+      return css52`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css50`
+    return css52`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -18651,7 +18686,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 cloneElement10 } from "react";
+import { cloneElement as cloneElement9 } from "react";
 import { jsx as jsx338, jsxs as jsxs72 } from "react/jsx-runtime";
 var StyledSplitButton = styled111.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -18716,7 +18751,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil45(secondaryAction) && cloneElement10(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil45(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";