@wistia/ui 0.6.27 → 0.6.28

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.27
+ * @license @wistia/ui v0.6.28
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14,23 +14,45 @@ import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
 // src/css/GlobalStyle.tsx
 import { createGlobalStyle } from "styled-components";
 
-// src/css/resetCss.tsx
+// src/css/globalStyleAdjustmentsCss.tsx
 import { css } from "styled-components";
-var resetCss = css`
-  /* Box sizing rules */
+var globalStyleAdjustmentsCss = css`
+  /* stylelint-disable property-no-vendor-prefix */
+
+  /**
+  * 1. Change from 'content-box' so that 'width' calculations are unaffected by 'padding' or 'border'
+       See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+  * 2. Ensure the iOS tap highlight is transparent
+  * 3. Prevent font size inflation
+  * 4. Fix for 100vh in mobile WebKit
+  *    See: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+  */
+  html {
+    box-sizing: border-box; /* 1 */
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%); /* 2 */
+    -moz-text-size-adjust: none; /* 3 */
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    height: -webkit-fill-available; /* 4 */
+  }
+
   *,
   *::before,
   *::after {
-    box-sizing: border-box;
+    box-sizing: inherit; /* 1 */
   }
 
-  /* Prevent font size inflation */
-  html {
-    /* stylelint-disable property-no-vendor-prefix */
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    /* stylelint-enable property-no-vendor-prefix */
-    text-size-adjust: none;
+  /**
+  * 1. Without this fonts are too heavy weight in OS X Firefox
+  * 2. Design decision
+    3. See: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+  */
+  body {
+    -moz-osx-font-smoothing: grayscale; /* 1 */
+    -webkit-font-smoothing: antialiased; /* 2 */
+    line-height: 1.5; /* 2 */
+    min-height: 100vh; /* 3 */
+    min-height: -webkit-fill-available; /* 3 */
   }
 
   /* Remove default margin in favour of better control in authored CSS */
@@ -53,12 +75,6 @@ var resetCss = css`
     list-style: none;
   }
 
-  /* Set core body defaults */
-  body {
-    min-height: 100vh;
-    line-height: 1.5;
-  }
-
   /* Set shorter line heights on headings and interactive elements */
   h1,
   h2,
@@ -128,32 +144,12 @@ var resetCss = css`
   }
 `;
 
-// src/css/globalStyleAdjustmentsCss.tsx
-import { css as css2 } from "styled-components";
-var globalStyleAdjustmentsCss = css2`
-  /**
-  * 1. Ensure the iOS tap highlight is transparent
-  */
-  html {
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%); /* 1 */
-  }
-
-  /**
-  * 1. Without this fonts are too heavy weight in OS X Firefox
-  * 2. Design decision
-  */
-  body {
-    -moz-osx-font-smoothing: grayscale; /* 1 */
-    -webkit-font-smoothing: antialiased; /* 2 */
-  }
-`;
-
 // src/css/designTokens/index.tsx
-import { css as css11 } from "styled-components";
+import { css as css10 } from "styled-components";
 
 // src/css/designTokens/colorGlobal.tsx
-import { css as css3 } from "styled-components";
-var lightGlobalTokens = css3`
+import { css as css2 } from "styled-components";
+var lightGlobalTokens = css2`
   --wui-app-background: #ffffff;
   --wui-blue-surface: #f4f8ffcc;
   --wui-blue-contrast: #ffffff;
@@ -484,7 +480,7 @@ var lightGlobalTokens = css3`
   --wui-vendor-pardot-surface: #f0f9fecc;
   --wui-vendor-pardot-contrast: #ffffff;
 `;
-var darkGlobalTokens = css3`
+var darkGlobalTokens = css2`
   --wui-app-background: #101629;
   --wui-blue-surface: #141c2d80;
   --wui-blue-contrast: #ffffff;
@@ -817,8 +813,8 @@ var darkGlobalTokens = css3`
 `;
 
 // src/css/designTokens/colorAlias.tsx
-import { css as css4 } from "styled-components";
-var colorAliasTokens = css4`
+import { css as css3 } from "styled-components";
+var colorAliasTokens = css3`
   --wui-color-bg-app: var(--wui-app-background);
 
   /* --- default --- */
@@ -1142,8 +1138,8 @@ var colorAliasTokens = css4`
 `;
 
 // src/css/designTokens/borderRadius.tsx
-import { css as css5 } from "styled-components";
-var borderRadiusTokens = css5`
+import { css as css4 } from "styled-components";
+var borderRadiusTokens = css4`
   --wui-border-radius-01: 4px;
   --wui-border-radius-02: 8px;
   --wui-border-radius-03: 16px;
@@ -1153,8 +1149,8 @@ var borderRadiusTokens = css5`
 `;
 
 // src/css/designTokens/spacing.tsx
-import { css as css6 } from "styled-components";
-var spacingTokens = css6`
+import { css as css5 } from "styled-components";
+var spacingTokens = css5`
   --wui-space-00: 0;
   --wui-space-01: 4px;
   --wui-space-02: 8px;
@@ -1168,8 +1164,8 @@ var spacingTokens = css6`
 `;
 
 // src/css/designTokens/typography.tsx
-import { css as css7 } from "styled-components";
-var typographyTokens = css7`
+import { css as css6 } from "styled-components";
+var typographyTokens = css6`
   --wui-typography-family-default: intervariable, sans-serif;
   --wui-typography-family-brand: 'GT Walsheim', sans-serif;
   --wui-typography-family-mono: 'IBM Plex Mono', monospace;
@@ -1282,8 +1278,8 @@ var typographyTokens = css7`
 `;
 
 // src/css/designTokens/zIndex.tsx
-import { css as css8 } from "styled-components";
-var zIndexTokens = css8`
+import { css as css7 } from "styled-components";
+var zIndexTokens = css7`
   --wui-zindex-under: -1;
   --wui-zindex-backdrop: 100;
   --wui-zindex-modal: 100;
@@ -1293,15 +1289,15 @@ var zIndexTokens = css8`
 `;
 
 // src/css/designTokens/elevation.tsx
-import { css as css9 } from "styled-components";
-var elevationTokens = css9`
+import { css as css8 } from "styled-components";
+var elevationTokens = css8`
   --wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);
   --wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);
 `;
 
 // src/css/designTokens/motion.tsx
-import { css as css10 } from "styled-components";
-var motionTokens = css10`
+import { css as css9 } from "styled-components";
+var motionTokens = css9`
   /* Durations */
   --wui-motion-duration-01: 70ms;
   --wui-motion-duration-02: 110ms;
@@ -1330,7 +1326,7 @@ var motionTokens = css10`
 `;
 
 // src/css/designTokens/index.tsx
-var colorTokens = css11`
+var colorTokens = css10`
   ${lightGlobalTokens}
   /* Dark mode is disabled until we have a more robust plan for supporting it */
 
@@ -1339,7 +1335,7 @@ var colorTokens = css11`
   } */
   ${colorAliasTokens}
 `;
-var designTokens = css11`
+var designTokens = css10`
   :root {
     ${borderRadiusTokens}
     ${colorTokens}
@@ -1352,8 +1348,8 @@ var designTokens = css11`
 `;
 
 // src/components/ClickRegion/globalStyles.tsx
-import { css as css12 } from "styled-components";
-var clickRegionGlobalStyles = css12`
+import { css as css11 } from "styled-components";
+var clickRegionGlobalStyles = css11`
   [data-click-region] {
     position: relative;
     cursor: pointer;
@@ -1380,7 +1376,6 @@ var clickRegionGlobalStyles = css12`
 
 // src/css/GlobalStyle.tsx
 var GlobalStyle = createGlobalStyle`
-  ${resetCss}
   ${globalStyleAdjustmentsCss}
   ${designTokens}
   ${clickRegionGlobalStyles}
@@ -2139,9 +2134,9 @@ import { isNotNil as isNotNil3 } from "@wistia/type-guards";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil2 } from "@wistia/type-guards";
-import styled, { css as css13 } from "styled-components";
+import styled, { css as css12 } from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var ellipsisStyle = css13`
+var ellipsisStyle = css12`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2165,14 +2160,14 @@ var ellipsisStyle = css13`
     }
   }
 `;
-var ellipsisFlexParentStyle = css13`
+var ellipsisFlexParentStyle = css12`
   min-width: 0;
 `;
 var EllipsisComponent = styled.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if (isNotNil2($lines)) {
-    return css13`
+    return css12`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -2193,7 +2188,7 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx4(
 Ellipsis.displayName = "Ellipsis";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
-import { css as css14 } from "styled-components";
+import { css as css13 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "2" },
   { token: "bg-surface-hover", step: "3" },
@@ -2220,7 +2215,7 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = css14`
+var defaultScheme = css13`
   --wui-color-bg-surface: var(--wui-gray-1);
   --wui-color-bg-surface-hover: var(--wui-gray-3);
   --wui-color-bg-surface-active: var(--wui-gray-4);
@@ -2246,7 +2241,7 @@ var defaultScheme = css14`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
-var navScheme = css14`
+var navScheme = css13`
   --wui-color-bg-app: #1e3399;
 
   --wui-color-bg-fill: var(--wui-blue-1);
@@ -2307,7 +2302,7 @@ var getColorScheme = (colorScheme) => {
   if (colorScheme === "default") {
     return defaultScheme;
   }
-  return css14`
+  return css13`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
   }).join("")}
@@ -2423,7 +2418,7 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled6, { css as css17 } from "styled-components";
+import styled6, { css as css16 } from "styled-components";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -2431,8 +2426,8 @@ import styled5 from "styled-components";
 import { isNotNil as isNotNil5, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
-import { css as css15 } from "styled-components";
-var buttonResetCss = css15`
+import { css as css14 } from "styled-components";
+var buttonResetCss = css14`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -2477,8 +2472,8 @@ var buttonResetCss = css15`
 `;
 
 // src/components/Button/buttonStyles.tsx
-import { css as css16 } from "styled-components";
-var buttonSmallStyles = css16`
+import { css as css15 } from "styled-components";
+var buttonSmallStyles = css15`
   --button-padding-vertical: var(--wui-space-01);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-01);
@@ -2489,7 +2484,7 @@ var buttonSmallStyles = css16`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = css16`
+var buttonMediumStyles = css15`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: 6px;
@@ -2500,7 +2495,7 @@ var buttonMediumStyles = css16`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = css16`
+var buttonLargeStyles = css15`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2511,7 +2506,7 @@ var buttonLargeStyles = css16`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonExtraLargeStyles = css16`
+var buttonExtraLargeStyles = css15`
   --button-padding-vertical: var(--wui-space-03);
   --button-padding-horizontal: var(--wui-space-03);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2522,34 +2517,34 @@ var buttonExtraLargeStyles = css16`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = css16`
+var ghostButtonVariant = css15`
   --button-color-bg: transparent;
   --button-color-bg-hover: var(--wui-color-bg-surface-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
-var outlineButtonVariant = css16`
+var outlineButtonVariant = css15`
   ${ghostButtonVariant};
   --button-color-border: var(--wui-color-border);
 
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = css16`
+var softButtonVariant = css15`
   --button-color-bg: var(--wui-color-bg-surface-secondary);
   --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
-var solidButtonVariant = css16`
+var solidButtonVariant = css15`
   --button-color-bg: var(--wui-color-bg-fill);
   --button-color-bg-hover: var(--wui-color-bg-fill-hover);
   --button-color-bg-active: var(--wui-color-bg-fill-active);
   --button-color-text: var(--wui-color-text-on-fill);
   --button-color-icon: var(--wui-color-icon-on-fill);
 `;
-var disabledButtonVariant = css16`
+var disabledButtonVariant = css15`
   --button-color-bg: var(--wui-color-bg-surface-disabled);
   --button-color-bg-hover: var(--wui-color-bg-surface-disabled);
   --button-color-bg-active: var(--wui-color-bg-surface-disabled);
@@ -2557,7 +2552,7 @@ var disabledButtonVariant = css16`
   --button-color-icon: var(--wui-color-icon-disabled);
   --button-color-border: var(--wui-color-border-disabled);
 `;
-var pressedButtonVariant = css16`
+var pressedButtonVariant = css15`
   --button-color-bg: var(--wui-color-bg-surface-selected);
   --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
@@ -2565,7 +2560,7 @@ var pressedButtonVariant = css16`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonBaseStyles = css16`
+var buttonBaseStyles = css15`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -6783,7 +6778,7 @@ var StyledSecondaryIcon = styled6.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-in);
 
-  ${({ $hideUntilHover }) => $hideUntilHover && css17`
+  ${({ $hideUntilHover }) => $hideUntilHover && css16`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -7444,18 +7439,18 @@ Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef6, useId } from "react";
-import styled18, { css as css20 } from "styled-components";
+import styled18, { css as css19 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled17, { css as css19 } from "styled-components";
+import styled17, { css as css18 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled15, { css as css18 } from "styled-components";
+import styled15, { css as css17 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
 import { jsx as jsx199 } from "react/jsx-runtime";
-var disabledStyle = css18`
+var disabledStyle = css17`
   color: var(--wui-color-text-disabled);
 `;
 var StyledFormControlLabelDescription = styled15.div`
@@ -7511,7 +7506,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx201, jsxs as jsxs12 } from "react/jsx-runtime";
-var disabledStyle2 = css19`
+var disabledStyle2 = css18`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
@@ -7582,7 +7577,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx202(
     )
   }
 );
-var sizeSmall = css20`
+var sizeSmall = css19`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -7593,7 +7588,7 @@ var sizeSmall = css20`
     height: 7px;
   }
 `;
-var sizeMedium = css20`
+var sizeMedium = css19`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -7604,7 +7599,7 @@ var sizeMedium = css20`
     height: 9px;
   }
 `;
-var sizeLarge = css20`
+var sizeLarge = css19`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -7813,45 +7808,45 @@ import { isNotNull } from "@wistia/type-guards";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled21, { css as css21 } from "styled-components";
+import styled21, { css as css20 } from "styled-components";
 import { jsx as jsx206 } from "react/jsx-runtime";
-var heroStyle = css21`
+var heroStyle = css20`
   --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 = css21`
+var heading1TextStyle = css20`
   --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 = css21`
+var heading2TextStyle = css20`
   --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 = css21`
+var heading3TextStyle = css20`
   --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 = css21`
+var heading4TextStyle = css20`
   --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 = css21`
+var heading5TextStyle = css20`
   --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 = css21`
+var heading6TextStyle = css20`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -7876,16 +7871,16 @@ var StyledHeading = styled21.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css21`
+  ${({ $inline }) => $inline && css20`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css21`
+  ${({ $disabled }) => $disabled && css20`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css21`
+  ${({ $preventUserSelect }) => $preventUserSelect && css20`
       user-select: none;
     `}
-  ${({ $align }) => css21`
+  ${({ $align }) => css20`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8064,21 +8059,21 @@ import styled25 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled24, { css as css22 } from "styled-components";
+import styled24, { css as css21 } from "styled-components";
 import { jsx as jsx209 } from "react/jsx-runtime";
-var bodyBoldStyles = css22`
+var bodyBoldStyles = css21`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css22`
+var labelBoldStyles = css21`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css22`
+var body1TextStyle = css21`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8086,7 +8081,7 @@ var body1TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css22`
+var body2TextStyle = css21`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8094,7 +8089,7 @@ var body2TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css22`
+var body3TextStyle = css21`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8102,7 +8097,7 @@ var body3TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css22`
+var body4TextStyle = css21`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8110,47 +8105,47 @@ var body4TextStyle = css22`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css22`
+var label1TextStyle = css21`
   --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 = css22`
+var label2TextStyle = css21`
   --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 = css22`
+var label3TextStyle = css21`
   --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 = css22`
+var label4TextStyle = css21`
   --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 = css22`
+var body1MonoTextStyle = css21`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css22`
+var body2MonoTextStyle = css21`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css22`
+var body3MonoTextStyle = css21`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css22`
+var body4MonoTextStyle = css21`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8209,19 +8204,19 @@ var StyledText = styled24.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css22`
+  ${({ $inline }) => $inline && css21`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css22`
+  ${({ $disabled }) => $disabled && css21`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css22`
+  ${({ $preventUserSelect }) => $preventUserSelect && css21`
       user-select: none;
     `}
-  ${({ $align }) => css22`
+  ${({ $align }) => css21`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css22`
+  ${({ as }) => as === "p" && css21`
       display: block;
 
       + p {
@@ -8301,16 +8296,16 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled26, { css as css23 } from "styled-components";
+import styled26, { css as css22 } from "styled-components";
 import { jsx as jsx211 } from "react/jsx-runtime";
-var horizontalBorderCss = css23`
+var horizontalBorderCss = css22`
   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 = css23`
+var verticalBorderCss = css22`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -8344,7 +8339,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled29, { css as css26 } from "styled-components";
+import styled29, { css as css25 } from "styled-components";
 import { useState as useState6, useRef as useRef4 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8355,9 +8350,9 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled27, { css as css24 } from "styled-components";
+import styled27, { css as css23 } from "styled-components";
 import { jsx as jsx212, jsxs as jsxs17 } from "react/jsx-runtime";
-var CompactTooltipStyles = css24`
+var CompactTooltipStyles = css23`
   --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);
@@ -8461,10 +8456,10 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef9, cloneElement as cloneElement4, useRef as useRef3 } from "react";
-import styled28, { css as css25 } from "styled-components";
+import styled28, { css as css24 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil11, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx213, jsxs as jsxs18 } from "react/jsx-runtime";
-var inputStyles = css25`
+var inputStyles = css24`
   --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);
@@ -8644,7 +8639,7 @@ var StyledInput = styled29(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css26`
+var editableStyles = css25`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -8978,9 +8973,9 @@ import styled34 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 styled32, { css as css27 } from "styled-components";
+import styled32, { css as css26 } from "styled-components";
 import { jsx as jsx218 } from "react/jsx-runtime";
-var requiredStyle = css27`
+var requiredStyle = css26`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -8988,7 +8983,7 @@ var requiredStyle = css27`
     content: '*';
   }
 `;
-var disabledStyle3 = css27`
+var disabledStyle3 = css26`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled32.label`
@@ -9338,7 +9333,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled37, { css as css28, keyframes as keyframes2 } from "styled-components";
+import styled37, { css as css27, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9375,7 +9370,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css28`
+var menuItemCss = css27`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9386,7 +9381,7 @@ var menuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css28`
+var compactMenuItemCss = css27`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9397,7 +9392,7 @@ var compactMenuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css28`
+var menuContentCss = css27`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10169,7 +10164,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 styled47, { css as css29 } from "styled-components";
+import styled47, { css as css28 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil19 } from "@wistia/type-guards";
@@ -10180,7 +10175,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx239, jsxs as jsxs30 } from "react/jsx-runtime";
 var StyledContent2 = styled47(Content2)`
-  ${({ $unstyled }) => !$unstyled && css29`
+  ${({ $unstyled }) => !$unstyled && css28`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10311,7 +10306,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled49, { css as css30 } from "styled-components";
+import styled49, { css as css29 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx241, jsxs as jsxs32 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx241(
@@ -10333,7 +10328,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx241(
     )
   }
 );
-var sizeSmall2 = css30`
+var sizeSmall2 = css29`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10344,7 +10339,7 @@ var sizeSmall2 = css30`
     height: 7px;
   }
 `;
-var sizeMedium2 = css30`
+var sizeMedium2 = css29`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10355,7 +10350,7 @@ var sizeMedium2 = css30`
     height: 8px;
   }
 `;
-var sizeLarge2 = css30`
+var sizeLarge2 = css29`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10479,7 +10474,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled51, { css as css31 } from "styled-components";
+import styled51, { css as css30 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
@@ -10570,7 +10565,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx244, jsxs as jsxs33 } from "react/jsx-runtime";
-var segmentedControlStyles = css31`
+var segmentedControlStyles = css30`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10619,7 +10614,7 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20, useEffect as useEffect6, useRef as useRef9 } from "react";
-import styled52, { css as css32 } from "styled-components";
+import styled52, { css as css31 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
@@ -10639,7 +10634,7 @@ var mergeRefs = (refs) => (value) => {
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { jsxs as jsxs34 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css32`
+var segmentedControlItemStyles = css31`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10962,10 +10957,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef23, useId as useId4 } from "react";
-import styled56, { css as css33 } from "styled-components";
+import styled56, { css as css32 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx248, jsxs as jsxs38 } from "react/jsx-runtime";
-var sizeSmall3 = css33`
+var sizeSmall3 = css32`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -10980,7 +10975,7 @@ var sizeSmall3 = css33`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css33`
+var sizeMedium3 = css32`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -10995,7 +10990,7 @@ var sizeMedium3 = css33`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css33`
+var sizeLarge3 = css32`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11124,19 +11119,19 @@ var Switch = forwardRef23(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled57, { css as css34 } from "styled-components";
+import styled57, { css as css33 } from "styled-components";
 import { jsx as jsx249 } from "react/jsx-runtime";
 var StyledTable = styled57.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css34`
+  ${({ $striped }) => $striped && css33`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css34`
+  ${({ $divided }) => $divided && css33`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11175,9 +11170,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled59, { css as css35 } from "styled-components";
+import styled59, { css as css34 } from "styled-components";
 import { jsx as jsx251 } from "react/jsx-runtime";
-var sharedStyles = css35`
+var sharedStyles = css34`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -11701,7 +11696,7 @@ var Tag = forwardRef27(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled69, { css as css36 } from "styled-components";
+import styled69, { css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { jsx as jsx261, jsxs as jsxs42 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11759,12 +11754,12 @@ var WistiaLogoComponent = styled69.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css36`
+      return css35`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css36`
+    return css35`
         aspect-ratio: 127 / 32;
       `;
   }