@wistia/ui 0.15.7 → 0.15.8-beta.a2358089.ff99cb6

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.7
+ * @license @wistia/ui v0.15.8-beta.a2358089.ff99cb6
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -16900,6 +16900,7 @@ var StyledTrigger2 = (0, import_styled_components110.default)(import_react_selec
   font-size: var(--wui-input-font-size);
   line-height: var(--wui-input-line-height);
   color: var(--wui-input-color-text);
+  gap: var(--wui-space-01);
 
   > span {
     white-space: nowrap;
@@ -16949,6 +16950,17 @@ var StyledContent3 = (0, import_styled_components110.default)(import_react_selec
     margin: var(--wui-space-02) 0;
   }
 `;
+var scrollButtonStyles = import_styled_components110.css`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+var StyledScrollDownButton = (0, import_styled_components110.default)(import_react_select.ScrollDownButton)`
+  ${scrollButtonStyles}
+`;
+var StyledScrollUpButton = (0, import_styled_components110.default)(import_react_select.ScrollUpButton)`
+  ${scrollButtonStyles}
+`;
 var Select = (0, import_react90.forwardRef)(
   ({
     colorScheme = "inherit",
@@ -16990,9 +17002,21 @@ var Select = (0, import_react90.forwardRef)(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(StyledContent3, { position: "popper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Icon, { type: "caret-up" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(StyledScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+          Icon,
+          {
+            size: "sm",
+            type: "caret-up"
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select.Viewport, { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Icon, { type: "caret-down" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(StyledScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+          Icon,
+          {
+            size: "sm",
+            type: "caret-down"
+          }
+        ) })
       ] }) })
     ] });
   }
@@ -17007,6 +17031,8 @@ var import_type_guards65 = require("@wistia/type-guards");
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
   ${getTypographicStyles("label3")}
+  align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
+  background-color: transparent;
   display: flex;
   padding: var(--wui-select-option-padding);
   justify-content: space-between;
@@ -17030,12 +17056,13 @@ var StyledItem = (0, import_styled_components111.default)(import_react_select2.I
   }
 `;
 var SelectOption = (0, import_react91.forwardRef)(
-  ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
+  ({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
+        $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
           (0, import_type_guards65.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { children: [
             children,