@wistia/ui 0.13.10 → 0.13.11-beta.e83846c4.6d00a8f

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.10
+ * @license @wistia/ui v0.13.11-beta.e83846c4.6d00a8f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2853,7 +2853,7 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled6, { css as css17 } from "styled-components";
+import styled6, { css as css18 } from "styled-components";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -3062,7 +3062,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 import { isNil as isNil5 } from "@wistia/type-guards";
-import styled3 from "styled-components";
+import styled3, { css as css17 } from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -7023,10 +7023,26 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
+var iconInlineStyle = css17`
+  [data-wui-icon-inline] {
+    --wui-icon-inline-size: 0.8em;
+    --wui-icon-inline-offset: 0.05em;
+    --wui-icon-vertical-align: none;
+
+    top: var(--wui-icon-inline-offset);
+    position: relative;
+  }
+`;
 var StyledIcon = styled3.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
+  --wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
+  --wui-icon-vertical-align: middle;
+
+  height: var(--wui-icon-size);
+  width: var(--wui-icon-size);
 `;
 var Icon = ({
+  useInlineStyles = true,
   invertColor,
   colorScheme = "inherit",
   size = "lg",
@@ -7048,7 +7064,7 @@ var Icon = ({
   }
   const IconElement = iconMap[type];
   const defaultStyle = {
-    verticalAlign: "middle",
+    verticalAlign: "var(--wui-icon-vertical-align)",
     ...style
   };
   const iconColor = invertColor ? "var(--wui-color-icon-on-fill)" : "var(--wui-color-icon)";
@@ -7056,13 +7072,14 @@ var Icon = ({
     StyledIcon,
     {
       $colorScheme: colorScheme,
+      $height: iconSizeMap[responsiveSize],
+      $width: iconSizeMap[responsiveSize],
       "aria-hidden": "true",
       as: IconElement,
-      height: `${iconSizeMap[responsiveSize]}px`,
+      "data-wui-icon-inline": useInlineStyles ? true : void 0,
       role: "presentation",
       style: defaultStyle,
       viewBox: "0 0 24 24",
-      width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       color: iconColor
@@ -7422,7 +7439,7 @@ var StyledSecondaryIcon = styled6.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
 
-  ${({ $hideUntilHover }) => $hideUntilHover && css17`
+  ${({ $hideUntilHover }) => $hideUntilHover && css18`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -7798,12 +7815,12 @@ Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
-import styled16, { css as css22 } from "styled-components";
+import styled16 from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled11, { css as css18 } from "styled-components";
+import styled11, { css as css19 } from "styled-components";
 import { isNotNil as isNotNil10, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7859,27 +7876,27 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return css18`
+      return css19`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return css18`
+      return css19`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return css18`
+      return css19`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return css18`
+      return css19`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return css18`
+      return css19`
         flex: 1 1 auto;
       `;
     default:
@@ -7991,46 +8008,46 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled12, { css as css19 } from "styled-components";
+import styled12, { css as css20 } from "styled-components";
 import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 import { jsx as jsx204 } from "react/jsx-runtime";
-var heroStyle = css19`
+var heroStyle = css20`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css19`
+var heading1TextStyle = css20`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = css19`
+var heading2TextStyle = css20`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = css19`
+var heading3TextStyle = css20`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = css19`
+var heading4TextStyle = css20`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = css19`
+var heading5TextStyle = css20`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = css19`
+var heading6TextStyle = css20`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8069,23 +8086,25 @@ var StyledHeading = styled12.div`
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $truncate }) => {
   if (isNotNil11($truncate)) {
-    return css19`
+    return css20`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css19`
+  ${({ $inline }) => $inline && css20`
       display: inline-block;
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css19`
+  ${({ $preventUserSelect }) => $preventUserSelect && css20`
       user-select: none;
     `}
-  ${({ $align }) => css19`
+  ${({ $align }) => css20`
     text-align: ${$align};
   `}
   margin: 0;
+
+  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8130,22 +8149,22 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled13, { css as css20 } from "styled-components";
+import styled13, { css as css21 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { jsx as jsx205 } from "react/jsx-runtime";
-var bodyBoldStyles = css20`
+var bodyBoldStyles = css21`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css20`
+var labelBoldStyles = css21`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css20`
+var body1TextStyle = css21`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8153,7 +8172,7 @@ var body1TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css20`
+var body2TextStyle = css21`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8161,7 +8180,7 @@ var body2TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css20`
+var body3TextStyle = css21`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8169,7 +8188,7 @@ var body3TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css20`
+var body4TextStyle = css21`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8177,47 +8196,47 @@ var body4TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css20`
+var label1TextStyle = css21`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css20`
+var label2TextStyle = css21`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css20`
+var label3TextStyle = css21`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css20`
+var label4TextStyle = css21`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css20`
+var body1MonoTextStyle = css21`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css20`
+var body2MonoTextStyle = css21`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css20`
+var body3MonoTextStyle = css21`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css20`
+var body4MonoTextStyle = css21`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8267,6 +8286,7 @@ var StyledText = styled13.div`
   return "var(--wui-color-text)";
 }};
 
+  ${iconInlineStyle}
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8277,26 +8297,26 @@ var StyledText = styled13.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if (isNotNil12($truncate)) {
-    return css20`
+    return css21`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css20`
+  ${({ $inline }) => $inline && css21`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css20`
+  ${({ $disabled }) => $disabled && css21`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css20`
+  ${({ $preventUserSelect }) => $preventUserSelect && css21`
       user-select: none;
     `}
-  ${({ $align }) => css20`
+  ${({ $align }) => css21`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css20`
+  ${({ as }) => as === "p" && css21`
       display: block;
 
       + p {
@@ -8339,7 +8359,7 @@ TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled14, { css as css21 } from "styled-components";
+import styled14, { css as css22 } from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
 import { jsx as jsx206 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -8379,7 +8399,7 @@ var ButtonGroupComponent = styled14.div`
     }
   }
 
-  ${({ $buttonSize }) => $buttonSize !== "natural" && css21`
+  ${({ $buttonSize }) => $buttonSize !== "natural" && css22`
       button,
       a {
         ${buttonSizeStyles[$buttonSize]}
@@ -8456,7 +8476,7 @@ var IconButton = forwardRef8(
 IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
-import { jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
@@ -8493,21 +8513,6 @@ var StyledBanner = styled16.div`
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
-var IconWrapper = styled16(Box)`
-  --wui-banner-icon-size: var(--font-size, 24px);
-
-  ${({ $iconPosition }) => $iconPosition === "inline" && css22`
-      display: inline-block;
-      vertical-align: text-bottom;
-      margin-right: calc(var(--wui-banner-icon-size) / 3);
-    `}
-
-  svg {
-    color: var(--wui-color-icon);
-    width: var(--wui-banner-icon-size);
-    height: var(--wui-banner-icon-size);
-  }
-`;
 var Banner = ({
   bodyText,
   colorScheme = "inherit",
@@ -8570,9 +8575,8 @@ var Banner = ({
             style: { padding: "var(--wui-banner-padding)" },
             children: [
               iconPosition === "above" && /* @__PURE__ */ jsx208(
-                IconWrapper,
+                Box,
                 {
-                  $iconPosition: "above",
                   alignSelf: "stretch",
                   direction: "column",
                   justifyContent: "center",
@@ -8588,7 +8592,10 @@ var Banner = ({
                   justifyContent: "center",
                   children: [
                     isNotNil13(headingText) ? /* @__PURE__ */ jsxs13(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ jsx208(IconWrapper, { $iconPosition: "inline", children: icon }),
+                      iconPosition === "inline" && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+                        icon,
+                        " "
+                      ] }),
                       headingText
                     ] }) : null,
                     /* @__PURE__ */ jsx208(Text, { variant: textVariant, children: bodyText })
@@ -8634,7 +8641,7 @@ Banner.displayName = "Banner_UI";
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
 import styled17 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx209, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx209, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled17.nav`
   display: flex;
   align-items: center;
@@ -8653,7 +8660,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs14(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
     /* @__PURE__ */ jsx209("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
@@ -8681,7 +8688,7 @@ Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import styled18 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
 var BreadcrumbContent = styled18.span`
   overflow: hidden;
   white-space: nowrap;
@@ -8691,7 +8698,7 @@ var BreadcrumbContent = styled18.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
     /* @__PURE__ */ jsx210(
       Button,
       {
@@ -9468,7 +9475,7 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 import styled30 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx224, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx224, jsxs as jsxs19 } from "react/jsx-runtime";
 var ClampedContent = styled30.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
@@ -9483,7 +9490,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx224(Content, { children: /* @__PURE__ */ jsxs19(Fragment4, { children: [
+  return /* @__PURE__ */ jsx224(Content, { children: /* @__PURE__ */ jsxs19(Fragment5, { children: [
     children,
     " "
   ] }) });
@@ -9496,7 +9503,7 @@ import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
 import { createContext as createContext5, useCallback as useCallback9, useContext as useContext4, useEffect as useEffect10, useMemo as useMemo8, useState as useState12 } from "react";
-import { formatHex as formatHex2, wcagContrast as wcagContrast2 } from "culori/fn";
+import { formatHex as formatHex2 } from "culori/fn";
 
 // src/components/ColorPicker/color-conversion-utils.ts
 import { modeHsv, modeLrgb, modeRgb, parseHex, useMode } from "culori/fn";
@@ -9602,6 +9609,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 wcagContrast(compositeBackground, foregroundColorAsRgb);
+};
 var snapValueToEdges = (value) => {
   if (value > 1 - VALUE_CHANNEL_SNAP_EPSILON) {
     return 1;
@@ -9624,13 +9641,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;
@@ -9641,10 +9660,11 @@ var getAccessibleColorByValueChannelChange = ({
     v: extremeValue,
     mode: "hsv"
   };
-  const extremeContrast = wcagContrast(
-    compositeOverWhite(extremeVariant, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const extremeContrast = calculateContrast({
+    backgroundColor: shouldConvertToHex ? formatHex(extremeVariant) : extremeVariant,
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   if (extremeContrast < minContrast) {
     return null;
   }
@@ -9660,10 +9680,11 @@ var getAccessibleColorByValueChannelChange = ({
       v: midValue,
       mode: "hsv"
     };
-    const contrast = wcagContrast(
-      compositeOverWhite(candidateHsv, opacityForContrastCalculation),
-      colorForComparison
-    );
+    const contrast = calculateContrast({
+      backgroundColor: shouldConvertToHex ? formatHex(candidateHsv) : candidateHsv,
+      foregroundColor: colorForComparison,
+      backgroundOpacity: opacityForContrastCalculation
+    });
     if (contrast >= minContrast) {
       bestSoFar = candidateHsv;
     }
@@ -9683,7 +9704,7 @@ var getAccessibleColorByValueChannelChange = ({
   }
   return bestSoFar;
 };
-var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalHsv) => {
+var chooseClosestDerivativeToOriginal = (brighterOption, darkerOption, originalColor) => {
   const hsvDifference = differenceEuclidean("hsv");
   if (!brighterOption && !darkerOption) {
     return null;
@@ -9694,8 +9715,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;
   }
@@ -9705,12 +9726,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 = differenceEuclidean("hsv");
   const maxIterations = 50;
   let lowStep = 0;
@@ -9736,7 +9758,11 @@ var getAccessibleColorBySaturationAndValueChange = ({
     };
   };
   const checkContrast = (hsv) => {
-    return wcagContrast(compositeOverWhite(hsv, opacityForContrastCalculation), colorForComparison);
+    return calculateContrast({
+      backgroundColor: formatHex(hsv),
+      foregroundColor: colorForComparison,
+      backgroundOpacity: opacityForContrastCalculation
+    });
   };
   const extremeHsv = getHsvForStep(highStep);
   if (checkContrast(extremeHsv) < minContrast) {
@@ -9765,7 +9791,7 @@ var getAccessibleColorBySaturationAndValueChange = ({
   return bestCandidate;
 };
 var getAccessibleColorInDirection = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast,
   maxIterations = 50,
@@ -9773,7 +9799,7 @@ var getAccessibleColorInDirection = ({
   opacityForContrastCalculation
 }) => {
   const valueResult = getAccessibleColorByValueChannelChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9784,7 +9810,7 @@ var getAccessibleColorInDirection = ({
     return valueResult;
   }
   return getAccessibleColorBySaturationAndValueChange({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     direction,
@@ -9792,21 +9818,23 @@ var getAccessibleColorInDirection = ({
   });
 };
 var getAccessibleColor = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   maxIterations = 50,
   opacityForContrastCalculation
 }) => {
-  const originalContrast = wcagContrast(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalColorAsHsv = convertToHsv(originalColor);
+  const originalContrast = calculateContrast({
+    backgroundColor: formatHex(originalColorAsHsv),
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   if (originalContrast >= minContrast) {
-    return originalHsv;
+    return convertToHsv(originalColor);
   }
   const brighterOption = getAccessibleColorInDirection({
-    originalHsv,
+    originalColor,
     colorForComparison,
     minContrast,
     maxIterations,
@@ -9814,43 +9842,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 ${formatHex(originalHsv)} at minimum contrast ratio ${minContrast}`
+      `Unable to get accessible derivative for ${formatHex(originalColor)} at minimum contrast ratio ${minContrast}`
     );
   }
   return result;
 };
 var hasAccessibleDerivatives = ({
-  originalHsv,
+  originalColor,
   colorForComparison,
   minContrast = DEFAULT_MIN_CONTRAST,
   opacityForContrastCalculation
 }) => {
-  const originalContrast = wcagContrast(
-    compositeOverWhite(originalHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const originalColorAsHsv = convertToHsv(originalColor);
+  const originalContrast = calculateContrast({
+    backgroundColor: 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",
@@ -9874,27 +9904,28 @@ var ColorPickerProvider = ({
   const [nonDerivedValueAsHsv, setNonDerivedValueAsHsv] = useState12(convertToHsv(valueAsHex));
   const [shouldEnforceMinContrast, setShouldEnforceMinContrast] = useState12(false);
   const getAccessibleDerivativeColor = useCallback9(
-    (originalHsv) => getAccessibleColor({
-      originalHsv,
+    (originalColor) => getAccessibleColor({
+      originalColor,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
-  const currentContrastRatio = wcagContrast2(
-    compositeOverWhite(valueAsHsv, opacityForContrastCalculation),
-    colorForComparison
-  );
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(formatHex2(nonDerivedValueAsHsv)) : nonDerivedValueAsHsv;
+  const currentContrastRatio = calculateContrast({
+    backgroundColor: valueAsHex,
+    foregroundColor: colorForComparison,
+    backgroundOpacity: opacityForContrastCalculation
+  });
   const hasAccessibleDerivativesValue = useMemo8(() => {
     return hasAccessibleDerivatives({
-      originalHsv: valueAsHsv,
+      originalColor: valueAsHex,
       colorForComparison,
       minContrast: minimumContrastRatio,
       opacityForContrastCalculation
     });
-  }, [valueAsHsv, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
+  }, [valueAsHex, colorForComparison, minimumContrastRatio, opacityForContrastCalculation]);
   const onChangeNonDerivedValueAsHsv = useCallback9((nonDerivedValue) => {
     setNonDerivedValueAsHsv(nonDerivedValue);
   }, []);
@@ -9918,15 +9949,21 @@ var ColorPickerProvider = ({
   const setShouldEnforceMinContrastWrapped = useCallback9(
     (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 ? formatHex2(getAccessibleDerivativeColor(nonDerivedValueAsHsv)) : formatHex2(nonDerivedValueAsHsv);
+  const whatValuePropShouldBe = shouldEnforceMinContrast ? formatHex2(getAccessibleDerivativeColor(formatHex2(nonDerivedValueAsHsv))) : formatHex2(nonDerivedValueAsHsv);
   useEffect10(() => {
     if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
       onValueChange(whatValuePropShouldBe);
@@ -10563,6 +10600,9 @@ var Container6 = styled41.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;
@@ -10582,7 +10622,7 @@ var ContrastIndicator = () => {
         renderAs: "span",
         variant: "body4Mono",
         children: [
-          currentContrastRatio.toFixed(2),
+          floorToTenth(currentContrastRatio).toFixed(1),
           ":1"
         ]
       }
@@ -11398,11 +11438,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 = {
@@ -11740,7 +11782,7 @@ import styled49 from "styled-components";
 import { forwardRef as forwardRef16 } from "react";
 import styled48 from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment5, jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
 var TagLabel = styled48.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -11832,7 +11874,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs32(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment6, { children: [
     /* @__PURE__ */ jsx251(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs32(
       StyledRemoveButton,
@@ -12471,7 +12513,7 @@ Divider.displayName = "Divider_UI";
 // src/components/EditableHeading/EditableHeading.tsx
 import styled55, { css as css30 } from "styled-components";
 import { useState as useState16, useRef as useRef16 } from "react";
-import { Fragment as Fragment6, jsx as jsx258, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx258, jsxs as jsxs36 } from "react/jsx-runtime";
 var StyledInput = styled55(Input)`
   &:not([rows]) {
     min-height: unset;
@@ -12590,7 +12632,7 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs36(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
     /* @__PURE__ */ jsx258(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx258(ScreenReaderOnly, { children: /* @__PURE__ */ jsx258(
       "button",
@@ -12743,7 +12785,7 @@ var Label = ({
 Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
-import { Fragment as Fragment7, jsx as jsx261, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx261, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledFormField = styled57.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
@@ -12884,7 +12926,7 @@ var FormField = ({
         !isIntegratedLabel && /* @__PURE__ */ jsx261(Label, { htmlFor: computedId, children: label }),
         isNotNil21(description) ? /* @__PURE__ */ jsx261(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil21(computedError) ? /* @__PURE__ */ jsxs38(Fragment7, { children: [
+        isNotNil21(computedError) ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
           /* @__PURE__ */ jsx261("div", {}),
           /* @__PURE__ */ jsx261(
             ErrorMessages,
@@ -16894,6 +16936,7 @@ export {
   ValueNameOrHexCode,
   ValueSwatch,
   WistiaLogo,
+  calculateContrast,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,