@wistia/ui 0.13.4-beta.0a5560fe.25f646e → 0.13.4-beta.15e04cfa.4eadefb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.4-beta.0a5560fe.25f646e
+ * @license @wistia/ui v0.13.4-beta.15e04cfa.4eadefb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9649,30 +9649,39 @@ 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 convertToRgbRaw = (0, import_fn.useMode)(import_fn.modeRgb);
+var convertToHsvRaw = (0, import_fn.useMode)(import_fn.modeHsv);
+(0, import_fn.useMode)(import_fn.modeLrgb);
 var convertToHsv = (color) => {
-  const rgb = (0, import_fn.parseHex)(color);
-  if (rgb == null) {
-    throw new Error(`Invalid hex color value: ${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 = convertToHsvRaw(rgb);
+  }
+  result = convertToHsvRaw(color);
+  if (result == null) {
+    throw new Error(`Invalid color value: ${JSON.stringify(color)}`);
   }
-  return (0, import_fn.convertRgbToHsv)(rgb);
+  return result;
 };
-var convertToLrgb = (color) => {
+var convertToRgb = (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);
+    result = convertToRgbRaw(color);
+  }
+  result = convertToRgbRaw(color);
+  if (result == null) {
+    throw new Error(`Invalid color value: ${JSON.stringify(color)}`);
   }
   return result;
 };
-var convertToRgb = (hsv) => (0, import_fn.convertHsvToRgb)(hsv);
 
 // src/components/ColorPicker/ColorGrid.tsx
 var import_react42 = require("react");
@@ -9763,7 +9772,7 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
 };
 var getAccessibleColorByValueChannelChange = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
   maxIterations = 50,
   direction
@@ -9778,8 +9787,7 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
-  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariant, colorForComparison);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9795,7 +9803,7 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
+    const contrast = (0, import_fn3.wcagContrast)(candidateHsv, colorForComparison);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9838,7 +9846,7 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
 };
 var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
   direction
 }) => {
@@ -9867,7 +9875,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
+    return (0, import_fn3.wcagContrast)(hsv, colorForComparison);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9897,14 +9905,14 @@ var getAccessibleColorBySaturationAndValueChange = ({
 };
 var getAccessibleColorInDirection = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
   maxIterations = 50,
   direction
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
     direction
@@ -9914,31 +9922,31 @@ var getAccessibleColorInDirection = ({
   }
   return getAccessibleColorBySaturationAndValueChange({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     direction
   });
 };
 var getAccessibleColor = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
     direction: "darker"
@@ -9953,22 +9961,22 @@ var getAccessibleColor = ({
 };
 var hasAccessibleDerivatives = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     direction: "darker"
   });
@@ -9977,190 +9985,100 @@ var hasAccessibleDerivatives = ({
 
 // src/components/ColorPicker/ColorPickerContext.tsx
 var import_jsx_runtime225 = require("react/jsx-runtime");
-var createInitialState = ({
-  valueAsHex,
-  shouldEnforceMinContrast,
-  colorForComparisonAsHex,
-  minimumContrastRatio
-}) => {
-  const valueAsHsv = convertToHsv(valueAsHex);
-  const colorForComparisonAsLrgb = convertToLrgb(colorForComparisonAsHex);
-  return {
-    nonDerivedValueAsHsv: valueAsHsv,
-    nonDerivedValueAsHex: valueAsHex,
-    valueAsHsv,
-    shouldEnforceMinContrast,
-    colorForComparisonAsLrgb,
-    minimumContrastRatio,
-    isTransitioning: false
-  };
-};
-var colorPickerReducer = (state, action) => {
-  switch (action.type) {
-    case "SET_VALUE_AS_HSV":
-      const result = {
-        ...state,
-        ...action.payload
-      };
-      if (action.payload.nonDerivedValueAsHsv != null) {
-        result.nonDerivedValueAsHex = (0, import_fn4.formatHex)(action.payload.nonDerivedValueAsHsv);
-      }
-      return result;
-    case "SET_SHOULD_ENFORCE_MIN_CONTRAST":
-      return {
-        ...state,
-        shouldEnforceMinContrast: action.payload
-      };
-    case "SET_MINIMUM_CONTRAST_RATIO":
-      return {
-        ...state,
-        minimumContrastRatio: action.payload,
-        valueAsHsv: state.shouldEnforceMinContrast ? getAccessibleColor({
-          originalHsv: state.valueAsHsv,
-          colorForComparisonAsLrgb: state.colorForComparisonAsLrgb,
-          minContrast: action.payload
-        }) : state.valueAsHsv
-      };
-    case "SET_COLOR_FOR_COMPARISON":
-      return {
-        ...state,
-        colorForComparisonAsLrgb: action.payload,
-        valueAsHsv: state.shouldEnforceMinContrast ? getAccessibleColor({
-          originalHsv: state.valueAsHsv,
-          colorForComparisonAsLrgb: action.payload,
-          minContrast: state.minimumContrastRatio
-        }) : state.valueAsHsv
-      };
-    case "SET_IS_TRANSITIONING":
-      return {
-        ...state,
-        isTransitioning: action.payload
-      };
-    default:
-      return state;
-  }
-};
 var ColorPickerContext = (0, import_react41.createContext)(null);
 var ColorPickerProvider = ({
   children,
   value: valueAsHex,
   onValueChange,
-  shouldEnforceMinContrast = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison: colorForComparisonAsHex = DEFAULT_COLOR_FOR_COMPARISON
+  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
-  const [state, dispatch] = (0, import_react41.useReducer)(
-    colorPickerReducer,
-    createInitialState({
-      valueAsHex,
-      shouldEnforceMinContrast,
-      colorForComparisonAsHex,
-      minimumContrastRatio
-    })
-  );
-  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]);
-  const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
-    return hasAccessibleDerivatives({
-      originalHsv: state.valueAsHsv,
-      colorForComparisonAsLrgb,
-      minContrast: minimumContrastRatio
-    });
-  }, [state.valueAsHsv, colorForComparisonAsLrgb, minimumContrastRatio]);
+  const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
+  const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
+  const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = (0, import_react41.useState)(false);
   const getAccessibleDerivativeColor = (0, import_react41.useCallback)(
     (originalHsv) => getAccessibleColor({
       originalHsv,
-      colorForComparisonAsLrgb,
+      colorForComparison,
       minContrast: minimumContrastRatio
     }),
-    [minimumContrastRatio, colorForComparisonAsLrgb]
-  );
-  const onValueAsHsvChange = (0, import_react41.useCallback)(
-    (rawNewValueAsHsv) => {
-      const hsvToSet = state.shouldEnforceMinContrast ? getAccessibleDerivativeColor(rawNewValueAsHsv) : rawNewValueAsHsv;
-      const hexToSet = (0, import_fn4.formatHex)(hsvToSet);
-      onValueChange(hexToSet);
-      dispatch({
-        type: "SET_VALUE_AS_HSV",
-        payload: { valueAsHsv: hsvToSet, nonDerivedValueAsHsv: rawNewValueAsHsv }
-      });
-    },
-    [getAccessibleDerivativeColor, state.shouldEnforceMinContrast, onValueChange]
+    [minimumContrastRatio, colorForComparison]
   );
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
+  const currentContrastRatio = (0, import_fn4.wcagContrast)(valueAsHsv, colorForComparison);
+  const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
+    return hasAccessibleDerivatives({
+      originalHsv: valueAsHsv,
+      colorForComparison,
+      minContrast: minimumContrastRatio
+    });
+  }, [valueAsHsv, colorForComparison, minimumContrastRatio]);
+  const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
+    setNonDerivedValueAsHsv(nonDerivedValue);
+  }, []);
   const changeValueSmoothly = (0, import_react41.useCallback)(
     (toHsv) => {
-      dispatch({ type: "SET_IS_TRANSITIONING", payload: true });
+      setIsTransitioning(true);
       transitionBetweenColors(
-        state.valueAsHsv,
+        valueAsHsv,
         toHsv,
         (colorForStepAsHsv) => {
           const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
-          dispatch({ type: "SET_VALUE_AS_HSV", payload: { valueAsHsv: colorForStepAsHsv } });
         },
         () => {
-          dispatch({ type: "SET_IS_TRANSITIONING", payload: false });
+          setIsTransitioning(false);
         }
       );
     },
-    [state.valueAsHsv, onValueChange]
+    [valueAsHsv, onValueChange]
   );
-  const setShouldEnforceMinContrast = (0, import_react41.useCallback)(
+  const setShouldEnforceMinContrastWrapped = (0, import_react41.useCallback)(
     (newShouldEnforceMinContrast) => {
-      dispatch({ type: "SET_SHOULD_ENFORCE_MIN_CONTRAST", payload: newShouldEnforceMinContrast });
-      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(state.valueAsHsv) : state.nonDerivedValueAsHsv;
-      const currentHsv = state.valueAsHsv;
+      setShouldEnforceMinContrast(newShouldEnforceMinContrast);
+      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHsv) : nonDerivedValueAsHsv;
+      const currentHsv = valueAsHsv;
       if (currentHsv.h !== newColorAsHsv.h || currentHsv.s !== newColorAsHsv.s || currentHsv.v !== newColorAsHsv.v) {
         changeValueSmoothly(newColorAsHsv);
       }
     },
-    [
-      changeValueSmoothly,
-      getAccessibleDerivativeColor,
-      state.nonDerivedValueAsHsv,
-      state.valueAsHsv
-    ]
+    [changeValueSmoothly, getAccessibleDerivativeColor, nonDerivedValueAsHsv, valueAsHsv]
   );
+  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
   (0, import_react41.useEffect)(() => {
-    if (valueAsHex === (0, import_fn4.formatHex)(state.valueAsHsv)) {
-      return;
+    if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
+      onValueChange(whatValuePropShouldBe);
     }
-    const newValueAsHsv = convertToHsv(valueAsHex);
-    dispatch({
-      type: "SET_VALUE_AS_HSV",
-      payload: { valueAsHsv: newValueAsHsv }
-    });
-  }, [getAccessibleDerivativeColor, state.valueAsHsv, valueAsHex]);
+  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
   const contextValue = (0, import_react41.useMemo)(
     () => ({
-      ...state,
-      valueAsLrgb,
+      colorForComparison,
       currentContrastRatio,
+      getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
-      valueAsHex,
-      colorForComparisonAsHex,
+      isTransitioning,
       minimumContrastRatio,
-      onValueAsHsvChange,
-      setShouldEnforceMinContrast,
-      getAccessibleDerivativeColor
+      nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
+      nonDerivedValueAsHsv,
+      onChangeNonDerivedValueAsHsv,
+      setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
+      shouldEnforceMinContrast,
+      valueAsHex,
+      valueAsHsv
     }),
     [
-      state,
-      valueAsLrgb,
+      colorForComparison,
       currentContrastRatio,
+      getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
-      valueAsHex,
-      colorForComparisonAsHex,
+      isTransitioning,
       minimumContrastRatio,
-      onValueAsHsvChange,
-      setShouldEnforceMinContrast,
-      getAccessibleDerivativeColor
+      nonDerivedValueAsHsv,
+      onChangeNonDerivedValueAsHsv,
+      setShouldEnforceMinContrastWrapped,
+      shouldEnforceMinContrast,
+      valueAsHex,
+      valueAsHsv
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ColorPickerContext.Provider, { value: contextValue, children });
@@ -10184,13 +10102,13 @@ var Container = (0, import_styled_components47.default)(import_react_radio_group
   gap: var(--wui-space-02);
 `;
 var ColorGrid = ({ children }) => {
-  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
+  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
       const hsv = convertToHsv(value);
-      onValueAsHsvChange(hsv);
+      onChangeNonDerivedValueAsHsv(hsv);
     },
-    [onValueAsHsvChange]
+    [onChangeNonDerivedValueAsHsv]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Container,
@@ -10467,16 +10385,16 @@ var Container3 = (0, import_styled_components51.default)(import_react_toggle_gro
   padding: var(--wui-space-02);
 `;
 var ColorList = ({ children }) => {
-  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
+  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = (0, import_react43.useCallback)(
     (value) => {
       if (value === "") {
         return;
       }
       const hsv = convertToHsv(value);
-      onValueAsHsvChange(hsv);
+      onChangeNonDerivedValueAsHsv(hsv);
     },
-    [onValueAsHsvChange]
+    [onChangeNonDerivedValueAsHsv]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
     Container3,
@@ -10619,12 +10537,11 @@ ColorListOption.displayName = "ColorListOption_UI";
 var import_react_popover = require("@radix-ui/react-popover");
 var import_jsx_runtime234 = require("react/jsx-runtime");
 var ColorPicker = ({
-  value,
-  onValueChange,
   children,
-  shouldEnforceMinContrast = false,
+  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
+  onValueChange,
+  value
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     ColorPickerProvider,
@@ -10632,7 +10549,6 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
-      shouldEnforceMinContrast,
       value,
       children
     }
@@ -10993,13 +10909,13 @@ var ContrastEnforcerSwitch = () => {
 // src/components/ColorPicker/ContrastPreview.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
 var ContrastPreview = () => {
-  const { valueAsHex, colorForComparisonAsHex } = useColorPickerState();
+  const { valueAsHex, colorForComparison } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparisonAsHex }, children: "Aa" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparison }, children: "Aa" })
     }
   );
 };
@@ -11250,7 +11166,7 @@ var normalizeHexInput = (input) => {
   return cleaned.slice(0, SIX_DIGIT_HEX_CODE_LENGTH).toLocaleLowerCase();
 };
 var HexColorInput = ({ autoFocus = true }) => {
-  const { valueAsHex, nonDerivedValueAsHsv, onValueAsHsvChange } = useColorPickerState();
+  const { valueAsHex, nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const inputRef = (0, import_react48.useRef)(null);
   const [textInputValue, setTextInputValue] = (0, import_react48.useState)(valueAsHex);
   const onChangeInputValue = (0, import_react48.useCallback)(
@@ -11265,9 +11181,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(newValue);
-      onValueAsHsvChange(newValueAsHsv);
+      onChangeNonDerivedValueAsHsv(newValueAsHsv);
     },
-    [onValueAsHsvChange]
+    [onChangeNonDerivedValueAsHsv]
   );
   const onCopy = (0, import_react48.useCallback)((event) => {
     const inputElem = inputRef.current;
@@ -11318,7 +11234,7 @@ var HexColorInput = ({ autoFocus = true }) => {
           ...nonDerivedValueAsHsv,
           s: newSaturation
         };
-        onValueAsHsvChange(newHsv);
+        onChangeNonDerivedValueAsHsv(newHsv);
         return;
       }
       if (key.length > 1) {
@@ -11332,7 +11248,7 @@ var HexColorInput = ({ autoFocus = true }) => {
         event.preventDefault();
       }
     },
-    [valueAsHex, onValueAsHsvChange, nonDerivedValueAsHsv]
+    [valueAsHex, onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
   );
   const onPaste = (0, import_react48.useCallback)(
     (event) => {
@@ -11345,9 +11261,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(normalizedValue);
-      onValueAsHsvChange(newValueAsHsv);
+      onChangeNonDerivedValueAsHsv(newValueAsHsv);
     },
-    [onValueAsHsvChange]
+    [onChangeNonDerivedValueAsHsv]
   );
   const selectAllButTheHash = (0, import_react48.useCallback)(() => {
     const inputElem = inputRef.current;
@@ -11489,7 +11405,7 @@ var ThumbInner = import_styled_components62.default.div`
   }
 `;
 var HueSlider = () => {
-  const { nonDerivedValueAsHsv, onValueAsHsvChange, valueAsHsv } = useColorPickerState();
+  const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
       backgroundColor: (0, import_fn7.formatHex)({
@@ -11507,12 +11423,12 @@ var HueSlider = () => {
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
       const newHue = values[0] ?? 0;
-      onValueAsHsvChange({
+      onChangeNonDerivedValueAsHsv({
         ...nonDerivedValueAsHsv,
         h: newHue
       });
     },
-    [nonDerivedValueAsHsv, onValueAsHsvChange]
+    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container7, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
@@ -11575,14 +11491,14 @@ var Canvas2 = import_styled_components63.default.canvas`
   display: block;
   width: 100%;
 `;
-var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparisonAsLrgb, limit) => {
+var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit) => {
   const contrastPoints = [];
   for (let x = 0; x < width; x += 1) {
     const saturationChanel = x / (width - 1);
     const initialValueChannelForSearch = limit === "upper" ? 0 : 1;
     const colorForXAsHsv = getAccessibleColorByValueChannelChange({
       originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
-      colorForComparisonAsLrgb,
+      colorForComparison,
       minContrast: minimumContrastRatio,
       direction: limit === "upper" ? "brighter" : "darker"
     });
@@ -11624,7 +11540,7 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparisonAsLrgb
+  colorForComparison
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11639,7 +11555,7 @@ var HSVSaturationValueCanvas = ({
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const { width, height } = canvas;
     drawGradientBackground(ctx, width, height, hue);
-    if (shouldShowContrastCurve && colorForComparisonAsLrgb) {
+    if (shouldShowContrastCurve && colorForComparison) {
       ctx.lineWidth = 1.5;
       ctx.strokeStyle = "white";
       const maxHsvValueChannelCurve = calculateContrastCurve(
@@ -11647,7 +11563,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparisonAsLrgb,
+        colorForComparison,
         "upper"
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
@@ -11655,7 +11571,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparisonAsLrgb,
+        colorForComparison,
         "lower"
       );
       if (minHsvValueChannelCurve.length > 0) {
@@ -11665,7 +11581,7 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparisonAsLrgb]);
+  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparison]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11711,39 +11627,25 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     valueAsHex,
-    onValueAsHsvChange,
+    onChangeNonDerivedValueAsHsv,
     valueAsHsv,
     isTransitioning,
     minimumContrastRatio,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     shouldEnforceMinContrast,
-    nonDerivedValueAsHsv,
-    getAccessibleDerivativeColor
+    nonDerivedValueAsHsv
   } = useColorPickerState();
   const containerRef = (0, import_react52.useRef)(null);
   const thumbRef = (0, import_react52.useRef)(null);
   const uuid = (0, import_react52.useMemo)(() => crypto.randomUUID(), []);
   const instructionsId = `sv-instructions-${uuid}`;
+  const valueAsHexConvertedToHsv = convertToHsv(valueAsHex);
   const thumbPositionHsv = (0, import_react52.useMemo)(() => {
-    if (isTransitioning) {
+    if (!isTransitioning) {
       return valueAsHsv;
     }
-    if (!shouldEnforceMinContrast) {
-      return nonDerivedValueAsHsv;
-    }
-    const accessibleHsv = getAccessibleDerivativeColor(nonDerivedValueAsHsv);
-    return {
-      ...nonDerivedValueAsHsv,
-      s: accessibleHsv.s,
-      v: accessibleHsv.v
-    };
-  }, [
-    isTransitioning,
-    shouldEnforceMinContrast,
-    nonDerivedValueAsHsv,
-    valueAsHsv,
-    getAccessibleDerivativeColor
-  ]);
+    return valueAsHexConvertedToHsv;
+  }, [isTransitioning, valueAsHexConvertedToHsv, valueAsHsv]);
   const [thumbStyle, setThumbStyle] = (0, import_react52.useState)({
     backgroundColor: valueAsHex
   });
@@ -11764,19 +11666,19 @@ var SaturationAndValuePicker = ({
     (channel, delta) => {
       if (channel === "s") {
         const newSaturation = Math.max(0, Math.min(1, nonDerivedValueAsHsv.s + delta));
-        onValueAsHsvChange({
+        onChangeNonDerivedValueAsHsv({
           ...nonDerivedValueAsHsv,
           s: newSaturation
         });
         return;
       }
       const newValue = Math.max(0, Math.min(1, nonDerivedValueAsHsv.v + delta));
-      onValueAsHsvChange({
+      onChangeNonDerivedValueAsHsv({
         ...nonDerivedValueAsHsv,
         v: newValue
       });
     },
-    [nonDerivedValueAsHsv, onValueAsHsvChange]
+    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
   const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
   const updateSaturationAndValueFromCoordinates = (0, import_react52.useCallback)(
@@ -11790,13 +11692,13 @@ var SaturationAndValuePicker = ({
       const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
       const saturation = x;
       const value = 1 - y;
-      onValueAsHsvChange({
+      onChangeNonDerivedValueAsHsv({
         ...nonDerivedValueAsHsv,
         s: saturation,
         v: value
       });
     },
-    [onValueAsHsvChange, nonDerivedValueAsHsv]
+    [onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
   );
   const onContainerMouseDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11881,7 +11783,7 @@ var SaturationAndValuePicker = ({
           /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             HSVSaturationValueCanvas,
             {
-              colorForComparisonAsLrgb,
+              colorForComparison,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
               shouldShowContrastCurve: shouldEnforceMinContrast
@@ -13065,52 +12967,49 @@ var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime262 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT5 = "div";
-var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
-  if (minChildWidth === "auto" && maxColumns === "auto") {
-    return import_styled_components74.css`
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    `;
-  }
-  const gridMode = expandItems ? "auto-fit" : "auto-fill";
-  const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
-  if (maxColumns === "auto") {
-    return import_styled_components74.css`
-      grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
-    `;
-  }
-  return import_styled_components74.css`
-    /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
-    --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
-    --wui-grid-max-column-width: calc(
-      (100% - var(--wui-grid-total-column-gap-width)) / ${maxColumns}
-    );
-
-    grid-template-columns: repeat(
-      ${gridMode},
-      minmax(max(${minChildWidthValue}px, var(--wui-grid-max-column-width)), 1fr)
-    );
-  `;
-};
 var StyledGrid = import_styled_components74.default.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
+  --wui-grid-min-column-size: ${({ $minChildWidth }) => $minChildWidth === "auto" ? "0" : `${$minChildWidth}px`};
+  --wui-grid-max-columns: ${({ $maxColumns }) => $maxColumns === "auto" ? "infinity" : $maxColumns};
+  --wui-grid-column-gap-count: calc(var(--wui-grid-max-columns) - 1);
+  --wui-grid-total-column-gap-width: calc(
+    var(--wui-grid-column-gap-count) * var(--wui-grid-column-gap)
+  );
+  --wui-grid-max-column-width: calc(
+    (100% - var(--wui-grid-total-column-gap-width)) / var(--wui-grid-max-columns)
+  );
 
   display: grid;
   gap: var(--wui-grid-column-gap) var(--wui-grid-row-gap);
   width: 100%;
 
-  ${({ $maxColumns, $minChildWidth, $expandItems }) => getGridTemplateColumns($maxColumns, $minChildWidth, $expandItems)}
+  ${({ $maxColumns, $minChildWidth }) => {
+  if ($maxColumns === "auto" && $minChildWidth === "auto") {
+    return import_styled_components74.css`
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      `;
+  }
+  if ($maxColumns !== "auto" && $minChildWidth === "auto") {
+    return import_styled_components74.css`
+        grid-template-columns: repeat(${$maxColumns}, minmax(0, 1fr));
+      `;
+  }
+  if ($maxColumns === "auto" && $minChildWidth !== "auto") {
+    return import_styled_components74.css`
+        grid-template-columns: repeat(auto-fit, minmax(${$minChildWidth}px, 1fr));
+      `;
+  }
+  return import_styled_components74.css`
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(max(var(--wui-grid-min-column-size), var(--wui-grid-max-column-width)), 1fr)
+      );
+    `;
+}}
 `;
 var GridComponent = (0, import_react61.forwardRef)(
-  ({
-    children,
-    columns = "auto",
-    minChildWidth = "auto",
-    gap = "space-02",
-    expandItems = false,
-    renderAs,
-    ...props
-  }, ref) => {
+  ({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", renderAs, ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const { column, row } = (0, import_type_guards40.isRecord)(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
@@ -13120,7 +13019,6 @@ var GridComponent = (0, import_react61.forwardRef)(
       {
         ref,
         $columnGap: column,
-        $expandItems: expandItems,
         $maxColumns: responsiveColumns,
         $minChildWidth: responsiveMinChildWidth,
         $rowGap: row,