@wistia/ui 0.14.35 → 0.14.36

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.35
+ * @license @wistia/ui v0.14.36
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -16449,6 +16449,7 @@ var StyledTrigger2 = (0, import_styled_components109.default)(import_react_selec
   &:disabled {
     outline-color: var(--wui-color-border-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
+    cursor: not-allowed;
   }
 
   &[data-placeholder] {
@@ -16468,10 +16469,15 @@ var StyledContent3 = (0, import_styled_components109.default)(import_react_selec
   background-color: var(--wui-select-content-bg);
   border: 1px solid var(--wui-select-content-border);
   border-radius: var(--wui-select-content-border-radius);
+  box-shadow: var(--wui-elevation-01);
   padding: var(--wui-select-option-padding);
   min-width: var(--radix-select-trigger-width);
   max-height: var(--radix-select-content-available-height);
   z-index: var(--wui-zindex-select);
+
+  [role='separator'] {
+    margin: var(--wui-space-02) 0;
+  }
 `;
 var Select = (0, import_react90.forwardRef)(
   ({
@@ -16480,42 +16486,43 @@ var Select = (0, import_react90.forwardRef)(
     onChange = () => null,
     placeholder = "Select...",
     fullWidth = false,
+    forceOpen = false,
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
-      import_react_select.Root,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
-            StyledTrigger2,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
+    const rootProps = {
+      ...props,
+      onValueChange: onChange
+    };
+    if (forceOpen) {
+      rootProps["open"] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(import_react_select.Root, { ...rootProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+        StyledTrigger2,
+        {
+          ref: forwardedRef,
+          $colorScheme: colorScheme,
+          $fullWidth: responsiveFullWidth,
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              Icon,
+              {
+                size: "md",
+                type: "caret-down"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
+      ] }) })
+    ] });
   }
 );
 Select.displayName = "Select_UI";
@@ -16527,10 +16534,10 @@ var import_styled_components110 = __toESM(require("styled-components"));
 var import_type_guards64 = require("@wistia/type-guards");
 var import_jsx_runtime308 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components110.default)(import_react_select2.Item)`
-  ${variantStyleMap2.body3};
+  ${getTypographicStyles("label3")}
   display: flex;
   padding: var(--wui-select-option-padding);
-  gap: var(--wui-select-option-inner-gap);
+  justify-content: space-between;
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
@@ -16550,9 +16557,6 @@ var StyledItem = (0, import_styled_components110.default)(import_react_select2.I
     background-color: transparent;
   }
 `;
-var StyledIconContainer2 = import_styled_components110.default.span`
-  width: 12px;
-`;
 var SelectOption = (0, import_react91.forwardRef)(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
@@ -16561,17 +16565,17 @@ var SelectOption = (0, import_react91.forwardRef)(
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(StyledIconContainer2, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+          (0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
             Icon,
             {
-              size: "sm",
+              size: "md",
               type: "checkmark"
             }
-          ) }) }),
-          (0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
-            children,
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children })
+          ) })
         ]
       }
     );
@@ -16589,10 +16593,10 @@ var StyledLabel4 = (0, import_styled_components111.default)(import_react_select3
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(import_react_select3.Group, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
-      Text,
+      Heading,
       {
-        prominence: "secondary",
-        variant: "body3",
+        renderAs: "span",
+        variant: "heading6",
         children: label
       }
     ) }),