@wistia/ui 0.4.11-beta.bab90df5.bc51d6d → 0.4.11

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.11-beta.bab90df5.bc51d6d
+ * @license @wistia/ui v0.4.11
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6114,66 +6114,33 @@ BoxComponent.displayName = "Box";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Children as Children2 } from "react";
 import styled11 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx168, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx168 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled11.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
-  overflow: hidden;
 
-  > [data-wui-breadcrumb-divider]:last-of-type {
+  > svg:last-of-type {
     display: none;
   }
 `;
-var BUFFER_WIDTH = 10;
 var Breadcrumbs = ({ children, ...props }) => {
-  const { isXsAndDown } = useMq();
-  let crumbs = Children2.toArray(children);
-  if (isXsAndDown) {
-    crumbs = crumbs.slice(-1);
-  }
-  const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsx168("style", { type: "text/css", children: `
-       [data-wui-breadcrumbs] {
-          container-type: inline-size;
-          container-name: breadcrumbs;
-        }
-
-        @container breadcrumbs (width < 100vw) {
-          [data-wui-breadcrumb] {
-              max-width: ${crumbMaxWidth}cqw;
-          }
-        }
-     ` }),
-    /* @__PURE__ */ jsx168(
-      StyledBreadcrumbs,
-      {
-        "aria-label": "Breadcrumbs",
-        "data-wui-breadcrumbs": true,
-        ...props,
-        children: crumbs
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx168(
+    StyledBreadcrumbs,
+    {
+      "aria-label": "Breadcrumbs",
+      ...props,
+      children
+    }
+  );
 };
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import styled12 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx169, jsxs as jsxs10 } from "react/jsx-runtime";
-var BreadcrumbContent = styled12.span`
-  overflow: hidden;
-  white-space: nowrap;
-  display: block;
-  text-overflow: ellipsis;
-  text-align: left;
-  flex: 0;
-`;
+import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs9 } from "react/jsx-runtime";
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx169(
       Button,
       {
@@ -6181,22 +6148,21 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ jsx169(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children
       }
     ),
-    /* @__PURE__ */ jsx169("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx169(
+    /* @__PURE__ */ jsx169(
       Icon,
       {
         size: "sm",
-        style: { flex: "0 1 auto" },
         type: "caret-right"
       }
-    ) })
+    )
   ] });
 };
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled13 from "styled-components";
+import styled12 from "styled-components";
 import { isNil as isNil8 } from "@wistia/type-guards";
 import { jsx as jsx170 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -6211,7 +6177,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = styled13.div`
+var ButtonGroupComponent = styled12.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -6253,9 +6219,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-import styled14 from "styled-components";
+import styled13 from "styled-components";
 import { jsx as jsx171 } from "react/jsx-runtime";
-var StyledCard = styled14(Box)`
+var StyledCard = styled13(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -6306,15 +6272,15 @@ Card.displayName = "Card";
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef7, useId } from "react";
 import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
-import styled18 from "styled-components";
+import styled17 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled16, { css as css16 } from "styled-components";
+import styled15, { css as css16 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled15, { css as css15 } from "styled-components";
+import styled14, { css as css15 } from "styled-components";
 import { jsx as jsx172 } from "react/jsx-runtime";
 var heroStyle = css15`
   --font-family: var(--wui-typography-heading-hero-family);
@@ -6368,7 +6334,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = styled15.div`
+var StyledHeading = styled14.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6443,7 +6409,7 @@ var requiredStyle = css16`
 var disabledStyle = css16`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled16(Heading).attrs({
+var StyledLabel2 = styled15(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6486,10 +6452,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-import styled17 from "styled-components";
+import styled16 from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
 import { jsx as jsx174 } from "react/jsx-runtime";
-var StyledLabelDescription = styled17.div`
+var StyledLabelDescription = styled16.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6507,7 +6473,7 @@ var LabelDescription = ({
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx175, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs10 } from "react/jsx-runtime";
 var CheckIcon = () => /* @__PURE__ */ jsx175(
   "svg",
   {
@@ -6525,7 +6491,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx175(
     )
   }
 );
-var StyledCheckboxWrapper = styled18.div`
+var StyledCheckboxWrapper = styled17.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6539,7 +6505,7 @@ var StyledCheckboxWrapper = styled18.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = styled18(CheckboxRoot)`
+var StyledCheckboxRoot = styled17(CheckboxRoot)`
   all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
   background-color: var(--wui-color-bg-fill-white);
   min-width: 16px;
@@ -6573,10 +6539,10 @@ var StyledCheckboxRoot = styled18(CheckboxRoot)`
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = styled18(CheckboxIndicator)`
+var StyledCheckboxIndicator = styled17(CheckboxIndicator)`
   display: flex;
 `;
-var StyledLabelWrapper = styled18.div`
+var StyledLabelWrapper = styled17.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6597,7 +6563,7 @@ var Checkbox = forwardRef7(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ jsxs11(StyledCheckboxWrapper, { children: [
+    return /* @__PURE__ */ jsxs10(StyledCheckboxWrapper, { children: [
       /* @__PURE__ */ jsx175(
         StyledCheckboxRoot,
         {
@@ -6626,7 +6592,7 @@ var Checkbox = forwardRef7(
           children: /* @__PURE__ */ jsx175(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx175(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs11(StyledLabelWrapper, { children: [
+      /* @__PURE__ */ jsxs10(StyledLabelWrapper, { children: [
         /* @__PURE__ */ jsx175(
           Label,
           {
@@ -6644,7 +6610,7 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled19, { css as css17 } from "styled-components";
+import styled18, { css as css17 } from "styled-components";
 import { jsx as jsx176 } from "react/jsx-runtime";
 var horizontalBorderCss = css17`
   border-top-color: var(--wui-color-border);
@@ -6659,7 +6625,7 @@ var verticalBorderCss = css17`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled19.div`
+var DividerComponent = styled18.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6688,15 +6654,15 @@ Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef9, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
-import styled21 from "styled-components";
+import styled20 from "styled-components";
 import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled20 from "styled-components";
+import styled19 from "styled-components";
 import { jsx as jsx177 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT3 = "div";
-var StyledStack = styled20.div`
+var StyledStack = styled19.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6722,7 +6688,7 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
 import { jsx as jsx178 } from "react/jsx-runtime";
-var StyledForm = styled21.form`
+var StyledForm = styled20.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -6850,7 +6816,7 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef4 } from "react";
 import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx179, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx179("li", { children: /* @__PURE__ */ jsx179(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
@@ -6861,7 +6827,7 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs12("div", { ref, children: [
+  return /* @__PURE__ */ jsxs11("div", { ref, children: [
     /* @__PURE__ */ jsx179("p", { children: description }),
     /* @__PURE__ */ jsx179("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
       ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx179(
@@ -6886,13 +6852,13 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children3, cloneElement as cloneElement3, useContext as useContext3 } from "react";
-import styled24 from "styled-components";
+import { Children as Children2, cloneElement as cloneElement3, useContext as useContext3 } from "react";
+import styled23 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil8, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef10 } from "react";
-import styled22, { css as css18 } from "styled-components";
+import styled21, { css as css18 } from "styled-components";
 import { jsx as jsx180 } from "react/jsx-runtime";
 var bodyBoldStyles = css18`
   > strong,
@@ -6992,7 +6958,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = styled22.div`
+var StyledText = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -7071,18 +7037,18 @@ var Text = makePolymorphic(TextComponent);
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled23 from "styled-components";
+import styled22 from "styled-components";
 import { useRef as useRef5 } from "react";
-import { jsx as jsx181, jsxs as jsxs13 } from "react/jsx-runtime";
-var StyledFieldset = styled23.fieldset`
+import { jsx as jsx181, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledFieldset = styled22.fieldset`
   border: 0;
 `;
-var StyledLegend = styled23.legend`
+var StyledLegend = styled22.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = useRef5();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12(
     Stack,
     {
       ...props,
@@ -7125,8 +7091,8 @@ var CheckboxGroup = ({
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx183, jsxs as jsxs14 } from "react/jsx-runtime";
-var StyledFormField = styled24.div`
+import { jsx as jsx183, jsxs as jsxs13 } from "react/jsx-runtime";
+var StyledFormField = styled23.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -7134,7 +7100,7 @@ var StyledFormField = styled24.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = styled24.ul`
+var StyledErrorList = styled23.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -7210,8 +7176,8 @@ var FormField = ({
       "aria-describedby": isNotNil8(error) ? `${id}-error` : void 0
     };
   }
-  Children3.only(children);
-  return /* @__PURE__ */ jsxs14(StyledFormField, { ...props, children: [
+  Children2.only(children);
+  return /* @__PURE__ */ jsxs13(StyledFormField, { ...props, children: [
     !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
     isNotNil8(computedError) ? /* @__PURE__ */ jsx183(
@@ -7247,10 +7213,10 @@ var RadioGroup = ({
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children4, cloneElement as cloneElement4, forwardRef as forwardRef11 } from "react";
-import styled25 from "styled-components";
+import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef11 } from "react";
+import styled24 from "styled-components";
 import { jsx as jsx185 } from "react/jsx-runtime";
-var StyledButton2 = styled25(Button)`
+var StyledButton2 = styled24(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7275,7 +7241,7 @@ var IconButton = forwardRef11(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: cloneElement4(Children4.only(children), {
+        children: cloneElement4(Children3.only(children), {
           size: responsiveSize
         })
       }
@@ -7286,9 +7252,9 @@ IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef12, cloneElement as cloneElement5, useRef as useRef6 } from "react";
-import styled26, { css as css19 } from "styled-components";
+import styled25, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx186, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
 var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7330,7 +7296,7 @@ var inputStyles = css19`
     }
   }
 `;
-var StyledInputContainer = styled26.div`
+var StyledInputContainer = styled25.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7416,7 +7382,7 @@ var Input = forwardRef12(
         });
       }
     };
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs14(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
@@ -7448,7 +7414,7 @@ var Input = forwardRef12(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import styled27, { css as css20, keyframes } from "styled-components";
+import styled26, { css as css20, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7464,7 +7430,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx187, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs15 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7548,7 +7514,7 @@ var menuContentCss = css20`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled27(DropdownMenuContent)`
+var MenuContent = styled26(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -7574,7 +7540,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15(
     DropdownMenu,
     {
       modal: false,
@@ -7611,10 +7577,10 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled28 from "styled-components";
+import styled27 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx188 } from "react/jsx-runtime";
-var StyledMenuLabel = styled28(DropdownMenuLabel)`
+var StyledMenuLabel = styled27(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -7639,7 +7605,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState7 } from "react";
-import styled31 from "styled-components";
+import styled30 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -7652,10 +7618,10 @@ import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled29 from "styled-components";
+import styled28 from "styled-components";
 import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx189, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledButton3 = styled29(Button)`
+import { jsx as jsx189, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledButton3 = styled28(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7693,7 +7659,7 @@ var StyledButton3 = styled29(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled29.div`
+var StyledLeftIconContainer = styled28.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7702,7 +7668,7 @@ var StyledLeftIconContainer = styled29.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = styled29.div`
+var StyledRightIconContainer = styled28.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7711,13 +7677,13 @@ var StyledRightIconContainer = styled29.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = styled29.div`
+var StyledLabelAndDescriptionContainer = styled28.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled29.div`
+var StyledBadgeContainer = styled28.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -7744,7 +7710,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     StyledButton3,
     {
       ...props,
@@ -7765,10 +7731,10 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled30 from "styled-components";
+import styled29 from "styled-components";
 import { jsx as jsx190 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled30.span``;
-var StyledMenuItemDescription = styled30(Text).attrs({
+var StyledMenuItemLabel = styled29.span``;
+var StyledMenuItemDescription = styled29(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
@@ -7780,18 +7746,18 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx191, jsxs as jsxs18 } from "react/jsx-runtime";
-var SubMenuContent = styled31(DropdownMenuSubContent)`
+import { jsx as jsx191, jsxs as jsxs17 } from "react/jsx-runtime";
+var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled31.div`
+var StyledMobileSubMenuItems = styled30.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled31(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7820,14 +7786,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs18(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs18(SubMenuTrigger, { ...props, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs17(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs17(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
       isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs18(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs18(
+  ] }) : /* @__PURE__ */ jsxs17(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs17(
       SubMenuTrigger,
       {
         ...props,
@@ -7875,9 +7841,9 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx193, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs18 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs19(DropdownMenuRadioGroup, { ...props, children: [
+  return /* @__PURE__ */ jsxs18(DropdownMenuRadioGroup, { ...props, children: [
     /* @__PURE__ */ jsx193(MenuLabel, { children: label }),
     children
   ] });
@@ -7925,9 +7891,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx195, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs19 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs20(
+  return checked ? /* @__PURE__ */ jsxs19(
     "svg",
     {
       ...props,
@@ -7953,7 +7919,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs20(
+  ) : /* @__PURE__ */ jsxs19(
     "svg",
     {
       ...props,
@@ -8008,19 +7974,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17 } from "react";
-import styled37 from "styled-components";
+import styled36 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled34 from "styled-components";
+import styled33 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled32 from "styled-components";
+import styled31 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
 import { jsx as jsx196 } from "react/jsx-runtime";
-var CloseButton = styled32(DialogClose)`
+var CloseButton = styled31(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -8036,11 +8002,11 @@ var ModalCloseButton = () => {
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled33 from "styled-components";
+import styled32 from "styled-components";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 import { jsx as jsx197 } from "react/jsx-runtime";
-var VisuallyHidden = styled33.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled33.div({
+var VisuallyHidden = styled32.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled32.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -8058,8 +8024,8 @@ var ScreenReaderOnly = ({
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx198, jsxs as jsxs21 } from "react/jsx-runtime";
-var Header = styled34.header`
+import { jsx as jsx198, jsxs as jsxs20 } from "react/jsx-runtime";
+var Header = styled33.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -8071,7 +8037,7 @@ var Header = styled34.header`
     margin-top: 0;
   }
 `;
-var Title = styled34(DialogTitle)`
+var Title = styled33(DialogTitle)`
   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);
@@ -8083,7 +8049,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ jsxs21(Header, { children: [
+  return /* @__PURE__ */ jsxs20(Header, { children: [
     /* @__PURE__ */ jsx198(TitleWrapper, { children: title }),
     hideCloseButton ? null : /* @__PURE__ */ jsx198(ModalCloseButton, {})
   ] });
@@ -8091,7 +8057,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled35 from "styled-components";
+import styled34 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -8115,7 +8081,7 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 import { jsx as jsx199 } from "react/jsx-runtime";
-var StyledModalContent = styled35(DialogContent)`
+var StyledModalContent = styled34(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -8174,7 +8140,7 @@ var ModalContent = forwardRef15(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled36 from "styled-components";
+import styled35 from "styled-components";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
@@ -8188,7 +8154,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled36.div`
+var BackdropComponent = styled35.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -8226,8 +8192,8 @@ var Backdrop = forwardRef16(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx201, jsxs as jsxs22 } from "react/jsx-runtime";
-var ModalBody = styled37.div`
+import { jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
+var ModalBody = styled36.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -8254,9 +8220,9 @@ var Modal = forwardRef17(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs22(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs21(DialogPortal, { children: [
           /* @__PURE__ */ jsx201(Backdrop, {}),
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs21(
             ModalContent,
             {
               ref,
@@ -8293,15 +8259,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled38, { css as css21 } from "styled-components";
+import styled37, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx202, jsxs as jsxs23 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled38.div`
+import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled37.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled38.input`
+var StyledRadio = styled37.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8343,7 +8309,7 @@ var defaultHoverStyle = css21`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled38.div`
+var StyledRadioWrapper = styled37.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8381,7 +8347,7 @@ var Radio = forwardRef18(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs22(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
@@ -8402,7 +8368,7 @@ var Radio = forwardRef18(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs23(StyledLabelWrapper2, { children: [
+          /* @__PURE__ */ jsxs22(StyledLabelWrapper2, { children: [
             /* @__PURE__ */ jsx202(
               Label,
               {
@@ -8423,11 +8389,11 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled39 from "styled-components";
+import styled38 from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil11 } from "@wistia/type-guards";
 import { jsx as jsx203 } from "react/jsx-runtime";
-var StyledSegmentedControl = styled39(ToggleGroupRoot)`
+var StyledSegmentedControl = styled38(ToggleGroupRoot)`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -8468,11 +8434,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled40 from "styled-components";
+import styled39 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsxs as jsxs24 } from "react/jsx-runtime";
-var StyledSegmentedControlItem = styled40(ToggleGroupItem)`
+import { jsxs as jsxs23 } from "react/jsx-runtime";
+var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -8533,7 +8499,7 @@ var SegmentedControlItem = forwardRef20(
         event.preventDefault();
       }
     };
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs23(
       StyledSegmentedControlItem,
       {
         ref,
@@ -8554,10 +8520,10 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef21 } from "react";
-import styled41 from "styled-components";
+import styled40 from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx204, jsxs as jsxs25 } from "react/jsx-runtime";
-var TagLabel = styled41.a`
+import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
+var TagLabel = styled40.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8585,14 +8551,14 @@ var TagLabel = styled41.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled41.div`
+var TagDivider = styled40.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled41.button`
+var StyledRemoveButton = styled40.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8620,7 +8586,7 @@ var StyledRemoveButton = styled41.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled41.div`
+var StyledTag = styled40.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8637,9 +8603,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs25(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
     /* @__PURE__ */ jsx204(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs24(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -8662,7 +8628,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = forwardRef21(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = isNotNil17(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs24(
       StyledTag,
       {
         ref,
@@ -8700,8 +8666,8 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled42, { css as css22 } from "styled-components";
-import { jsx as jsx205, jsxs as jsxs26 } from "react/jsx-runtime";
+import styled41, { css as css22 } from "styled-components";
+import { jsx as jsx205, jsxs as jsxs25 } from "react/jsx-runtime";
 var CompactTooltipStyles = css22`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8709,7 +8675,7 @@ var CompactTooltipStyles = css22`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled42(Content)`
+var StyledContent = styled41(Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8767,14 +8733,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx205(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx205(Portal, { children: /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsx205(Portal, { children: /* @__PURE__ */ jsxs25(
           StyledContent,
           {
             $compact: compact,
@@ -8804,9 +8770,9 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled43 from "styled-components";
+import styled42 from "styled-components";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
-import { jsx as jsx206, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx206(
@@ -8846,7 +8812,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled43.svg`
+var WistiaLogoComponent = styled42.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8888,7 +8854,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs27(
+  const Logo = /* @__PURE__ */ jsxs26(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8921,9 +8887,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef22 } from "react";
-import styled44 from "styled-components";
-import { jsx as jsx207, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledTrigger = styled44(Trigger2)`
+import styled43 from "styled-components";
+import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
+var StyledTrigger = styled43(Trigger2)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -8964,7 +8930,7 @@ var StyledTrigger = styled44(Trigger2)`
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent2 = styled44(Content2)`
+var StyledContent2 = styled43(Content2)`
   --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);
@@ -8990,13 +8956,13 @@ var Select = forwardRef22(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs27(
       Root2,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs28(
+          /* @__PURE__ */ jsxs27(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -9015,7 +8981,7 @@ var Select = forwardRef22(
               ]
             }
           ),
-          /* @__PURE__ */ jsx207(Portal2, { children: /* @__PURE__ */ jsxs28(StyledContent2, { position: "popper", children: [
+          /* @__PURE__ */ jsx207(Portal2, { children: /* @__PURE__ */ jsxs27(StyledContent2, { position: "popper", children: [
             /* @__PURE__ */ jsx207(ScrollUpButton, { children: /* @__PURE__ */ jsx207(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx207(Viewport, { children }),
             /* @__PURE__ */ jsx207(ScrollDownButton, { children: /* @__PURE__ */ jsx207(Icon, { type: "caret-down" }) })
@@ -9030,9 +8996,9 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
-import styled45 from "styled-components";
-import { jsx as jsx208, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledItem = styled45(Item)`
+import styled44 from "styled-components";
+import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledItem = styled44(Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -9055,12 +9021,12 @@ var StyledItem = styled45(Item)`
     background-color: transparent;
   }
 `;
-var StyledIconContainer = styled45.span`
+var StyledIconContainer = styled44.span`
   width: 12px;
 `;
 var SelectOption = forwardRef23(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs28(
       StyledItem,
       {
         ...props,
@@ -9083,13 +9049,13 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled46 from "styled-components";
-import { jsx as jsx209, jsxs as jsxs30 } from "react/jsx-runtime";
-var StyledLabel3 = styled46(Label2)`
+import styled45 from "styled-components";
+import { jsx as jsx209, jsxs as jsxs29 } from "react/jsx-runtime";
+var StyledLabel3 = styled45(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs30(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs29(Group, { ...props, children: [
     /* @__PURE__ */ jsx209(StyledLabel3, { children: /* @__PURE__ */ jsx209(
       Text,
       {