@wistia/ui 0.13.6 → 0.13.7

package/dist/index.mjs

@@ -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.
  *
@@ -10007,6 +10007,7 @@ ColorGrid.displayName = "ColorGrid_UI";
 // src/components/ColorPicker/ColorGridOption.tsx
 import styled34 from "styled-components";
 import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
+import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
 import styled32 from "styled-components";
@@ -10233,7 +10234,8 @@ var Container2 = styled34(RadioGroupItem)`
   user-select: none;
 `;
 var ColorGridOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = formatHex3(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ jsx229(
@@ -10330,6 +10332,7 @@ ColorListGroup.displayName = "ColorListGroup_UI";
 // src/components/ColorPicker/ColorListOption.tsx
 import styled37 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
+import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
 import { jsx as jsx232, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -10389,7 +10392,8 @@ var Container4 = styled37(ToggleGroupItem)`
   }
 `;
 var ColorListOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = formatHex4(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ jsxs24(
@@ -10461,6 +10465,7 @@ var StyledPopoverContent = styled38(PopoverContent)`
   flex-direction: column;
   max-width: ${COLOR_PICKER_POPOVER_MAX_WIDTH_PX}px;
   overflow: hidden;
+  z-index: var(--wui-zindex-select);
 `;
 var ColorPickerPopoverContent = ({
   children
@@ -11213,12 +11218,12 @@ import {
   Thumb as SliderThumb
 } from "@radix-ui/react-slider";
 import styled45 from "styled-components";
-import { formatHex as formatHex4 } from "culori/fn";
+import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
 import styled44 from "styled-components";
-import { formatHex as formatHex3 } from "culori/fn";
+import { formatHex as formatHex5 } from "culori/fn";
 import { jsx as jsx247 } from "react/jsx-runtime";
 var Canvas = styled44.canvas`
   display: block;
@@ -11240,7 +11245,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 = formatHex3({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = formatHex5({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11303,7 +11308,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
   const containerStyle = useMemo9(() => {
     return {
-      backgroundColor: formatHex4({
+      backgroundColor: formatHex6({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11313,7 +11318,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = useMemo9(() => {
-    return { backgroundColor: formatHex4(valueAsHsv) };
+    return { backgroundColor: formatHex6(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = useCallback14(
     (values) => {