@wistia/ui 0.5.4 → 0.5.5-beta.72ca8428.4bdcb4b

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.4
+ * @license @wistia/ui v0.5.5-beta.72ca8428.4bdcb4b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5818,7 +5818,6 @@ var StyledLink = styled4.a`
   align-items: baseline;
   gap: var(--wui-space-01);
 
-  /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
   && {
     svg {
       width: var(--link-icon-size);
@@ -6090,8 +6089,10 @@ var StyledActionButton = styled6(Button)`
     outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
-    svg {
-      color: var(--wui-color-icon-disabled);
+    && {
+      svg {
+        color: var(--wui-color-icon-disabled);
+      }
     }
   }
 `;
@@ -6102,9 +6103,11 @@ var StyledMainIcon = styled6.div`
   height: 24px;
   transition: color var(--wui-motion-duration-02) var(--wui-motion-ease);
 
-  svg {
-    width: 24px;
-    height: 24px;
+  && {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 `;
 var StyledSecondaryIcon = styled6.div`
@@ -6126,9 +6129,11 @@ var StyledSecondaryIcon = styled6.div`
       }
     `};
 
-  svg {
-    width: 24px;
-    height: 24px;
+  && {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 `;
 var StyledLabel = styled6.span`
@@ -7073,11 +7078,63 @@ var Checkbox = forwardRef7(
 );
 Checkbox.displayName = "Checkbox";
 
+// src/components/Collapsible/Collapsible.tsx
+import { Root } from "@radix-ui/react-collapsible";
+import { isNotNil as isNotNil8 } from "@wistia/type-guards";
+import styled19 from "styled-components";
+import { jsx as jsx176 } from "react/jsx-runtime";
+var StyledRoot = styled19(Root)`
+  &[data-state='closed'] [data-wui-collapsible-content] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wui-collapsible-content-clamp-lines);
+    overflow: hidden;
+  }
+`;
+var Collapsible = ({
+  children,
+  isOpen = false,
+  onOpenChange
+}) => {
+  const controlProps = {
+    ...isNotNil8(onOpenChange) && isNotNil8(isOpen) ? { open: isOpen, onOpenChange } : {}
+  };
+  return /* @__PURE__ */ jsx176(StyledRoot, { ...controlProps, children });
+};
+Collapsible.displayName = "Collapsible";
+
+// src/components/Collapsible/CollapsibleTrigger.tsx
+import { Children as Children3 } from "react";
+import { Trigger } from "@radix-ui/react-collapsible";
+import { jsx as jsx177 } from "react/jsx-runtime";
+var CollapsibleTrigger = ({ children }) => {
+  Children3.only(children);
+  return /* @__PURE__ */ jsx177(Trigger, { asChild: true, children });
+};
+
+// src/components/Collapsible/CollapsibleContent.tsx
+import styled20 from "styled-components";
+import { Content } from "@radix-ui/react-collapsible";
+import { isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
+import { Fragment as Fragment4, jsx as jsx178, jsxs as jsxs12 } from "react/jsx-runtime";
+var ClampedContent = styled20.div.attrs({ "data-wui-collapsible-content": true })`
+  --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
+`;
+var CollapsibleContent = ({ clamp, children }) => {
+  if (isNotUndefined4(clamp)) {
+    return /* @__PURE__ */ jsx178(ClampedContent, { $clamp: clamp, children });
+  }
+  return /* @__PURE__ */ jsx178(Content, { asChild: true, children: /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    children,
+    " "
+  ] }) });
+};
+
 // src/components/DataCards/DataCard.tsx
-import styled19, { keyframes } from "styled-components";
+import styled21, { keyframes } from "styled-components";
 import { isNotNull } from "@wistia/type-guards";
-import { jsx as jsx176, jsxs as jsxs12 } from "react/jsx-runtime";
-var StyledDataCard = styled19.div`
+import { jsx as jsx179, jsxs as jsxs13 } from "react/jsx-runtime";
+var StyledDataCard = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -7098,7 +7155,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled19.div`
+var LoadingBackground = styled21.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -7109,27 +7166,27 @@ var LoadingBackground = styled19.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled19(LoadingBackground)`
+var StyledLoadingLabel = styled21(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled19(LoadingBackground)`
+var StyledLoadingValue = styled21(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = styled19(Heading)`
+var StyledLabel3 = styled21(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled19(Heading)`
+var StyledValue = styled21(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled19.div`
+var StyledSlot = styled21.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled19.div`
+var StyledDataCardTrendContainer = styled21.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -7142,39 +7199,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ jsxs12(
+}) => /* @__PURE__ */ jsxs13(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx176(
+      /* @__PURE__ */ jsx179(
         StyledLabel3,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx176(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx179(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx176(
+      /* @__PURE__ */ jsx179(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx176(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx179(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx176(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx176(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx179(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx179(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled20 from "styled-components";
-import { jsx as jsx177 } from "react/jsx-runtime";
-var StyledDataCards = styled20(Box)`
+import styled22 from "styled-components";
+import { jsx as jsx180 } from "react/jsx-runtime";
+var StyledDataCards = styled22(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -7188,7 +7245,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsx180(
     StyledDataCards,
     {
       ...props,
@@ -7206,12 +7263,12 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled22 from "styled-components";
+import styled24 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled21, { css as css19 } from "styled-components";
-import { jsx as jsx178 } from "react/jsx-runtime";
+import styled23, { css as css19 } from "styled-components";
+import { jsx as jsx181 } from "react/jsx-runtime";
 var bodyBoldStyles = css19`
   > strong,
   b {
@@ -7310,7 +7367,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = styled21.div`
+var StyledText = styled23.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -7364,7 +7421,7 @@ var TextComponent = forwardRef8(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx178(
+    return /* @__PURE__ */ jsx181(
       StyledText,
       {
         ref,
@@ -7386,8 +7443,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx179, jsxs as jsxs13 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled22.div`
+import { jsx as jsx182, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled24.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -7402,8 +7459,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs13(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsxs14(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx182(
       Icon,
       {
         size: "md",
@@ -7411,7 +7468,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx179(
+    /* @__PURE__ */ jsx182(
       Text,
       {
         prominence: "secondary",
@@ -7423,8 +7480,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled23, { css as css20 } from "styled-components";
-import { jsx as jsx180 } from "react/jsx-runtime";
+import styled25, { css as css20 } from "styled-components";
+import { jsx as jsx183 } from "react/jsx-runtime";
 var horizontalBorderCss = css20`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -7438,7 +7495,7 @@ var verticalBorderCss = css20`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled23.div`
+var DividerComponent = styled25.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -7453,7 +7510,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx180(
+  return /* @__PURE__ */ jsx183(
     DividerComponent,
     {
       $orientation: orientation,
@@ -7466,15 +7523,15 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled27, { css as css23 } from "styled-components";
+import styled29, { css as css23 } from "styled-components";
 import { useState as useState5, useRef as useRef4 } from "react";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled24 from "styled-components";
-import { isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx181 } from "react/jsx-runtime";
-var VisuallyHidden = styled24.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled24.div({
+import styled26 from "styled-components";
+import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { jsx as jsx184 } from "react/jsx-runtime";
+var VisuallyHidden = styled26.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled26.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7483,24 +7540,24 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil8(text) ? text : children;
+  const accessibleText = isNotNil9(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx181(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx184(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx181(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx184(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
-  Root,
-  Content,
-  Trigger,
+  Root as Root2,
+  Content as Content2,
+  Trigger as Trigger2,
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled25, { css as css21 } from "styled-components";
-import { jsx as jsx182, jsxs as jsxs14 } from "react/jsx-runtime";
+import styled27, { css as css21 } from "styled-components";
+import { jsx as jsx185, jsxs as jsxs15 } from "react/jsx-runtime";
 var CompactTooltipStyles = css21`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -7508,7 +7565,7 @@ var CompactTooltipStyles = css21`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled25(Content)`
+var StyledContent = styled27(Content2)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -7566,14 +7623,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs14(
-    Root,
+  return /* @__PURE__ */ jsxs15(
+    Root2,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx182(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx182(Portal, { children: /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsx185(Trigger2, { asChild: true, children }),
+        /* @__PURE__ */ jsx185(Portal, { children: /* @__PURE__ */ jsxs15(
           StyledContent,
           {
             $compact: compact,
@@ -7581,7 +7638,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx182(Arrow, { asChild: true, children: /* @__PURE__ */ jsx182(
+              !hideArrow ? /* @__PURE__ */ jsx185(Arrow, { asChild: true, children: /* @__PURE__ */ jsx185(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -7590,7 +7647,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx182("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__ */ jsx185("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
             ]
@@ -7604,9 +7661,9 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef9, cloneElement as cloneElement3, useRef as useRef3 } from "react";
-import styled26, { css as css22 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx183, jsxs as jsxs15 } from "react/jsx-runtime";
+import styled28, { css as css22 } from "styled-components";
+import { isNil as isNil12, isNotNil as isNotNil10, isRecord as isRecord4 } from "@wistia/type-guards";
+import { jsx as jsx186, jsxs as jsxs16 } from "react/jsx-runtime";
 var inputStyles = css22`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7648,7 +7705,7 @@ var inputStyles = css22`
     }
   }
 `;
-var StyledInputContainer = styled26.div`
+var StyledInputContainer = styled28.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7692,9 +7749,6 @@ var StyledInputContainer = styled26.div`
     padding-right: 32px;
   }
 `;
-var isValidRef2 = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
-};
 var Input = forwardRef9(
   ({
     fullWidth = false,
@@ -7706,49 +7760,49 @@ var Input = forwardRef9(
     ...props
   }, externalRef) => {
     const internalRef = useRef3();
-    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
+    const ref = isNotNil10(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil12(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx183(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
     }
-    if (isNotNil9(leftIconToDisplay)) {
+    if (isNotNil10(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement3(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil9(rightIconToDisplay)) {
+    if (isNotNil10(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement3(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if (isNotNil9(props.onFocus)) {
+      if (isNotNil10(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && ref && "current" in ref) {
+      if (autoSelect && isValidRef(ref) && "current" in ref) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
       }
     };
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx183(
+          type === "multiline" ? /* @__PURE__ */ jsx186(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx183(
+          ) : /* @__PURE__ */ jsx186(
             "input",
             {
               ...props,
@@ -7766,8 +7820,8 @@ var Input = forwardRef9(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment4, jsx as jsx184, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledInput = styled27(Input)`
+import { Fragment as Fragment5, jsx as jsx187, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledInput = styled29(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -7797,7 +7851,7 @@ var editableStyles = css23`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled27(Heading)`
+var StyledHeading2 = styled29(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -7851,7 +7905,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx184(
+  const HeadingComponent2 = /* @__PURE__ */ jsx187(
     StyledHeading2,
     {
       ref: headingRef,
@@ -7865,7 +7919,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ jsx184(
+    return /* @__PURE__ */ jsx187(
       StyledInput,
       {
         $height: headingHeight,
@@ -7883,8 +7937,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx184(
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsx187(
       Tooltip,
       {
         compact: true,
@@ -7892,7 +7946,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ jsx184(ScreenReaderOnly, { children: /* @__PURE__ */ jsx184(
+    /* @__PURE__ */ jsx187(ScreenReaderOnly, { children: /* @__PURE__ */ jsx187(
       "button",
       {
         "aria-label": ariaLabel,
@@ -7905,15 +7959,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState6, useId as useId2 } from "react";
-import styled29 from "styled-components";
-import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
+import styled31 from "styled-components";
+import { isNotUndefined as isNotUndefined5, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
-import styled28 from "styled-components";
-import { jsx as jsx185 } from "react/jsx-runtime";
+import styled30 from "styled-components";
+import { jsx as jsx188 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled28.div`
+var StyledStack = styled30.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -7922,7 +7976,7 @@ var StackComponent = forwardRef10(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx185(
+    return /* @__PURE__ */ jsx188(
       StyledStack,
       {
         ref,
@@ -7938,8 +7992,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
-var StyledForm = styled29.form`
+import { jsx as jsx189 } from "react/jsx-runtime";
+var StyledForm = styled31.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -7970,7 +8024,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if (isNotUndefined4(validate)) {
+    if (isNotUndefined5(validate)) {
       handleValidate(formData);
     }
   };
@@ -8008,7 +8062,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   }, [values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx186(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx186(
+    /* @__PURE__ */ jsx189(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx189(
       Stack,
       {
         gap: "space-05",
@@ -8066,10 +8120,10 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef6 } from "react";
-import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx187, jsxs as jsxs17 } from "react/jsx-runtime";
+import { isArray, isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
+import { jsx as jsx190, jsxs as jsxs18 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx187("li", { children: /* @__PURE__ */ jsx187(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx190("li", { children: /* @__PURE__ */ jsx190(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef6(null);
@@ -8078,10 +8132,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs17("div", { ref, children: [
-    /* @__PURE__ */ jsx187("p", { children: description }),
-    /* @__PURE__ */ jsx187("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx187(
+  return /* @__PURE__ */ jsxs18("div", { ref, children: [
+    /* @__PURE__ */ jsx190("p", { children: description }),
+    /* @__PURE__ */ jsx190("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined6(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx190(
         ErrorItem,
         {
           error: err,
@@ -8089,7 +8143,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx187(
+      )) : /* @__PURE__ */ jsx190(
         ErrorItem,
         {
           error: error ?? "",
@@ -8103,33 +8157,33 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children3, cloneElement as cloneElement4, useContext as useContext3 } from "react";
-import styled31 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil10, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { Children as Children4, cloneElement as cloneElement4, useContext as useContext3 } from "react";
+import styled33 from "styled-components";
+import { isArray as isArray2, isNotNil as isNotNil11, isNotUndefined as isNotUndefined7, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled30 from "styled-components";
+import styled32 from "styled-components";
 import { useRef as useRef7 } from "react";
-import { jsx as jsx188, jsxs as jsxs18 } from "react/jsx-runtime";
-var StyledFieldset = styled30.fieldset`
+import { jsx as jsx191, jsxs as jsxs19 } from "react/jsx-runtime";
+var StyledFieldset = styled32.fieldset`
   border: 0;
 `;
-var StyledLegend = styled30.legend`
+var StyledLegend = styled32.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = useRef7();
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx188(
+        /* @__PURE__ */ jsx191(
           Heading,
           {
             renderAs: StyledLegend,
@@ -8145,7 +8199,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -8160,13 +8214,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx189(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx189(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx192(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx192(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx190, jsxs as jsxs19 } from "react/jsx-runtime";
-var StyledFormField = styled31.div`
+import { jsx as jsx193, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledFormField = styled33.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -8174,7 +8228,7 @@ var StyledFormField = styled31.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = styled31.ul`
+var StyledErrorList = styled33.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -8184,7 +8238,7 @@ var StyledErrorList = styled31.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx190(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx190(
+  return isMultipleErrors ? /* @__PURE__ */ jsx193(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx193(
     Text,
     {
       colorScheme: "error",
@@ -8194,7 +8248,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx190(
+  )) }) : /* @__PURE__ */ jsx193(
     Text,
     {
       colorScheme: "error",
@@ -8226,19 +8280,19 @@ var FormField = ({
     label: isInlineLabel ? label : void 0,
     ...props
   };
-  if (isUndefined4(value) && isNotUndefined6(defaultValue)) {
+  if (isUndefined4(value) && isNotUndefined7(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if (isNotNil10(checkboxGroup)) {
-    const computedName = isNotNil10(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil11(checkboxGroup)) {
+    const computedName = isNotNil11(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if (isNotUndefined6(props.onChange)) {
+      if (isNotUndefined7(props.onChange)) {
         props.onChange(event);
       }
-      if (isNotUndefined6(checkboxGroup.onChange)) {
+      if (isNotUndefined7(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -8246,15 +8300,15 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil10(error),
-      "aria-describedby": isNotNil10(error) ? `${id}-error` : void 0
+      "aria-invalid": isNotNil11(error),
+      "aria-describedby": isNotNil11(error) ? `${id}-error` : void 0
     };
   }
-  Children3.only(children);
-  return /* @__PURE__ */ jsxs19(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ jsx190(Label, { htmlFor: id, children: label }),
+  Children4.only(children);
+  return /* @__PURE__ */ jsxs20(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ jsx193(Label, { htmlFor: id, children: label }),
     cloneElement4(children, childProps),
-    isNotNil10(computedError) ? /* @__PURE__ */ jsx190(
+    isNotNil11(computedError) ? /* @__PURE__ */ jsx193(
       ErrorMessages,
       {
         errors: computedError,
@@ -8267,7 +8321,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -8282,15 +8336,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx191(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx191(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx194(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx194(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children4, cloneElement as cloneElement5, forwardRef as forwardRef12 } from "react";
-import styled32 from "styled-components";
-import { jsx as jsx192 } from "react/jsx-runtime";
-var StyledButton2 = styled32(Button)`
+import { Children as Children5, cloneElement as cloneElement5, forwardRef as forwardRef12 } from "react";
+import styled34 from "styled-components";
+import { jsx as jsx195 } from "react/jsx-runtime";
+var StyledButton2 = styled34(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -8307,7 +8361,7 @@ var StyledButton2 = styled32(Button)`
 var IconButton = forwardRef12(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx192(
+    return /* @__PURE__ */ jsx195(
       StyledButton2,
       {
         ...props,
@@ -8315,7 +8369,7 @@ var IconButton = forwardRef12(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: cloneElement5(Children4.only(children), {
+        children: cloneElement5(Children5.only(children), {
           size: responsiveSize
         })
       }
@@ -8325,14 +8379,14 @@ var IconButton = forwardRef12(
 IconButton.displayName = "IconButton";
 
 // src/components/Menu/Menu.tsx
-import styled33, { css as css24, keyframes as keyframes2 } from "styled-components";
+import styled35, { css as css24, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { isNotNil as isNotNil12, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -8341,7 +8395,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx193, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx196, jsxs as jsxs21 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -8426,7 +8480,7 @@ var menuContentCss = css24`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled33(DropdownMenuContent)`
+var MenuContent = styled35(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -8444,7 +8498,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil11(onOpenChange) && isNotNil11(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil12(onOpenChange) && isNotNil12(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -8452,24 +8506,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx193(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx196(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs21(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx193(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx193(
+        /* @__PURE__ */ jsx196(DropdownMenuTrigger, { asChild: true, children: isNotUndefined8(trigger) ? trigger : /* @__PURE__ */ jsx196(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx193(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx196(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx193(DropdownMenuPortal, { children: /* @__PURE__ */ jsx193(
+        /* @__PURE__ */ jsx196(DropdownMenuPortal, { children: /* @__PURE__ */ jsx196(
           MenuContent,
           {
             ...props,
@@ -8489,19 +8543,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled34 from "styled-components";
+import styled36 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var StyledMenuLabel = styled34(DropdownMenuLabel)`
+import { jsx as jsx197 } from "react/jsx-runtime";
+var StyledMenuLabel = styled36(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx194(
+  return /* @__PURE__ */ jsx197(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx194(
+      children: /* @__PURE__ */ jsx197(
         Heading,
         {
           renderAs: "span",
@@ -8517,7 +8571,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState8 } from "react";
-import styled37 from "styled-components";
+import styled39 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -8526,14 +8580,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled35 from "styled-components";
-import { isNotNil as isNotNil12, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx195, jsxs as jsxs21 } from "react/jsx-runtime";
-var StyledButton3 = styled35(Button)`
+import styled37 from "styled-components";
+import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { jsx as jsx198, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledButton3 = styled37(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -8572,31 +8626,35 @@ var StyledButton3 = styled35(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled35.div`
+var StyledLeftIconContainer = styled37.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
-  svg {
-    height: var(--menu-item-left-icon-size);
-    width: var(--menu-item-left-icon-size);
+  && {
+    svg {
+      height: var(--menu-item-left-icon-size);
+      width: var(--menu-item-left-icon-size);
+    }
   }
 `;
-var StyledRightIconContainer = styled35.div`
+var StyledRightIconContainer = styled37.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
-  svg {
-    height: var(--menu-item-right-icon-size);
-    width: var(--menu-item-right-icon-size);
+  && {
+    svg {
+      height: var(--menu-item-right-icon-size);
+      width: var(--menu-item-right-icon-size);
+    }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled35.div`
+var StyledLabelAndDescriptionContainer = styled37.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled35.div`
+var StyledBadgeContainer = styled37.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -8605,13 +8663,13 @@ var StyledBadgeContainer = styled35.div`
 var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if (isNotUndefined8(colorScheme)) {
+    if (isNotUndefined9(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx195(
+    badge = /* @__PURE__ */ jsx198(
       Icon,
       {
         colorScheme: "purple",
@@ -8623,7 +8681,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     StyledButton3,
     {
       ...props,
@@ -8633,10 +8691,10 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx195(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx195(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil12(badge) || isNotNil12(command) ? /* @__PURE__ */ jsx195(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx195(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx198(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx198(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil13(badge) || isNotNil13(command) ? /* @__PURE__ */ jsx198(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx198(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -8644,33 +8702,33 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled36 from "styled-components";
-import { jsx as jsx196 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled36.span``;
-var StyledMenuItemDescription = styled36(Text).attrs({
+import styled38 from "styled-components";
+import { jsx as jsx199 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled38.span``;
+var StyledMenuItemDescription = styled38(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx196(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx199(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx196(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx199(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx197, jsxs as jsxs22 } from "react/jsx-runtime";
-var SubMenuContent = styled37(DropdownMenuSubContent)`
+import { jsx as jsx200, jsxs as jsxs23 } from "react/jsx-runtime";
+var SubMenuContent = styled39(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled37.div`
+var StyledMobileSubMenuItems = styled39.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled37(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled39(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -8680,12 +8738,12 @@ var StyledSubTrigger = styled37(DropdownMenuSubTrigger)`
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger3 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx197(Trigger3, { asChild: true, children: /* @__PURE__ */ jsx197(
+  const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx200(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx200(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx197(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx200(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -8699,14 +8757,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState8(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs22(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs22(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx197(MenuItemLabel, { children: label }),
-      isNotNil13(description) ? /* @__PURE__ */ jsx197(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ jsxs23(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs23(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx200(MenuItemLabel, { children: label }),
+      isNotNil14(description) ? /* @__PURE__ */ jsx200(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx197(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx197(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs22(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsx200(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx200(SubMenuContent, { $compact: compact, children }) })
+  ] }) : /* @__PURE__ */ jsxs23(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs23(
       SubMenuTrigger,
       {
         ...props,
@@ -8715,12 +8773,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx197(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx197(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx200(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx200(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx197(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx200(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -8728,15 +8786,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 var MenuItem = forwardRef14(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx198(
+    return /* @__PURE__ */ jsx201(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx198(
+        children: /* @__PURE__ */ jsx201(
           MenuItemButton,
           {
             ...props,
@@ -8754,10 +8812,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx199, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs24 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs23(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx199(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs24(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx202(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -8768,11 +8826,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx203 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx200(
+  indicator = /* @__PURE__ */ jsx203(
     Icon,
     {
       size: "sm",
@@ -8782,17 +8840,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsx203(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx200(
+      children: /* @__PURE__ */ jsx203(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx200(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx203(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -8804,9 +8862,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx201, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx204, jsxs as jsxs25 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs24(
+  return checked ? /* @__PURE__ */ jsxs25(
     "svg",
     {
       ...props,
@@ -8816,14 +8874,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx201(
+        /* @__PURE__ */ jsx204(
           "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__ */ jsx201(
+        /* @__PURE__ */ jsx204(
           "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",
@@ -8832,7 +8890,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs24(
+  ) : /* @__PURE__ */ jsxs25(
     "svg",
     {
       ...props,
@@ -8842,14 +8900,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx201(
+        /* @__PURE__ */ jsx204(
           "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__ */ jsx201(
+        /* @__PURE__ */ jsx204(
           "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",
@@ -8866,18 +8924,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx204(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx201(
+      children: /* @__PURE__ */ jsx204(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx201(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx204(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -8887,36 +8945,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17 } from "react";
-import styled42 from "styled-components";
+import styled44 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled39 from "styled-components";
+import styled41 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled38 from "styled-components";
+import styled40 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx202 } from "react/jsx-runtime";
-var CloseButton = styled38(DialogClose)`
+import { jsx as jsx205 } from "react/jsx-runtime";
+var CloseButton = styled40(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx202(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx205(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx205(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx202(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx205(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx203, jsxs as jsxs25 } from "react/jsx-runtime";
-var Header = styled39.header`
+import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
+var Header = styled41.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -8928,7 +8986,7 @@ var Header = styled39.header`
     margin-top: 0;
   }
 `;
-var Title = styled39(DialogTitle)`
+var Title = styled41(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -8940,20 +8998,20 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ jsxs25(Header, { children: [
-    /* @__PURE__ */ jsx203(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ jsx203(ModalCloseButton, {})
+  return /* @__PURE__ */ jsxs26(Header, { children: [
+    /* @__PURE__ */ jsx206(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx206(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled40 from "styled-components";
+import styled42 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef8, useEffect as useEffect4 } from "react";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef8(null);
   useEffect4(() => {
@@ -8961,7 +9019,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect4(() => {
     return () => {
-      if (isNotNil14(previouslyFocusedRef.current)) {
+      if (isNotNil15(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -8971,8 +9029,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx204 } from "react/jsx-runtime";
-var StyledModalContent = styled40(DialogContent)`
+import { jsx as jsx207 } from "react/jsx-runtime";
+var StyledModalContent = styled42(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -9016,7 +9074,7 @@ var StyledModalContent = styled40(DialogContent)`
 var ModalContent = forwardRef15(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx204(
+    return /* @__PURE__ */ jsx207(
       StyledModalContent,
       {
         ref,
@@ -9032,8 +9090,8 @@ var ModalContent = forwardRef15(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled41 from "styled-components";
-import { jsx as jsx205 } from "react/jsx-runtime";
+import styled43 from "styled-components";
+import { jsx as jsx208 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -9046,7 +9104,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled41.div`
+var BackdropComponent = styled43.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -9070,7 +9128,7 @@ var BackdropComponent = styled41.div`
   }
 `;
 var Backdrop = forwardRef16(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx205(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx208(
     BackdropComponent,
     {
       ref,
@@ -9084,9 +9142,9 @@ var Backdrop = forwardRef16(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs27 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled42.div`
+var ModalBody = styled44.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -9104,24 +9162,24 @@ var Modal = forwardRef17(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx206(
+    return /* @__PURE__ */ jsx209(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil15(onRequestClose)) {
+          if (!open2 && isNotNil16(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs26(DialogPortal, { children: [
-          /* @__PURE__ */ jsx206(Backdrop, {}),
-          /* @__PURE__ */ jsxs26(
+        children: /* @__PURE__ */ jsxs27(DialogPortal, { children: [
+          /* @__PURE__ */ jsx209(Backdrop, {}),
+          /* @__PURE__ */ jsxs27(
             ModalContent,
             {
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil15(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil16(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -9131,8 +9189,8 @@ var Modal = forwardRef17(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx206(ModalBody, { children }),
-                /* @__PURE__ */ jsx206(
+                /* @__PURE__ */ jsx209(ModalBody, { children }),
+                /* @__PURE__ */ jsx209(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -9152,15 +9210,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled43, { css as css25 } from "styled-components";
+import styled45, { css as css25 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled43.div`
+import { jsx as jsx210, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled45.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled43.input`
+var StyledRadio = styled45.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -9202,7 +9260,7 @@ var defaultHoverStyle = css25`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled43.div`
+var StyledRadioWrapper = styled45.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -9240,13 +9298,13 @@ var Radio = forwardRef18(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs28(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx207(
+          /* @__PURE__ */ jsx210(
             StyledRadio,
             {
               ref,
@@ -9261,8 +9319,8 @@ var Radio = forwardRef18(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs27(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx207(
+          /* @__PURE__ */ jsxs28(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx210(
               Label,
               {
                 disabled,
@@ -9271,7 +9329,7 @@ var Radio = forwardRef18(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx207(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx210(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -9282,10 +9340,10 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled44, { css as css26 } from "styled-components";
+import styled46, { css as css26 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil13 } from "@wistia/type-guards";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var segmentedControlStyles = css26`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9294,7 +9352,7 @@ var segmentedControlStyles = css26`
   gap: var(--wui-space-01);
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled44(ToggleGroupRoot)`
+var StyledSegmentedControl = styled46(ToggleGroupRoot)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef19(
@@ -9309,7 +9367,7 @@ var SegmentedControl = forwardRef19(
     if (isNil13(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx208(
+    return /* @__PURE__ */ jsx211(
       StyledSegmentedControl,
       {
         ref,
@@ -9330,10 +9388,10 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled45, { css as css27 } from "styled-components";
+import styled47, { css as css27 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsxs as jsxs28 } from "react/jsx-runtime";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
+import { jsxs as jsxs29 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css27`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -9389,7 +9447,7 @@ var segmentedControlItemStyles = css27`
     }
   }
 `;
-var StyledSegmentedControlItem = styled45(ToggleGroupItem)`
+var StyledSegmentedControlItem = styled47(ToggleGroupItem)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef20(
@@ -9401,12 +9459,12 @@ var SegmentedControlItem = forwardRef20(
         event.preventDefault();
       }
     };
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29(
       StyledSegmentedControlItem,
       {
         ref,
-        $hasLabel: isNotNil16(label),
-        "aria-label": isNotNil16(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil17(label),
+        "aria-label": isNotNil17(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -9420,209 +9478,16 @@ var SegmentedControlItem = forwardRef20(
 );
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
-// src/components/Select/Select.tsx
-import {
-  Root as Root2,
-  Trigger as Trigger2,
-  Portal as Portal2,
-  Content as Content2,
-  ScrollUpButton,
-  Viewport,
-  Value,
-  ScrollDownButton
-} from "@radix-ui/react-select";
-import { forwardRef as forwardRef21 } from "react";
-import styled46 from "styled-components";
-import { jsx as jsx209, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledTrigger = styled46(Trigger2)`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-select-color-border: var(--wui-color-border);
-  --wui-select-color-border-focus: var(--wui-color-border-active);
-  --wui-select-color-border-error: var(--wui-color-border-error);
-  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-select-border-radius: var(--wui-border-radius-rounded);
-  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
-  --wui-select-vertical-padding: var(--wui-space-02);
-  --wui-select-horizontal-padding: var(--wui-space-03);
-  --wui-select-placeholder: var(--wui-gray-10);
-  --wui-select-color-text-error: var(--wui-color-text-error);
-
-  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
-  background-color: var(--wui-select-color-bg);
-  border: 1px solid var(--wui-select-color-border);
-  border-radius: var(--wui-select-border-radius);
-  min-width: 200px;
-  text-align: left;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
-
-  &[aria-expanded='true'],
-  &:focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-  }
-
-  &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-select-color-border-error);
-    color: var(--wui-select-color-text-error);
-  }
-
-  &:disabled {
-    border-color: var(--wui-color-bg-surface-disabled);
-    background-color: var(--wui-color-bg-surface-disabled);
-  }
-`;
-var StyledContent2 = styled46(Content2)`
-  --wui-select-content-border: var(--wui-color-border);
-  --wui-select-content-bg: var(--wui-color-bg-surface);
-  --wui-select-content-border-radius: var(--wui-border-radius-02);
-  --wui-select-option-padding: var(--wui-space-02);
-  --wui-select-option-inner-gap: var(--wui-space-03);
-  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
-
-  overflow: hidden;
-  transform: translateY(8px);
-  background-color: var(--wui-select-content-bg);
-  border: 1px solid var(--wui-select-content-border);
-  border-radius: var(--wui-select-content-border-radius);
-  padding: var(--wui-select-option-padding);
-  min-width: 200px;
-`;
-var Select = forwardRef21(
-  ({
-    colorScheme = "inherit",
-    children,
-    onChange = () => null,
-    placeholder = "Select...",
-    fullWidth = false,
-    ...props
-  }, forwardedRef) => {
-    const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs29(
-      Root2,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ jsxs29(
-            StyledTrigger,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsx209(Value, { placeholder }),
-                /* @__PURE__ */ jsx209(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx209(Portal2, { children: /* @__PURE__ */ jsxs29(StyledContent2, { position: "popper", children: [
-            /* @__PURE__ */ jsx209(ScrollUpButton, { children: /* @__PURE__ */ jsx209(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx209(Viewport, { children }),
-            /* @__PURE__ */ jsx209(ScrollDownButton, { children: /* @__PURE__ */ jsx209(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-
-// src/components/Select/SelectOption.tsx
-import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef22 } from "react";
-import styled47 from "styled-components";
-import { jsx as jsx210, jsxs as jsxs30 } from "react/jsx-runtime";
-var StyledItem = styled47(Item)`
-  ${variantStyleMap2.body3};
-  display: flex;
-  padding: var(--wui-select-option-padding);
-  gap: var(--wui-select-option-inner-gap);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  border-radius: var(--wui-border-radius-01);
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--wui-select-option-bg-hover);
-    outline: none;
-  }
-
-  &[aria-disabled='true'] {
-    color: var(--wui-color-text-disabled);
-  }
-
-  &[aria-disabled='true']:hover {
-    background-color: transparent;
-  }
-`;
-var StyledIconContainer = styled47.span`
-  width: 12px;
-`;
-var SelectOption = forwardRef22(
-  ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs30(
-      StyledItem,
-      {
-        ...props,
-        ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ jsx210(StyledIconContainer, { children: /* @__PURE__ */ jsx210(ItemIndicator, { children: /* @__PURE__ */ jsx210(
-            Icon,
-            {
-              size: "sm",
-              type: "checkmark"
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx210(ItemText, { children })
-        ]
-      }
-    );
-  }
-);
-SelectOption.displayName = "Option";
-
-// src/components/Select/SelectOptionGroup.tsx
-import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled48 from "styled-components";
-import { jsx as jsx211, jsxs as jsxs31 } from "react/jsx-runtime";
-var StyledLabel4 = styled48(Label2)`
-  padding: var(--wui-select-option-padding);
-`;
-var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs31(Group, { ...props, children: [
-    /* @__PURE__ */ jsx211(StyledLabel4, { children: /* @__PURE__ */ jsx211(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "body3",
-        children: label
-      }
-    ) }),
-    children
-  ] });
-};
-
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil18, isNil as isNil14 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19, isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabPanel.tsx
-import styled49 from "styled-components";
+import styled48 from "styled-components";
 import { Content as TabsContent } from "@radix-ui/react-tabs";
 import { jsx as jsx212 } from "react/jsx-runtime";
-var StyledTabPanel = styled49(TabsContent)`
+var StyledTabPanel = styled48(TabsContent)`
   display: flex;
   flex-direction: column;
 `;
@@ -9639,10 +9504,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-import styled50 from "styled-components";
+import styled49 from "styled-components";
 import { List as RadixTabList } from "@radix-ui/react-tabs";
 import { jsx as jsx213 } from "react/jsx-runtime";
-var StyledTabList = styled50(RadixTabList)`
+var StyledTabList = styled49(RadixTabList)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -9666,26 +9531,26 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef23 } from "react";
-import styled51 from "styled-components";
+import { forwardRef as forwardRef21 } from "react";
+import styled50 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil17 } from "@wistia/type-guards";
-import { jsxs as jsxs32 } from "react/jsx-runtime";
-var StyledTabItem = styled51(RadixTab)`
+import { isNotNil as isNotNil18 } from "@wistia/type-guards";
+import { jsxs as jsxs30 } from "react/jsx-runtime";
+var StyledTabItem = styled50(RadixTab)`
   ${segmentedControlItemStyles}
 
   &[data-state='active'] {
     background-color: white;
   }
 `;
-var TabItem = forwardRef23(
+var TabItem = forwardRef21(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, ref) => {
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs30(
       StyledTabItem,
       {
         ref,
-        $hasLabel: isNotNil17(label),
-        "aria-label": isNotNil17(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil18(label),
+        "aria-label": isNotNil18(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -9699,16 +9564,16 @@ var TabItem = forwardRef23(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-import { Children as Children5, Fragment as Fragment5, isValidElement as isValidElement2 } from "react";
+import { Children as Children6, Fragment as Fragment6, isValidElement as isValidElement2 } from "react";
 var extractTabItems = (children) => {
   const tabItems = [];
-  Children5.forEach(children, (child) => {
+  Children6.forEach(children, (child) => {
     if (!isValidElement2(child)) {
       return;
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === Fragment5) {
+    } else if (child.type === Fragment6) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -9721,8 +9586,8 @@ var extractTabItems = (children) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx214, jsxs as jsxs33 } from "react/jsx-runtime";
-var Tabs = forwardRef24(
+import { jsx as jsx214, jsxs as jsxs31 } from "react/jsx-runtime";
+var Tabs = forwardRef22(
   ({
     children,
     fullWidth = true,
@@ -9734,7 +9599,7 @@ var Tabs = forwardRef24(
   }, ref) => {
     const tabItems = extractTabItems(children);
     const modeProps = defaultSelectedValue !== void 0 ? { defaultValue: defaultSelectedValue } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs31(
       TabsRoot,
       {
         ref,
@@ -9766,7 +9631,7 @@ var Tabs = forwardRef24(
                     value
                   );
                 }
-                if (isNotNil18(label)) {
+                if (isNotNil19(label)) {
                   return /* @__PURE__ */ jsx214(
                     TabItem,
                     {
@@ -9778,7 +9643,7 @@ var Tabs = forwardRef24(
                     value
                   );
                 }
-                if (isNotNil18(ariaLabelForTab)) {
+                if (isNotNil19(ariaLabelForTab)) {
                   return /* @__PURE__ */ jsx214(
                     TabItem,
                     {
@@ -9810,19 +9675,19 @@ var Tabs = forwardRef24(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { jsx as jsx215 } from "react/jsx-runtime";
-var Tab = forwardRef25(({ children }, ref) => {
+var Tab = forwardRef23(({ children }, ref) => {
   return /* @__PURE__ */ jsx215("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef26 } from "react";
-import styled52 from "styled-components";
-import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx216, jsxs as jsxs34 } from "react/jsx-runtime";
-var TagLabel = styled52.a`
+import { forwardRef as forwardRef24 } from "react";
+import styled51 from "styled-components";
+import { isNil as isNil15, isNotNil as isNotNil20, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment7, jsx as jsx216, jsxs as jsxs32 } from "react/jsx-runtime";
+var TagLabel = styled51.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -9850,14 +9715,14 @@ var TagLabel = styled52.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled52.div`
+var TagDivider = styled51.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled52.button`
+var StyledRemoveButton = styled51.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -9885,7 +9750,7 @@ var StyledRemoveButton = styled52.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled52.div`
+var StyledTag = styled51.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9906,9 +9771,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs34(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment7, { children: [
     /* @__PURE__ */ jsx216(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsxs32(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -9928,10 +9793,10 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = forwardRef26(
+var Tag = forwardRef24(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil19(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs34(
+    const labelProps = isNotNil20(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs32(
       StyledTag,
       {
         ref,
@@ -9962,9 +9827,9 @@ var Tag = forwardRef26(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled53 from "styled-components";
-import { isNotNil as isNotNil20 } from "@wistia/type-guards";
-import { jsx as jsx217, jsxs as jsxs35 } from "react/jsx-runtime";
+import styled52 from "styled-components";
+import { isNotNil as isNotNil21 } from "@wistia/type-guards";
+import { jsx as jsx217, jsxs as jsxs33 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx217(
@@ -10004,7 +9869,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled53.svg`
+var WistiaLogoComponent = styled52.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -10046,7 +9911,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs35(
+  const Logo = /* @__PURE__ */ jsxs33(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -10057,7 +9922,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx217("title", { children: title }),
-        isNotNil20(description) ? /* @__PURE__ */ jsx217("desc", { children: description }) : null,
+        isNotNil21(description) ? /* @__PURE__ */ jsx217("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -10066,6 +9931,199 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx217("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Select/Select.tsx
+import {
+  Root as Root3,
+  Trigger as Trigger3,
+  Portal as Portal2,
+  Content as Content3,
+  ScrollUpButton,
+  Viewport,
+  Value,
+  ScrollDownButton
+} from "@radix-ui/react-select";
+import { forwardRef as forwardRef25 } from "react";
+import styled53 from "styled-components";
+import { jsx as jsx218, jsxs as jsxs34 } from "react/jsx-runtime";
+var StyledTrigger = styled53(Trigger3)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-select-color-bg: var(--wui-color-bg-surface);
+  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --wui-select-color-border: var(--wui-color-border);
+  --wui-select-color-border-focus: var(--wui-color-border-active);
+  --wui-select-color-border-error: var(--wui-color-border-error);
+  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-select-border-radius: var(--wui-border-radius-rounded);
+  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-select-vertical-padding: var(--wui-space-02);
+  --wui-select-horizontal-padding: var(--wui-space-03);
+  --wui-select-placeholder: var(--wui-gray-10);
+  --wui-select-color-text-error: var(--wui-color-text-error);
+
+  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
+  background-color: var(--wui-select-color-bg);
+  border: 1px solid var(--wui-select-color-border);
+  border-radius: var(--wui-select-border-radius);
+  min-width: 200px;
+  text-align: left;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
+
+  &[aria-expanded='true'],
+  &:focus {
+    outline: 2px solid var(--wui-color-focus-ring);
+  }
+
+  &[aria-invalid='true'] {
+    outline: 2px solid var(--wui-select-color-border-error);
+    color: var(--wui-select-color-text-error);
+  }
+
+  &:disabled {
+    border-color: var(--wui-color-bg-surface-disabled);
+    background-color: var(--wui-color-bg-surface-disabled);
+  }
+`;
+var StyledContent2 = styled53(Content3)`
+  --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);
+  --wui-select-option-padding: var(--wui-space-02);
+  --wui-select-option-inner-gap: var(--wui-space-03);
+  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
+
+  overflow: hidden;
+  transform: translateY(8px);
+  background-color: var(--wui-select-content-bg);
+  border: 1px solid var(--wui-select-content-border);
+  border-radius: var(--wui-select-content-border-radius);
+  padding: var(--wui-select-option-padding);
+  min-width: 200px;
+`;
+var Select = forwardRef25(
+  ({
+    colorScheme = "inherit",
+    children,
+    onChange = () => null,
+    placeholder = "Select...",
+    fullWidth = false,
+    ...props
+  }, forwardedRef) => {
+    const responsiveFullWidth = useResponsiveProp(fullWidth);
+    return /* @__PURE__ */ jsxs34(
+      Root3,
+      {
+        ...props,
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ jsxs34(
+            StyledTrigger,
+            {
+              ref: forwardedRef,
+              $colorScheme: colorScheme,
+              $fullWidth: responsiveFullWidth,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx218(Value, { placeholder }),
+                /* @__PURE__ */ jsx218(
+                  Icon,
+                  {
+                    size: "md",
+                    type: "caret-down"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx218(Portal2, { children: /* @__PURE__ */ jsxs34(StyledContent2, { position: "popper", children: [
+            /* @__PURE__ */ jsx218(ScrollUpButton, { children: /* @__PURE__ */ jsx218(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx218(Viewport, { children }),
+            /* @__PURE__ */ jsx218(ScrollDownButton, { children: /* @__PURE__ */ jsx218(Icon, { type: "caret-down" }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Select/SelectOption.tsx
+import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
+import { forwardRef as forwardRef26 } from "react";
+import styled54 from "styled-components";
+import { jsx as jsx219, jsxs as jsxs35 } from "react/jsx-runtime";
+var StyledItem = styled54(Item)`
+  ${variantStyleMap2.body3};
+  display: flex;
+  padding: var(--wui-select-option-padding);
+  gap: var(--wui-select-option-inner-gap);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  border-radius: var(--wui-border-radius-01);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--wui-select-option-bg-hover);
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--wui-color-text-disabled);
+  }
+
+  &[aria-disabled='true']:hover {
+    background-color: transparent;
+  }
+`;
+var StyledIconContainer = styled54.span`
+  width: 12px;
+`;
+var SelectOption = forwardRef26(
+  ({ children, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs35(
+      StyledItem,
+      {
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx219(StyledIconContainer, { children: /* @__PURE__ */ jsx219(ItemIndicator, { children: /* @__PURE__ */ jsx219(
+            Icon,
+            {
+              size: "sm",
+              type: "checkmark"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx219(ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectOption.displayName = "Option";
+
+// src/components/Select/SelectOptionGroup.tsx
+import { Group, Label as Label2 } from "@radix-ui/react-select";
+import styled55 from "styled-components";
+import { jsx as jsx220, jsxs as jsxs36 } from "react/jsx-runtime";
+var StyledLabel4 = styled55(Label2)`
+  padding: var(--wui-select-option-padding);
+`;
+var SelectOptionGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ jsxs36(Group, { ...props, children: [
+    /* @__PURE__ */ jsx220(StyledLabel4, { children: /* @__PURE__ */ jsx220(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "body3",
+        children: label
+      }
+    ) }),
+    children
+  ] });
+};
 export {
   ActionButton,
   Avatar,
@@ -10079,6 +10137,9 @@ export {
   Checkbox,
   CheckboxGroup,
   CheckboxMenuItem,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
   ColorSchemeWrapper,
   DataCard,
   DataCardTrend,