@sproutsocial/seeds-react-banner 1.1.11 → 1.1.22

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     3.82 KB
-ESM dist/esm/index.js.map 7.65 KB
-ESM ⚡️ Build success in 15ms
-CJS dist/index.js     6.01 KB
-CJS dist/index.js.map 7.77 KB
-CJS ⚡️ Build success in 17ms
+CJS dist/index.js     9.00 KB
+CJS dist/index.js.map 12.96 KB
+CJS ⚡️ Build success in 18ms
+ESM dist/esm/index.js     6.31 KB
+ESM dist/esm/index.js.map 12.74 KB
+ESM ⚡️ Build success in 23ms
 DTS Build start
-DTS ⚡️ Build success in 4787ms
-DTS dist/index.d.ts  1.35 KB
-DTS dist/index.d.mts 1.35 KB
-Done in 6.19s.
+DTS ⚡️ Build success in 4528ms
+DTS dist/index.d.ts  1.42 KB
+DTS dist/index.d.mts 1.42 KB
+Done in 6.22s.

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @sproutsocial/seeds-react-banner
 
+## 1.1.22
+
+### Patch Changes
+
+- Updated dependencies [69c9d02]
+  - @sproutsocial/seeds-react-icon@2.4.0
+  - @sproutsocial/seeds-react-button@2.2.1
+
+## 1.1.21
+
+### Patch Changes
+
+- edc1819: Migrate link, text, banner, loader-button, and content-header to the Tailwind hybrid pattern (mirroring seeds-react-button). Each component gains a pure CSS-class `*Tailwind` implementation, a `*Hybrid` router that falls back to styled-components when system/styled props are present, and a component-scoped CSS file of `seeds-*` classes built on `var(--…)` tokens. Component CSS is wrapped in `@layer components` so consumer Tailwind utility overrides win the cascade, and the per-component CSS import is dropped from the `*Tailwind` files since the CSS is aggregated into `@sproutsocial/racine/css/components` at build time. Legacy `styles.ts` paths are unchanged.
+
+## 1.1.20
+
+### Patch Changes
+
+- Updated dependencies [456a20f]
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-button@2.2.0
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.21
+  - @sproutsocial/seeds-react-icon@2.3.13
+
+## 1.1.19
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+- Updated dependencies [a0fe3d3]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-button@2.1.3
+  - @sproutsocial/seeds-react-box@1.1.20
+  - @sproutsocial/seeds-react-icon@2.3.12
+
+## 1.1.18
+
+### Patch Changes
+
+- Updated dependencies [cb27f07]
+  - @sproutsocial/seeds-react-button@2.1.2
+
+## 1.1.17
+
+### Patch Changes
+
+- Updated dependencies [40d2dfe]
+  - @sproutsocial/seeds-react-button@2.1.1
+
+## 1.1.16
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-button@2.1.0
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-box@1.1.19
+  - @sproutsocial/seeds-react-icon@2.3.11
+
+## 1.1.15
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.3.10
+- @sproutsocial/seeds-react-button@2.0.8
+
+## 1.1.14
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-box@1.1.18
+  - @sproutsocial/seeds-react-icon@2.3.9
+  - @sproutsocial/seeds-react-button@2.0.7
+
+## 1.1.13
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-box@1.1.17
+  - @sproutsocial/seeds-react-icon@2.3.8
+  - @sproutsocial/seeds-react-button@2.0.6
+
+## 1.1.12
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.3.7
+- @sproutsocial/seeds-react-button@2.0.5
+
 ## 1.1.11
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,8 +1,11 @@
 // src/Banner.tsx
 import "react";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon2 from "@sproutsocial/seeds-react-icon";
+
+// src/BannerHybrid.tsx
+import "react";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Button2 from "@sproutsocial/seeds-react-button";
+import Icon3 from "@sproutsocial/seeds-react-icon";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -53,8 +56,13 @@ var StyledBannerIcon = styled(Icon)`
   min-width: 16px;
 `;
 
-// src/Banner.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/BannerTailwind.tsx
+import "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+
+// src/bannerIcon.ts
 var getBannerIconName = (type) => {
   switch (type) {
     case "success":
@@ -86,31 +94,51 @@ var getBannerIconColor = (type, variant) => {
       return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
   }
 };
-var Banner = ({
+
+// src/BannerTailwind.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var BannerTailwind = ({
   type = "info",
   variant = "default",
   text,
   onClose,
   closeButtonLabel = "Close",
   typeIconProps,
+  className,
   ...rest
 }) => {
+  const variantClass = variant === "ghost" ? "seeds-banner-ghost" : `seeds-banner-${type}`;
   return /* @__PURE__ */ jsx(
-    styles_default,
+    "div",
     {
-      type,
-      variant,
+      className: cn("seeds-banner", variantClass, className),
       "data-qa-alert": "",
       "data-qa-alert-type": type,
       "data-qa-alert-text": text,
       ...rest,
       children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", width: 1, children: [
         /* @__PURE__ */ jsx(
-          StyledBannerIcon,
+          Icon2,
           {
             name: getBannerIconName(type),
             color: getBannerIconColor(type, variant),
-            className: "Icon",
+            className: "Icon seeds-banner-icon",
             fixedWidth: true,
             mt: 100,
             mr: 350,
@@ -123,6 +151,67 @@ var Banner = ({
     }
   );
 };
+var BannerTailwind_default = BannerTailwind;
+
+// src/BannerHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BannerHybrid = ({
+  type = "info",
+  variant = "default",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx2(
+      styles_default,
+      {
+        type,
+        variant,
+        "data-qa-alert": "",
+        "data-qa-alert-type": type,
+        "data-qa-alert-text": text,
+        ...rest,
+        children: /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", width: 1, children: [
+          /* @__PURE__ */ jsx2(
+            StyledBannerIcon,
+            {
+              name: getBannerIconName(type),
+              color: getBannerIconColor(type, variant),
+              className: "Icon",
+              fixedWidth: true,
+              mt: 100,
+              mr: 350,
+              ...typeIconProps
+            }
+          ),
+          text,
+          onClose && /* @__PURE__ */ jsx2(Box2, { ml: "auto", pl: 400, alignSelf: "flex-start", children: /* @__PURE__ */ jsx2(Button2, { p: 0, onClick: onClose, ariaLabel: closeButtonLabel, children: /* @__PURE__ */ jsx2(Icon3, { name: "x-outline", "aria-hidden": true }) }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    BannerTailwind_default,
+    {
+      type,
+      variant,
+      text,
+      onClose,
+      closeButtonLabel,
+      typeIconProps,
+      ...rest
+    }
+  );
+};
+var BannerHybrid_default = BannerHybrid;
+
+// src/Banner.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Banner = (props) => /* @__PURE__ */ jsx3(BannerHybrid_default, { ...props });
 var Banner_default = Banner;
 
 // src/BannerTypes.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banner.tsx","../../src/styles.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n  TypeBannerProps,\n  EnumBannerType,\n  EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"circle-check-outline\";\n    case \"error\":\n      return \"triangle-exclamation-outline\";\n    case \"warning\":\n      return \"triangle-exclamation-outline\";\n    case \"opportunity\":\n      return \"gem-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nconst getBannerIconColor = (\n  type: EnumBannerType,\n  variant: EnumBannerVariant\n) => {\n  const isGhostVariant = variant === \"ghost\";\n  switch (type) {\n    case \"success\":\n      return isGhostVariant\n        ? \"container.border.decorative.green\"\n        : \"icon.success\";\n    case \"error\":\n      return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n    case \"warning\":\n      return isGhostVariant\n        ? \"container.border.decorative.yellow\"\n        : \"icon.warning\";\n    case \"opportunity\":\n      return isGhostVariant\n        ? \"container.border.decorative.purple\"\n        : \"icon.opportunity\";\n    case \"info\":\n    default:\n      return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n  }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  return (\n    <Container\n      type={type}\n      variant={variant}\n      data-qa-alert=\"\"\n      data-qa-alert-type={type}\n      data-qa-alert-text={text}\n      {...rest}\n    >\n      <Box display=\"flex\" alignItems=\"center\" width={1}>\n        <StyledBannerIcon\n          name={getBannerIconName(type)}\n          color={getBannerIconColor(type, variant)}\n          className=\"Icon\"\n          fixedWidth\n          mt={100}\n          mr={350}\n          {...typeIconProps}\n        />\n        {text}\n        {onClose && (\n          <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n              <Icon name=\"x-outline\" aria-hidden />\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </Container>\n  );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n  type: EnumBannerType;\n  variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n  (props) => css`\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    justify-content: space-between;\n    color: ${props.theme.colors.text.body};\n    border-radius: ${props.theme.radii.outer};\n    font-family: ${props.theme.fontFamily};\n    ${props.theme.typography[200]}\n    padding: ${props.theme.space[300]};\n    border: 1px solid\n      ${props.variant === \"ghost\"\n        ? props.theme.colors.container.border.base\n        : props.theme.colors.container.border[props.type]};\n    background-color: ${props.variant === \"ghost\"\n      ? props.theme.colors.container.background.base\n      : props.theme.colors.container.background[props.type]};\n\n    a,\n    button {\n      font-weight: ${props.theme.fontWeights.semibold};\n      color: ${props.theme.colors.text.body};\n      font-size: inherit;\n      &:hover {\n        color: ${props.theme.colors.text.body};\n        text-decoration: underline;\n      }\n    }\n\n    > span:not(.Icon) {\n      display: block;\n    }\n\n    ${COMMON}\n    ${LAYOUT}\n    ${FLEXBOX}\n  `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n  align-self: flex-start;\n  min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n  | \"success\"\n  | \"info\"\n  | \"error\"\n  | \"warning\"\n  | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeSystemFlexboxProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\n  /** Variant of banner. */\n  variant?: EnumBannerVariant;\n  /** Show the close icon in the banner with an action when clicked */\n  onClose?: () => void;\n  /** Close icon aria label */\n  closeButtonLabel?: string;\n  /** Icon props that can be passed to the Type specific Icon */\n  typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n","import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n"],"mappings":"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","names":["Icon","Icon"]}
+{"version":3,"sources":["../../src/Banner.tsx","../../src/BannerHybrid.tsx","../../src/styles.ts","../../src/BannerTailwind.tsx","../../src/bannerIcon.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        type={type}\n        variant={variant}\n        data-qa-alert=\"\"\n        data-qa-alert-type={type}\n        data-qa-alert-text={text}\n        {...rest}\n      >\n        <Box display=\"flex\" alignItems=\"center\" width={1}>\n          <StyledBannerIcon\n            name={getBannerIconName(type)}\n            color={getBannerIconColor(type, variant)}\n            className=\"Icon\"\n            fixedWidth\n            mt={100}\n            mr={350}\n            {...typeIconProps}\n          />\n          {text}\n          {onClose && (\n            <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n              <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n                <Icon name=\"x-outline\" aria-hidden />\n              </Button>\n            </Box>\n          )}\n        </Box>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <BannerTailwind\n      type={type}\n      variant={variant}\n      text={text}\n      onClose={onClose}\n      closeButtonLabel={closeButtonLabel}\n      typeIconProps={typeIconProps}\n      {...rest}\n    />\n  );\n};\n\nexport default BannerHybrid;\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n  type: EnumBannerType;\n  variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n  (props) => css`\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    justify-content: space-between;\n    color: ${props.theme.colors.text.body};\n    border-radius: ${props.theme.radii.outer};\n    font-family: ${props.theme.fontFamily};\n    ${props.theme.typography[200]}\n    padding: ${props.theme.space[300]};\n    border: 1px solid\n      ${props.variant === \"ghost\"\n        ? props.theme.colors.container.border.base\n        : props.theme.colors.container.border[props.type]};\n    background-color: ${props.variant === \"ghost\"\n      ? props.theme.colors.container.background.base\n      : props.theme.colors.container.background[props.type]};\n\n    a,\n    button {\n      font-weight: ${props.theme.fontWeights.semibold};\n      color: ${props.theme.colors.text.body};\n      font-size: inherit;\n      &:hover {\n        color: ${props.theme.colors.text.body};\n        text-decoration: underline;\n      }\n    }\n\n    > span:not(.Icon) {\n      display: block;\n    }\n\n    ${COMMON}\n    ${LAYOUT}\n    ${FLEXBOX}\n  `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n  align-self: flex-start;\n  min-width: 16px;\n`;\n","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  className,\n  ...rest\n}: TypeBannerProps) => {\n  const variantClass =\n    variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n  return (\n    <div\n      className={cn(\"seeds-banner\", variantClass, className)}\n      data-qa-alert=\"\"\n      data-qa-alert-type={type}\n      data-qa-alert-text={text}\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n    >\n      <Box display=\"flex\" alignItems=\"center\" width={1}>\n        <Icon\n          name={getBannerIconName(type)}\n          color={getBannerIconColor(type, variant)}\n          className=\"Icon seeds-banner-icon\"\n          fixedWidth\n          mt={100}\n          mr={350}\n          {...typeIconProps}\n        />\n        {text}\n        {onClose && (\n          <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n              <Icon name=\"x-outline\" aria-hidden />\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </div>\n  );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const getBannerIconName = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"circle-check-outline\";\n    case \"error\":\n      return \"triangle-exclamation-outline\";\n    case \"warning\":\n      return \"triangle-exclamation-outline\";\n    case \"opportunity\":\n      return \"gem-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nexport const getBannerIconColor = (\n  type: EnumBannerType,\n  variant: EnumBannerVariant\n) => {\n  const isGhostVariant = variant === \"ghost\";\n  switch (type) {\n    case \"success\":\n      return isGhostVariant\n        ? \"container.border.decorative.green\"\n        : \"icon.success\";\n    case \"error\":\n      return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n    case \"warning\":\n      return isGhostVariant\n        ? \"container.border.decorative.yellow\"\n        : \"icon.warning\";\n    case \"opportunity\":\n      return isGhostVariant\n        ? \"container.border.decorative.purple\"\n        : \"icon.opportunity\";\n    case \"info\":\n    default:\n      return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n  }\n};\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n  | \"success\"\n  | \"info\"\n  | \"error\"\n  | \"warning\"\n  | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeSystemFlexboxProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\n  /** Variant of banner. */\n  variant?: EnumBannerVariant;\n  /** Show the close icon in the banner with an action when clicked */\n  onClose?: () => void;\n  /** Close icon aria label */\n  closeButtonLabel?: string;\n  /** Icon props that can be passed to the Type specific Icon */\n  typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n","import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n"],"mappings":"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","names":["Box","Button","Icon","Icon","Icon","jsx","jsxs","Box","Button","Icon","jsx"]}

package/dist/index.d.mts

@@ -19,7 +19,11 @@ interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
     typeIconProps?: Partial<Omit<TypeIconProps, "name">>;
 }
 
-/** TODO: change to 'info' type by default in future version */
-declare const Banner: ({ type, variant, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Banner component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
+declare const Banner: (props: TypeBannerProps) => react_jsx_runtime.JSX.Element;
 
 export { Banner, type EnumBannerType, type EnumBannerVariant, type TypeBannerProps, Banner as default };

package/dist/index.d.ts

@@ -19,7 +19,11 @@ interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
     typeIconProps?: Partial<Omit<TypeIconProps, "name">>;
 }
 
-/** TODO: change to 'info' type by default in future version */
-declare const Banner: ({ type, variant, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Banner component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
+declare const Banner: (props: TypeBannerProps) => react_jsx_runtime.JSX.Element;
 
 export { Banner, type EnumBannerType, type EnumBannerVariant, type TypeBannerProps, Banner as default };

package/dist/index.js

@@ -36,10 +36,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Banner.tsx
-var React = require("react");
-var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
-var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var React3 = require("react");
+
+// src/BannerHybrid.tsx
+var React2 = require("react");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -86,8 +89,13 @@ var StyledBannerIcon = (0, import_styled_components.default)(import_seeds_react_
   min-width: 16px;
 `;
 
-// src/Banner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/BannerTailwind.tsx
+var React = require("react");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// src/bannerIcon.ts
 var getBannerIconName = (type) => {
   switch (type) {
     case "success":
@@ -119,31 +127,51 @@ var getBannerIconColor = (type, variant) => {
       return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
   }
 };
-var Banner = ({
+
+// src/BannerTailwind.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var BannerTailwind = ({
   type = "info",
   variant = "default",
   text,
   onClose,
   closeButtonLabel = "Close",
   typeIconProps,
+  className,
   ...rest
 }) => {
+  const variantClass = variant === "ghost" ? "seeds-banner-ghost" : `seeds-banner-${type}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    styles_default,
+    "div",
     {
-      type,
-      variant,
+      className: cn("seeds-banner", variantClass, className),
       "data-qa-alert": "",
       "data-qa-alert-type": type,
       "data-qa-alert-text": text,
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { display: "flex", alignItems: "center", width: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledBannerIcon,
+          import_seeds_react_icon2.default,
           {
             name: getBannerIconName(type),
             color: getBannerIconColor(type, variant),
-            className: "Icon",
+            className: "Icon seeds-banner-icon",
             fixedWidth: true,
             mt: 100,
             mr: 350,
@@ -156,10 +184,71 @@ var Banner = ({
     }
   );
 };
+var BannerTailwind_default = BannerTailwind;
+
+// src/BannerHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BannerHybrid = ({
+  type = "info",
+  variant = "default",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      styles_default,
+      {
+        type,
+        variant,
+        "data-qa-alert": "",
+        "data-qa-alert-type": type,
+        "data-qa-alert-text": text,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", width: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            StyledBannerIcon,
+            {
+              name: getBannerIconName(type),
+              color: getBannerIconColor(type, variant),
+              className: "Icon",
+              fixedWidth: true,
+              mt: 100,
+              mr: 350,
+              ...typeIconProps
+            }
+          ),
+          text,
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { ml: "auto", pl: 400, alignSelf: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_button2.default, { p: 0, onClick: onClose, ariaLabel: closeButtonLabel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon3.default, { name: "x-outline", "aria-hidden": true }) }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    BannerTailwind_default,
+    {
+      type,
+      variant,
+      text,
+      onClose,
+      closeButtonLabel,
+      typeIconProps,
+      ...rest
+    }
+  );
+};
+var BannerHybrid_default = BannerHybrid;
+
+// src/Banner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Banner = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BannerHybrid_default, { ...props });
 var Banner_default = Banner;
 
 // src/BannerTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Banner_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/styles.ts","../src/BannerTypes.ts"],"sourcesContent":["import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n  TypeBannerProps,\n  EnumBannerType,\n  EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"circle-check-outline\";\n    case \"error\":\n      return \"triangle-exclamation-outline\";\n    case \"warning\":\n      return \"triangle-exclamation-outline\";\n    case \"opportunity\":\n      return \"gem-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nconst getBannerIconColor = (\n  type: EnumBannerType,\n  variant: EnumBannerVariant\n) => {\n  const isGhostVariant = variant === \"ghost\";\n  switch (type) {\n    case \"success\":\n      return isGhostVariant\n        ? \"container.border.decorative.green\"\n        : \"icon.success\";\n    case \"error\":\n      return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n    case \"warning\":\n      return isGhostVariant\n        ? \"container.border.decorative.yellow\"\n        : \"icon.warning\";\n    case \"opportunity\":\n      return isGhostVariant\n        ? \"container.border.decorative.purple\"\n        : \"icon.opportunity\";\n    case \"info\":\n    default:\n      return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n  }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  return (\n    <Container\n      type={type}\n      variant={variant}\n      data-qa-alert=\"\"\n      data-qa-alert-type={type}\n      data-qa-alert-text={text}\n      {...rest}\n    >\n      <Box display=\"flex\" alignItems=\"center\" width={1}>\n        <StyledBannerIcon\n          name={getBannerIconName(type)}\n          color={getBannerIconColor(type, variant)}\n          className=\"Icon\"\n          fixedWidth\n          mt={100}\n          mr={350}\n          {...typeIconProps}\n        />\n        {text}\n        {onClose && (\n          <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n              <Icon name=\"x-outline\" aria-hidden />\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </Container>\n  );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n  type: EnumBannerType;\n  variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n  (props) => css`\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    justify-content: space-between;\n    color: ${props.theme.colors.text.body};\n    border-radius: ${props.theme.radii.outer};\n    font-family: ${props.theme.fontFamily};\n    ${props.theme.typography[200]}\n    padding: ${props.theme.space[300]};\n    border: 1px solid\n      ${props.variant === \"ghost\"\n        ? props.theme.colors.container.border.base\n        : props.theme.colors.container.border[props.type]};\n    background-color: ${props.variant === \"ghost\"\n      ? props.theme.colors.container.background.base\n      : props.theme.colors.container.background[props.type]};\n\n    a,\n    button {\n      font-weight: ${props.theme.fontWeights.semibold};\n      color: ${props.theme.colors.text.body};\n      font-size: inherit;\n      &:hover {\n        color: ${props.theme.colors.text.body};\n        text-decoration: underline;\n      }\n    }\n\n    > span:not(.Icon) {\n      display: block;\n    }\n\n    ${COMMON}\n    ${LAYOUT}\n    ${FLEXBOX}\n  `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n  align-self: flex-start;\n  min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n  | \"success\"\n  | \"info\"\n  | \"error\"\n  | \"warning\"\n  | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeSystemFlexboxProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\n  /** Variant of banner. */\n  variant?: EnumBannerVariant;\n  /** Show the close icon in the banner with an action when clicked */\n  onClose?: () => void;\n  /** Close icon aria label */\n  closeButtonLabel?: string;\n  /** Icon props that can be passed to the Type specific Icon */\n  typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n"],"mappings":"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","names":["import_seeds_react_icon","styled","Icon","Box","Button","Icon","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/BannerHybrid.tsx","../src/styles.ts","../src/BannerTailwind.tsx","../src/bannerIcon.ts","../src/BannerTypes.ts"],"sourcesContent":["import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n","import * as React from \"react\";\nimport BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        type={type}\n        variant={variant}\n        data-qa-alert=\"\"\n        data-qa-alert-type={type}\n        data-qa-alert-text={text}\n        {...rest}\n      >\n        <Box display=\"flex\" alignItems=\"center\" width={1}>\n          <StyledBannerIcon\n            name={getBannerIconName(type)}\n            color={getBannerIconColor(type, variant)}\n            className=\"Icon\"\n            fixedWidth\n            mt={100}\n            mr={350}\n            {...typeIconProps}\n          />\n          {text}\n          {onClose && (\n            <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n              <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n                <Icon name=\"x-outline\" aria-hidden />\n              </Button>\n            </Box>\n          )}\n        </Box>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <BannerTailwind\n      type={type}\n      variant={variant}\n      text={text}\n      onClose={onClose}\n      closeButtonLabel={closeButtonLabel}\n      typeIconProps={typeIconProps}\n      {...rest}\n    />\n  );\n};\n\nexport default BannerHybrid;\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n  type: EnumBannerType;\n  variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n  (props) => css`\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    justify-content: space-between;\n    color: ${props.theme.colors.text.body};\n    border-radius: ${props.theme.radii.outer};\n    font-family: ${props.theme.fontFamily};\n    ${props.theme.typography[200]}\n    padding: ${props.theme.space[300]};\n    border: 1px solid\n      ${props.variant === \"ghost\"\n        ? props.theme.colors.container.border.base\n        : props.theme.colors.container.border[props.type]};\n    background-color: ${props.variant === \"ghost\"\n      ? props.theme.colors.container.background.base\n      : props.theme.colors.container.background[props.type]};\n\n    a,\n    button {\n      font-weight: ${props.theme.fontWeights.semibold};\n      color: ${props.theme.colors.text.body};\n      font-size: inherit;\n      &:hover {\n        color: ${props.theme.colors.text.body};\n        text-decoration: underline;\n      }\n    }\n\n    > span:not(.Icon) {\n      display: block;\n    }\n\n    ${COMMON}\n    ${LAYOUT}\n    ${FLEXBOX}\n  `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n  align-self: flex-start;\n  min-width: 16px;\n`;\n","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n  type = \"info\",\n  variant = \"default\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  className,\n  ...rest\n}: TypeBannerProps) => {\n  const variantClass =\n    variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n  return (\n    <div\n      className={cn(\"seeds-banner\", variantClass, className)}\n      data-qa-alert=\"\"\n      data-qa-alert-type={type}\n      data-qa-alert-text={text}\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n    >\n      <Box display=\"flex\" alignItems=\"center\" width={1}>\n        <Icon\n          name={getBannerIconName(type)}\n          color={getBannerIconColor(type, variant)}\n          className=\"Icon seeds-banner-icon\"\n          fixedWidth\n          mt={100}\n          mr={350}\n          {...typeIconProps}\n        />\n        {text}\n        {onClose && (\n          <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n              <Icon name=\"x-outline\" aria-hidden />\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </div>\n  );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const getBannerIconName = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"circle-check-outline\";\n    case \"error\":\n      return \"triangle-exclamation-outline\";\n    case \"warning\":\n      return \"triangle-exclamation-outline\";\n    case \"opportunity\":\n      return \"gem-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nexport const getBannerIconColor = (\n  type: EnumBannerType,\n  variant: EnumBannerVariant\n) => {\n  const isGhostVariant = variant === \"ghost\";\n  switch (type) {\n    case \"success\":\n      return isGhostVariant\n        ? \"container.border.decorative.green\"\n        : \"icon.success\";\n    case \"error\":\n      return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n    case \"warning\":\n      return isGhostVariant\n        ? \"container.border.decorative.yellow\"\n        : \"icon.warning\";\n    case \"opportunity\":\n      return isGhostVariant\n        ? \"container.border.decorative.purple\"\n        : \"icon.opportunity\";\n    case \"info\":\n    default:\n      return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n  }\n};\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n  | \"success\"\n  | \"info\"\n  | \"error\"\n  | \"warning\"\n  | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeSystemFlexboxProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\n  /** Variant of banner. */\n  variant?: EnumBannerVariant;\n  /** Show the close icon in the banner with an action when clicked */\n  onClose?: () => void;\n  /** Close icon aria label */\n  closeButtonLabel?: string;\n  /** Icon props that can be passed to the Type specific Icon */\n  typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACKvB,IAAAC,SAAuB;AACvB,IAAAC,0BAAgB;AAChB,IAAAC,6BAAmB;AACnB,IAAAC,2BAAiB;;;ACRjB,+BAA4B;AAC5B,sCAIO;AACP,8BAAiB;AAQjB,IAAM,YAAY,yBAAAC,QAAO;AAAA,EACvB,CAAC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKA,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,qBACpB,MAAM,MAAM,MAAM,KAAK;AAAA,mBACzB,MAAM,MAAM,UAAU;AAAA,MACnC,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,eAClB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,QAE7B,MAAM,YAAY,UAChB,MAAM,MAAM,OAAO,UAAU,OAAO,OACpC,MAAM,MAAM,OAAO,UAAU,OAAO,MAAM,IAAI,CAAC;AAAA,wBACjC,MAAM,YAAY,UAClC,MAAM,MAAM,OAAO,UAAU,WAAW,OACxC,MAAM,MAAM,OAAO,UAAU,WAAW,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItC,MAAM,MAAM,YAAY,QAAQ;AAAA,eACtC,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,iBAG1B,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASvC,sCAAM;AAAA,MACN,sCAAM;AAAA,MACN,uCAAO;AAAA;AAEb;AAEA,IAAO,iBAAQ;AAER,IAAM,uBAAmB,yBAAAA,SAAO,wBAAAC,OAAI;AAAA;AAAA;AAAA;;;ACnD3C,YAAuB;AACvB,6BAAgB;AAChB,gCAAmB;AACnB,IAAAC,2BAAiB;;;ACNV,IAAM,oBAAoB,CAAC,SAAyB;AACzD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,qBAAqB,CAChC,MACA,YACG;AACH,QAAM,iBAAiB,YAAY;AACnC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,iBACH,sCACA;AAAA,IACN,KAAK;AACH,aAAO,iBAAiB,oCAAoC;AAAA,IAC9D,KAAK;AACH,aAAO,iBACH,uCACA;AAAA,IACN,KAAK;AACH,aAAO,iBACH,uCACA;AAAA,IACN,KAAK;AAAA,IACL;AACE,aAAO,iBAAiB,qCAAqC;AAAA,EACjE;AACF;;;ADeM;AA5CN,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,IAAM,iBAAiB,CAAC;AAAA,EACtB,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,QAAM,eACJ,YAAY,UAAU,uBAAuB,gBAAgB,IAAI;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,gBAAgB,cAAc,SAAS;AAAA,MACrD,iBAAc;AAAA,MACd,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACnB,GAAI;AAAA,MAEL,uDAAC,uBAAAC,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAAC,yBAAAC;AAAA,UAAA;AAAA,YACC,MAAM,kBAAkB,IAAI;AAAA,YAC5B,OAAO,mBAAmB,MAAM,OAAO;AAAA,YACvC,WAAU;AAAA,YACV,YAAU;AAAA,YACV,IAAI;AAAA,YACJ,IAAI;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC;AAAA,QACA,WACC,4CAAC,uBAAAD,SAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,sDAAC,0BAAAE,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,sDAAC,yBAAAD,SAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;;;AFpEf,IAAAE,mCAA+B;AAuBvB,IAAAC,sBAAA;AAnBR,IAAM,eAAe,CAAC;AAAA,EACpB,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,UAAI,iDAAe,IAAI,GAAG;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACnB,GAAG;AAAA,QAEJ,wDAAC,wBAAAC,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,kBAAkB,IAAI;AAAA,cAC5B,OAAO,mBAAmB,MAAM,OAAO;AAAA,cACvC,WAAU;AAAA,cACV,YAAU;AAAA,cACV,IAAI;AAAA,cACJ,IAAI;AAAA,cACH,GAAG;AAAA;AAAA,UACN;AAAA,UACC;AAAA,UACA,WACC,6CAAC,wBAAAA,SAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,uDAAC,2BAAAC,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,uDAAC,yBAAAC,SAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,uBAAQ;;;AD/D4B,IAAAC,sBAAA;AAA3C,IAAM,SAAS,CAAC,UAA2B,6CAAC,wBAAc,GAAG,OAAO;AAEpE,IAAO,iBAAQ;;;AKXf,IAAAC,SAAuB;;;ANEvB,IAAO,gBAAQ;","names":["React","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","styled","Icon","import_seeds_react_icon","Box","Icon","Button","import_seeds_react_system_props","import_jsx_runtime","Box","Button","Icon","import_jsx_runtime","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-banner",
-  "version": "1.1.11",
+  "version": "1.1.22",
   "description": "Seeds React Banner",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-button": "^2.0.4",
-    "@sproutsocial/seeds-react-icon": "^2.3.6"
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.21",
+    "@sproutsocial/seeds-react-button": "^2.2.1",
+    "@sproutsocial/seeds-react-icon": "^2.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -35,8 +35,8 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-text": "^1.4.0",
-    "@sproutsocial/seeds-react-link": "^1.1.6"
+    "@sproutsocial/seeds-react-text": "^1.4.3",
+    "@sproutsocial/seeds-react-link": "^1.1.12"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Banner.stories.tsx

@@ -157,3 +157,27 @@ export const HiddenIcon: Story = {
   ),
   name: "With aria-hidden Icon",
 };
+
+/**
+ * Demonstrates that Tailwind utility classes passed via `className` override the
+ * component's own CSS. Because `banner.css` lives in `@layer components`, the
+ * utilities below win the cascade: `bg-[#FF6B00]` paints a loud orange
+ * background over the banner's own decorative fill, `text-[#FFFFFF]` flips the
+ * text to white for contrast, `p-300` replaces the default `--space-300`
+ * padding, `mx-200` adds horizontal margin, and `inline-flex` overrides the
+ * default `display: flex`. If the `@layer components` wrapper were missing, the
+ * unlayered component rules would beat these utilities and the orange background
+ * would never show.
+ */
+export const TailwindOverrides: Story = {
+  render: (args) => (
+    <Banner
+      text={findText(args.type)}
+      type={args.type}
+      variant={args.variant}
+      typeIconProps={{ "aria-label": args.type }}
+      className="bg-[#FF6B00] text-[#FFFFFF] mx-200 p-300 inline-flex"
+    />
+  ),
+  name: "🚀 Tailwind class overrides",
+};

package/src/Banner.tsx

@@ -1,96 +1,12 @@
 import * as React from "react";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Container, { StyledBannerIcon } from "./styles";
-import type {
-  TypeBannerProps,
-  EnumBannerType,
-  EnumBannerVariant,
-} from "./BannerTypes";
-
-const getBannerIconName = (type: EnumBannerType) => {
-  switch (type) {
-    case "success":
-      return "circle-check-outline";
-    case "error":
-      return "triangle-exclamation-outline";
-    case "warning":
-      return "triangle-exclamation-outline";
-    case "opportunity":
-      return "gem-outline";
-    case "info":
-    default:
-      return "circle-i-outline";
-  }
-};
-
-const getBannerIconColor = (
-  type: EnumBannerType,
-  variant: EnumBannerVariant
-) => {
-  const isGhostVariant = variant === "ghost";
-  switch (type) {
-    case "success":
-      return isGhostVariant
-        ? "container.border.decorative.green"
-        : "icon.success";
-    case "error":
-      return isGhostVariant ? "container.border.decorative.red" : "icon.error";
-    case "warning":
-      return isGhostVariant
-        ? "container.border.decorative.yellow"
-        : "icon.warning";
-    case "opportunity":
-      return isGhostVariant
-        ? "container.border.decorative.purple"
-        : "icon.opportunity";
-    case "info":
-    default:
-      return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
-  }
-};
-
-/** TODO: change to 'info' type by default in future version */
-const Banner = ({
-  type = "info",
-  variant = "default",
-  text,
-  onClose,
-  closeButtonLabel = "Close",
-  typeIconProps,
-  ...rest
-}: TypeBannerProps) => {
-  return (
-    <Container
-      type={type}
-      variant={variant}
-      data-qa-alert=""
-      data-qa-alert-type={type}
-      data-qa-alert-text={text}
-      {...rest}
-    >
-      <Box display="flex" alignItems="center" width={1}>
-        <StyledBannerIcon
-          name={getBannerIconName(type)}
-          color={getBannerIconColor(type, variant)}
-          className="Icon"
-          fixedWidth
-          mt={100}
-          mr={350}
-          {...typeIconProps}
-        />
-        {text}
-        {onClose && (
-          <Box ml="auto" pl={400} alignSelf="flex-start">
-            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>
-              <Icon name="x-outline" aria-hidden />
-            </Button>
-          </Box>
-        )}
-      </Box>
-    </Container>
-  );
-};
+import BannerHybrid from "./BannerHybrid";
+import type { TypeBannerProps } from "./BannerTypes";
+
+/**
+ * Banner component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
+const Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;
 
 export default Banner;

package/src/BannerHybrid.tsx

@@ -0,0 +1,73 @@
+/**
+ * Hybrid Banner Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ */
+
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Container, { StyledBannerIcon } from "./styles"; // Styled-components version
+import BannerTailwind from "./BannerTailwind"; // Tailwind version
+import { getBannerIconName, getBannerIconColor } from "./bannerIcon";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeBannerProps } from "./BannerTypes";
+
+/** TODO: change to 'info' type by default in future version */
+const BannerHybrid = ({
+  type = "info",
+  variant = "default",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}: TypeBannerProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <Container
+        type={type}
+        variant={variant}
+        data-qa-alert=""
+        data-qa-alert-type={type}
+        data-qa-alert-text={text}
+        {...rest}
+      >
+        <Box display="flex" alignItems="center" width={1}>
+          <StyledBannerIcon
+            name={getBannerIconName(type)}
+            color={getBannerIconColor(type, variant)}
+            className="Icon"
+            fixedWidth
+            mt={100}
+            mr={350}
+            {...typeIconProps}
+          />
+          {text}
+          {onClose && (
+            <Box ml="auto" pl={400} alignSelf="flex-start">
+              <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>
+                <Icon name="x-outline" aria-hidden />
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </Container>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return (
+    <BannerTailwind
+      type={type}
+      variant={variant}
+      text={text}
+      onClose={onClose}
+      closeButtonLabel={closeButtonLabel}
+      typeIconProps={typeIconProps}
+      {...rest}
+    />
+  );
+};
+
+export default BannerHybrid;

package/src/BannerTailwind.tsx

@@ -0,0 +1,81 @@
+/**
+ * Tailwind CSS implementation of Banner component
+ * Uses Seeds banner CSS classes from banner.css
+ */
+
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { getBannerIconName, getBannerIconColor } from "./bannerIcon";
+import type { TypeBannerProps } from "./BannerTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+/** TODO: change to 'info' type by default in future version */
+const BannerTailwind = ({
+  type = "info",
+  variant = "default",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  className,
+  ...rest
+}: TypeBannerProps) => {
+  const variantClass =
+    variant === "ghost" ? "seeds-banner-ghost" : `seeds-banner-${type}`;
+
+  return (
+    <div
+      className={cn("seeds-banner", variantClass, className)}
+      data-qa-alert=""
+      data-qa-alert-type={type}
+      data-qa-alert-text={text}
+      {...(rest as React.HTMLAttributes<HTMLDivElement>)}
+    >
+      <Box display="flex" alignItems="center" width={1}>
+        <Icon
+          name={getBannerIconName(type)}
+          color={getBannerIconColor(type, variant)}
+          className="Icon seeds-banner-icon"
+          fixedWidth
+          mt={100}
+          mr={350}
+          {...typeIconProps}
+        />
+        {text}
+        {onClose && (
+          <Box ml="auto" pl={400} alignSelf="flex-start">
+            <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>
+              <Icon name="x-outline" aria-hidden />
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+};
+
+export default BannerTailwind;

package/src/__tests__/features.test.tsx

@@ -99,26 +99,17 @@ describe("Banner", () => {
   });
 
   describe("variant ghost", () => {
-    it("should set the correct background color", () => {
+    // The Tailwind path renders the banner as a plain element with the
+    // `seeds-banner-ghost` class. That class maps to the same base
+    // background/border tokens (var(--color-container-bg-base) /
+    // var(--color-container-border-base)) in banner.css, so we assert the
+    // class is applied rather than the styled-components computed rule.
+    it("should apply the ghost variant class", () => {
       render(<Banner text="Warning: Banner Text" variant="ghost" />);
 
       expect(
         screen.getByDataQaLabel({ "alert-text": "Warning: Banner Text" })
-      ).toHaveStyleRule(
-        "background-color",
-        theme.colors.container.background.base
-      );
-    });
-
-    it("should set the correct border color", () => {
-      render(<Banner text="Warning: Banner Text" variant="ghost" />);
-
-      expect(
-        screen.getByDataQaLabel({ "alert-text": "Warning: Banner Text" })
-      ).toHaveStyleRule(
-        "border",
-        `1px solid ${theme.colors.container.border.base}`
-      );
+      ).toHaveClass("seeds-banner-ghost");
     });
 
     it("should set the correct icon color", () => {

package/src/__tests__/tailwind.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Banner from "../Banner";
+
+describe("Banner Tailwind path", () => {
+  it("renders with the seeds-banner and type class when no styled props are used", () => {
+    render(<Banner text="Tailwind Banner" />);
+    const el = screen.getByDataQaLabel({ "alert-text": "Tailwind Banner" });
+    expect(el).toHaveClass("seeds-banner");
+    expect(el).toHaveClass("seeds-banner-info");
+  });
+
+  it("applies the per-type class", () => {
+    render(<Banner text="Error Banner" type="error" />);
+    expect(
+      screen.getByDataQaLabel({ "alert-text": "Error Banner" })
+    ).toHaveClass("seeds-banner-error");
+  });
+
+  it("forwards a consumer className (styled() extension passthrough)", () => {
+    render(<Banner text="Class Banner" className="sc-extension" />);
+    const el = screen.getByDataQaLabel({ "alert-text": "Class Banner" });
+    expect(el).toHaveClass("seeds-banner");
+    expect(el).toHaveClass("sc-extension");
+  });
+
+  it("routes system props (mt) to the styled-components path", () => {
+    render(<Banner text="Spaced Banner" mt={300} />);
+    expect(
+      screen.getByDataQaLabel({ "alert-text": "Spaced Banner" })
+    ).not.toHaveClass("seeds-banner");
+  });
+});

package/src/banner.css

@@ -0,0 +1,77 @@
+/**
+ * Seeds Banner component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-banner {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--color-text-body);
+    border-radius: var(--radius-outer);
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    padding: var(--space-300);
+  }
+
+  .seeds-banner a,
+  .seeds-banner button {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    font-size: inherit;
+  }
+
+  .seeds-banner a:hover,
+  .seeds-banner button:hover {
+    color: var(--color-text-body);
+    text-decoration: underline;
+  }
+
+  .seeds-banner > span:not(.Icon) {
+    display: block;
+  }
+
+  .seeds-banner-icon {
+    align-self: flex-start;
+    min-width: 16px;
+  }
+
+  .seeds-banner-ghost {
+    border: 1px solid var(--color-container-border-base);
+    background-color: var(--color-container-bg-base);
+  }
+
+  .seeds-banner-success {
+    border: 1px solid var(--color-container-border-success);
+    background-color: var(--color-container-bg-success);
+  }
+
+  .seeds-banner-info {
+    border: 1px solid var(--color-container-border-info);
+    background-color: var(--color-container-bg-info);
+  }
+
+  .seeds-banner-error {
+    border: 1px solid var(--color-container-border-error);
+    background-color: var(--color-container-bg-error);
+  }
+
+  .seeds-banner-warning {
+    border: 1px solid var(--color-container-border-warning);
+    background-color: var(--color-container-bg-warning);
+  }
+
+  .seeds-banner-opportunity {
+    border: 1px solid var(--color-container-border-opportunity);
+    background-color: var(--color-container-bg-opportunity);
+  }
+}

package/src/bannerIcon.ts

@@ -0,0 +1,43 @@
+import type { EnumBannerType, EnumBannerVariant } from "./BannerTypes";
+
+export const getBannerIconName = (type: EnumBannerType) => {
+  switch (type) {
+    case "success":
+      return "circle-check-outline";
+    case "error":
+      return "triangle-exclamation-outline";
+    case "warning":
+      return "triangle-exclamation-outline";
+    case "opportunity":
+      return "gem-outline";
+    case "info":
+    default:
+      return "circle-i-outline";
+  }
+};
+
+export const getBannerIconColor = (
+  type: EnumBannerType,
+  variant: EnumBannerVariant
+) => {
+  const isGhostVariant = variant === "ghost";
+  switch (type) {
+    case "success":
+      return isGhostVariant
+        ? "container.border.decorative.green"
+        : "icon.success";
+    case "error":
+      return isGhostVariant ? "container.border.decorative.red" : "icon.error";
+    case "warning":
+      return isGhostVariant
+        ? "container.border.decorative.yellow"
+        : "icon.warning";
+    case "opportunity":
+      return isGhostVariant
+        ? "container.border.decorative.purple"
+        : "icon.opportunity";
+    case "info":
+    default:
+      return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
+  }
+};