@wistia/ui 0.4.5 → 0.4.6-beta.11d3718d.4d96ead

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.5
+ * @license @wistia/ui v0.4.6-beta.11d3718d.4d96ead
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -71,10 +71,13 @@ __export(index_exports, {
   MenuLabel: () => MenuLabel,
   MenuRadioGroup: () => MenuRadioGroup,
   Modal: () => Modal,
+  Option: () => Option,
+  OptionGroup: () => OptionGroup,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   RadioMenuItem: () => RadioMenuItem,
   ScreenReaderOnly: () => ScreenReaderOnly,
+  Select: () => Select,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Tag: () => Tag,
@@ -1640,6 +1643,14 @@ var import_react6 = require("react");
 
 // src/private/hooks/useEvent/useEvent.ts
 var import_react5 = require("react");
+
+// src/private/helpers/isObjectRef/isObjectRef.ts
+var import_type_guards4 = require("@wistia/type-guards");
+var isObjectRef = (value) => {
+  return (0, import_type_guards4.isNotNil)(value) && (0, import_type_guards4.isRecord)(value) && "current" in value;
+};
+
+// src/private/hooks/useEvent/useEvent.ts
 var isEventTargetSupported = (eventTarget) => (
   // @ts-expect-error the compiler thinks that addEventListener may not exist on eventTarget, but we still need to check it.
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -1655,7 +1666,8 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   (0, import_react5.useEffect)(() => {
-    if (!eventName || !isEventTargetSupported(eventTarget)) {
+    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
     const eventListener = (event) => {
@@ -1665,48 +1677,45 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
       return () => {
       };
     };
-    eventTarget.addEventListener(eventName, eventListener, savedEventOptions.current);
+    target.addEventListener(eventName, eventListener, savedEventOptions.current);
     return () => {
-      eventTarget.removeEventListener(eventName, eventListener, savedEventOptions.current);
+      target.removeEventListener(eventName, eventListener, savedEventOptions.current);
     };
   }, [eventName, eventTarget, savedEventOptions]);
 };
 
 // src/hooks/useKey/useKey.ts
-var createKeyPredicate = (keyFilter) => {
-  if (typeof keyFilter === "function") {
-    return keyFilter;
-  }
-  if (typeof keyFilter === "string") {
-    return (event) => event.key === keyFilter;
-  }
-  if (keyFilter !== null && keyFilter !== void 0 && !!keyFilter) {
-    return () => true;
-  }
-  return () => false;
-};
-var useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
-  const { eventName = "keydown", eventTarget, eventOptions } = options;
-  const memoizedEventHandler = (0, import_react6.useMemo)(() => {
-    const predicate = createKeyPredicate(key);
-    return (handlerEvent) => {
+var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOptions } = {}) => {
+  const memoizedEventHandler = (0, import_react6.useCallback)(
+    (handlerEvent) => {
       if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) {
         return;
       }
-      if (predicate(handlerEvent)) {
-        return eventHandler(handlerEvent);
+      let matchesKey = false;
+      if (typeof key === "function") {
+        matchesKey = key(handlerEvent);
+      } else if (typeof key === "string") {
+        matchesKey = handlerEvent.key === key;
+      } else if (key) {
+        matchesKey = true;
+      } else {
+        matchesKey = false;
       }
-    };
-  }, dependencies);
+      if (matchesKey) {
+        eventHandler(handlerEvent);
+      }
+    },
+    [key, eventHandler]
+  );
   useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 
 // src/hooks/useAriaLive/useAriaLive.tsx
 var import_react7 = require("react");
-var import_type_guards4 = require("@wistia/type-guards");
+var import_type_guards5 = require("@wistia/type-guards");
 var useAriaLive = () => {
   const context = (0, import_react7.useContext)(AriaLiveContext);
-  if ((0, import_type_guards4.isNil)(context)) {
+  if ((0, import_type_guards5.isNil)(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
   return context;
@@ -1719,10 +1728,10 @@ var import_sonner2 = require("sonner");
 // src/private/components/Toast/Toast.tsx
 var import_react8 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_type_guards6 = require("@wistia/type-guards");
+var import_type_guards7 = require("@wistia/type-guards");
 
 // src/components/Ellipsis/Ellipsis.tsx
-var import_type_guards5 = require("@wistia/type-guards");
+var import_type_guards6 = require("@wistia/type-guards");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ellipsisStyle = import_styled_components11.css`
@@ -1754,7 +1763,7 @@ var ellipsisFlexParentStyle = import_styled_components11.css`
 var EllipsisComponent = import_styled_components11.default.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
-  if ((0, import_type_guards5.isNotNil)($lines)) {
+  if ((0, import_type_guards6.isNotNil)($lines)) {
     return import_styled_components11.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
@@ -1938,7 +1947,7 @@ var StyledToast = import_styled_components13.default.div`
   }
 `;
 var Action = ({ actionButton }) => {
-  if ((0, import_type_guards6.isNotNil)(actionButton) && (0, import_react8.isValidElement)(actionButton)) {
+  if ((0, import_type_guards7.isNotNil)(actionButton) && (0, import_react8.isValidElement)(actionButton)) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react8.cloneElement)(actionButton, {
       variant: "soft",
       // force Button variant
@@ -1962,7 +1971,7 @@ var Toast = ({
       $colorScheme: colorScheme,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageWrapper, { children: [
-          (0, import_type_guards6.isNotNil)(icon) ? icon : null,
+          (0, import_type_guards7.isNotNil)(icon) ? icon : null,
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message, { lines: 3, children: message })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Action, { actionButton: action })
@@ -2003,7 +2012,7 @@ var import_styled_components19 = __toESM(require("styled-components"));
 // src/components/Button/Button.tsx
 var import_react12 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_type_guards10 = require("@wistia/type-guards");
+var import_type_guards11 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
 var import_styled_components14 = require("styled-components");
@@ -2206,7 +2215,7 @@ var buttonSizeStyles = {
 };
 
 // src/components/Icon/Icon.tsx
-var import_type_guards8 = require("@wistia/type-guards");
+var import_type_guards9 = require("@wistia/type-guards");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/Icon/icons/AbTestIcon.tsx
@@ -5367,7 +5376,7 @@ var iconMap = {
 };
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
-var import_type_guards7 = require("@wistia/type-guards");
+var import_type_guards8 = require("@wistia/type-guards");
 var import_react10 = require("react");
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
@@ -5375,9 +5384,9 @@ var isResponsiveObject = (values) => {
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
   return (0, import_react10.useMemo)(() => {
-    if ((0, import_type_guards7.isRecord)(values) && isResponsiveObject(values)) {
+    if ((0, import_type_guards8.isRecord)(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
-      return (0, import_type_guards7.isNotUndefined)(mq2) && (0, import_type_guards7.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
+      return (0, import_type_guards8.isNotUndefined)(mq2) && (0, import_type_guards8.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
     }
     return values;
   }, [activeMediaQueries, values]);
@@ -5404,13 +5413,13 @@ var Icon = ({
   ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
-  if ((0, import_type_guards8.isNil)(type)) {
+  if ((0, import_type_guards9.isNil)(type)) {
     throw new Error("An Icon component requires a `type` prop to be provided");
   }
-  if ((0, import_type_guards8.isNil)(iconMap[type])) {
+  if ((0, import_type_guards9.isNil)(iconMap[type])) {
     throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
   }
-  if ((0, import_type_guards8.isNil)(iconSizeMap[responsiveSize])) {
+  if ((0, import_type_guards9.isNil)(iconSizeMap[responsiveSize])) {
     throw new Error(
       `Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
     );
@@ -5442,12 +5451,12 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 var import_react11 = require("react");
-var import_type_guards9 = require("@wistia/type-guards");
+var import_type_guards10 = require("@wistia/type-guards");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
-  if (disabled || (0, import_type_guards9.isNil)(href)) {
+  if (disabled || (0, import_type_guards10.isNil)(href)) {
     return void 0;
   }
   let to = href;
@@ -5459,10 +5468,10 @@ var generateHref = (href, type, disabled) => {
   }
   return to;
 };
-var isButton = (props) => (0, import_type_guards9.isUndefined)(props.href);
-var isLink = (props) => (0, import_type_guards9.isNotUndefined)(props.href);
+var isButton = (props) => (0, import_type_guards10.isUndefined)(props.href);
+var isLink = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
 var StyledLink = import_styled_components17.default.a`
-  ${({ href }) => (0, import_type_guards9.isNil)(href) && buttonResetCss};
+  ${({ href }) => (0, import_type_guards10.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--wui-typography-family-default);
@@ -5493,7 +5502,7 @@ var Link = (0, import_react11.forwardRef)(
         } finally {
           if (routingCallback !== null) {
             routingCallback();
-          } else if ((0, import_type_guards9.isNotNil)(to)) {
+          } else if ((0, import_type_guards10.isNotNil)(to)) {
             window.location.assign(to);
           } else {
           }
@@ -5552,7 +5561,7 @@ Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime162 = require("react/jsx-runtime");
-var isLink2 = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
+var isLink2 = (props) => (0, import_type_guards11.isNotUndefined)(props.href);
 var StyledButton = import_styled_components18.default.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
@@ -5593,8 +5602,8 @@ var ButtonContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
       StyledButtonContent,
       {
-        $hasLeftIcon: (0, import_type_guards10.isNotNil)(leftIcon),
-        $hasRightIcon: (0, import_type_guards10.isNotNil)(rightIcon),
+        $hasLeftIcon: (0, import_type_guards11.isNotNil)(leftIcon),
+        $hasRightIcon: (0, import_type_guards11.isNotNil)(rightIcon),
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
@@ -5662,7 +5671,7 @@ var Button = (0, import_react12.forwardRef)(
         event.preventDefault();
         return;
       }
-      if ((0, import_type_guards10.isNotNil)(onClick)) {
+      if ((0, import_type_guards11.isNotNil)(onClick)) {
         onClick(event);
       }
     };
@@ -5823,7 +5832,7 @@ ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 var import_react14 = require("react");
-var import_type_guards12 = require("@wistia/type-guards");
+var import_type_guards13 = require("@wistia/type-guards");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
@@ -5866,13 +5875,13 @@ var ColorSchemeWrapper = ({
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
 // src/components/Avatar/formatNameForDisplay.tsx
-var import_type_guards11 = require("@wistia/type-guards");
+var import_type_guards12 = require("@wistia/type-guards");
 var containsEmojiCharacter = (char) => {
   const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
   return emojiRegex.test(char);
 };
 var formatNameForDisplay = (name) => {
-  if ((0, import_type_guards11.isNil)(name) || !(0, import_type_guards11.isString)(name) || (0, import_type_guards11.isEmptyString)(name) || containsEmojiCharacter(name)) {
+  if ((0, import_type_guards12.isNil)(name) || !(0, import_type_guards12.isString)(name) || (0, import_type_guards12.isEmptyString)(name) || containsEmojiCharacter(name)) {
     return "U";
   }
   const firstChar = name.trim().substring(0, 1);
@@ -5934,7 +5943,7 @@ var AvatarWrapper = import_styled_components21.default.div`
   max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
-  if ((0, import_type_guards12.isNil)(name) || name === "Anonymous") {
+  if ((0, import_type_guards13.isNil)(name) || name === "Anonymous") {
     return "default";
   }
   const filteredColors = colorSchemeOptions.filter(
@@ -5954,6 +5963,9 @@ var Avatar = ({
   ...otherProps
 }) => {
   const [imageLoadState, setImageLoadState] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
+    setImageLoadState(null);
+  }, [imageUrl]);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
     onImageLoad?.("image");
@@ -5964,7 +5976,7 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = (0, import_react14.useMemo)(() => chooseColorScheme(name), [name]);
-  const showInitials = (0, import_type_guards12.isNil)(imageUrl) || imageLoadState === "error";
+  const showInitials = (0, import_type_guards13.isNil)(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     AvatarWrapper,
     {
@@ -5995,7 +6007,7 @@ Avatar.displayName = "Avatar";
 // src/components/Badge/Badge.tsx
 var import_react15 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_type_guards13 = require("@wistia/type-guards");
+var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var StyledBadge = import_styled_components22.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -6019,7 +6031,7 @@ var StyledBadge = import_styled_components22.default.div`
 `;
 var Badge = (0, import_react15.forwardRef)(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = (0, import_type_guards13.isNotNil)(icon);
+    const hasIcon = (0, import_type_guards14.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
       StyledBadge,
       {
@@ -6040,12 +6052,12 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 var import_react16 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_type_guards14 = require("@wistia/type-guards");
+var import_type_guards15 = require("@wistia/type-guards");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if ((0, import_type_guards14.isNotNil)(gap)) {
-    if ((0, import_type_guards14.isRecord)(gap)) {
+  if ((0, import_type_guards15.isNotNil)(gap)) {
+    if ((0, import_type_guards15.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
       }).join("");
@@ -6088,25 +6100,25 @@ var BoxComponent = import_styled_components23.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => (0, import_type_guards14.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards14.isNotNil)($basis) ? $basis : null};
+  display: ${({ $inline }) => (0, import_type_guards15.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards15.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => (0, import_type_guards14.isNotNil)($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => (0, import_type_guards14.isNotNil)($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards15.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards15.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => (0, import_type_guards14.isNotNil)($order) ? $order : null};
+  order: ${({ $order }) => (0, import_type_guards15.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if ((0, import_type_guards14.isNotNil)(children)) {
+  if ((0, import_type_guards15.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
       return import_react16.Children.map(children, (child) => {
-        if ((0, import_type_guards14.isNil)(child)) return null;
+        if ((0, import_type_guards15.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
@@ -6189,11 +6201,12 @@ Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-var Breadcrumb = ({ icon, href, children }) => {
+var Breadcrumb = ({ icon, href, children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_jsx_runtime169.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
       Button,
       {
+        ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
@@ -6212,7 +6225,7 @@ var Breadcrumb = ({ icon, href, children }) => {
 
 // src/components/ButtonGroup/ButtonGroup.tsx
 var import_styled_components25 = __toESM(require("styled-components"));
-var import_type_guards15 = require("@wistia/type-guards");
+var import_type_guards16 = require("@wistia/type-guards");
 var import_jsx_runtime170 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
@@ -6252,7 +6265,7 @@ var ButtonGroup = ({
   fullWidth = false,
   ...otherProps
 }) => {
-  if ((0, import_type_guards15.isNil)(children)) {
+  if ((0, import_type_guards16.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
@@ -6322,7 +6335,7 @@ Card.displayName = "Card";
 var import_react18 = require("react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
 var import_styled_components30 = __toESM(require("styled-components"));
-var import_type_guards17 = require("@wistia/type-guards");
+var import_type_guards18 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
@@ -6509,7 +6522,7 @@ Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
 var import_styled_components29 = __toESM(require("styled-components"));
-var import_type_guards16 = require("@wistia/type-guards");
+var import_type_guards17 = require("@wistia/type-guards");
 var import_jsx_runtime174 = require("react/jsx-runtime");
 var StyledLabelDescription = import_styled_components29.default.div`
   color: var(--wui-color-text-secondary);
@@ -6521,7 +6534,7 @@ var LabelDescription = ({
   children,
   ...props
 }) => {
-  if ((0, import_type_guards16.isNil)(children)) {
+  if ((0, import_type_guards17.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(StyledLabelDescription, { ...props, children });
@@ -6618,7 +6631,7 @@ var Checkbox = (0, import_react18.forwardRef)(
     ...otherProps
   }, ref) => {
     const generatedId = (0, import_react18.useId)();
-    const computedId = (0, import_type_guards17.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
+    const computedId = (0, import_type_guards18.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(StyledCheckboxWrapper, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
         StyledCheckboxRoot,
@@ -6711,7 +6724,7 @@ Divider.displayName = "Divider";
 // src/components/Form/Form.tsx
 var import_react20 = require("react");
 var import_styled_components33 = __toESM(require("styled-components"));
-var import_type_guards18 = require("@wistia/type-guards");
+var import_type_guards19 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react19 = require("react");
@@ -6765,7 +6778,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards18.isUndefined)(validate)) {
+    if ((0, import_type_guards19.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -6775,7 +6788,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards18.isNotUndefined)(validate)) {
+    if ((0, import_type_guards19.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -6871,7 +6884,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react22 = require("react");
-var import_type_guards19 = require("@wistia/type-guards");
+var import_type_guards20 = require("@wistia/type-guards");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
@@ -6885,8 +6898,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards19.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards19.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards20.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards20.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
         ErrorItem,
         {
           error: err,
@@ -6910,7 +6923,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 var import_react26 = require("react");
 var import_styled_components36 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
+var import_type_guards21 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
 var import_react23 = require("react");
@@ -7165,7 +7178,7 @@ var StyledErrorList = import_styled_components36.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards20.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards21.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     Text,
     {
@@ -7208,19 +7221,19 @@ var FormField = ({
     label: isInlineLabel ? label : void 0,
     ...props
   };
-  if ((0, import_type_guards20.isUndefined)(value) && (0, import_type_guards20.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards21.isUndefined)(value) && (0, import_type_guards21.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards20.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards20.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards21.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards21.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards20.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards21.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards20.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards21.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -7228,15 +7241,15 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards20.isNotNil)(error),
-      "aria-describedby": (0, import_type_guards20.isNotNil)(error) ? `${id}-error` : void 0
+      "aria-invalid": (0, import_type_guards21.isNotNil)(error),
+      "aria-describedby": (0, import_type_guards21.isNotNil)(error) ? `${id}-error` : void 0
     };
   }
   import_react26.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(StyledFormField, { ...props, children: [
     !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Label, { htmlFor: id, children: label }),
     (0, import_react26.cloneElement)(children, childProps),
-    (0, import_type_guards20.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+    (0, import_type_guards21.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
       ErrorMessages,
       {
         errors: computedError,
@@ -7309,7 +7322,7 @@ IconButton.displayName = "IconButton";
 // src/components/Input/Input.tsx
 var import_react29 = require("react");
 var import_styled_components38 = __toESM(require("styled-components"));
-var import_type_guards21 = require("@wistia/type-guards");
+var import_type_guards22 = require("@wistia/type-guards");
 var import_jsx_runtime186 = require("react/jsx-runtime");
 var inputStyles = import_styled_components38.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -7397,7 +7410,7 @@ var StyledInputContainer = import_styled_components38.default.div`
   }
 `;
 var isValidRef = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards21.isNotNil)(ref.current);
+  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards22.isNotNil)(ref.current);
 };
 var Input = (0, import_react29.forwardRef)(
   ({
@@ -7412,24 +7425,24 @@ var Input = (0, import_react29.forwardRef)(
     const internalRef = (0, import_react29.useRef)();
     const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards21.isNil)(leftIcon) && type === "search") {
+    if ((0, import_type_guards22.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards21.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards22.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react29.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards21.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards22.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react29.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if ((0, import_type_guards21.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards22.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && ref && "current" in ref) {
@@ -7472,7 +7485,7 @@ Input.displayName = "Input";
 // src/components/Menu/Menu.tsx
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards22 = require("@wistia/type-guards");
+var import_type_guards23 = require("@wistia/type-guards");
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var open = import_styled_components39.keyframes`
   from {
@@ -7573,7 +7586,7 @@ var Menu = ({
   ...props
 }) => {
   let controlProps = {
-    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -7587,7 +7600,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards22.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards23.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -7648,12 +7661,12 @@ MenuLabel.displayName = "MenuLabel";
 var import_react31 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards24 = require("@wistia/type-guards");
+var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react30 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
-var import_type_guards23 = require("@wistia/type-guards");
+var import_type_guards24 = require("@wistia/type-guards");
 var import_jsx_runtime189 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components41.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -7726,7 +7739,7 @@ var StyledBadgeContainer = import_styled_components41.default.div`
 var MenuItemButton = (0, import_react30.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards24.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -7756,7 +7769,7 @@ var MenuItemButton = (0, import_react30.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards24.isNotNil)(badge) || (0, import_type_guards24.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -7802,8 +7815,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  const Trigger3 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     MenuItemButton,
     {
       ...props,
@@ -7823,7 +7836,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards25.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -8003,7 +8016,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react36 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards27 = require("@wistia/type-guards");
+var import_type_guards28 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components46 = __toESM(require("styled-components"));
@@ -8030,7 +8043,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components45 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
+var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 var VisuallyHidden = import_styled_components45.default.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = import_styled_components45.default.div({
@@ -8042,7 +8055,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards26.isNotNil)(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -8089,7 +8102,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react33 = require("react");
-var import_type_guards26 = require("@wistia/type-guards");
+var import_type_guards27 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react33.useRef)(null);
   (0, import_react33.useEffect)(() => {
@@ -8097,7 +8110,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react33.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards26.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards27.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -8241,7 +8254,7 @@ var Modal = (0, import_react36.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards27.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards28.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -8255,7 +8268,7 @@ var Modal = (0, import_react36.forwardRef)(
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards27.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards28.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8287,7 +8300,7 @@ Modal.displayName = "Modal";
 // src/components/Radio/Radio.tsx
 var import_react37 = require("react");
 var import_styled_components50 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_type_guards29 = require("@wistia/type-guards");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var StyledLabelWrapper2 = import_styled_components50.default.div`
   display: flex;
@@ -8373,7 +8386,7 @@ var Radio = (0, import_react37.forwardRef)(
     ...otherProps
   }, ref) => {
     const generatedId = (0, import_react37.useId)();
-    const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards29.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
       StyledRadioWrapper,
       {
@@ -8417,7 +8430,7 @@ Radio.displayName = "Radio";
 // src/components/Tag/Tag.tsx
 var import_react38 = require("react");
 var import_styled_components51 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 var TagLabel = import_styled_components51.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8491,10 +8504,10 @@ var StyledTag = import_styled_components51.default.div`
   overflow: hidden;
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards29.isNil)(onClickRemove)) {
+  if ((0, import_type_guards30.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards29.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards30.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -8523,7 +8536,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = (0, import_react38.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards29.isNotNil)(href) && (0, import_type_guards29.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
       StyledTag,
       {
@@ -8661,7 +8674,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
-var import_type_guards30 = require("@wistia/type-guards");
+var import_type_guards31 = require("@wistia/type-guards");
 var import_jsx_runtime205 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -8755,7 +8768,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("title", { children: title }),
-        (0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -8764,6 +8777,190 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Select/Select.tsx
+var import_react_select = require("@radix-ui/react-select");
+var import_react39 = require("react");
+var import_styled_components54 = __toESM(require("styled-components"));
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-select-color-bg: var(--wui-color-bg-surface);
+  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --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 = (0, import_styled_components54.default)(import_react_select.Content)`
+  --wui-select-content-border: var(--wui-color-border);
+  --wui-select-content-bg: var(--wui-color-bg-surface);
+  --wui-select-content-border-radius: var(--wui-border-radius-02);
+  --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 = (0, import_react39.forwardRef)(
+  ({
+    colorScheme = "inherit",
+    children,
+    onChange = () => null,
+    placeholder = "Select...",
+    fullWidth = false,
+    ...props
+  }, forwardedRef) => {
+    const responsiveFullWidth = useResponsiveProp(fullWidth);
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+      import_react_select.Root,
+      {
+        ...props,
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+            StyledTrigger,
+            {
+              ref: forwardedRef,
+              $colorScheme: colorScheme,
+              $fullWidth: responsiveFullWidth,
+              ...props,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+                  Icon,
+                  {
+                    size: "md",
+                    type: "caret-down"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Select/Option.tsx
+var import_react_select2 = require("@radix-ui/react-select");
+var import_react40 = require("react");
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var StyledItem = (0, import_styled_components55.default)(import_react_select2.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 = import_styled_components55.default.span`
+  width: 12px;
+`;
+var Option = (0, import_react40.forwardRef)(
+  ({ children, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
+      StyledItem,
+      {
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+            Icon,
+            {
+              size: "sm",
+              type: "checkmark"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+Option.displayName = "Option";
+
+// src/components/Select/OptionGroup.tsx
+var import_react_select3 = require("@radix-ui/react-select");
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
+  padding: var(--wui-select-option-padding);
+`;
+var OptionGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "body3",
+        children: label
+      }
+    ) }),
+    children
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -8798,10 +8995,13 @@ WistiaLogo.displayName = "WistiaLogo";
   MenuLabel,
   MenuRadioGroup,
   Modal,
+  Option,
+  OptionGroup,
   Radio,
   RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
+  Select,
   Stack,
   SubMenu,
   Tag,