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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.11-beta.e83846c4.6d00a8f
+ * @license @wistia/ui v0.13.11
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7184,26 +7184,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",
@@ -7225,7 +7209,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)";
@@ -7233,14 +7217,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
@@ -8264,8 +8247,6 @@ var StyledHeading = import_styled_components28.default.div`
     text-align: ${$align};
   `}
   margin: 0;
-
-  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8447,7 +8428,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);
@@ -8674,6 +8654,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",
@@ -8736,8 +8731,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",
@@ -8753,10 +8749,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 })