@wistia/ui 0.13.2-beta.af67f027.2cf4e13 → 0.13.2-beta.ba4f8c71.ec584ed

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.2-beta.af67f027.2cf4e13
+ * @license @wistia/ui v0.13.2-beta.ba4f8c71.ec584ed
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9635,6 +9635,33 @@ var CollapsibleContent = ({ clamp, children }) => {
   ] }) });
 };
 
+// src/components/ColorPicker/color-conversion-utils.ts
+var import_fn = require("culori/fn");
+(0, import_fn.useMode)(import_fn.modeRgb);
+(0, import_fn.useMode)(import_fn.modeHsv);
+var convertToHsv = (color) => {
+  const rgb = (0, import_fn.parseHex)(color);
+  if (rgb == null) {
+    throw new Error(`Invalid hex color value: ${color}`);
+  }
+  return (0, import_fn.convertRgbToHsv)(rgb);
+};
+var convertToLrgb = (color) => {
+  let result;
+  if (typeof color === "string") {
+    const rgb = (0, import_fn.parseHex)(color);
+    if (rgb == null) {
+      throw new Error(`Invalid hex color value: ${color}`);
+    }
+    result = (0, import_fn.convertRgbToLrgb)(rgb);
+  } else {
+    const rgb = (0, import_fn.convertHsvToRgb)(color);
+    result = (0, import_fn.convertRgbToLrgb)(rgb);
+  }
+  return result;
+};
+var convertToRgb = (hsv) => (0, import_fn.convertHsvToRgb)(hsv);
+
 // src/components/ColorPicker/ColorGrid.tsx
 var import_react42 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
@@ -9644,42 +9671,6 @@ var import_react_radio_group = require("@radix-ui/react-radio-group");
 var import_react41 = require("react");
 var import_fn4 = require("culori/fn");
 
-// src/components/ColorPicker/getColorConversions.ts
-var import_fn = require("culori/fn");
-var getColorConversions = (color) => {
-  if (typeof color === "string") {
-    const rgb2 = (0, import_fn.parseHex)(color);
-    if (!rgb2) {
-      return {
-        hex: color,
-        rgb: { r: 0, g: 0, b: 0, mode: "rgb" },
-        hsv: { h: 0, s: 0, v: 0, mode: "hsv" },
-        lrgb: { r: 0, g: 0, b: 0, mode: "lrgb" },
-        isValid: false
-      };
-    }
-    const hsv = (0, import_fn.convertRgbToHsv)(rgb2);
-    const lrgb2 = (0, import_fn.convertRgbToLrgb)(rgb2);
-    return {
-      hex: color,
-      rgb: rgb2,
-      hsv,
-      lrgb: lrgb2,
-      isValid: true
-    };
-  }
-  const rgb = (0, import_fn.convertHsvToRgb)(color);
-  const hex = (0, import_fn.serializeHex)(rgb);
-  const lrgb = (0, import_fn.convertRgbToLrgb)(rgb);
-  return {
-    hex,
-    rgb,
-    hsv: color,
-    lrgb,
-    isValid: true
-  };
-};
-
 // src/components/ColorPicker/transitionBetweenColors.ts
 var import_fn2 = require("culori/fn");
 var transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) => {
@@ -9775,8 +9766,8 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeRgb = (0, import_fn3.convertHsvToRgb)(extremeVariant);
-  const extremeContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(extremeRgb), colorForComparisonAsLrgb);
+  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9792,8 +9783,7 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const candidateRgb = (0, import_fn3.convertHsvToRgb)(candidateHsv);
-    const contrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(candidateRgb), colorForComparisonAsLrgb);
+    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9865,8 +9855,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    const rgb = (0, import_fn3.convertHsvToRgb)(hsv);
-    return (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(rgb), colorForComparisonAsLrgb);
+    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9924,8 +9913,7 @@ var getAccessibleColor = ({
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50
 }) => {
-  const originalRgb = (0, import_fn3.convertHsvToRgb)(originalHsv);
-  const originalContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(originalRgb), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
@@ -9956,8 +9944,7 @@ var hasAccessibleDerivatives = ({
   colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalRgb = (0, import_fn3.convertHsvToRgb)(originalHsv);
-  const originalContrast = (0, import_fn3.wcagContrast)((0, import_fn3.convertRgbToLrgb)(originalRgb), colorForComparisonAsLrgb);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return true;
   }
@@ -9984,8 +9971,8 @@ var createInitialState = ({
   colorForComparisonAsHex,
   minimumContrastRatio
 }) => {
-  const { hsv: valueAsHsv } = getColorConversions(valueAsHex);
-  const { lrgb: colorForComparisonAsLrgb } = getColorConversions(colorForComparisonAsHex);
+  const valueAsHsv = convertToHsv(valueAsHex);
+  const colorForComparisonAsLrgb = convertToLrgb(colorForComparisonAsHex);
   return {
     nonDerivedValueAsHsv: valueAsHsv,
     nonDerivedValueAsHex: valueAsHex,
@@ -10059,18 +10046,11 @@ var ColorPickerProvider = ({
       minimumContrastRatio
     })
   );
-  const {
-    rgb: valueAsRgb,
-    lrgb: valueAsLrgb,
-    isValid: valueIsValid
-  } = getColorConversions(state.valueAsHsv);
-  const { lrgb: colorForComparisonAsLrgb, isValid: colorForComparisonIsValid } = getColorConversions(colorForComparisonAsHex);
-  if (!valueIsValid) {
-    throw new Error(`Invalid color value: ${JSON.stringify(state.valueAsHsv)}`);
-  }
-  if (!colorForComparisonIsValid) {
-    throw new Error(`Invalid comparison color value: ${colorForComparisonAsHex}`);
-  }
+  const valueAsLrgb = (0, import_react41.useMemo)(() => convertToLrgb(state.valueAsHsv), [state.valueAsHsv]);
+  const colorForComparisonAsLrgb = (0, import_react41.useMemo)(
+    () => convertToLrgb(colorForComparisonAsHex),
+    [colorForComparisonAsHex]
+  );
   const currentContrastRatio = (0, import_react41.useMemo)(() => {
     return (0, import_fn4.wcagContrast)(valueAsLrgb, colorForComparisonAsLrgb);
   }, [valueAsLrgb, colorForComparisonAsLrgb]);
@@ -10092,7 +10072,7 @@ var ColorPickerProvider = ({
   const onValueAsHsvChange = (0, import_react41.useCallback)(
     (rawNewValueAsHsv) => {
       const hsvToSet = state.shouldEnforceMinContrast ? getAccessibleDerivativeColor(rawNewValueAsHsv) : rawNewValueAsHsv;
-      const hexToSet = getColorConversions(hsvToSet).hex;
+      const hexToSet = (0, import_fn4.formatHex)(hsvToSet);
       onValueChange(hexToSet);
       dispatch({
         type: "SET_VALUE_AS_HSV",
@@ -10108,7 +10088,7 @@ var ColorPickerProvider = ({
         state.valueAsHsv,
         toHsv,
         (colorForStepAsHsv) => {
-          const hexValue = getColorConversions(colorForStepAsHsv).hex;
+          const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
           dispatch({ type: "SET_VALUE_AS_HSV", payload: { valueAsHsv: colorForStepAsHsv } });
         },
@@ -10139,10 +10119,7 @@ var ColorPickerProvider = ({
     if (valueAsHex === (0, import_fn4.formatHex)(state.valueAsHsv)) {
       return;
     }
-    const { isValid: isNewValueValid, hsv: newValueAsHsv } = getColorConversions(valueAsHex);
-    if (!isNewValueValid) {
-      throw new Error(`Invalid color value: ${valueAsHex}`);
-    }
+    const newValueAsHsv = convertToHsv(valueAsHex);
     dispatch({
       type: "SET_VALUE_AS_HSV",
       payload: { valueAsHsv: newValueAsHsv }
@@ -10151,7 +10128,6 @@ var ColorPickerProvider = ({
   const contextValue = (0, import_react41.useMemo)(
     () => ({
       ...state,
-      valueAsRgb,
       valueAsLrgb,
       currentContrastRatio,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
@@ -10164,7 +10140,6 @@ var ColorPickerProvider = ({
     }),
     [
       state,
-      valueAsRgb,
       valueAsLrgb,
       currentContrastRatio,
       hasAccessibleDerivativesValue,
@@ -10200,13 +10175,7 @@ var ColorGrid = ({ children }) => {
   const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
-      if (value === "") {
-        return;
-      }
-      const { isValid, hsv } = getColorConversions(value);
-      if (!isValid) {
-        throw new Error(`Invalid color value: ${value}`);
-      }
+      const hsv = convertToHsv(value);
       onValueAsHsvChange(hsv);
     },
     [onValueAsHsvChange]
@@ -10220,6 +10189,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
+ColorGrid.displayName = "ColorGrid";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -10438,20 +10408,10 @@ var Container2 = (0, import_styled_components50.default)(import_react_radio_grou
   appearance: none;
   outline: none;
   align-items: center;
-  background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   padding: 0;
   cursor: pointer;
   user-select: none;
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--wui-color-bg-surface-hover);
-  }
-
-  &:focus-visible {
-    background-color: var(--wui-color-bg-surface-secondary-hover);
-  }
 `;
 var ColorGridOption = ({ value, name }) => {
   const { valueAsHex, nonDerivedValueAsHex } = useColorPickerState();
@@ -10482,6 +10442,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
+ColorGridOption.displayName = "ColorGridOption";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
@@ -10500,10 +10461,7 @@ var ColorList = ({ children }) => {
       if (value === "") {
         return;
       }
-      const { isValid, hsv } = getColorConversions(value);
-      if (!isValid) {
-        throw new Error(`Invalid color value: ${value}`);
-      }
+      const hsv = convertToHsv(value);
       onValueAsHsvChange(hsv);
     },
     [onValueAsHsvChange]
@@ -10518,6 +10476,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
+ColorList.displayName = "ColorList";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10547,6 +10506,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
+ColorListGroup.displayName = "ColorListGroup";
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
@@ -10641,13 +10601,11 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
+ColorListOption.displayName = "ColorListOption";
 
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_fn5 = require("culori/fn");
 var import_jsx_runtime234 = require("react/jsx-runtime");
-(0, import_fn5.useMode)(import_fn5.modeRgb);
-(0, import_fn5.useMode)(import_fn5.modeHsv);
 var ColorPicker = ({
   value,
   onValueChange,
@@ -10668,6 +10626,7 @@ var ColorPicker = ({
     }
   ) });
 };
+ColorPicker.displayName = "ColorPicker";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10696,6 +10655,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
@@ -10706,6 +10666,7 @@ var Container5 = import_styled_components55.default.div`
 var ColorPickerSection = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
 };
+ColorPickerSection.displayName = "ColorPickerSection";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
@@ -10718,6 +10679,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
+ValueSwatch.displayName = "ValueSwatch";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10725,6 +10687,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -11048,10 +11011,11 @@ var ContrastControls = () => {
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
+ContrastControls.displayName = "ContrastControls";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
-var import_fn6 = require("culori/fn");
+var import_fn5 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
@@ -11200,10 +11164,7 @@ var Input = (0, import_react47.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react47.useRef)();
-    const ref = (
-      // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
-    );
+    const ref = (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "search" });
@@ -11284,14 +11245,14 @@ var HexColorInput = ({ autoFocus = true }) => {
     (event) => {
       const newValue = (event.target.value || "#").trim().toLocaleLowerCase();
       setTextInputValue(newValue);
-      const isValidHexValue = Boolean((0, import_fn6.parseHex)(newValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(newValue));
       if (!isValidHexValue) {
         return;
       }
       if (newValue.length < SIX_DIGIT_HEX_CODE_LENGTH) {
         return;
       }
-      const newValueAsHsv = getColorConversions(newValue).hsv;
+      const newValueAsHsv = convertToHsv(newValue);
       onValueAsHsvChange(newValueAsHsv);
     },
     [onValueAsHsvChange]
@@ -11332,7 +11293,7 @@ var HexColorInput = ({ autoFocus = true }) => {
       }
       if (key === "ArrowUp" || key === "ArrowDown") {
         event.preventDefault();
-        const { hsv: currentHsv } = getColorConversions(valueAsHex);
+        const currentHsv = convertToHsv(valueAsHex);
         const saturationNudge = 0.02;
         const newSaturation = Math.max(
           0,
@@ -11366,12 +11327,12 @@ var HexColorInput = ({ autoFocus = true }) => {
       event.preventDefault();
       const pastedText = event.clipboardData.getData("text");
       const normalizedValue = normalizeHexInput(pastedText);
-      const isValidHexValue = Boolean((0, import_fn6.parseHex)(normalizedValue));
+      const isValidHexValue = Boolean((0, import_fn5.parseHex)(normalizedValue));
       setTextInputValue(normalizedValue);
       if (!isValidHexValue) {
         return;
       }
-      const newValueAsHsv = getColorConversions(normalizedValue).hsv;
+      const newValueAsHsv = convertToHsv(normalizedValue);
       onValueAsHsvChange(newValueAsHsv);
     },
     [onValueAsHsvChange]
@@ -11423,17 +11384,18 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
+HexColorInput.displayName = "HexColorInput";
 
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_fn8 = require("culori/fn");
+var import_fn7 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_fn7 = require("culori/fn");
+var import_fn6 = require("culori/fn");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var Canvas = import_styled_components61.default.canvas`
   display: block;
@@ -11455,7 +11417,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_fn7.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
+      const hexColor = (0, import_fn6.formatHex)({ h: hue, s: hsv.s, v: hsv.v, mode: "hsv" });
       if (hexColor) {
         gradient.addColorStop(i / THREE_SIXTY, hexColor);
       }
@@ -11518,7 +11480,7 @@ var HueSlider = () => {
   const { nonDerivedValueAsHsv, onValueAsHsvChange, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
-      backgroundColor: (0, import_fn8.formatHex)({
+      backgroundColor: (0, import_fn7.formatHex)({
         h: 0,
         // red
         s: valueAsHsv.s,
@@ -11528,7 +11490,7 @@ var HueSlider = () => {
     };
   }, [valueAsHsv.s, valueAsHsv.v]);
   const thumbInnerStyle = (0, import_react50.useMemo)(() => {
-    return { backgroundColor: (0, import_fn8.formatHex)(valueAsHsv) };
+    return { backgroundColor: (0, import_fn7.formatHex)(valueAsHsv) };
   }, [valueAsHsv]);
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
@@ -11559,6 +11521,7 @@ var HueSlider = () => {
     /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
+HueSlider.displayName = "HueSlider";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
@@ -11567,7 +11530,6 @@ var import_styled_components64 = __toESM(require("styled-components"));
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 var import_react51 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
-var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -11636,7 +11598,7 @@ var drawGradientBackground = (ctx, width, height, hue) => {
     const v = 1 - y / (height - 1);
     for (let x = 0; x < width; x++) {
       const s = x / (width - 1);
-      const rgb = (0, import_fn9.convertHsvToRgb)({ h: hue, s, v });
+      const rgb = convertToRgb({ h: hue, s, v, mode: "hsv" });
       const idx = 4 * (y * width + x);
       data[idx] = rgb.r * TWO_FIFTY_FIVE;
       data[idx + 1] = rgb.g * TWO_FIFTY_FIVE;
@@ -11931,6 +11893,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));