@wistia/ui 0.13.10 → 0.13.11-beta.d63b15d9.edae9b7

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.10
+ * @license @wistia/ui v0.13.11-beta.d63b15d9.edae9b7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -149,6 +149,7 @@ __export(index_exports, {
   ValueNameOrHexCode: () => ValueNameOrHexCode,
   ValueSwatch: () => ValueSwatch,
   WistiaLogo: () => WistiaLogo,
+  calculateContrast: () => calculateContrast,
   colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   dateTime: () => dateTime,
@@ -1675,6 +1676,7 @@ var minutesInHour = 60;
 var halfAnHourInMinutes = 30;
 var hoursInDay = 24;
 var milisecondsInSecond = 1e3;
+var daysInWeek = 7;
 var millisecondsInDay = hoursInDay * minutesInHour * secondsInMinute * milisecondsInSecond;
 
 // src/helpers/dateTime/buildTimeDuration.ts
@@ -1818,7 +1820,7 @@ var dateTimeRounded = (dateTime2, toISOString = true) => {
 
 // src/helpers/dateTime/dateTimeString.ts
 var import_type_guards3 = require("@wistia/type-guards");
-var dateTimeString = (date, { timeZone = defaultTimeZone } = {}) => {
+var dateTimeString = (date, { timeZone = defaultTimeZone, omitYear = false } = {}) => {
   if ((0, import_type_guards3.isNil)(date)) {
     return "";
   }
@@ -1827,11 +1829,15 @@ var dateTimeString = (date, { timeZone = defaultTimeZone } = {}) => {
     return "";
   }
   try {
-    return new Intl.DateTimeFormat(defaultLocales, {
-      dateStyle: "medium",
-      timeStyle: "short",
+    const baseOptions = {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
       timeZone
-    }).format(formattedDate);
+    };
+    const options = omitYear ? baseOptions : { ...baseOptions, year: "numeric" };
+    return formattedDate.toLocaleDateString(defaultLocales, options);
   } catch (error) {
     console.error(error);
     return "";
@@ -1982,13 +1988,12 @@ var differenceInCalendarDays = (dateLeft, dateRight) => {
 };
 
 // src/helpers/dateTime/timeAgoString.ts
-var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date() } = {}) => {
-  if (isInvalidDate(date)) {
-    return "";
-  }
+var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
+  if (isInvalidDate(date)) return "";
   const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
   const minutesAgoRounded = Math.round(minutesAgo);
   const differenceInDays = differenceInCalendarDays(nowAnchor, date);
+  const isSameYear = date.getFullYear() === nowAnchor.getFullYear();
   if (minutesAgo < 0) {
     return dateTimeString(date);
   }
@@ -2002,20 +2007,15 @@ var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date() } = {}) => {
     return `${minutesAgoRounded} minutes ago`;
   }
   if (differenceInDays === 0) {
-    return `Today, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+    return includeTime ? `Today, ${Intl.DateTimeFormat(defaultLocales, { hour: "numeric", minute: "2-digit" }).format(date)}` : "Today";
   }
   if (differenceInDays === 1) {
-    return `Yesterday, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+    return includeTime ? `Yesterday, ${Intl.DateTimeFormat(defaultLocales, { hour: "numeric", minute: "2-digit" }).format(date)}` : "Yesterday";
   }
-  if (date.getFullYear() === nowAnchor.getFullYear()) {
-    return Intl.DateTimeFormat(defaultLocales, {
-      day: "numeric",
-      month: "short",
-      hour: "numeric",
-      minute: "2-digit"
-    }).format(date);
+  if (differenceInDays < daysInWeek && !includeTime) {
+    return `on ${dayOfWeekString(date)}`;
   }
-  return dateTimeString(date);
+  return includeTime ? dateTimeString(date, { omitYear: isSameYear }) : dateOnlyString(date, { omitYear: isSameYear });
 };
 
 // src/helpers/dateTime/timeOnlyString.ts
@@ -9762,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;
@@ -9784,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;
@@ -9801,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;
   }
@@ -9820,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;
     }
@@ -9843,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;
@@ -9854,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;
   }
@@ -9865,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;
@@ -9896,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) {
@@ -9925,7 +9944,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   return bestCandidate;
 };
 var getAccessibleColorInDirection = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   maxIterations = 50,
@@ -9933,7 +9952,7 @@ var getAccessibleColorInDirection = ({
   opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9944,7 +9963,7 @@ var getAccessibleColorInDirection = ({
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction,
@@ -9952,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,
@@ -9974,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",
@@ -10034,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);
   }, []);
@@ -10078,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);
@@ -10717,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;
@@ -10736,7 +10769,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          currentContrastRatio.toFixed(2),
+          floorToTenth(currentContrastRatio).toFixed(1),
           ":1"
         ]
       }
@@ -11548,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 = {
@@ -17005,6 +17040,7 @@ var ContextMenu = ({
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
+  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,