@wistia/ui 0.13.4-beta.2b044a7a.db3308f → 0.13.4-beta.2cd63f74.6c81112

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.4-beta.2b044a7a.db3308f
+ * @license @wistia/ui v0.13.4-beta.2cd63f74.6c81112
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9647,50 +9647,41 @@ var CollapsibleContent = ({ clamp, children }) => {
   ] }) });
 };
 
-// src/components/ColorPicker/ColorGrid.tsx
-var import_react42 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_react_radio_group = require("@radix-ui/react-radio-group");
-
-// src/components/ColorPicker/ColorPickerContext.tsx
-var import_react41 = require("react");
-var import_fn4 = require("culori/fn");
-
 // src/components/ColorPicker/color-conversion-utils.ts
 var import_fn = require("culori/fn");
-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);
+(0, import_fn.useMode)(import_fn.modeRgb);
+(0, import_fn.useMode)(import_fn.modeHsv);
 var convertToHsv = (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)}`);
+  const rgb = (0, import_fn.parseHex)(color);
+  if (rgb == null) {
+    throw new Error(`Invalid hex color value: ${color}`);
   }
-  return result;
+  return (0, import_fn.convertRgbToHsv)(rgb);
 };
-var convertToRgb = (color) => {
+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 = convertToRgbRaw(color);
-  }
-  result = convertToRgbRaw(color);
-  if (result == null) {
-    throw new Error(`Invalid color value: ${JSON.stringify(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"));
+var import_react_radio_group = require("@radix-ui/react-radio-group");
+
+// src/components/ColorPicker/ColorPickerContext.tsx
+var import_react41 = require("react");
+var import_fn4 = require("culori/fn");
 
 // src/components/ColorPicker/transitionBetweenColors.ts
 var import_fn2 = require("culori/fn");
@@ -9772,7 +9763,7 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
 };
 var getAccessibleColorByValueChannelChange = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   maxIterations = 50,
   direction
@@ -9787,7 +9778,8 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariant, colorForComparison);
+  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9803,7 +9795,7 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(candidateHsv, colorForComparison);
+    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9846,7 +9838,7 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
 };
 var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   direction
 }) => {
@@ -9875,7 +9867,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(hsv, colorForComparison);
+    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9905,14 +9897,14 @@ var getAccessibleColorBySaturationAndValueChange = ({
 };
 var getAccessibleColorInDirection = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   maxIterations = 50,
   direction
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction
@@ -9922,31 +9914,31 @@ var getAccessibleColorInDirection = ({
   }
   return getAccessibleColorBySaturationAndValueChange({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction
   });
 };
 var getAccessibleColor = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction: "darker"
@@ -9961,22 +9953,22 @@ var getAccessibleColor = ({
 };
 var hasAccessibleDerivatives = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction: "darker"
   });
@@ -9985,100 +9977,190 @@ 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 = DEFAULT_COLOR_FOR_COMPARISON
+  colorForComparison: colorForComparisonAsHex = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
-  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 [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 getAccessibleDerivativeColor = (0, import_react41.useCallback)(
     (originalHsv) => getAccessibleColor({
       originalHsv,
-      colorForComparison,
+      colorForComparisonAsLrgb,
       minContrast: minimumContrastRatio
     }),
-    [minimumContrastRatio, colorForComparison]
+    [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]
   );
-  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) => {
-      setIsTransitioning(true);
+      dispatch({ type: "SET_IS_TRANSITIONING", payload: true });
       transitionBetweenColors(
-        valueAsHsv,
+        state.valueAsHsv,
         toHsv,
         (colorForStepAsHsv) => {
           const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
+          dispatch({ type: "SET_VALUE_AS_HSV", payload: { valueAsHsv: colorForStepAsHsv } });
         },
         () => {
-          setIsTransitioning(false);
+          dispatch({ type: "SET_IS_TRANSITIONING", payload: false });
         }
       );
     },
-    [valueAsHsv, onValueChange]
+    [state.valueAsHsv, onValueChange]
   );
-  const setShouldEnforceMinContrastWrapped = (0, import_react41.useCallback)(
+  const setShouldEnforceMinContrast = (0, import_react41.useCallback)(
     (newShouldEnforceMinContrast) => {
-      setShouldEnforceMinContrast(newShouldEnforceMinContrast);
-      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHsv) : nonDerivedValueAsHsv;
-      const currentHsv = valueAsHsv;
+      dispatch({ type: "SET_SHOULD_ENFORCE_MIN_CONTRAST", payload: newShouldEnforceMinContrast });
+      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(state.valueAsHsv) : state.nonDerivedValueAsHsv;
+      const currentHsv = state.valueAsHsv;
       if (currentHsv.h !== newColorAsHsv.h || currentHsv.s !== newColorAsHsv.s || currentHsv.v !== newColorAsHsv.v) {
         changeValueSmoothly(newColorAsHsv);
       }
     },
-    [changeValueSmoothly, getAccessibleDerivativeColor, nonDerivedValueAsHsv, valueAsHsv]
+    [
+      changeValueSmoothly,
+      getAccessibleDerivativeColor,
+      state.nonDerivedValueAsHsv,
+      state.valueAsHsv
+    ]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
   (0, import_react41.useEffect)(() => {
-    if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
-      onValueChange(whatValuePropShouldBe);
+    if (valueAsHex === (0, import_fn4.formatHex)(state.valueAsHsv)) {
+      return;
     }
-  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
+    const newValueAsHsv = convertToHsv(valueAsHex);
+    dispatch({
+      type: "SET_VALUE_AS_HSV",
+      payload: { valueAsHsv: newValueAsHsv }
+    });
+  }, [getAccessibleDerivativeColor, state.valueAsHsv, valueAsHex]);
   const contextValue = (0, import_react41.useMemo)(
     () => ({
-      colorForComparison,
+      ...state,
+      valueAsLrgb,
       currentContrastRatio,
-      getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
-      isTransitioning,
-      minimumContrastRatio,
-      nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
-      nonDerivedValueAsHsv,
-      onChangeNonDerivedValueAsHsv,
-      setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
-      shouldEnforceMinContrast,
       valueAsHex,
-      valueAsHsv
+      colorForComparisonAsHex,
+      minimumContrastRatio,
+      onValueAsHsvChange,
+      setShouldEnforceMinContrast,
+      getAccessibleDerivativeColor
     }),
     [
-      colorForComparison,
+      state,
+      valueAsLrgb,
       currentContrastRatio,
-      getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
-      isTransitioning,
-      minimumContrastRatio,
-      nonDerivedValueAsHsv,
-      onChangeNonDerivedValueAsHsv,
-      setShouldEnforceMinContrastWrapped,
-      shouldEnforceMinContrast,
       valueAsHex,
-      valueAsHsv
+      colorForComparisonAsHex,
+      minimumContrastRatio,
+      onValueAsHsvChange,
+      setShouldEnforceMinContrast,
+      getAccessibleDerivativeColor
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ColorPickerContext.Provider, { value: contextValue, children });
@@ -10102,13 +10184,13 @@ var Container = (0, import_styled_components47.default)(import_react_radio_group
   gap: var(--wui-space-02);
 `;
 var ColorGrid = ({ children }) => {
-  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
       const hsv = convertToHsv(value);
-      onChangeNonDerivedValueAsHsv(hsv);
+      onValueAsHsvChange(hsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Container,
@@ -10385,16 +10467,16 @@ var Container3 = (0, import_styled_components51.default)(import_react_toggle_gro
   padding: var(--wui-space-02);
 `;
 var ColorList = ({ children }) => {
-  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react43.useCallback)(
     (value) => {
       if (value === "") {
         return;
       }
       const hsv = convertToHsv(value);
-      onChangeNonDerivedValueAsHsv(hsv);
+      onValueAsHsvChange(hsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
     Container3,
@@ -10537,11 +10619,12 @@ 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,
-  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
+  shouldEnforceMinContrast = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  onValueChange,
-  value
+  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     ColorPickerProvider,
@@ -10549,6 +10632,7 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
+      shouldEnforceMinContrast,
       value,
       children
     }
@@ -10909,13 +10993,13 @@ var ContrastEnforcerSwitch = () => {
 // src/components/ColorPicker/ContrastPreview.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
 var ContrastPreview = () => {
-  const { valueAsHex, colorForComparison } = useColorPickerState();
+  const { valueAsHex, colorForComparisonAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparisonAsHex }, children: "Aa" })
     }
   );
 };
@@ -11166,7 +11250,7 @@ var normalizeHexInput = (input) => {
   return cleaned.slice(0, SIX_DIGIT_HEX_CODE_LENGTH).toLocaleLowerCase();
 };
 var HexColorInput = ({ autoFocus = true }) => {
-  const { valueAsHex, nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, nonDerivedValueAsHsv, onValueAsHsvChange } = useColorPickerState();
   const inputRef = (0, import_react48.useRef)(null);
   const [textInputValue, setTextInputValue] = (0, import_react48.useState)(valueAsHex);
   const onChangeInputValue = (0, import_react48.useCallback)(
@@ -11181,9 +11265,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(newValue);
-      onChangeNonDerivedValueAsHsv(newValueAsHsv);
+      onValueAsHsvChange(newValueAsHsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   const onCopy = (0, import_react48.useCallback)((event) => {
     const inputElem = inputRef.current;
@@ -11234,7 +11318,7 @@ var HexColorInput = ({ autoFocus = true }) => {
           ...nonDerivedValueAsHsv,
           s: newSaturation
         };
-        onChangeNonDerivedValueAsHsv(newHsv);
+        onValueAsHsvChange(newHsv);
         return;
       }
       if (key.length > 1) {
@@ -11248,7 +11332,7 @@ var HexColorInput = ({ autoFocus = true }) => {
         event.preventDefault();
       }
     },
-    [valueAsHex, onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
+    [valueAsHex, onValueAsHsvChange, nonDerivedValueAsHsv]
   );
   const onPaste = (0, import_react48.useCallback)(
     (event) => {
@@ -11261,9 +11345,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(normalizedValue);
-      onChangeNonDerivedValueAsHsv(newValueAsHsv);
+      onValueAsHsvChange(newValueAsHsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   const selectAllButTheHash = (0, import_react48.useCallback)(() => {
     const inputElem = inputRef.current;
@@ -11405,7 +11489,7 @@ var ThumbInner = import_styled_components62.default.div`
   }
 `;
 var HueSlider = () => {
-  const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
+  const { nonDerivedValueAsHsv, onValueAsHsvChange, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
       backgroundColor: (0, import_fn7.formatHex)({
@@ -11423,12 +11507,12 @@ var HueSlider = () => {
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
       const newHue = values[0] ?? 0;
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         h: newHue
       });
     },
-    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
+    [nonDerivedValueAsHsv, onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container7, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
@@ -11491,14 +11575,14 @@ var Canvas2 = import_styled_components63.default.canvas`
   display: block;
   width: 100%;
 `;
-var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit) => {
+var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparisonAsLrgb, 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" },
-      colorForComparison,
+      colorForComparisonAsLrgb,
       minContrast: minimumContrastRatio,
       direction: limit === "upper" ? "brighter" : "darker"
     });
@@ -11540,7 +11624,7 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison
+  colorForComparisonAsLrgb
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11555,7 +11639,7 @@ var HSVSaturationValueCanvas = ({
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const { width, height } = canvas;
     drawGradientBackground(ctx, width, height, hue);
-    if (shouldShowContrastCurve && colorForComparison) {
+    if (shouldShowContrastCurve && colorForComparisonAsLrgb) {
       ctx.lineWidth = 1.5;
       ctx.strokeStyle = "white";
       const maxHsvValueChannelCurve = calculateContrastCurve(
@@ -11563,7 +11647,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparison,
+        colorForComparisonAsLrgb,
         "upper"
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
@@ -11571,7 +11655,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparison,
+        colorForComparisonAsLrgb,
         "lower"
       );
       if (minHsvValueChannelCurve.length > 0) {
@@ -11581,7 +11665,7 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparison]);
+  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparisonAsLrgb]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11627,25 +11711,39 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     valueAsHex,
-    onChangeNonDerivedValueAsHsv,
+    onValueAsHsvChange,
     valueAsHsv,
     isTransitioning,
     minimumContrastRatio,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     shouldEnforceMinContrast,
-    nonDerivedValueAsHsv
+    nonDerivedValueAsHsv,
+    getAccessibleDerivativeColor
   } = 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;
     }
-    return valueAsHexConvertedToHsv;
-  }, [isTransitioning, valueAsHexConvertedToHsv, valueAsHsv]);
+    if (!shouldEnforceMinContrast) {
+      return nonDerivedValueAsHsv;
+    }
+    const accessibleHsv = getAccessibleDerivativeColor(nonDerivedValueAsHsv);
+    return {
+      ...nonDerivedValueAsHsv,
+      s: accessibleHsv.s,
+      v: accessibleHsv.v
+    };
+  }, [
+    isTransitioning,
+    shouldEnforceMinContrast,
+    nonDerivedValueAsHsv,
+    valueAsHsv,
+    getAccessibleDerivativeColor
+  ]);
   const [thumbStyle, setThumbStyle] = (0, import_react52.useState)({
     backgroundColor: valueAsHex
   });
@@ -11666,19 +11764,19 @@ var SaturationAndValuePicker = ({
     (channel, delta) => {
       if (channel === "s") {
         const newSaturation = Math.max(0, Math.min(1, nonDerivedValueAsHsv.s + delta));
-        onChangeNonDerivedValueAsHsv({
+        onValueAsHsvChange({
           ...nonDerivedValueAsHsv,
           s: newSaturation
         });
         return;
       }
       const newValue = Math.max(0, Math.min(1, nonDerivedValueAsHsv.v + delta));
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         v: newValue
       });
     },
-    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
+    [nonDerivedValueAsHsv, onValueAsHsvChange]
   );
   const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
   const updateSaturationAndValueFromCoordinates = (0, import_react52.useCallback)(
@@ -11692,13 +11790,13 @@ var SaturationAndValuePicker = ({
       const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
       const saturation = x;
       const value = 1 - y;
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         s: saturation,
         v: value
       });
     },
-    [onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
+    [onValueAsHsvChange, nonDerivedValueAsHsv]
   );
   const onContainerMouseDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11783,7 +11881,7 @@ var SaturationAndValuePicker = ({
           /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             HSVSaturationValueCanvas,
             {
-              colorForComparison,
+              colorForComparisonAsLrgb,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
               shouldShowContrastCurve: shouldEnforceMinContrast
@@ -12234,11 +12332,6 @@ var StyledDataCard = import_styled_components67.default.div`
   position: relative;
   transition: background var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-  &:has([data-wui-data-card-subtitle]) {
-    grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
-    grid-template-rows: auto auto auto;
-  }
-
   &[data-click-region] {
     [data-wui-data-card-hover-icon] {
       opacity: 0;
@@ -12325,9 +12418,6 @@ var StyledDataCardTrendContainer = import_styled_components67.default.div`
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = (0, import_styled_components67.default)(Text)`
-  grid-area: subtitle;
-`;
 var DataCardInner = ({
   label,
   value,
@@ -12335,7 +12425,6 @@ var DataCardInner = ({
   colorScheme = "inherit",
   isLoading = false,
   trend,
-  subtitle,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   StyledDataCard,
@@ -12359,16 +12448,8 @@ var DataCardInner = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards37.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards37.isNotNil)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
-        StyledSubtitle,
-        {
-          "data-wui-data-card-subtitle": true,
-          variant: "label4",
-          children: subtitle
-        }
-      ),
-      (0, import_type_guards37.isNotNil)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards37.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards37.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -12430,7 +12511,6 @@ var DataCards = ({
       ...props,
       $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
-      alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
@@ -16798,6 +16878,9 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/index.ts
+console.log("trigger new package build for UI");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,