@wistia/ui 0.18.18-beta.f646dff0.af8ca00 → 0.18.18-beta.fba14250.ac46dfb

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.18-beta.f646dff0.af8ca00
+ * @license @wistia/ui v0.18.18-beta.fba14250.ac46dfb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14100,7 +14100,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "span",
           variant: "heading6",
           children: label
         }
@@ -14109,7 +14109,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "span",
           variant: "heading3",
           children: value
         }
@@ -14162,29 +14162,42 @@ 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;
+    min-width: ${({ $cardMinWidth }) => $cardMinWidth};
+    flex-basis: var(--wui-data-cards-column-width, 0);
     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: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
+      $cardMinWidth: responsiveCardMinWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }
@@ -15075,23 +15088,11 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled68, css as css36 } from "styled-components";
+import { styled as styled68 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-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';
-`;
+import { Fragment as Fragment9, jsx as jsx293, jsxs as jsxs47 } from "react/jsx-runtime";
 var StyledFormField = styled68.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);
 
@@ -15105,28 +15106,21 @@ var StyledFormField = styled68.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 = styled68(Text)`
-  grid-area: error;
-`;
 var StyledErrorList = styled68.ul`
   margin: 0;
   padding: 0;
@@ -15134,14 +15128,13 @@ 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(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
@@ -15154,7 +15147,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ jsx293(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
@@ -15199,16 +15192,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)) {
@@ -15238,38 +15227,28 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
-      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs47(
-          Stack,
+        !isIntegratedLabel && /* @__PURE__ */ jsx293(
+          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
-            ]
+            htmlFor: computedId,
+            required,
+            children: label
           }
-        ) : null,
+        ),
+        isNotNil28(description) ? /* @__PURE__ */ jsx293(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
-        hasError ? /* @__PURE__ */ jsx293(
-          ErrorMessages,
-          {
-            errors: computedError,
-            id: errorId
-          }
-        ) : null
+        isNotNil28(computedError) ? /* @__PURE__ */ jsxs47(Fragment9, { children: [
+          /* @__PURE__ */ jsx293("div", {}),
+          /* @__PURE__ */ jsx293(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: errorId
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -15305,24 +15284,24 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled69, css as css37 } from "styled-components";
+import { styled as styled69, css as css36 } 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 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(
@@ -15606,7 +15585,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled74, css as css38 } from "styled-components";
+import { styled as styled74, css as css37 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled73 } from "styled-components";
@@ -15625,7 +15604,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx300, jsxs as jsxs49 } from "react/jsx-runtime";
-var spacesStyle = css38`
+var spacesStyle = css37`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -15647,7 +15626,7 @@ var spacesStyle = css38`
     }
   }
 `;
-var commasStyle = css38`
+var commasStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15657,7 +15636,7 @@ var commasStyle = css38`
     }
   }
 `;
-var slashesStyle = css38`
+var slashesStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15668,7 +15647,7 @@ var slashesStyle = css38`
     }
   }
 `;
-var breadcrumbsStyle = css38`
+var breadcrumbsStyle = css37`
   ${spacesStyle};
 
   li {
@@ -15679,7 +15658,7 @@ var breadcrumbsStyle = css38`
     }
   }
 `;
-var unbulletedStyle = css38`
+var unbulletedStyle = css37`
   list-style: none;
   padding-left: 0;
 `;
@@ -15861,7 +15840,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled78, css as css39, keyframes as keyframes5 } from "styled-components";
+import { styled as styled78, css as css38, keyframes as keyframes5 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15907,7 +15886,7 @@ var modalExit = keyframes5`
     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%;
 
@@ -15923,7 +15902,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%;
@@ -15964,7 +15943,7 @@ var slideOutRight = keyframes5`
     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);
@@ -16162,7 +16141,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 css41 } from "styled-components";
+import { styled as styled82, css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -16172,7 +16151,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 css40, keyframes as keyframes7 } from "styled-components";
+import { styled as styled81, css as css39, 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);
@@ -16206,7 +16185,7 @@ var StyledCircle = styled81.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css40`
+    ${({ $isAnimated }) => $isAnimated && css39`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16255,7 +16234,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 && css41`
+  ${({ $unstyled }) => !$unstyled && css40`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -16405,17 +16384,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 css42 } from "styled-components";
+import { styled as styled84, css as css41 } from "styled-components";
 import { jsx as jsx310, jsxs as jsxs56 } 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;
 `;
@@ -16556,17 +16535,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 css43 } from "styled-components";
+import { styled as styled85, css as css42 } 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 = 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;
@@ -16574,10 +16553,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;
@@ -16983,7 +16962,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled91, css as css45 } from "styled-components";
+import { styled as styled91, css as css44 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -17021,7 +17000,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled90, css as css44 } from "styled-components";
+import { styled as styled90, css as css43 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -17038,7 +17017,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx317 } 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);
@@ -17070,7 +17049,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx318, jsxs as jsxs60 } 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);
@@ -17120,11 +17099,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 css46 } from "styled-components";
+import { styled as styled92, 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 jsxs61 } 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);
@@ -17265,7 +17244,7 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled93, css as css47 } from "styled-components";
+import { styled as styled93, css as css46 } from "styled-components";
 import { jsx as jsx319, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledTrigger2 = styled93(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -17336,7 +17315,7 @@ var StyledContent3 = styled93(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css47`
+var scrollButtonStyles = css46`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -17622,25 +17601,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled97, css as css48 } from "styled-components";
+import { styled as styled97, css as css47 } from "styled-components";
 import { jsx as jsx323 } from "react/jsx-runtime";
 var StyledTable = styled97.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}
       }
@@ -17683,9 +17662,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled99, css as css49 } from "styled-components";
+import { styled as styled99, css as css48 } from "styled-components";
 import { jsx as jsx325 } from "react/jsx-runtime";
-var sharedStyles = css49`
+var sharedStyles = css48`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -17968,9 +17947,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%),
@@ -17978,7 +17957,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%),
@@ -17986,7 +17965,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%),
@@ -17994,13 +17973,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%),
@@ -18008,13 +17987,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%),
@@ -18022,7 +18001,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%),
@@ -18030,7 +18009,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%),
@@ -18038,7 +18017,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%),
@@ -18046,7 +18025,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%),
@@ -18054,7 +18033,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%),
@@ -18062,13 +18041,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%),
@@ -18076,7 +18055,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%),
@@ -18084,7 +18063,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%),
@@ -18545,7 +18524,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled110, css as css51 } from "styled-components";
+import { styled as styled110, css as css50 } 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) => {
@@ -18603,12 +18582,12 @@ var WistiaLogoComponent = styled110.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;
       `;
   }