@wistia/ui 0.13.4 → 0.13.5-beta.1b1e6551.c8a402b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.4
+ * @license @wistia/ui v0.13.5-beta.1b1e6551.c8a402b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2776,7 +2776,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
     children
   }
 );
-Ellipsis.displayName = "Ellipsis";
+Ellipsis.displayName = "Ellipsis_UI";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components15 = require("styled-components");
@@ -7227,7 +7227,7 @@ var Icon = ({
     }
   );
 };
-Icon.displayName = "Icon";
+Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
@@ -7367,7 +7367,7 @@ var Link = (0, import_react22.forwardRef)(
     return null;
   }
 );
-Link.displayName = "Link";
+Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime197 = require("react/jsx-runtime");
@@ -7509,7 +7509,7 @@ var Button = (0, import_react23.forwardRef)(
     );
   }
 );
-Button.displayName = "Button";
+Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime198 = require("react/jsx-runtime");
@@ -7649,7 +7649,7 @@ var ActionButton = (0, import_react24.forwardRef)(
     );
   }
 );
-ActionButton.displayName = "ActionButton";
+ActionButton.displayName = "ActionButton_UI";
 
 // src/components/Avatar/Avatar.tsx
 var import_react25 = require("react");
@@ -7721,7 +7721,7 @@ var Image = ({
     ...props
   }
 );
-Image.displayName = "Image";
+Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
@@ -7764,7 +7764,7 @@ var ColorSchemeWrapper = ({
     children
   }
 );
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
@@ -7901,7 +7901,7 @@ var Avatar = ({
     }
   );
 };
-Avatar.displayName = "Avatar";
+Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 var import_react26 = require("react");
@@ -7952,7 +7952,7 @@ var Badge = (0, import_react26.forwardRef)(
     );
   }
 );
-Badge.displayName = "Badge";
+Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 var import_react31 = require("react");
@@ -8144,7 +8144,7 @@ var BoxComponent = (0, import_react27.forwardRef)(
     );
   }
 );
-BoxComponent.displayName = "Box";
+BoxComponent.displayName = "Box_UI";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
@@ -8283,7 +8283,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
     }
   )
 );
-HeadingComponent.displayName = "Heading";
+HeadingComponent.displayName = "Heading_UI";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
@@ -8493,7 +8493,7 @@ var TextComponent = (0, import_react29.forwardRef)(
     );
   }
 );
-TextComponent.displayName = "Text";
+TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
@@ -8573,7 +8573,7 @@ var ButtonGroup = ({
     }
   );
 };
-ButtonGroup.displayName = "ButtonGroup";
+ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 var import_react30 = require("react");
@@ -8611,7 +8611,7 @@ var IconButton = (0, import_react30.forwardRef)(
     );
   }
 );
-IconButton.displayName = "IconButton";
+IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
 var import_jsx_runtime208 = require("react/jsx-runtime");
@@ -8787,7 +8787,7 @@ var Banner = ({
     }
   );
 };
-Banner.displayName = "Banner";
+Banner.displayName = "Banner_UI";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react32 = require("react");
@@ -8835,7 +8835,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     )
   ] });
 };
-Breadcrumbs.displayName = "Breadcrumbs";
+Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 var import_styled_components34 = __toESM(require("styled-components"));
@@ -8928,7 +8928,7 @@ var Card = ({
     children
   }
 );
-Card.displayName = "Card";
+Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 var import_react33 = require("react");
@@ -8959,7 +8959,7 @@ var Center = (0, import_react33.forwardRef)(
     }
   )
 );
-Center.displayName = "Center";
+Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react38 = require("react");
@@ -9026,7 +9026,7 @@ var ScreenReaderOnly = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHidden, { ...props, children: accessibleText });
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
+ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -9124,7 +9124,7 @@ var StackComponent = (0, import_react34.forwardRef)(
     );
   }
 );
-StackComponent.displayName = "Stack";
+StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
@@ -9188,7 +9188,7 @@ var FormGroup = ({
     }
   );
 };
-FormGroup.displayName = "FormGroup";
+FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 var import_react36 = require("react");
@@ -9335,7 +9335,7 @@ var CheckboxGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormGroup, { ...props, children }) });
 };
-CheckboxGroup.displayName = "CheckboxGroup";
+CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime220 = require("react/jsx-runtime");
@@ -9499,7 +9499,7 @@ var Checkbox = (0, import_react38.forwardRef)(
     ] });
   }
 );
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox_UI";
 
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react39 = require("react");
@@ -9542,7 +9542,7 @@ var ClickRegion = ({ children, targetRef }) => {
     onClick: handleClick
   });
 };
-ClickRegion.displayName = "ClickRegion";
+ClickRegion.displayName = "ClickRegion_UI";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
@@ -9567,7 +9567,7 @@ var Collapsible = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledRoot, { ...controlProps, children });
 };
-Collapsible.displayName = "Collapsible";
+Collapsible.displayName = "Collapsible_UI";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react40 = require("react");
@@ -9620,7 +9620,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
     }
   );
 };
-CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
+CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
 var import_styled_components46 = __toESM(require("styled-components"));
@@ -9647,41 +9647,50 @@ 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");
-(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);
   }
-  return (0, import_fn.convertRgbToHsv)(rgb);
+  result = convertToHsvRaw(color);
+  if (result == null) {
+    throw new Error(`Invalid color value: ${JSON.stringify(color)}`);
+  }
+  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");
-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");
@@ -9736,10 +9745,21 @@ var THREE_SIXTY = 360;
 var TWO_FIFTY_FIVE = 255;
 var DEFAULT_MIN_CONTRAST = 4.5;
 var DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
+var DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION = 1;
 
 // src/components/ColorPicker/contrast-utils.ts
 var CONTRAST_EPSILON = 4e-3;
 var VALUE_CHANNEL_SNAP_EPSILON = 5e-4;
+var compositeOverWhite = (color, alpha = 1) => {
+  const compositeChannel = (channel) => alpha * channel + (1 - alpha);
+  const colorAsRgb = convertToRgb(color);
+  return {
+    mode: "rgb",
+    r: compositeChannel(colorAsRgb.r),
+    g: compositeChannel(colorAsRgb.g),
+    b: compositeChannel(colorAsRgb.b)
+  };
+};
 var snapValueToEdges = (value) => {
   if (value > 1 - VALUE_CHANNEL_SNAP_EPSILON) {
     return 1;
@@ -9763,10 +9783,11 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
 };
 var getAccessibleColorByValueChannelChange = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const searchingBrighter = direction === "brighter";
   const lowValue = searchingBrighter ? originalHsv.v : 0;
@@ -9778,8 +9799,10 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
-  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
+  const extremeContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9795,7 +9818,10 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
+    const contrast = (0, import_fn3.wcagContrast)(
+      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
+      colorForComparison
+    );
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9838,9 +9864,10 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
 };
 var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   const maxIterations = 50;
@@ -9867,7 +9894,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
+    return (0, import_fn3.wcagContrast)(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9897,51 +9924,60 @@ var getAccessibleColorBySaturationAndValueChange = ({
 };
 var getAccessibleColorInDirection = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
-    direction
+    direction,
+    opacityForContrastCalculation
   });
   if (valueResult !== null) {
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
-    direction
+    direction,
+    opacityForContrastCalculation
   });
 };
 var getAccessibleColor = ({
   originalHsv,
-  colorForComparisonAsLrgb,
+  colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
-  maxIterations = 50
+  maxIterations = 50,
+  opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
-    direction: "brighter"
+    direction: "brighter",
+    opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
     maxIterations,
-    direction: "darker"
+    direction: "darker",
+    opacityForContrastCalculation
   });
   const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalHsv);
   if (result == null) {
@@ -9953,214 +9989,138 @@ var getAccessibleColor = ({
 };
 var hasAccessibleDerivatives = ({
   originalHsv,
-  colorForComparisonAsLrgb,
-  minContrast = DEFAULT_MIN_CONTRAST
+  colorForComparison,
+  minContrast = DEFAULT_MIN_CONTRAST,
+  opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
-    direction: "brighter"
+    direction: "brighter",
+    opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparisonAsLrgb,
+    colorForComparison,
     minContrast,
-    direction: "darker"
+    direction: "darker",
+    opacityForContrastCalculation
   });
   return brighterOption !== null || darkerOption !== null;
 };
 
 // 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,
+  colorForComparison,
+  minimumContrastRatio,
   onValueChange,
-  shouldEnforceMinContrast = false,
-  minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison: colorForComparisonAsHex = DEFAULT_COLOR_FOR_COMPARISON
+  opacityForContrastCalculation,
+  value: valueAsHex
 }) => {
-  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,
-      minContrast: minimumContrastRatio
+      colorForComparison,
+      minContrast: minimumContrastRatio,
+      opacityForContrastCalculation
     }),
-    [minimumContrastRatio, colorForComparisonAsLrgb]
+    [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  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)(
+    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
+    colorForComparison
   );
+  const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
+    return hasAccessibleDerivatives({
+      originalHsv: valueAsHsv,
+      colorForComparison,
+      minContrast: minimumContrastRatio,
+      opacityForContrastCalculation
+    });
+  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
+  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,
+      opacityForContrastCalculation,
+      setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
+      shouldEnforceMinContrast,
+      valueAsHex,
+      valueAsHsv
     }),
     [
-      state,
-      valueAsLrgb,
+      colorForComparison,
       currentContrastRatio,
+      getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
-      valueAsHex,
-      colorForComparisonAsHex,
+      isTransitioning,
       minimumContrastRatio,
-      onValueAsHsvChange,
-      setShouldEnforceMinContrast,
-      getAccessibleDerivativeColor
+      nonDerivedValueAsHsv,
+      onChangeNonDerivedValueAsHsv,
+      opacityForContrastCalculation,
+      setShouldEnforceMinContrastWrapped,
+      shouldEnforceMinContrast,
+      valueAsHex,
+      valueAsHsv
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ColorPickerContext.Provider, { value: contextValue, children });
@@ -10184,13 +10144,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,
@@ -10201,7 +10161,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
-ColorGrid.displayName = "ColorGrid";
+ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -10411,7 +10371,7 @@ var Tooltip = ({
     }
   );
 };
-Tooltip.displayName = "Tooltip";
+Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_jsx_runtime229 = require("react/jsx-runtime");
@@ -10454,7 +10414,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
-ColorGridOption.displayName = "ColorGridOption";
+ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
@@ -10467,16 +10427,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,
@@ -10488,7 +10448,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
-ColorList.displayName = "ColorList";
+ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10518,7 +10478,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
-ColorListGroup.displayName = "ColorListGroup";
+ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
@@ -10613,18 +10573,18 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
-ColorListOption.displayName = "ColorListOption";
+ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 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
+  opacityForContrastCalculation = DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION,
+  onValueChange,
+  value
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     ColorPickerProvider,
@@ -10632,13 +10592,13 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
-      shouldEnforceMinContrast,
+      opacityForContrastCalculation,
       value,
       children
     }
   ) });
 };
-ColorPicker.displayName = "ColorPicker";
+ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10667,7 +10627,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
-ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
@@ -10678,7 +10638,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";
+ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
@@ -10691,7 +10651,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
-ValueSwatch.displayName = "ValueSwatch";
+ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10699,7 +10659,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
-ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -10739,7 +10699,7 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
     );
   }
 );
-ColorPickerTrigger.displayName = "ColorPickerTrigger";
+ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
@@ -10960,7 +10920,7 @@ var Switch = (0, import_react45.forwardRef)(
     ] });
   }
 );
-Switch.displayName = "Switch";
+Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
 var import_jsx_runtime242 = require("react/jsx-runtime");
@@ -10993,13 +10953,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" })
     }
   );
 };
@@ -11023,7 +10983,7 @@ var ContrastControls = () => {
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
-ContrastControls.displayName = "ContrastControls";
+ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
@@ -11233,7 +11193,7 @@ var Input = (0, import_react47.forwardRef)(
     );
   }
 );
-Input.displayName = "Input";
+Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
@@ -11250,7 +11210,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 +11225,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 +11278,7 @@ var HexColorInput = ({ autoFocus = true }) => {
           ...nonDerivedValueAsHsv,
           s: newSaturation
         };
-        onValueAsHsvChange(newHsv);
+        onChangeNonDerivedValueAsHsv(newHsv);
         return;
       }
       if (key.length > 1) {
@@ -11332,7 +11292,7 @@ var HexColorInput = ({ autoFocus = true }) => {
         event.preventDefault();
       }
     },
-    [valueAsHex, onValueAsHsvChange, nonDerivedValueAsHsv]
+    [valueAsHex, onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
   );
   const onPaste = (0, import_react48.useCallback)(
     (event) => {
@@ -11345,9 +11305,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;
@@ -11396,7 +11356,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
-HexColorInput.displayName = "HexColorInput";
+HexColorInput.displayName = "HexColorInput_UI";
 
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
@@ -11489,7 +11449,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 +11467,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)(
@@ -11533,7 +11493,7 @@ var HueSlider = () => {
     /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
-HueSlider.displayName = "HueSlider";
+HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
@@ -11575,16 +11535,17 @@ 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, opacityForContrastCalculation) => {
   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"
+      direction: limit === "upper" ? "brighter" : "darker",
+      opacityForContrastCalculation
     });
     if (colorForXAsHsv != null) {
       const point = {
@@ -11624,7 +11585,8 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparisonAsLrgb
+  colorForComparison,
+  opacityForContrastCalculation
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11639,7 +11601,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,16 +11609,18 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparisonAsLrgb,
-        "upper"
+        colorForComparison,
+        "upper",
+        opacityForContrastCalculation
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
         width,
         height,
         hue,
         minimumContrastRatio,
-        colorForComparisonAsLrgb,
-        "lower"
+        colorForComparison,
+        "lower",
+        opacityForContrastCalculation
       );
       if (minHsvValueChannelCurve.length > 0) {
         drawSmoothCurve(ctx, minHsvValueChannelCurve);
@@ -11665,7 +11629,13 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparisonAsLrgb]);
+  }, [
+    hue,
+    shouldShowContrastCurve,
+    minimumContrastRatio,
+    colorForComparison,
+    opacityForContrastCalculation
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11710,40 +11680,27 @@ var SaturationAndValuePicker = ({
   dataTestId
 }) => {
   const {
-    valueAsHex,
-    onValueAsHsvChange,
-    valueAsHsv,
+    colorForComparison,
     isTransitioning,
     minimumContrastRatio,
-    colorForComparisonAsLrgb,
-    shouldEnforceMinContrast,
     nonDerivedValueAsHsv,
-    getAccessibleDerivativeColor
+    onChangeNonDerivedValueAsHsv,
+    opacityForContrastCalculation,
+    shouldEnforceMinContrast,
+    valueAsHex,
+    valueAsHsv
   } = 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 +11721,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 +11747,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,9 +11838,10 @@ var SaturationAndValuePicker = ({
           /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             HSVSaturationValueCanvas,
             {
-              colorForComparisonAsLrgb,
+              colorForComparison,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
+              opacityForContrastCalculation,
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
@@ -11905,7 +11863,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
-SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
@@ -12066,7 +12024,7 @@ var Tag = (0, import_react53.forwardRef)(
     );
   }
 );
-Tag.displayName = "Tag";
+Tag.displayName = "Tag_UI";
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime252 = require("react/jsx-runtime");
@@ -12332,6 +12290,11 @@ 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;
@@ -12418,6 +12381,9 @@ 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,
@@ -12425,6 +12391,7 @@ var DataCardInner = ({
   colorScheme = "inherit",
   isLoading = false,
   trend,
+  subtitle,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   StyledDataCard,
@@ -12448,8 +12415,16 @@ var DataCardInner = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (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 })
+      (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 })
     ]
   }
 );
@@ -12486,7 +12461,7 @@ var DataCard = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(DataCardInner, { ...props });
 };
-DataCard.displayName = "DataCard";
+DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
 var import_styled_components68 = __toESM(require("styled-components"));
@@ -12511,6 +12486,7 @@ var DataCards = ({
       ...props,
       $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
+      alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
@@ -12520,7 +12496,7 @@ var DataCards = ({
     }
   );
 };
-DataCards.displayName = "DataCards";
+DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
@@ -12598,7 +12574,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
     }
   );
 };
-Divider.displayName = "Divider";
+Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
 var import_styled_components71 = __toESM(require("styled-components"));
@@ -12872,7 +12848,7 @@ var Label = ({
     }
   );
 };
-Label.displayName = "Label";
+Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -13030,7 +13006,7 @@ var FormField = ({
     }
   );
 };
-FormField.displayName = "FormField";
+FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react60 = require("react");
@@ -13057,7 +13033,7 @@ var RadioGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(FormGroup, { ...props, children }) });
 };
-RadioGroup.displayName = "RadioGroup";
+RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 var import_react61 = require("react");
@@ -13127,7 +13103,7 @@ var GridComponent = (0, import_react61.forwardRef)(
     );
   }
 );
-GridComponent.displayName = "Grid";
+GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13192,7 +13168,7 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
     );
   }
 );
-InputClickToCopy.displayName = "InputClickToCopy";
+InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 var import_styled_components76 = __toESM(require("styled-components"));
@@ -13301,7 +13277,7 @@ var KeyboardShortcut = ({
     ]
   }
 );
-KeyboardShortcut.displayName = "KeyboardShortcut";
+KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 var import_type_guards44 = require("@wistia/type-guards");
@@ -13320,7 +13296,7 @@ var ListItem = ({ children }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(ListItemComponent, { children });
 };
-ListItem.displayName = "ListItem";
+ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
@@ -13459,7 +13435,7 @@ var List = ({
   }
   return null;
 };
-List.displayName = "List";
+List.displayName = "List_UI";
 
 // src/components/Menu/Menu.tsx
 var import_react64 = require("react");
@@ -13624,8 +13600,8 @@ var Menu = (0, import_react64.forwardRef)(
     ) });
   }
 );
-Menu.displayName = "Menu";
-Menu.displayName = "Menu";
+Menu.displayName = "Menu_UI";
+Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
 var import_styled_components80 = __toESM(require("styled-components"));
@@ -13652,7 +13628,7 @@ var MenuLabel = ({ children, ...props }) => {
     }
   );
 };
-MenuLabel.displayName = "MenuLabel";
+MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 var import_react66 = require("react");
@@ -13777,7 +13753,7 @@ var MenuItemButton = (0, import_react65.forwardRef)(({ children, appearance, com
     }
   );
 });
-MenuItemButton.displayName = "MenuItemButton";
+MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 var import_styled_components82 = __toESM(require("styled-components"));
@@ -13864,7 +13840,7 @@ var SubMenu = ({
     /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
-SubMenu.displayName = "SubMenu";
+SubMenu.displayName = "SubMenu_UI";
 
 // src/components/Menu/MenuItem.tsx
 var import_react67 = require("react");
@@ -13889,7 +13865,7 @@ var MenuItem = (0, import_react67.forwardRef)(
     );
   }
 );
-MenuItem.displayName = "MenuItem";
+MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
@@ -13897,7 +13873,7 @@ var import_jsx_runtime273 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
 };
-MenuRadioGroup.displayName = "MenuRadioGroup";
+MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
@@ -13931,7 +13907,7 @@ var RadioMenuItem = ({
     }
   );
 };
-RadioMenuItem.displayName = "RadioMenuItem";
+RadioMenuItem.displayName = "RadioMenuItem_UI";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
@@ -14016,7 +13992,7 @@ var CheckboxMenuItem = ({
     }
   );
 };
-CheckboxMenuItem.displayName = "CheckboxMenuItem";
+CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 
 // src/components/Menu/FilterMenu.tsx
 var import_react68 = require("react");
@@ -14118,7 +14094,7 @@ var FilterMenu = (0, import_react68.forwardRef)(
     );
   }
 );
-FilterMenu.displayName = "FilterMenu";
+FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/Modal/Modal.tsx
 var import_react71 = require("react");
@@ -14447,7 +14423,7 @@ var Modal = (0, import_react71.forwardRef)(
     );
   }
 );
-Modal.displayName = "Modal";
+Modal.displayName = "Modal_UI";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover5 = require("@radix-ui/react-popover");
@@ -14537,7 +14513,7 @@ var PopoverArrow = ({ isAnimated }) => {
     }
   ) });
 };
-PopoverArrow.displayName = "PopoverArrow";
+PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -14606,7 +14582,7 @@ var Popover2 = ({
     ) })
   ] });
 };
-Popover2.displayName = "Popover";
+Popover2.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components91 = __toESM(require("styled-components"));
@@ -14685,7 +14661,7 @@ var ProgressBar = ({
     (0, import_type_guards52.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
-ProgressBar.displayName = "ProgressBar";
+ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
 var import_react72 = require("react");
@@ -14860,7 +14836,7 @@ var Radio = (0, import_react72.forwardRef)(
     );
   }
 );
-Radio.displayName = "Radio";
+Radio.displayName = "Radio_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_react74 = require("react");
@@ -15024,7 +15000,7 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
     );
   }
 );
-RadioCardRoot.displayName = "RadioCardRoot";
+RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components95 = __toESM(require("styled-components"));
@@ -15078,7 +15054,7 @@ var RadioCardIndicator = import_styled_components94.default.div`
     --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-RadioCardIndicator.displayName = "RadioCardIndicator";
+RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_jsx_runtime286 = require("react/jsx-runtime");
@@ -15126,7 +15102,7 @@ var RadioCardDefaultLayout = ({
     ] })
   ] });
 };
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -15150,7 +15126,7 @@ var RadioCard = (0, import_react74.forwardRef)(
     );
   }
 );
-RadioCard.displayName = "RadioCard";
+RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 var import_react75 = require("react");
@@ -15178,7 +15154,7 @@ var RadioCardImage = (0, import_react75.forwardRef)(
     );
   }
 );
-RadioCardImage.displayName = "RadioCardImage";
+RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react78 = require("react");
@@ -15315,7 +15291,7 @@ var SegmentedControl = (0, import_react78.forwardRef)(
     );
   }
 );
-SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react79 = require("react");
@@ -15449,7 +15425,7 @@ var SegmentedControlItem = (0, import_react79.forwardRef)(
     );
   }
 );
-SegmentedControlItem.displayName = "SegmentedControlItem";
+SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
@@ -15563,7 +15539,7 @@ var Select = (0, import_react80.forwardRef)(
     );
   }
 );
-Select.displayName = "Select";
+Select.displayName = "Select_UI";
 
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
@@ -15622,7 +15598,7 @@ var SelectOption = (0, import_react81.forwardRef)(
     );
   }
 );
-SelectOption.displayName = "SelectOption";
+SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
@@ -15770,7 +15746,7 @@ var Slider = ({
     }
   );
 };
-Slider.displayName = "Slider";
+Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -15931,7 +15907,7 @@ var Tabs = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(SelectedItemStyleProvider, { children }) }) });
 };
-Tabs.displayName = "Tabs";
+Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 var import_react_tabs2 = require("@radix-ui/react-tabs");
@@ -15939,7 +15915,7 @@ var import_jsx_runtime304 = require("react/jsx-runtime");
 var TabsContent = ({ children, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_tabs2.Content, { value, children });
 };
-TabsContent.displayName = "TabsContent";
+TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
@@ -15991,7 +15967,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
     }
   );
 };
-TabsList.displayName = "TabsList";
+TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react86 = require("react");
@@ -16058,7 +16034,7 @@ var TabsTrigger = (0, import_react86.forwardRef)(
     );
   }
 );
-TabsTrigger.displayName = "TabsTrigger";
+TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components112 = __toESM(require("styled-components"));
@@ -16094,7 +16070,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { children: label })
   ] });
 };
-ThumbnailBadge.displayName = "ThumbnailBadge";
+ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react87 = require("react");
@@ -16537,7 +16513,7 @@ var Thumbnail = (0, import_react87.forwardRef)(
     );
   }
 );
-Thumbnail.displayName = "Thumbnail";
+Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react88 = __toESM(require("react"));
@@ -16771,7 +16747,7 @@ var WistiaLogo = ({
   );
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("a", { href, children: Logo }) : Logo;
 };
-WistiaLogo.displayName = "WistiaLogo";
+WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/InputPassword/InputPassword.tsx
 var import_styled_components118 = __toESM(require("styled-components"));
@@ -16818,7 +16794,7 @@ var InputPassword = (0, import_react89.forwardRef)(
     );
   }
 );
-InputPassword.displayName = "InputPassword";
+InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
 var import_react90 = require("react");