@wistia/ui 0.18.18 → 0.19.0-beta.d1967016.e87d448

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.18
+ * @license @wistia/ui v0.19.0-beta.d1967016.e87d448
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14059,6 +14059,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 +14104,7 @@ var DataCardInner = ({
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dt",
+          renderAs: "div",
           variant: "heading6",
           children: label
         }
@@ -14109,7 +14113,7 @@ var DataCardInner = ({
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
-          renderAs: "dd",
+          renderAs: "div",
           variant: "heading3",
           children: value
         }
@@ -14162,9 +14166,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 +14183,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
     }
@@ -15075,11 +15089,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);
 
@@ -15093,21 +15119,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;
@@ -15115,13 +15148,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,
@@ -15134,7 +15168,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ jsx293(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15179,12 +15213,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)) {
@@ -15214,28 +15252,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
       ]
     }
   );
@@ -15271,24 +15319,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(
@@ -15572,7 +15620,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";
@@ -15591,7 +15639,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;
@@ -15613,7 +15661,7 @@ var spacesStyle = css37`
     }
   }
 `;
-var commasStyle = css37`
+var commasStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15623,7 +15671,7 @@ var commasStyle = css37`
     }
   }
 `;
-var slashesStyle = css37`
+var slashesStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15634,7 +15682,7 @@ var slashesStyle = css37`
     }
   }
 `;
-var breadcrumbsStyle = css37`
+var breadcrumbsStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15645,7 +15693,7 @@ var breadcrumbsStyle = css37`
     }
   }
 `;
-var unbulletedStyle = css37`
+var unbulletedStyle = css38`
   list-style: none;
   padding-left: 0;
 `;
@@ -15827,7 +15875,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
@@ -15873,7 +15921,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%;
 
@@ -15889,7 +15937,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%;
@@ -15930,7 +15978,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);
@@ -16128,7 +16176,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";
@@ -16138,7 +16186,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);
@@ -16172,7 +16220,7 @@ var StyledCircle = styled81.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css39`
+    ${({ $isAnimated }) => $isAnimated && css40`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16221,7 +16269,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);
@@ -16371,17 +16419,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;
 `;
@@ -16522,17 +16570,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;
@@ -16540,10 +16588,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;
@@ -16949,7 +16997,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";
 
@@ -16987,7 +17035,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
@@ -17004,7 +17052,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);
@@ -17036,7 +17084,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);
@@ -17086,11 +17134,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);
@@ -17231,7 +17279,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)};
@@ -17302,7 +17350,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;
@@ -17588,25 +17636,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}
       }
@@ -17649,9 +17697,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;
@@ -17934,9 +17982,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%),
@@ -17944,7 +17992,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%),
@@ -17952,7 +18000,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%),
@@ -17960,13 +18008,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%),
@@ -17974,13 +18022,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%),
@@ -17988,7 +18036,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%),
@@ -17996,7 +18044,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%),
@@ -18004,7 +18052,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%),
@@ -18012,7 +18060,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%),
@@ -18020,7 +18068,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%),
@@ -18028,13 +18076,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%),
@@ -18042,7 +18090,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%),
@@ -18050,7 +18098,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%),
@@ -18511,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 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) => {
@@ -18569,12 +18617,12 @@ var WistiaLogoComponent = styled110.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css50`
+      return css51`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css50`
+    return css51`
         aspect-ratio: 127 / 32;
       `;
   }