@wistia/ui 0.6.33 → 0.6.34-beta.102cdb30.1a306e1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.33
+ * @license @wistia/ui v0.6.34-beta.102cdb30.1a306e1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -48,6 +48,7 @@ __export(index_exports, {
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Card: () => Card,
+  Center: () => Center,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
   CheckboxMenuItem: () => CheckboxMenuItem,
@@ -7357,6 +7358,38 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
+var getFlexStyle = (flexMode) => {
+  if (!flexMode) return null;
+  switch (flexMode) {
+    // grows to fill space, won't shrink, starts at 0
+    case "grow":
+      return import_styled_components25.css`
+        flex: 1 0 0;
+      `;
+    // default behavior, can shrink but won't grow
+    case "initial":
+      return import_styled_components25.css`
+        flex: 0 1 auto;
+      `;
+    // equal distribution of space
+    case "equal":
+      return import_styled_components25.css`
+        flex: 1;
+      `;
+    // won't grow or shrink
+    case "rigid":
+      return import_styled_components25.css`
+        flex: 0 0 auto;
+      `;
+    // can grow and shrink from content size
+    case "fluid":
+      return import_styled_components25.css`
+        flex: 1 1 auto;
+      `;
+    default:
+      return null;
+  }
+};
 var StyledBoxComponent = import_styled_components25.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
@@ -7366,6 +7399,8 @@ var StyledBoxComponent = import_styled_components25.default.div`
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
+  ${({ $flexMode }) => getFlexStyle($flexMode)};
+  ${({ $gap }) => getGapStyle($gap)};
   height: ${({ $height }) => $height ?? null};
   width: ${({ $width }) => $width ?? null};
 
@@ -7373,7 +7408,6 @@ var StyledBoxComponent = import_styled_components25.default.div`
   flex-grow: ${({ $grow }) => (0, import_type_guards17.isNotNil)($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => (0, import_type_guards17.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards17.isNotNil)($order) ? $order : null};
 `;
@@ -7416,6 +7450,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
     shrink,
     width,
     wrapItems = false,
+    flexMode,
     ...otherProps
   }, ref) => {
     if ((0, import_type_guards17.isNotUndefined)(height)) {
@@ -7449,6 +7484,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
         $fillBox: fill,
         $fillViewport: fillViewport,
         $flexDirection: direction,
+        $flexMode: flexMode,
         $gap: gap,
         $grow: grow,
         $height: height,
@@ -7671,23 +7707,54 @@ var Card = ({
 );
 Card.displayName = "Card";
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/Center/Center.tsx
 var import_react19 = require("react");
-var import_styled_components33 = __toESM(require("styled-components"));
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var StyledCenter = import_styled_components30.default.div`
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${({ $maxWidth }) => $maxWidth};
+  ${({ $gutterWidth }) => $gutterWidth && `padding: 0 var(--wui-${$gutterWidth.toString()});`}
+  ${({ $intrinsic }) => $intrinsic && `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `}
+`;
+var Center = (0, import_react19.forwardRef)(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+    StyledCenter,
+    {
+      ref,
+      $gutterWidth: gutterWidth,
+      $intrinsic: intrinsic,
+      $maxWidth: maxWidth,
+      ...props,
+      children
+    }
+  )
+);
+Center.displayName = "Center";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react20 = require("react");
+var import_styled_components34 = __toESM(require("styled-components"));
 var import_type_guards22 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
+var import_styled_components33 = __toESM(require("styled-components"));
 var import_type_guards21 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
+var import_styled_components31 = __toESM(require("styled-components"));
 var import_type_guards19 = require("@wistia/type-guards");
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var disabledStyle = import_styled_components30.css`
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var disabledStyle = import_styled_components31.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components30.default.div`
+var StyledFormControlLabelDescription = import_styled_components31.default.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -7705,7 +7772,7 @@ var FormControlLabelDescription = ({
   if ((0, import_type_guards19.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -7717,11 +7784,11 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
+var import_styled_components32 = __toESM(require("styled-components"));
 var import_type_guards20 = require("@wistia/type-guards");
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components31.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components31.default.div({
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components32.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components32.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7732,23 +7799,23 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards20.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components32.css`
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var disabledStyle2 = import_styled_components33.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components32.default.div`
+var StyledLabelWrapper = import_styled_components33.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components32.default.label`
+var StyledFormControlLabel = import_styled_components33.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7773,11 +7840,11 @@ var FormControlLabel = ({
   if ((0, import_type_guards21.isNil)(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(FormControlLabelDescription, { children: description })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
     StyledFormControlLabel,
     {
       $disabled: disabled,
@@ -7793,8 +7860,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime206 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -7802,7 +7869,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -7811,7 +7878,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components33.css`
+var sizeSmall = import_styled_components34.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -7822,7 +7889,7 @@ var sizeSmall = import_styled_components33.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components33.css`
+var sizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -7833,7 +7900,7 @@ var sizeMedium = import_styled_components33.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components33.css`
+var sizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -7849,14 +7916,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components33.default.div`
+var StyledCheckboxWrapper = import_styled_components34.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components33.default.div`
+var StyledCheckboxInput = import_styled_components34.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -7878,7 +7945,7 @@ var StyledCheckboxInput = import_styled_components33.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components33.default.input`
+var StyledHiddenCheckboxInput = import_styled_components34.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -7892,7 +7959,7 @@ var StyledHiddenCheckboxInput = import_styled_components33.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react19.forwardRef)(
+var Checkbox = (0, import_react20.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -7907,10 +7974,10 @@ var Checkbox = (0, import_react19.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react19.useId)();
+    const generatedId = (0, import_react20.useId)();
     const computedId = (0, import_type_guards22.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -7925,16 +7992,16 @@ var Checkbox = (0, import_react19.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -7950,9 +8017,9 @@ var Checkbox = (0, import_react19.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -7960,7 +8027,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react20.useCallback)(
+  const handleClick = (0, import_react21.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
@@ -7977,7 +8044,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react20.cloneElement)(import_react20.Children.only(children), {
+  return (0, import_react21.cloneElement)(import_react21.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -7987,9 +8054,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_components34 = __toESM(require("styled-components"));
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components34.default)(import_react_collapsible.Root)`
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8005,82 +8072,82 @@ var Collapsible = ({
   const controlProps = {
     ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime208 = require("react/jsx-runtime");
+var import_jsx_runtime209 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
-  import_react21.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  import_react22.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components35 = __toESM(require("styled-components"));
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
 var import_type_guards24 = require("@wistia/type-guards");
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components35.default.div.attrs({ "data-wui-collapsible-content": true })`
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if ((0, import_type_guards24.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components38 = __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_components36 = __toESM(require("styled-components"));
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var heroStyle = import_styled_components36.css`
+var import_react23 = require("react");
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var heroStyle = import_styled_components37.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_components36.css`
+var heading1TextStyle = import_styled_components37.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_components36.css`
+var heading2TextStyle = import_styled_components37.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_components36.css`
+var heading3TextStyle = import_styled_components37.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_components36.css`
+var heading4TextStyle = import_styled_components37.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_components36.css`
+var heading5TextStyle = import_styled_components37.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_components36.css`
+var heading6TextStyle = import_styled_components37.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);
@@ -8096,7 +8163,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components36.default.div`
+var StyledHeading = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8105,16 +8172,16 @@ var StyledHeading = import_styled_components36.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components36.css`
+  ${({ $inline }) => $inline && import_styled_components37.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components36.css`
+  ${({ $disabled }) => $disabled && import_styled_components37.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components36.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components36.css`
+  ${({ $align }) => import_styled_components37.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8128,7 +8195,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react22.forwardRef)(
+var HeadingComponent = (0, import_react23.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8139,7 +8206,7 @@ var HeadingComponent = (0, import_react22.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
     StyledHeading,
     {
       ref,
@@ -8159,8 +8226,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components37.default.div`
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components38.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8173,7 +8240,7 @@ var StyledDataCard = import_styled_components37.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components37.keyframes`
+var shimmer = import_styled_components38.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8181,7 +8248,7 @@ var shimmer = import_styled_components37.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components37.default.div`
+var LoadingBackground = import_styled_components38.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8192,27 +8259,27 @@ var LoadingBackground = import_styled_components37.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components38.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components38.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components37.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components38.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components37.default)(Heading)`
+var StyledValue = (0, import_styled_components38.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components37.default.div`
+var StyledSlot = import_styled_components38.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components37.default.div`
+var StyledDataCardTrendContainer = import_styled_components38.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8225,39 +8292,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards25.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards25.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards25.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards25.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components38.default)(Box)`
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components39.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8271,7 +8338,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8289,25 +8356,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
-var import_react23 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components39.css`
+var import_react24 = require("react");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components39.css`
+var labelBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components39.css`
+var body1TextStyle = import_styled_components40.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);
@@ -8315,7 +8382,7 @@ var body1TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components39.css`
+var body2TextStyle = import_styled_components40.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);
@@ -8323,7 +8390,7 @@ var body2TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components39.css`
+var body3TextStyle = import_styled_components40.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);
@@ -8331,7 +8398,7 @@ var body3TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components39.css`
+var body4TextStyle = import_styled_components40.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);
@@ -8339,47 +8406,47 @@ var body4TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components39.css`
+var label1TextStyle = import_styled_components40.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_components39.css`
+var label2TextStyle = import_styled_components40.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_components39.css`
+var label3TextStyle = import_styled_components40.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_components39.css`
+var label4TextStyle = import_styled_components40.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_components39.css`
+var body1MonoTextStyle = import_styled_components40.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components39.css`
+var body2MonoTextStyle = import_styled_components40.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components39.css`
+var body3MonoTextStyle = import_styled_components40.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components39.css`
+var body4MonoTextStyle = import_styled_components40.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8414,7 +8481,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components39.default.div`
+var StyledText = import_styled_components40.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8438,19 +8505,19 @@ var StyledText = import_styled_components39.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components39.css`
+  ${({ $inline }) => $inline && import_styled_components40.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components39.css`
+  ${({ $disabled }) => $disabled && import_styled_components40.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components39.css`
+  ${({ $align }) => import_styled_components40.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components39.css`
+  ${({ as }) => as === "p" && import_styled_components40.css`
       display: block;
 
       + p {
@@ -8458,7 +8525,7 @@ var StyledText = import_styled_components39.default.div`
       }
     `}
 `;
-var TextComponent = (0, import_react23.forwardRef)(
+var TextComponent = (0, import_react24.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8471,7 +8538,7 @@ var TextComponent = (0, import_react23.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       StyledText,
       {
         ref,
@@ -8493,8 +8560,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components40.default.div`
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components41.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8509,8 +8576,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       Icon,
       {
         size: "md",
@@ -8518,7 +8585,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8530,22 +8597,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components41.css`
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components42.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_components41.css`
+var verticalBorderCss = import_styled_components42.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components41.default.div`
+var DividerComponent = import_styled_components42.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8560,7 +8627,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8573,21 +8640,21 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_react25 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_react26 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components42.css`
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components43.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_components42.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components43.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);
@@ -8646,14 +8713,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -8661,7 +8728,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8670,7 +8737,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -8683,11 +8750,11 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react24 = require("react");
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_react25 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var inputStyles = import_styled_components43.css`
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var inputStyles = import_styled_components44.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);
@@ -8728,7 +8795,7 @@ var inputStyles = import_styled_components43.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components43.default.div`
+var StyledInputContainer = import_styled_components44.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -8772,7 +8839,7 @@ var StyledInputContainer = import_styled_components43.default.div`
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react24.forwardRef)(
+var Input = (0, import_react25.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -8782,24 +8849,24 @@ var Input = (0, import_react24.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react24.useRef)();
+    const internalRef = (0, import_react25.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       (0, import_type_guards26.isNotNil)(externalRef) && (0, import_type_guards26.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards26.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards26.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react24.cloneElement)(leftIconToDisplay, {
+      leftIconToDisplay = (0, import_react25.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if ((0, import_type_guards26.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react24.cloneElement)(rightIconToDisplay, {
+      rightIconToDisplay = (0, import_react25.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -8814,21 +8881,21 @@ var Input = (0, import_react24.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             "input",
             {
               ...props,
@@ -8846,8 +8913,8 @@ var Input = (0, import_react24.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components44.default)(Input)`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components45.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -8867,7 +8934,7 @@ var StyledInput = (0, import_styled_components44.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components44.css`
+var editableStyles = import_styled_components45.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -8877,7 +8944,7 @@ var editableStyles = import_styled_components44.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components44.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components45.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -8894,11 +8961,11 @@ var EditableHeading = ({
   forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react25.useState)(false);
-  const [value, setValue] = (0, import_react25.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react25.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react25.useState)("60");
-  const headingRef = (0, import_react25.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react26.useState)(false);
+  const [value, setValue] = (0, import_react26.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react26.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react26.useState)("60");
+  const headingRef = (0, import_react26.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -8931,7 +8998,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -8945,7 +9012,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -8963,8 +9030,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(import_jsx_runtime218.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_jsx_runtime219.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Tooltip,
       {
         compact: true,
@@ -8972,7 +9039,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -8984,27 +9051,27 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-var import_react27 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
+var import_react28 = require("react");
+var import_styled_components47 = __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_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime219 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components45.default.div`
+var StyledStack = import_styled_components46.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
 `;
-var StackComponent = (0, import_react26.forwardRef)(
+var StackComponent = (0, import_react27.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       StyledStack,
       {
         ref,
@@ -9021,14 +9088,14 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledForm = import_styled_components46.default.form`
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var StyledForm = import_styled_components47.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react27.createContext)({
+var FormContext = (0, import_react28.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9044,11 +9111,11 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react27.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react27.useState)(false);
-  const innerRef = (0, import_react27.useRef)();
+  const [errors, setErrors] = (0, import_react28.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react28.useState)(false);
+  const innerRef = (0, import_react28.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react27.useId)();
+  const autoId = (0, import_react28.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
@@ -9090,7 +9157,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = (0, import_react27.useMemo)(() => {
+  const context = (0, import_react28.useMemo)(() => {
     return {
       values,
       errors,
@@ -9101,7 +9168,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       Stack,
       {
         ...props,
@@ -9119,15 +9186,15 @@ var FormComponent = ({
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react27.forwardRef)(FormComponent);
+var Form = (0, import_react28.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react28.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react28.useState)(false);
-  const [error, setError] = (0, import_react28.useState)(null);
-  const formAction = (0, import_react28.useCallback)(
+  const [data, setData] = (0, import_react29.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react29.useState)(false);
+  const [error, setError] = (0, import_react29.useState)(null);
+  const formAction = (0, import_react29.useCallback)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9158,23 +9225,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_jsx_runtime222 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react29.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react29.useContext)(FormContext);
+  const ref = (0, import_react30.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react30.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards28.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards28.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards28.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards28.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9182,7 +9249,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9196,14 +9263,14 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-var import_react32 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
+var import_react33 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components47.css`
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components48.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9211,10 +9278,10 @@ var requiredStyle = import_styled_components47.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components47.css`
+var disabledStyle3 = import_styled_components48.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components47.default.label`
+var StyledLabel3 = import_styled_components48.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9246,7 +9313,7 @@ var Label = ({
   screenReaderOnly = false,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     StyledLabel3,
     {
       ...otherProps,
@@ -9261,28 +9328,28 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_react30 = require("react");
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components48.default.fieldset`
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_react31 = require("react");
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components49.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components48.default.legend`
+var StyledLegend = import_styled_components49.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react30.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+  const ref = (0, import_react31.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9298,8 +9365,8 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react31.createContext)(null);
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react32.createContext)(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -9307,19 +9374,19 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react31.useMemo)(() => {
+  const context = (0, import_react32.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components49.default.div`
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components50.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);
@@ -9349,7 +9416,7 @@ var StyledFormField = import_styled_components49.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components49.default.ul`
+var StyledErrorList = import_styled_components50.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9359,7 +9426,7 @@ var StyledErrorList = import_styled_components49.default.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = (0, import_type_guards29.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9369,7 +9436,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9392,8 +9459,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react32.useContext)(FormContext);
-  const checkboxGroup = (0, import_react32.useContext)(CheckboxGroupContext);
+  const formState = (0, import_react33.useContext)(FormContext);
+  const checkboxGroup = (0, import_react33.useContext)(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -9431,19 +9498,19 @@ var FormField = ({
       "aria-invalid": (0, import_type_guards29.isNotNil)(error)
     };
   }
-  import_react32.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
+  import_react33.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards29.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
-        (0, import_react32.cloneElement)(children, childProps),
-        (0, import_type_guards29.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(import_jsx_runtime225.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Label, { htmlFor: computedId, children: label }),
+        (0, import_type_guards29.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_react33.cloneElement)(children, childProps),
+        (0, import_type_guards29.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(import_jsx_runtime226.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
             ErrorMessages,
             {
               errors: computedError,
@@ -9458,9 +9525,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-var import_react33 = require("react");
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react33.createContext)(null);
+var import_react34 = require("react");
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react34.createContext)(null);
 var RadioGroup = ({
   children,
   name,
@@ -9468,21 +9535,21 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react33.useMemo)(() => {
+  const context = (0, import_react34.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-var import_react34 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components50.default)(Button)`
+var import_react35 = require("react");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components51.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9496,10 +9563,10 @@ var StyledButton2 = (0, import_styled_components50.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react34.forwardRef)(
+var IconButton = (0, import_react35.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
       StyledButton2,
       {
         ...props,
@@ -9507,7 +9574,7 @@ var IconButton = (0, import_react34.forwardRef)(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react34.cloneElement)(import_react34.Children.only(children), {
+        children: (0, import_react35.cloneElement)(import_react35.Children.only(children), {
           size: responsiveSize
         })
       }
@@ -9517,9 +9584,9 @@ var IconButton = (0, import_react34.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components52 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime228 = require("react/jsx-runtime");
+var import_jsx_runtime229 = require("react/jsx-runtime");
 var getFillStyle2 = (fillContainer) => {
   if (fillContainer === "horizontal") {
     return "width: 100%;";
@@ -9535,7 +9602,7 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components51.default.img`
+var StyledImage = import_styled_components52.default.img`
   border-radius: ${({ $borderRadius }) => (0, import_type_guards30.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -9550,7 +9617,7 @@ var Image = ({
   loading = "lazy",
   position: objPosition,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
   StyledImage,
   {
     $borderRadius: borderRadius,
@@ -9566,19 +9633,19 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
+var import_styled_components53 = __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");
+var import_react37 = require("react");
 
 // src/components/Menu/MenuContext.tsx
-var import_react35 = require("react");
-var MenuContext = (0, import_react35.createContext)({ compact: false });
-var useMenuContext = () => (0, import_react35.useContext)(MenuContext);
+var import_react36 = require("react");
+var MenuContext = (0, import_react36.createContext)({ compact: false });
+var useMenuContext = () => (0, import_react36.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var open = import_styled_components52.keyframes`
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var open = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -9588,7 +9655,7 @@ var open = import_styled_components52.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components52.keyframes`
+var close = import_styled_components53.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -9598,7 +9665,7 @@ var close = import_styled_components52.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components52.css`
+var menuItemCss = import_styled_components53.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9609,7 +9676,7 @@ var menuItemCss = import_styled_components52.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components52.css`
+var compactMenuItemCss = import_styled_components53.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9620,7 +9687,7 @@ var compactMenuItemCss = import_styled_components52.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components52.css`
+var menuContentCss = import_styled_components53.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9662,7 +9729,7 @@ var menuContentCss = import_styled_components52.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components52.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components53.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -9678,7 +9745,7 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
-  const contextValue = (0, import_react36.useMemo)(() => ({ compact }), [compact]);
+  const contextValue = (0, import_react37.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
     ...(0, import_type_guards31.isNotNil)(onOpenChange) && (0, import_type_guards31.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -9688,24 +9755,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards31.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards31.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
           MenuContent,
           {
             ...props,
@@ -9725,19 +9792,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
+var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components53.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components54.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
         Heading,
         {
           renderAs: "span",
@@ -9752,17 +9819,17 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react38 = require("react");
-var import_styled_components56 = __toESM(require("styled-components"));
+var import_react39 = require("react");
+var import_styled_components57 = __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_components54 = __toESM(require("styled-components"));
+var import_react38 = require("react");
+var import_styled_components55 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components54.default)(Button)`
+var import_jsx_runtime232 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components55.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -9801,7 +9868,7 @@ var StyledButton3 = (0, import_styled_components54.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components54.default.div`
+var StyledLeftIconContainer = import_styled_components55.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -9812,7 +9879,7 @@ var StyledLeftIconContainer = import_styled_components54.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components54.default.div`
+var StyledRightIconContainer = import_styled_components55.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -9823,19 +9890,19 @@ var StyledRightIconContainer = import_styled_components54.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components54.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components55.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components54.default.div`
+var StyledBadgeContainer = import_styled_components55.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react38.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards32.isNotUndefined)(colorScheme)) {
@@ -9844,7 +9911,7 @@ var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, com
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+    badge = /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
       Icon,
       {
         colorScheme: "purple",
@@ -9856,7 +9923,7 @@ var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, com
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -9866,10 +9933,10 @@ var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, com
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards32.isNotNil)(badge) || (0, import_type_guards32.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLabelAndDescriptionContainer, { children }),
+        (0, import_type_guards32.isNotNil)(badge) || (0, import_type_guards32.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -9877,33 +9944,33 @@ var MenuItemButton = (0, import_react37.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime232 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components55.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components55.default)(Text).attrs({
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_jsx_runtime233 = require("react/jsx-runtime");
+var StyledMenuItemLabel = import_styled_components56.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components56.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime233 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var import_jsx_runtime234 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components56.default.div`
+var StyledMobileSubMenuItems = import_styled_components57.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -9914,12 +9981,12 @@ var StyledSubTrigger = (0, import_styled_components56.default)(import_react_drop
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -9931,16 +9998,16 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react38.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react39.useState)(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards33.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemLabel, { children: label }),
+      (0, import_type_guards33.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(SubMenuContent, { $compact: compact, children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -9949,28 +10016,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var MenuItem = (0, import_react39.forwardRef)(
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var MenuItem = (0, import_react40.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -9986,10 +10053,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime235 = require("react/jsx-runtime");
+var import_jsx_runtime236 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -9997,11 +10064,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime236 = require("react/jsx-runtime");
+var import_jsx_runtime237 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
     Icon,
     {
       size: "sm",
@@ -10011,17 +10078,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -10031,9 +10098,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime237 = require("react/jsx-runtime");
+var import_jsx_runtime238 = require("react/jsx-runtime");
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
     "svg",
     {
       ...props,
@@ -10043,14 +10110,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -10059,7 +10126,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
     "svg",
     {
       ...props,
@@ -10069,14 +10136,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -10093,18 +10160,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(CheckboxIndicator, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(CheckboxIndicator, { checked })
         }
       )
     }
@@ -10113,37 +10180,37 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react43 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_react44 = require("react");
+var import_styled_components62 = __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_components58 = __toESM(require("styled-components"));
+var import_styled_components59 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_jsx_runtime238 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components57.default)(import_react_dialog.Close)`
+var import_jsx_runtime239 = require("react/jsx-runtime");
+var CloseButton = (0, import_styled_components58.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Icon, { type: "close" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-var import_jsx_runtime239 = require("react/jsx-runtime");
-var Header = import_styled_components58.default.header`
+var import_jsx_runtime240 = require("react/jsx-runtime");
+var Header = import_styled_components59.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10154,7 +10221,7 @@ var Header = import_styled_components58.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components58.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components59.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);
@@ -10165,27 +10232,27 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Title, { children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(Header, { $hideTitle: hideTitle, children: [
+  const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Title, { children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ModalCloseButton, {})
+    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react41 = require("react");
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_react42 = require("react");
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_type_guards34 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return () => {
       if ((0, import_type_guards34.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -10197,8 +10264,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_jsx_runtime240 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components59.default)(import_react_dialog3.Content)`
+var import_jsx_runtime241 = require("react/jsx-runtime");
+var StyledModalContent = (0, import_styled_components60.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10239,10 +10306,10 @@ var StyledModalContent = (0, import_styled_components59.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react41.forwardRef)(
+var ModalContent = (0, import_react42.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       StyledModalContent,
       {
         ref,
@@ -10257,9 +10324,9 @@ var ModalContent = (0, import_react41.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react42 = require("react");
-var import_styled_components60 = __toESM(require("styled-components"));
-var import_jsx_runtime241 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_styled_components61 = __toESM(require("styled-components"));
+var import_jsx_runtime242 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -10272,7 +10339,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components60.default.div`
+var BackdropComponent = import_styled_components61.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10295,8 +10362,8 @@ var BackdropComponent = import_styled_components60.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react42.forwardRef)(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+var Backdrop = (0, import_react43.forwardRef)(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
     BackdropComponent,
     {
       ref,
@@ -10310,14 +10377,14 @@ var Backdrop = (0, import_react42.forwardRef)(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime242 = require("react/jsx-runtime");
+var import_jsx_runtime243 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components61.default.div`
+var ModalBody = import_styled_components62.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react43.forwardRef)(
+var Modal = (0, import_react44.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -10330,7 +10397,7 @@ var Modal = (0, import_react43.forwardRef)(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
@@ -10339,9 +10406,9 @@ var Modal = (0, import_react43.forwardRef)(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_react_dialog4.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Backdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(import_react_dialog4.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Backdrop, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
             ModalContent,
             {
               ref,
@@ -10357,8 +10424,8 @@ var Modal = (0, import_react43.forwardRef)(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ModalBody, { children }),
+                /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -10378,7 +10445,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
 var import_type_guards36 = require("@wistia/type-guards");
@@ -10387,9 +10454,9 @@ var getControlProps = (isOpen, onOpenChange) => {
 };
 
 // src/components/Popover/Popover.tsx
-var import_jsx_runtime243 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components62.default)(import_react_popover.Content)`
-  ${({ $unstyled }) => !$unstyled && import_styled_components62.css`
+var import_jsx_runtime244 = require("react/jsx-runtime");
+var StyledContent2 = (0, import_styled_components63.default)(import_react_popover.Content)`
+  ${({ $unstyled }) => !$unstyled && import_styled_components63.css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10413,25 +10480,25 @@ var Popover = ({
   unstyled = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
       StyledContent2,
       {
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Icon, { type: "close" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { children })
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { children })
         ]
       }
     ) })
@@ -10440,11 +10507,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
 var import_type_guards37 = require("@wistia/type-guards");
-var import_jsx_runtime244 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components63.default.div`
+var import_jsx_runtime245 = require("react/jsx-runtime");
+var ProgressBarWrapper = import_styled_components64.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);
@@ -10460,7 +10527,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components63.default.div`
+var ProgressBarLabel = import_styled_components64.default.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10468,7 +10535,7 @@ var ProgressBarLabel = import_styled_components63.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components63.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components64.default)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10477,7 +10544,7 @@ var StyledProgressIndicator = (0, import_styled_components63.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_components63.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components64.default)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10496,15 +10563,15 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards37.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ProgressBarWrapper, { children: [
+    (0, import_type_guards37.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
       StyledProgressBar,
       {
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
           StyledProgressIndicator,
           {
             $max: max,
@@ -10513,17 +10580,17 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards37.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards37.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
-var import_react44 = require("react");
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_react45 = require("react");
+var import_styled_components65 = __toESM(require("styled-components"));
 var import_type_guards38 = require("@wistia/type-guards");
-var import_jsx_runtime245 = require("react/jsx-runtime");
-var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+var import_jsx_runtime246 = require("react/jsx-runtime");
+var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -10531,7 +10598,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
     viewBox: "0 0 1 1",
     width: "1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
       "circle",
       {
         cx: "0.5",
@@ -10542,7 +10609,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
     )
   }
 );
-var sizeSmall2 = import_styled_components64.css`
+var sizeSmall2 = import_styled_components65.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10553,7 +10620,7 @@ var sizeSmall2 = import_styled_components64.css`
     height: 7px;
   }
 `;
-var sizeMedium2 = import_styled_components64.css`
+var sizeMedium2 = import_styled_components65.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10564,7 +10631,7 @@ var sizeMedium2 = import_styled_components64.css`
     height: 8px;
   }
 `;
-var sizeLarge2 = import_styled_components64.css`
+var sizeLarge2 = import_styled_components65.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10580,14 +10647,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components64.default.div`
+var StyledRadioWrapper = import_styled_components65.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components64.default.div`
+var StyledRadioInput = import_styled_components65.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10609,7 +10676,7 @@ var StyledRadioInput = import_styled_components64.default.div`
     }
   }
 `;
-var StyledHiddenRadioInput = import_styled_components64.default.input`
+var StyledHiddenRadioInput = import_styled_components65.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input border-color */
@@ -10622,7 +10689,7 @@ var StyledHiddenRadioInput = import_styled_components64.default.input`
     display: block;
   }
 `;
-var Radio = (0, import_react44.forwardRef)(
+var Radio = (0, import_react45.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -10637,15 +10704,15 @@ var Radio = (0, import_react44.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react44.useId)();
+    const generatedId = (0, import_react45.useId)();
     const computedId = (0, import_type_guards38.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
       StyledRadioWrapper,
       {
         $disabled: disabled,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -10660,16 +10727,16 @@ var Radio = (0, import_react44.forwardRef)(
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
                 StyledRadioInput,
                 {
                   $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(RadioIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(RadioIcon, {})
                 }
               ),
               description,
@@ -10687,32 +10754,32 @@ var Radio = (0, import_react44.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react48 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_react49 = require("react");
+var import_styled_components67 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_type_guards39 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
-var import_react45 = require("react");
-var import_jsx_runtime246 = require("react/jsx-runtime");
-var SelectedItemMeasurementsContext = (0, import_react45.createContext)(
+var import_react46 = require("react");
+var import_jsx_runtime247 = require("react/jsx-runtime");
+var SelectedItemMeasurementsContext = (0, import_react46.createContext)(
   null
 );
 var SelectedItemMeasurementsProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react45.useState)(null);
-  const contextValue = (0, import_react45.useMemo)(
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react46.useState)(null);
+  const contextValue = (0, import_react46.useMemo)(
     () => ({
       setSelectedItemMeasurements,
       selectedItemMeasurements
     }),
     [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemMeasurements = () => {
-  const context = (0, import_react45.useContext)(SelectedItemMeasurementsContext);
+  const context = (0, import_react46.useContext)(SelectedItemMeasurementsContext);
   if (context === null) {
     throw new Error(
       "useSelectedItemMeasurements must be used within a SelectedItemMeasurementsProvider"
@@ -10722,15 +10789,15 @@ var useSelectedItemMeasurements = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_react47 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_react48 = require("react");
+var import_styled_components66 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-var import_react46 = require("react");
-var SegmentedControlValueContext = (0, import_react46.createContext)(null);
+var import_react47 = require("react");
+var SegmentedControlValueContext = (0, import_react47.createContext)(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = (0, import_react46.useContext)(SegmentedControlValueContext);
+  const context = (0, import_react47.useContext)(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -10738,8 +10805,8 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_jsx_runtime247 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components65.default.div`
+var import_jsx_runtime248 = require("react/jsx-runtime");
+var SelectedItemIndicatorDiv = import_styled_components66.default.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -10754,7 +10821,7 @@ var SelectedItemIndicatorDiv = import_styled_components65.default.div`
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
   const { selectedItemMeasurements } = useSelectedItemMeasurements();
-  const selectedItemIndicatorStyle = (0, import_react47.useMemo)(
+  const selectedItemIndicatorStyle = (0, import_react48.useMemo)(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
@@ -10765,7 +10832,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
     SelectedItemIndicatorDiv,
     {
       style: {
@@ -10778,8 +10845,8 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime248 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components66.css`
+var import_jsx_runtime249 = require("react/jsx-runtime");
+var segmentedControlStyles = import_styled_components67.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10789,10 +10856,10 @@ var segmentedControlStyles = import_styled_components66.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components66.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components67.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
-var SegmentedControl = (0, import_react48.forwardRef)(
+var SegmentedControl = (0, import_react49.forwardRef)(
   ({
     children,
     disabled = false,
@@ -10804,7 +10871,7 @@ var SegmentedControl = (0, import_react48.forwardRef)(
     if ((0, import_type_guards39.isNil)(children)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
       StyledSegmentedControl,
       {
         ref,
@@ -10816,8 +10883,8 @@ var SegmentedControl = (0, import_react48.forwardRef)(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -10827,8 +10894,8 @@ var SegmentedControl = (0, import_react48.forwardRef)(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-var import_react49 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_react50 = require("react");
+var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_type_guards41 = require("@wistia/type-guards");
 
@@ -10847,8 +10914,8 @@ var mergeRefs = (refs) => (value) => {
 };
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-var import_jsx_runtime249 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components67.css`
+var import_jsx_runtime250 = require("react/jsx-runtime");
+var segmentedControlItemStyles = import_styled_components68.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10907,14 +10974,14 @@ var segmentedControlItemStyles = import_styled_components67.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components67.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components68.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
-var SegmentedControlItem = (0, import_react49.forwardRef)(
+var SegmentedControlItem = (0, import_react50.forwardRef)(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = (0, import_react49.useRef)(null);
+    const buttonRef = (0, import_react50.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
       const target = event.target;
@@ -10923,7 +10990,7 @@ var SegmentedControlItem = (0, import_react49.forwardRef)(
         event.preventDefault();
       }
     };
-    (0, import_react49.useEffect)(() => {
+    (0, import_react50.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -10948,7 +11015,7 @@ var SegmentedControlItem = (0, import_react49.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -10969,10 +11036,10 @@ 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_components68 = __toESM(require("styled-components"));
-var import_jsx_runtime250 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components68.default)(import_react_select.Trigger)`
+var import_react51 = require("react");
+var import_styled_components69 = __toESM(require("styled-components"));
+var import_jsx_runtime251 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components69.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);
@@ -11020,7 +11087,7 @@ var StyledTrigger = (0, import_styled_components68.default)(import_react_select.
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = (0, import_styled_components68.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components69.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);
@@ -11038,7 +11105,7 @@ var StyledContent3 = (0, import_styled_components68.default)(import_react_select
   max-height: var(--radix-select-content-available-height);
   z-index: var(--wui-zindex-select);
 `;
-var Select = (0, import_react50.forwardRef)(
+var Select = (0, import_react51.forwardRef)(
   ({
     colorScheme = "inherit",
     children,
@@ -11048,13 +11115,13 @@ var Select = (0, import_react50.forwardRef)(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
       import_react_select.Root,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -11062,8 +11129,8 @@ var Select = (0, import_react50.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
                   Icon,
                   {
                     size: "md",
@@ -11073,10 +11140,10 @@ var Select = (0, import_react50.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Icon, { type: "caret-down" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Viewport, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-down" }) })
           ] }) })
         ]
       }
@@ -11087,10 +11154,10 @@ 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_components69 = __toESM(require("styled-components"));
-var import_jsx_runtime251 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components69.default)(import_react_select2.Item)`
+var import_react52 = require("react");
+var import_styled_components70 = __toESM(require("styled-components"));
+var import_jsx_runtime252 = require("react/jsx-runtime");
+var StyledItem = (0, import_styled_components70.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -11113,25 +11180,25 @@ var StyledItem = (0, import_styled_components69.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components69.default.span`
+var StyledIconContainer = import_styled_components70.default.span`
   width: 12px;
 `;
-var SelectOption = (0, import_react51.forwardRef)(
+var SelectOption = (0, import_react52.forwardRef)(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select2.ItemText, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
         ]
       }
     );
@@ -11141,14 +11208,14 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components70 = __toESM(require("styled-components"));
-var import_jsx_runtime252 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components70.default)(import_react_select3.Label)`
+var import_styled_components71 = __toESM(require("styled-components"));
+var import_jsx_runtime253 = require("react/jsx-runtime");
+var StyledLabel4 = (0, import_styled_components71.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(import_react_select3.Group, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(import_react_select3.Group, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -11161,11 +11228,11 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Switch/Switch.tsx
-var import_react52 = require("react");
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_react53 = require("react");
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_type_guards42 = require("@wistia/type-guards");
-var import_jsx_runtime253 = require("react/jsx-runtime");
-var sizeSmall3 = import_styled_components71.css`
+var import_jsx_runtime254 = require("react/jsx-runtime");
+var sizeSmall3 = import_styled_components72.css`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11180,7 +11247,7 @@ var sizeSmall3 = import_styled_components71.css`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = import_styled_components71.css`
+var sizeMedium3 = import_styled_components72.css`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11195,7 +11262,7 @@ var sizeMedium3 = import_styled_components71.css`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = import_styled_components71.css`
+var sizeLarge3 = import_styled_components72.css`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11215,14 +11282,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = import_styled_components71.default.div`
+var StyledSwitchWrapper = import_styled_components72.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components71.default.div`
+var StyledSwitchInput = import_styled_components72.default.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11250,7 +11317,7 @@ var StyledSwitchInput = import_styled_components71.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components71.default.input`
+var StyledHiddenSwitchInput = import_styled_components72.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -11266,7 +11333,7 @@ var StyledHiddenSwitchInput = import_styled_components71.default.input`
     }
   }
 `;
-var Switch = (0, import_react52.forwardRef)(
+var Switch = (0, import_react53.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -11281,10 +11348,10 @@ var Switch = (0, import_react52.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react52.useId)();
+    const generatedId = (0, import_react53.useId)();
     const computedId = (0, import_type_guards42.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         StyledHiddenSwitchInput,
         {
           ...props,
@@ -11299,10 +11366,10 @@ var Switch = (0, import_react52.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
             StyledSwitchInput,
             {
               $disabled: disabled,
@@ -11324,19 +11391,19 @@ var Switch = (0, import_react52.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_styled_components72 = __toESM(require("styled-components"));
-var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledTable = import_styled_components72.default.table`
+var import_styled_components73 = __toESM(require("styled-components"));
+var import_jsx_runtime255 = require("react/jsx-runtime");
+var StyledTable = import_styled_components73.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && import_styled_components72.css`
+  ${({ $striped }) => $striped && import_styled_components73.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && import_styled_components72.css`
+  ${({ $divided }) => $divided && import_styled_components73.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11348,7 +11415,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
     StyledTable,
     {
       $divided: divided,
@@ -11360,88 +11427,88 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
-var import_react53 = require("react");
-var TableSectionContext = (0, import_react53.createContext)(null);
+var import_react54 = require("react");
+var TableSectionContext = (0, import_react54.createContext)(null);
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components73.default.tbody``;
+var import_jsx_runtime256 = require("react/jsx-runtime");
+var StyledTbody = import_styled_components74.default.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
-var import_react54 = require("react");
-var import_styled_components74 = __toESM(require("styled-components"));
-var import_jsx_runtime256 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components74.css`
+var import_react55 = require("react");
+var import_styled_components75 = __toESM(require("styled-components"));
+var import_jsx_runtime257 = require("react/jsx-runtime");
+var sharedStyles = import_styled_components75.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components74.default.th`
+var StyledTh = import_styled_components75.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_components74.default.td`
+var StyledTd = import_styled_components75.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react54.useContext)(TableSectionContext);
+  const section = (0, import_react55.useContext)(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledTh, { ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledTd, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFooter.tsx
-var import_styled_components75 = __toESM(require("styled-components"));
-var import_jsx_runtime257 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components75.default.tfoot``;
+var import_styled_components76 = __toESM(require("styled-components"));
+var import_jsx_runtime258 = require("react/jsx-runtime");
+var StyledTfoot = import_styled_components76.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
-var import_jsx_runtime258 = require("react/jsx-runtime");
-var StyledThead = import_styled_components76.default.thead``;
+var import_styled_components77 = __toESM(require("styled-components"));
+var import_jsx_runtime259 = require("react/jsx-runtime");
+var StyledThead = import_styled_components77.default.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
-var import_jsx_runtime259 = require("react/jsx-runtime");
-var StyledTr = import_styled_components77.default.tr``;
+var import_styled_components78 = __toESM(require("styled-components"));
+var import_jsx_runtime260 = require("react/jsx-runtime");
+var StyledTr = import_styled_components78.default.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledTr, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
 var import_type_guards44 = require("@wistia/type-guards");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_styled_components83 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
-var import_jsx_runtime260 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components78.default)(import_react_tabs.Content)`
+var import_jsx_runtime261 = require("react/jsx-runtime");
+var StyledTabPanel = (0, import_styled_components79.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
     StyledTabPanel,
     {
       value,
@@ -11453,10 +11520,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
-var import_jsx_runtime261 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components79.default)(import_react_tabs2.List)`
+var import_jsx_runtime262 = require("react/jsx-runtime");
+var StyledTabList = (0, import_styled_components80.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11469,7 +11536,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -11482,17 +11549,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-var import_react56 = require("react");
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_react57 = require("react");
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_type_guards43 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
-var import_react55 = require("react");
-var TabsValueContext = (0, import_react55.createContext)(null);
+var import_react56 = require("react");
+var TabsValueContext = (0, import_react56.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react55.useContext)(TabsValueContext);
+  const context = (0, import_react56.useContext)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -11500,21 +11567,21 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-var import_jsx_runtime262 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components80.default)(import_react_tabs3.Trigger)`
+var import_jsx_runtime263 = require("react/jsx-runtime");
+var StyledTabItem = (0, import_styled_components81.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = (0, import_react56.forwardRef)(
+var TabItem = (0, import_react57.forwardRef)(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = (0, import_react56.useRef)(null);
+    const buttonRef = (0, import_react57.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react56.useEffect)(() => {
+    (0, import_react57.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11539,7 +11606,7 @@ var TabItem = (0, import_react56.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
       StyledTabItem,
       {
         ref: combinedRef,
@@ -11558,16 +11625,16 @@ var TabItem = (0, import_react56.forwardRef)(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-var import_react57 = require("react");
+var import_react58 = require("react");
 var extractTabItems = (children) => {
   const tabItems = [];
-  import_react57.Children.forEach(children, (child) => {
-    if (!(0, import_react57.isValidElement)(child)) {
+  import_react58.Children.forEach(children, (child) => {
+    if (!(0, import_react58.isValidElement)(child)) {
       return;
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === import_react57.Fragment) {
+    } else if (child.type === import_react58.Fragment) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -11580,10 +11647,10 @@ var extractTabItems = (children) => {
 };
 
 // src/components/Tabs/SelectedItemIndicator.tsx
-var import_react58 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
-var import_jsx_runtime263 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(SelectedItemIndicatorDiv)`
+var import_react59 = require("react");
+var import_styled_components82 = __toESM(require("styled-components"));
+var import_jsx_runtime264 = require("react/jsx-runtime");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components82.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11591,7 +11658,7 @@ var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(Selec
 var SelectedItemIndicator2 = () => {
   const { selectedItemMeasurements } = useSelectedItemMeasurements();
   const selectedValue = useTabsValue();
-  const selectedItemIndicatorStyle = (0, import_react58.useMemo)(
+  const selectedItemIndicatorStyle = (0, import_react59.useMemo)(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
@@ -11602,7 +11669,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -11615,24 +11682,24 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime264 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components82.default.div`
+var import_jsx_runtime265 = require("react/jsx-runtime");
+var TabsContainer = import_styled_components83.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components82.default.div`
+var StickyTabContent = import_styled_components83.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components82.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components83.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = (0, import_react59.forwardRef)(
+var Tabs = (0, import_react60.forwardRef)(
   ({
     children,
     fullWidth = true,
@@ -11644,13 +11711,13 @@ var Tabs = (0, import_react59.forwardRef)(
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react59.useState)(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react60.useState)(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
       StyledTabsRoot,
       {
         ref,
@@ -11658,14 +11725,14 @@ var Tabs = (0, import_react59.forwardRef)(
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11675,7 +11742,7 @@ var Tabs = (0, import_react59.forwardRef)(
                     "aria-label": ariaLabelForTab
                   } = tab.props;
                   if ((0, import_type_guards44.isNil)(icon)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11686,7 +11753,7 @@ var Tabs = (0, import_react59.forwardRef)(
                     );
                   }
                   if ((0, import_type_guards44.isNotNil)(label)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11698,7 +11765,7 @@ var Tabs = (0, import_react59.forwardRef)(
                     );
                   }
                   if ((0, import_type_guards44.isNotNil)(ariaLabelForTab)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -11714,7 +11781,7 @@ var Tabs = (0, import_react59.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
             TabPanel,
             {
               value: tab.props.value,
@@ -11730,19 +11797,19 @@ var Tabs = (0, import_react59.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react60 = require("react");
-var import_jsx_runtime265 = require("react/jsx-runtime");
-var Tab = (0, import_react60.forwardRef)(({ children }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("div", { ref, children });
+var import_react61 = require("react");
+var import_jsx_runtime266 = require("react/jsx-runtime");
+var Tab = (0, import_react61.forwardRef)(({ children }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-var import_react61 = require("react");
-var import_styled_components83 = __toESM(require("styled-components"));
+var import_react62 = require("react");
+var import_styled_components84 = __toESM(require("styled-components"));
 var import_type_guards45 = require("@wistia/type-guards");
-var import_jsx_runtime266 = require("react/jsx-runtime");
-var TagLabel = import_styled_components83.default.a`
+var import_jsx_runtime267 = require("react/jsx-runtime");
+var TagLabel = import_styled_components84.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11777,14 +11844,14 @@ var TagLabel = import_styled_components83.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components83.default.div`
+var TagDivider = import_styled_components84.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components83.default.button`
+var StyledRemoveButton = import_styled_components84.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11812,7 +11879,7 @@ var StyledRemoveButton = import_styled_components83.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components83.default.div`
+var StyledTag = import_styled_components84.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11833,29 +11900,29 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(import_jsx_runtime266.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(import_jsx_runtime267.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react61.forwardRef)(
+var Tag = (0, import_react62.forwardRef)(
   ({
     onClickRemove,
     colorScheme = "inherit",
@@ -11867,14 +11934,14 @@ var Tag = (0, import_react61.forwardRef)(
   }, ref) => {
     const hasIcon = (0, import_type_guards45.isNotNil)(icon);
     const labelProps = (0, import_type_guards45.isNotNil)(href) && (0, import_type_guards45.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -11885,7 +11952,7 @@ var Tag = (0, import_react61.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -11901,26 +11968,26 @@ var Tag = (0, import_react61.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components84 = __toESM(require("styled-components"));
+var import_styled_components85 = __toESM(require("styled-components"));
 var import_type_guards46 = require("@wistia/type-guards");
-var import_jsx_runtime267 = require("react/jsx-runtime");
+var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -11928,12 +11995,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -11943,7 +12010,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components84.default.svg`
+var WistiaLogoComponent = import_styled_components85.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11959,12 +12026,12 @@ var WistiaLogoComponent = import_styled_components84.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components84.css`
+      return import_styled_components85.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components84.css`
+    return import_styled_components85.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12001,7 +12068,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -12014,14 +12081,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("title", { children: title }),
-        (0, import_type_guards46.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
+        (0, import_type_guards46.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node:
@@ -12035,6 +12102,7 @@ WistiaLogo.displayName = "WistiaLogo";
   Button,
   ButtonGroup,
   Card,
+  Center,
   Checkbox,
   CheckboxGroup,
   CheckboxMenuItem,