@wistia/ui 0.14.6 → 0.14.7-beta.4f6ae999.afe4f2f

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.6
+ * @license @wistia/ui v0.14.7-beta.4f6ae999.afe4f2f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7273,7 +7273,10 @@ var StyledLink = import_styled_components20.default.a`
   ${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  font-family: var(--wui-typography-family-default);
+  font-family: var(var(--font-family), --wui-typography-body-2-family);
+  font-size: var(var(--font-size), --wui-typography-body-2-size);
+  font-weight: var(var(--font-weight), --wui-typography-weight-body);
+  line-height: var(var(--line-height), --wui-typography-body-2-line-height);
   color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
@@ -10061,6 +10064,7 @@ var ColorPickerProvider = ({
   value: valueAsHex
 }) => {
   const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react41.useState)(false);
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
   const [valueAsHsv, setValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
   const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = (0, import_react41.useState)(false);
@@ -10133,23 +10137,41 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  const whatValueAsHexShouldBe = (0, import_fn4.formatHex)(valueAsHsv);
-  if (whatValueAsHexShouldBe !== valueAsHex && !isTransitioning) {
-    setValueAsHsv(convertToHsv(valueAsHex));
+  const accessibleHsvFromValueAsHex = getAccessibleDerivativeColor(valueAsHex);
+  const whatValueAsHexShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(accessibleHsvFromValueAsHex) : valueAsHex;
+  const valueAsHsvConvertedToHex = (0, import_fn4.formatHex)(valueAsHsv);
+  if (whatValueAsHexShouldBe !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+    setValueAsHsv(
+      shouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHex) : convertToHsv(valueAsHex)
+    );
     setNonDerivedValueAsHsv(convertToHsv(valueAsHex));
   }
+  (0, import_react41.useEffect)(() => {
+    if (valueAsHex !== valueAsHsvConvertedToHex && !isTransitioning && !isDragging) {
+      onValueChange(whatValueAsHexShouldBe);
+    }
+  }, [
+    isDragging,
+    isTransitioning,
+    onValueChange,
+    valueAsHex,
+    valueAsHsvConvertedToHex,
+    whatValueAsHexShouldBe
+  ]);
   const contextValue = (0, import_react41.useMemo)(
     () => ({
       colorForComparison,
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
       nonDerivedValueAsHsv,
       onChangeNonDerivedValueAsHsv,
       opacityForContrastCalculation,
+      setIsDragging,
       setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
       shouldEnforceMinContrast,
       valueAsHex,
@@ -10160,6 +10182,7 @@ var ColorPickerProvider = ({
       currentContrastRatio,
       getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
+      isDragging,
       isTransitioning,
       minimumContrastRatio,
       nonDerivedValueAsHsv,
@@ -11811,11 +11834,13 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     colorForComparison,
+    isDragging,
     isTransitioning,
     minimumContrastRatio,
     nonDerivedValueAsHsv,
     onChangeNonDerivedValueAsHsv,
     opacityForContrastCalculation,
+    setIsDragging,
     shouldEnforceMinContrast,
     valueAsHex,
     valueAsHsv
@@ -11865,7 +11890,6 @@ var SaturationAndValuePicker = ({
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
   const updateSaturationAndValueFromCoordinates = (0, import_react52.useCallback)(
     (clientX, clientY) => {
       const container = containerRef.current;
@@ -11892,7 +11916,7 @@ var SaturationAndValuePicker = ({
       setIsDragging(true);
       updateSaturationAndValueFromCoordinates(event.clientX, event.clientY);
     },
-    [updateSaturationAndValueFromCoordinates, thumbRef]
+    [setIsDragging, updateSaturationAndValueFromCoordinates]
   );
   const onThumbMouseDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11900,7 +11924,7 @@ var SaturationAndValuePicker = ({
       thumbRef.current?.focus();
       setIsDragging(true);
     },
-    [thumbRef]
+    [setIsDragging]
   );
   const onThumbKeyDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11935,7 +11959,7 @@ var SaturationAndValuePicker = ({
     },
     [isDragging, updateSaturationAndValueFromCoordinates]
   );
-  const onWindowMouseUp = (0, import_react52.useCallback)(() => setIsDragging(false), []);
+  const onWindowMouseUp = (0, import_react52.useCallback)(() => setIsDragging(false), [setIsDragging]);
   (0, import_react52.useEffect)(() => {
     window.addEventListener("mousemove", onWindowMouseMove);
     window.addEventListener("mouseup", onWindowMouseUp);