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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.8
+ * @license @wistia/ui v0.13.9-beta.412620d7.ab720f6
  *
  * 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,
@@ -9761,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;
@@ -9783,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;
@@ -9800,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;
   }
@@ -9819,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;
     }
@@ -9842,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;
@@ -9853,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;
   }
@@ -9864,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;
@@ -9895,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) {
@@ -9924,7 +9944,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   return bestCandidate;
 };
 var getAccessibleColorInDirection = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   maxIterations = 50,
@@ -9932,7 +9952,7 @@ var getAccessibleColorInDirection = ({
   opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9943,7 +9963,7 @@ var getAccessibleColorInDirection = ({
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction,
@@ -9951,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,
@@ -9973,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",
@@ -10033,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);
   }, []);
@@ -10077,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);
@@ -10716,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;
@@ -10735,7 +10769,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          currentContrastRatio.toFixed(2),
+          floorToTenth(currentContrastRatio).toFixed(1),
           ":1"
         ]
       }
@@ -11547,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 = {
@@ -13047,49 +13083,52 @@ var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime262 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT5 = "div";
+var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
+  if (minChildWidth === "auto" && maxColumns === "auto") {
+    return import_styled_components74.css`
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    `;
+  }
+  const gridMode = expandItems ? "auto-fit" : "auto-fill";
+  const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
+  if (maxColumns === "auto") {
+    return import_styled_components74.css`
+      grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
+    `;
+  }
+  return import_styled_components74.css`
+    /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
+    --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
+    --wui-grid-max-column-width: calc(
+      (100% - var(--wui-grid-total-column-gap-width)) / ${maxColumns}
+    );
+
+    grid-template-columns: repeat(
+      ${gridMode},
+      minmax(max(${minChildWidthValue}px, var(--wui-grid-max-column-width)), 1fr)
+    );
+  `;
+};
 var StyledGrid = import_styled_components74.default.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
-  --wui-grid-min-column-size: ${({ $minChildWidth }) => $minChildWidth === "auto" ? "0" : `${$minChildWidth}px`};
-  --wui-grid-max-columns: ${({ $maxColumns }) => $maxColumns === "auto" ? "infinity" : $maxColumns};
-  --wui-grid-column-gap-count: calc(var(--wui-grid-max-columns) - 1);
-  --wui-grid-total-column-gap-width: calc(
-    var(--wui-grid-column-gap-count) * var(--wui-grid-column-gap)
-  );
-  --wui-grid-max-column-width: calc(
-    (100% - var(--wui-grid-total-column-gap-width)) / var(--wui-grid-max-columns)
-  );
 
   display: grid;
   gap: var(--wui-grid-column-gap) var(--wui-grid-row-gap);
   width: 100%;
 
-  ${({ $maxColumns, $minChildWidth }) => {
-  if ($maxColumns === "auto" && $minChildWidth === "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns !== "auto" && $minChildWidth === "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(${$maxColumns}, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns === "auto" && $minChildWidth !== "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(${$minChildWidth}px, 1fr));
-      `;
-  }
-  return import_styled_components74.css`
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(max(var(--wui-grid-min-column-size), var(--wui-grid-max-column-width)), 1fr)
-      );
-    `;
-}}
+  ${({ $maxColumns, $minChildWidth, $expandItems }) => getGridTemplateColumns($maxColumns, $minChildWidth, $expandItems)}
 `;
 var GridComponent = (0, import_react61.forwardRef)(
-  ({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", renderAs, ...props }, ref) => {
+  ({
+    children,
+    columns = "auto",
+    minChildWidth = "auto",
+    gap = "space-02",
+    expandItems = false,
+    renderAs,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const { column, row } = (0, import_type_guards40.isRecord)(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
@@ -13099,6 +13138,7 @@ var GridComponent = (0, import_react61.forwardRef)(
       {
         ref,
         $columnGap: column,
+        $expandItems: expandItems,
         $maxColumns: responsiveColumns,
         $minChildWidth: responsiveMinChildWidth,
         $rowGap: row,
@@ -16972,6 +17012,7 @@ var ContextMenu = ({
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
+  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,