@purpurds/notification 8.16.3 → 8.17.1

package/dist/notification.es.js

@@ -1,14 +1,14 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import { forwardRef as k } from "react";
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import { forwardRef as H } from "react";
 const W = {
   LG: "lg"
 };
 function Y(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var A = { exports: {} }, q;
+var z = { exports: {} }, R;
 function J() {
-  return q || (q = 1, (function(e) {
+  return R || (R = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -37,7 +37,7 @@ function J() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(A)), A.exports;
+  })(z)), z.exports;
 }
 var K = J();
 const Q = /* @__PURE__ */ Y(K), X = "_rotate_12t9p_1", rr = "_dash_12t9p_1", tr = {
@@ -52,7 +52,7 @@ const Q = /* @__PURE__ */ Y(K), X = "_rotate_12t9p_1", rr = "_dash_12t9p_1", tr
   dash: rr,
   "purpur-spinner__circle--disabled": "_purpur-spinner__circle--disabled_12t9p_41",
   "purpur-spinner__circle--negative": "_purpur-spinner__circle--negative_12t9p_44"
-}, z = Q.bind(tr), h = "purpur-spinner", er = {
+}, P = Q.bind(tr), v = "purpur-spinner", er = {
   SM: "sm"
 }, F = ({
   disabled: e = !1,
@@ -60,12 +60,12 @@ const Q = /* @__PURE__ */ Y(K), X = "_rotate_12t9p_1", rr = "_dash_12t9p_1", tr
   size: p = er.SM,
   className: a,
   ...u
-}) => /* @__PURE__ */ o("div", { className: z(h, `${h}--${p}`, a), ...u, children: /* @__PURE__ */ o("svg", { viewBox: "0 0 50 50", children: /* @__PURE__ */ o(
+}) => /* @__PURE__ */ o("div", { className: P(v, `${v}--${p}`, a), ...u, children: /* @__PURE__ */ o("svg", { viewBox: "0 0 50 50", children: /* @__PURE__ */ o(
   "circle",
   {
-    className: z(`${h}__circle`, {
-      [`${h}__circle--disabled`]: e,
-      [`${h}__circle--negative`]: i
+    className: P(`${v}__circle`, {
+      [`${v}__circle--disabled`]: e,
+      [`${v}__circle--negative`]: i
     }),
     cx: "25",
     cy: "25",
@@ -76,9 +76,9 @@ F.displayName = "Spinner";
 function nr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var R = { exports: {} }, P;
+var L = { exports: {} }, M;
 function pr() {
-  return P || (P = 1, (function(e) {
+  return M || (M = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -107,7 +107,7 @@ function pr() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(R)), R.exports;
+  })(L)), L.exports;
 }
 var ir = pr();
 const ur = /* @__PURE__ */ nr(ir), ar = {
@@ -133,7 +133,7 @@ const ur = /* @__PURE__ */ nr(ir), ar = {
   "purpur-button--text-negative": "_purpur-button--text-negative_10jh0_185",
   "purpur-button--text": "_purpur-button--text_10jh0_185",
   "purpur-button__spinner": "_purpur-button__spinner_10jh0_235"
-}, L = ur.bind(ar), _ = "purpur-button", H = k(
+}, C = ur.bind(ar), _ = "purpur-button", V = H(
   ({
     children: e,
     className: i,
@@ -147,10 +147,10 @@ const ur = /* @__PURE__ */ nr(ir), ar = {
     variant: s,
     type: g = "button",
     ...b
-  }, $) => {
+  }, m) => {
     if (u && s === "destructive")
       return null;
-    const x = L(
+    const S = C(
       [
         _,
         `${_}--${t ? `${s}-negative` : s}`,
@@ -163,17 +163,17 @@ const ur = /* @__PURE__ */ nr(ir), ar = {
         [`${_}--disabled`]: p || r
       },
       i
-    ), U = (O) => {
-      p || r ? O.preventDefault() : n && n(O);
-    }, N = !!b["aria-disabled"] || p || r;
-    return /* @__PURE__ */ v(
+    ), j = (A) => {
+      p || r ? A.preventDefault() : n && n(A);
+    }, h = !!b["aria-disabled"] || p || r;
+    return /* @__PURE__ */ w(
       "button",
       {
-        className: x,
+        className: S,
         type: g,
-        ref: $,
-        "aria-disabled": N,
-        onClick: U,
+        ref: m,
+        "aria-disabled": h,
+        onClick: j,
         ...b,
         children: [
           r && /* @__PURE__ */ o(
@@ -181,8 +181,8 @@ const ur = /* @__PURE__ */ nr(ir), ar = {
             {
               size: c === W.LG ? "xs" : "xxs",
               negative: t,
-              disabled: N,
-              className: L(`${_}__spinner`)
+              disabled: h,
+              className: C(`${_}__spinner`)
             }
           ),
           " ",
@@ -192,13 +192,13 @@ const ur = /* @__PURE__ */ nr(ir), ar = {
     );
   }
 );
-H.displayName = "Button";
+V.displayName = "Button";
 function or(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var C = { exports: {} }, M;
+var E = { exports: {} }, I;
 function sr() {
-  return M || (M = 1, (function(e) {
+  return I || (I = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -227,10 +227,10 @@ function sr() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(C)), C.exports;
+  })(E)), E.exports;
 }
 var lr = sr();
-const _r = /* @__PURE__ */ or(lr), m = {
+const _r = /* @__PURE__ */ or(lr), $ = {
   "purpur-heading": "_purpur-heading_vo751_1",
   "purpur-heading--hyphens": "_purpur-heading--hyphens_vo751_8",
   "purpur-heading--negative": "_purpur-heading--negative_vo751_11",
@@ -252,7 +252,7 @@ const _r = /* @__PURE__ */ or(lr), m = {
   "purpur-heading--display-200": "_purpur-heading--display-200_vo751_104"
 }, cr = {
   TITLE100: "title-100"
-}, w = "purpur-heading", V = ({
+}, x = "purpur-heading", D = ({
   children: e,
   className: i = "",
   enableHyphenation: p = !1,
@@ -263,22 +263,22 @@ const _r = /* @__PURE__ */ or(lr), m = {
 }) => {
   const n = u, c = _r([
     i,
-    m[w],
-    m[`${w}--${r}`],
+    $[x],
+    $[`${x}--${r}`],
     {
-      [m[`${w}--hyphens`]]: p,
-      [m[`${w}--negative`]]: a
+      [$[`${x}--hyphens`]]: p,
+      [$[`${x}--negative`]]: a
     }
   ]);
   return /* @__PURE__ */ o(n, { className: c, ...t, children: e });
 };
-V.displayName = "Heading";
+D.displayName = "Heading";
 function dr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var E = { exports: {} }, I;
+var Z = { exports: {} }, B;
 function gr() {
-  return I || (I = 1, (function(e) {
+  return B || (B = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -307,10 +307,10 @@ function gr() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(E)), E.exports;
+  })(Z)), Z.exports;
 }
 var hr = gr();
-const fr = /* @__PURE__ */ dr(hr), vr = {
+const vr = /* @__PURE__ */ dr(hr), fr = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -318,7 +318,7 @@ const fr = /* @__PURE__ */ dr(hr), vr = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, yr = fr.bind(vr), Z = "purpur-icon", br = "md", mr = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), wr = ({ content: e = "", title: i } = {}) => {
+}, yr = vr.bind(fr), q = "purpur-icon", br = "md", mr = (e) => e.filter((i) => Object.keys(i).length >= 1).map((i) => `${i.name}="${i.value}"`).join(" "), $r = ({ content: e = "", title: i } = {}) => {
   const p = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
@@ -326,15 +326,15 @@ const fr = /* @__PURE__ */ dr(hr), vr = {
     i ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], a = i ? `<title>${i}</title>` : "";
   return `<svg ${mr(p)}>${a}${e}</svg>`;
-}, $r = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), j = ({ svg: e, allyTitle: i, className: p, size: a = br, ...u }) => {
-  const r = wr({
-    content: $r(e.svg),
+}, xr = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), O = ({ svg: e, allyTitle: i, className: p, size: a = br, ...u }) => {
+  const r = $r({
+    content: xr(e.svg),
     title: i
-  }), t = yr(Z, `${Z}--${a}`, p);
+  }), t = yr(q, `${q}--${a}`, p);
   return /* @__PURE__ */ o("span", { className: t, dangerouslySetInnerHTML: { __html: r }, ...u });
 };
-j.displayName = "Icon";
-const xr = {
+O.displayName = "Icon";
+const wr = {
   name: "alert-filled",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm1.038-14.81-.247 6.875h-1.566l-.247-6.876a1.03 1.03 0 1 1 2.06 0Zm.212 8.916c0 .649-.585 1.234-1.25 1.234-.649 0-1.25-.585-1.25-1.234 0-.633.601-1.234 1.25-1.234.665 0 1.25.601 1.25 1.234Z" clip-rule="evenodd"/></svg>',
   keywords: ["alert-filled"],
@@ -363,9 +363,9 @@ const xr = {
 function Ar(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var B = { exports: {} }, G;
-function qr() {
-  return G || (G = 1, (function(e) {
+var G = { exports: {} }, T;
+function zr() {
+  return T || (T = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -394,10 +394,10 @@ function qr() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(B)), B.exports;
+  })(G)), G.exports;
 }
-var zr = qr();
-const Rr = /* @__PURE__ */ Ar(zr), Pr = {
+var Rr = zr();
+const Pr = /* @__PURE__ */ Ar(Rr), Lr = {
   "purpur-paragraph": "_purpur-paragraph_1vz75_1",
   "purpur-paragraph--disabled": "_purpur-paragraph--disabled_1vz75_7",
   "purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_1vz75_10",
@@ -413,9 +413,9 @@ const Rr = /* @__PURE__ */ Ar(zr), Pr = {
   "purpur-paragraph--additional-100-bold": "_purpur-paragraph--additional-100-bold_1vz75_67",
   "purpur-paragraph--overline-100": "_purpur-paragraph--overline-100_1vz75_74",
   "purpur-paragraph--overline-200": "_purpur-paragraph--overline-200_1vz75_82"
-}, Lr = Rr.bind(Pr), Cr = {
+}, Mr = Pr.bind(Lr), Cr = {
   PARAGRAPH100: "paragraph-100"
-}, f = "purpur-paragraph", D = ({
+}, f = "purpur-paragraph", U = ({
   children: e,
   className: i,
   disabled: p,
@@ -424,21 +424,21 @@ const Rr = /* @__PURE__ */ Ar(zr), Pr = {
   variant: r = Cr.PARAGRAPH100,
   ...t
 }) => {
-  const n = Lr(i, f, `${f}--${r}`, {
+  const n = Mr(i, f, `${f}--${r}`, {
     [`${f}--hyphens`]: a,
     [`${f}--disabled`]: p,
     [`${f}--negative`]: u
   });
   return /* @__PURE__ */ o("p", { ...t, className: n, children: e });
 };
-D.displayName = "Paragraph";
-function Mr(e) {
+U.displayName = "Paragraph";
+function Er(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var S = { exports: {} };
-var T;
-function Er() {
-  return T || (T = 1, (function(e) {
+var N = { exports: {} };
+var k;
+function Ir() {
+  return k || (k = 1, (function(e) {
     (function() {
       var i = {}.hasOwnProperty;
       function p() {
@@ -467,24 +467,25 @@ function Er() {
       }
       e.exports ? (p.default = p, e.exports = p) : window.classNames = p;
     })();
-  })(S)), S.exports;
+  })(N)), N.exports;
 }
-var Ir = Er();
-const Zr = /* @__PURE__ */ Mr(Ir), Br = {
-  "purpur-notification": "_purpur-notification_10qwf_1",
-  "purpur-notification__top": "_purpur-notification__top_10qwf_14",
-  "purpur-notification__header": "_purpur-notification__header_10qwf_20",
-  "purpur-notification__close-button": "_purpur-notification__close-button_10qwf_25",
-  "purpur-notification__icon": "_purpur-notification__icon_10qwf_30",
-  "purpur-notification__body": "_purpur-notification__body_10qwf_33",
-  "purpur-notification--success": "_purpur-notification--success_10qwf_36",
-  "purpur-notification__heading": "_purpur-notification__heading_10qwf_39",
-  "purpur-notification--warning": "_purpur-notification--warning_10qwf_45",
-  "purpur-notification--error": "_purpur-notification--error_10qwf_54",
-  "purpur-notification--info": "_purpur-notification--info_10qwf_63",
-  "purpur-notification--hidden": "_purpur-notification--hidden_10qwf_72",
-  "purpur-notification--has-close-button": "_purpur-notification--has-close-button_10qwf_76"
-}, d = Zr.bind(Br), y = {
+var Zr = Ir();
+const Br = /* @__PURE__ */ Er(Zr), qr = {
+  "purpur-notification": "_purpur-notification_53c05_1",
+  "purpur-notification__top": "_purpur-notification__top_53c05_14",
+  "purpur-notification__header": "_purpur-notification__header_53c05_20",
+  "purpur-notification__close-button": "_purpur-notification__close-button_53c05_25",
+  "purpur-notification__icon": "_purpur-notification__icon_53c05_30",
+  "purpur-notification__body": "_purpur-notification__body_53c05_33",
+  "purpur-notification__body--extra-padding": "_purpur-notification__body--extra-padding_53c05_36",
+  "purpur-notification--success": "_purpur-notification--success_53c05_39",
+  "purpur-notification__heading": "_purpur-notification__heading_53c05_42",
+  "purpur-notification--warning": "_purpur-notification--warning_53c05_48",
+  "purpur-notification--error": "_purpur-notification--error_53c05_57",
+  "purpur-notification--info": "_purpur-notification--info_53c05_66",
+  "purpur-notification--hidden": "_purpur-notification--hidden_53c05_75",
+  "purpur-notification--has-close-button": "_purpur-notification--has-close-button_53c05_79"
+}, d = Br.bind(qr), y = {
   SUCCESS: "success",
   WARNING: "warning",
   ERROR: "error",
@@ -503,11 +504,11 @@ const Zr = /* @__PURE__ */ Mr(Ir), Br = {
     case y.SUCCESS:
       return Sr;
     case y.WARNING:
-      return xr;
+      return wr;
     case y.ERROR:
       return Nr;
   }
-}, Fr = k(
+}, Hr = H(
   ({
     ["data-testid"]: e,
     ["aria-live"]: i,
@@ -521,26 +522,28 @@ const Zr = /* @__PURE__ */ Mr(Ir), Br = {
     id: s,
     onClose: g,
     open: b = !0,
-    ...$
-  }, x) => /* @__PURE__ */ o("div", { "aria-live": i, children: b && /* @__PURE__ */ v(
-    "div",
-    {
-      id: s,
-      "aria-labelledby": s ? `${s}-heading` : void 0,
-      "aria-describedby": s ? `${s}-body` : void 0,
-      "aria-hidden": !!c,
-      className: d(a, l, `${l}--${t}`, {
-        [`${l}--hidden`]: c,
-        [`${l}--has-close-button`]: !!g
-      }),
-      "data-testid": e,
-      ref: x,
-      ...$,
-      children: [
-        /* @__PURE__ */ v("div", { className: d(`${l}__top`), children: [
-          /* @__PURE__ */ v("div", { className: d(`${l}__header`), children: [
-            /* @__PURE__ */ o(
-              j,
+    hideIcon: m,
+    ...S
+  }, j) => {
+    const h = !!n || !m;
+    return /* @__PURE__ */ o("div", { "aria-live": i, children: b && /* @__PURE__ */ w(
+      "div",
+      {
+        id: s,
+        "aria-labelledby": s ? `${s}-heading` : void 0,
+        "aria-describedby": s ? `${s}-body` : void 0,
+        "aria-hidden": !!c,
+        className: d(a, l, `${l}--${t}`, {
+          [`${l}--hidden`]: c,
+          [`${l}--has-close-button`]: !!g
+        }),
+        "data-testid": e,
+        ref: j,
+        ...S,
+        children: [
+          h && /* @__PURE__ */ o("div", { className: d(`${l}__top`), children: /* @__PURE__ */ w("div", { className: d(`${l}__header`), children: [
+            !m && /* @__PURE__ */ o(
+              O,
               {
                 "data-testid": e ? `${e}-icon` : void 0,
                 className: d(`${l}__icon`),
@@ -549,21 +552,21 @@ const Zr = /* @__PURE__ */ Mr(Ir), Br = {
               }
             ),
             !!n && /* @__PURE__ */ o(
-              V,
+              D,
               {
                 "data-testid": e ? `${e}-heading` : void 0,
                 variant: "subsection-100",
                 tag: r,
                 className: d(`${l}__heading`),
-                children: /* @__PURE__ */ v("span", { id: s ? `${s}-heading` : void 0, children: [
+                children: /* @__PURE__ */ w("span", { id: s ? `${s}-heading` : void 0, children: [
                   " ",
                   n
                 ] })
               }
             )
-          ] }),
+          ] }) }),
           g && /* @__PURE__ */ o(
-            H,
+            V,
             {
               "data-testid": e ? `${e}-close-button` : void 0,
               variant: "tertiary-purple",
@@ -572,36 +575,38 @@ const Zr = /* @__PURE__ */ Mr(Ir), Br = {
               "aria-label": u,
               onClick: g,
               className: d(`${l}__close-button`),
-              children: /* @__PURE__ */ o(j, { svg: jr, size: "sm" })
+              children: /* @__PURE__ */ o(O, { svg: jr, size: "sm" })
+            }
+          ),
+          p && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-testid": e ? `${e}-body` : void 0,
+              className: d(`${l}__body`, {
+                [`${l}__body--extra-padding`]: !h && !!g
+              }),
+              id: s ? `${s}-body` : void 0,
+              children: typeof p == "string" ? /* @__PURE__ */ o(
+                U,
+                {
+                  "data-testid": e ? `${e}-paragraph` : void 0,
+                  variant: "paragraph-100",
+                  children: p
+                }
+              ) : p
             }
           )
-        ] }),
-        p && /* @__PURE__ */ o(
-          "div",
-          {
-            "data-testid": e ? `${e}-body` : void 0,
-            className: d(`${l}__body`),
-            id: s ? `${s}-body` : void 0,
-            children: typeof p == "string" ? /* @__PURE__ */ o(
-              D,
-              {
-                "data-testid": e ? `${e}-paragraph` : void 0,
-                variant: "paragraph-100",
-                children: p
-              }
-            ) : p
-          }
-        )
-      ]
-    }
-  ) })
+        ]
+      }
+    ) });
+  }
 );
-Fr.displayName = "Notification";
+Hr.displayName = "Notification";
 export {
   Gr as NOTIFICATION_ARIA_LIVE,
   Tr as NOTIFICATION_ROLE,
   y as NOTIFICATION_STATUS,
-  Fr as Notification,
+  Hr as Notification,
   Ur as notificationAriaLiveValues,
   Wr as notificationRoles,
   Dr as notificationStatuses