@sps-woodland/growler 8.2.2 → 8.3.0

package/lib/Growler.d.ts

@@ -16,4 +16,4 @@ export declare function Growler({ children, className, imgSrc, kind, onClose, re
     persist?: boolean;
     title: string;
     id?: string | number;
-}> & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+}> & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/lib/GrowlerListProvider.d.ts

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

package/lib/index.es.js

@@ -105,34 +105,28 @@ function E({
   }
   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
-  })));
+  }), []), /* @__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",
@@ -159,14 +153,16 @@ function X(r) {
     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);
+  ), !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);
@@ -188,10 +184,7 @@ const oe = () => {
   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"), "."))
+      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",

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 #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}
+@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:oklch(93.43% .001 286.37);border:.0625rem oklch(56.48% .008 219.62) solid}._1c5fbnk3{background:oklch(56.21% .128 239.83);border:.0625rem oklch(56.21% .128 239.83) solid}._1c5fbnk4{background:oklch(50.83% .125 337.21);border:.0625rem oklch(50.83% .125 337.21) solid}._1c5fbnk5{background:oklch(56.83% .229 22.94);border:.0625rem oklch(56.83% .229 22.94) solid}._1c5fbnk6{background:oklch(55.21% .148 150.27);border:.0625rem oklch(55.21% .148 150.27) solid}._1c5fbnk7{background:oklch(68.35% .17 53.59);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:oklch(100% 0 0);font-size:1.875rem}._1c5fbnkd{background-color:oklch(100% 0 0);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:oklch(43.62% .011 222.24);overflow-wrap:break-word;width:16.5rem}._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.2.2",
+  "version": "8.3.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/growler",
@@ -33,9 +33,9 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.2.2",
-    "@sps-woodland/tokens": "8.2.2",
-    "@sps-woodland/buttons": "8.2.2"
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tokens": "8.3.0",
+    "@sps-woodland/buttons": "8.3.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -43,9 +43,9 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.2.2",
-    "@sps-woodland/tokens": "8.2.2",
-    "@sps-woodland/buttons": "8.2.2"
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tokens": "8.3.0",
+    "@sps-woodland/buttons": "8.3.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",