@wistia/ui 0.6.7 → 0.6.8-beta.1a2d2db0.554b501

package/dist/index.d.mts

@@ -2514,6 +2514,11 @@ type SelectProps = {
      * A group of `Option` or `OptionGroup`s
      */
     children: ReactNode;
+    /**
+     * The color scheme of the select.
+     *
+     * @default inherit
+     */
     colorScheme?: ColorSchemeTypes;
     /**
      * When true, the select can't be interacted with.

package/dist/index.d.ts

@@ -2514,6 +2514,11 @@ type SelectProps = {
      * A group of `Option` or `OptionGroup`s
      */
     children: ReactNode;
+    /**
+     * The color scheme of the select.
+     *
+     * @default inherit
+     */
     colorScheme?: ColorSchemeTypes;
     /**
      * When true, the select can't be interacted with.

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.7
+ * @license @wistia/ui v0.6.8-beta.1a2d2db0.554b501
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1282,9 +1282,12 @@ var typographyTokens = css7`
 // src/css/designTokens/zIndex.tsx
 import { css as css8 } from "styled-components";
 var zIndexTokens = css8`
+  --wui-zindex-under: -1;
   --wui-zindex-backdrop: 100;
   --wui-zindex-modal: 100;
   --wui-zindex-menu: 500;
+  --wui-zindex-select: 500;
+  --wui-zindex-tooltip: 500;
 `;
 
 // src/css/designTokens/elevation.tsx
@@ -7605,11 +7608,11 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
-  Root as Root2,
-  Content as Content2,
-  Trigger as Trigger2,
-  Portal,
-  Arrow
+  Root as TooltipRoot,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Portal as TooltipPortal,
+  Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
 import styled27, { css as css21 } from "styled-components";
 import { jsx as jsx185, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -7620,7 +7623,7 @@ var CompactTooltipStyles = css21`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled27(Content2)`
+var StyledContent = styled27(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -7644,6 +7647,7 @@ var StyledContent = styled27(Content2)`
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
   max-width: 30em;
+  z-index: var(--wui-zindex-tooltip);
 
   &[data-state='delayed-open'][data-side='top'] {
     animation-name: slideDownAndFade;
@@ -7679,13 +7683,13 @@ var Tooltip = ({
     rootProps.open = true;
   }
   return /* @__PURE__ */ jsxs15(
-    Root2,
+    TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx185(Trigger2, { asChild: true, children }),
-        /* @__PURE__ */ jsx185(Portal, { children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx185(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx185(TooltipPortal, { children: /* @__PURE__ */ jsxs15(
           StyledContent,
           {
             $compact: compact,
@@ -7693,7 +7697,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx185(Arrow, { asChild: true, children: /* @__PURE__ */ jsx185(
+              !hideArrow ? /* @__PURE__ */ jsx185(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx185(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8831,8 +8835,8 @@ var StyledSubTrigger = styled39(DropdownMenuSubTrigger)`
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger5 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx200(Trigger5, { asChild: true, children: /* @__PURE__ */ jsx200(
+  const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx200(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx200(
     MenuItemButton,
     {
       ...props,
@@ -9302,7 +9306,7 @@ var Modal = forwardRef17(
 Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
-import { Root as Root3, Trigger as Trigger3, Portal as Portal2, Content as Content3, Close, Arrow as Arrow2 } from "@radix-ui/react-popover";
+import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close, Arrow } from "@radix-ui/react-popover";
 import styled45 from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
@@ -9313,7 +9317,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx210, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledContent2 = styled45(Content3)`
+var StyledContent2 = styled45(Content2)`
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-04);
   max-width: 320px;
@@ -9327,7 +9331,7 @@ var StyledContent2 = styled45(Content3)`
     right: var(--wui-space-02);
   }
 `;
-var StyledArrow = styled45(Arrow2)`
+var StyledArrow = styled45(Arrow)`
   fill: white;
   display: none;
 `;
@@ -9339,9 +9343,9 @@ var Popover = ({
   onOpenChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs28(Root3, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx210(Trigger3, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx210(Portal2, { children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs28(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx210(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx210(Portal, { children: /* @__PURE__ */ jsxs28(
       StyledContent2,
       {
         sideOffset: 5,
@@ -9548,7 +9552,6 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { jsx as jsx213 } from "react/jsx-runtime";
-var Z_INDEX_TO_SIT_BEHIND_SIBLINGS = -1;
 var SelectedItemIndicatorDiv = styled47.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
@@ -9559,7 +9562,7 @@ var SelectedItemIndicatorDiv = styled47.div`
   transition:
     transform var(--wui-motion-duration-02) var(--wui-motion-ease-out),
     width var(--wui-motion-duration-02) var(--wui-motion-ease-out);
-  z-index: ${Z_INDEX_TO_SIT_BEHIND_SIBLINGS};
+  z-index: var(--wui-zindex-under);
 `;
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
@@ -10343,10 +10346,10 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Select/Select.tsx
 import {
-  Root as Root4,
-  Trigger as Trigger4,
-  Portal as Portal3,
-  Content as Content4,
+  Root as Root3,
+  Trigger as Trigger3,
+  Portal as Portal2,
+  Content as Content3,
   ScrollUpButton,
   Viewport,
   Value,
@@ -10355,7 +10358,7 @@ import {
 import { forwardRef as forwardRef25 } from "react";
 import styled56 from "styled-components";
 import { jsx as jsx222, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledTrigger = styled56(Trigger4)`
+var StyledTrigger = styled56(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10379,8 +10382,15 @@ var StyledTrigger = styled56(Trigger4)`
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
+  max-width: 100%;
   width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
 
+  > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   &[aria-expanded='true'],
   &:focus {
     outline: 2px solid var(--wui-color-focus-ring);
@@ -10396,7 +10406,7 @@ var StyledTrigger = styled56(Trigger4)`
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = styled56(Content4)`
+var StyledContent3 = styled56(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);
@@ -10410,8 +10420,9 @@ var StyledContent3 = styled56(Content4)`
   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;
-  z-index: var(--wui-zindex-menu);
+  min-width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+  z-index: var(--wui-zindex-select);
 `;
 var Select = forwardRef25(
   ({
@@ -10424,7 +10435,7 @@ var Select = forwardRef25(
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
     return /* @__PURE__ */ jsxs36(
-      Root4,
+      Root3,
       {
         ...props,
         onValueChange: onChange,
@@ -10448,7 +10459,7 @@ var Select = forwardRef25(
               ]
             }
           ),
-          /* @__PURE__ */ jsx222(Portal3, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
+          /* @__PURE__ */ jsx222(Portal2, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
             /* @__PURE__ */ jsx222(ScrollUpButton, { children: /* @__PURE__ */ jsx222(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx222(Viewport, { children }),
             /* @__PURE__ */ jsx222(ScrollDownButton, { children: /* @__PURE__ */ jsx222(Icon, { type: "caret-down" }) })