@sproutsocial/seeds-react-banner 1.1.39 → 1.1.41

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     9.00 KB
-CJS dist/index.js.map 12.96 KB
-CJS ⚡️ Build success in 69ms
-ESM dist/esm/index.js     6.31 KB
-ESM dist/esm/index.js.map 12.74 KB
-ESM ⚡️ Build success in 69ms
+CJS dist/index.js     9.19 KB
+CJS dist/index.js.map 13.16 KB
+CJS ⚡️ Build success in 97ms
+ESM dist/esm/index.js     6.50 KB
+ESM dist/esm/index.js.map 12.94 KB
+ESM ⚡️ Build success in 97ms
 DTS Build start
-DTS ⚡️ Build success in 4469ms
+DTS ⚡️ Build success in 4991ms
 DTS dist/index.d.ts  1.42 KB
 DTS dist/index.d.mts 1.42 KB
-Done in 5.95s.
+Done in 6.69s.

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sproutsocial/seeds-react-banner
 
+## 1.1.41
+
+### Patch Changes
+
+- 0f2fba6: Banner no longer overrides the text colour of Seeds Buttons rendered inside it (secondary Buttons were invisible on hover). Plain anchors/buttons and Links keep Banner's inline-action styling.
+  - @sproutsocial/seeds-react-theme@4.8.1
+  - @sproutsocial/seeds-react-box@1.1.37
+  - @sproutsocial/seeds-react-icon@2.5.7
+  - @sproutsocial/seeds-react-button@2.3.14
+
+## 1.1.40
+
+### Patch Changes
+
+- Updated dependencies [ab16bd9]
+- Updated dependencies [9976faa]
+- Updated dependencies [9976faa]
+  - @sproutsocial/seeds-react-theme@4.8.0
+  - @sproutsocial/seeds-react-system-props@3.3.0
+  - @sproutsocial/seeds-react-box@1.1.36
+  - @sproutsocial/seeds-react-icon@2.5.6
+  - @sproutsocial/seeds-react-button@2.3.13
+
 ## 1.1.39
 
 ### Patch Changes

package/dist/esm/index.js

@@ -30,8 +30,10 @@ var Container = styled.div(
       ${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
     background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
 
-    a,
-    button {
+    /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
+       Plain anchors/buttons and Seeds Links keep the inline-action styling. */
+    a:not(.seeds-btn),
+    button:not(.seeds-btn) {
       font-weight: ${props.theme.fontWeights.semibold};
       color: ${props.theme.colors.text.body};
       font-size: inherit;

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"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":";AAAA,OAAuB;;;ACKvB,OAAuB;AACvB,OAAOA,UAAS;AAChB,OAAOC,aAAY;AACnB,OAAOC,WAAU;;;ACRjB,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AAQjB,IAAM,YAAY,OAAO;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,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA;AAEb;AAEA,IAAO,iBAAQ;AAER,IAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;;;ACnD3C,OAAuB;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAOC,WAAU;;;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,SACE,KADF;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,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAACC;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,oBAAC,OAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,8BAAC,UAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,8BAACA,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;;;AFpEf,SAAS,sBAAsB;AAuBvB,SACE,OAAAC,MADF,QAAAC,aAAA;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,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACnB,GAAG;AAAA,QAEJ,0BAAAC,MAACC,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA,0BAAAF;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,gBAAAA,KAACE,MAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,0BAAAF,KAACG,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,0BAAAH,KAACI,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE,gBAAAJ;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,gBAAAK,YAAA;AAA3C,IAAM,SAAS,CAAC,UAA2B,gBAAAA,KAAC,wBAAc,GAAG,OAAO;AAEpE,IAAO,iBAAQ;;;AKXf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Box","Button","Icon","Icon","Icon","jsx","jsxs","Box","Button","Icon","jsx"]}
+{"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    /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.\n       Plain anchors/buttons and Seeds Links keep the inline-action styling. */\n    a:not(.seeds-btn),\n    button:not(.seeds-btn) {\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":";AAAA,OAAuB;;;ACKvB,OAAuB;AACvB,OAAOA,UAAS;AAChB,OAAOC,aAAY;AACnB,OAAOC,WAAU;;;ACRjB,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AAQjB,IAAM,YAAY,OAAO;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;AAAA;AAAA,qBAMtC,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,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA;AAEb;AAEA,IAAO,iBAAQ;AAER,IAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;;;ACrD3C,OAAuB;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAOC,WAAU;;;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,SACE,KADF;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,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAACC;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,oBAAC,OAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,8BAAC,UAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,8BAACA,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;;;AFpEf,SAAS,sBAAsB;AAuBvB,SACE,OAAAC,MADF,QAAAC,aAAA;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,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACnB,GAAG;AAAA,QAEJ,0BAAAC,MAACC,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA,0BAAAF;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,gBAAAA,KAACE,MAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,0BAAAF,KAACG,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,0BAAAH,KAACI,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE,gBAAAJ;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,gBAAAK,YAAA;AAA3C,IAAM,SAAS,CAAC,UAA2B,gBAAAA,KAAC,wBAAc,GAAG,OAAO;AAEpE,IAAO,iBAAQ;;;AKXf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Box","Button","Icon","Icon","Icon","jsx","jsxs","Box","Button","Icon","jsx"]}

package/dist/index.js

@@ -63,8 +63,10 @@ var Container = import_styled_components.default.div(
       ${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
     background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
 
-    a,
-    button {
+    /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
+       Plain anchors/buttons and Seeds Links keep the inline-action styling. */
+    a:not(.seeds-btn),
+    button:not(.seeds-btn) {
       font-weight: ${props.theme.fontWeights.semibold};
       color: ${props.theme.colors.text.body};
       font-size: inherit;

package/dist/index.js.map

@@ -1 +1 @@
-{"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":"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","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"]}
+{"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    /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.\n       Plain anchors/buttons and Seeds Links keep the inline-action styling. */\n    a:not(.seeds-btn),\n    button:not(.seeds-btn) {\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":"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","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.39",
+  "version": "1.1.41",
   "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": "^4.7.1",
-    "@sproutsocial/seeds-react-system-props": "^3.2.1",
-    "@sproutsocial/seeds-react-box": "^1.1.35",
-    "@sproutsocial/seeds-react-button": "^2.3.12",
-    "@sproutsocial/seeds-react-icon": "^2.5.5"
+    "@sproutsocial/seeds-react-theme": "^4.8.1",
+    "@sproutsocial/seeds-react-system-props": "^3.3.0",
+    "@sproutsocial/seeds-react-box": "^1.1.37",
+    "@sproutsocial/seeds-react-button": "^2.3.14",
+    "@sproutsocial/seeds-react-icon": "^2.5.7"
   },
   "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.5.5",
-    "@sproutsocial/seeds-react-link": "^1.1.27"
+    "@sproutsocial/seeds-react-text": "^1.5.6",
+    "@sproutsocial/seeds-react-link": "^1.1.29"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Banner.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Banner, type TypeBannerProps } from "./";
 import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
 import { Link } from "@sproutsocial/seeds-react-link";
 import { Text } from "@sproutsocial/seeds-react-text";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -106,6 +107,32 @@ export const Buttons: Story = {
   name: "With button",
 };
 
+export const WithSeedsButton: Story = {
+  render: (args) => (
+    <Banner
+      type={args.type}
+      variant={args.variant}
+      typeIconProps={args.typeIconProps}
+      text={
+        <Box
+          width={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text>{findText(args.type)}</Text>
+          <Box display="flex" alignItems="center" gap={300}>
+            <Link onClick={() => alert("Clicked")}>Learn more</Link>
+            <Button appearance="secondary">Secondary</Button>
+            <Button appearance="primary">Primary</Button>
+          </Box>
+        </Box>
+      }
+    />
+  ),
+  name: "With Seeds Button",
+};
+
 export const Multiline: Story = {
   args: {
     text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",

package/src/__tests__/banner.css.test.ts

@@ -0,0 +1,23 @@
+/* eslint-env jest, node */
+import fs from "fs";
+import path from "path";
+
+const cssPath = path.resolve(__dirname, "../banner.css");
+
+describe("Banner CSS", () => {
+  it("excludes Seeds Buttons from the descendant link/button rules", () => {
+    const css = fs.readFileSync(cssPath, "utf8");
+
+    expect(css).toContain(".seeds-banner a:not(.seeds-btn)");
+    expect(css).toContain(".seeds-banner button:not(.seeds-btn)");
+    expect(css).toContain(".seeds-banner a:not(.seeds-btn):hover");
+    expect(css).toContain(".seeds-banner button:not(.seeds-btn):hover");
+    expect(css).not.toContain("data-qa-button");
+  });
+
+  it("does not style bare descendant anchors or buttons", () => {
+    const css = fs.readFileSync(cssPath, "utf8");
+
+    expect(css).not.toMatch(/\.seeds-banner (a|button)(:hover)?\s*[,{]/);
+  });
+});

package/src/__tests__/features.test.tsx

@@ -1,5 +1,7 @@
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { theme } from "@sproutsocial/seeds-react-theme";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Link } from "@sproutsocial/seeds-react-link";
 import Banner from "../Banner";
 
 describe("Banner", () => {
@@ -120,4 +122,56 @@ describe("Banner", () => {
       ).toHaveStyleRule("color", theme.colors.container.border.decorative.blue);
     });
   });
+
+  describe("descendant Buttons", () => {
+    const getStyles = () =>
+      Array.from(document.head.querySelectorAll("style"))
+        .map((style) => style.textContent)
+        .join("\n");
+
+    it("marks Seeds Buttons with the seeds-btn class but not Links", () => {
+      render(
+        <Banner
+          mt={300}
+          text={
+            <>
+              <Button appearance="secondary">Act</Button>
+              <Link onClick={() => {}}>More</Link>
+              <Link href="https://example.com">Docs</Link>
+            </>
+          }
+        />
+      );
+
+      expect(screen.getByText("Act").closest("button")).toHaveClass(
+        "seeds-btn"
+      );
+      expect(screen.getByText("More").closest("button")).not.toHaveClass(
+        "seeds-btn"
+      );
+      expect(screen.getByText("Docs").closest("a")).not.toHaveClass(
+        "seeds-btn"
+      );
+    });
+
+    it("excludes Seeds Buttons from the styled Container link/button rules", () => {
+      render(
+        <Banner mt={300} text={<Button appearance="secondary">Act</Button>} />
+      );
+
+      const styles = getStyles();
+
+      expect(styles).toContain("a:not(.seeds-btn)");
+      expect(styles).toContain("button:not(.seeds-btn)");
+      expect(styles).not.toContain("data-qa-button");
+    });
+
+    it("close button keeps Banner descendant styling", () => {
+      render(<Banner mt={300} text="x" onClose={() => {}} />);
+
+      expect(screen.getByLabelText("Close").closest("button")).not.toHaveClass(
+        "seeds-btn"
+      );
+    });
+  });
 });

package/src/banner.css

@@ -23,15 +23,18 @@
     padding: var(--space-300);
   }
 
-  .seeds-banner a,
-  .seeds-banner button {
+  /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
+     Plain anchors/buttons and Seeds Links (including href-less Links, which
+     render as <button>) keep Banner's inline-action styling. */
+  .seeds-banner a:not(.seeds-btn),
+  .seeds-banner button:not(.seeds-btn) {
     font-weight: var(--font-weight-semibold);
     color: var(--color-text-body);
     font-size: inherit;
   }
 
-  .seeds-banner a:hover,
-  .seeds-banner button:hover {
+  .seeds-banner a:not(.seeds-btn):hover,
+  .seeds-banner button:not(.seeds-btn):hover {
     color: var(--color-text-body);
     text-decoration: underline;
   }

package/src/styles.ts

@@ -31,8 +31,10 @@ const Container = styled.div<TypeContainerProps>(
       ? props.theme.colors.container.background.base
       : props.theme.colors.container.background[props.type]};
 
-    a,
-    button {
+    /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
+       Plain anchors/buttons and Seeds Links keep the inline-action styling. */
+    a:not(.seeds-btn),
+    button:not(.seeds-btn) {
       font-weight: ${props.theme.fontWeights.semibold};
       color: ${props.theme.colors.text.body};
       font-size: inherit;