@wistia/ui 0.4.8-beta.25eae1b2.b10e708 → 0.4.8-beta.39749e5f.7a8d5fd

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.8-beta.25eae1b2.b10e708
+ * @license @wistia/ui v0.4.8-beta.39749e5f.7a8d5fd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5360,7 +5360,7 @@ import { forwardRef } from "react";
 import { isNil as isNil4, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
-import { jsx as jsx161, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
   if (disabled || isNil4(href)) {
     return void 0;
@@ -5377,25 +5377,12 @@ var generateHref = (href, type, disabled) => {
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined2(props.href);
 var StyledLink = styled4.a`
-  --link-icon-size: 14px;
-
   ${({ href }) => isNil4(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
-  display: inline-flex;
-  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);
-      height: var(--link-icon-size);
-    }
-  }
 `;
 var Link = forwardRef(
   ({
@@ -5405,8 +5392,6 @@ var Link = forwardRef(
     disabled = false,
     colorScheme = "inherit",
     underline = false,
-    leftIcon,
-    rightIcon,
     ...props
   }, ref) => {
     const inRouterContext = useInRouterContext();
@@ -5465,17 +5450,13 @@ var Link = forwardRef(
           to: to ?? "",
           children
         }
-      ) : /* @__PURE__ */ jsxs5(
+      ) : /* @__PURE__ */ jsx161(
         StyledLink,
         {
           as: "a",
           ...combinedProps,
           href: to,
-          children: [
-            leftIcon ?? null,
-            children,
-            rightIcon ?? null
-          ]
+          children
         }
       );
     }
@@ -5485,7 +5466,7 @@ var Link = forwardRef(
 Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx162, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx162, jsxs as jsxs5 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined3(props.href);
 var StyledButton = styled5.button`
   ${buttonResetCss}
@@ -5522,9 +5503,9 @@ var ButtonContent = ({
   rightIcon,
   children
 }) => {
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
     isLoading ? /* @__PURE__ */ jsx162(StyledButtonLoading, { children: /* @__PURE__ */ jsx162(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs5(
       StyledButtonContent,
       {
         $hasLeftIcon: isNotNil5(leftIcon),
@@ -5624,7 +5605,7 @@ var Button = forwardRef2(
 Button.displayName = "Button";
 
 // src/components/ActionButton/ActionButton.tsx
-import { jsx as jsx163, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs6 } from "react/jsx-runtime";
 var StyledActionButton = styled6(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
@@ -5729,7 +5710,7 @@ var ActionButton = forwardRef3(
       "menu-up": "caret-up",
       "menu-down": "caret-down"
     };
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs6(
       StyledActionButton,
       {
         ...props,
@@ -5933,7 +5914,7 @@ Avatar.displayName = "Avatar";
 import { forwardRef as forwardRef4 } from "react";
 import styled9 from "styled-components";
 import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import { jsx as jsx166, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs7 } from "react/jsx-runtime";
 var StyledBadge = styled9.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
@@ -5957,7 +5938,7 @@ var StyledBadge = styled9.div`
 var Badge = forwardRef4(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
     const hasIcon = isNotNil6(icon);
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       StyledBadge,
       {
         ref,
@@ -6125,9 +6106,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs8 } from "react/jsx-runtime";
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
     /* @__PURE__ */ jsx169(
       Button,
       {
@@ -6467,7 +6448,7 @@ var LabelDescription = ({
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx175, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
 var CheckIcon = () => /* @__PURE__ */ jsx175(
   "svg",
   {
@@ -6557,7 +6538,7 @@ var Checkbox = forwardRef6(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ jsxs10(StyledCheckboxWrapper, { children: [
+    return /* @__PURE__ */ jsxs9(StyledCheckboxWrapper, { children: [
       /* @__PURE__ */ jsx175(
         StyledCheckboxRoot,
         {
@@ -6586,7 +6567,7 @@ var Checkbox = forwardRef6(
           children: /* @__PURE__ */ jsx175(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx175(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs10(StyledLabelWrapper, { children: [
+      /* @__PURE__ */ jsxs9(StyledLabelWrapper, { children: [
         /* @__PURE__ */ jsx175(
           Label,
           {
@@ -6810,7 +6791,7 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef4 } from "react";
 import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx179("li", { children: /* @__PURE__ */ jsx179(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
@@ -6821,7 +6802,7 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs11("div", { ref, children: [
+  return /* @__PURE__ */ jsxs10("div", { ref, children: [
     /* @__PURE__ */ jsx179("p", { children: description }),
     /* @__PURE__ */ jsx179("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
       ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx179(
@@ -7033,7 +7014,7 @@ import { createContext as createContext3, useMemo as useMemo5 } from "react";
 // src/components/FormGroup/FormGroup.tsx
 import styled22 from "styled-components";
 import { useRef as useRef5 } from "react";
-import { jsx as jsx181, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
 var StyledFieldset = styled22.fieldset`
   border: 0;
 `;
@@ -7042,7 +7023,7 @@ var StyledLegend = styled22.legend`
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = useRef5();
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     Stack,
     {
       ...props,
@@ -7085,7 +7066,7 @@ var CheckboxGroup = ({
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx183, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledFormField = styled23.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -7171,7 +7152,7 @@ var FormField = ({
     };
   }
   Children2.only(children);
-  return /* @__PURE__ */ jsxs13(StyledFormField, { ...props, children: [
+  return /* @__PURE__ */ jsxs12(StyledFormField, { ...props, children: [
     !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
     isNotNil8(computedError) ? /* @__PURE__ */ jsx183(
@@ -7248,7 +7229,7 @@ IconButton.displayName = "IconButton";
 import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
 import styled25, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs13 } from "react/jsx-runtime";
 var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7376,7 +7357,7 @@ var Input = forwardRef11(
         });
       }
     };
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs13(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
@@ -7424,7 +7405,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx187, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7534,7 +7515,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(
     DropdownMenu,
     {
       modal: false,
@@ -7614,7 +7595,7 @@ import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12 } from "react";
 import styled28 from "styled-components";
 import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx189, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
 var StyledButton3 = styled28(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
@@ -7704,7 +7685,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     StyledButton3,
     {
       ...props,
@@ -7740,7 +7721,7 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx191, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
 
@@ -7761,8 +7742,8 @@ var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger3 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx191(Trigger3, { asChild: true, children: /* @__PURE__ */ jsx191(
+  const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx191(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx191(
     MenuItemButton,
     {
       ...props,
@@ -7780,14 +7761,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs17(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs17(SubMenuTrigger, { ...props, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
       isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs17(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs17(
+  ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs16(
       SubMenuTrigger,
       {
         ...props,
@@ -7835,9 +7816,9 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx193, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs18(DropdownMenuRadioGroup, { ...props, children: [
+  return /* @__PURE__ */ jsxs17(DropdownMenuRadioGroup, { ...props, children: [
     /* @__PURE__ */ jsx193(MenuLabel, { children: label }),
     children
   ] });
@@ -7885,9 +7866,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx195, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs18 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs19(
+  return checked ? /* @__PURE__ */ jsxs18(
     "svg",
     {
       ...props,
@@ -7913,7 +7894,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs19(
+  ) : /* @__PURE__ */ jsxs18(
     "svg",
     {
       ...props,
@@ -8018,7 +7999,7 @@ var ScreenReaderOnly = ({
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx198, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
 var Header = styled33.header`
   display: flex;
   order: 1;
@@ -8043,7 +8024,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ jsxs20(Header, { children: [
+  return /* @__PURE__ */ jsxs19(Header, { children: [
     /* @__PURE__ */ jsx198(TitleWrapper, { children: title }),
     hideCloseButton ? null : /* @__PURE__ */ jsx198(ModalCloseButton, {})
   ] });
@@ -8185,7 +8166,7 @@ var Backdrop = forwardRef15(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx201, jsxs as jsxs20 } from "react/jsx-runtime";
 var ModalBody = styled36.div`
   flex-direction: column;
   display: flex;
@@ -8213,9 +8194,9 @@ var Modal = forwardRef16(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs21(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs20(DialogPortal, { children: [
           /* @__PURE__ */ jsx201(Backdrop, {}),
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs20(
             ModalContent,
             {
               ref,
@@ -8255,7 +8236,7 @@ Modal.displayName = "Modal";
 import { forwardRef as forwardRef17, useId as useId3 } from "react";
 import styled37, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs21 } from "react/jsx-runtime";
 var StyledLabelWrapper2 = styled37.div`
   display: flex;
   flex-direction: column;
@@ -8341,7 +8322,7 @@ var Radio = forwardRef17(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs21(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
@@ -8362,7 +8343,7 @@ var Radio = forwardRef17(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs22(StyledLabelWrapper2, { children: [
+          /* @__PURE__ */ jsxs21(StyledLabelWrapper2, { children: [
             /* @__PURE__ */ jsx202(
               Label,
               {
@@ -8398,7 +8379,6 @@ var StyledSegmentedControl = styled38(ToggleGroupRoot)`
 var SegmentedControl = forwardRef18(
   ({
     children,
-    disabled = false,
     fullWidth = false,
     selectedValue,
     onSelectedValueChange,
@@ -8412,7 +8392,6 @@ var SegmentedControl = forwardRef18(
       {
         ref,
         $fullWidth: fullWidth,
-        disabled,
         loop: true,
         onValueChange: onSelectedValueChange,
         rovingFocus: true,
@@ -8427,11 +8406,10 @@ var SegmentedControl = forwardRef18(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef19 } from "react";
 import styled39 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsxs as jsxs22 } from "react/jsx-runtime";
 var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -8475,48 +8453,38 @@ var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
       fill: var(--wui-color-focus-ring);
     }
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: inherit;
-    }
-  }
 `;
-var SegmentedControlItem = forwardRef19(
-  ({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
-    const handleClick = (event) => {
-      const target = event.target;
-      const { state } = target.dataset;
-      if (state === "on") {
-        event.preventDefault();
-      }
-    };
-    return /* @__PURE__ */ jsxs23(
-      StyledSegmentedControlItem,
-      {
-        ref,
-        $hasLabel: isNotNil16(label),
-        "aria-label": isNotNil16(label) ? void 0 : ariaLabel,
-        disabled,
-        onClick: handleClick,
-        value,
-        children: [
-          icon,
-          label
-        ]
-      }
-    );
-  }
-);
-SegmentedControlItem.displayName = "SegmentedControlItem";
+var SegmentedControlItem = ({
+  icon,
+  label,
+  value
+}) => {
+  const handleClick = (event) => {
+    const target = event.target;
+    const { state } = target.dataset;
+    if (state === "on") {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxs22(
+    StyledSegmentedControlItem,
+    {
+      $hasLabel: isNotNil16(label),
+      onClick: handleClick,
+      value,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import styled40 from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs23 } from "react/jsx-runtime";
 var TagLabel = styled40.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -8597,9 +8565,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment3, { children: [
     /* @__PURE__ */ jsx204(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs23(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -8619,10 +8587,10 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = forwardRef20(
+var Tag = forwardRef19(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = isNotNil17(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs23(
       StyledTag,
       {
         ref,
@@ -8661,7 +8629,7 @@ import {
   Arrow
 } from "@radix-ui/react-tooltip";
 import styled41, { css as css22 } from "styled-components";
-import { jsx as jsx205, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
 var CompactTooltipStyles = css22`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8727,14 +8695,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx205(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx205(Portal, { children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx205(Portal, { children: /* @__PURE__ */ jsxs24(
           StyledContent,
           {
             $compact: compact,
@@ -8766,7 +8734,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled42 from "styled-components";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
-import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs25 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx206(
@@ -8848,7 +8816,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs26(
+  const Logo = /* @__PURE__ */ jsxs25(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8868,199 +8836,6 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx206("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// 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 styled43 from "styled-components";
-import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
-var StyledTrigger = styled43(Trigger2)`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --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 = styled43(Content2)`
-  --wui-select-content-border: var(--wui-color-border);
-  --wui-select-content-bg: var(--wui-color-bg-surface);
-  --wui-select-content-border-radius: var(--wui-border-radius-02);
-  --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__ */ jsxs27(
-      Root2,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ jsxs27(
-            StyledTrigger,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsx207(Value, { placeholder }),
-                /* @__PURE__ */ jsx207(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx207(Portal2, { children: /* @__PURE__ */ jsxs27(StyledContent2, { position: "popper", children: [
-            /* @__PURE__ */ jsx207(ScrollUpButton, { children: /* @__PURE__ */ jsx207(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx207(Viewport, { children }),
-            /* @__PURE__ */ jsx207(ScrollDownButton, { children: /* @__PURE__ */ jsx207(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-
-// src/components/Select/SelectOption.tsx
-import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef22 } from "react";
-import styled44 from "styled-components";
-import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledItem = styled44(Item)`
-  ${variantStyleMap2.body3};
-  display: flex;
-  padding: var(--wui-select-option-padding);
-  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 = styled44.span`
-  width: 12px;
-`;
-var SelectOption = forwardRef22(
-  ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs28(
-      StyledItem,
-      {
-        ...props,
-        ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ jsx208(StyledIconContainer, { children: /* @__PURE__ */ jsx208(ItemIndicator, { children: /* @__PURE__ */ jsx208(
-            Icon,
-            {
-              size: "sm",
-              type: "checkmark"
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx208(ItemText, { children })
-        ]
-      }
-    );
-  }
-);
-SelectOption.displayName = "Option";
-
-// src/components/Select/SelectOptionGroup.tsx
-import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled45 from "styled-components";
-import { jsx as jsx209, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledLabel3 = styled45(Label2)`
-  padding: var(--wui-select-option-padding);
-`;
-var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs29(Group, { ...props, children: [
-    /* @__PURE__ */ jsx209(StyledLabel3, { children: /* @__PURE__ */ jsx209(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "body3",
-        children: label
-      }
-    ) }),
-    children
-  ] });
-};
 export {
   ActionButton,
   Avatar,
@@ -9100,9 +8875,6 @@ export {
   ScreenReaderOnly,
   SegmentedControl,
   SegmentedControlItem,
-  Select,
-  SelectOption,
-  SelectOptionGroup,
   Stack,
   SubMenu,
   Tag,