@wistia/ui 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.6
+ * @license @wistia/ui v0.0.8
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -1427,7 +1427,7 @@ var useAriaLive = () => {
 
 // src/components/Box/Box.tsx
 var import_react5 = require("react");
-var import_styled_components10 = __toESM(require("styled-components"), 1);
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_type_guards5 = require("@wistia/type-guards");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development";
@@ -1547,7 +1547,7 @@ Box.displayName = "Box";
 // src/components/Button/Button.tsx
 var import_react8 = require("react");
 var import_type_guards9 = require("@wistia/type-guards");
-var import_styled_components15 = __toESM(require("styled-components"), 1);
+var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/css/buttonResetCss.tsx
 var import_styled_components11 = require("styled-components");
@@ -1751,7 +1751,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/private/getColorScheme/getColorScheme.ts
+// src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components13 = require("styled-components");
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -1808,6 +1808,7 @@ var getColorScheme = (colorScheme) => {
 
 // src/components/Icon/Icon.tsx
 var import_type_guards7 = require("@wistia/type-guards");
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/components/Icon/icons/AbTestIcon.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -4963,8 +4964,12 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
+var StyledIcon = import_styled_components14.default.svg`
+  ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
+`;
 var Icon = ({
   invertColor,
+  colorScheme = "inherit",
   size = "lg",
   style,
   type,
@@ -4988,21 +4993,20 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--color-icon-on-fill)" : "var(--color-icon)";
-  if ((0, import_type_guards7.isNotNil)(otherProps.color)) {
-    delete otherProps.color;
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
-    IconElement,
+    StyledIcon,
     {
+      $colorScheme: colorScheme,
       "aria-hidden": "true",
-      color: iconColor,
+      as: IconElement,
       height: `${iconSizeMap[responsiveSize]}px`,
       role: "presentation",
       style: defaultStyle,
       viewBox: "0 0 24 24",
       width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps
+      ...otherProps,
+      color: iconColor
     }
   );
 };
@@ -5011,7 +5015,7 @@ Icon.displayName = "Icon";
 // src/components/Link/Link.tsx
 var import_react7 = require("react");
 var import_type_guards8 = require("@wistia/type-guards");
-var import_styled_components14 = __toESM(require("styled-components"), 1);
+var import_styled_components15 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
@@ -5029,7 +5033,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => (0, import_type_guards8.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards8.isNotUndefined)(props.href);
-var StyledLink = import_styled_components14.default.a`
+var StyledLink = import_styled_components15.default.a`
   ${({ href }) => (0, import_type_guards8.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
@@ -5121,7 +5125,7 @@ Link.displayName = "Link";
 // src/components/Button/Button.tsx
 var import_jsx_runtime158 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards9.isNotUndefined)(props.href);
-var StyledButton = import_styled_components15.default.button`
+var StyledButton = import_styled_components16.default.button`
   ${buttonResetCss}
   ${({ colorScheme }) => getColorScheme(colorScheme)}
   ${({ size }) => buttonSizeStyles[size]}
@@ -5130,20 +5134,23 @@ var StyledButton = import_styled_components15.default.button`
   ${({ fullWidth }) => fullWidth && "width: 100%;"}
   position: relative;
 `;
-var StyledButtonContent = import_styled_components15.default.div`
+var StyledButtonContent = import_styled_components16.default.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
   justify-content: center;
-  opacity: ${({ isLoading }) => isLoading ? 0 : 1};
+  opacity: ${({ $isLoading }) => $isLoading ? 0 : 1};
   padding: 0 var(--button-label-padding-horizontal);
   gap: var(--button-label-gap);
+
+  ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
+  ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components15.default.span`
+var StyledButtonContentLabel = import_styled_components16.default.span`
   flex: 1;
   text-align: center;
 `;
-var StyledButtonLoading = import_styled_components15.default.div`
+var StyledButtonLoading = import_styled_components16.default.div`
   position: absolute;
   display: flex;
 `;
@@ -5155,11 +5162,19 @@ var ButtonContent = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_jsx_runtime158.Fragment, { children: [
     isLoading ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(StyledButtonContent, { isLoading, children: [
-      leftIcon ?? null,
-      /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(StyledButtonContentLabel, { children }),
-      rightIcon ?? null
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+      StyledButtonContent,
+      {
+        $hasLeftIcon: (0, import_type_guards9.isNotNil)(leftIcon),
+        $hasRightIcon: (0, import_type_guards9.isNotNil)(rightIcon),
+        $isLoading: isLoading,
+        children: [
+          leftIcon ?? null,
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(StyledButtonContentLabel, { children }),
+          rightIcon ?? null
+        ]
+      }
+    )
   ] });
 };
 var Button = (0, import_react8.forwardRef)(
@@ -5249,7 +5264,7 @@ var Button = (0, import_react8.forwardRef)(
 Button.displayName = "Button";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components16 = __toESM(require("styled-components"), 1);
+var import_styled_components17 = __toESM(require("styled-components"));
 var import_type_guards10 = require("@wistia/type-guards");
 var import_jsx_runtime159 = require("react/jsx-runtime");
 var getAlignment = (align) => {
@@ -5264,7 +5279,7 @@ var getAlignment = (align) => {
   }
   return void 0;
 };
-var ButtonGroupComponent = import_styled_components16.default.div`
+var ButtonGroupComponent = import_styled_components17.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -5306,13 +5321,13 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components17 = __toESM(require("styled-components"), 1);
+var import_styled_components18 = __toESM(require("styled-components"));
 var import_jsx_runtime160 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components17.default.hr`
+var DividerComponent = import_styled_components18.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5339,9 +5354,9 @@ Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards11 = require("@wistia/type-guards");
-var import_styled_components18 = __toESM(require("styled-components"), 1);
+var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime161 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components18.css`
+var ellipsisStyle = import_styled_components19.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5364,14 +5379,14 @@ var ellipsisStyle = import_styled_components18.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components18.css`
+var ellipsisFlexParentStyle = import_styled_components19.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components18.default.div`
+var EllipsisComponent = import_styled_components19.default.div`
   ${ellipsisStyle};
   ${({ lines }) => {
   if ((0, import_type_guards11.isNotNil)(lines)) {
-    return import_styled_components18.css`
+    return import_styled_components19.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${lines};
         display: -webkit-box;
@@ -5393,7 +5408,7 @@ Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
 var import_react9 = require("react");
-var import_styled_components19 = __toESM(require("styled-components"), 1);
+var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5402,43 +5417,43 @@ var makePolymorphic = (component) => {
 
 // src/components/Heading/Heading.tsx
 var import_jsx_runtime162 = require("react/jsx-runtime");
-var heroStyle = import_styled_components19.css`
+var heroStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
   --font-weight: var(--typography-heading-hero-weight);
   --line-height: var(--typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components19.css`
+var heading1TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-1-family);
   --font-size: var(--typography-heading-1-size);
   --font-weight: var(--typography-heading-1-weight);
   --line-height: var(--typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components19.css`
+var heading2TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-2-family);
   --font-size: var(--typography-heading-2-size);
   --font-weight: var(--typography-heading-2-weight);
   --line-height: var(--typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components19.css`
+var heading3TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-3-family);
   --font-size: var(--typography-heading-3-size);
   --font-weight: var(--typography-heading-3-weight);
   --line-height: var(--typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components19.css`
+var heading4TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-4-family);
   --font-size: var(--typography-heading-4-size);
   --font-weight: var(--typography-heading-4-weight);
   --line-height: var(--typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components19.css`
+var heading5TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-5-family);
   --font-size: var(--typography-heading-5-size);
   --font-weight: var(--typography-heading-5-weight);
   --line-height: var(--typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components19.css`
+var heading6TextStyle = import_styled_components20.css`
   --font-family: var(--typography-heading-6-family);
   --font-size: var(--typography-heading-6-size);
   --font-weight: var(--typography-heading-6-weight);
@@ -5454,7 +5469,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components19.default.div`
+var StyledHeading = import_styled_components20.default.div`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5463,16 +5478,16 @@ var StyledHeading = import_styled_components19.default.div`
   color: var(--color-text);
   ${({ variant }) => variantStyleMap[variant]}
   ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components19.css`
+  ${({ inline }) => inline && import_styled_components20.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components19.css`
+  ${({ disabled }) => disabled && import_styled_components20.css`
       color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components19.css`
+  ${({ preventUserSelect }) => preventUserSelect && import_styled_components20.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components19.css`
+  ${({ align }) => import_styled_components20.css`
     text-align: ${align};
   `}
   margin: 0;
@@ -5518,20 +5533,20 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
 var import_react10 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"), 1);
+var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components20 = __toESM(require("styled-components"), 1);
+var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime163 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components20.css`
+var CompactTooltipStyles = import_styled_components21.css`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
   --tooltip-font-weight: var(--typography-label-4-weight);
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = (0, import_styled_components20.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components21.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5633,7 +5648,7 @@ var buttonIconSizeMap = {
   large: "lg",
   hero: "xl"
 };
-var StyledButton2 = (0, import_styled_components21.default)(Button)`
+var StyledButton2 = (0, import_styled_components22.default)(Button)`
   --icon-button-size-small: 24px;
   --icon-button-size-medium: 32px;
   --icon-button-size-large: 40px;
@@ -5672,11 +5687,11 @@ var IconButton = (0, import_react10.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components22 = __toESM(require("styled-components"), 1);
+var import_styled_components23 = __toESM(require("styled-components"));
 var import_type_guards12 = require("@wistia/type-guards");
 var import_jsx_runtime165 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components22.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components22.default.div({
+var VisuallyHidden = import_styled_components23.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components23.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5695,10 +5710,10 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
 var import_react11 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"), 1);
+var import_styled_components24 = __toESM(require("styled-components"));
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components23.default.div`
+var StyledStack = import_styled_components24.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ gap }) => `var(--${gap})`};
@@ -5728,89 +5743,89 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
 var import_react12 = require("react");
-var import_styled_components24 = __toESM(require("styled-components"), 1);
+var import_styled_components25 = __toESM(require("styled-components"));
 var import_jsx_runtime167 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components24.css`
+var bodyBoldStyles = import_styled_components25.css`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components24.css`
+var labelBoldStyles = import_styled_components25.css`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components24.css`
+var body1TextStyle = import_styled_components25.css`
   --font-family: var(--typography-body-1-family);
   --font-size: var(--typography-body-1-size);
   --font-weight: var(--typography-body-1-weight);
   --line-height: var(--typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components24.css`
+var body2TextStyle = import_styled_components25.css`
   --font-family: var(--typography-body-2-family);
   --font-size: var(--typography-body-2-size);
   --font-weight: var(--typography-body-2-weight);
   --line-height: var(--typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components24.css`
+var body3TextStyle = import_styled_components25.css`
   --font-family: var(--typography-body-3-family);
   --font-size: var(--typography-body-3-size);
   --font-weight: var(--typography-body-3-weight);
   --line-height: var(--typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components24.css`
+var body4TextStyle = import_styled_components25.css`
   --font-family: var(--typography-body-4-family);
   --font-size: var(--typography-body-4-size);
   --font-weight: var(--typography-body-4-weight);
   --line-height: var(--typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components24.css`
+var label1TextStyle = import_styled_components25.css`
   --font-family: var(--typography-label-1-family);
   --font-size: var(--typography-label-1-size);
   --font-weight: var(--typography-label-1-weight);
   --line-height: var(--typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components24.css`
+var label2TextStyle = import_styled_components25.css`
   --font-family: var(--typography-label-2-family);
   --font-size: var(--typography-label-2-size);
   --font-weight: var(--typography-label-2-weight);
   --line-height: var(--typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components24.css`
+var label3TextStyle = import_styled_components25.css`
   --font-family: var(--typography-label-3-family);
   --font-size: var(--typography-label-3-size);
   --font-weight: var(--typography-label-3-weight);
   --line-height: var(--typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components24.css`
+var label4TextStyle = import_styled_components25.css`
   --font-family: var(--typography-label-4-family);
   --font-size: var(--typography-label-4-size);
   --font-weight: var(--typography-label-4-weight);
   --line-height: var(--typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components24.css`
+var body1MonoTextStyle = import_styled_components25.css`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components24.css`
+var body2MonoTextStyle = import_styled_components25.css`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components24.css`
+var body3MonoTextStyle = import_styled_components25.css`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components24.css`
+var body4MonoTextStyle = import_styled_components25.css`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5828,13 +5843,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components24.css`
+var highContrastProminenceStyle = import_styled_components25.css`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components24.css`
+var vibrantProminenceStyle = import_styled_components25.css`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = import_styled_components24.css`
+var secondaryProminenceStyle = import_styled_components25.css`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -5842,7 +5857,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components24.default.div`
+var StyledText = import_styled_components25.default.div`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5854,19 +5869,19 @@ var StyledText = import_styled_components24.default.div`
   ${({ variant }) => variantStyleMap2[variant]}
   ${({ prominence }) => prominenceMap[prominence]}
   ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components24.css`
+  ${({ inline }) => inline && import_styled_components25.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components24.css`
+  ${({ disabled }) => disabled && import_styled_components25.css`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components24.css`
+  ${({ preventUserSelect }) => preventUserSelect && import_styled_components25.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components24.css`
+  ${({ align }) => import_styled_components25.css`
     text-align: ${align};
   `}
-  ${({ as }) => as === "p" && import_styled_components24.css`
+  ${({ as }) => as === "p" && import_styled_components25.css`
       display: block;
     `}
 `;
@@ -5906,7 +5921,7 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components25 = __toESM(require("styled-components"), 1);
+var import_styled_components26 = __toESM(require("styled-components"));
 var import_type_guards13 = require("@wistia/type-guards");
 var import_jsx_runtime168 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -5927,7 +5942,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components25.default.svg`
+var WistiaLogoComponent = import_styled_components26.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */