@wistia/ui 0.15.8 → 0.15.9-beta.6bbd7795.815b5ae

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.8
+ * @license @wistia/ui v0.15.9-beta.6bbd7795.815b5ae
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10245,6 +10245,7 @@ var TWO_FIFTY_FIVE = 255;
 var DEFAULT_MIN_CONTRAST = 4.5;
 var DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
 var DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION = 1;
+var DEFAULT_SWATCH_DIAMETER_PX = 24;
 
 // src/components/ColorPicker/contrast-utils.ts
 var CONTRAST_EPSILON = 4e-3;
@@ -10830,7 +10831,7 @@ var DerivativeHalfCircle = import_styled_components50.default.div`
 `;
 var ColorSwatch = ({
   children,
-  diameterPx = 24,
+  diameterPx = DEFAULT_SWATCH_DIAMETER_PX,
   isSelected = false,
   derivativeIsSelected = false,
   value
@@ -11283,9 +11284,17 @@ var import_styled_components58 = __toESM(require("styled-components"));
 
 // src/components/ColorPicker/ValueSwatch.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var ValueSwatch = () => {
+var ValueSwatch = ({
+  diameterPx = DEFAULT_SWATCH_DIAMETER_PX
+}) => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ColorSwatch, { value: valueAsHex });
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+    ColorSwatch,
+    {
+      diameterPx,
+      value: valueAsHex
+    }
+  );
 };
 ValueSwatch.displayName = "ValueSwatch_UI";
 
@@ -11303,7 +11312,7 @@ var StyledPopoverTrigger = (0, import_styled_components58.default)(import_react_
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
-  padding: 6px;
+  padding: var(--wui-space-01);
   transition: background-color var(--wui-motion-duration-03) var(--wui-motion-ease);
 
   &:hover {
@@ -11315,7 +11324,7 @@ var DefaultTriggerContentContainer = import_styled_components58.default.div`
   display: flex;
   flex-direction: row;
   gap: var(--wui-space-02);
-  padding-right: var(--wui-space-01);
+  padding-right: var(--wui-space-02);
 `;
 var DefaultTriggerContent = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(DefaultTriggerContentContainer, { children: [
@@ -16900,6 +16909,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;
@@ -17030,6 +17040,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;
@@ -17053,12 +17065,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,