@wistia/ui 0.6.34 → 0.6.35

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.34
+ * @license @wistia/ui v0.6.35
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7186,7 +7186,7 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
-import styled10 from "styled-components";
+import styled10, { css as css17 } from "styled-components";
 import { isNotNil as isNotNil7, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7238,6 +7238,38 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
+var getFlexStyle = (flexMode) => {
+  if (!flexMode) return null;
+  switch (flexMode) {
+    // grows to fill space, won't shrink, starts at 0
+    case "grow":
+      return css17`
+        flex: 1 0 0;
+      `;
+    // default behavior, can shrink but won't grow
+    case "initial":
+      return css17`
+        flex: 0 1 auto;
+      `;
+    // equal distribution of space
+    case "equal":
+      return css17`
+        flex: 1;
+      `;
+    // won't grow or shrink
+    case "rigid":
+      return css17`
+        flex: 0 0 auto;
+      `;
+    // can grow and shrink from content size
+    case "fluid":
+      return css17`
+        flex: 1 1 auto;
+      `;
+    default:
+      return null;
+  }
+};
 var StyledBoxComponent = styled10.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
@@ -7247,6 +7279,8 @@ var StyledBoxComponent = styled10.div`
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
+  ${({ $flexMode }) => getFlexStyle($flexMode)};
+  ${({ $gap }) => getGapStyle($gap)};
   height: ${({ $height }) => $height ?? null};
   width: ${({ $width }) => $width ?? null};
 
@@ -7254,7 +7288,6 @@ var StyledBoxComponent = styled10.div`
   flex-grow: ${({ $grow }) => isNotNil7($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => isNotNil7($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => isNotNil7($order) ? $order : null};
 `;
@@ -7297,6 +7330,7 @@ var BoxComponent = forwardRef5(
     shrink,
     width,
     wrapItems = false,
+    flexMode,
     ...otherProps
   }, ref) => {
     if (isNotUndefined4(height)) {
@@ -7330,6 +7364,7 @@ var BoxComponent = forwardRef5(
         $fillBox: fill,
         $fillViewport: fillViewport,
         $flexDirection: direction,
+        $flexMode: flexMode,
         $gap: gap,
         $grow: grow,
         $height: height,
@@ -7585,18 +7620,18 @@ Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef7, useId } from "react";
-import styled19, { css as css19 } from "styled-components";
+import styled19, { css as css20 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled18, { css as css18 } from "styled-components";
+import styled18, { css as css19 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled16, { css as css17 } from "styled-components";
+import styled16, { css as css18 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
 import { jsx as jsx204 } from "react/jsx-runtime";
-var disabledStyle = css17`
+var disabledStyle = css18`
   color: var(--wui-color-text-disabled);
 `;
 var StyledFormControlLabelDescription = styled16.div`
@@ -7652,7 +7687,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx206, jsxs as jsxs13 } from "react/jsx-runtime";
-var disabledStyle2 = css18`
+var disabledStyle2 = css19`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
@@ -7723,7 +7758,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx207(
     )
   }
 );
-var sizeSmall = css19`
+var sizeSmall = css20`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -7734,7 +7769,7 @@ var sizeSmall = css19`
     height: 7px;
   }
 `;
-var sizeMedium = css19`
+var sizeMedium = css20`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -7745,7 +7780,7 @@ var sizeMedium = css19`
     height: 9px;
   }
 `;
-var sizeLarge = css19`
+var sizeLarge = css20`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -7954,45 +7989,45 @@ import { isNotNull } from "@wistia/type-guards";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled22, { css as css20 } from "styled-components";
+import styled22, { css as css21 } from "styled-components";
 import { jsx as jsx211 } from "react/jsx-runtime";
-var heroStyle = css20`
+var heroStyle = css21`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css20`
+var heading1TextStyle = css21`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = css20`
+var heading2TextStyle = css21`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = css20`
+var heading3TextStyle = css21`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = css20`
+var heading4TextStyle = css21`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = css20`
+var heading5TextStyle = css21`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = css20`
+var heading6TextStyle = css21`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8017,16 +8052,16 @@ var StyledHeading = styled22.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css20`
+  ${({ $inline }) => $inline && css21`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css20`
+  ${({ $disabled }) => $disabled && css21`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css20`
+  ${({ $preventUserSelect }) => $preventUserSelect && css21`
       user-select: none;
     `}
-  ${({ $align }) => css20`
+  ${({ $align }) => css21`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8205,21 +8240,21 @@ import styled26 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled25, { css as css21 } from "styled-components";
+import styled25, { css as css22 } from "styled-components";
 import { jsx as jsx214 } from "react/jsx-runtime";
-var bodyBoldStyles = css21`
+var bodyBoldStyles = css22`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css21`
+var labelBoldStyles = css22`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css21`
+var body1TextStyle = css22`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8227,7 +8262,7 @@ var body1TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css21`
+var body2TextStyle = css22`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8235,7 +8270,7 @@ var body2TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css21`
+var body3TextStyle = css22`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8243,7 +8278,7 @@ var body3TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css21`
+var body4TextStyle = css22`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8251,47 +8286,47 @@ var body4TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css21`
+var label1TextStyle = css22`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css21`
+var label2TextStyle = css22`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css21`
+var label3TextStyle = css22`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css21`
+var label4TextStyle = css22`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css21`
+var body1MonoTextStyle = css22`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css21`
+var body2MonoTextStyle = css22`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css21`
+var body3MonoTextStyle = css22`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css21`
+var body4MonoTextStyle = css22`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8350,19 +8385,19 @@ var StyledText = styled25.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css21`
+  ${({ $inline }) => $inline && css22`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css21`
+  ${({ $disabled }) => $disabled && css22`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css21`
+  ${({ $preventUserSelect }) => $preventUserSelect && css22`
       user-select: none;
     `}
-  ${({ $align }) => css21`
+  ${({ $align }) => css22`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css21`
+  ${({ as }) => as === "p" && css22`
       display: block;
 
       + p {
@@ -8442,16 +8477,16 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled27, { css as css22 } from "styled-components";
+import styled27, { css as css23 } from "styled-components";
 import { jsx as jsx216 } from "react/jsx-runtime";
-var horizontalBorderCss = css22`
+var horizontalBorderCss = css23`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = css22`
+var verticalBorderCss = css23`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -8485,7 +8520,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled30, { css as css25 } from "styled-components";
+import styled30, { css as css26 } from "styled-components";
 import { useState as useState6, useRef as useRef4 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8496,9 +8531,9 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled28, { css as css23 } from "styled-components";
+import styled28, { css as css24 } from "styled-components";
 import { jsx as jsx217, jsxs as jsxs18 } from "react/jsx-runtime";
-var CompactTooltipStyles = css23`
+var CompactTooltipStyles = css24`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
@@ -8602,10 +8637,10 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef3 } from "react";
-import styled29, { css as css24 } from "styled-components";
+import styled29, { css as css25 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil11, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
-var inputStyles = css24`
+var inputStyles = css25`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -8785,7 +8820,7 @@ var StyledInput = styled30(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css25`
+var editableStyles = css26`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9119,9 +9154,9 @@ import styled35 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil12, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled33, { css as css26 } from "styled-components";
+import styled33, { css as css27 } from "styled-components";
 import { jsx as jsx223 } from "react/jsx-runtime";
-var requiredStyle = css26`
+var requiredStyle = css27`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9129,7 +9164,7 @@ var requiredStyle = css26`
     content: '*';
   }
 `;
-var disabledStyle3 = css26`
+var disabledStyle3 = css27`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled33.label`
@@ -9484,7 +9519,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled38, { css as css27, keyframes as keyframes2 } from "styled-components";
+import styled38, { css as css28, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9521,7 +9556,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css27`
+var menuItemCss = css28`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9532,7 +9567,7 @@ var menuItemCss = css27`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css27`
+var compactMenuItemCss = css28`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9543,7 +9578,7 @@ var compactMenuItemCss = css27`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css27`
+var menuContentCss = css28`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10315,7 +10350,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled48, { css as css28 } from "styled-components";
+import styled48, { css as css29 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil19 } from "@wistia/type-guards";
@@ -10326,7 +10361,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
-  ${({ $unstyled }) => !$unstyled && css28`
+  ${({ $unstyled }) => !$unstyled && css29`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10457,7 +10492,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef19, useId as useId3 } from "react";
-import styled50, { css as css29 } from "styled-components";
+import styled50, { css as css30 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx246(
@@ -10479,7 +10514,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     )
   }
 );
-var sizeSmall2 = css29`
+var sizeSmall2 = css30`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10490,7 +10525,7 @@ var sizeSmall2 = css29`
     height: 7px;
   }
 `;
-var sizeMedium2 = css29`
+var sizeMedium2 = css30`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10501,7 +10536,7 @@ var sizeMedium2 = css29`
     height: 8px;
   }
 `;
-var sizeLarge2 = css29`
+var sizeLarge2 = css30`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10625,7 +10660,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled52, { css as css30 } from "styled-components";
+import styled52, { css as css31 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
@@ -10716,7 +10751,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx249, jsxs as jsxs34 } from "react/jsx-runtime";
-var segmentedControlStyles = css30`
+var segmentedControlStyles = css31`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10765,7 +10800,7 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef9 } from "react";
-import styled53, { css as css31 } from "styled-components";
+import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
@@ -10785,7 +10820,7 @@ var mergeRefs = (refs) => (value) => {
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { jsxs as jsxs35 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css31`
+var segmentedControlItemStyles = css32`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11108,10 +11143,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef24, useId as useId4 } from "react";
-import styled57, { css as css32 } from "styled-components";
+import styled57, { css as css33 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
-var sizeSmall3 = css32`
+var sizeSmall3 = css33`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11126,7 +11161,7 @@ var sizeSmall3 = css32`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css32`
+var sizeMedium3 = css33`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11141,7 +11176,7 @@ var sizeMedium3 = css32`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css32`
+var sizeLarge3 = css33`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11270,19 +11305,19 @@ var Switch = forwardRef24(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled58, { css as css33 } from "styled-components";
+import styled58, { css as css34 } from "styled-components";
 import { jsx as jsx254 } from "react/jsx-runtime";
 var StyledTable = styled58.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css33`
+  ${({ $striped }) => $striped && css34`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css33`
+  ${({ $divided }) => $divided && css34`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11321,9 +11356,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled60, { css as css34 } from "styled-components";
+import styled60, { css as css35 } from "styled-components";
 import { jsx as jsx256 } from "react/jsx-runtime";
-var sharedStyles = css34`
+var sharedStyles = css35`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -11847,7 +11882,7 @@ var Tag = forwardRef28(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled70, { css as css35 } from "styled-components";
+import styled70, { css as css36 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11905,12 +11940,12 @@ var WistiaLogoComponent = styled70.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css35`
+      return css36`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css35`
+    return css36`
         aspect-ratio: 127 / 32;
       `;
   }