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

package/dist/index.d.mts

@@ -1363,17 +1363,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
      */
     colorScheme?: ColorSchemeTypes;
-    /**
-     * Determines if the icon should use inline styles when used with [Text]() and [Heading]() components
-     */
-    useInlineStyles?: boolean;
     /**
      * Is Icon on a filled background?
      */
     invertColor?: boolean;
     /**
      * The size of the icon to display
-     *
      */
     size?: ResponsiveObject<keyof typeof iconSizeMap> | keyof typeof iconSizeMap;
     /**
@@ -1386,17 +1381,11 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
     type: IconNameType;
 };
 /**
- * A component that renders any of our available icons.
- *
- * For inline usage with text, wrap the Icon within a Text component
- * and set inline=true. The icon will automatically align with the text
- * using the typography-specific positioning.
- *
- * Note that icons should not be used directly for interactivity.
- * If you need an interactive element, use IconButton.
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/components-iconbutton--docs).
  */
 declare const Icon: {
-    ({ useInlineStyles, invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1363,17 +1363,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
      */
     colorScheme?: ColorSchemeTypes;
-    /**
-     * Determines if the icon should use inline styles when used with [Text]() and [Heading]() components
-     */
-    useInlineStyles?: boolean;
     /**
      * Is Icon on a filled background?
      */
     invertColor?: boolean;
     /**
      * The size of the icon to display
-     *
      */
     size?: ResponsiveObject<keyof typeof iconSizeMap> | keyof typeof iconSizeMap;
     /**
@@ -1386,17 +1381,11 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
     type: IconNameType;
 };
 /**
- * A component that renders any of our available icons.
- *
- * For inline usage with text, wrap the Icon within a Text component
- * and set inline=true. The icon will automatically align with the text
- * using the typography-specific positioning.
- *
- * Note that icons should not be used directly for interactivity.
- * If you need an interactive element, use IconButton.
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/components-iconbutton--docs).
  */
 declare const Icon: {
-    ({ useInlineStyles, invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...props }: IconProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -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.
  *
@@ -2853,7 +2853,7 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled6, { css as css18 } from "styled-components";
+import styled6, { css as css17 } from "styled-components";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -3062,7 +3062,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 import { isNil as isNil5 } from "@wistia/type-guards";
-import styled3, { css as css17 } from "styled-components";
+import styled3 from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -7023,26 +7023,10 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var iconInlineStyle = css17`
-  [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 = styled3.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",
@@ -7064,7 +7048,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)";
@@ -7072,14 +7056,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
@@ -7439,7 +7422,7 @@ var StyledSecondaryIcon = styled6.div`
   justify-content: flex-end;
   transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
 
-  ${({ $hideUntilHover }) => $hideUntilHover && css18`
+  ${({ $hideUntilHover }) => $hideUntilHover && css17`
       will-change: transform;
       opacity: 0;
       transform: translateX(-16px);
@@ -7815,12 +7798,12 @@ Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
-import styled16 from "styled-components";
+import styled16, { css as css22 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled11, { css as css19 } from "styled-components";
+import styled11, { css as css18 } from "styled-components";
 import { isNotNil as isNotNil10, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7876,27 +7859,27 @@ var getFlexStyle = (flexMode) => {
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
-      return css19`
+      return css18`
         flex: 1 0 0;
       `;
     // default behavior, can shrink but won't grow
     case "initial":
-      return css19`
+      return css18`
         flex: 0 1 auto;
       `;
     // equal distribution of space
     case "equal":
-      return css19`
+      return css18`
         flex: 1;
       `;
     // won't grow or shrink
     case "rigid":
-      return css19`
+      return css18`
         flex: 0 0 auto;
       `;
     // can grow and shrink from content size
     case "fluid":
-      return css19`
+      return css18`
         flex: 1 1 auto;
       `;
     default:
@@ -8008,46 +7991,46 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled12, { css as css20 } from "styled-components";
+import styled12, { css as css19 } from "styled-components";
 import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 import { jsx as jsx204 } from "react/jsx-runtime";
-var heroStyle = css20`
+var heroStyle = css19`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css20`
+var heading1TextStyle = css19`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = css20`
+var heading2TextStyle = css19`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = css20`
+var heading3TextStyle = css19`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = css20`
+var heading4TextStyle = css19`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = css20`
+var heading5TextStyle = css19`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = css20`
+var heading6TextStyle = css19`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8086,25 +8069,23 @@ var StyledHeading = styled12.div`
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $truncate }) => {
   if (isNotNil11($truncate)) {
-    return css20`
+    return css19`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css20`
+  ${({ $inline }) => $inline && css19`
       display: inline-block;
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css20`
+  ${({ $preventUserSelect }) => $preventUserSelect && css19`
       user-select: none;
     `}
-  ${({ $align }) => css20`
+  ${({ $align }) => css19`
     text-align: ${$align};
   `}
   margin: 0;
-
-  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8149,22 +8130,22 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled13, { css as css21 } from "styled-components";
+import styled13, { css as css20 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { jsx as jsx205 } from "react/jsx-runtime";
-var bodyBoldStyles = css21`
+var bodyBoldStyles = css20`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css21`
+var labelBoldStyles = css20`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css21`
+var body1TextStyle = css20`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8172,7 +8153,7 @@ var body1TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css21`
+var body2TextStyle = css20`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8180,7 +8161,7 @@ var body2TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css21`
+var body3TextStyle = css20`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8188,7 +8169,7 @@ var body3TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css21`
+var body4TextStyle = css20`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8196,47 +8177,47 @@ var body4TextStyle = css21`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css21`
+var label1TextStyle = css20`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css21`
+var label2TextStyle = css20`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css21`
+var label3TextStyle = css20`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css21`
+var label4TextStyle = css20`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css21`
+var body1MonoTextStyle = css20`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css21`
+var body2MonoTextStyle = css20`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css21`
+var body3MonoTextStyle = css20`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css21`
+var body4MonoTextStyle = css20`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8286,7 +8267,6 @@ var StyledText = styled13.div`
   return "var(--wui-color-text)";
 }};
 
-  ${iconInlineStyle}
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8297,26 +8277,26 @@ var StyledText = styled13.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if (isNotNil12($truncate)) {
-    return css21`
+    return css20`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && css21`
+  ${({ $inline }) => $inline && css20`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css21`
+  ${({ $disabled }) => $disabled && css20`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css21`
+  ${({ $preventUserSelect }) => $preventUserSelect && css20`
       user-select: none;
     `}
-  ${({ $align }) => css21`
+  ${({ $align }) => css20`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css21`
+  ${({ as }) => as === "p" && css20`
       display: block;
 
       + p {
@@ -8359,7 +8339,7 @@ TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled14, { css as css22 } from "styled-components";
+import styled14, { css as css21 } from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
 import { jsx as jsx206 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -8399,7 +8379,7 @@ var ButtonGroupComponent = styled14.div`
     }
   }
 
-  ${({ $buttonSize }) => $buttonSize !== "natural" && css22`
+  ${({ $buttonSize }) => $buttonSize !== "natural" && css21`
       button,
       a {
         ${buttonSizeStyles[$buttonSize]}
@@ -8476,7 +8456,7 @@ var IconButton = forwardRef8(
 IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
-import { Fragment as Fragment2, jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
@@ -8513,6 +8493,21 @@ var StyledBanner = styled16.div`
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
+var IconWrapper = styled16(Box)`
+  --wui-banner-icon-size: var(--font-size, 24px);
+
+  ${({ $iconPosition }) => $iconPosition === "inline" && css22`
+      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",
@@ -8575,8 +8570,9 @@ var Banner = ({
             style: { padding: "var(--wui-banner-padding)" },
             children: [
               iconPosition === "above" && /* @__PURE__ */ jsx208(
-                Box,
+                IconWrapper,
                 {
+                  $iconPosition: "above",
                   alignSelf: "stretch",
                   direction: "column",
                   justifyContent: "center",
@@ -8592,10 +8588,7 @@ var Banner = ({
                   justifyContent: "center",
                   children: [
                     isNotNil13(headingText) ? /* @__PURE__ */ jsxs13(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ jsxs13(Fragment2, { children: [
-                        icon,
-                        " "
-                      ] }),
+                      iconPosition === "inline" && /* @__PURE__ */ jsx208(IconWrapper, { $iconPosition: "inline", children: icon }),
                       headingText
                     ] }) : null,
                     /* @__PURE__ */ jsx208(Text, { variant: textVariant, children: bodyText })
@@ -8641,7 +8634,7 @@ Banner.displayName = "Banner_UI";
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
 import styled17 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx209, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx209, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled17.nav`
   display: flex;
   align-items: center;
@@ -8660,7 +8653,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment2, { children: [
     /* @__PURE__ */ jsx209("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
@@ -8688,7 +8681,7 @@ Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import styled18 from "styled-components";
-import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
 var BreadcrumbContent = styled18.span`
   overflow: hidden;
   white-space: nowrap;
@@ -8698,7 +8691,7 @@ var BreadcrumbContent = styled18.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
     /* @__PURE__ */ jsx210(
       Button,
       {
@@ -9475,7 +9468,7 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 import styled30 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment5, jsx as jsx224, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx224, jsxs as jsxs19 } from "react/jsx-runtime";
 var ClampedContent = styled30.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
@@ -9490,7 +9483,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx224(Content, { children: /* @__PURE__ */ jsxs19(Fragment5, { children: [
+  return /* @__PURE__ */ jsx224(Content, { children: /* @__PURE__ */ jsxs19(Fragment4, { children: [
     children,
     " "
   ] }) });
@@ -11782,7 +11775,7 @@ import styled49 from "styled-components";
 import { forwardRef as forwardRef16 } from "react";
 import styled48 from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
 var TagLabel = styled48.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -11874,7 +11867,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs32(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment5, { children: [
     /* @__PURE__ */ jsx251(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs32(
       StyledRemoveButton,
@@ -12513,7 +12506,7 @@ Divider.displayName = "Divider_UI";
 // src/components/EditableHeading/EditableHeading.tsx
 import styled55, { css as css30 } from "styled-components";
 import { useState as useState16, useRef as useRef16 } from "react";
-import { Fragment as Fragment7, jsx as jsx258, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx258, jsxs as jsxs36 } from "react/jsx-runtime";
 var StyledInput = styled55(Input)`
   &:not([rows]) {
     min-height: unset;
@@ -12632,7 +12625,7 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs36(Fragment6, { children: [
     /* @__PURE__ */ jsx258(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx258(ScreenReaderOnly, { children: /* @__PURE__ */ jsx258(
       "button",
@@ -12785,7 +12778,7 @@ var Label = ({
 Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
-import { Fragment as Fragment8, jsx as jsx261, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx261, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledFormField = styled57.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
@@ -12926,7 +12919,7 @@ var FormField = ({
         !isIntegratedLabel && /* @__PURE__ */ jsx261(Label, { htmlFor: computedId, children: label }),
         isNotNil21(description) ? /* @__PURE__ */ jsx261(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil21(computedError) ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        isNotNil21(computedError) ? /* @__PURE__ */ jsxs38(Fragment7, { children: [
           /* @__PURE__ */ jsx261("div", {}),
           /* @__PURE__ */ jsx261(
             ErrorMessages,