@wistia/ui 0.13.5 → 0.13.6-beta.171ec663.20d8398

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.5
+ * @license @wistia/ui v0.13.6-beta.171ec663.20d8398
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1453,8 +1453,9 @@ var import_styled_components7 = require("styled-components");
 var zIndexTokens = import_styled_components7.css`
   --wui-zindex-under: -1;
   --wui-zindex-backdrop: 500;
-  --wui-zindex-modal: 500;
   --wui-zindex-menu: 500;
+  --wui-zindex-modal: 500;
+  --wui-zindex-popover: 500;
   --wui-zindex-select: 500;
   --wui-zindex-tooltip: 500;
 `;
@@ -9745,10 +9746,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;
@@ -9775,7 +9787,8 @@ var getAccessibleColorByValueChannelChange = ({
   colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const searchingBrighter = direction === "brighter";
   const lowValue = searchingBrighter ? originalHsv.v : 0;
@@ -9787,7 +9800,10 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariant, colorForComparison);
+  const extremeContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9803,7 +9819,10 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(candidateHsv, colorForComparison);
+    const contrast = (0, import_fn3.wcagContrast)(
+      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
+      colorForComparison
+    );
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9848,7 +9867,8 @@ var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
   colorForComparison,
   minContrast,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   const maxIterations = 50;
@@ -9875,7 +9895,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(hsv, colorForComparison);
+    return (0, import_fn3.wcagContrast)(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9908,14 +9928,16 @@ var getAccessibleColorInDirection = ({
   colorForComparison,
   minContrast,
   maxIterations = 50,
-  direction
+  direction,
+  opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
-    direction
+    direction,
+    opacityForContrastCalculation
   });
   if (valueResult !== null) {
     return valueResult;
@@ -9924,16 +9946,21 @@ var getAccessibleColorInDirection = ({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction
+    direction,
+    opacityForContrastCalculation
   });
 };
 var getAccessibleColor = ({
   originalHsv,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
-  maxIterations = 50
+  maxIterations = 50,
+  opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
@@ -9942,14 +9969,16 @@ var getAccessibleColor = ({
     colorForComparison,
     minContrast,
     maxIterations,
-    direction: "brighter"
+    direction: "brighter",
+    opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
-    direction: "darker"
+    direction: "darker",
+    opacityForContrastCalculation
   });
   const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalHsv);
   if (result == null) {
@@ -9962,9 +9991,13 @@ var getAccessibleColor = ({
 var hasAccessibleDerivatives = ({
   originalHsv,
   colorForComparison,
-  minContrast = DEFAULT_MIN_CONTRAST
+  minContrast = DEFAULT_MIN_CONTRAST,
+  opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
     return true;
   }
@@ -9972,13 +10005,15 @@ var hasAccessibleDerivatives = ({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction: "brighter"
+    direction: "brighter",
+    opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
     colorForComparison,
     minContrast,
-    direction: "darker"
+    direction: "darker",
+    opacityForContrastCalculation
   });
   return brighterOption !== null || darkerOption !== null;
 };
@@ -9988,10 +10023,11 @@ var import_jsx_runtime225 = require("react/jsx-runtime");
 var ColorPickerContext = (0, import_react41.createContext)(null);
 var ColorPickerProvider = ({
   children,
-  value: valueAsHex,
+  colorForComparison,
+  minimumContrastRatio,
   onValueChange,
-  minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
+  opacityForContrastCalculation,
+  value: valueAsHex
 }) => {
   const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
@@ -10000,19 +10036,24 @@ var ColorPickerProvider = ({
     (originalHsv) => getAccessibleColor({
       originalHsv,
       colorForComparison,
-      minContrast: minimumContrastRatio
+      minContrast: minimumContrastRatio,
+      opacityForContrastCalculation
     }),
-    [minimumContrastRatio, colorForComparison]
+    [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
   const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
-  const currentContrastRatio = (0, import_fn4.wcagContrast)(valueAsHsv, colorForComparison);
+  const currentContrastRatio = (0, import_fn4.wcagContrast)(
+    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
     return hasAccessibleDerivatives({
       originalHsv: valueAsHsv,
       colorForComparison,
-      minContrast: minimumContrastRatio
+      minContrast: minimumContrastRatio,
+      opacityForContrastCalculation
     });
-  }, [valueAsHsv, colorForComparison, minimumContrastRatio]);
+  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
   const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
     setNonDerivedValueAsHsv(nonDerivedValue);
   }, []);
@@ -10061,6 +10102,7 @@ var ColorPickerProvider = ({
       nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
+      opacityForContrastCalculation,
       setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10075,6 +10117,7 @@ var ColorPickerProvider = ({
       minimumContrastRatio,
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
+      opacityForContrastCalculation,
       setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10540,6 +10583,7 @@ var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
+  opacityForContrastCalculation = DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION,
   onValueChange,
   value
 }) => {
@@ -10549,6 +10593,7 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
+      opacityForContrastCalculation,
       value,
       children
     }
@@ -11491,7 +11536,7 @@ 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, colorForComparison, limit, opacityForContrastCalculation) => {
   const contrastPoints = [];
   for (let x = 0; x < width; x += 1) {
     const saturationChanel = x / (width - 1);
@@ -11500,7 +11545,8 @@ var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorFor
       originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
       colorForComparison,
       minContrast: minimumContrastRatio,
-      direction: limit === "upper" ? "brighter" : "darker"
+      direction: limit === "upper" ? "brighter" : "darker",
+      opacityForContrastCalculation
     });
     if (colorForXAsHsv != null) {
       const point = {
@@ -11540,7 +11586,8 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison
+  colorForComparison,
+  opacityForContrastCalculation
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11564,7 +11611,8 @@ var HSVSaturationValueCanvas = ({
         hue,
         minimumContrastRatio,
         colorForComparison,
-        "upper"
+        "upper",
+        opacityForContrastCalculation
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
         width,
@@ -11572,7 +11620,8 @@ var HSVSaturationValueCanvas = ({
         hue,
         minimumContrastRatio,
         colorForComparison,
-        "lower"
+        "lower",
+        opacityForContrastCalculation
       );
       if (minHsvValueChannelCurve.length > 0) {
         drawSmoothCurve(ctx, minHsvValueChannelCurve);
@@ -11581,7 +11630,13 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparison]);
+  }, [
+    hue,
+    shouldShowContrastCurve,
+    minimumContrastRatio,
+    colorForComparison,
+    opacityForContrastCalculation
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11626,14 +11681,15 @@ var SaturationAndValuePicker = ({
   dataTestId
 }) => {
   const {
-    valueAsHex,
-    onChangeNonDerivedValueAsHsv,
-    valueAsHsv,
+    colorForComparison,
     isTransitioning,
     minimumContrastRatio,
-    colorForComparison,
+    nonDerivedValueAsHsv,
+    onChangeNonDerivedValueAsHsv,
+    opacityForContrastCalculation,
     shouldEnforceMinContrast,
-    nonDerivedValueAsHsv
+    valueAsHex,
+    valueAsHsv
   } = useColorPickerState();
   const containerRef = (0, import_react52.useRef)(null);
   const thumbRef = (0, import_react52.useRef)(null);
@@ -11786,6 +11842,7 @@ var SaturationAndValuePicker = ({
               colorForComparison,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
+              opacityForContrastCalculation,
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
@@ -14462,6 +14519,7 @@ PopoverArrow.displayName = "PopoverArrow_UI";
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
 var StyledContent2 = (0, import_styled_components90.default)(import_react_popover5.Content)`
+  z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && import_styled_components90.css`
       border-radius: var(--wui-border-radius-02);