@sps-woodland/growler 8.17.0 → 8.17.2

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),d=require("@sps-woodland/core"),L=require("@sps-woodland/buttons"),C=require("@sps-woodland/tokens"),I=require("react-dom"),i=require("@spscommerce/utils");function x(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(N);function _(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){_(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 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},j=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)T(p,n,r.defaultVariants)&&(t+=" "+m);return t},D=j({defaultClassName:"_1c5fbnk1",variantClassNames:{kind:{activity:"_1c5fbnk2",info:"_1c5fbnk3",progress:"_1c5fbnk4",error:"_1c5fbnk5",success:"_1c5fbnk6",warning:"_1c5fbnk7"},fade:{true:"_1c5fbnk8",false:"_1c5fbnk9"}},defaultVariants:{},compoundVariants:[]}),U="_1c5fbnka",F="_1c5fbnkh",W="_1c5fbnkc",V="_1c5fbnkb",q="_1c5fbnkd",z="_1c5fbnke",H="_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 A of f.current)window.clearTimeout(A);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(D({kind:n,fade:O}),o),onMouseEnter:h,onMouseLeave:y,...p},e.createElement("div",{className:V},t&&e.createElement("img",{src:t,alt:""}),n==="progress"?e.createElement(d.Spinner,null):e.createElement(d.Icon,{icon:B[n],className:W})),e.createElement("div",{className:q},e.createElement("div",{className:z},l&&e.createElement("span",{className:H},l),e.createElement("div",null,r)),e.createElement(L.Button,{kind:"icon",icon:"x",title:P("design-system:growler.dismiss"),className:F,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 J=(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:U},s);return e.createElement(k.Provider,{value:{growlerList:o,setGrowlerList:t}},I.createPortal(c,document.body),r.children)}const Q=()=>{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=J(),s={G:t,id:n};r.setGrowlerList([s,...r.growlerList])},[r])}},X={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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),u=require("@sps-woodland/core"),N=require("@sps-woodland/buttons"),S=require("@sps-woodland/tokens"),L=require("react-dom"),i=require("@spscommerce/utils");function I(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=I(A);function x(r,o,t){return o in r?Object.defineProperty(r,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[o]=t,r}function C(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 b(r){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?C(Object(t),!0).forEach(function(n){x(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):C(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},j=r=>o=>{var t=r.defaultClassName,n=b(b({},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 d=r.variantClassNames[s][l];d&&(t+=" "+d)}}for(var[p,m]of r.compoundVariants)T(p,n,r.defaultVariants)&&(t+=" "+m);return t},D=j({defaultClassName:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk1",variantClassNames:{kind:{activity:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk2",info:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk3",progress:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk4",error:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk5",success:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk6",warning:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk7"},fade:{true:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk8",false:"pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk9"}},defaultVariants:{},compoundVariants:[]}),U="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnka",F="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkh",W="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkc",V="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkb",q="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkd",z="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnke",H="pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkf";const k=Object.freeze({warning:"status-warning",error:"status-error",success:"status-ok",info:"info-circle"});function f({children:r,className:o,imgSrc:t,kind:n="info",onClose:s,removeFromList:c,persist:a,title:l,id:d,...p}){const m=e.useRef(s);e.useEffect(()=>{m.current=s},[s]);const _=S.Tokens.component.growler.duration.visible,B=S.Tokens.component.growler.duration.fadeout,[M,w]=e.useState(!1),{t:O}=e.useContext(u.I18nContext);function P(){return[window.setTimeout(()=>{w(!0)},_),window.setTimeout(()=>{m.current&&m.current(),c&&d&&c(d)},_+B)]}const g=e.useRef([]);function G(){a||(g.current=P())}function h(){for(const R of g.current)window.clearTimeout(R);g.current=[]}function y(){h(),w(!1)}function K(){y(),w(!1),s&&s(),c&&d&&c(d)}return e.useEffect(()=>(G(),()=>{h()}),[]),e.createElement("div",{role:"alert","aria-live":"polite",className:u.cl(D({kind:n,fade:M}),o),onMouseEnter:y,onMouseLeave:G,...p},e.createElement("div",{className:V},t&&e.createElement("img",{src:t,alt:""}),n==="progress"?e.createElement(u.Spinner,null):e.createElement(u.Icon,{icon:k[n],className:W})),e.createElement("div",{className:q},e.createElement("div",{className:z},l&&e.createElement("span",{className:H},l),e.createElement("div",null,r)),e.createElement(N.Button,{kind:"icon",icon:"x",title:O("design-system:growler.dismiss"),className:F,onClick:K})))}u.Metadata.set(f,{name:"Growler",props:{imgSrc:{type:"string"},kind:{type:"GrowlerKind",default:"info"},onClose:{type:"() => void"},persist:{type:"boolean"},title:{type:"string"}}});let J=(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 v=e.createContext({growlerList:[],setGrowlerList:()=>{}});function E(r){const[o,t]=e.useState([]),n=a=>{if(!a){console.error("growlers should have an id");return}t(l=>l.filter(d=>a!==d.id))},s=o.map(({G:a,id:l})=>e.cloneElement(a(),{key:l,id:l,removeFromList:n})).filter(a=>u.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:U},s);return e.createElement(v.Provider,{value:{growlerList:o,setGrowlerList:t}},L.createPortal(c,document.body),r.children)}const Q=()=>{const r=e.useContext(v);if(r===void 0)throw new Error("addGrowler must be used within a GrowlerListProvider");return{addGrowler:e.useCallback(t=>{const n=J(),s={G:t,id:n};r.setGrowlerList([s,...r.growlerList])},[r])}},X={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:[f,E],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";
@@ -329,4 +329,4 @@
           </>
             );
           }
-          `}}}}},Y={Growlers:X};exports.Growler=g;exports.GrowlerIcons=B;exports.GrowlerListProvider=v;exports.MANIFEST=Y;exports.useGrowler=Q;
+          `}}}}},Y={Growlers:X};exports.Growler=f;exports.GrowlerIcons=k;exports.GrowlerListProvider=E;exports.MANIFEST=Y;exports.useGrowler=Q;

package/lib/index.es.js

@@ -1,137 +1,137 @@
 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 I from "react-dom";
+import { Metadata as C, I18nContext as P, cl as R, Spinner as A, Icon as L } from "@sps-woodland/core";
+import { Button as N } from "@sps-woodland/buttons";
+import { Tokens as h } from "@sps-woodland/tokens";
+import x from "react-dom";
 import { code as i } from "@spscommerce/utils";
-function _(r, o, t) {
-  return o in r ? Object.defineProperty(r, o, {
-    value: t,
+function I(r, t, o) {
+  return t in r ? Object.defineProperty(r, t, {
+    value: o,
     enumerable: !0,
     configurable: !0,
     writable: !0
-  }) : r[o] = t, r;
+  }) : r[t] = o, r;
 }
-function h(r, o) {
-  var t = Object.keys(r);
+function y(r, t) {
+  var o = Object.keys(r);
   if (Object.getOwnPropertySymbols) {
     var n = Object.getOwnPropertySymbols(r);
-    o && (n = n.filter(function(s) {
+    t && (n = n.filter(function(s) {
       return Object.getOwnPropertyDescriptor(r, s).enumerable;
-    })), t.push.apply(t, n);
+    })), o.push.apply(o, n);
   }
-  return t;
+  return o;
 }
-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) {
-      _(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));
+function S(r) {
+  for (var t = 1; t < arguments.length; t++) {
+    var o = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? y(Object(o), !0).forEach(function(n) {
+      I(r, n, o[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(o)) : y(Object(o)).forEach(function(n) {
+      Object.defineProperty(r, n, Object.getOwnPropertyDescriptor(o, n));
     });
   }
   return r;
 }
-var T = (r, o, t) => {
+var T = (r, t, o) => {
   for (var n of Object.keys(r)) {
     var s;
-    if (r[n] !== ((s = o[n]) !== null && s !== void 0 ? s : t[n]))
+    if (r[n] !== ((s = t[n]) !== null && s !== void 0 ? s : o[n]))
       return !1;
   }
   return !0;
-}, U = (r) => (o) => {
-  var t = r.defaultClassName, n = C(C({}, r.defaultVariants), o);
+}, U = (r) => (t) => {
+  var o = r.defaultClassName, n = S(S({}, r.defaultVariants), t);
   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 = (
+      var d = (
         // @ts-expect-error
         r.variantClassNames[s][l]
       );
-      u && (t += " " + u);
+      d && (o += " " + d);
     }
   }
-  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";
+  for (var [m, u] of r.compoundVariants)
+    T(m, n, r.defaultVariants) && (o += " " + u);
+  return o;
+}, D = U({ defaultClassName: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk1", variantClassNames: { kind: { activity: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk2", info: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk3", progress: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk4", error: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk5", success: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk6", warning: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk7" }, fade: { true: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk8", false: "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk9" } }, defaultVariants: {}, compoundVariants: [] }), j = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnka", F = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkh", W = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkc", V = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkb", z = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkd", q = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnke", H = "pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkf";
 const J = Object.freeze({
   warning: "status-warning",
   error: "status-error",
   success: "status-ok",
   info: "info-circle"
 });
-function E({
+function k({
   children: r,
-  className: o,
-  imgSrc: t,
+  className: t,
+  imgSrc: o,
   kind: n = "info",
   onClose: s,
   removeFromList: c,
   persist: a,
   title: l,
-  id: u,
-  ...d
+  id: d,
+  ...m
 }) {
-  const m = e.useRef(s);
+  const u = e.useRef(s);
   e.useEffect(() => {
-    m.current = s;
+    u.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() {
+  const g = h.component.growler.duration.visible, v = h.component.growler.duration.fadeout, [E, p] = e.useState(!1), { t: B } = e.useContext(P);
+  function M() {
     return [
       window.setTimeout(() => {
         p(!0);
-      }, f),
+      }, g),
       window.setTimeout(() => {
-        m.current && m.current(), c && u && c(u);
-      }, f + k)
+        u.current && u.current(), c && d && c(d);
+      }, g + v)
     ];
   }
   const w = e.useRef([]);
-  function g() {
-    a || (w.current = K());
+  function f() {
+    a || (w.current = M());
   }
-  function G() {
-    for (const P of w.current)
-      window.clearTimeout(P);
+  function _() {
+    for (const O of w.current)
+      window.clearTimeout(O);
     w.current = [];
   }
-  function y() {
-    G(), p(!1);
+  function G() {
+    _(), p(!1);
   }
-  function O() {
-    y(), p(!1), s && s(), c && u && c(u);
+  function K() {
+    G(), p(!1), s && s(), c && d && c(d);
   }
-  return e.useEffect(() => (g(), () => {
-    G();
+  return e.useEffect(() => (f(), () => {
+    _();
   }), []), /* @__PURE__ */ e.createElement(
     "div",
     {
       role: "alert",
       "aria-live": "polite",
-      className: A(D({ kind: n, fade: v }), o),
-      onMouseEnter: y,
-      onMouseLeave: g,
-      ...d
+      className: R(D({ kind: n, fade: E }), t),
+      onMouseEnter: G,
+      onMouseLeave: f,
+      ...m
     },
-    /* @__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: V }, o && /* @__PURE__ */ e.createElement("img", { src: o, alt: "" }), n === "progress" ? /* @__PURE__ */ e.createElement(A, null) : /* @__PURE__ */ e.createElement(L, { 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,
+      N,
       {
         kind: "icon",
         icon: "x",
-        title: M("design-system:growler.dismiss"),
+        title: B("design-system:growler.dismiss"),
         className: F,
-        onClick: O
+        onClick: K
       }
     ))
   );
 }
-b.set(E, {
+C.set(k, {
   name: "Growler",
   props: {
     imgSrc: { type: "string" },
@@ -141,21 +141,21 @@ b.set(E, {
     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({
+let Q = (r = 21) => crypto.getRandomValues(new Uint8Array(r)).reduce((t, o) => (o &= 63, o < 36 ? t += o.toString(36) : o < 62 ? t += (o - 26).toString(36).toUpperCase() : o > 62 ? t += "-" : t += "_", t), "");
+const b = e.createContext({
   growlerList: [],
   // setGrowlerList noop until defined
   setGrowlerList: () => {
   }
 });
 function X(r) {
-  const [o, t] = e.useState([]), n = (a) => {
+  const [t, o] = 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(
+    o((l) => l.filter((d) => a !== d.id));
+  }, s = t.map(({ G: a, id: l }) => e.cloneElement(a(), { key: l, id: l, removeFromList: n })).filter((a) => C.get(a.type).name === "Growler" ? !0 : (console.error(
     "addGrowler only accepts a function that returns a Growler"
   ), !1)), c = /* @__PURE__ */ e.createElement(
     "div",
@@ -166,16 +166,16 @@ function X(r) {
     },
     s
   );
-  return /* @__PURE__ */ e.createElement(B.Provider, { value: { growlerList: o, setGrowlerList: t } }, I.createPortal(c, document.body), r.children);
+  return /* @__PURE__ */ e.createElement(b.Provider, { value: { growlerList: t, setGrowlerList: o } }, x.createPortal(c, document.body), r.children);
 }
-const oe = () => {
-  const r = e.useContext(B);
+const te = () => {
+  const r = e.useContext(b);
   if (r === void 0)
     throw new Error("addGrowler must be used within a GrowlerListProvider");
   return { addGrowler: e.useCallback(
-    (t) => {
+    (o) => {
       const n = Q(), s = {
-        G: t,
+        G: o,
         id: n
       };
       r.setGrowlerList([s, ...r.growlerList]);
@@ -184,7 +184,7 @@ const oe = () => {
   ) };
 }, 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],
+  components: [k, X],
   examples: {
     general: {
       label: "General Usage",
@@ -600,9 +600,9 @@ const oe = () => {
   Growlers: Y
 };
 export {
-  E as Growler,
+  k as Growler,
   J as GrowlerIcons,
   X as GrowlerListProvider,
   ne as MANIFEST,
-  oe as useGrowler
+  te as useGrowler
 };

package/lib/style.css

@@ -1 +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 oklch(56.48% .008 219.62) solid}._1c5fbnk3{background:#027db8;border:.0625rem oklch(56.21% .128 239.83) solid}._1c5fbnk4{background:#91467f;border:.0625rem oklch(50.83% .125 337.21) solid}._1c5fbnk5{background:#de012e;border:.0625rem oklch(56.83% .229 22.94) solid}._1c5fbnk6{background:#0b8940;border:.0625rem oklch(55.21% .148 150.27) solid}._1c5fbnk7{background:#e77609;border:.0625rem oklch(68.35% .17 53.59) 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}
+@keyframes pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk0{0%{opacity:1}to{opacity:0}}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk1{border-radius:.25rem;box-shadow:0 0 .3125rem #00000040;display:flex;margin-bottom:1rem;overflow:hidden;width:25rem}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk2{background:#e9e9ea;border:.0625rem oklch(56.48% .008 219.62) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk3{background:#027db8;border:.0625rem oklch(56.21% .128 239.83) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk4{background:#91467f;border:.0625rem oklch(50.83% .125 337.21) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk5{background:#de012e;border:.0625rem oklch(56.83% .229 22.94) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk6{background:#0b8940;border:.0625rem oklch(55.21% .148 150.27) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk7{background:#e77609;border:.0625rem oklch(68.35% .17 53.59) solid}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk8{animation-name:pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk0;animation-duration:2s}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnk9{opacity:1}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnka{display:flex;flex-direction:column;position:fixed;right:1.875rem;top:5.625rem;width:25rem}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkb{align-items:center;display:flex;flex-grow:0;flex-shrink:0;flex-basis:4.375rem;justify-content:center}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkc{color:#fff;font-size:1.875rem}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkd{background-color:#fff;padding:1rem 2.625rem 1rem 1rem;position:relative;display:flex;flex-grow:1}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnke{flex-grow:1;font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkf{font-weight:600}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkg{color:#4b5356;overflow-wrap:break-word;width:16.5rem}.pkg_sps-woodland_growler__version_8_17_2__hash_1c5fbnkh{position:absolute;right:.5rem;top:.5rem}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/growler",
   "description": "SPS Woodland Design System growler component and hook",
-  "version": "8.17.0",
+  "version": "8.17.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/growler",
@@ -33,9 +33,9 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/buttons": "8.17.0",
-    "@sps-woodland/core": "8.17.0",
-    "@sps-woodland/tokens": "8.17.0"
+    "@sps-woodland/buttons": "8.17.2",
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "devDependencies": {
     "@spscommerce/utils": "^7.0.0",
@@ -43,9 +43,9 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/buttons": "8.17.0",
-    "@sps-woodland/core": "8.17.0",
-    "@sps-woodland/tokens": "8.17.0"
+    "@sps-woodland/buttons": "8.17.2",
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.mjs

@@ -1,11 +1,20 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),