@wistia/ui 0.13.2-beta.daefada2.65ffee6 → 0.13.2-beta.e183b96c.a550c23

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.2-beta.daefada2.65ffee6
+ * @license @wistia/ui v0.13.2-beta.e183b96c.a550c23
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7166,26 +7166,10 @@ 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",
@@ -7207,7 +7191,7 @@ var Icon = ({
   }
   const IconElement = iconMap[type];
   const defaultStyle = {
-    verticalAlign: "var(--wui-icon-vertical-align)",
+    verticalAlign: "middle",
     ...style
   };
   const iconColor = invertColor ? "var(--wui-color-icon-on-fill)" : "var(--wui-color-icon)";
@@ -7215,14 +7199,13 @@ var Icon = ({
     StyledIcon,
     {
       $colorScheme: colorScheme,
-      $height: iconSizeMap[responsiveSize],
-      $width: iconSizeMap[responsiveSize],
       "aria-hidden": "true",
       as: IconElement,
-      "data-wui-icon-inline": useInlineStyles ? true : void 0,
+      height: `${iconSizeMap[responsiveSize]}px`,
       role: "presentation",
       style: defaultStyle,
       viewBox: "0 0 24 24",
+      width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       color: iconColor
@@ -8236,8 +8219,6 @@ var StyledHeading = import_styled_components28.default.div`
     text-align: ${$align};
   `}
   margin: 0;
-
-  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8417,7 +8398,6 @@ 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);
@@ -8644,6 +8624,21 @@ 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",
@@ -8706,8 +8701,9 @@ var Banner = ({
             style: { padding: "var(--wui-banner-padding)" },
             children: [
               iconPosition === "above" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
-                Box,
+                IconWrapper,
                 {
+                  $iconPosition: "above",
                   alignSelf: "stretch",
                   direction: "column",
                   justifyContent: "center",
@@ -8723,10 +8719,7 @@ 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.jsxs)(import_jsx_runtime208.Fragment, { children: [
-                        icon,
-                        " "
-                      ] }),
+                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(IconWrapper, { $iconPosition: "inline", children: icon }),
                       headingText
                     ] }) : null,
                     /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Text, { variant: textVariant, children: bodyText })
@@ -10617,7 +10610,10 @@ var Input = (0, import_react44.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react44.useRef)();
-    const ref = (0, import_type_guards36.isNotNil)(externalRef) && (0, import_type_guards36.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
+    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
+    );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards36.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "search" });