@wistia/ui 0.13.7 → 0.13.8-beta.3631de1a.e2e0ac7

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.7
+ * @license @wistia/ui v0.13.8-beta.3631de1a.e2e0ac7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -148,6 +148,7 @@ __export(index_exports, {
   ValueNameOrHexCode: () => ValueNameOrHexCode,
   ValueSwatch: () => ValueSwatch,
   WistiaLogo: () => WistiaLogo,
+  calculateContrast: () => calculateContrast,
   colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   dateTime: () => dateTime,
@@ -1453,8 +1454,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;
 `;
@@ -9760,6 +9762,16 @@ var compositeOverWhite = (color, alpha = 1) => {
     b: compositeChannel(colorAsRgb.b)
   };
 };
+var calculateContrast = ({
+  backgroundColor,
+  foregroundColor = DEFAULT_COLOR_FOR_COMPARISON,
+  backgroundOpacity = DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION
+}) => {
+  const backgroundColorAsRgb = convertToRgb(backgroundColor);
+  const foregroundColorAsRgb = convertToRgb(foregroundColor);
+  const compositeBackground = compositeOverWhite(backgroundColorAsRgb, backgroundOpacity);
+  return (0, import_fn3.wcagContrast)(compositeBackground, foregroundColorAsRgb);
+};
 var snapValueToEdges = (value) => {
   if (value > 1 - VALUE_CHANNEL_SNAP_EPSILON) {
     return 1;
@@ -9782,13 +9794,15 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
   return { newSearchLow: searchLow, newSearchHigh: midValue };
 };
 var getAccessibleColorByValueChannelChange = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   maxIterations = 50,
   direction,
-  opacityForContrastCalculation
+  opacityForContrastCalculation,
+  shouldConvertToHex = true
 }) => {
+  const originalHsv = convertToHsv(originalColor);
   const searchingBrighter = direction === "brighter";
   const lowValue = searchingBrighter ? originalHsv.v : 0;
   const highValue = searchingBrighter ? 1 : originalHsv.v;
@@ -9799,10 +9813,11 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const extremeContrast = calculateContrast({
+    backgroundColor: shouldConvertToHex ? (0, import_fn3.formatHex)(extremeVariant) : extremeVariant,
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9818,10 +9833,11 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(
-      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
-      colorForComparison
-    );
+    const contrast = calculateContrast({
+      backgroundColor: shouldConvertToHex ? (0, import_fn3.formatHex)(candidateHsv) : candidateHsv,
+      foregroundColor: colorForComparison,
+      backgroundOpacity: opacityForContrastCalculation
+    });
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9841,7 +9857,7 @@ var getAccessibleColorByValueChannelChange = ({
   }
   return bestSoFar;
 };
-var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalHsv) => {
+var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalColor) => {
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   if (!brighterOption && !darkerOption) {
     return null;
@@ -9852,8 +9868,8 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
   if (!darkerOption && brighterOption != null) {
     return brighterOption;
   }
-  const brighterDifference = brighterOption === null ? Infinity : hsvDifference(originalHsv, brighterOption);
-  const darkerDifference = darkerOption === null ? Infinity : hsvDifference(originalHsv, darkerOption);
+  const brighterDifference = brighterOption === null ? Infinity : hsvDifference(originalColor, brighterOption);
+  const darkerDifference = darkerOption === null ? Infinity : hsvDifference(originalColor, darkerOption);
   if (brighterDifference <= darkerDifference && brighterOption != null) {
     return brighterOption;
   }
@@ -9863,12 +9879,13 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
   throw new Error("Unable to determine the best accessible color variant");
 };
 var getAccessibleColorBySaturationAndValueChange = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   direction,
   opacityForContrastCalculation
 }) => {
+  const originalHsv = convertToHsv(originalColor);
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   const maxIterations = 50;
   let lowStep = 0;
@@ -9894,7 +9911,11 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
+    return calculateContrast({
+      backgroundColor: (0, import_fn3.formatHex)(hsv),
+      foregroundColor: colorForComparison,
+      backgroundOpacity: opacityForContrastCalculation
+    });
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9923,7 +9944,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   return bestCandidate;
 };
 var getAccessibleColorInDirection = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   maxIterations = 50,
@@ -9931,7 +9952,7 @@ var getAccessibleColorInDirection = ({
   opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9942,7 +9963,7 @@ var getAccessibleColorInDirection = ({
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction,
@@ -9950,21 +9971,23 @@ var getAccessibleColorInDirection = ({
   });
 };
 var getAccessibleColor = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50,
   opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalColorAsHsv = convertToHsv(originalColor);
+  const originalContrast = calculateContrast({
+    backgroundColor: (0, import_fn3.formatHex)(originalColorAsHsv),
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   if (originalContrast >= minContrast) {
-    return originalHsv;
+    return convertToHsv(originalColor);
   }
   const brighterOption = getAccessibleColorInDirection({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9972,43 +9995,45 @@ var getAccessibleColor = ({
     opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
     direction: "darker",
     opacityForContrastCalculation
   });
-  const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalHsv);
+  const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalColor);
   if (result == null) {
     throw new Error(
-      `Unable to get accessible derivative for ${(0, import_fn3.formatHex)(originalHsv)} at minimum contrast ratio ${minContrast}`
+      `Unable to get accessible derivative for ${(0, import_fn3.formatHex)(originalColor)} at minimum contrast ratio ${minContrast}`
     );
   }
   return result;
 };
 var hasAccessibleDerivatives = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   opacityForContrastCalculation
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalColorAsHsv = convertToHsv(originalColor);
+  const originalContrast = calculateContrast({
+    backgroundColor: (0, import_fn3.formatHex)(originalColorAsHsv),
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction: "brighter",
     opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction: "darker",
@@ -10032,27 +10057,28 @@ var ColorPickerProvider = ({
   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,
+    (originalColor) => getAccessibleColor({
+      originalColor,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
-  const currentContrastRatio = (0, import_fn4.wcagContrast)(
-    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv)) : nonDerivedValueAsHsv;
+  const currentContrastRatio = calculateContrast({
+    backgroundColor: valueAsHex,
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
     return hasAccessibleDerivatives({
-      originalHsv: valueAsHsv,
+      originalColor: valueAsHex,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     });
-  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
+  }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
   const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
     setNonDerivedValueAsHsv(nonDerivedValue);
   }, []);
@@ -10076,15 +10102,21 @@ var ColorPickerProvider = ({
   const setShouldEnforceMinContrastWrapped = (0, import_react41.useCallback)(
     (newShouldEnforceMinContrast) => {
       setShouldEnforceMinContrast(newShouldEnforceMinContrast);
-      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHsv) : nonDerivedValueAsHsv;
+      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHex) : nonDerivedValueAsHsv;
       const currentHsv = valueAsHsv;
       if (currentHsv.h !== newColorAsHsv.h || currentHsv.s !== newColorAsHsv.s || currentHsv.v !== newColorAsHsv.v) {
         changeValueSmoothly(newColorAsHsv);
       }
     },
-    [changeValueSmoothly, getAccessibleDerivativeColor, nonDerivedValueAsHsv, valueAsHsv]
+    [
+      changeValueSmoothly,
+      getAccessibleDerivativeColor,
+      nonDerivedValueAsHsv,
+      valueAsHex,
+      valueAsHsv
+    ]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
+  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv))) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
   (0, import_react41.useEffect)(() => {
     if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
       onValueChange(whatValuePropShouldBe);
@@ -10715,6 +10747,9 @@ var Container6 = import_styled_components57.default.div`
   justify-content: end;
   align-items: center;
 `;
+var floorToTenth = (value) => {
+  return Math.floor(value * 10) / 10;
+};
 var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
@@ -10734,7 +10769,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          currentContrastRatio.toFixed(2),
+          floorToTenth(currentContrastRatio).toFixed(1),
           ":1"
         ]
       }
@@ -11546,11 +11581,13 @@ var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorFor
     const saturationChanel = x / (width - 1);
     const initialValueChannelForSearch = limit === "upper" ? 0 : 1;
     const colorForXAsHsv = getAccessibleColorByValueChannelChange({
-      originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
+      originalColor: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
       colorForComparison,
       minContrast: minimumContrastRatio,
       direction: limit === "upper" ? "brighter" : "darker",
-      opacityForContrastCalculation
+      opacityForContrastCalculation,
+      // We set shouldConvertToHex to false to make the curve smoother.
+      shouldConvertToHex: false
     });
     if (colorForXAsHsv != null) {
       const point = {
@@ -14523,6 +14560,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);
@@ -16970,6 +17008,7 @@ var ContextMenu = ({
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
+  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,