npm - @wistia/ui - Versions diffs - 0.6.26 → 0.6.27-beta.58cf61e9.e077beb - Mend

@wistia/ui 0.6.26 → 0.6.27-beta.58cf61e9.e077beb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
- * @license @wistia/ui v0.6.26
+ * @license @wistia/ui v0.6.27-beta.58cf61e9.e077beb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -137,25 +137,47 @@ module.exports = __toCommonJS(index_exports);
 var import_react_tooltip = require("@radix-ui/react-tooltip");
 // src/css/GlobalStyle.tsx
-var import_styled_components13 = require("styled-components");
+var import_styled_components12 = require("styled-components");
-// src/css/resetCss.tsx
+// src/css/globalStyleAdjustmentsCss.tsx
 var import_styled_components = require("styled-components");
-var resetCss = import_styled_components.css`
-  /* Box sizing rules */
+var globalStyleAdjustmentsCss = import_styled_components.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 */
@@ -178,12 +200,6 @@ var resetCss = import_styled_components.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,
@@ -253,32 +269,12 @@ var resetCss = import_styled_components.css`
   }
 `;
-// src/css/globalStyleAdjustmentsCss.tsx
-var import_styled_components2 = require("styled-components");
-var globalStyleAdjustmentsCss = import_styled_components2.css`
-  /**
-  * 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
-var import_styled_components11 = require("styled-components");
+var import_styled_components10 = require("styled-components");
 // src/css/designTokens/colorGlobal.tsx
-var import_styled_components3 = require("styled-components");
-var lightGlobalTokens = import_styled_components3.css`
+var import_styled_components2 = require("styled-components");
+var lightGlobalTokens = import_styled_components2.css`
   --wui-app-background: #ffffff;
   --wui-blue-surface: #f4f8ffcc;
   --wui-blue-contrast: #ffffff;
@@ -609,7 +605,7 @@ var lightGlobalTokens = import_styled_components3.css`
   --wui-vendor-pardot-surface: #f0f9fecc;
   --wui-vendor-pardot-contrast: #ffffff;
 `;
-var darkGlobalTokens = import_styled_components3.css`
+var darkGlobalTokens = import_styled_components2.css`
   --wui-app-background: #101629;
   --wui-blue-surface: #141c2d80;
   --wui-blue-contrast: #ffffff;
@@ -942,8 +938,8 @@ var darkGlobalTokens = import_styled_components3.css`
 `;
 // src/css/designTokens/colorAlias.tsx
-var import_styled_components4 = require("styled-components");
-var colorAliasTokens = import_styled_components4.css`
+var import_styled_components3 = require("styled-components");
+var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-app: var(--wui-app-background);
   /* --- default --- */
@@ -1267,8 +1263,8 @@ var colorAliasTokens = import_styled_components4.css`
 `;
 // src/css/designTokens/borderRadius.tsx
-var import_styled_components5 = require("styled-components");
-var borderRadiusTokens = import_styled_components5.css`
+var import_styled_components4 = require("styled-components");
+var borderRadiusTokens = import_styled_components4.css`
   --wui-border-radius-01: 4px;
   --wui-border-radius-02: 8px;
   --wui-border-radius-03: 16px;
@@ -1278,8 +1274,8 @@ var borderRadiusTokens = import_styled_components5.css`
 `;
 // src/css/designTokens/spacing.tsx
-var import_styled_components6 = require("styled-components");
-var spacingTokens = import_styled_components6.css`
+var import_styled_components5 = require("styled-components");
+var spacingTokens = import_styled_components5.css`
   --wui-space-00: 0;
   --wui-space-01: 4px;
   --wui-space-02: 8px;
@@ -1293,8 +1289,8 @@ var spacingTokens = import_styled_components6.css`
 `;
 // src/css/designTokens/typography.tsx
-var import_styled_components7 = require("styled-components");
-var typographyTokens = import_styled_components7.css`
+var import_styled_components6 = require("styled-components");
+var typographyTokens = import_styled_components6.css`
   --wui-typography-family-default: intervariable, sans-serif;
   --wui-typography-family-brand: 'GT Walsheim', sans-serif;
   --wui-typography-family-mono: 'IBM Plex Mono', monospace;
@@ -1407,8 +1403,8 @@ var typographyTokens = import_styled_components7.css`
 `;
 // src/css/designTokens/zIndex.tsx
-var import_styled_components8 = require("styled-components");
-var zIndexTokens = import_styled_components8.css`
+var import_styled_components7 = require("styled-components");
+var zIndexTokens = import_styled_components7.css`
   --wui-zindex-under: -1;
   --wui-zindex-backdrop: 100;
   --wui-zindex-modal: 100;
@@ -1418,15 +1414,15 @@ var zIndexTokens = import_styled_components8.css`
 `;
 // src/css/designTokens/elevation.tsx
-var import_styled_components9 = require("styled-components");
-var elevationTokens = import_styled_components9.css`
+var import_styled_components8 = require("styled-components");
+var elevationTokens = import_styled_components8.css`
   --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
-var import_styled_components10 = require("styled-components");
-var motionTokens = import_styled_components10.css`
+var import_styled_components9 = require("styled-components");
+var motionTokens = import_styled_components9.css`
   /* Durations */
   --wui-motion-duration-01: 70ms;
   --wui-motion-duration-02: 110ms;
@@ -1455,7 +1451,7 @@ var motionTokens = import_styled_components10.css`
 `;
 // src/css/designTokens/index.tsx
-var colorTokens = import_styled_components11.css`
+var colorTokens = import_styled_components10.css`
   ${lightGlobalTokens}
   /* Dark mode is disabled until we have a more robust plan for supporting it */
@@ -1464,7 +1460,7 @@ var colorTokens = import_styled_components11.css`
   } */
   ${colorAliasTokens}
 `;
-var designTokens = import_styled_components11.css`
+var designTokens = import_styled_components10.css`
   :root {
     ${borderRadiusTokens}
     ${colorTokens}
@@ -1477,8 +1473,8 @@ var designTokens = import_styled_components11.css`
 `;
 // src/components/ClickRegion/globalStyles.tsx
-var import_styled_components12 = require("styled-components");
-var clickRegionGlobalStyles = import_styled_components12.css`
+var import_styled_components11 = require("styled-components");
+var clickRegionGlobalStyles = import_styled_components11.css`
   [data-click-region] {
     position: relative;
     cursor: pointer;
@@ -1504,8 +1500,7 @@ var clickRegionGlobalStyles = import_styled_components12.css`
 `;
 // src/css/GlobalStyle.tsx
-var GlobalStyle = import_styled_components13.createGlobalStyle`
-  ${resetCss}
+var GlobalStyle = import_styled_components12.createGlobalStyle`
   ${globalStyleAdjustmentsCss}
   ${designTokens}
   ${clickRegionGlobalStyles}
@@ -2253,14 +2248,14 @@ var import_sonner2 = require("sonner");
 // src/private/components/Toast/Toast.tsx
 var import_react9 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_styled_components15 = __toESM(require("styled-components"));
 var import_type_guards9 = require("@wistia/type-guards");
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards8 = require("@wistia/type-guards");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components14.css`
+var ellipsisStyle = import_styled_components13.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2284,14 +2279,14 @@ var ellipsisStyle = import_styled_components14.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components14.css`
+var ellipsisFlexParentStyle = import_styled_components13.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components14.default.span`
+var EllipsisComponent = import_styled_components13.default.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if ((0, import_type_guards8.isNotNil)($lines)) {
-    return import_styled_components14.css`
+    return import_styled_components13.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -2312,7 +2307,7 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, impor
 Ellipsis.displayName = "Ellipsis";
 // src/private/helpers/getColorScheme/getColorScheme.ts
-var import_styled_components15 = require("styled-components");
+var import_styled_components14 = require("styled-components");
 var colorSchemeSchema = [
   { token: "bg-surface", step: "2" },
   { token: "bg-surface-hover", step: "3" },
@@ -2339,7 +2334,7 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = import_styled_components15.css`
+var defaultScheme = import_styled_components14.css`
   --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);
@@ -2365,7 +2360,7 @@ var defaultScheme = import_styled_components15.css`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
-var navScheme = import_styled_components15.css`
+var navScheme = import_styled_components14.css`
   --wui-color-bg-app: #1e3399;
   --wui-color-bg-fill: var(--wui-blue-1);
@@ -2426,7 +2421,7 @@ var getColorScheme = (colorScheme) => {
   if (colorScheme === "default") {
     return defaultScheme;
   }
-  return import_styled_components15.css`
+  return import_styled_components14.css`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
   }).join("")}
@@ -2435,12 +2430,12 @@ var getColorScheme = (colorScheme) => {
 // src/private/components/Toast/Toast.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Message = (0, import_styled_components16.default)(Ellipsis)`
+var Message = (0, import_styled_components15.default)(Ellipsis)`
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
 `;
-var MessageWrapper = import_styled_components16.default.div`
+var MessageWrapper = import_styled_components15.default.div`
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
@@ -2453,13 +2448,13 @@ var MessageWrapper = import_styled_components16.default.div`
     margin-right: var(--wui-space-02); /* space between icon & message */
   }
 `;
-var ActionWrapper = import_styled_components16.default.div`
+var ActionWrapper = import_styled_components15.default.div`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   margin-right: var(--wui-space-03);
 `;
-var StyledToast = import_styled_components16.default.div`
+var StyledToast = import_styled_components15.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: flex;
   align-items: center;
@@ -2542,16 +2537,16 @@ var useToast = () => {
 // src/components/ActionButton/ActionButton.tsx
 var import_react14 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_styled_components21 = __toESM(require("styled-components"));
 // src/components/Button/Button.tsx
 var import_react13 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components20 = __toESM(require("styled-components"));
 var import_type_guards13 = require("@wistia/type-guards");
 // src/css/buttonResetCss.tsx
-var import_styled_components17 = require("styled-components");
-var buttonResetCss = import_styled_components17.css`
+var import_styled_components16 = require("styled-components");
+var buttonResetCss = import_styled_components16.css`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -2596,8 +2591,8 @@ var buttonResetCss = import_styled_components17.css`
 `;
 // src/components/Button/buttonStyles.tsx
-var import_styled_components18 = require("styled-components");
-var buttonSmallStyles = import_styled_components18.css`
+var import_styled_components17 = require("styled-components");
+var buttonSmallStyles = import_styled_components17.css`
   --button-padding-vertical: var(--wui-space-01);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-01);
@@ -2608,7 +2603,7 @@ var buttonSmallStyles = import_styled_components18.css`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = import_styled_components18.css`
+var buttonMediumStyles = import_styled_components17.css`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: 6px;
@@ -2619,7 +2614,7 @@ var buttonMediumStyles = import_styled_components18.css`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = import_styled_components18.css`
+var buttonLargeStyles = import_styled_components17.css`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2630,7 +2625,7 @@ var buttonLargeStyles = import_styled_components18.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonExtraLargeStyles = import_styled_components18.css`
+var buttonExtraLargeStyles = import_styled_components17.css`
   --button-padding-vertical: var(--wui-space-03);
   --button-padding-horizontal: var(--wui-space-03);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2641,34 +2636,34 @@ var buttonExtraLargeStyles = import_styled_components18.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = import_styled_components18.css`
+var ghostButtonVariant = import_styled_components17.css`
   --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 = import_styled_components18.css`
+var outlineButtonVariant = import_styled_components17.css`
   ${ghostButtonVariant};
   --button-color-border: var(--wui-color-border);
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = import_styled_components18.css`
+var softButtonVariant = import_styled_components17.css`
   --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 = import_styled_components18.css`
+var solidButtonVariant = import_styled_components17.css`
   --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 = import_styled_components18.css`
+var disabledButtonVariant = import_styled_components17.css`
   --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);
@@ -2676,7 +2671,7 @@ var disabledButtonVariant = import_styled_components18.css`
   --button-color-icon: var(--wui-color-icon-disabled);
   --button-color-border: var(--wui-color-border-disabled);
 `;
-var pressedButtonVariant = import_styled_components18.css`
+var pressedButtonVariant = import_styled_components17.css`
   --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);
@@ -2684,7 +2679,7 @@ var pressedButtonVariant = import_styled_components18.css`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonBaseStyles = import_styled_components18.css`
+var buttonBaseStyles = import_styled_components17.css`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -2752,7 +2747,7 @@ var buttonSizeStyles = {
 // src/components/Icon/Icon.tsx
 var import_type_guards11 = require("@wistia/type-guards");
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components18 = __toESM(require("styled-components"));
 // src/components/Icon/icons/AbTestIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -6517,7 +6512,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var StyledIcon = import_styled_components19.default.svg`
+var StyledIcon = import_styled_components18.default.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
 `;
 var Icon = ({
@@ -6568,7 +6563,7 @@ Icon.displayName = "Icon";
 // src/components/Link/Link.tsx
 var import_react12 = require("react");
 var import_type_guards12 = require("@wistia/type-guards");
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_styled_components19 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
@@ -6586,7 +6581,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => (0, import_type_guards12.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards12.isNotUndefined)(props.href);
-var StyledLink = import_styled_components20.default.a`
+var StyledLink = import_styled_components19.default.a`
   --link-icon-size: 14px;
   ${({ href }) => (0, import_type_guards12.isNil)(href) && buttonResetCss};
@@ -6700,7 +6695,7 @@ Link.displayName = "Link";
 // src/components/Button/Button.tsx
 var import_jsx_runtime189 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards13.isNotUndefined)(props.href);
-var StyledButton = import_styled_components21.default.button`
+var StyledButton = import_styled_components20.default.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   ${({ $size }) => buttonSizeStyles[$size]}
@@ -6709,7 +6704,7 @@ var StyledButton = import_styled_components21.default.button`
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   text-align: center;
 `;
-var StyledButtonContent = import_styled_components21.default.div`
+var StyledButtonContent = import_styled_components20.default.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -6721,10 +6716,10 @@ var StyledButtonContent = import_styled_components21.default.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components21.default.span`
+var StyledButtonContentLabel = import_styled_components20.default.span`
   flex: 1;
 `;
-var StyledButtonLoading = import_styled_components21.default.div`
+var StyledButtonLoading = import_styled_components20.default.div`
   position: absolute;
   display: flex;
 `;
@@ -6837,7 +6832,7 @@ Button.displayName = "Button";
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime190 = require("react/jsx-runtime");
-var StyledActionButton = (0, import_styled_components22.default)(Button)`
+var StyledActionButton = (0, import_styled_components21.default)(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -6880,7 +6875,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
     }
   }
 `;
-var StyledMainIcon = import_styled_components22.default.div`
+var StyledMainIcon = import_styled_components21.default.div`
   grid-column: 1;
   grid-row: 1;
   width: 24px;
@@ -6894,7 +6889,7 @@ var StyledMainIcon = import_styled_components22.default.div`
     }
   }
 `;
-var StyledSecondaryIcon = import_styled_components22.default.div`
+var StyledSecondaryIcon = import_styled_components21.default.div`
   grid-column: 2;
   grid-row: 1;
   width: 100%;
@@ -6902,7 +6897,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-in);
-  ${({ $hideUntilHover }) => $hideUntilHover && import_styled_components22.css`
+  ${({ $hideUntilHover }) => $hideUntilHover && import_styled_components21.css`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -6920,7 +6915,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
     }
   }
 `;
-var StyledLabel = import_styled_components22.default.span`
+var StyledLabel = import_styled_components21.default.span`
   font-family: var(--wui-typography-heading-4-family);
   font-size: var(--wui-typography-heading-4-size);
   font-weight: var(--wui-typography-heading-4-weight);
@@ -6976,10 +6971,10 @@ ActionButton.displayName = "ActionButton";
 // src/components/Avatar/Avatar.tsx
 var import_react15 = require("react");
 var import_type_guards15 = require("@wistia/type-guards");
-var import_styled_components24 = __toESM(require("styled-components"));
+var import_styled_components23 = __toESM(require("styled-components"));
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_styled_components22 = __toESM(require("styled-components"));
 var import_jsx_runtime191 = require("react/jsx-runtime");
 var colorSchemeOptions = [
   "inherit",
@@ -6998,7 +6993,7 @@ var colorSchemeOptions = [
   "vendor-marketo",
   "vendor-pardot"
 ];
-var StyledColorSchemeWrapper = import_styled_components23.default.div`
+var StyledColorSchemeWrapper = import_styled_components22.default.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -7033,7 +7028,7 @@ var formatNameForDisplay = (name) => {
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime192 = require("react/jsx-runtime");
-var AvatarImage = import_styled_components24.default.img`
+var AvatarImage = import_styled_components23.default.img`
   align-items: center;
   background-color: white;
   border-radius: 50%;
@@ -7061,7 +7056,7 @@ var avatarSizeMap = {
   lg: 32
 };
 var fontSizeScaleMultiplier = 0.55;
-var InitialsContainer = import_styled_components24.default.div`
+var InitialsContainer = import_styled_components23.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-fill);
@@ -7083,7 +7078,7 @@ var InitialsContainer = import_styled_components24.default.div`
     box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
   }
 `;
-var AvatarWrapper = import_styled_components24.default.div`
+var AvatarWrapper = import_styled_components23.default.div`
   max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
@@ -7150,10 +7145,10 @@ Avatar.displayName = "Avatar";
 // src/components/Badge/Badge.tsx
 var import_react16 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
+var import_styled_components24 = __toESM(require("styled-components"));
 var import_type_guards16 = require("@wistia/type-guards");
 var import_jsx_runtime193 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components25.default.div`
+var StyledBadge = import_styled_components24.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7195,7 +7190,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 var import_react17 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
+var import_styled_components25 = __toESM(require("styled-components"));
 var import_type_guards17 = require("@wistia/type-guards");
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7247,7 +7242,7 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var StyledBoxComponent = import_styled_components26.default.div`
+var StyledBoxComponent = import_styled_components25.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
@@ -7360,9 +7355,9 @@ var Box = makePolymorphic(BoxComponent);
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react18 = require("react");
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components26 = __toESM(require("styled-components"));
 var import_jsx_runtime195 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components27.default.nav`
+var StyledBreadcrumbs = import_styled_components26.default.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -7407,9 +7402,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
+var import_styled_components27 = __toESM(require("styled-components"));
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var BreadcrumbContent = import_styled_components28.default.span`
+var BreadcrumbContent = import_styled_components27.default.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -7441,7 +7436,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
+var import_styled_components28 = __toESM(require("styled-components"));
 var import_type_guards18 = require("@wistia/type-guards");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 var getAlignment = (align) => {
@@ -7456,7 +7451,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components29.default.div`
+var ButtonGroupComponent = import_styled_components28.default.div`
   display: flex;
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -7505,9 +7500,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 // src/components/Card/Card.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
+var import_styled_components29 = __toESM(require("styled-components"));
 var import_jsx_runtime198 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components30.default)(Box)`
+var StyledCard = (0, import_styled_components29.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -7563,21 +7558,21 @@ Card.displayName = "Card";
 // src/components/Checkbox/Checkbox.tsx
 var import_react19 = require("react");
-var import_styled_components34 = __toESM(require("styled-components"));
+var import_styled_components33 = __toESM(require("styled-components"));
 var import_type_guards22 = require("@wistia/type-guards");
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
+var import_styled_components32 = __toESM(require("styled-components"));
 var import_type_guards21 = require("@wistia/type-guards");
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
+var import_styled_components30 = __toESM(require("styled-components"));
 var import_type_guards19 = require("@wistia/type-guards");
 var import_jsx_runtime199 = require("react/jsx-runtime");
-var disabledStyle = import_styled_components31.css`
+var disabledStyle = import_styled_components30.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components31.default.div`
+var StyledFormControlLabelDescription = import_styled_components30.default.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -7607,11 +7602,11 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
+var import_styled_components31 = __toESM(require("styled-components"));
 var import_type_guards20 = require("@wistia/type-guards");
 var import_jsx_runtime200 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components32.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components32.default.div({
+var VisuallyHidden = import_styled_components31.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components31.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7630,15 +7625,15 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components33.css`
+var disabledStyle2 = import_styled_components32.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components33.default.div`
+var StyledLabelWrapper = import_styled_components32.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components33.default.label`
+var StyledFormControlLabel = import_styled_components32.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7701,7 +7696,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components34.css`
+var sizeSmall = import_styled_components33.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -7712,7 +7707,7 @@ var sizeSmall = import_styled_components34.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components34.css`
+var sizeMedium = import_styled_components33.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -7723,7 +7718,7 @@ var sizeMedium = import_styled_components34.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components34.css`
+var sizeLarge = import_styled_components33.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -7739,14 +7734,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components34.default.div`
+var StyledCheckboxWrapper = import_styled_components33.default.div`
   display: flex;
   margin: 0;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components34.default.div`
+var StyledCheckboxInput = import_styled_components33.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -7768,7 +7763,7 @@ var StyledCheckboxInput = import_styled_components34.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components34.default.input`
+var StyledHiddenCheckboxInput = import_styled_components33.default.input`
   ${visuallyHiddenStyle}
   /* toggles display of faux-input background-color */
@@ -7877,9 +7872,9 @@ ClickRegion.displayName = "ClickRegion";
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
 var import_type_guards23 = require("@wistia/type-guards");
-var import_styled_components35 = __toESM(require("styled-components"));
+var import_styled_components34 = __toESM(require("styled-components"));
 var import_jsx_runtime203 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
+var StyledRoot = (0, import_styled_components34.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7909,11 +7904,11 @@ var CollapsibleTrigger = ({ children }) => {
 };
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components35 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
 var import_type_guards24 = require("@wistia/type-guards");
 var import_jsx_runtime205 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
+var ClampedContent = import_styled_components35.default.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
@@ -7927,50 +7922,50 @@ var CollapsibleContent = ({ clamp, children }) => {
 };
 // src/components/DataCards/DataCard.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components37 = __toESM(require("styled-components"));
 var import_type_guards25 = require("@wistia/type-guards");
 // src/components/Heading/Heading.tsx
 var import_react22 = require("react");
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_jsx_runtime206 = require("react/jsx-runtime");
-var heroStyle = import_styled_components37.css`
+var heroStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading1TextStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading2TextStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading3TextStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading4TextStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading5TextStyle = import_styled_components36.css`
   --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 = import_styled_components37.css`
+var heading6TextStyle = import_styled_components36.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -7986,7 +7981,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components37.default.div`
+var StyledHeading = import_styled_components36.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -7995,16 +7990,16 @@ var StyledHeading = import_styled_components37.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components37.css`
+  ${({ $inline }) => $inline && import_styled_components36.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components37.css`
+  ${({ $disabled }) => $disabled && import_styled_components36.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components36.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components37.css`
+  ${({ $align }) => import_styled_components36.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8050,7 +8045,7 @@ var Heading = makePolymorphic(HeadingComponent);
 // src/components/DataCards/DataCard.tsx
 var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components38.default.div`
+var StyledDataCard = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8063,7 +8058,7 @@ var StyledDataCard = import_styled_components38.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components38.keyframes`
+var shimmer = import_styled_components37.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8071,7 +8066,7 @@ var shimmer = import_styled_components38.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components38.default.div`
+var LoadingBackground = import_styled_components37.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8082,27 +8077,27 @@ var LoadingBackground = import_styled_components38.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components38.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components37.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components38.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components37.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components38.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components37.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components38.default)(Heading)`
+var StyledValue = (0, import_styled_components37.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components38.default.div`
+var StyledSlot = import_styled_components37.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components38.default.div`
+var StyledDataCardTrendContainer = import_styled_components37.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8145,9 +8140,9 @@ var DataCard = ({
 DataCard.displayName = "DataCard";
 // src/components/DataCards/DataCards.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
+var import_styled_components38 = __toESM(require("styled-components"));
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components39.default)(Box)`
+var StyledDataCards = (0, import_styled_components38.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8179,25 +8174,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components40 = __toESM(require("styled-components"));
 // src/components/Text/Text.tsx
 var import_react23 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_styled_components39 = __toESM(require("styled-components"));
 var import_jsx_runtime209 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components40.css`
+var bodyBoldStyles = import_styled_components39.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components40.css`
+var labelBoldStyles = import_styled_components39.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components40.css`
+var body1TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8205,7 +8200,7 @@ var body1TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components40.css`
+var body2TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8213,7 +8208,7 @@ var body2TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components40.css`
+var body3TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8221,7 +8216,7 @@ var body3TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components40.css`
+var body4TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8229,47 +8224,47 @@ var body4TextStyle = import_styled_components40.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components40.css`
+var label1TextStyle = import_styled_components39.css`
   --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 = import_styled_components40.css`
+var label2TextStyle = import_styled_components39.css`
   --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 = import_styled_components40.css`
+var label3TextStyle = import_styled_components39.css`
   --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 = import_styled_components40.css`
+var label4TextStyle = import_styled_components39.css`
   --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 = import_styled_components40.css`
+var body1MonoTextStyle = import_styled_components39.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components40.css`
+var body2MonoTextStyle = import_styled_components39.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components40.css`
+var body3MonoTextStyle = import_styled_components39.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components40.css`
+var body4MonoTextStyle = import_styled_components39.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8304,7 +8299,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components40.default.div`
+var StyledText = import_styled_components39.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8328,19 +8323,19 @@ var StyledText = import_styled_components40.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components40.css`
+  ${({ $inline }) => $inline && import_styled_components39.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components40.css`
+  ${({ $disabled }) => $disabled && import_styled_components39.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components40.css`
+  ${({ $align }) => import_styled_components39.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components40.css`
+  ${({ as }) => as === "p" && import_styled_components39.css`
       display: block;
       + p {
@@ -8384,7 +8379,7 @@ var Text = makePolymorphic(TextComponent);
 // src/components/DataCards/DataCardTrend.tsx
 var import_jsx_runtime210 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components41.default.div`
+var StyledDataCardTrend = import_styled_components40.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8420,22 +8415,22 @@ var DataCardTrend = ({
 };
 // src/components/Divider/Divider.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 var import_jsx_runtime211 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components42.css`
+var horizontalBorderCss = import_styled_components41.css`
   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 = import_styled_components42.css`
+var verticalBorderCss = import_styled_components41.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components42.default.div`
+var DividerComponent = import_styled_components41.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8463,21 +8458,21 @@ var Divider = ({
 Divider.displayName = "Divider";
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_react25 = require("react");
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_jsx_runtime212 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components43.css`
+var CompactTooltipStyles = import_styled_components42.css`
   --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);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = (0, import_styled_components43.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components42.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8574,10 +8569,10 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 var import_react24 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_styled_components43 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime213 = require("react/jsx-runtime");
-var inputStyles = import_styled_components44.css`
+var inputStyles = import_styled_components43.css`
   --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);
@@ -8618,7 +8613,7 @@ var inputStyles = import_styled_components44.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components44.default.div`
+var StyledInputContainer = import_styled_components43.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -8737,7 +8732,7 @@ Input.displayName = "Input";
 // src/components/EditableHeading/EditableHeading.tsx
 var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components45.default)(Input)`
+var StyledInput = (0, import_styled_components44.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -8757,7 +8752,7 @@ var StyledInput = (0, import_styled_components45.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components45.css`
+var editableStyles = import_styled_components44.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -8767,7 +8762,7 @@ var editableStyles = import_styled_components45.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components45.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components44.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -8875,15 +8870,15 @@ var EditableHeading = ({
 // src/components/Form/Form.tsx
 var import_react27 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_type_guards27 = require("@wistia/type-guards");
 // src/components/Stack/Stack.tsx
 var import_react26 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
+var import_styled_components45 = __toESM(require("styled-components"));
 var import_jsx_runtime215 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components46.default.div`
+var StyledStack = import_styled_components45.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -8912,7 +8907,7 @@ var Stack = makePolymorphic(StackComponent);
 // src/components/Form/Form.tsx
 var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledForm = import_styled_components47.default.form`
+var StyledForm = import_styled_components46.default.form`
   --form-default-width: 690px;
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9087,13 +9082,13 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 var import_react32 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 // src/components/Label/Label.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime218 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components48.css`
+var requiredStyle = import_styled_components47.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9101,10 +9096,10 @@ var requiredStyle = import_styled_components48.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components48.css`
+var disabledStyle3 = import_styled_components47.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components48.default.label`
+var StyledLabel3 = import_styled_components47.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9154,13 +9149,13 @@ Label.displayName = "Label";
 var import_react31 = require("react");
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
+var import_styled_components48 = __toESM(require("styled-components"));
 var import_react30 = require("react");
 var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components49.default.fieldset`
+var StyledFieldset = import_styled_components48.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components49.default.legend`
+var StyledLegend = import_styled_components48.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
@@ -9209,7 +9204,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime221 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components50.default.div`
+var StyledFormField = import_styled_components49.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -9221,6 +9216,12 @@ var StyledFormField = import_styled_components50.default.div`
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
+  &[data-label-position='inline-compact'] {
+    gap: var(--form-field-spacing-inline);
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+  }
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
@@ -9233,7 +9234,7 @@ var StyledFormField = import_styled_components50.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components50.default.ul`
+var StyledErrorList = import_styled_components49.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9359,9 +9360,9 @@ RadioGroup.displayName = "RadioGroup";
 // src/components/IconButton/IconButton.tsx
 var import_react34 = require("react");
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_jsx_runtime223 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components51.default)(Button)`
+var StyledButton2 = (0, import_styled_components50.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9396,7 +9397,7 @@ var IconButton = (0, import_react34.forwardRef)(
 IconButton.displayName = "IconButton";
 // src/components/Image/Image.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
+var import_styled_components51 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var getFillStyle2 = (fillContainer) => {
@@ -9414,7 +9415,7 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components52.default.img`
+var StyledImage = import_styled_components51.default.img`
   border-radius: ${({ $borderRadius }) => (0, import_type_guards30.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -9445,7 +9446,7 @@ var Image = ({
 Image.displayName = "Image";
 // src/components/Menu/Menu.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
+var import_styled_components52 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards31 = require("@wistia/type-guards");
 var import_react36 = require("react");
@@ -9457,7 +9458,7 @@ var useMenuContext = () => (0, import_react35.useContext)(MenuContext);
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime225 = require("react/jsx-runtime");
-var open = import_styled_components53.keyframes`
+var open = import_styled_components52.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -9467,7 +9468,7 @@ var open = import_styled_components53.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components53.keyframes`
+var close = import_styled_components52.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -9477,7 +9478,7 @@ var close = import_styled_components53.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components53.css`
+var menuItemCss = import_styled_components52.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9488,7 +9489,7 @@ var menuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components53.css`
+var compactMenuItemCss = import_styled_components52.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9499,7 +9500,7 @@ var compactMenuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components53.css`
+var menuContentCss = import_styled_components52.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9541,7 +9542,7 @@ var menuContentCss = import_styled_components53.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components53.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components52.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -9604,10 +9605,10 @@ var Menu = ({
 Menu.displayName = "Menu";
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components54 = __toESM(require("styled-components"));
+var import_styled_components53 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components54.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components53.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -9632,16 +9633,16 @@ MenuLabel.displayName = "MenuLabel";
 // src/components/Menu/SubMenu.tsx
 var import_react38 = require("react");
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components56 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards33 = require("@wistia/type-guards");
 // src/components/Menu/MenuItemButton.tsx
 var import_react37 = require("react");
-var import_styled_components55 = __toESM(require("styled-components"));
+var import_styled_components54 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
 var import_jsx_runtime227 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components55.default)(Button)`
+var StyledButton3 = (0, import_styled_components54.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   display: flex;
@@ -9680,7 +9681,7 @@ var StyledButton3 = (0, import_styled_components55.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components55.default.div`
+var StyledLeftIconContainer = import_styled_components54.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
@@ -9691,7 +9692,7 @@ var StyledLeftIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components55.default.div`
+var StyledRightIconContainer = import_styled_components54.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
@@ -9702,13 +9703,13 @@ var StyledRightIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components55.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components54.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components55.default.div`
+var StyledBadgeContainer = import_styled_components54.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -9756,10 +9757,10 @@ var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components56 = __toESM(require("styled-components"));
+var import_styled_components55 = __toESM(require("styled-components"));
 var import_jsx_runtime228 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components56.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components56.default)(Text).attrs({
+var StyledMenuItemLabel = import_styled_components55.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components55.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
@@ -9772,17 +9773,17 @@ var MenuItemDescription = ({ children }) => {
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime229 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components57.default.div`
+var StyledMobileSubMenuItems = import_styled_components56.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
   &[data-state='open'],
@@ -9993,19 +9994,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 // src/components/Modal/Modal.tsx
 var import_react43 = require("react");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components61 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards35 = require("@wistia/type-guards");
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components58 = __toESM(require("styled-components"));
+var import_styled_components57 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components58.default)(import_react_dialog.Close)`
+var CloseButton = (0, import_styled_components57.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -10022,7 +10023,7 @@ var ModalCloseButton = () => {
 // src/components/Modal/ModalHeader.tsx
 var import_jsx_runtime235 = require("react/jsx-runtime");
-var Header = import_styled_components59.default.header`
+var Header = import_styled_components58.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10033,7 +10034,7 @@ var Header = import_styled_components59.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components59.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components58.default)(import_react_dialog2.Title)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -10053,7 +10054,7 @@ var ModalHeader = ({
 // src/components/Modal/ModalContent.tsx
 var import_react41 = require("react");
-var import_styled_components60 = __toESM(require("styled-components"));
+var import_styled_components59 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -10077,7 +10078,7 @@ var useFocusRestore = () => {
 // src/components/Modal/ModalContent.tsx
 var import_jsx_runtime236 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components60.default)(import_react_dialog3.Content)`
+var StyledModalContent = (0, import_styled_components59.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10137,7 +10138,7 @@ var ModalContent = (0, import_react41.forwardRef)(
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react42 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_jsx_runtime237 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
@@ -10151,7 +10152,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components61.default.div`
+var BackdropComponent = import_styled_components60.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10191,7 +10192,7 @@ Backdrop.displayName = "Backdrop";
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components62.default.div`
+var ModalBody = import_styled_components61.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -10257,7 +10258,7 @@ Modal.displayName = "Modal";
 // src/components/Popover/Popover.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components62 = __toESM(require("styled-components"));
 // src/private/helpers/getControls/getControlProps.tsx
 var import_type_guards36 = require("@wistia/type-guards");
@@ -10267,8 +10268,8 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components63.default)(import_react_popover.Content)`
-  ${({ $unstyled }) => !$unstyled && import_styled_components63.css`
+var StyledContent2 = (0, import_styled_components62.default)(import_react_popover.Content)`
+  ${({ $unstyled }) => !$unstyled && import_styled_components62.css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10319,11 +10320,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
 var import_type_guards37 = require("@wistia/type-guards");
 var import_jsx_runtime240 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components64.default.div`
+var ProgressBarWrapper = import_styled_components63.default.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10339,7 +10340,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components64.default.div`
+var ProgressBarLabel = import_styled_components63.default.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10347,7 +10348,7 @@ var ProgressBarLabel = import_styled_components64.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components64.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components63.default)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10356,7 +10357,7 @@ var StyledProgressIndicator = (0, import_styled_components64.default)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components64.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components63.default)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10399,7 +10400,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 var import_react44 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 var import_type_guards38 = require("@wistia/type-guards");
 var import_jsx_runtime241 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
@@ -10421,7 +10422,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
     )
   }
 );
-var sizeSmall2 = import_styled_components65.css`
+var sizeSmall2 = import_styled_components64.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10432,7 +10433,7 @@ var sizeSmall2 = import_styled_components65.css`
     height: 7px;
   }
 `;
-var sizeMedium2 = import_styled_components65.css`
+var sizeMedium2 = import_styled_components64.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10443,7 +10444,7 @@ var sizeMedium2 = import_styled_components65.css`
     height: 8px;
   }
 `;
-var sizeLarge2 = import_styled_components65.css`
+var sizeLarge2 = import_styled_components64.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10459,14 +10460,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components65.default.div`
+var StyledRadioWrapper = import_styled_components64.default.div`
   display: flex;
   margin: 0;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components65.default.div`
+var StyledRadioInput = import_styled_components64.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10488,7 +10489,7 @@ var StyledRadioInput = import_styled_components65.default.div`
     }
   }
 `;
-var StyledHiddenRadioInput = import_styled_components65.default.input`
+var StyledHiddenRadioInput = import_styled_components64.default.input`
   ${visuallyHiddenStyle}
   /* toggles display of faux-input border-color */
@@ -10567,7 +10568,7 @@ Radio.displayName = "Radio";
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react48 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components66 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_type_guards39 = require("@wistia/type-guards");
@@ -10602,7 +10603,7 @@ var useSelectedItemMeasurements = () => {
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_react47 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components65 = __toESM(require("styled-components"));
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react46 = require("react");
@@ -10618,7 +10619,7 @@ var useSegmentedControlValue = () => {
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components66.default.div`
+var SelectedItemIndicatorDiv = import_styled_components65.default.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -10658,7 +10659,7 @@ var SelectedItemIndicator = () => {
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components67.css`
+var segmentedControlStyles = import_styled_components66.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10668,7 +10669,7 @@ var segmentedControlStyles = import_styled_components67.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components67.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components66.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react48.forwardRef)(
@@ -10707,7 +10708,7 @@ SegmentedControl.displayName = "SegmentedControl";
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react49 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components67 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_type_guards41 = require("@wistia/type-guards");
@@ -10727,7 +10728,7 @@ var mergeRefs = (refs) => (value) => {
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_jsx_runtime245 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components68.css`
+var segmentedControlItemStyles = import_styled_components67.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10786,7 +10787,7 @@ var segmentedControlItemStyles = import_styled_components68.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components68.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components67.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react49.forwardRef)(
@@ -10849,9 +10850,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react50 = require("react");
-var import_styled_components69 = __toESM(require("styled-components"));
+var import_styled_components68 = __toESM(require("styled-components"));
 var import_jsx_runtime246 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
+var StyledTrigger = (0, import_styled_components68.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10899,7 +10900,7 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = (0, import_styled_components69.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components68.default)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -10967,9 +10968,9 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react51 = require("react");
-var import_styled_components70 = __toESM(require("styled-components"));
+var import_styled_components69 = __toESM(require("styled-components"));
 var import_jsx_runtime247 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components70.default)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components69.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -10992,7 +10993,7 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components70.default.span`
+var StyledIconContainer = import_styled_components69.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react51.forwardRef)(
@@ -11020,9 +11021,9 @@ SelectOption.displayName = "Option";
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_styled_components70 = __toESM(require("styled-components"));
 var import_jsx_runtime248 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components71.default)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components70.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -11041,10 +11042,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Switch/Switch.tsx
 var import_react52 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
+var import_styled_components71 = __toESM(require("styled-components"));
 var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var sizeSmall3 = import_styled_components72.css`
+var sizeSmall3 = import_styled_components71.css`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -11059,7 +11060,7 @@ var sizeSmall3 = import_styled_components72.css`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = import_styled_components72.css`
+var sizeMedium3 = import_styled_components71.css`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
@@ -11074,7 +11075,7 @@ var sizeMedium3 = import_styled_components72.css`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = import_styled_components72.css`
+var sizeLarge3 = import_styled_components71.css`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
@@ -11094,14 +11095,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = import_styled_components72.default.div`
+var StyledSwitchWrapper = import_styled_components71.default.div`
   display: flex;
   margin: 0;
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components72.default.div`
+var StyledSwitchInput = import_styled_components71.default.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11129,7 +11130,7 @@ var StyledSwitchInput = import_styled_components72.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components72.default.input`
+var StyledHiddenSwitchInput = import_styled_components71.default.input`
   ${visuallyHiddenStyle}
   /* toggles display of faux-input background-color and toggle position */
@@ -11203,19 +11204,19 @@ var Switch = (0, import_react52.forwardRef)(
 Switch.displayName = "Switch";
 // src/components/Table/Table.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_jsx_runtime250 = require("react/jsx-runtime");
-var StyledTable = import_styled_components73.default.table`
+var StyledTable = import_styled_components72.default.table`
   width: 100%;
   border-collapse: collapse;
-  ${({ $striped }) => $striped && import_styled_components73.css`
+  ${({ $striped }) => $striped && import_styled_components72.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
-  ${({ $divided }) => $divided && import_styled_components73.css`
+  ${({ $divided }) => $divided && import_styled_components72.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11239,7 +11240,7 @@ var Table = ({
 };
 // src/components/Table/TableBody.tsx
-var import_styled_components74 = __toESM(require("styled-components"));
+var import_styled_components73 = __toESM(require("styled-components"));
 // src/components/Table/TableSectionContext.ts
 var import_react53 = require("react");
@@ -11247,27 +11248,27 @@ var TableSectionContext = (0, import_react53.createContext)(null);
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime251 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components74.default.tbody``;
+var StyledTbody = import_styled_components73.default.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTbody, { ...props, children }) });
 };
 // src/components/Table/TableCell.tsx
 var import_react54 = require("react");
-var import_styled_components75 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 var import_jsx_runtime252 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components75.css`
+var sharedStyles = import_styled_components74.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components75.default.th`
+var StyledTh = import_styled_components74.default.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = import_styled_components75.default.td`
+var StyledTd = import_styled_components74.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -11282,25 +11283,25 @@ var TableCell = ({ children, ...props }) => {
 };
 // src/components/Table/TableFooter.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
+var import_styled_components75 = __toESM(require("styled-components"));
 var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components76.default.tfoot``;
+var StyledTfoot = import_styled_components75.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledTfoot, { ...props, children }) });
 };
 // src/components/Table/TableHead.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components76 = __toESM(require("styled-components"));
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledThead = import_styled_components77.default.thead``;
+var StyledThead = import_styled_components76.default.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledThead, { ...props, children }) });
 };
 // src/components/Table/TableRow.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components77 = __toESM(require("styled-components"));
 var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTr = import_styled_components78.default.tr``;
+var StyledTr = import_styled_components77.default.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledTr, { ...props, children });
 };
@@ -11309,13 +11310,13 @@ var TableRow = ({ children, ...props }) => {
 var import_react59 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
 var import_type_guards44 = require("@wistia/type-guards");
-var import_styled_components83 = __toESM(require("styled-components"));
+var import_styled_components82 = __toESM(require("styled-components"));
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components78 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components79.default)(import_react_tabs.Content)`
+var StyledTabPanel = (0, import_styled_components78.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
@@ -11332,10 +11333,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 // src/components/Tabs/TabList.tsx
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
 var import_jsx_runtime257 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components80.default)(import_react_tabs2.List)`
+var StyledTabList = (0, import_styled_components79.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
   margin-bottom: var(--wui-space-04);
@@ -11362,7 +11363,7 @@ TabList.displayName = "TabList";
 // src/components/Tabs/TabItem.tsx
 var import_react56 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_type_guards43 = require("@wistia/type-guards");
@@ -11380,7 +11381,7 @@ var useTabsValue = () => {
 // src/components/Tabs/TabItem.tsx
 var import_jsx_runtime258 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components81.default)(import_react_tabs3.Trigger)`
+var StyledTabItem = (0, import_styled_components80.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
   &:focus-visible {
@@ -11460,9 +11461,9 @@ var extractTabItems = (children) => {
 // src/components/Tabs/SelectedItemIndicator.tsx
 var import_react58 = require("react");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components82.default)(SelectedItemIndicatorDiv)`
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11495,18 +11496,18 @@ var SelectedItemIndicator2 = () => {
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime260 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components83.default.div`
+var TabsContainer = import_styled_components82.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components83.default.div`
+var StickyTabContent = import_styled_components82.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components83.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components82.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
@@ -11618,10 +11619,10 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 var import_react61 = require("react");
-var import_styled_components84 = __toESM(require("styled-components"));
+var import_styled_components83 = __toESM(require("styled-components"));
 var import_type_guards45 = require("@wistia/type-guards");
 var import_jsx_runtime262 = require("react/jsx-runtime");
-var TagLabel = import_styled_components84.default.a`
+var TagLabel = import_styled_components83.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11656,14 +11657,14 @@ var TagLabel = import_styled_components84.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components84.default.div`
+var TagDivider = import_styled_components83.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components84.default.button`
+var StyledRemoveButton = import_styled_components83.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11691,7 +11692,7 @@ var StyledRemoveButton = import_styled_components84.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components84.default.div`
+var StyledTag = import_styled_components83.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11780,7 +11781,7 @@ var Tag = (0, import_react61.forwardRef)(
 Tag.displayName = "Tag";
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components85 = __toESM(require("styled-components"));
+var import_styled_components84 = __toESM(require("styled-components"));
 var import_type_guards46 = require("@wistia/type-guards");
 var import_jsx_runtime263 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11822,7 +11823,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components85.default.svg`
+var WistiaLogoComponent = import_styled_components84.default.svg`
   height: ${({ height }) => `${height}px`};
   /* ensure it will always fit on mobile */
@@ -11838,12 +11839,12 @@ var WistiaLogoComponent = import_styled_components85.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components85.css`
+      return import_styled_components84.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components85.css`
+    return import_styled_components84.css`
         aspect-ratio: 127 / 32;
       `;
   }