@wistia/ui 0.13.2-beta.8a821dcc.7e25bfb → 0.13.2-beta.8d39b694.362d245

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.2-beta.8a821dcc.7e25bfb
+ * @license @wistia/ui v0.13.2-beta.8d39b694.362d245
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8206,11 +8206,24 @@ var variantStyleMap = {
 var DEFAULT_ELEMENT2 = "h1";
 var StyledHeading = import_styled_components28.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --text-color: ${({ $prominence, $disabled }) => {
+  if ($disabled) {
+    return "var(--wui-color-text-disabled)";
+  }
+  if ($prominence === "secondary") {
+    return "var(--wui-color-text-secondary)";
+  }
+  if ($prominence === "button") {
+    return "var(--wui-color-text-button)";
+  }
+  return "var(--wui-color-text)";
+}};
+
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
-  color: var(--wui-color-text);
+  color: var(--text-color);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $truncate }) => {
   if ((0, import_type_guards21.isNotNil)($truncate)) {
@@ -8224,9 +8237,6 @@ var StyledHeading = import_styled_components28.default.div`
   ${({ $inline }) => $inline && import_styled_components28.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components28.css`
-      color: var(--wui-color-text-disabled);
-    `}
   ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components28.css`
       user-select: none;
     `}
@@ -8251,6 +8261,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
     disabled = false,
     inline = false,
     preventUserSelect = false,
+    prominence = "primary",
     truncate,
     variant = "heading1",
     renderAs,
@@ -8264,6 +8275,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
       $disabled: disabled,
       $inline: inline,
       $preventUserSelect: preventUserSelect,
+      $prominence: prominence,
       $truncate: truncate,
       $variant: variant,
       as: renderAs ?? variantElementMap[variant] ?? DEFAULT_ELEMENT2,
@@ -9635,6 +9647,33 @@ var CollapsibleContent = ({ clamp, children }) => {
   ] }) });
 };
 
+// src/components/ColorPicker/color-conversion-utils.ts
+var import_fn = require("culori/fn");
+(0, import_fn.useMode)(import_fn.modeRgb);
+(0, import_fn.useMode)(import_fn.modeHsv);
+var convertToHsv = (color) => {
+  const rgb = (0, import_fn.parseHex)(color);
+  if (rgb == null) {
+    throw new Error(`Invalid hex color value: ${color}`);
+  }
+  return (0, import_fn.convertRgbToHsv)(rgb);
+};
+var convertToLrgb = (color) => {
+  let result;
+  if (typeof color === "string") {
+    const rgb = (0, import_fn.parseHex)(color);
+    if (rgb == null) {
+      throw new Error(`Invalid hex color value: ${color}`);
+    }
+    result = (0, import_fn.convertRgbToLrgb)(rgb);
+  } else {
+    const rgb = (0, import_fn.convertHsvToRgb)(color);
+    result = (0, import_fn.convertRgbToLrgb)(rgb);
+  }
+  return result;
+};
+var convertToRgb = (hsv) => (0, import_fn.convertHsvToRgb)(hsv);
+
 // src/components/ColorPicker/ColorGrid.tsx
 var import_react42 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
@@ -9644,42 +9683,6 @@ var import_react_radio_group = require("@radix-ui/react-radio-group");
 var import_react41 = require("react");
 var import_fn4 = require("culori/fn");
 
-// src/components/ColorPicker/getColorConversions.ts
-var import_fn = require("culori/fn");
-var getColorConversions = (color) => {
-  if (typeof color === "string") {
-    const rgb2 = (0, import_fn.parseHex)(color);
-    if (!rgb2) {
-      return {
-        hex: color,
-        rgb: { r: 0, g: 0, b: 0, mode: "rgb" },
-        hsv: { h: 0, s: 0, v: 0, mode: "hsv" },
-        lrgb: { r: 0, g: 0, b: 0, mode: "lrgb" },
-        isValid: false
-      };
-    }
-    const hsv = (0, import_fn.convertRgbToHsv)(rgb2);
-    const lrgb2 = (0, import_fn.convertRgbToLrgb)(rgb2);
-    return {
-      hex: color,
-      rgb: rgb2,
-      hsv,
-      lrgb: lrgb2,
-      isValid: true
-    };
-  }
-  const rgb = (0, import_fn.convertHsvToRgb)(color);
-  const hex = (0, import_fn.serializeHex)(rgb);
-  const lrgb = (0, import_fn.convertRgbToLrgb)(rgb);
-  return {
-    hex,
-    rgb,
-    hsv: color,
-    lrgb,
-    isValid: true
-  };
-};
-
 // src/components/ColorPicker/transitionBetweenColors.ts
 var import_fn2 = require("culori/fn");
 var transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) => {
@@ -9736,6 +9739,28 @@ var DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
 
 // src/components/ColorPicker/contrast-utils.ts
 var CONTRAST_EPSILON = 4e-3;
+var VALUE_CHANNEL_SNAP_EPSILON = 5e-4;
+var snapValueToEdges = (value) => {
+  if (value > 1 - VALUE_CHANNEL_SNAP_EPSILON) {
+    return 1;
+  }
+  if (value < VALUE_CHANNEL_SNAP_EPSILON) {
+    return 0;
+  }
+  return value;
+};
+var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, searchLow, searchHigh) => {
+  if (contrast >= minContrast) {
+    if (searchingBrighter) {
+      return { newSearchLow: searchLow, newSearchHigh: midValue };
+    }
+    return { newSearchLow: midValue, newSearchHigh: searchHigh };
+  }
+  if (searchingBrighter) {
+    return { newSearchLow: midValue, newSearchHigh: searchHigh };
+  }
+  return { newSearchLow: searchLow, newSearchHigh: midValue };
+};
 var getAccessibleColorByValueChannelChange = ({
   originalHsv,
   colorForComparisonAsLrgb,
@@ -9753,8 +9778,8 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeRgb = (0, import_fn3.convertHsvToRgb)(extremeVariant);
-  const extremeContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(extremeRgb), colorForComparisonAsLrgb);
+  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9762,27 +9787,28 @@ var getAccessibleColorByValueChannelChange = ({
   let searchHigh = highValue;
   let bestSoFar = extremeVariant;
   for (let i = 0; i < maxIterations; i++) {
-    const midValue = (searchLow + searchHigh) / 2;
+    const rawMidValue = (searchLow + searchHigh) / 2;
+    const midValue = snapValueToEdges(rawMidValue);
     const candidateHsv = {
       h: originalHsv.h ?? 0,
       s: originalHsv.s,
       v: midValue,
       mode: "hsv"
     };
-    const candidateRgb = (0, import_fn3.convertHsvToRgb)(candidateHsv);
-    const contrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(candidateRgb), colorForComparisonAsLrgb);
+    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
-      if (searchingBrighter) {
-        searchHigh = midValue;
-      } else {
-        searchLow = midValue;
-      }
-    } else if (searchingBrighter) {
-      searchLow = midValue;
-    } else {
-      searchHigh = midValue;
     }
+    const { newSearchLow, newSearchHigh } = updateSearchBounds(
+      searchingBrighter,
+      contrast,
+      minContrast,
+      midValue,
+      searchLow,
+      searchHigh
+    );
+    searchLow = newSearchLow;
+    searchHigh = newSearchHigh;
     if (contrast >= minContrast && contrast - minContrast < CONTRAST_EPSILON) {
       break;
     }
@@ -9841,8 +9867,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    const rgb = (0, import_fn3.convertHsvToRgb)(hsv);
-    return (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(rgb), colorForComparisonAsLrgb);
+    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9900,8 +9925,7 @@ var getAccessibleColor = ({
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50
 }) => {
-  const originalRgb = (0, import_fn3.convertHsvToRgb)(originalHsv);
-  const originalContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(originalRgb), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
@@ -9932,8 +9956,7 @@ var hasAccessibleDerivatives = ({
   colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalRgb = (0, import_fn3.convertHsvToRgb)(originalHsv);
-  const originalContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(originalRgb), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return true;
   }
@@ -9960,8 +9983,8 @@ var createInitialState = ({
   colorForComparisonAsHex,
   minimumContrastRatio
 }) => {
-  const { hsv: valueAsHsv } = getColorConversions(valueAsHex);
-  const { lrgb: colorForComparisonAsLrgb } = getColorConversions(colorForComparisonAsHex);
+  const valueAsHsv = convertToHsv(valueAsHex);
+  const colorForComparisonAsLrgb = convertToLrgb(colorForComparisonAsHex);
   return {
     nonDerivedValueAsHsv: valueAsHsv,
     nonDerivedValueAsHex: valueAsHex,
@@ -10035,18 +10058,11 @@ var ColorPickerProvider = ({
       minimumContrastRatio
     })
   );
-  const {
-    rgb: valueAsRgb,
-    lrgb: valueAsLrgb,
-    isValid: valueIsValid
-  } = getColorConversions(state.valueAsHsv);
-  const { lrgb: colorForComparisonAsLrgb, isValid: colorForComparisonIsValid } = getColorConversions(colorForComparisonAsHex);
-  if (!valueIsValid) {
-    throw new Error(`Invalid color value: ${JSON.stringify(state.valueAsHsv)}`);
-  }
-  if (!colorForComparisonIsValid) {
-    throw new Error(`Invalid comparison color value: ${colorForComparisonAsHex}`);
-  }
+  const valueAsLrgb = (0, import_react41.useMemo)(() => convertToLrgb(state.valueAsHsv), [state.valueAsHsv]);
+  const colorForComparisonAsLrgb = (0, import_react41.useMemo)(
+    () => convertToLrgb(colorForComparisonAsHex),
+    [colorForComparisonAsHex]
+  );
   const currentContrastRatio = (0, import_react41.useMemo)(() => {
     return (0, import_fn4.wcagContrast)(valueAsLrgb, colorForComparisonAsLrgb);
   }, [valueAsLrgb, colorForComparisonAsLrgb]);
@@ -10068,7 +10084,7 @@ var ColorPickerProvider = ({
   const onValueAsHsvChange = (0, import_react41.useCallback)(
     (rawNewValueAsHsv) => {
       const hsvToSet = state.shouldEnforceMinContrast ? getAccessibleDerivativeColor(rawNewValueAsHsv) : rawNewValueAsHsv;
-      const hexToSet = getColorConversions(hsvToSet).hex;
+      const hexToSet = (0, import_fn4.formatHex)(hsvToSet);
       onValueChange(hexToSet);
       dispatch({
         type: "SET_VALUE_AS_HSV",
@@ -10084,7 +10100,7 @@ var ColorPickerProvider = ({
         state.valueAsHsv,
         toHsv,
         (colorForStepAsHsv) => {
-          const hexValue = getColorConversions(colorForStepAsHsv).hex;
+          const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
           dispatch({ type: "SET_VALUE_AS_HSV", payload: { valueAsHsv: colorForStepAsHsv } });
         },
@@ -10115,10 +10131,7 @@ var ColorPickerProvider = ({
     if (valueAsHex === (0, import_fn4.formatHex)(state.valueAsHsv)) {
       return;
     }
-    const { isValid: isNewValueValid, hsv: newValueAsHsv } = getColorConversions(valueAsHex);
-    if (!isNewValueValid) {
-      throw new Error(`Invalid color value: ${valueAsHex}`);
-    }
+    const newValueAsHsv = convertToHsv(valueAsHex);
     dispatch({
       type: "SET_VALUE_AS_HSV",
       payload: { valueAsHsv: newValueAsHsv }
@@ -10127,7 +10140,6 @@ var ColorPickerProvider = ({
   const contextValue = (0, import_react41.useMemo)(
     () => ({
       ...state,
-      valueAsRgb,
       valueAsLrgb,
       currentContrastRatio,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
@@ -10140,7 +10152,6 @@ var ColorPickerProvider = ({
     }),
     [
       state,
-      valueAsRgb,
       valueAsLrgb,
       currentContrastRatio,
       hasAccessibleDerivativesValue,
@@ -10176,13 +10187,7 @@ var ColorGrid = ({ children }) => {
   const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
-      if (value === "") {
-        return;
-      }
-      const { isValid, hsv } = getColorConversions(value);
-      if (!isValid) {
-        throw new Error(`Invalid color value: ${value}`);
-      }
+      const hsv = convertToHsv(value);
       onValueAsHsvChange(hsv);
     },
     [onValueAsHsvChange]
@@ -10196,6 +10201,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
+ColorGrid.displayName = "ColorGrid";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -10414,20 +10420,10 @@ var Container2 = (0, import_styled_components50.default)(import_react_radio_grou
   appearance: none;
   outline: none;
   align-items: center;
-  background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   padding: 0;
   cursor: pointer;
   user-select: none;
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--wui-color-bg-surface-hover);
-  }
-
-  &:focus-visible {
-    background-color: var(--wui-color-bg-surface-secondary-hover);
-  }
 `;
 var ColorGridOption = ({ value, name }) => {
   const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
@@ -10458,6 +10454,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
+ColorGridOption.displayName = "ColorGridOption";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
@@ -10476,10 +10473,7 @@ var ColorList = ({ children }) => {
       if (value === "") {
         return;
       }
-      const { isValid, hsv } = getColorConversions(value);
-      if (!isValid) {
-        throw new Error(`Invalid color value: ${value}`);
-      }
+      const hsv = convertToHsv(value);
       onValueAsHsvChange(hsv);
     },
     [onValueAsHsvChange]
@@ -10494,6 +10488,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
+ColorList.displayName = "ColorList";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10523,6 +10518,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
+ColorListGroup.displayName = "ColorListGroup";
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
@@ -10617,13 +10613,11 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
+ColorListOption.displayName = "ColorListOption";
 
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_fn5 = require("culori/fn");
 var import_jsx_runtime234 = require("react/jsx-runtime");
-(0, import_fn5.useMode)(import_fn5.modeRgb);
-(0, import_fn5.useMode)(import_fn5.modeHsv);
 var ColorPicker = ({
   value,
   onValueChange,
@@ -10644,6 +10638,7 @@ var ColorPicker = ({
     }
   ) });
 };
+ColorPicker.displayName = "ColorPicker";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10672,6 +10667,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
@@ -10682,6 +10678,7 @@ var Container5 = import_styled_components55.default.div`
 var ColorPickerSection = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
 };
+ColorPickerSection.displayName = "ColorPickerSection";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
@@ -10694,6 +10691,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
+ValueSwatch.displayName = "ValueSwatch";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10701,6 +10699,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -11024,10 +11023,11 @@ var ContrastControls = () => {
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
+ContrastControls.displayName = "ContrastControls";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
-var import_fn6 = require("culori/fn");
+var import_fn5 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
@@ -11176,10 +11176,7 @@ var Input = (0, import_react47.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react47.useRef)();
-    const ref = (
-      // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
-    );
+    const ref = (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "search" });
@@ -11260,14 +11257,14 @@ var HexColorInput = ({ autoFocus = true }) => {
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
       setTextInputValue(newValue);
-      const isValidHexValue = Boolean((0, import_fn6.parseHex)(newValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(newValue));
       if (!isValidHexValue) {
         return;
       }
       if (newValue.length < SIX_DIGIT_HEX_CODE_LENGTH) {
         return;
       }
-      const newValueAsHsv = getColorConversions(newValue).hsv;
+      const newValueAsHsv = convertToHsv(newValue);
       onValueAsHsvChange(newValueAsHsv);
     },
     [onValueAsHsvChange]
@@ -11308,7 +11305,7 @@ var HexColorInput = ({ autoFocus = true }) => {
       }
       if (key === "ArrowUp" || key === "ArrowDown") {
         event.preventDefault();
-        const { hsv: currentHsv } = getColorConversions(valueAsHex);
+        const currentHsv = convertToHsv(valueAsHex);
         const saturationNudge = 0.02;
         const newSaturation = Math.max(
           0,
@@ -11342,12 +11339,12 @@ var HexColorInput = ({ autoFocus = true }) => {
       event.preventDefault();
       const pastedText = event.clipboardData.getData("text");
       const normalizedValue = normalizeHexInput(pastedText);
-      const isValidHexValue = Boolean((0, import_fn6.parseHex)(normalizedValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(normalizedValue));
       setTextInputValue(normalizedValue);
       if (!isValidHexValue) {
         return;
       }
-      const newValueAsHsv = getColorConversions(normalizedValue).hsv;
+      const newValueAsHsv = convertToHsv(normalizedValue);
       onValueAsHsvChange(newValueAsHsv);
     },
     [onValueAsHsvChange]
@@ -11399,17 +11396,18 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
+HexColorInput.displayName = "HexColorInput";
 
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_fn8 = require("culori/fn");
+var import_fn7 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_fn7 = require("culori/fn");
+var import_fn6 = require("culori/fn");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var Canvas = import_styled_components61.default.canvas`
   display: block;
@@ -11431,7 +11429,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_fn7.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = (0, import_fn6.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11494,7 +11492,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onValueAsHsvChange, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
-      backgroundColor: (0, import_fn8.formatHex)({
+      backgroundColor: (0, import_fn7.formatHex)({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11504,7 +11502,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = (0, import_react50.useMemo)(() => {
-    return { backgroundColor: (0, import_fn8.formatHex)(valueAsHsv) };
+    return { backgroundColor: (0, import_fn7.formatHex)(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
@@ -11535,6 +11533,7 @@ var HueSlider = () => {
     /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
+HueSlider.displayName = "HueSlider";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
@@ -11543,7 +11542,6 @@ var import_styled_components64 = __toESM(require("styled-components"));
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 var import_react51 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
-var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -11596,6 +11594,12 @@ var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorFor
       };
       contrastPoints.push(point);
     }
+    if (colorForXAsHsv == null) {
+      break;
+    }
+    if (colorForXAsHsv.v >= 1) {
+      break;
+    }
   }
   return contrastPoints;
 };
@@ -11606,7 +11610,7 @@ var drawGradientBackground = (ctx, width, height, hue) => {
     const v = 1 - y / (height - 1);
     for (let x = 0; x < width; x++) {
       const s = x / (width - 1);
-      const rgb = (0, import_fn9.convertHsvToRgb)({ h: hue, s, v });
+      const rgb = convertToRgb({ h: hue, s, v, mode: "hsv" });
       const idx = 4 * (y * width + x);
       data[idx] = rgb.r * TWO_FIFTY_FIVE;
       data[idx + 1] = rgb.g * TWO_FIFTY_FIVE;
@@ -11638,7 +11642,7 @@ var HSVSaturationValueCanvas = ({
     if (shouldShowContrastCurve && colorForComparisonAsLrgb) {
       ctx.lineWidth = 1.5;
       ctx.strokeStyle = "white";
-      const maxLuminanceCurve = calculateContrastCurve(
+      const maxHsvValueChannelCurve = calculateContrastCurve(
         width,
         height,
         hue,
@@ -11646,7 +11650,7 @@ var HSVSaturationValueCanvas = ({
         colorForComparisonAsLrgb,
         "upper"
       );
-      const minLuminanceCurve = calculateContrastCurve(
+      const minHsvValueChannelCurve = calculateContrastCurve(
         width,
         height,
         hue,
@@ -11654,11 +11658,11 @@ var HSVSaturationValueCanvas = ({
         colorForComparisonAsLrgb,
         "lower"
       );
-      if (minLuminanceCurve.length > 0) {
-        drawSmoothCurve(ctx, minLuminanceCurve);
+      if (minHsvValueChannelCurve.length > 0) {
+        drawSmoothCurve(ctx, minHsvValueChannelCurve);
       }
-      if (maxLuminanceCurve.length > 0) {
-        drawSmoothCurve(ctx, maxLuminanceCurve);
+      if (maxHsvValueChannelCurve.length > 0) {
+        drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
   }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparisonAsLrgb]);
@@ -11901,6 +11905,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));