@wistia/ui 0.18.10-beta.85f50c74.84b332c → 0.18.10-beta.8a03a833.0d3d223

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.10-beta.85f50c74.84b332c
+ * @license @wistia/ui v0.18.10-beta.8a03a833.0d3d223
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2807,26 +2807,11 @@ var useForceUpdate = () => {
 import { useState as useState6 } from "react";
 var useIsHovered = () => {
   const [isHovered, setIsHovered] = useState6(false);
-  const onFocus = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onMouseEnter = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onMouseMove = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onBlur = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(false);
-  };
-  const onMouseLeave = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(false);
-  };
+  const onFocus = () => setIsHovered(true);
+  const onMouseEnter = () => setIsHovered(true);
+  const onMouseMove = () => setIsHovered(true);
+  const onBlur = () => setIsHovered(false);
+  const onMouseLeave = () => setIsHovered(false);
   const hoverProps = {
     onFocus,
     onMouseEnter,
@@ -14992,23 +14977,11 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled67, css as css36 } from "styled-components";
+import { styled as styled67 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { jsx as jsx288, jsxs as jsxs49 } 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';
-`;
+import { Fragment as Fragment9, jsx as jsx288, jsxs as jsxs49 } from "react/jsx-runtime";
 var StyledFormField = styled67.div`
-  --form-field-spacing: var(--wui-space-02);
+  --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -15022,28 +14995,21 @@ var StyledFormField = styled67.div`
   &[data-label-position='inline-compact'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: auto 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='block'] {
     gap: var(--form-field-spacing);
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: 'label-description' 'input';
-    ${({ $hasError }) => $hasError && blockGridErrorStyles}
+    grid-template-rows: 1fr;
   }
 `;
-var ErrorText = styled67(Text)`
-  grid-area: error;
-`;
 var StyledErrorList = styled67.ul`
   margin: 0;
   padding: 0;
@@ -15051,19 +15017,17 @@ var StyledErrorList = styled67.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__ */ jsx288(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
-        style: { gridArea: "error" },
         variant: "label4",
         children: errors
       },
@@ -15072,12 +15036,11 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ jsx288(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
-        style: { gridArea: "error" },
         variant: "label4",
         children: errors[0]
       },
@@ -15118,16 +15081,12 @@ 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": hasError,
-    style: { gridArea: "input" },
+    "aria-invalid": isNotNil28(computedError),
     ...props
   };
   if (isUndefined4(value) && isNotUndefined12(defaultValue)) {
@@ -15157,38 +15116,28 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
-      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs49(
-          Stack,
+        !isIntegratedLabel && /* @__PURE__ */ jsx288(
+          Label,
           {
-            direction: "vertical",
-            gap: "space-01",
-            style: {
-              gridArea: "label-description"
-            },
-            children: [
-              !isIntegratedLabel && /* @__PURE__ */ jsx288(
-                Label,
-                {
-                  htmlFor: computedId,
-                  required,
-                  children: label
-                }
-              ),
-              hasDescription ? /* @__PURE__ */ jsx288(FormControlLabelDescription, { id: descriptionId, children: description }) : null
-            ]
+            htmlFor: computedId,
+            required,
+            children: label
           }
-        ) : null,
+        ),
+        isNotNil28(description) ? /* @__PURE__ */ jsx288(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
-        hasError ? /* @__PURE__ */ jsx288(
-          ErrorMessages,
-          {
-            errors: computedError,
-            id: errorId
-          }
-        ) : null
+        isNotNil28(computedError) ? /* @__PURE__ */ jsxs49(Fragment9, { children: [
+          /* @__PURE__ */ jsx288("div", {}),
+          /* @__PURE__ */ jsx288(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: errorId
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -15224,24 +15173,24 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled68, css as css37 } from "styled-components";
+import { styled as styled68, css as css36 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx290 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
-    return css37`
+    return css36`
       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 css37`
+    return css36`
       grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
     `;
   }
-  return css37`
+  return css36`
     /* 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(
@@ -15525,7 +15474,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled73, css as css38 } from "styled-components";
+import { styled as styled73, css as css37 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled72 } from "styled-components";
@@ -15544,7 +15493,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx295, jsxs as jsxs51 } from "react/jsx-runtime";
-var spacesStyle = css38`
+var spacesStyle = css37`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -15566,7 +15515,7 @@ var spacesStyle = css38`
     }
   }
 `;
-var commasStyle = css38`
+var commasStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15576,7 +15525,7 @@ var commasStyle = css38`
     }
   }
 `;
-var slashesStyle = css38`
+var slashesStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15587,7 +15536,7 @@ var slashesStyle = css38`
     }
   }
 `;
-var breadcrumbsStyle = css38`
+var breadcrumbsStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15598,7 +15547,7 @@ var breadcrumbsStyle = css38`
     }
   }
 `;
-var unbulletedStyle = css38`
+var unbulletedStyle = css37`
   list-style: none;
   padding-left: 0;
 `;
@@ -15780,7 +15729,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled77, css as css39, keyframes as keyframes4 } from "styled-components";
+import { styled as styled77, css as css38, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15826,7 +15775,7 @@ var modalExit = keyframes4`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-var centeredModalStyles = css39`
+var centeredModalStyles = css38`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -15842,7 +15791,7 @@ var centeredModalStyles = css39`
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
 `;
-var fixedTopModalStyles = css39`
+var fixedTopModalStyles = css38`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -15883,7 +15832,7 @@ var slideOutRight = keyframes4`
     transform: translateX(100%);
   }
 `;
-var rightSidePanelModalStyles = css39`
+var rightSidePanelModalStyles = css38`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -16081,7 +16030,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 styled81, css as css41 } from "styled-components";
+import { styled as styled81, css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -16091,7 +16040,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import { styled as styled80, css as css40, keyframes as keyframes6 } from "styled-components";
+import { styled as styled80, css as css39, keyframes as keyframes6 } from "styled-components";
 import { jsx as jsx302, jsxs as jsxs55 } from "react/jsx-runtime";
 var StyledPath = styled80.path`
   fill: var(--wui-color-border-secondary);
@@ -16125,7 +16074,7 @@ var StyledCircle = styled80.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css40`
+    ${({ $isAnimated }) => $isAnimated && css39`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16174,7 +16123,7 @@ import { jsx as jsx303, jsxs as jsxs56 } from "react/jsx-runtime";
 var StyledContent2 = styled81(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css41`
+  ${({ $unstyled }) => !$unstyled && css40`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -16324,17 +16273,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 styled83, css as css42 } from "styled-components";
+import { styled as styled83, css as css41 } from "styled-components";
 import { jsx as jsx305, jsxs as jsxs58 } from "react/jsx-runtime";
-var sizeSmall2 = css42`
+var sizeSmall2 = css41`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
 `;
-var sizeMedium2 = css42`
+var sizeMedium2 = css41`
   --wui-radio-size: 16px;
   --wui-radio-icon-size: 8px;
 `;
-var sizeLarge2 = css42`
+var sizeLarge2 = css41`
   --wui-radio-size: 20px;
   --wui-radio-icon-size: 10px;
 `;
@@ -16475,17 +16424,17 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import { styled as styled84, css as css43 } from "styled-components";
+import { styled as styled84, css as css42 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { jsx as jsx306, jsxs as jsxs59 } from "react/jsx-runtime";
-var checkedStyles = css43`
+var checkedStyles = css42`
   --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 = css43`
+var disabledStyles = css42`
   --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;
@@ -16493,10 +16442,10 @@ var disabledStyles = css43`
   --wui-color-text: var(--wui-color-text-disabled);
   --wui-color-text-secondary: var(--wui-color-text-disabled);
 `;
-var focusStyles = css43`
+var focusStyles = css42`
   outline: 2px solid var(--wui-color-focus-ring);
 `;
-var imageCoverStyles = css43`
+var imageCoverStyles = css42`
   --wui-radio-card-image-inset: 0px;
   --wui-radio-card-border-width: 0px;
   --wui-inset-shadow-width: 1px;
@@ -16902,7 +16851,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled90, css as css45 } from "styled-components";
+import { styled as styled90, css as css44 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -16940,7 +16889,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled89, css as css44 } from "styled-components";
+import { styled as styled89, css as css43 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16957,7 +16906,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx312 } from "react/jsx-runtime";
-var selectedItemIndicatorStyles = css44`
+var selectedItemIndicatorStyles = css43`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
@@ -16989,7 +16938,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx313, jsxs as jsxs62 } from "react/jsx-runtime";
-var segmentedControlStyles = css45`
+var segmentedControlStyles = css44`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17039,11 +16988,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 styled91, css as css46 } from "styled-components";
+import { styled as styled91, css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 import { jsxs as jsxs63 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css46`
+var segmentedControlItemStyles = css45`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -17184,7 +17133,7 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled92, css as css47 } from "styled-components";
+import { styled as styled92, css as css46 } from "styled-components";
 import { jsx as jsx314, jsxs as jsxs64 } from "react/jsx-runtime";
 var StyledTrigger2 = styled92(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -17255,7 +17204,7 @@ var StyledContent3 = styled92(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css47`
+var scrollButtonStyles = css46`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -17541,25 +17490,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled96, css as css48 } from "styled-components";
+import { styled as styled96, css as css47 } from "styled-components";
 import { jsx as jsx318 } from "react/jsx-runtime";
 var StyledTable = styled96.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && css48`
+  ${({ $divided }) => $divided && css47`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && css48`
+  ${({ $striped }) => $striped && css47`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css48`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css47`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -17585,7 +17534,6 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import "react";
 import { styled as styled97 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
@@ -17601,9 +17549,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled98, css as css49 } from "styled-components";
+import { styled as styled98, css as css48 } from "styled-components";
 import { jsx as jsx320 } from "react/jsx-runtime";
-var sharedStyles = css49`
+var sharedStyles = css48`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -17629,7 +17577,6 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-import "react";
 import { styled as styled99 } from "styled-components";
 import { jsx as jsx321 } from "react/jsx-runtime";
 var StyledTableFoot = styled99.tfoot``;
@@ -17638,7 +17585,6 @@ var TableFoot = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableHead.tsx
-import "react";
 import { styled as styled100 } from "styled-components";
 import { jsx as jsx322 } from "react/jsx-runtime";
 var StyledThead = styled100.thead``;
@@ -17882,9 +17828,9 @@ import {
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil41 } from "@wistia/type-guards";
-import { css as css50 } from "styled-components";
+import { css as css49 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css50`
+  defaultDarkOne: css49`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -17892,7 +17838,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css50`
+  defaultDarkTwo: css49`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -17900,7 +17846,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css50`
+  defaultLightOne: css49`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -17908,13 +17854,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css50`
+  defaultLightTwo: css49`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css50`
+  defaultMidOne: css49`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -17922,13 +17868,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css50`
+  defaultMidTwo: css49`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css50`
+  green: css49`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -17936,7 +17882,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css50`
+  greenWithPop: css49`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -17944,7 +17890,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css50`
+  pink: css49`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -17952,7 +17898,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css50`
+  pinkWithPop: css49`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -17960,7 +17906,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css50`
+  playfulGradientOne: css49`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -17968,7 +17914,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css50`
+  playfulGradientTwo: css49`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -17976,13 +17922,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css50`
+  purple: css49`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css50`
+  purpleWithPop: css49`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -17990,7 +17936,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css50`
+  yellow: css49`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -17998,7 +17944,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css50`
+  yellowWithPop: css49`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -18370,7 +18316,7 @@ var Thumbnail = forwardRef37(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import React5 from "react";
+import { cloneElement as cloneElement9, Children as Children11 } from "react";
 import { styled as styled108 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx331 } from "react/jsx-runtime";
@@ -18429,10 +18375,10 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  const thumbnailArray = React5.Children.toArray(children);
+  const thumbnailArray = Children11.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = isNonEmptyArray(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return React5.cloneElement(child, {
+    return cloneElement9(child, {
       ...child.props,
       children: void 0
     });
@@ -18459,7 +18405,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled109, css as css51 } from "styled-components";
+import { styled as styled109, css as css50 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx332, jsxs as jsxs73 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -18517,12 +18463,12 @@ var WistiaLogoComponent = styled109.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css51`
+      return css50`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css51`
+    return css50`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -18586,7 +18532,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 // src/components/SplitButton/SplitButton.tsx
 import { styled as styled110 } 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 jsx333, jsxs as jsxs74 } from "react/jsx-runtime";
 var StyledSplitButton = styled110.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -18651,7 +18597,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";