@wistia/ui 0.13.4-beta.15e04cfa.4eadefb → 0.13.4-beta.18c991cc.246633f

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.4-beta.15e04cfa.4eadefb
+ * @license @wistia/ui v0.13.4-beta.18c991cc.246633f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2776,7 +2776,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
     children
   }
 );
-Ellipsis.displayName = "Ellipsis_UI";
+Ellipsis.displayName = "Ellipsis";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components15 = require("styled-components");
@@ -7227,7 +7227,7 @@ var Icon = ({
     }
   );
 };
-Icon.displayName = "Icon_UI";
+Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
@@ -7367,7 +7367,7 @@ var Link = (0, import_react22.forwardRef)(
     return null;
   }
 );
-Link.displayName = "Link_UI";
+Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime197 = require("react/jsx-runtime");
@@ -7509,7 +7509,7 @@ var Button = (0, import_react23.forwardRef)(
     );
   }
 );
-Button.displayName = "Button_UI";
+Button.displayName = "Button";
 
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime198 = require("react/jsx-runtime");
@@ -7649,7 +7649,7 @@ var ActionButton = (0, import_react24.forwardRef)(
     );
   }
 );
-ActionButton.displayName = "ActionButton_UI";
+ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 var import_react25 = require("react");
@@ -7721,7 +7721,7 @@ var Image = ({
     ...props
   }
 );
-Image.displayName = "Image_UI";
+Image.displayName = "Image";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
@@ -7764,7 +7764,7 @@ var ColorSchemeWrapper = ({
     children
   }
 );
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
@@ -7901,7 +7901,7 @@ var Avatar = ({
     }
   );
 };
-Avatar.displayName = "Avatar_UI";
+Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 var import_react26 = require("react");
@@ -7952,7 +7952,7 @@ var Badge = (0, import_react26.forwardRef)(
     );
   }
 );
-Badge.displayName = "Badge_UI";
+Badge.displayName = "Badge";
 
 // src/components/Banner/Banner.tsx
 var import_react31 = require("react");
@@ -8144,7 +8144,7 @@ var BoxComponent = (0, import_react27.forwardRef)(
     );
   }
 );
-BoxComponent.displayName = "Box_UI";
+BoxComponent.displayName = "Box";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
@@ -8283,7 +8283,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
     }
   )
 );
-HeadingComponent.displayName = "Heading_UI";
+HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
@@ -8493,7 +8493,7 @@ var TextComponent = (0, import_react29.forwardRef)(
     );
   }
 );
-TextComponent.displayName = "Text_UI";
+TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
@@ -8573,7 +8573,7 @@ var ButtonGroup = ({
     }
   );
 };
-ButtonGroup.displayName = "ButtonGroup_UI";
+ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react30 = require("react");
@@ -8611,7 +8611,7 @@ var IconButton = (0, import_react30.forwardRef)(
     );
   }
 );
-IconButton.displayName = "IconButton_UI";
+IconButton.displayName = "IconButton";
 
 // src/components/Banner/Banner.tsx
 var import_jsx_runtime208 = require("react/jsx-runtime");
@@ -8787,7 +8787,7 @@ var Banner = ({
     }
   );
 };
-Banner.displayName = "Banner_UI";
+Banner.displayName = "Banner";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react32 = require("react");
@@ -8835,7 +8835,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     )
   ] });
 };
-Breadcrumbs.displayName = "Breadcrumbs_UI";
+Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 var import_styled_components34 = __toESM(require("styled-components"));
@@ -8928,7 +8928,7 @@ var Card = ({
     children
   }
 );
-Card.displayName = "Card_UI";
+Card.displayName = "Card";
 
 // src/components/Center/Center.tsx
 var import_react33 = require("react");
@@ -8959,7 +8959,7 @@ var Center = (0, import_react33.forwardRef)(
     }
   )
 );
-Center.displayName = "Center_UI";
+Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react38 = require("react");
@@ -9026,7 +9026,7 @@ var ScreenReaderOnly = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHidden, { ...props, children: accessibleText });
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
+ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -9124,7 +9124,7 @@ var StackComponent = (0, import_react34.forwardRef)(
     );
   }
 );
-StackComponent.displayName = "Stack_UI";
+StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
@@ -9188,7 +9188,7 @@ var FormGroup = ({
     }
   );
 };
-FormGroup.displayName = "FormGroup_UI";
+FormGroup.displayName = "FormGroup";
 
 // src/components/Form/Form.tsx
 var import_react36 = require("react");
@@ -9335,7 +9335,7 @@ var CheckboxGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormGroup, { ...props, children }) });
 };
-CheckboxGroup.displayName = "CheckboxGroup_UI";
+CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime220 = require("react/jsx-runtime");
@@ -9499,7 +9499,7 @@ var Checkbox = (0, import_react38.forwardRef)(
     ] });
   }
 );
-Checkbox.displayName = "Checkbox_UI";
+Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react39 = require("react");
@@ -9542,7 +9542,7 @@ var ClickRegion = ({ children, targetRef }) => {
     onClick: handleClick
   });
 };
-ClickRegion.displayName = "ClickRegion_UI";
+ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
@@ -9567,7 +9567,7 @@ var Collapsible = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledRoot, { ...controlProps, children });
 };
-Collapsible.displayName = "Collapsible_UI";
+Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react40 = require("react");
@@ -9620,7 +9620,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
     }
   );
 };
-CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
+CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
 
 // src/components/Collapsible/CollapsibleContent.tsx
 var import_styled_components46 = __toESM(require("styled-components"));
@@ -9649,39 +9649,30 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/color-conversion-utils.ts
 var import_fn = require("culori/fn");
-var convertToRgbRaw = (0, import_fn.useMode)(import_fn.modeRgb);
-var convertToHsvRaw = (0, import_fn.useMode)(import_fn.modeHsv);
-(0, import_fn.useMode)(import_fn.modeLrgb);
+(0, import_fn.useMode)(import_fn.modeRgb);
+(0, import_fn.useMode)(import_fn.modeHsv);
 var convertToHsv = (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 = convertToHsvRaw(rgb);
-  }
-  result = convertToHsvRaw(color);
-  if (result == null) {
-    throw new Error(`Invalid color value: ${JSON.stringify(color)}`);
+  const rgb = (0, import_fn.parseHex)(color);
+  if (rgb == null) {
+    throw new Error(`Invalid hex color value: ${color}`);
   }
-  return result;
+  return (0, import_fn.convertRgbToHsv)(rgb);
 };
-var convertToRgb = (color) => {
+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 = convertToRgbRaw(color);
-  }
-  result = convertToRgbRaw(color);
-  if (result == null) {
-    throw new Error(`Invalid color value: ${JSON.stringify(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");
@@ -9772,7 +9763,7 @@ var updateSearchBounds = (searchingBrighter, contrast, minContrast, midValue, se
 };
 var getAccessibleColorByValueChannelChange = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   maxIterations = 50,
   direction
@@ -9787,7 +9778,8 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariant, colorForComparison);
+  const extremeVariantAsLrgb = convertToLrgb(extremeVariant);
+  const extremeContrast = (0, import_fn3.wcagContrast)(extremeVariantAsLrgb, colorForComparisonAsLrgb);
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9803,7 +9795,7 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = (0, import_fn3.wcagContrast)(candidateHsv, colorForComparison);
+    const contrast = (0, import_fn3.wcagContrast)(convertToLrgb(candidateHsv), colorForComparisonAsLrgb);
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9846,7 +9838,7 @@ var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalH
 };
 var getAccessibleColorBySaturationAndValueChange = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   direction
 }) => {
@@ -9875,7 +9867,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return (0, import_fn3.wcagContrast)(hsv, colorForComparison);
+    return (0, import_fn3.wcagContrast)(convertToLrgb(hsv), colorForComparisonAsLrgb);
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9905,14 +9897,14 @@ var getAccessibleColorBySaturationAndValueChange = ({
 };
 var getAccessibleColorInDirection = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast,
   maxIterations = 50,
   direction
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction
@@ -9922,31 +9914,31 @@ var getAccessibleColorInDirection = ({
   }
   return getAccessibleColorBySaturationAndValueChange({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction
   });
 };
 var getAccessibleColor = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return originalHsv;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     maxIterations,
     direction: "darker"
@@ -9961,22 +9953,22 @@ var getAccessibleColor = ({
 };
 var hasAccessibleDerivatives = ({
   originalHsv,
-  colorForComparison,
+  colorForComparisonAsLrgb,
   minContrast = DEFAULT_MIN_CONTRAST
 }) => {
-  const originalContrast = (0, import_fn3.wcagContrast)(originalHsv, colorForComparison);
+  const originalContrast = (0, import_fn3.wcagContrast)(convertToLrgb(originalHsv), colorForComparisonAsLrgb);
   if (originalContrast >= minContrast) {
     return true;
   }
   const brighterOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction: "brighter"
   });
   const darkerOption = getAccessibleColorInDirection({
     originalHsv,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     minContrast,
     direction: "darker"
   });
@@ -9985,100 +9977,190 @@ var hasAccessibleDerivatives = ({
 
 // src/components/ColorPicker/ColorPickerContext.tsx
 var import_jsx_runtime225 = require("react/jsx-runtime");
+var createInitialState = ({
+  valueAsHex,
+  shouldEnforceMinContrast,
+  colorForComparisonAsHex,
+  minimumContrastRatio
+}) => {
+  const valueAsHsv = convertToHsv(valueAsHex);
+  const colorForComparisonAsLrgb = convertToLrgb(colorForComparisonAsHex);
+  return {
+    nonDerivedValueAsHsv: valueAsHsv,
+    nonDerivedValueAsHex: valueAsHex,
+    valueAsHsv,
+    shouldEnforceMinContrast,
+    colorForComparisonAsLrgb,
+    minimumContrastRatio,
+    isTransitioning: false
+  };
+};
+var colorPickerReducer = (state, action) => {
+  switch (action.type) {
+    case "SET_VALUE_AS_HSV":
+      const result = {
+        ...state,
+        ...action.payload
+      };
+      if (action.payload.nonDerivedValueAsHsv != null) {
+        result.nonDerivedValueAsHex = (0, import_fn4.formatHex)(action.payload.nonDerivedValueAsHsv);
+      }
+      return result;
+    case "SET_SHOULD_ENFORCE_MIN_CONTRAST":
+      return {
+        ...state,
+        shouldEnforceMinContrast: action.payload
+      };
+    case "SET_MINIMUM_CONTRAST_RATIO":
+      return {
+        ...state,
+        minimumContrastRatio: action.payload,
+        valueAsHsv: state.shouldEnforceMinContrast ? getAccessibleColor({
+          originalHsv: state.valueAsHsv,
+          colorForComparisonAsLrgb: state.colorForComparisonAsLrgb,
+          minContrast: action.payload
+        }) : state.valueAsHsv
+      };
+    case "SET_COLOR_FOR_COMPARISON":
+      return {
+        ...state,
+        colorForComparisonAsLrgb: action.payload,
+        valueAsHsv: state.shouldEnforceMinContrast ? getAccessibleColor({
+          originalHsv: state.valueAsHsv,
+          colorForComparisonAsLrgb: action.payload,
+          minContrast: state.minimumContrastRatio
+        }) : state.valueAsHsv
+      };
+    case "SET_IS_TRANSITIONING":
+      return {
+        ...state,
+        isTransitioning: action.payload
+      };
+    default:
+      return state;
+  }
+};
 var ColorPickerContext = (0, import_react41.createContext)(null);
 var ColorPickerProvider = ({
   children,
   value: valueAsHex,
   onValueChange,
+  shouldEnforceMinContrast = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
+  colorForComparison: colorForComparisonAsHex = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
-  const [isTransitioning, setIsTransitioning] = (0, import_react41.useState)(false);
-  const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = (0, import_react41.useState)(convertToHsv(valueAsHex));
-  const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = (0, import_react41.useState)(false);
+  const [state, dispatch] = (0, import_react41.useReducer)(
+    colorPickerReducer,
+    createInitialState({
+      valueAsHex,
+      shouldEnforceMinContrast,
+      colorForComparisonAsHex,
+      minimumContrastRatio
+    })
+  );
+  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]);
+  const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
+    return hasAccessibleDerivatives({
+      originalHsv: state.valueAsHsv,
+      colorForComparisonAsLrgb,
+      minContrast: minimumContrastRatio
+    });
+  }, [state.valueAsHsv, colorForComparisonAsLrgb, minimumContrastRatio]);
   const getAccessibleDerivativeColor = (0, import_react41.useCallback)(
     (originalHsv) => getAccessibleColor({
       originalHsv,
-      colorForComparison,
+      colorForComparisonAsLrgb,
       minContrast: minimumContrastRatio
     }),
-    [minimumContrastRatio, colorForComparison]
+    [minimumContrastRatio, colorForComparisonAsLrgb]
+  );
+  const onValueAsHsvChange = (0, import_react41.useCallback)(
+    (rawNewValueAsHsv) => {
+      const hsvToSet = state.shouldEnforceMinContrast ? getAccessibleDerivativeColor(rawNewValueAsHsv) : rawNewValueAsHsv;
+      const hexToSet = (0, import_fn4.formatHex)(hsvToSet);
+      onValueChange(hexToSet);
+      dispatch({
+        type: "SET_VALUE_AS_HSV",
+        payload: { valueAsHsv: hsvToSet, nonDerivedValueAsHsv: rawNewValueAsHsv }
+      });
+    },
+    [getAccessibleDerivativeColor, state.shouldEnforceMinContrast, onValueChange]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
-  const currentContrastRatio = (0, import_fn4.wcagContrast)(valueAsHsv, colorForComparison);
-  const hasAccessibleDerivativesValue = (0, import_react41.useMemo)(() => {
-    return hasAccessibleDerivatives({
-      originalHsv: valueAsHsv,
-      colorForComparison,
-      minContrast: minimumContrastRatio
-    });
-  }, [valueAsHsv, colorForComparison, minimumContrastRatio]);
-  const onChangeNonDerivedValueAsHsv = (0, import_react41.useCallback)((nonDerivedValue) => {
-    setNonDerivedValueAsHsv(nonDerivedValue);
-  }, []);
   const changeValueSmoothly = (0, import_react41.useCallback)(
     (toHsv) => {
-      setIsTransitioning(true);
+      dispatch({ type: "SET_IS_TRANSITIONING", payload: true });
       transitionBetweenColors(
-        valueAsHsv,
+        state.valueAsHsv,
         toHsv,
         (colorForStepAsHsv) => {
           const hexValue = (0, import_fn4.formatHex)(colorForStepAsHsv);
           onValueChange(hexValue);
+          dispatch({ type: "SET_VALUE_AS_HSV", payload: { valueAsHsv: colorForStepAsHsv } });
         },
         () => {
-          setIsTransitioning(false);
+          dispatch({ type: "SET_IS_TRANSITIONING", payload: false });
         }
       );
     },
-    [valueAsHsv, onValueChange]
+    [state.valueAsHsv, onValueChange]
   );
-  const setShouldEnforceMinContrastWrapped = (0, import_react41.useCallback)(
+  const setShouldEnforceMinContrast = (0, import_react41.useCallback)(
     (newShouldEnforceMinContrast) => {
-      setShouldEnforceMinContrast(newShouldEnforceMinContrast);
-      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(valueAsHsv) : nonDerivedValueAsHsv;
-      const currentHsv = valueAsHsv;
+      dispatch({ type: "SET_SHOULD_ENFORCE_MIN_CONTRAST", payload: newShouldEnforceMinContrast });
+      const newColorAsHsv = newShouldEnforceMinContrast ? getAccessibleDerivativeColor(state.valueAsHsv) : state.nonDerivedValueAsHsv;
+      const currentHsv = state.valueAsHsv;
       if (currentHsv.h !== newColorAsHsv.h || currentHsv.s !== newColorAsHsv.s || currentHsv.v !== newColorAsHsv.v) {
         changeValueSmoothly(newColorAsHsv);
       }
     },
-    [changeValueSmoothly, getAccessibleDerivativeColor, nonDerivedValueAsHsv, valueAsHsv]
+    [
+      changeValueSmoothly,
+      getAccessibleDerivativeColor,
+      state.nonDerivedValueAsHsv,
+      state.valueAsHsv
+    ]
   );
-  const whatValuePropShouldBe = shouldEnforceMinContrast ? (0, import_fn4.formatHex)(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : (0, import_fn4.formatHex)(nonDerivedValueAsHsv);
   (0, import_react41.useEffect)(() => {
-    if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
-      onValueChange(whatValuePropShouldBe);
+    if (valueAsHex === (0, import_fn4.formatHex)(state.valueAsHsv)) {
+      return;
     }
-  }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
+    const newValueAsHsv = convertToHsv(valueAsHex);
+    dispatch({
+      type: "SET_VALUE_AS_HSV",
+      payload: { valueAsHsv: newValueAsHsv }
+    });
+  }, [getAccessibleDerivativeColor, state.valueAsHsv, valueAsHex]);
   const contextValue = (0, import_react41.useMemo)(
     () => ({
-      colorForComparison,
+      ...state,
+      valueAsLrgb,
       currentContrastRatio,
-      getAccessibleDerivativeColor,
       hasAccessibleDerivatives: hasAccessibleDerivativesValue,
-      isTransitioning,
-      minimumContrastRatio,
-      nonDerivedValueAsHex: (0, import_fn4.formatHex)(nonDerivedValueAsHsv),
-      nonDerivedValueAsHsv,
-      onChangeNonDerivedValueAsHsv,
-      setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
-      shouldEnforceMinContrast,
       valueAsHex,
-      valueAsHsv
+      colorForComparisonAsHex,
+      minimumContrastRatio,
+      onValueAsHsvChange,
+      setShouldEnforceMinContrast,
+      getAccessibleDerivativeColor
     }),
     [
-      colorForComparison,
+      state,
+      valueAsLrgb,
       currentContrastRatio,
-      getAccessibleDerivativeColor,
       hasAccessibleDerivativesValue,
-      isTransitioning,
-      minimumContrastRatio,
-      nonDerivedValueAsHsv,
-      onChangeNonDerivedValueAsHsv,
-      setShouldEnforceMinContrastWrapped,
-      shouldEnforceMinContrast,
       valueAsHex,
-      valueAsHsv
+      colorForComparisonAsHex,
+      minimumContrastRatio,
+      onValueAsHsvChange,
+      setShouldEnforceMinContrast,
+      getAccessibleDerivativeColor
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ColorPickerContext.Provider, { value: contextValue, children });
@@ -10102,13 +10184,13 @@ var Container = (0, import_styled_components47.default)(import_react_radio_group
   gap: var(--wui-space-02);
 `;
 var ColorGrid = ({ children }) => {
-  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
       const hsv = convertToHsv(value);
-      onChangeNonDerivedValueAsHsv(hsv);
+      onValueAsHsvChange(hsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     Container,
@@ -10119,7 +10201,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
-ColorGrid.displayName = "ColorGrid_UI";
+ColorGrid.displayName = "ColorGrid";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -10329,7 +10411,7 @@ var Tooltip = ({
     }
   );
 };
-Tooltip.displayName = "Tooltip_UI";
+Tooltip.displayName = "Tooltip";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_jsx_runtime229 = require("react/jsx-runtime");
@@ -10372,7 +10454,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
-ColorGridOption.displayName = "ColorGridOption_UI";
+ColorGridOption.displayName = "ColorGridOption";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
@@ -10385,16 +10467,16 @@ var Container3 = (0, import_styled_components51.default)(import_react_toggle_gro
   padding: var(--wui-space-02);
 `;
 var ColorList = ({ children }) => {
-  const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, onValueAsHsvChange } = useColorPickerState();
   const onValueChange = (0, import_react43.useCallback)(
     (value) => {
       if (value === "") {
         return;
       }
       const hsv = convertToHsv(value);
-      onChangeNonDerivedValueAsHsv(hsv);
+      onValueAsHsvChange(hsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
     Container3,
@@ -10406,7 +10488,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
-ColorList.displayName = "ColorList_UI";
+ColorList.displayName = "ColorList";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10436,7 +10518,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
-ColorListGroup.displayName = "ColorListGroup_UI";
+ColorListGroup.displayName = "ColorListGroup";
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
@@ -10531,17 +10613,18 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
-ColorListOption.displayName = "ColorListOption_UI";
+ColorListOption.displayName = "ColorListOption";
 
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react_popover = require("@radix-ui/react-popover");
 var import_jsx_runtime234 = require("react/jsx-runtime");
 var ColorPicker = ({
+  value,
+  onValueChange,
   children,
-  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
+  shouldEnforceMinContrast = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  onValueChange,
-  value
+  colorForComparison = DEFAULT_COLOR_FOR_COMPARISON
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     ColorPickerProvider,
@@ -10549,12 +10632,13 @@ var ColorPicker = ({
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
+      shouldEnforceMinContrast,
       value,
       children
     }
   ) });
 };
-ColorPicker.displayName = "ColorPicker_UI";
+ColorPicker.displayName = "ColorPicker";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10583,7 +10667,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
-ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
@@ -10594,7 +10678,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_UI";
+ColorPickerSection.displayName = "ColorPickerSection";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
@@ -10607,7 +10691,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
-ValueSwatch.displayName = "ValueSwatch_UI";
+ValueSwatch.displayName = "ValueSwatch";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10615,7 +10699,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
-ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -10655,7 +10739,7 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
     );
   }
 );
-ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
@@ -10876,7 +10960,7 @@ var Switch = (0, import_react45.forwardRef)(
     ] });
   }
 );
-Switch.displayName = "Switch_UI";
+Switch.displayName = "Switch";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
 var import_jsx_runtime242 = require("react/jsx-runtime");
@@ -10909,13 +10993,13 @@ var ContrastEnforcerSwitch = () => {
 // src/components/ColorPicker/ContrastPreview.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
 var ContrastPreview = () => {
-  const { valueAsHex, colorForComparison } = useColorPickerState();
+  const { valueAsHex, colorForComparisonAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparisonAsHex }, children: "Aa" })
     }
   );
 };
@@ -10939,7 +11023,7 @@ var ContrastControls = () => {
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
-ContrastControls.displayName = "ContrastControls_UI";
+ContrastControls.displayName = "ContrastControls";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
@@ -11149,7 +11233,7 @@ var Input = (0, import_react47.forwardRef)(
     );
   }
 );
-Input.displayName = "Input_UI";
+Input.displayName = "Input";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
@@ -11166,7 +11250,7 @@ var normalizeHexInput = (input) => {
   return cleaned.slice(0, SIX_DIGIT_HEX_CODE_LENGTH).toLocaleLowerCase();
 };
 var HexColorInput = ({ autoFocus = true }) => {
-  const { valueAsHex, nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+  const { valueAsHex, nonDerivedValueAsHsv, onValueAsHsvChange } = useColorPickerState();
   const inputRef = (0, import_react48.useRef)(null);
   const [textInputValue, setTextInputValue] = (0, import_react48.useState)(valueAsHex);
   const onChangeInputValue = (0, import_react48.useCallback)(
@@ -11181,9 +11265,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(newValue);
-      onChangeNonDerivedValueAsHsv(newValueAsHsv);
+      onValueAsHsvChange(newValueAsHsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   const onCopy = (0, import_react48.useCallback)((event) => {
     const inputElem = inputRef.current;
@@ -11234,7 +11318,7 @@ var HexColorInput = ({ autoFocus = true }) => {
           ...nonDerivedValueAsHsv,
           s: newSaturation
         };
-        onChangeNonDerivedValueAsHsv(newHsv);
+        onValueAsHsvChange(newHsv);
         return;
       }
       if (key.length > 1) {
@@ -11248,7 +11332,7 @@ var HexColorInput = ({ autoFocus = true }) => {
         event.preventDefault();
       }
     },
-    [valueAsHex, onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
+    [valueAsHex, onValueAsHsvChange, nonDerivedValueAsHsv]
   );
   const onPaste = (0, import_react48.useCallback)(
     (event) => {
@@ -11261,9 +11345,9 @@ var HexColorInput = ({ autoFocus = true }) => {
         return;
       }
       const newValueAsHsv = convertToHsv(normalizedValue);
-      onChangeNonDerivedValueAsHsv(newValueAsHsv);
+      onValueAsHsvChange(newValueAsHsv);
     },
-    [onChangeNonDerivedValueAsHsv]
+    [onValueAsHsvChange]
   );
   const selectAllButTheHash = (0, import_react48.useCallback)(() => {
     const inputElem = inputRef.current;
@@ -11312,7 +11396,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
-HexColorInput.displayName = "HexColorInput_UI";
+HexColorInput.displayName = "HexColorInput";
 
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
@@ -11405,7 +11489,7 @@ var ThumbInner = import_styled_components62.default.div`
   }
 `;
 var HueSlider = () => {
-  const { nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv, valueAsHsv } = useColorPickerState();
+  const { nonDerivedValueAsHsv, onValueAsHsvChange, valueAsHsv } = useColorPickerState();
   const containerStyle = (0, import_react50.useMemo)(() => {
     return {
       backgroundColor: (0, import_fn7.formatHex)({
@@ -11423,12 +11507,12 @@ var HueSlider = () => {
   const onHueChange = (0, import_react50.useCallback)(
     (values) => {
       const newHue = values[0] ?? 0;
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         h: newHue
       });
     },
-    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
+    [nonDerivedValueAsHsv, onValueAsHsvChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container7, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
@@ -11449,7 +11533,7 @@ var HueSlider = () => {
     /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
-HueSlider.displayName = "HueSlider_UI";
+HueSlider.displayName = "HueSlider";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
@@ -11491,14 +11575,14 @@ var Canvas2 = import_styled_components63.default.canvas`
   display: block;
   width: 100%;
 `;
-var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparison, limit) => {
+var calculateContrastCurve = (width, height, hue, minimumContrastRatio, colorForComparisonAsLrgb, limit) => {
   const contrastPoints = [];
   for (let x = 0; x < width; x += 1) {
     const saturationChanel = x / (width - 1);
     const initialValueChannelForSearch = limit === "upper" ? 0 : 1;
     const colorForXAsHsv = getAccessibleColorByValueChannelChange({
       originalHsv: { h: hue, s: saturationChanel, v: initialValueChannelForSearch, mode: "hsv" },
-      colorForComparison,
+      colorForComparisonAsLrgb,
       minContrast: minimumContrastRatio,
       direction: limit === "upper" ? "brighter" : "darker"
     });
@@ -11540,7 +11624,7 @@ var HSVSaturationValueCanvas = ({
   hue,
   shouldShowContrastCurve = false,
   minimumContrastRatio = DEFAULT_MIN_CONTRAST,
-  colorForComparison
+  colorForComparisonAsLrgb
 }) => {
   const canvasRef = (0, import_react51.useRef)(null);
   (0, import_react51.useEffect)(() => {
@@ -11555,7 +11639,7 @@ var HSVSaturationValueCanvas = ({
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const { width, height } = canvas;
     drawGradientBackground(ctx, width, height, hue);
-    if (shouldShowContrastCurve && colorForComparison) {
+    if (shouldShowContrastCurve && colorForComparisonAsLrgb) {
       ctx.lineWidth = 1.5;
       ctx.strokeStyle = "white";
       const maxHsvValueChannelCurve = calculateContrastCurve(
@@ -11563,7 +11647,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparison,
+        colorForComparisonAsLrgb,
         "upper"
       );
       const minHsvValueChannelCurve = calculateContrastCurve(
@@ -11571,7 +11655,7 @@ var HSVSaturationValueCanvas = ({
         height,
         hue,
         minimumContrastRatio,
-        colorForComparison,
+        colorForComparisonAsLrgb,
         "lower"
       );
       if (minHsvValueChannelCurve.length > 0) {
@@ -11581,7 +11665,7 @@ var HSVSaturationValueCanvas = ({
         drawSmoothCurve(ctx, maxHsvValueChannelCurve);
       }
     }
-  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparison]);
+  }, [hue, shouldShowContrastCurve, minimumContrastRatio, colorForComparisonAsLrgb]);
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
@@ -11627,25 +11711,39 @@ var SaturationAndValuePicker = ({
 }) => {
   const {
     valueAsHex,
-    onChangeNonDerivedValueAsHsv,
+    onValueAsHsvChange,
     valueAsHsv,
     isTransitioning,
     minimumContrastRatio,
-    colorForComparison,
+    colorForComparisonAsLrgb,
     shouldEnforceMinContrast,
-    nonDerivedValueAsHsv
+    nonDerivedValueAsHsv,
+    getAccessibleDerivativeColor
   } = useColorPickerState();
   const containerRef = (0, import_react52.useRef)(null);
   const thumbRef = (0, import_react52.useRef)(null);
   const uuid = (0, import_react52.useMemo)(() => crypto.randomUUID(), []);
   const instructionsId = `sv-instructions-${uuid}`;
-  const valueAsHexConvertedToHsv = convertToHsv(valueAsHex);
   const thumbPositionHsv = (0, import_react52.useMemo)(() => {
-    if (!isTransitioning) {
+    if (isTransitioning) {
       return valueAsHsv;
     }
-    return valueAsHexConvertedToHsv;
-  }, [isTransitioning, valueAsHexConvertedToHsv, valueAsHsv]);
+    if (!shouldEnforceMinContrast) {
+      return nonDerivedValueAsHsv;
+    }
+    const accessibleHsv = getAccessibleDerivativeColor(nonDerivedValueAsHsv);
+    return {
+      ...nonDerivedValueAsHsv,
+      s: accessibleHsv.s,
+      v: accessibleHsv.v
+    };
+  }, [
+    isTransitioning,
+    shouldEnforceMinContrast,
+    nonDerivedValueAsHsv,
+    valueAsHsv,
+    getAccessibleDerivativeColor
+  ]);
   const [thumbStyle, setThumbStyle] = (0, import_react52.useState)({
     backgroundColor: valueAsHex
   });
@@ -11666,19 +11764,19 @@ var SaturationAndValuePicker = ({
     (channel, delta) => {
       if (channel === "s") {
         const newSaturation = Math.max(0, Math.min(1, nonDerivedValueAsHsv.s + delta));
-        onChangeNonDerivedValueAsHsv({
+        onValueAsHsvChange({
           ...nonDerivedValueAsHsv,
           s: newSaturation
         });
         return;
       }
       const newValue = Math.max(0, Math.min(1, nonDerivedValueAsHsv.v + delta));
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         v: newValue
       });
     },
-    [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
+    [nonDerivedValueAsHsv, onValueAsHsvChange]
   );
   const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
   const updateSaturationAndValueFromCoordinates = (0, import_react52.useCallback)(
@@ -11692,13 +11790,13 @@ var SaturationAndValuePicker = ({
       const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
       const saturation = x;
       const value = 1 - y;
-      onChangeNonDerivedValueAsHsv({
+      onValueAsHsvChange({
         ...nonDerivedValueAsHsv,
         s: saturation,
         v: value
       });
     },
-    [onChangeNonDerivedValueAsHsv, nonDerivedValueAsHsv]
+    [onValueAsHsvChange, nonDerivedValueAsHsv]
   );
   const onContainerMouseDown = (0, import_react52.useCallback)(
     (event) => {
@@ -11783,7 +11881,7 @@ var SaturationAndValuePicker = ({
           /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             HSVSaturationValueCanvas,
             {
-              colorForComparison,
+              colorForComparisonAsLrgb,
               hue: nonDerivedValueAsHsv.h ?? 0,
               minimumContrastRatio,
               shouldShowContrastCurve: shouldEnforceMinContrast
@@ -11807,7 +11905,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
-SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
@@ -11968,7 +12066,7 @@ var Tag = (0, import_react53.forwardRef)(
     );
   }
 );
-Tag.displayName = "Tag_UI";
+Tag.displayName = "Tag";
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime252 = require("react/jsx-runtime");
@@ -12223,8 +12321,8 @@ var import_type_guards37 = require("@wistia/type-guards");
 var import_jsx_runtime253 = require("react/jsx-runtime");
 var StyledDataCard = import_styled_components67.default.div`
   display: grid;
-  grid-template-areas: 'label slot' 'value value';
-  grid-template-rows: auto auto;
+  grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
+  grid-template-rows: auto auto auto;
   grid-template-columns: auto auto;
   gap: var(--wui-space-01);
   padding: var(--wui-space-03);
@@ -12320,6 +12418,9 @@ var StyledDataCardTrendContainer = import_styled_components67.default.div`
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
+var StyledDataCardSubtitleContainer = import_styled_components67.default.div`
+  grid-area: subtitle;
+`;
 var DataCardInner = ({
   label,
   value,
@@ -12327,6 +12428,7 @@ var DataCardInner = ({
   colorScheme = "inherit",
   isLoading = false,
   trend,
+  subtitle,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   StyledDataCard,
@@ -12351,6 +12453,7 @@ var DataCardInner = ({
         }
       ),
       (0, import_type_guards37.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards37.isNotNull)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardSubtitleContainer, { children: subtitle }),
       (0, import_type_guards37.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
@@ -12388,7 +12491,7 @@ var DataCard = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(DataCardInner, { ...props });
 };
-DataCard.displayName = "DataCard_UI";
+DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
 var import_styled_components68 = __toESM(require("styled-components"));
@@ -12422,7 +12525,7 @@ var DataCards = ({
     }
   );
 };
-DataCards.displayName = "DataCards_UI";
+DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
@@ -12500,7 +12603,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
     }
   );
 };
-Divider.displayName = "Divider_UI";
+Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
 var import_styled_components71 = __toESM(require("styled-components"));
@@ -12774,7 +12877,7 @@ var Label = ({
     }
   );
 };
-Label.displayName = "Label_UI";
+Label.displayName = "Label";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -12932,7 +13035,7 @@ var FormField = ({
     }
   );
 };
-FormField.displayName = "FormField_UI";
+FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react60 = require("react");
@@ -12959,7 +13062,7 @@ var RadioGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(FormGroup, { ...props, children }) });
 };
-RadioGroup.displayName = "RadioGroup_UI";
+RadioGroup.displayName = "RadioGroup";
 
 // src/components/Grid/Grid.tsx
 var import_react61 = require("react");
@@ -13029,7 +13132,7 @@ var GridComponent = (0, import_react61.forwardRef)(
     );
   }
 );
-GridComponent.displayName = "Grid_UI";
+GridComponent.displayName = "Grid";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13094,7 +13197,7 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
     );
   }
 );
-InputClickToCopy.displayName = "InputClickToCopy_UI";
+InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 var import_styled_components76 = __toESM(require("styled-components"));
@@ -13203,7 +13306,7 @@ var KeyboardShortcut = ({
     ]
   }
 );
-KeyboardShortcut.displayName = "KeyboardShortcut_UI";
+KeyboardShortcut.displayName = "KeyboardShortcut";
 
 // src/components/List/List.tsx
 var import_type_guards44 = require("@wistia/type-guards");
@@ -13222,7 +13325,7 @@ var ListItem = ({ children }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(ListItemComponent, { children });
 };
-ListItem.displayName = "ListItem_UI";
+ListItem.displayName = "ListItem";
 
 // src/components/List/List.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
@@ -13361,7 +13464,7 @@ var List = ({
   }
   return null;
 };
-List.displayName = "List_UI";
+List.displayName = "List";
 
 // src/components/Menu/Menu.tsx
 var import_react64 = require("react");
@@ -13526,8 +13629,8 @@ var Menu = (0, import_react64.forwardRef)(
     ) });
   }
 );
-Menu.displayName = "Menu_UI";
-Menu.displayName = "Menu_UI";
+Menu.displayName = "Menu";
+Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
 var import_styled_components80 = __toESM(require("styled-components"));
@@ -13554,7 +13657,7 @@ var MenuLabel = ({ children, ...props }) => {
     }
   );
 };
-MenuLabel.displayName = "MenuLabel_UI";
+MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react66 = require("react");
@@ -13679,7 +13782,7 @@ var MenuItemButton = (0, import_react65.forwardRef)(({ children, appearance, com
     }
   );
 });
-MenuItemButton.displayName = "MenuItemButton_UI";
+MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 var import_styled_components82 = __toESM(require("styled-components"));
@@ -13766,7 +13869,7 @@ var SubMenu = ({
     /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
-SubMenu.displayName = "SubMenu_UI";
+SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
 var import_react67 = require("react");
@@ -13791,7 +13894,7 @@ var MenuItem = (0, import_react67.forwardRef)(
     );
   }
 );
-MenuItem.displayName = "MenuItem_UI";
+MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
@@ -13799,7 +13902,7 @@ var import_jsx_runtime273 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
 };
-MenuRadioGroup.displayName = "MenuRadioGroup_UI";
+MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
@@ -13833,7 +13936,7 @@ var RadioMenuItem = ({
     }
   );
 };
-RadioMenuItem.displayName = "RadioMenuItem_UI";
+RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
@@ -13918,7 +14021,7 @@ var CheckboxMenuItem = ({
     }
   );
 };
-CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
+CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Menu/FilterMenu.tsx
 var import_react68 = require("react");
@@ -14020,7 +14123,7 @@ var FilterMenu = (0, import_react68.forwardRef)(
     );
   }
 );
-FilterMenu.displayName = "FilterMenu_UI";
+FilterMenu.displayName = "FilterMenu";
 
 // src/components/Modal/Modal.tsx
 var import_react71 = require("react");
@@ -14349,7 +14452,7 @@ var Modal = (0, import_react71.forwardRef)(
     );
   }
 );
-Modal.displayName = "Modal_UI";
+Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover5 = require("@radix-ui/react-popover");
@@ -14439,7 +14542,7 @@ var PopoverArrow = ({ isAnimated }) => {
     }
   ) });
 };
-PopoverArrow.displayName = "PopoverArrow_UI";
+PopoverArrow.displayName = "PopoverArrow";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -14508,7 +14611,7 @@ var Popover2 = ({
     ) })
   ] });
 };
-Popover2.displayName = "Popover_UI";
+Popover2.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components91 = __toESM(require("styled-components"));
@@ -14587,7 +14690,7 @@ var ProgressBar = ({
     (0, import_type_guards52.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
-ProgressBar.displayName = "ProgressBar_UI";
+ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 var import_react72 = require("react");
@@ -14762,7 +14865,7 @@ var Radio = (0, import_react72.forwardRef)(
     );
   }
 );
-Radio.displayName = "Radio_UI";
+Radio.displayName = "Radio";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_react74 = require("react");
@@ -14926,7 +15029,7 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
     );
   }
 );
-RadioCardRoot.displayName = "RadioCardRoot_UI";
+RadioCardRoot.displayName = "RadioCardRoot";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components95 = __toESM(require("styled-components"));
@@ -14980,7 +15083,7 @@ var RadioCardIndicator = import_styled_components94.default.div`
     --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-RadioCardIndicator.displayName = "RadioCardIndicator_UI";
+RadioCardIndicator.displayName = "RadioCardIndicator";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_jsx_runtime286 = require("react/jsx-runtime");
@@ -15028,7 +15131,7 @@ var RadioCardDefaultLayout = ({
     ] })
   ] });
 };
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -15052,7 +15155,7 @@ var RadioCard = (0, import_react74.forwardRef)(
     );
   }
 );
-RadioCard.displayName = "RadioCard_UI";
+RadioCard.displayName = "RadioCard";
 
 // src/components/RadioCard/RadioCardImage.tsx
 var import_react75 = require("react");
@@ -15080,7 +15183,7 @@ var RadioCardImage = (0, import_react75.forwardRef)(
     );
   }
 );
-RadioCardImage.displayName = "RadioCardImage_UI";
+RadioCardImage.displayName = "RadioCardImage";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react78 = require("react");
@@ -15217,7 +15320,7 @@ var SegmentedControl = (0, import_react78.forwardRef)(
     );
   }
 );
-SegmentedControl.displayName = "SegmentedControl_UI";
+SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react79 = require("react");
@@ -15351,7 +15454,7 @@ var SegmentedControlItem = (0, import_react79.forwardRef)(
     );
   }
 );
-SegmentedControlItem.displayName = "SegmentedControlItem_UI";
+SegmentedControlItem.displayName = "SegmentedControlItem";
 
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
@@ -15465,7 +15568,7 @@ var Select = (0, import_react80.forwardRef)(
     );
   }
 );
-Select.displayName = "Select_UI";
+Select.displayName = "Select";
 
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
@@ -15524,7 +15627,7 @@ var SelectOption = (0, import_react81.forwardRef)(
     );
   }
 );
-SelectOption.displayName = "SelectOption_UI";
+SelectOption.displayName = "SelectOption";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
@@ -15672,7 +15775,7 @@ var Slider = ({
     }
   );
 };
-Slider.displayName = "Slider_UI";
+Slider.displayName = "Slider";
 
 // src/components/Table/Table.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -15833,7 +15936,7 @@ var Tabs = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(SelectedItemStyleProvider, { children }) }) });
 };
-Tabs.displayName = "Tabs_UI";
+Tabs.displayName = "Tabs";
 
 // src/components/Tabs/TabsContent.tsx
 var import_react_tabs2 = require("@radix-ui/react-tabs");
@@ -15841,7 +15944,7 @@ var import_jsx_runtime304 = require("react/jsx-runtime");
 var TabsContent = ({ children, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_tabs2.Content, { value, children });
 };
-TabsContent.displayName = "TabsContent_UI";
+TabsContent.displayName = "TabsContent";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
@@ -15893,7 +15996,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
     }
   );
 };
-TabsList.displayName = "TabsList_UI";
+TabsList.displayName = "TabsList";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react86 = require("react");
@@ -15960,7 +16063,7 @@ var TabsTrigger = (0, import_react86.forwardRef)(
     );
   }
 );
-TabsTrigger.displayName = "TabsTrigger_UI";
+TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components112 = __toESM(require("styled-components"));
@@ -15996,7 +16099,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { children: label })
   ] });
 };
-ThumbnailBadge.displayName = "ThumbnailBadge_UI";
+ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react87 = require("react");
@@ -16439,7 +16542,7 @@ var Thumbnail = (0, import_react87.forwardRef)(
     );
   }
 );
-Thumbnail.displayName = "Thumbnail_UI";
+Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react88 = __toESM(require("react"));
@@ -16673,7 +16776,7 @@ var WistiaLogo = ({
   );
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("a", { href, children: Logo }) : Logo;
 };
-WistiaLogo.displayName = "WistiaLogo_UI";
+WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/InputPassword/InputPassword.tsx
 var import_styled_components118 = __toESM(require("styled-components"));
@@ -16720,7 +16823,7 @@ var InputPassword = (0, import_react89.forwardRef)(
     );
   }
 );
-InputPassword.displayName = "InputPassword_UI";
+InputPassword.displayName = "InputPassword";
 
 // src/components/ContextMenu/ContextMenu.tsx
 var import_react90 = require("react");