@wistia/ui 0.13.2-beta.e47e5101.ccf43dc → 0.13.2-beta.e9273a7b.cd2e715

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.2-beta.e47e5101.ccf43dc
+ * @license @wistia/ui v0.13.2-beta.e9273a7b.cd2e715
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7166,10 +7166,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",
@@ -7191,7 +7207,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)";
@@ -7199,13 +7215,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
@@ -8219,6 +8236,8 @@ var StyledHeading = import_styled_components28.default.div`
     text-align: ${$align};
   `}
   margin: 0;
+
+  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8398,6 +8417,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);
@@ -8624,21 +8644,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",
@@ -8701,9 +8706,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",
@@ -8719,7 +8723,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 })
@@ -10610,10 +10617,7 @@ var Input = (0, import_react44.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react44.useRef)();
-    const ref = (
-      // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards36.isNotNil)(externalRef) && (0, import_type_guards36.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
-    );
+    const ref = (0, import_type_guards36.isNotNil)(externalRef) && (0, import_type_guards36.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards36.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "search" });