@wistia/ui 0.13.11 → 0.13.12-beta.6e81c50a.e8b6386

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.11
+ * @license @wistia/ui v0.13.12-beta.6e81c50a.e8b6386
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7184,10 +7184,26 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
+var iconInlineStyle = import_styled_components19.css`
+  [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 = import_styled_components19.default.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",
@@ -7209,7 +7225,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)";
@@ -7217,13 +7233,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
@@ -8247,6 +8264,8 @@ var StyledHeading = import_styled_components28.default.div`
     text-align: ${$align};
   `}
   margin: 0;
+
+  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8428,6 +8447,7 @@ var StyledText = import_styled_components29.default.div`
   return "var(--wui-color-text)";
 }};
 
+  ${iconInlineStyle}
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8654,21 +8674,6 @@ var StyledBanner = import_styled_components32.default.div`
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
-var IconWrapper = (0, import_styled_components32.default)(Box)`
-  --wui-banner-icon-size: var(--font-size, 24px);
-
-  ${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components32.css`
-      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",
@@ -8731,9 +8736,8 @@ var Banner = ({
             style: { padding: "var(--wui-banner-padding)" },
             children: [
               iconPosition === "above" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
-                IconWrapper,
+                Box,
                 {
-                  $iconPosition: "above",
                   alignSelf: "stretch",
                   direction: "column",
                   justifyContent: "center",
@@ -8749,7 +8753,10 @@ var Banner = ({
                   justifyContent: "center",
                   children: [
                     (0, import_type_guards24.isNotNil)(headingText) ? /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(IconWrapper, { $iconPosition: "inline", children: icon }),
+                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_jsx_runtime208.Fragment, { children: [
+                        icon,
+                        " "
+                      ] }),
                       headingText
                     ] }) : null,
                     /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Text, { variant: textVariant, children: bodyText })
@@ -10066,7 +10073,7 @@ var ColorPickerProvider = ({
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv)) : nonDerivedValueAsHsv;
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
   const currentContrastRatio = calculateContrast({
     backgroundColor: valueAsHex,
     foregroundColor: colorForComparison,