@wistia/ui 0.13.5-beta.ab523c1c.ae6e767 → 0.13.5

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.5-beta.ab523c1c.ae6e767
+ * @license @wistia/ui v0.13.5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9745,21 +9745,10 @@ 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;
@@ -9786,8 +9775,7 @@ var getAccessibleColorByValueChannelChange = ({
   colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction,
-  opacityForContrastCalculation
+  direction
 }) => {
   const searchingBrighter = direction === "brighter";
   const lowValue = searchingBrighter ? originalHsv.v : 0;
@@ -9799,10 +9787,7 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariant, colorForComparison);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9818,10 +9803,7 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(
-      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
-      colorForComparison
-    );
+    const contrast = (0, import_fn3.wcagContrast)(candidateHsv, colorForComparison);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9866,8 +9848,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
   colorForComparison,
   minContrast,
-  direction,
-  opacityForContrastCalculation
+  direction
 }) => {
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   const maxIterations = 50;
@@ -9894,7 +9875,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
+    return (0, import_fn3.wcagContrast)(hsv, colorForComparison);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9927,16 +9908,14 @@ var getAccessibleColorInDirection = ({
   colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction,
-  opacityForContrastCalculation
+  direction
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
-    direction,
-    opacityForContrastCalculation
+    direction
   });
   if (valueResult !== null) {
     return valueResult;
@@ -9945,21 +9924,16 @@ var getAccessibleColorInDirection = ({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction,
-    opacityForContrastCalculation
+    direction
   });
 };
 var getAccessibleColor = ({
   originalHsv,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
-  maxIterations = 50,
-  opacityForContrastCalculation
+  maxIterations = 50
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
@@ -9968,16 +9942,14 @@ var getAccessibleColor = ({
     colorForComparison,
     minContrast,
     maxIterations,
-    direction: "brighter",
-    opacityForContrastCalculation
+    direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
-    direction: "darker",
-    opacityForContrastCalculation
+    direction: "darker"
   });
   const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalHsv);
   if (result == null) {
@@ -9990,13 +9962,9 @@ var getAccessibleColor = ({
 var hasAccessibleDerivatives = ({
   originalHsv,
   colorForComparison,
-  minContrast = DEFAULT_MIN_CONTRAST,
-  opacityForContrastCalculation
+  minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
   if (originalContrast >= minContrast) {
     return true;
   }
@@ -10004,15 +9972,13 @@ var hasAccessibleDerivatives = ({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction: "brighter",
-    opacityForContrastCalculation
+    direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction: "darker",
-    opacityForContrastCalculation
+    direction: "darker"
   });
   return brighterOption !== null || darkerOption !== null;
 };
@@ -10022,11 +9988,10 @@ var import_jsx_runtime225 = require("react/jsx-runtime");
 var ColorPickerContext = (0, import_react41.createContext)(null);
 var ColorPickerProvider = ({
   children,
-  colorForComparison,
-  minimumContrastRatio,
+  value: valueAsHex,
   onValueChange,
-  opacityForContrastCalculation,
-  value: valueAsHex
+  minimumContrastRatio = DEFAULT_MIN_CONTRAST,
+  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
   const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
@@ -10035,24 +10000,19 @@ var ColorPickerProvider = ({
     (originalHsv) => getAccessibleColor({
       originalHsv,
       colorForComparison,
-      minContrast: minimumContrastRatio,
-      opacityForContrastCalculation
+      minContrast: minimumContrastRatio
     }),
-    [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
+    [minimumContrastRatio, colorForComparison]
   );
   const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
-  const currentContrastRatio = (0, import_fn4.wcagContrast)(
-    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const currentContrastRatio = (0, import_fn4.wcagContrast)(valueAsHsv, colorForComparison);
   const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
     return hasAccessibleDerivatives({
       originalHsv: valueAsHsv,
       colorForComparison,
-      minContrast: minimumContrastRatio,
-      opacityForContrastCalculation
+      minContrast: minimumContrastRatio
     });
-  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
+  }, [valueAsHsv, colorForComparison, minimumContrastRatio]);
   const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
     setNonDerivedValueAsHsv(nonDerivedValue);
   }, []);
@@ -10101,7 +10061,6 @@ var ColorPickerProvider = ({
       nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
-      opacityForContrastCalculation,
       setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10116,7 +10075,6 @@ var ColorPickerProvider = ({
       minimumContrastRatio,
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
-      opacityForContrastCalculation,
       setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10166,7 +10124,6 @@ ColorGrid.displayName = "ColorGrid_UI";
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
 var import_react_radio_group2 = require("@radix-ui/react-radio-group");
-var import_fn5 = require("culori/fn");
 
 // src/components/ColorPicker/ColorSwatch.tsx
 var import_styled_components48 = __toESM(require("styled-components"));
@@ -10387,8 +10344,7 @@ var Container2 = (0, import_styled_components50.default)(import_react_radio_grou
   user-select: none;
 `;
 var ColorGridOption = ({ value, name }) => {
-  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
-  const valueAsHex = (0, import_fn5.formatHex)(valueAsHsv);
+  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -10485,7 +10441,6 @@ ColorListGroup.displayName = "ColorListGroup_UI";
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_fn6 = require("culori/fn");
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
 var import_jsx_runtime232 = require("react/jsx-runtime");
@@ -10545,8 +10500,7 @@ var Container4 = (0, import_styled_components53.default)(import_react_toggle_gro
   }
 `;
 var ColorListOption = ({ value, name }) => {
-  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
-  const valueAsHex = (0, import_fn6.formatHex)(valueAsHsv);
+  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
@@ -10586,7 +10540,6 @@ var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  opacityForContrastCalculation = DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION,
   onValueChange,
   value
 }) => {
@@ -10596,7 +10549,6 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
-      opacityForContrastCalculation,
       value,
       children
     }
@@ -10991,7 +10943,7 @@ ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
-var import_fn7 = require("culori/fn");
+var import_fn5 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
@@ -11221,7 +11173,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
       setTextInputValue(newValue);
-      const isValidHexValue = Boolean((0, import_fn7.parseHex)(newValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(newValue));
       if (!isValidHexValue) {
         return;
       }
@@ -11303,7 +11255,7 @@ var HexColorInput = ({ autoFocus = true }) => {
       event.preventDefault();
       const pastedText = event.clipboardData.getData("text");
       const normalizedValue = normalizeHexInput(pastedText);
-      const isValidHexValue = Boolean((0, import_fn7.parseHex)(normalizedValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(normalizedValue));
       setTextInputValue(normalizedValue);
       if (!isValidHexValue) {
         return;
@@ -11366,12 +11318,12 @@ HexColorInput.displayName = "HexColorInput_UI";
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_fn9 = require("culori/fn");
+var import_fn7 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_fn8 = require("culori/fn");
+var import_fn6 = require("culori/fn");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var Canvas = import_styled_components61.default.canvas`
   display: block;
@@ -11393,7 +11345,7 @@ var HSVHueCanvas = ({ hsv }) => {
     const gradient = ctx.createLinearGradient(0, 0, width, 0);
     for (let i = 0; i <= THREE_SIXTY; i++) {
       const hue = i;
-      const hexColor = (0, import_fn8.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = (0, import_fn6.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11456,7 +11408,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
-      backgroundColor: (0, import_fn9.formatHex)({
+      backgroundColor: (0, import_fn7.formatHex)({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11466,7 +11418,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = (0, import_react50.useMemo)(() => {
-    return { backgroundColor: (0, import_fn9.formatHex)(valueAsHsv) };
+    return { backgroundColor: (0, import_fn7.formatHex)(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
@@ -11539,7 +11491,7 @@ var Canvas2 = import_styled_components63.default.canvas`
   display: block;
   width: 100%;
 `;
-var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit, opacityForContrastCalculation) => {
+var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit) => {
   const contrastPoints = [];
   for (let x = 0; x < width; x += 1) {
     const saturationChanel = x / (width - 1);
@@ -11548,8 +11500,7 @@ var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorFor
       originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
       colorForComparison,
       minContrast: minimumContrastRatio,
-      direction: limit === "upper" ? "brighter" : "darker",
-      opacityForContrastCalculation
+      direction: limit === "upper" ? "brighter" : "darker"
     });
     if (colorForXAsHsv != null) {
       const point = {
@@ -11589,8 +11540,7 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison,
-  opacityForContrastCalculation
+  colorForComparison
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11614,8 +11564,7 @@ var HSVSaturationValueCanvas = ({
         hue,
         minimumContrastRatio,
         colorForComparison,
-        "upper",
-        opacityForContrastCalculation
+        "upper"
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
         width,
@@ -11623,8 +11572,7 @@ var HSVSaturationValueCanvas = ({
         hue,
         minimumContrastRatio,
         colorForComparison,
-        "lower",
-        opacityForContrastCalculation
+        "lower"
       );
       if (minHsvValueChannelCurve.length > 0) {
         drawSmoothCurve(ctx, minHsvValueChannelCurve);
@@ -11633,13 +11581,7 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [
-    hue,
-    shouldShowContrastCurve,
-    minimumContrastRatio,
-    colorForComparison,
-    opacityForContrastCalculation
-  ]);
+  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparison]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11684,15 +11626,14 @@ var SaturationAndValuePicker = ({
   dataTestId
 }) => {
   const {
-    colorForComparison,
+    valueAsHex,
+    onChangeNonDerivedValueAsHsv,
+    valueAsHsv,
     isTransitioning,
     minimumContrastRatio,
-    nonDerivedValueAsHsv,
-    onChangeNonDerivedValueAsHsv,
-    opacityForContrastCalculation,
+    colorForComparison,
     shouldEnforceMinContrast,
-    valueAsHex,
-    valueAsHsv
+    nonDerivedValueAsHsv
   } = useColorPickerState();
   const containerRef = (0, import_react52.useRef)(null);
   const thumbRef = (0, import_react52.useRef)(null);
@@ -11845,7 +11786,6 @@ var SaturationAndValuePicker = ({
               colorForComparison,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
-              opacityForContrastCalculation,
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),