@sps-woodland/growler 8.0.0-rc1

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/growler](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/growler#readme)
+
+SPS Woodland Design System growler component and hook

package/lib/Growler.css.d.ts

@@ -0,0 +1,17 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type GrowlerKind = keyof typeof Tokens.component.growler.kind;
+interface GrowlerVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<GrowlerKind>;
+    fade: BooleanRecipeVariant;
+}
+export declare const growler: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<GrowlerVariantDefinitions>;
+export declare const growlerArea: string;
+export declare const growlerIconBox: string;
+export declare const growlerIcon: string;
+export declare const growlerMessageBox: string;
+export declare const growlerMessageBoxText: string;
+export declare const growlerMessageBoxTitle: string;
+export declare const growlerMessageBoxSubtitle: string;
+export declare const growlerCloseButton: string;
+export {};

package/lib/Growler.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import type { GrowlerKind } from "./Growler.css";
+export declare const GrowlerIcons: Readonly<{
+    warning: "status-warning";
+    error: "status-error";
+    success: "status-ok";
+    info: "info-circle";
+}>;
+export declare function Growler({ children, className, imgSrc, kind, onClose, removeFromList, persist, title, id, ...rest }: ComponentProps<{
+    imgSrc?: string;
+    kind?: GrowlerKind;
+    onClose?: () => void;
+    removeFromList?: (id: string | number) => void;
+    closed?: boolean;
+    persist?: boolean;
+    title: string;
+    id?: string | number;
+}> & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/lib/Growler.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const GrowlerExamples: ComponentManifestEntry;

package/lib/GrowlerListProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare type RenderFn = () => React.ReactElement;
+export declare function GrowlerListProvider(props: any): JSX.Element;
+export declare const useGrowler: () => {
+    addGrowler: (NewGrowler: RenderFn) => void;
+};
+export {};

package/lib/index.cjs.js

@@ -0,0 +1,332 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("react"),d=require("@sps-woodland/core"),L=require("@sps-woodland/buttons"),C=require("@sps-woodland/tokens"),N=require("react-dom"),i=require("@spscommerce/utils"),I=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function x(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return o.default=r,Object.freeze(o)}const e=x(A),T=I(N);function j(r,o,t){return o in r?Object.defineProperty(r,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[o]=t,r}function b(r,o){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);o&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(r,s).enumerable})),t.push.apply(t,n)}return t}function E(r){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?b(Object(t),!0).forEach(function(n){j(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}var D=(r,o,t)=>{for(var n of Object.keys(r)){var s;if(r[n]!==((s=o[n])!==null&&s!==void 0?s:t[n]))return!1}return!0},U=r=>o=>{var t=r.defaultClassName,n=E(E({},r.defaultVariants),o);for(var s in n){var c,a=(c=n[s])!==null&&c!==void 0?c:r.defaultVariants[s];if(a!=null){var l=a;typeof l=="boolean"&&(l=l===!0?"true":"false");var u=r.variantClassNames[s][l];u&&(t+=" "+u)}}for(var[p,m]of r.compoundVariants)D(p,n,r.defaultVariants)&&(t+=" "+m);return t},F=U({defaultClassName:"_1c5fbnk1",variantClassNames:{kind:{activity:"_1c5fbnk2",info:"_1c5fbnk3",progress:"_1c5fbnk4",error:"_1c5fbnk5",success:"_1c5fbnk6",warning:"_1c5fbnk7"},fade:{true:"_1c5fbnk8",false:"_1c5fbnk9"}},defaultVariants:{},compoundVariants:[]}),W="_1c5fbnka",V="_1c5fbnkh",q="_1c5fbnkc",z="_1c5fbnkb",H="_1c5fbnkd",J="_1c5fbnke",Q="_1c5fbnkf";const B=Object.freeze({warning:"status-warning",error:"status-error",success:"status-ok",info:"info-circle"});function g({children:r,className:o,imgSrc:t,kind:n="info",onClose:s,removeFromList:c,persist:a,title:l,id:u,...p}){const m=e.useRef(s);e.useEffect(()=>{m.current=s},[s]);const G=C.Tokens.component.growler.duration.visible,M=C.Tokens.component.growler.duration.fadeout,[O,w]=e.useState(!1),{t:P}=e.useContext(d.I18nContext);function K(){return[window.setTimeout(()=>{w(!0)},G),window.setTimeout(()=>{m.current&&m.current(),c&&u&&c(u)},G+M)]}const f=e.useRef([]);function y(){a||(f.current=K())}function S(){for(const _ of f.current)window.clearTimeout(_);f.current=[]}function h(){S(),w(!1)}function R(){h(),w(!1),s&&s(),c&&u&&c(u)}return e.useEffect(()=>(y(),()=>{S()}),[]),e.createElement("div",{role:"alert","aria-live":"polite",className:d.cl(F({kind:n,fade:O}),o),onMouseEnter:h,onMouseLeave:y,...p},e.createElement("div",{className:z},t&&e.createElement("img",{src:t,alt:""}),n==="progress"?e.createElement(d.Spinner,null):e.createElement(d.Icon,{icon:B[n],className:q})),e.createElement("div",{className:H},e.createElement("div",{className:J},l&&e.createElement("span",{className:Q},l),e.createElement("div",null,r)),e.createElement(L.Button,{kind:"icon",icon:"x",title:P("design-system:growler.dismiss"),className:V,onClick:R})))}d.Metadata.set(g,{name:"Growler",props:{imgSrc:{type:"string"},kind:{type:"GrowlerKind",default:"info"},onClose:{type:"() => void"},persist:{type:"boolean"},title:{type:"string"}}});let X=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((o,t)=>(t&=63,t<36?o+=t.toString(36):t<62?o+=(t-26).toString(36).toUpperCase():t>62?o+="-":o+="_",o),"");const k=e.createContext({growlerList:[],setGrowlerList:()=>{}});function v(r){const[o,t]=e.useState([]),n=a=>{if(!a){console.error("growlers should have an id");return}t(l=>l.filter(u=>a!==u.id))},s=o.map(({G:a,id:l})=>e.cloneElement(a(),{key:l,id:l,removeFromList:n})).filter(a=>d.Metadata.get(a.type).name==="Growler"?!0:(console.error("addGrowler only accepts a function that returns a Growler"),!1)),c=e.createElement("div",{"data-testid":r["data-testid"],"data-portalid":"growler-portal",className:W},s);return e.createElement(k.Provider,{value:{growlerList:o,setGrowlerList:t}},T.default.createPortal(c,document.body),r.children)}const Y=()=>{const r=e.useContext(k);if(r===void 0)throw new Error("addGrowler must be used within a GrowlerListProvider");return{addGrowler:e.useCallback(t=>{const n=X(),s={G:t,id:n};r.setGrowlerList([s,...r.growlerList])},[r])}},Z={description:()=>e.createElement("p",null,"Use Growlers for dynamic messages in response to a user's action. All Growlers have a Primary Message, and may optionally have a Secondary Message as needed. Growlers may also contain Hyperlinks in the Secondary Message."),components:[g,v],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use the following guidelines to write an effective Growler message."),e.createElement("ul",null,e.createElement("li",null,"Write all messages in sentence case.",e.createElement("ul",null,e.createElement("li",null,"Capitalize the first word of the message."),e.createElement("li",null,"Add punctuation, such as a period, at the end of the message."))),e.createElement("li",null,"Keep messages as succinct as possible while also providing sufficient information to the customer."),e.createElement("li",null,"If you can clearly convey your message in a single statement, use only the Primary Message."),e.createElement("li",null,"If the message requires additional details, such as further information or instructions, use both the Primary and Secondary Messages.")),e.createElement("p",null,"For more examples of effective feedback message writing, refer to ",e.createElement("a",{href:"https://atlassian.design/content/messaging-guidelines",target:"_blank"},"Atlassian's Messaging Guidelines"),"."))},provider:{label:"Growler List Provider",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Applications that use growlers should be wrapped in the",e.createElement("code",null,"GrowlerListProvider")," component. All growlers should be triggered by the addGrowler function from the ",e.createElement("code",null,"useGrowler")," hook"),e.createElement("p",null,"Wrapping your application in the ",e.createElement("code",null,"GrowlerListProvider"),"will allow you to call the ",e.createElement("code",null,"useGrowler")," hook from anywhere within your application. There is no longer a need to pass anything through to the children components."))},error:{label:"Error",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Acceptable message: Document ABC123 has not been sent. Check the form and try sending it again."),e.createElement("p",null,`Unacceptable message: "Can't send your document."`)),examples:{primary:{description:"Primary Message Only",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton
+              data-testid="btn-error-primary"
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    data-testid="growler-error-primary"
+                    kind="error"
+                    title="Document ABC123 has not been sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `},primaryAndSecondary:{description:"Primary and Secondary Message",react:i.code`
+         import { Growler, useGrowler } from "@sps-woodland/growler";
+         import { SpsButton } from "@spscommerce/ds-react";
+         import { ButtonKind } from "@spscommerce/ds-shared";
+         function MyComponent() {
+           
+         const [growl, setGrowl] = React.useState(false);
+         const [count, setCount] = React.useState(1);
+         const { addGrowler } = useGrowler();
+         return (
+         
+           <>
+           <SpsButton
+             data-testid="btn-error-primary-and-secondary"
+             kind={ButtonKind.LINK} 
+             onClick={() => {
+               addGrowler(
+                 () => (<Growler
+                  data-testid="growler-error-primary-and-secondary"
+                   kind="error"
+                   title="Document ABC123 has not been sent."
+                   onClose={() => {
+                    console.log("Growler closed.");
+                }}
+                title="Document ABC123 has not been sent."
+            >
+                Check the form and try sending it again.
+            </Growler>)
+               );
+               setCount(count + 1);
+             }
+           }>
+               Show Growler
+           </SpsButton>
+         </>
+           );
+         }
+         `}}},information:{label:"Information",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Acceptable message: System maintenance notice. We'll be offline tonight from 9-11pm CST."),e.createElement("p",null,"Unacceptable message: No access tonight.")),examples:{primary:{description:"Primary Message Only",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="info"
+                    title="System maintenance tonight from 9-11pm CST."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `},primaryAndSecondary:{description:"Primary and Secondary Message",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="info"
+                    title="System maintenance tonight"
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    We'll be offline tonight from 9-11pm CST.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `}}},progress:{label:"Progress",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Acceptable message: Export in progress."),e.createElement("p",null,"Unacceptable message: Please wait.")),examples:{primary:{description:"Primary Message Only",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="progress"
+                    title="Export in progress."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `},primaryAndSecondary:{description:"Primary and Secondary Message",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="progress"
+                    title="Export in progress."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    We'll let you know when it's done.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `}}},success:{label:"Success",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Acceptable message: Message sent. Our support team will respond to your message within 24 hours."),e.createElement("p",null,"Unacceptable message: Submitted.")),examples:{primary:{description:"Primary Message Only",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="success"
+                    title="Message sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `},primaryAndSecondary:{description:"Primary and Secondary Message",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="success"
+                    title="Message sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    Our support team will respond to your message within 24 hours.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `}}},warning:{label:"Warning",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Acceptable message: No internet connection detected."),e.createElement("p",null,"Unacceptable message: Warning: There is a problem.")),examples:{primary:{description:"Primary Message Only",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="warning"
+                    title="No internet connection detected."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `},primaryAndSecondary:{description:"Primary and Secondary Message",react:i.code`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="warning"
+                    title="No internet connection detected."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    Check your connection and try again.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `}}}}},$={Growlers:Z};exports.Growler=g;exports.GrowlerIcons=B;exports.GrowlerListProvider=v;exports.MANIFEST=$;exports.useGrowler=Y;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Growler";
+export * from "./GrowlerListProvider";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,611 @@
+import * as e from "react";
+import { Metadata as b, I18nContext as R, cl as A, Spinner as L, Icon as N } from "@sps-woodland/core";
+import { Button as x } from "@sps-woodland/buttons";
+import { Tokens as S } from "@sps-woodland/tokens";
+import _ from "react-dom";
+import { code as i } from "@spscommerce/utils";
+function I(r, o, t) {
+  return o in r ? Object.defineProperty(r, o, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : r[o] = t, r;
+}
+function h(r, o) {
+  var t = Object.keys(r);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(r);
+    o && (n = n.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(r, s).enumerable;
+    })), t.push.apply(t, n);
+  }
+  return t;
+}
+function C(r) {
+  for (var o = 1; o < arguments.length; o++) {
+    var t = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? h(Object(t), !0).forEach(function(n) {
+      I(r, n, t[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : h(Object(t)).forEach(function(n) {
+      Object.defineProperty(r, n, Object.getOwnPropertyDescriptor(t, n));
+    });
+  }
+  return r;
+}
+var T = (r, o, t) => {
+  for (var n of Object.keys(r)) {
+    var s;
+    if (r[n] !== ((s = o[n]) !== null && s !== void 0 ? s : t[n]))
+      return !1;
+  }
+  return !0;
+}, U = (r) => (o) => {
+  var t = r.defaultClassName, n = C(C({}, r.defaultVariants), o);
+  for (var s in n) {
+    var c, a = (c = n[s]) !== null && c !== void 0 ? c : r.defaultVariants[s];
+    if (a != null) {
+      var l = a;
+      typeof l == "boolean" && (l = l === !0 ? "true" : "false");
+      var u = r.variantClassNames[s][l];
+      u && (t += " " + u);
+    }
+  }
+  for (var [d, m] of r.compoundVariants)
+    T(d, n, r.defaultVariants) && (t += " " + m);
+  return t;
+}, D = U({ defaultClassName: "_1c5fbnk1", variantClassNames: { kind: { activity: "_1c5fbnk2", info: "_1c5fbnk3", progress: "_1c5fbnk4", error: "_1c5fbnk5", success: "_1c5fbnk6", warning: "_1c5fbnk7" }, fade: { true: "_1c5fbnk8", false: "_1c5fbnk9" } }, defaultVariants: {}, compoundVariants: [] }), j = "_1c5fbnka", F = "_1c5fbnkh", W = "_1c5fbnkc", V = "_1c5fbnkb", z = "_1c5fbnkd", q = "_1c5fbnke", H = "_1c5fbnkf";
+const J = Object.freeze({
+  warning: "status-warning",
+  error: "status-error",
+  success: "status-ok",
+  info: "info-circle"
+});
+function E({
+  children: r,
+  className: o,
+  imgSrc: t,
+  kind: n = "info",
+  onClose: s,
+  removeFromList: c,
+  persist: a,
+  title: l,
+  id: u,
+  ...d
+}) {
+  const m = e.useRef(s);
+  e.useEffect(() => {
+    m.current = s;
+  }, [s]);
+  const f = S.component.growler.duration.visible, k = S.component.growler.duration.fadeout, [v, p] = e.useState(!1), { t: M } = e.useContext(R);
+  function K() {
+    return [
+      window.setTimeout(() => {
+        p(!0);
+      }, f),
+      window.setTimeout(() => {
+        m.current && m.current(), c && u && c(u);
+      }, f + k)
+    ];
+  }
+  const w = e.useRef([]);
+  function g() {
+    a || (w.current = K());
+  }
+  function G() {
+    for (const P of w.current)
+      window.clearTimeout(P);
+    w.current = [];
+  }
+  function y() {
+    G(), p(!1);
+  }
+  function O() {
+    y(), p(!1), s && s(), c && u && c(u);
+  }
+  return e.useEffect(() => (g(), () => {
+    G();
+  }), []), /* @__PURE__ */ e.createElement("div", {
+    role: "alert",
+    "aria-live": "polite",
+    className: A(D({ kind: n, fade: v }), o),
+    onMouseEnter: y,
+    onMouseLeave: g,
+    ...d
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: V
+  }, t && /* @__PURE__ */ e.createElement("img", {
+    src: t,
+    alt: ""
+  }), n === "progress" ? /* @__PURE__ */ e.createElement(L, null) : /* @__PURE__ */ e.createElement(N, {
+    icon: J[n],
+    className: W
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: z
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: q
+  }, l && /* @__PURE__ */ e.createElement("span", {
+    className: H
+  }, l), /* @__PURE__ */ e.createElement("div", null, r)), /* @__PURE__ */ e.createElement(x, {
+    kind: "icon",
+    icon: "x",
+    title: M("design-system:growler.dismiss"),
+    className: F,
+    onClick: O
+  })));
+}
+b.set(E, {
+  name: "Growler",
+  props: {
+    imgSrc: { type: "string" },
+    kind: { type: "GrowlerKind", default: "info" },
+    onClose: { type: "() => void" },
+    persist: { type: "boolean" },
+    title: { type: "string" }
+  }
+});
+let Q = (r = 21) => crypto.getRandomValues(new Uint8Array(r)).reduce((o, t) => (t &= 63, t < 36 ? o += t.toString(36) : t < 62 ? o += (t - 26).toString(36).toUpperCase() : t > 62 ? o += "-" : o += "_", o), "");
+const B = e.createContext({
+  growlerList: [],
+  setGrowlerList: () => {
+  }
+});
+function X(r) {
+  const [o, t] = e.useState([]), n = (a) => {
+    if (!a) {
+      console.error("growlers should have an id");
+      return;
+    }
+    t((l) => l.filter((u) => a !== u.id));
+  }, s = o.map(({ G: a, id: l }) => e.cloneElement(a(), { key: l, id: l, removeFromList: n })).filter((a) => b.get(a.type).name === "Growler" ? !0 : (console.error(
+    "addGrowler only accepts a function that returns a Growler"
+  ), !1)), c = /* @__PURE__ */ e.createElement("div", {
+    "data-testid": r["data-testid"],
+    "data-portalid": "growler-portal",
+    className: j
+  }, s);
+  return /* @__PURE__ */ e.createElement(B.Provider, {
+    value: { growlerList: o, setGrowlerList: t }
+  }, _.createPortal(c, document.body), r.children);
+}
+const oe = () => {
+  const r = e.useContext(B);
+  if (r === void 0)
+    throw new Error("addGrowler must be used within a GrowlerListProvider");
+  return { addGrowler: e.useCallback(
+    (t) => {
+      const n = Q(), s = {
+        G: t,
+        id: n
+      };
+      r.setGrowlerList([s, ...r.growlerList]);
+    },
+    [r]
+  ) };
+}, Y = {
+  description: () => /* @__PURE__ */ e.createElement("p", null, "Use Growlers for dynamic messages in response to a user's action. All Growlers have a Primary Message, and may optionally have a Secondary Message as needed. Growlers may also contain Hyperlinks in the Secondary Message."),
+  components: [E, X],
+  examples: {
+    general: {
+      label: "General Usage",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Use the following guidelines to write an effective Growler message."), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, "Write all messages in sentence case.", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, "Capitalize the first word of the message."), /* @__PURE__ */ e.createElement("li", null, "Add punctuation, such as a period, at the end of the message."))), /* @__PURE__ */ e.createElement("li", null, "Keep messages as succinct as possible while also providing sufficient information to the customer."), /* @__PURE__ */ e.createElement("li", null, "If you can clearly convey your message in a single statement, use only the Primary Message."), /* @__PURE__ */ e.createElement("li", null, "If the message requires additional details, such as further information or instructions, use both the Primary and Secondary Messages.")), /* @__PURE__ */ e.createElement("p", null, "For more examples of effective feedback message writing, refer to ", /* @__PURE__ */ e.createElement("a", {
+        href: "https://atlassian.design/content/messaging-guidelines",
+        target: "_blank"
+      }, "Atlassian's Messaging Guidelines"), "."))
+    },
+    provider: {
+      label: "Growler List Provider",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Applications that use growlers should be wrapped in the", /* @__PURE__ */ e.createElement("code", null, "GrowlerListProvider"), " component. All growlers should be triggered by the addGrowler function from the ", /* @__PURE__ */ e.createElement("code", null, "useGrowler"), " hook"), /* @__PURE__ */ e.createElement("p", null, "Wrapping your application in the ", /* @__PURE__ */ e.createElement("code", null, "GrowlerListProvider"), "will allow you to call the ", /* @__PURE__ */ e.createElement("code", null, "useGrowler"), " hook from anywhere within your application. There is no longer a need to pass anything through to the children components."))
+    },
+    error: {
+      label: "Error",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Acceptable message: Document ABC123 has not been sent. Check the form and try sending it again."), /* @__PURE__ */ e.createElement("p", null, `Unacceptable message: "Can't send your document."`)),
+      examples: {
+        primary: {
+          description: "Primary Message Only",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton
+              data-testid="btn-error-primary"
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    data-testid="growler-error-primary"
+                    kind="error"
+                    title="Document ABC123 has not been sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        },
+        primaryAndSecondary: {
+          description: "Primary and Secondary Message",
+          react: i`
+         import { Growler, useGrowler } from "@sps-woodland/growler";
+         import { SpsButton } from "@spscommerce/ds-react";
+         import { ButtonKind } from "@spscommerce/ds-shared";
+         function MyComponent() {
+           
+         const [growl, setGrowl] = React.useState(false);
+         const [count, setCount] = React.useState(1);
+         const { addGrowler } = useGrowler();
+         return (
+         
+           <>
+           <SpsButton
+             data-testid="btn-error-primary-and-secondary"
+             kind={ButtonKind.LINK} 
+             onClick={() => {
+               addGrowler(
+                 () => (<Growler
+                  data-testid="growler-error-primary-and-secondary"
+                   kind="error"
+                   title="Document ABC123 has not been sent."
+                   onClose={() => {
+                    console.log("Growler closed.");
+                }}
+                title="Document ABC123 has not been sent."
+            >
+                Check the form and try sending it again.
+            </Growler>)
+               );
+               setCount(count + 1);
+             }
+           }>
+               Show Growler
+           </SpsButton>
+         </>
+           );
+         }
+         `
+        }
+      }
+    },
+    information: {
+      label: "Information",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Acceptable message: System maintenance notice. We'll be offline tonight from 9-11pm CST."), /* @__PURE__ */ e.createElement("p", null, "Unacceptable message: No access tonight.")),
+      examples: {
+        primary: {
+          description: "Primary Message Only",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="info"
+                    title="System maintenance tonight from 9-11pm CST."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        },
+        primaryAndSecondary: {
+          description: "Primary and Secondary Message",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="info"
+                    title="System maintenance tonight"
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    We'll be offline tonight from 9-11pm CST.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        }
+      }
+    },
+    progress: {
+      label: "Progress",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Acceptable message: Export in progress."), /* @__PURE__ */ e.createElement("p", null, "Unacceptable message: Please wait.")),
+      examples: {
+        primary: {
+          description: "Primary Message Only",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="progress"
+                    title="Export in progress."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        },
+        primaryAndSecondary: {
+          description: "Primary and Secondary Message",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="progress"
+                    title="Export in progress."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    We'll let you know when it's done.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        }
+      }
+    },
+    success: {
+      label: "Success",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Acceptable message: Message sent. Our support team will respond to your message within 24 hours."), /* @__PURE__ */ e.createElement("p", null, "Unacceptable message: Submitted.")),
+      examples: {
+        primary: {
+          description: "Primary Message Only",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="success"
+                    title="Message sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        },
+        primaryAndSecondary: {
+          description: "Primary and Secondary Message",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="success"
+                    title="Message sent."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    Our support team will respond to your message within 24 hours.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        }
+      }
+    },
+    warning: {
+      label: "Warning",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Acceptable message: No internet connection detected."), /* @__PURE__ */ e.createElement("p", null, "Unacceptable message: Warning: There is a problem.")),
+      examples: {
+        primary: {
+          description: "Primary Message Only",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="warning"
+                    title="No internet connection detected."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }}
+                  />)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        },
+        primaryAndSecondary: {
+          description: "Primary and Secondary Message",
+          react: i`
+          import { Growler, useGrowler } from "@sps-woodland/growler";
+          import { SpsButton } from "@spscommerce/ds-react";
+          import { ButtonKind } from "@spscommerce/ds-shared";
+          function MyComponent() {
+            
+          const [growl, setGrowl] = React.useState(false);
+          const [count, setCount] = React.useState(1);
+          const { addGrowler } = useGrowler();
+          return (
+          
+            <>
+            <SpsButton 
+              kind={ButtonKind.LINK} 
+              onClick={() => {
+                addGrowler(
+                  () => (<Growler
+                    kind="warning"
+                    title="No internet connection detected."
+                    onClose={() => {
+                      console.log("Growler Closed");
+                    }} >
+                    Check your connection and try again.
+                  </Growler>)
+                );
+                setCount(count + 1);
+              }
+            }>
+                Show Growler
+            </SpsButton>
+          </>
+            );
+          }
+          `
+        }
+      }
+    }
+  }
+}, ne = {
+  Growlers: Y
+};
+export {
+  E as Growler,
+  J as GrowlerIcons,
+  X as GrowlerListProvider,
+  ne as MANIFEST,
+  oe as useGrowler
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+@keyframes _1c5fbnk0{0%{opacity:1}to{opacity:0}}._1c5fbnk1{border-radius:.25rem;box-shadow:0 0 .3125rem #00000040;display:flex;margin-bottom:1rem;overflow:hidden;width:25rem}._1c5fbnk2{background:#e9e9ea;border:.0625rem #717779 solid}._1c5fbnk3{background:#007db8;border:.0625rem #007db8 solid}._1c5fbnk4{background:#91467f;border:.0625rem #91467f solid}._1c5fbnk5{background:#de002e;border:.0625rem #de002e solid}._1c5fbnk6{background:#0b8940;border:.0625rem #0b8940 solid}._1c5fbnk7{background:#e7760b;border:.0625rem #e7760b solid}._1c5fbnk8{animation-name:_1c5fbnk0;animation-duration:2s}._1c5fbnk9{opacity:1}._1c5fbnka{display:flex;flex-direction:column;position:fixed;right:1.875rem;top:5.625rem;width:25rem}._1c5fbnkb{align-items:center;display:flex;flex-grow:0;flex-shrink:0;flex-basis:4.375rem;justify-content:center}._1c5fbnkc{color:#fff;font-size:1.875rem}._1c5fbnkd{background-color:#fff;padding:1rem 2.625rem 1rem 1rem;position:relative;display:flex;flex-grow:1}._1c5fbnke{flex-grow:1;font-size:.75rem;line-height:1.25rem}._1c5fbnkf{font-weight:600}._1c5fbnkg{color:#4b5356;overflow-wrap:break-word;width:16.5rem}._1c5fbnkh{position:absolute;right:.5rem;top:.5rem}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sps-woodland/growler",
+  "description": "SPS Woodland Design System growler component and hook",
+  "version": "8.0.0-rc1",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/growler",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/growler#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@spscommerce/i18n": "^7.1.3",
+    "nanoid": "^3.3.4"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});