@sproutsocial/seeds-react-banner 1.0.0

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: "",
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-banner/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     5.46 KB
+CJS dist/index.js.map 6.58 KB
+CJS ⚡️ Build success in 64ms
+ESM dist/esm/index.js     3.29 KB
+ESM dist/esm/index.js.map 6.44 KB
+ESM ⚡️ Build success in 64ms
+DTS Build start
+DTS ⚡️ Build success in 15624ms
+DTS dist/index.d.ts  1.17 KB
+DTS dist/index.d.mts 1.17 KB
+Done in 18.84s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-banner
+
+## 1.0.0
+
+### Major Changes
+
+- ed554e3: Migrated Link and Banner to standalone packages

package/dist/esm/index.js

@@ -0,0 +1,130 @@
+// 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/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/BannerTypes.ts
+import "react";
+
+// src/styles.ts
+var Container = styled.div(
+  (props) => css`
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
+    color: ${props.theme.colors.text.body};
+    border-radius: ${props.theme.radii.outer};
+    font-family: ${props.theme.fontFamily};
+    ${props.theme.typography[200]}
+    padding: ${props.theme.space[300]};
+    border: 1px solid ${props.theme.colors.container.border[props.type]};
+    background-color: ${props.theme.colors.container.background[props.type]};
+
+    a,
+    button {
+      font-weight: ${props.theme.fontWeights.semibold};
+      color: ${props.theme.colors.text.body};
+      font-size: inherit;
+      &:hover {
+        color: ${props.theme.colors.text.body};
+        text-decoration: underline;
+      }
+    }
+
+    > span:not(.Icon) {
+      display: block;
+    }
+
+    ${COMMON}
+    ${LAYOUT}
+  `
+);
+var styles_default = Container;
+var StyledBannerIcon = styled(Icon)`
+  align-self: flex-start;
+  min-width: 16px;
+`;
+
+// src/Banner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getBannerIconName = (type) => {
+  switch (type) {
+    case "success":
+      return "circle-check-outline";
+    case "error":
+      return "triangle-exclamation-outline";
+    case "warning":
+      return "triangle-exclamation-outline";
+    case "opportunity":
+      return "sparkle-outline";
+    case "info":
+    default:
+      return "circle-i-outline";
+  }
+};
+var getBannerIconColor = (type) => {
+  switch (type) {
+    case "success":
+      return "icon.success";
+    case "error":
+      return "icon.error";
+    case "warning":
+      return "icon.warning";
+    case "opportunity":
+      return "icon.opportunity";
+    case "info":
+    default:
+      return "icon.info";
+  }
+};
+var Banner = ({
+  type = "info",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    styles_default,
+    {
+      type,
+      "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,
+          {
+            name: getBannerIconName(type),
+            color: getBannerIconColor(type),
+            className: "Icon",
+            fixedWidth: true,
+            mt: 100,
+            mr: 350,
+            ...typeIconProps
+          }
+        ),
+        text,
+        onClose && /* @__PURE__ */ jsx(Box, { ml: "auto", pl: 400, alignSelf: "flex-start", children: /* @__PURE__ */ jsx(Button, { p: 0, onClick: onClose, ariaLabel: closeButtonLabel, children: /* @__PURE__ */ jsx(Icon2, { name: "x-outline", "aria-hidden": true }) }) })
+      ] })
+    }
+  );
+};
+var Banner_default = Banner;
+
+// src/index.ts
+var src_default = Banner_default;
+export {
+  Banner_default as Banner,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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 { TypeBannerProps, EnumBannerType } 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 \"sparkle-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nconst getBannerIconColor = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"icon.success\";\n    case \"error\":\n      return \"icon.error\";\n    case \"warning\":\n      return \"icon.warning\";\n    case \"opportunity\":\n      return \"icon.opportunity\";\n    case \"info\":\n    default:\n      return \"icon.info\";\n  }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n  type = \"info\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  return (\n    <Container\n      type={type}\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)}\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 { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { type EnumBannerType } from \"./BannerTypes\";\n\ntype TypeProps = {\n  type: EnumBannerType;\n};\n\nconst Container = styled.div<TypeProps>(\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 ${props.theme.colors.container.border[props.type]};\n    background-color: ${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  `\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} 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 interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\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;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAOA,WAAU;;;ACHjB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAC/B,OAAO,UAAU;;;ACFjB,OAAuB;;;ADSvB,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,wBACb,MAAM,MAAM,OAAO,UAAU,OAAO,MAAM,IAAI,CAAC;AAAA,wBAC/C,MAAM,MAAM,OAAO,UAAU,WAAW,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItD,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;AAEZ;AAEA,IAAO,iBAAQ;AAER,IAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;;;ADWrC,SACE,KADF;AAjDN,IAAM,oBAAoB,CAAC,SAAyB;AAClD,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;AAEA,IAAM,qBAAqB,CAAC,SAAyB;AACnD,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;AAGA,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAc;AAAA,MACd,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MAEJ,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,kBAAkB,IAAI;AAAA,YAC5B,OAAO,mBAAmB,IAAI;AAAA,YAC9B,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,8BAACC,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AG7Ef,IAAO,cAAQ;","names":["Icon","Icon"]}

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
+
+type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
+interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps {
+    text: React.ReactNode;
+    /** Type of banner. */
+    type?: EnumBannerType;
+    /** Show the close icon in the banner with an action when clicked */
+    onClose?: () => void;
+    /** Close icon aria label */
+    closeButtonLabel?: string;
+    /** Icon props that can be passed to the Type specific Icon */
+    typeIconProps?: Partial<Omit<TypeIconProps, "name">>;
+}
+
+/** TODO: change to 'info' type by default in future version */
+declare const Banner: ({ type, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
+
+export { Banner, type EnumBannerType, type TypeBannerProps, Banner as default };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
+
+type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
+interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps {
+    text: React.ReactNode;
+    /** Type of banner. */
+    type?: EnumBannerType;
+    /** Show the close icon in the banner with an action when clicked */
+    onClose?: () => void;
+    /** Close icon aria label */
+    closeButtonLabel?: string;
+    /** Icon props that can be passed to the Type specific Icon */
+    typeIconProps?: Partial<Omit<TypeIconProps, "name">>;
+}
+
+/** TODO: change to 'info' type by default in future version */
+declare const Banner: ({ type, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
+
+export { Banner, type EnumBannerType, type TypeBannerProps, Banner as default };

package/dist/index.js

@@ -0,0 +1,167 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Banner: () => Banner_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Banner.tsx
+var React2 = 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/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// src/BannerTypes.ts
+var React = require("react");
+
+// src/styles.ts
+var Container = import_styled_components.default.div(
+  (props) => import_styled_components.css`
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
+    color: ${props.theme.colors.text.body};
+    border-radius: ${props.theme.radii.outer};
+    font-family: ${props.theme.fontFamily};
+    ${props.theme.typography[200]}
+    padding: ${props.theme.space[300]};
+    border: 1px solid ${props.theme.colors.container.border[props.type]};
+    background-color: ${props.theme.colors.container.background[props.type]};
+
+    a,
+    button {
+      font-weight: ${props.theme.fontWeights.semibold};
+      color: ${props.theme.colors.text.body};
+      font-size: inherit;
+      &:hover {
+        color: ${props.theme.colors.text.body};
+        text-decoration: underline;
+      }
+    }
+
+    > span:not(.Icon) {
+      display: block;
+    }
+
+    ${import_seeds_react_system_props.COMMON}
+    ${import_seeds_react_system_props.LAYOUT}
+  `
+);
+var styles_default = Container;
+var StyledBannerIcon = (0, import_styled_components.default)(import_seeds_react_icon.default)`
+  align-self: flex-start;
+  min-width: 16px;
+`;
+
+// src/Banner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getBannerIconName = (type) => {
+  switch (type) {
+    case "success":
+      return "circle-check-outline";
+    case "error":
+      return "triangle-exclamation-outline";
+    case "warning":
+      return "triangle-exclamation-outline";
+    case "opportunity":
+      return "sparkle-outline";
+    case "info":
+    default:
+      return "circle-i-outline";
+  }
+};
+var getBannerIconColor = (type) => {
+  switch (type) {
+    case "success":
+      return "icon.success";
+    case "error":
+      return "icon.error";
+    case "warning":
+      return "icon.warning";
+    case "opportunity":
+      return "icon.opportunity";
+    case "info":
+    default:
+      return "icon.info";
+  }
+};
+var Banner = ({
+  type = "info",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    styles_default,
+    {
+      type,
+      "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,
+          {
+            name: getBannerIconName(type),
+            color: getBannerIconColor(type),
+            className: "Icon",
+            fixedWidth: true,
+            mt: 100,
+            mr: 350,
+            ...typeIconProps
+          }
+        ),
+        text,
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { ml: "auto", pl: 400, alignSelf: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_button.default, { p: 0, onClick: onClose, ariaLabel: closeButtonLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon2.default, { name: "x-outline", "aria-hidden": true }) }) })
+      ] })
+    }
+  );
+};
+var Banner_default = Banner;
+
+// src/index.ts
+var src_default = Banner_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 { TypeBannerProps, EnumBannerType } 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 \"sparkle-outline\";\n    case \"info\":\n    default:\n      return \"circle-i-outline\";\n  }\n};\n\nconst getBannerIconColor = (type: EnumBannerType) => {\n  switch (type) {\n    case \"success\":\n      return \"icon.success\";\n    case \"error\":\n      return \"icon.error\";\n    case \"warning\":\n      return \"icon.warning\";\n    case \"opportunity\":\n      return \"icon.opportunity\";\n    case \"info\":\n    default:\n      return \"icon.info\";\n  }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n  type = \"info\",\n  text,\n  onClose,\n  closeButtonLabel = \"Close\",\n  typeIconProps,\n  ...rest\n}: TypeBannerProps) => {\n  return (\n    <Container\n      type={type}\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)}\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 { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { type EnumBannerType } from \"./BannerTypes\";\n\ntype TypeProps = {\n  type: EnumBannerType;\n};\n\nconst Container = styled.div<TypeProps>(\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 ${props.theme.colors.container.border[props.type]};\n    background-color: ${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  `\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} 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 interface TypeBannerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    TypeStyledComponentsCommonProps {\n  text: React.ReactNode;\n  /** Type of banner. */\n  type?: EnumBannerType;\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;AACvB,6BAAgB;AAChB,gCAAmB;AACnB,IAAAC,2BAAiB;;;ACHjB,+BAA4B;AAC5B,sCAA+B;AAC/B,8BAAiB;;;ACFjB,YAAuB;;;ADSvB,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,wBACb,MAAM,MAAM,OAAO,UAAU,OAAO,MAAM,IAAI,CAAC;AAAA,wBAC/C,MAAM,MAAM,OAAO,UAAU,WAAW,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItD,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;AAEZ;AAEA,IAAO,iBAAQ;AAER,IAAM,uBAAmB,yBAAAA,SAAO,wBAAAC,OAAI;AAAA;AAAA;AAAA;;;ADWrC;AAjDN,IAAM,oBAAoB,CAAC,SAAyB;AAClD,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;AAEA,IAAM,qBAAqB,CAAC,SAAyB;AACnD,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;AAGA,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAc;AAAA,MACd,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MAEJ,uDAAC,uBAAAC,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,kBAAkB,IAAI;AAAA,YAC5B,OAAO,mBAAmB,IAAI;AAAA,YAC9B,WAAU;AAAA,YACV,YAAU;AAAA,YACV,IAAI;AAAA,YACJ,IAAI;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC;AAAA,QACA,WACC,4CAAC,uBAAAA,SAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,sDAAC,0BAAAC,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,sDAAC,yBAAAC,SAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AD7Ef,IAAO,cAAQ;","names":["React","import_seeds_react_icon","styled","Icon","Box","Button","Icon"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-banner",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-banner",
+  "version": "1.0.0",
+  "description": "Seeds React Banner",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-icon": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-link": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Banner.tsx

@@ -0,0 +1,80 @@
+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 } 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 "sparkle-outline";
+    case "info":
+    default:
+      return "circle-i-outline";
+  }
+};
+
+const getBannerIconColor = (type: EnumBannerType) => {
+  switch (type) {
+    case "success":
+      return "icon.success";
+    case "error":
+      return "icon.error";
+    case "warning":
+      return "icon.warning";
+    case "opportunity":
+      return "icon.opportunity";
+    case "info":
+    default:
+      return "icon.info";
+  }
+};
+
+/** TODO: change to 'info' type by default in future version */
+const Banner = ({
+  type = "info",
+  text,
+  onClose,
+  closeButtonLabel = "Close",
+  typeIconProps,
+  ...rest
+}: TypeBannerProps) => {
+  return (
+    <Container
+      type={type}
+      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)}
+          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>
+  );
+};
+
+export default Banner;

package/src/BannerTypes.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-system-props";
+import type {
+  TypeSystemCommonProps,
+  TypeSystemLayoutProps,
+} from "@sproutsocial/seeds-react-system-props";
+import type { TypeIconProps } from "@sproutsocial/seeds-react-icon";
+
+export type EnumBannerType =
+  | "success"
+  | "info"
+  | "error"
+  | "warning"
+  | "opportunity";
+
+export interface TypeBannerProps
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
+    TypeSystemCommonProps,
+    TypeSystemLayoutProps,
+    TypeStyledComponentsCommonProps {
+  text: React.ReactNode;
+  /** Type of banner. */
+  type?: EnumBannerType;
+  /** Show the close icon in the banner with an action when clicked */
+  onClose?: () => void;
+  /** Close icon aria label */
+  closeButtonLabel?: string;
+  /** Icon props that can be passed to the Type specific Icon */
+  typeIconProps?: Partial<Omit<TypeIconProps, "name">>;
+}

package/src/__tests__/Banner.typetest.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import Banner from "../Banner";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function BannerTypes() {
+  return (
+    <>
+      <Banner text="Banner Text" />
+      <Banner text="Banner Text" type="success" />
+      <Banner text="Banner Text" type="info" />
+      <Banner text="Banner Text" type="error" />
+      <Banner text="Banner Text" type="warning" />
+      <Banner text="Banner Text" type="opportunity" />
+      <Banner
+        text="Banner Text"
+        mb="400"
+        maxWidth="400px"
+        display={["flex", "block", "contents"]}
+      />
+      <Banner
+        text="Banner Text"
+        onClose={() => console.log("valid")}
+        closeButtonLabel="Close the banner"
+      />
+      <Banner
+        text="Banner Text"
+        type="warning"
+        typeIconProps={{ "aria-label": "Warning" }}
+      />
+      <Banner
+        text="Warning: Banner Text"
+        type="warning"
+        typeIconProps={{ "aria-hidden": true }}
+      />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <Banner text="Banner Text" type="invalid" />
+      {/* @ts-expect-error - test that invalid onClose is rejected */}
+      <Banner text="Banner Text" onClose="invalid" />
+      <Banner
+        text="Banner Text"
+        // @ts-expect-error - test that invalid closeButtonLabel is rejected
+        closeButtonLabel={() => console.log("invalid")}
+      />
+      <Banner
+        text="Banner Text"
+        type="warning"
+        // @ts-expect-error - test that typeIconProps does not allow name
+        typeIconProps={{ name: "sparkles" }}
+      />
+    </>
+  );
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Banner from "../Banner";
+
+describe("Banner", () => {
+  it("should render as info when no type is provided", () => {
+    render(<Banner text="Banner Text" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ icon: "circle-i-outline" })).toBeTruthy();
+  });
+
+  it("should render with success type", () => {
+    render(<Banner text="Banner Text" type="success" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(
+      screen.getByDataQaLabel({ icon: "circle-check-outline" })
+    ).toBeTruthy();
+  });
+
+  it("should render with info type", () => {
+    render(<Banner text="Banner Text" type="info" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ icon: "circle-i-outline" })).toBeTruthy();
+  });
+
+  it("should render with error type", () => {
+    render(<Banner text="Banner Text" type="error" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(
+      screen.getByDataQaLabel({ icon: "triangle-exclamation-outline" })
+    ).toBeTruthy();
+  });
+
+  it("should render with warning type", () => {
+    render(<Banner text="Banner Text" type="warning" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(
+      screen.getByDataQaLabel({ icon: "triangle-exclamation-outline" })
+    ).toBeTruthy();
+  });
+
+  it("should render with opportunity type", () => {
+    render(<Banner text="Banner Text" type="opportunity" />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ icon: "sparkle-outline" })).toBeTruthy();
+  });
+
+  it("should render with onClose x icon", () => {
+    render(<Banner text="Banner Text" onClose={() => console.log("valid")} />);
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ icon: "x-outline" })).toBeTruthy();
+  });
+
+  it("should render with onClose x icon and closeButtonLabel aria-label", () => {
+    render(
+      <Banner
+        text="Banner Text"
+        onClose={() => console.log("valid")}
+        closeButtonLabel="Close the banner"
+      />
+    );
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ icon: "x-outline" })).toBeTruthy();
+    expect(screen.getByLabelText("Close the banner")).toBeInTheDocument();
+  });
+
+  it("should should set icon aria-label when typeIconProps includes aria-label", () => {
+    render(
+      <Banner
+        text="Banner Text"
+        type="warning"
+        typeIconProps={{ "aria-label": "Warning" }}
+      />
+    );
+
+    expect(screen.getByText("Banner Text")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: "Warning" })).toBeInTheDocument();
+  });
+
+  it("should should set icon aria-hidden when typeIconProps includes aria-hidden", () => {
+    render(
+      <Banner
+        text="Warning: Banner Text"
+        type="warning"
+        typeIconProps={{ "aria-hidden": true }}
+      />
+    );
+
+    expect(screen.getByText("Warning: Banner Text")).toBeInTheDocument();
+    expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
+  });
+});

package/src/index.stories.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { Banner, type TypeBannerProps, type EnumBannerType } from "./";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+export default {
+  title: "Components/Banner",
+  component: Banner,
+  argTypes: {
+    type: {
+      options: ["success", "info", "error", "warning", "opportunity"],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    type: "success",
+    typeIconProps: { "aria-label": "Success" },
+    text: "This is a success message!",
+  },
+};
+
+const findText = (bannerType: TypeBannerProps["type"]) => {
+  switch (bannerType) {
+    case "warning":
+      return "This is a warning message!";
+    case "opportunity":
+      return "This is an opportunity message!";
+    case "error":
+      return "This is an error message!";
+    case "info":
+      return "This is an informative message!";
+    case "success":
+    default:
+      return "This is a success message!";
+  }
+};
+
+export const permutations = (args: TypeBannerProps) => (
+  <Banner
+    text={findText(args.type)}
+    type={args.type}
+    typeIconProps={{ "aria-label": args.type }}
+  />
+);
+
+permutations.storyName = "Permutations";
+
+export const links = (args: TypeBannerProps) => (
+  <Banner
+    type={args.type}
+    typeIconProps={args.typeIconProps}
+    text={
+      <Box
+        width={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Text>{findText(args.type)}</Text>
+        <Text>
+          <Link href="/">Learn more</Link>
+        </Text>
+      </Box>
+    }
+  />
+);
+
+links.storyName = "With link";
+
+export const buttons = (args: TypeBannerProps) => (
+  <Banner
+    type={args.type}
+    typeIconProps={args.typeIconProps}
+    text={
+      <Box
+        width={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Text>{findText(args.type)}</Text>
+        <Text>
+          <Link onClick={() => alert("Clicked")}>Learn more</Link>
+        </Text>
+      </Box>
+    }
+  />
+);
+
+buttons.storyName = "With button";
+
+export const multiline = (args: TypeBannerProps) => (
+  <Box width="416px">
+    <Banner
+      text={args.text}
+      type={args.type}
+      typeIconProps={args.typeIconProps}
+    />
+  </Box>
+);
+
+multiline.args = {
+  text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
+};
+
+multiline.storyName = "With multiline text";
+
+export const closeable = (args: TypeBannerProps) => (
+  <Banner
+    text={args.text}
+    type={args.type}
+    typeIconProps={args.typeIconProps}
+    onClose={() => alert("Testing...")}
+    closeButtonLabel="Close the banner"
+  />
+);
+
+closeable.args = {
+  text: "This is a banner that has a closeable x icon with an onClose callback.",
+};
+
+closeable.storyName = "With OnClose callback";
+
+export const hiddenIcon = (args: TypeBannerProps) => (
+  <Banner
+    text={args.text}
+    type={args.type}
+    typeIconProps={args.typeIconProps}
+    onClose={() => alert("Testing...")}
+    closeButtonLabel="Close the banner"
+  />
+);
+
+hiddenIcon.args = {
+  text: "Success! This is a banner that hides the icon from screen readers!",
+  typeIconProps: { "aria-hidden": true },
+};
+
+hiddenIcon.storyName = "With aria-hidden Icon";

package/src/index.ts

@@ -0,0 +1,5 @@
+import Banner from "./Banner";
+
+export default Banner;
+export { Banner };
+export * from "./BannerTypes";

package/src/styles.ts

@@ -0,0 +1,49 @@
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { type EnumBannerType } from "./BannerTypes";
+
+type TypeProps = {
+  type: EnumBannerType;
+};
+
+const Container = styled.div<TypeProps>(
+  (props) => css`
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
+    color: ${props.theme.colors.text.body};
+    border-radius: ${props.theme.radii.outer};
+    font-family: ${props.theme.fontFamily};
+    ${props.theme.typography[200]}
+    padding: ${props.theme.space[300]};
+    border: 1px solid ${props.theme.colors.container.border[props.type]};
+    background-color: ${props.theme.colors.container.background[props.type]};
+
+    a,
+    button {
+      font-weight: ${props.theme.fontWeights.semibold};
+      color: ${props.theme.colors.text.body};
+      font-size: inherit;
+      &:hover {
+        color: ${props.theme.colors.text.body};
+        text-decoration: underline;
+      }
+    }
+
+    > span:not(.Icon) {
+      display: block;
+    }
+
+    ${COMMON}
+    ${LAYOUT}
+  `
+);
+
+export default Container;
+
+export const StyledBannerIcon = styled(Icon)`
+  align-self: flex-start;
+  min-width: 16px;
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));