@wistia/ui 0.13.6 → 0.13.7

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.6
+ * @license @wistia/ui v0.13.7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10166,6 +10166,7 @@ ColorGrid.displayName = "ColorGrid_UI";
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
 var import_react_radio_group2 = require("@radix-ui/react-radio-group");
+var import_fn5 = require("culori/fn");
 
 // src/components/ColorPicker/ColorSwatch.tsx
 var import_styled_components48 = __toESM(require("styled-components"));
@@ -10386,7 +10387,8 @@ var Container2 = (0, import_styled_components50.default)(import_react_radio_grou
   user-select: none;
 `;
 var ColorGridOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = (0, import_fn5.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -10483,6 +10485,7 @@ ColorListGroup.displayName = "ColorListGroup_UI";
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
+var import_fn6 = require("culori/fn");
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
 var import_jsx_runtime232 = require("react/jsx-runtime");
@@ -10542,7 +10545,8 @@ var Container4 = (0, import_styled_components53.default)(import_react_toggle_gro
   }
 `;
 var ColorListOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = (0, import_fn6.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
@@ -10614,6 +10618,7 @@ var StyledPopoverContent = (0, import_styled_components54.default)(import_react_
   flex-direction: column;
   max-width: ${COLOR_PICKER_POPOVER_MAX_WIDTH_PX}px;
   overflow: hidden;
+  z-index: var(--wui-zindex-select);
 `;
 var ColorPickerPopoverContent = ({
   children
@@ -10987,7 +10992,7 @@ ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
-var import_fn5 = require("culori/fn");
+var import_fn7 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
@@ -11217,7 +11222,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
       setTextInputValue(newValue);
-      const isValidHexValue = Boolean((0, import_fn5.parseHex)(newValue));
+      const isValidHexValue = Boolean((0, import_fn7.parseHex)(newValue));
       if (!isValidHexValue) {
         return;
       }
@@ -11299,7 +11304,7 @@ var HexColorInput = ({ autoFocus = true }) => {
       event.preventDefault();
       const pastedText = event.clipboardData.getData("text");
       const normalizedValue = normalizeHexInput(pastedText);
-      const isValidHexValue = Boolean((0, import_fn5.parseHex)(normalizedValue));
+      const isValidHexValue = Boolean((0, import_fn7.parseHex)(normalizedValue));
       setTextInputValue(normalizedValue);
       if (!isValidHexValue) {
         return;
@@ -11362,12 +11367,12 @@ HexColorInput.displayName = "HexColorInput_UI";
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_fn7 = require("culori/fn");
+var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_fn6 = require("culori/fn");
+var import_fn8 = require("culori/fn");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var Canvas = import_styled_components61.default.canvas`
   display: block;
@@ -11389,7 +11394,7 @@ var HSVHueCanvas = ({ hsv }) => {
     const gradient = ctx.createLinearGradient(0, 0, width, 0);
     for (let i = 0; i <= THREE_SIXTY; i++) {
       const hue = i;
-      const hexColor = (0, import_fn6.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = (0, import_fn8.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11452,7 +11457,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
-      backgroundColor: (0, import_fn7.formatHex)({
+      backgroundColor: (0, import_fn9.formatHex)({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11462,7 +11467,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = (0, import_react50.useMemo)(() => {
-    return { backgroundColor: (0, import_fn7.formatHex)(valueAsHsv) };
+    return { backgroundColor: (0, import_fn9.formatHex)(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {