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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.6
+ * @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);
@@ -10166,6 +10198,7 @@ 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"));
@@ -10386,7 +10419,8 @@ var Container2 = (0, import_styled_components50.default)(import_react_radio_grou
   user-select: none;
 `;
 var ColorGridOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = (0, import_fn5.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -10483,6 +10517,7 @@ 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");
@@ -10542,7 +10577,8 @@ var Container4 = (0, import_styled_components53.default)(import_react_toggle_gro
   }
 `;
 var ColorListOption = ({ value, name }) => {
-  const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
+  const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
+  const valueAsHex = (0, import_fn6.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
@@ -10614,6 +10650,7 @@ var StyledPopoverContent = (0, import_styled_components54.default)(import_react_
   flex-direction: column;
   max-width: ${COLOR_PICKER_POPOVER_MAX_WIDTH_PX}px;
   overflow: hidden;
+  z-index: var(--wui-zindex-select);
 `;
 var ColorPickerPopoverContent = ({
   children
@@ -10710,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;
@@ -10729,7 +10769,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          currentContrastRatio.toFixed(2),
+          floorToTenth(currentContrastRatio).toFixed(1),
           ":1"
         ]
       }
@@ -10987,7 +11027,7 @@ ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
-var import_fn5 = require("culori/fn");
+var import_fn7 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
@@ -11217,7 +11257,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
       setTextInputValue(newValue);
-      const isValidHexValue = Boolean((0, import_fn5.parseHex)(newValue));
+      const isValidHexValue = Boolean((0, import_fn7.parseHex)(newValue));
       if (!isValidHexValue) {
         return;
       }
@@ -11299,7 +11339,7 @@ var HexColorInput = ({ autoFocus = true }) => {
       event.preventDefault();
       const pastedText = event.clipboardData.getData("text");
       const normalizedValue = normalizeHexInput(pastedText);
-      const isValidHexValue = Boolean((0, import_fn5.parseHex)(normalizedValue));
+      const isValidHexValue = Boolean((0, import_fn7.parseHex)(normalizedValue));
       setTextInputValue(normalizedValue);
       if (!isValidHexValue) {
         return;
@@ -11362,12 +11402,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_fn7 = require("culori/fn");
+var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_fn6 = require("culori/fn");
+var import_fn8 = require("culori/fn");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var Canvas = import_styled_components61.default.canvas`
   display: block;
@@ -11389,7 +11429,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_fn6.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = (0, import_fn8.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11452,7 +11492,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
-      backgroundColor: (0, import_fn7.formatHex)({
+      backgroundColor: (0, import_fn9.formatHex)({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11462,7 +11502,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = (0, import_react50.useMemo)(() => {
-    return { backgroundColor: (0, import_fn7.formatHex)(valueAsHsv) };
+    return { backgroundColor: (0, import_fn9.formatHex)(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
@@ -11541,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 = {
@@ -14518,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);
@@ -16965,6 +17008,7 @@ var ContextMenu = ({
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
+  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,