@wistia/ui 0.18.10-beta.5c9d9d20.4e8e531 → 0.18.10-beta.85f50c74.84b332c

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.10-beta.5c9d9d20.4e8e531
+ * @license @wistia/ui v0.18.10-beta.85f50c74.84b332c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14992,11 +14992,23 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import { styled as styled67 } from "styled-components";
+import { styled as styled67, 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 jsx288, jsxs as jsxs49 } from "react/jsx-runtime";
+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';
+`;
 var StyledFormField = styled67.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);
 
@@ -15010,21 +15022,28 @@ var StyledFormField = styled67.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 = styled67(Text)`
+  grid-area: error;
+`;
 var StyledErrorList = styled67.ul`
   margin: 0;
   padding: 0;
@@ -15032,17 +15051,19 @@ 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(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
+        style: { gridArea: "error" },
         variant: "label4",
         children: errors
       },
@@ -15051,11 +15072,12 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ jsx288(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
+        style: { gridArea: "error" },
         variant: "label4",
         children: errors[0]
       },
@@ -15096,12 +15118,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)) {
@@ -15131,28 +15157,38 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
+      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx288(
-          Label,
+        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ jsxs49(
+          Stack,
           {
-            htmlFor: computedId,
-            required,
-            children: 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
+            ]
           }
-        ),
-        isNotNil28(description) ? /* @__PURE__ */ jsx288(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        ) : null,
         cloneElement8(children, childProps),
-        isNotNil28(computedError) ? /* @__PURE__ */ jsxs49(Fragment9, { children: [
-          /* @__PURE__ */ jsx288("div", {}),
-          /* @__PURE__ */ jsx288(
-            ErrorMessages,
-            {
-              errors: computedError,
-              id: errorId
-            }
-          )
-        ] }) : null
+        hasError ? /* @__PURE__ */ jsx288(
+          ErrorMessages,
+          {
+            errors: computedError,
+            id: errorId
+          }
+        ) : null
       ]
     }
   );
@@ -15188,24 +15224,24 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { styled as styled68, css as css36 } from "styled-components";
+import { styled as styled68, css as css37 } 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 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(
@@ -15489,7 +15525,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import { styled as styled73, css as css37 } from "styled-components";
+import { styled as styled73, css as css38 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled72 } from "styled-components";
@@ -15508,7 +15544,7 @@ ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx295, jsxs as jsxs51 } from "react/jsx-runtime";
-var spacesStyle = css37`
+var spacesStyle = css38`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -15530,7 +15566,7 @@ var spacesStyle = css37`
     }
   }
 `;
-var commasStyle = css37`
+var commasStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15540,7 +15576,7 @@ var commasStyle = css37`
     }
   }
 `;
-var slashesStyle = css37`
+var slashesStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15551,7 +15587,7 @@ var slashesStyle = css37`
     }
   }
 `;
-var breadcrumbsStyle = css37`
+var breadcrumbsStyle = css38`
   ${spacesStyle};
 
   li {
@@ -15562,7 +15598,7 @@ var breadcrumbsStyle = css37`
     }
   }
 `;
-var unbulletedStyle = css37`
+var unbulletedStyle = css38`
   list-style: none;
   padding-left: 0;
 `;
@@ -15744,7 +15780,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { styled as styled77, css as css38, keyframes as keyframes4 } from "styled-components";
+import { styled as styled77, css as css39, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15790,7 +15826,7 @@ var modalExit = keyframes4`
     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%;
 
@@ -15806,7 +15842,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%;
@@ -15847,7 +15883,7 @@ var slideOutRight = keyframes4`
     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);
@@ -16045,7 +16081,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 css40 } from "styled-components";
+import { styled as styled81, css as css41 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -16055,7 +16091,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 css39, keyframes as keyframes6 } from "styled-components";
+import { styled as styled80, css as css40, 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);
@@ -16089,7 +16125,7 @@ var StyledCircle = styled80.circle`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css39`
+    ${({ $isAnimated }) => $isAnimated && css40`
         animation-name: ${circleAnimation};
       `}
   }
@@ -16138,7 +16174,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 && css40`
+  ${({ $unstyled }) => !$unstyled && css41`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -16288,17 +16324,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 css41 } from "styled-components";
+import { styled as styled83, css as css42 } from "styled-components";
 import { jsx as jsx305, jsxs as jsxs58 } 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;
 `;
@@ -16439,17 +16475,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 css42 } from "styled-components";
+import { styled as styled84, css as css43 } 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 = 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;
@@ -16457,10 +16493,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;
@@ -16866,7 +16902,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { styled as styled90, css as css44 } from "styled-components";
+import { styled as styled90, css as css45 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -16904,7 +16940,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { styled as styled89, css as css43 } from "styled-components";
+import { styled as styled89, css as css44 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16921,7 +16957,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx312 } 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);
@@ -16953,7 +16989,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx313, jsxs as jsxs62 } 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);
@@ -17003,11 +17039,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 css45 } from "styled-components";
+import { styled as styled91, 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 jsxs63 } 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);
@@ -17148,7 +17184,7 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import { styled as styled92, css as css46 } from "styled-components";
+import { styled as styled92, css as css47 } from "styled-components";
 import { jsx as jsx314, jsxs as jsxs64 } from "react/jsx-runtime";
 var StyledTrigger2 = styled92(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -17219,7 +17255,7 @@ var StyledContent3 = styled92(Content3)`
     margin: var(--wui-space-02) 0;
   }
 `;
-var scrollButtonStyles = css46`
+var scrollButtonStyles = css47`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -17505,25 +17541,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import { styled as styled96, css as css47 } from "styled-components";
+import { styled as styled96, css as css48 } from "styled-components";
 import { jsx as jsx318 } from "react/jsx-runtime";
 var StyledTable = styled96.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}
       }
@@ -17565,9 +17601,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import { styled as styled98, css as css48 } from "styled-components";
+import { styled as styled98, css as css49 } from "styled-components";
 import { jsx as jsx320 } from "react/jsx-runtime";
-var sharedStyles = css48`
+var sharedStyles = css49`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -17846,9 +17882,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%),
@@ -17856,7 +17892,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%),
@@ -17864,7 +17900,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%),
@@ -17872,13 +17908,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%),
@@ -17886,13 +17922,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%),
@@ -17900,7 +17936,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%),
@@ -17908,7 +17944,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%),
@@ -17916,7 +17952,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%),
@@ -17924,7 +17960,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%),
@@ -17932,7 +17968,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%),
@@ -17940,13 +17976,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%),
@@ -17954,7 +17990,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%),
@@ -17962,7 +17998,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%),
@@ -18423,7 +18459,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled109, css as css50 } from "styled-components";
+import { styled as styled109, css as css51 } 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) => {
@@ -18481,12 +18517,12 @@ var WistiaLogoComponent = styled109.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;
       `;
   }