@wistia/ui 0.13.9-beta.412620d7.ab720f6 → 0.13.9

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.9-beta.412620d7.ab720f6
+ * @license @wistia/ui v0.13.9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -148,7 +148,6 @@ __export(index_exports, {
   ValueNameOrHexCode: () => ValueNameOrHexCode,
   ValueSwatch: () => ValueSwatch,
   WistiaLogo: () => WistiaLogo,
-  calculateContrast: () => calculateContrast,
   colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   dateTime: () => dateTime,
@@ -9762,16 +9761,6 @@ 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;
@@ -9794,15 +9783,13 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
   return { newSearchLow: searchLow, newSearchHigh: midValue };
 };
 var getAccessibleColorByValueChannelChange = ({
-  originalColor,
+  originalHsv,
   colorForComparison,
   minContrast,
   maxIterations = 50,
   direction,
-  opacityForContrastCalculation,
-  shouldConvertToHex = true
+  opacityForContrastCalculation
 }) => {
-  const originalHsv = convertToHsv(originalColor);
   const searchingBrighter = direction === "brighter";
   const lowValue = searchingBrighter ? originalHsv.v : 0;
   const highValue = searchingBrighter ? 1 : originalHsv.v;
@@ -9813,11 +9800,10 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = calculateContrast({
-    backgroundColor: shouldConvertToHex ? (0, import_fn3.formatHex)(extremeVariant) : extremeVariant,
-    foregroundColor: colorForComparison,
-    backgroundOpacity: opacityForContrastCalculation
-  });
+  const extremeContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9833,11 +9819,10 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = calculateContrast({
-      backgroundColor: shouldConvertToHex ? (0, import_fn3.formatHex)(candidateHsv) : candidateHsv,
-      foregroundColor: colorForComparison,
-      backgroundOpacity: opacityForContrastCalculation
-    });
+    const contrast = (0, import_fn3.wcagContrast)(
+      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
+      colorForComparison
+    );
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9857,7 +9842,7 @@ var getAccessibleColorByValueChannelChange = ({
   }
   return bestSoFar;
 };
-var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalColor) => {
+var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalHsv) => {
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   if (!brighterOption && !darkerOption) {
     return null;
@@ -9868,8 +9853,8 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalC
   if (!darkerOption && brighterOption != null) {
     return brighterOption;
   }
-  const brighterDifference = brighterOption === null ? Infinity : hsvDifference(originalColor, brighterOption);
-  const darkerDifference = darkerOption === null ? Infinity : hsvDifference(originalColor, darkerOption);
+  const brighterDifference = brighterOption === null ? Infinity : hsvDifference(originalHsv, brighterOption);
+  const darkerDifference = darkerOption === null ? Infinity : hsvDifference(originalHsv, darkerOption);
   if (brighterDifference <= darkerDifference && brighterOption != null) {
     return brighterOption;
   }
@@ -9879,13 +9864,12 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalC
   throw new Error("Unable to determine the best accessible color variant");
 };
 var getAccessibleColorBySaturationAndValueChange = ({
-  originalColor,
+  originalHsv,
   colorForComparison,
   minContrast,
   direction,
   opacityForContrastCalculation
 }) => {
-  const originalHsv = convertToHsv(originalColor);
   const hsvDifference = (0, import_fn3.differenceEuclidean)("hsv");
   const maxIterations = 50;
   let lowStep = 0;
@@ -9911,11 +9895,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return calculateContrast({
-      backgroundColor: (0, import_fn3.formatHex)(hsv),
-      foregroundColor: colorForComparison,
-      backgroundOpacity: opacityForContrastCalculation
-    });
+    return (0, import_fn3.wcagContrast)(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9944,7 +9924,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   return bestCandidate;
 };
 var getAccessibleColorInDirection = ({
-  originalColor,
+  originalHsv,
   colorForComparison,
   minContrast,
   maxIterations = 50,
@@ -9952,7 +9932,7 @@ var getAccessibleColorInDirection = ({
   opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9963,7 +9943,7 @@ var getAccessibleColorInDirection = ({
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     direction,
@@ -9971,23 +9951,21 @@ var getAccessibleColorInDirection = ({
   });
 };
 var getAccessibleColor = ({
-  originalColor,
+  originalHsv,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50,
   opacityForContrastCalculation
 }) => {
-  const originalColorAsHsv = convertToHsv(originalColor);
-  const originalContrast = calculateContrast({
-    backgroundColor: (0, import_fn3.formatHex)(originalColorAsHsv),
-    foregroundColor: colorForComparison,
-    backgroundOpacity: opacityForContrastCalculation
-  });
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
-    return convertToHsv(originalColor);
+    return originalHsv;
   }
   const brighterOption = getAccessibleColorInDirection({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9995,45 +9973,43 @@ var getAccessibleColor = ({
     opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     maxIterations,
     direction: "darker",
     opacityForContrastCalculation
   });
-  const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalColor);
+  const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalHsv);
   if (result == null) {
     throw new Error(
-      `Unable to get accessible derivative for ${(0, import_fn3.formatHex)(originalColor)} at minimum contrast ratio ${minContrast}`
+      `Unable to get accessible derivative for ${(0, import_fn3.formatHex)(originalHsv)} at minimum contrast ratio ${minContrast}`
     );
   }
   return result;
 };
 var hasAccessibleDerivatives = ({
-  originalColor,
+  originalHsv,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   opacityForContrastCalculation
 }) => {
-  const originalColorAsHsv = convertToHsv(originalColor);
-  const originalContrast = calculateContrast({
-    backgroundColor: (0, import_fn3.formatHex)(originalColorAsHsv),
-    foregroundColor: colorForComparison,
-    backgroundOpacity: opacityForContrastCalculation
-  });
+  const originalContrast = (0, import_fn3.wcagContrast)(
+    compositeOverWhite(originalHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     direction: "brighter",
     opacityForContrastCalculation
   });
   const darkerOption = getAccessibleColorInDirection({
-    originalColor,
+    originalHsv,
     colorForComparison,
     minContrast,
     direction: "darker",
@@ -10057,28 +10033,27 @@ 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)(
-    (originalColor) => getAccessibleColor({
-      originalColor,
+    (originalHsv) => getAccessibleColor({
+      originalHsv,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv)) : nonDerivedValueAsHsv;
-  const currentContrastRatio = calculateContrast({
-    backgroundColor: valueAsHex,
-    foregroundColor: colorForComparison,
-    backgroundOpacity: opacityForContrastCalculation
-  });
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
+  const currentContrastRatio = (0, import_fn4.wcagContrast)(
+    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
+    colorForComparison
+  );
   const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
     return hasAccessibleDerivatives({
-      originalColor: valueAsHex,
+      originalHsv: valueAsHsv,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     });
-  }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
+  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
   const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
     setNonDerivedValueAsHsv(nonDerivedValue);
   }, []);
@@ -10102,21 +10077,15 @@ var ColorPickerProvider = ({
   const setShouldEnforceMinContrastWrapped = (0, import_react41.useCallback)(
     (newShouldEnforceMinContrast) => {
       setShouldEnforceMinContrast(newShouldEnforceMinContrast);
-      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHex) : nonDerivedValueAsHsv;
+      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,
-      nonDerivedValueAsHsv,
-      valueAsHex,
-      valueAsHsv
-    ]
+    [changeValueSmoothly, getAccessibleDerivativeColor, nonDerivedValueAsHsv, valueAsHsv]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv))) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
+  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
   (0, import_react41.useEffect)(() => {
     if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
       onValueChange(whatValuePropShouldBe);
@@ -10747,9 +10716,6 @@ 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;
@@ -10769,7 +10735,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          floorToTenth(currentContrastRatio).toFixed(1),
+          currentContrastRatio.toFixed(2),
           ":1"
         ]
       }
@@ -11581,13 +11547,11 @@ var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorFor
     const saturationChanel = x / (width - 1);
     const initialValueChannelForSearch = limit === "upper" ? 0 : 1;
     const colorForXAsHsv = getAccessibleColorByValueChannelChange({
-      originalColor: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
+      originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
       colorForComparison,
       minContrast: minimumContrastRatio,
       direction: limit === "upper" ? "brighter" : "darker",
-      opacityForContrastCalculation,
-      // We set shouldConvertToHex to false to make the curve smoother.
-      shouldConvertToHex: false
+      opacityForContrastCalculation
     });
     if (colorForXAsHsv != null) {
       const point = {
@@ -17012,7 +16976,6 @@ var ContextMenu = ({
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
-  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,