quirk-ui 0.0.6 → 0.0.7

package/dist/components/Label/index.js

@@ -1,46 +1,45 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { c as a } from "../../createLucideIcon-C8GTh_Qx.js";
-import '../../assets/index26.css';const b = "_label_15ngo_1", h = "_text_15ngo_6", N = "_sm_15ngo_13", k = "_md_15ngo_17", I = "_lg_15ngo_21", $ = "_muted_15ngo_30", O = "_accent_15ngo_34", q = "_disabled_15ngo_38", C = "_error_15ngo_42", T = "_required_15ngo_47", W = "_optional_15ngo_52", z = "_srOnly_15ngo_58", j = "_icon_15ngo_71", v = "_tooltipWrapper_15ngo_77", L = "_tooltipIcon_15ngo_83", M = "_tooltipText_15ngo_91", o = {
-  label: b,
-  text: h,
-  sm: N,
-  md: k,
-  lg: I,
-  default: "_default_15ngo_26",
-  muted: $,
-  accent: O,
-  disabled: q,
-  error: C,
-  required: T,
-  optional: W,
-  srOnly: z,
-  icon: j,
-  tooltipWrapper: v,
-  tooltipIcon: L,
-  tooltipText: M
-};
-/**
+import '../../assets/index44.css';/**
  * @license lucide-react v0.488.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const A = [
+const b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
-], E = a("circle-alert", A);
+], h = a("circle-alert", b);
 /**
  * @license lucide-react v0.488.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const H = [
+const N = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
-], w = a("info", H);
+], k = a("info", N), I = "_label_15ngo_1", $ = "_text_15ngo_6", O = "_sm_15ngo_13", q = "_md_15ngo_17", C = "_lg_15ngo_21", T = "_muted_15ngo_30", W = "_accent_15ngo_34", z = "_disabled_15ngo_38", j = "_error_15ngo_42", v = "_required_15ngo_47", L = "_optional_15ngo_52", M = "_srOnly_15ngo_58", A = "_icon_15ngo_71", E = "_tooltipWrapper_15ngo_77", H = "_tooltipIcon_15ngo_83", w = "_tooltipText_15ngo_91", o = {
+  label: I,
+  text: $,
+  sm: O,
+  md: q,
+  lg: C,
+  default: "_default_15ngo_26",
+  muted: T,
+  accent: W,
+  disabled: z,
+  error: j,
+  required: v,
+  optional: L,
+  srOnly: M,
+  icon: A,
+  tooltipWrapper: E,
+  tooltipIcon: H,
+  tooltipText: w
+};
 function F({
   htmlFor: r,
   size: i = "md",
@@ -68,7 +67,7 @@ function F({
         n && /* @__PURE__ */ e("span", { className: o.required, children: " *" }),
         !n && _ && /* @__PURE__ */ e("span", { className: o.optional, children: "(optional)" }),
         t === "error" && d && /* @__PURE__ */ e(
-          E,
+          h,
           {
             size: 16,
             className: o.icon,
@@ -78,7 +77,7 @@ function F({
         ),
         s && /* @__PURE__ */ c("span", { className: o.tooltipWrapper, children: [
           /* @__PURE__ */ e(
-            w,
+            k,
             {
               size: 16,
               className: o.tooltipIcon,

package/dist/components/Link/Link.test.js

@@ -1,6 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d as c, i as r, r as i, s as o, g as n } from "../../index-BWTAh3RO.js";
-import { L as a, M as l } from "../../index-BtY6pil2.js";
+import { d as c, i as r, r as i, s as o, g as n } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { L as a, M as l } from "../../index-BXkubhGb.js";
+import "../../index-Bgo8MuTU.js";
 c("Link", () => {
   r("renders a normal anchor tag by default", () => {
     i(/* @__PURE__ */ t(a, { href: "/about", children: "About us" }));

package/dist/components/Link/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { L as m } from "../../index-BtY6pil2.js";
+import { L as m } from "../../index-BXkubhGb.js";
 export {
   m as Link
 };

package/dist/components/List/List.test.js

@@ -0,0 +1,78 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { v as I, d as k, i, r as n, g as t, s as o, f as s } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { List as l } from "./index.js";
+import { IconButton as h } from "../IconButton/index.js";
+import { c as y } from "../../createLucideIcon-C8GTh_Qx.js";
+/**
+ * @license lucide-react v0.488.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const v = [
+  ["path", { d: "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5", key: "laymnq" }],
+  ["path", { d: "M8.5 8.5v.01", key: "ue8clq" }],
+  ["path", { d: "M16 15.5v.01", key: "14dtrp" }],
+  ["path", { d: "M12 12v.01", key: "u5ubse" }],
+  ["path", { d: "M11 17v.01", key: "1hyl5a" }],
+  ["path", { d: "M7 14v.01", key: "uct60s" }]
+], p = y("cookie", v), m = [
+  {
+    id: "1",
+    content: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("h3", { children: "Item 1" }) })
+  },
+  {
+    id: "2",
+    content: /* @__PURE__ */ a("div", { children: [
+      "Item 2",
+      /* @__PURE__ */ e(
+        h,
+        {
+          size: "sm",
+          icon: /* @__PURE__ */ e(p, {}),
+          srOnlyLabel: "Cookie button",
+          onClick: () => console.log("more cookie")
+        }
+      )
+    ] })
+  },
+  {
+    id: "3",
+    content: "Item 3",
+    renderItem: (c) => /* @__PURE__ */ e("strong", { children: c })
+  }
+], B = [
+  {
+    id: "1",
+    content: "Clickable Item 1"
+  },
+  {
+    id: "2",
+    content: /* @__PURE__ */ e("div", { children: "Clickable Item 2" })
+  }
+], r = I.fn();
+k("List", () => {
+  i("renders list items correctly", () => {
+    n(/* @__PURE__ */ e(l, { items: m })), t(o.getByText("Item 1")).toBeInTheDocument(), t(o.getByText("Item 2")).toBeInTheDocument(), t(o.getByText("Item 3")).toBeInTheDocument();
+  }), i("renders list items as JSX elements correctly", () => {
+    n(/* @__PURE__ */ e(l, { items: m })), t(o.getByText("Item 2")).toBeInTheDocument();
+  }), i("calls onItemClick when a clickable item is clicked", () => {
+    n(/* @__PURE__ */ e(l, { items: B, onItemClick: r }));
+    const c = o.getByText("Clickable Item 1");
+    s.click(c), t(r).toHaveBeenCalledWith({
+      id: "1",
+      content: "Clickable Item 1"
+    });
+    const d = o.getByText("Clickable Item 2");
+    s.click(d), t(r).toHaveBeenCalledWith({
+      id: "2",
+      content: /* @__PURE__ */ e("div", { children: "Clickable Item 2" })
+    });
+  }), i("does not throw an error if onItemClick is not provided", () => {
+    n(/* @__PURE__ */ e(l, { items: m }));
+    const c = o.getByText("Item 1");
+    t(() => {
+      s.click(c);
+    }).not.toThrow();
+  });
+});

package/dist/components/List/index.js

@@ -0,0 +1,24 @@
+import { jsx as l } from "react/jsx-runtime";
+import '../../assets/index20.css';const c = "_list_4w9h5_1", i = "_listItem_4w9h5_13", n = {
+  list: c,
+  listItem: i
+};
+function d({
+  items: e,
+  ordered: r = !1,
+  className: a,
+  onItemClick: t
+}) {
+  return /* @__PURE__ */ l(r ? "ol" : "ul", { className: `${n.list} ${a ?? ""}`, children: e.map((s) => /* @__PURE__ */ l(
+    "li",
+    {
+      className: `${n.listItem} ${s.className ?? ""}`,
+      onClick: () => t == null ? void 0 : t(s),
+      children: s.renderItem ? s.renderItem(s.content) : s.content
+    },
+    s.id
+  )) });
+}
+export {
+  d as List
+};

package/dist/components/Modal/Modal.test.js

@@ -0,0 +1,94 @@
+import { jsx as e, jsxs as s, Fragment as a } from "react/jsx-runtime";
+import { d as u, i as d, r, g as n, s as t, f as i } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { Modal as l } from "./index.js";
+u("Modal", () => {
+  d("renders the trigger button", () => {
+    r(
+      /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" })
+        }
+      )
+    ), n(
+      t.getByRole("button", { name: "Open Modal" })
+    ).toBeInTheDocument();
+  }), d("does not render the modal content initially", () => {
+    r(
+      /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { children: "Open Modal" })
+        }
+      )
+    ), n(t.queryByText("Modal Content")).not.toBeInTheDocument();
+  }), d("it renders the modal content when the trigger is clicked", () => {
+    r(
+      /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" })
+        }
+      )
+    );
+    const o = t.getByRole("button", { name: "Open Modal" });
+    i.click(o), n(t.getByText("Modal Content")).toBeInTheDocument();
+  }), d("it closes the modal when clicking outside", () => {
+    r(
+      /* @__PURE__ */ s(a, { children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+            trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" })
+          }
+        ),
+        /* @__PURE__ */ e("div", { "data-testid": "outside", children: "Outside Element" })
+      ] })
+    );
+    const o = t.getByRole("button", { name: "Open Modal" });
+    i.click(o), n(t.getByText("Modal Content")).toBeInTheDocument();
+    const c = t.getByTestId("outside");
+    i.mouseDown(c), setTimeout(() => {
+      n(t.queryByText("Modal Content")).not.toBeInTheDocument();
+    }, 100);
+  }), d("it closes the modal when the close button is clicked", () => {
+    r(
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" })
+        }
+      ) })
+    );
+    const o = t.getByRole("button", { name: "Open Modal" });
+    i.click(o), n(t.getByText("Modal Content")).toBeInTheDocument();
+    const c = t.getByRole("button", { name: /close/i });
+    i.click(c), n(t.queryByText("Modal Content")).not.toBeInTheDocument();
+  }), d("handles controlled open state", () => {
+    const { rerender: o } = r(
+      /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" }),
+          isOpen: !1
+        }
+      )
+    );
+    n(t.queryByText("Modal Content")).not.toBeInTheDocument(), o(
+      /* @__PURE__ */ e(
+        l,
+        {
+          content: /* @__PURE__ */ e("div", { children: "Modal Content" }),
+          trigger: /* @__PURE__ */ e("button", { role: "button", children: "Open Modal" }),
+          isOpen: !0
+        }
+      )
+    ), n(t.getByText("Modal Content")).toBeInTheDocument();
+  });
+});

package/dist/components/Modal/index.js

@@ -0,0 +1,37 @@
+import { jsxs as a, Fragment as p, jsx as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { X as h } from "../../x-CnsEH4Ox.js";
+import '../../assets/index24.css';const f = "_overlay_nav1m_1", y = "_modal_nav1m_16", g = "_closeButton_nav1m_26", k = "_content_nav1m_37", n = {
+  overlay: f,
+  modal: y,
+  closeButton: g,
+  content: k
+};
+function b({
+  content: i,
+  trigger: r,
+  isOpen: s,
+  onClose: t,
+  className: m
+}) {
+  const [d, v] = u(!1), c = s !== void 0, l = c ? s : d, e = () => {
+    c ? t == null || t() : v(!l);
+  };
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ o("div", { onClick: e, children: r }),
+    l && /* @__PURE__ */ o("div", { className: n.overlay, onClick: e, children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: `${n.modal} ${m ?? ""}`,
+        onClick: (_) => _.stopPropagation(),
+        children: [
+          /* @__PURE__ */ o("button", { "aria-label": "Close", className: n.closeButton, onClick: e, children: /* @__PURE__ */ o(h, { size: 21 }) }),
+          /* @__PURE__ */ o("div", { className: n.content, children: i })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  b as Modal
+};

package/dist/components/MultiSelect/MultiSelect.test.js

@@ -1,7 +1,8 @@
 import { jsx as _e } from "react/jsx-runtime";
 import en from "react";
-import { b as H, d as tn, i as nn, r as Ge, g as Pe, s as Ae, v as rn } from "../../index-BWTAh3RO.js";
+import { c as H, d as tn, i as nn, r as Ge, g as Pe, s as Ae, v as rn } from "../../vi.B-PuvDzu-a048kFcX.js";
 import { MultiSelect as Xe } from "./index.js";
+import "../../index-Bgo8MuTU.js";
 function a(e, t, n) {
   return e.namespaceURI && e.namespaceURI !== "http://www.w3.org/1999/xhtml" || (t = Array.isArray(t) ? t : [
     t

package/dist/components/MultiSelect/index.js

@@ -1,11 +1,12 @@
 import { jsxs as d, jsx as l } from "react/jsx-runtime";
 import "react";
+import "../Tabs/index.js";
 import { Label as h } from "../Label/index.js";
-import '../../assets/index10.css';const w = "_wrapper_a587t_1", x = "_select_a587t_7", p = {
+import '../../assets/index39.css';const w = "_wrapper_a587t_1", x = "_select_a587t_7", p = {
   wrapper: w,
   select: x
 };
-function $({
+function A({
   id: r,
   name: m,
   label: s,
@@ -41,5 +42,5 @@ function $({
   ] });
 }
 export {
-  $ as MultiSelect
+  A as MultiSelect
 };

package/dist/components/NavBar/NavBar.test.js

@@ -0,0 +1,54 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as b, i as r, r as i, g as t, s as a, f as s, w as l } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { Navbar as n } from "./index.js";
+const c = [
+  { label: "Home", href: "/" },
+  {
+    label: "About",
+    sublinks: [
+      { label: "Leadership", href: "/about/leadership" },
+      { label: "Contact", href: "/about/contact" }
+    ]
+  },
+  {
+    label: "Services",
+    sublinks: [
+      { label: "Service 1", href: "/services/service-1" },
+      { label: "Service 2", href: "services//service-2" }
+    ]
+  },
+  { label: "External", href: "https://example.com", isExternal: !0 }
+];
+b("Navbar", () => {
+  r("renders all top-level nav items", () => {
+    i(/* @__PURE__ */ o(n, { items: c })), t(a.getByText("Home")).toBeInTheDocument(), t(a.getByText("Services")).toBeInTheDocument(), t(a.getByText("External")).toBeInTheDocument();
+  }), r("toggles mobile menu", () => {
+    i(/* @__PURE__ */ o(n, { items: c }));
+    const e = a.getByLabelText("Open menu");
+    s.click(e), t(e).toHaveAttribute("aria-label", "Close menu"), s.click(e), t(e).toHaveAttribute("aria-label", "Open menu");
+  }), r("open and closes submenu on click", async () => {
+    i(/* @__PURE__ */ o(n, { items: c }));
+    const e = a.getByText("Services"), u = a.getByRole("menu", { name: "Services submenu" });
+    s.click(e), await l(() => {
+      t(u).toHaveClass("show");
+    }), s.click(e), await l(() => {
+      t(u).not.toHaveClass("show");
+    });
+  }), r("has appropriate aria attributes", async () => {
+    i(/* @__PURE__ */ o(n, { items: c }));
+    const e = a.getByText("Services");
+    s.click(e), await l(() => {
+      t(e).toHaveAttribute("aria-expanded", "true");
+    }), s.click(e), await l(() => {
+      t(e).toHaveAttribute("aria-expanded", "false");
+    });
+  }), r("only allows one submenu open at a time", async () => {
+    i(/* @__PURE__ */ o(n, { items: c }));
+    const e = a.getByRole("menu", { name: "Services submenu" });
+    s.click(a.getByText("Services")), await l(() => {
+      t(e).toHaveClass("show");
+    }), s.click(a.getByText("About")), await l(() => {
+      t(e).not.toHaveClass("show");
+    });
+  });
+});

package/dist/components/NavBar/index.js

@@ -0,0 +1,139 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { useState as f, useRef as L, useCallback as m, useEffect as z } from "react";
+import { X as T } from "../../x-CnsEH4Ox.js";
+import { c as I } from "../../createLucideIcon-C8GTh_Qx.js";
+import { C as O } from "../../chevron-down-DSUzBz9F.js";
+import '../../assets/index43.css';/**
+ * @license lucide-react v0.488.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const W = [
+  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
+  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
+  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
+], j = I("menu", W), M = "_navbar_1u7z9_5", R = "_sticky_1u7z9_19", S = "_container_1u7z9_25", P = "_logo_1u7z9_35", D = "_menuToggle_1u7z9_41", X = "_nav_1u7z9_5", q = "_linkWrapper_1u7z9_57", A = "_linkItem_1u7z9_63", B = "_sublinkToggle_1u7z9_71", F = "_link_1u7z9_57", G = "_sublinks_1u7z9_101", H = "_show_1u7z9_123", J = "_chevron_1u7z9_130", K = "_open_1u7z9_134", Q = "_parent_1u7z9_176", e = {
+  navbar: M,
+  sticky: R,
+  container: S,
+  logo: P,
+  menuToggle: D,
+  nav: X,
+  linkWrapper: q,
+  linkItem: A,
+  sublinkToggle: B,
+  link: F,
+  sublinks: G,
+  show: H,
+  chevron: J,
+  open: K,
+  parent: Q
+};
+function ne({
+  logo: y,
+  items: w,
+  isSticky: $ = !1,
+  className: x
+}) {
+  const [l, _] = f(!1), [N, r] = f(null), i = L(null), C = () => {
+    _((s) => !s);
+  }, E = (s) => {
+    r((a) => a === s ? null : s);
+  }, v = m((s) => {
+    i.current && !i.current.contains(s.target) && r(null);
+  }, []), p = m(() => {
+    r(null);
+  }, []), b = m(() => {
+    window.innerWidth > 768 && (_(!1), r(null), document.body.style.overflow = "");
+  }, []);
+  z(() => (window.addEventListener("resize", b), document.addEventListener("click", v), window.addEventListener("scroll", p), () => {
+    window.removeEventListener("resize", b), document.removeEventListener("click", v), window.removeEventListener("scroll", p);
+  }), []), z(() => (document.body.style.overflow = l ? "hidden" : "", () => {
+    document.body.style.overflow = "";
+  }), [l]);
+  const h = (s, a = "") => s.map((n) => {
+    var g;
+    const t = `${a}/${n.label}`, c = N === t, u = (g = n.sublinks) == null ? void 0 : g.length;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: `${e.linkWrapper} ${a ? "" : e.parent}`,
+        children: [
+          /* @__PURE__ */ o("div", { className: e.linkItem, children: n.href ? /* @__PURE__ */ o(
+            "a",
+            {
+              href: n.href,
+              className: e.link,
+              target: n.isExternal ? "_blank" : "_self",
+              rel: n.isExternal ? "noopener noreferrer" : void 0,
+              onClick: () => {
+                var k;
+                r(null), (k = n.onClick) == null || k.call(n);
+              },
+              role: "menuitem",
+              children: n.label
+            }
+          ) : /* @__PURE__ */ d(
+            "button",
+            {
+              "aria-haspopup": u ? "true" : void 0,
+              "aria-expanded": c,
+              className: `${e.sublinkToggle} ${c ? e.open : ""}`,
+              onClick: () => E(t),
+              children: [
+                n.label,
+                u && /* @__PURE__ */ o(O, { size: 21, className: e.chevron })
+              ]
+            }
+          ) }),
+          u && /* @__PURE__ */ o(
+            "div",
+            {
+              className: `${e.sublinks} ${c ? e.show : ""}`,
+              role: "menu",
+              "aria-label": `${n.label} submenu`,
+              children: h(n.sublinks, t)
+            }
+          )
+        ]
+      },
+      t
+    );
+  });
+  return /* @__PURE__ */ o(
+    "header",
+    {
+      ref: i,
+      className: `${e.navbar} ${$ ? e.sticky : ""} ${x ?? ""}`,
+      role: "navigation",
+      "aria-label": "Main navigation",
+      children: /* @__PURE__ */ d("div", { className: e.container, children: [
+        /* @__PURE__ */ o("div", { className: e.logo, children: y }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: e.menuToggle,
+            onClick: C,
+            "aria-label": l ? "Close menu" : "Open menu",
+            "aria-expanded": l,
+            "aria-controls": "main-menu",
+            children: l ? /* @__PURE__ */ o(T, { size: 24 }) : /* @__PURE__ */ o(j, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ o(
+          "nav",
+          {
+            className: `${e.nav} ${l ? e.open : ""}`,
+            id: "main-menu",
+            role: "menubar",
+            children: h(w)
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ne as Navbar
+};

package/dist/components/Notification/Notification.test.js

@@ -0,0 +1,64 @@
+import { jsx as t } from "react/jsx-runtime";
+import { d as l, i, r as a, v as s, g as o, s as r, f as m } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { Notification as n } from "./index.js";
+l("Notification", () => {
+  i("renders with the correct message", () => {
+    a(
+      /* @__PURE__ */ t(
+        n,
+        {
+          id: "1",
+          message: "Test Notification",
+          variant: "info",
+          duration: 3e3,
+          onClose: s.fn()
+        }
+      )
+    ), o(r.getByText("Test Notification")).toBeInTheDocument();
+  }), i("applies the correct variant class", () => {
+    const { container: e } = a(
+      /* @__PURE__ */ t(
+        n,
+        {
+          id: "1",
+          message: "Error Notification",
+          variant: "error",
+          duration: 3e3,
+          onClose: s.fn()
+        }
+      )
+    );
+    o(e.firstChild).toHaveClass("error");
+  }), i("calls onClose after the duration", async () => {
+    s.useFakeTimers();
+    const e = s.fn();
+    a(
+      /* @__PURE__ */ t(
+        n,
+        {
+          id: "1",
+          message: "Auto Dismiss",
+          variant: "success",
+          duration: 3e3,
+          onClose: e
+        }
+      )
+    ), s.advanceTimersByTime(2700), o(e).not.toHaveBeenCalled(), s.advanceTimersByTime(300), o(e).toHaveBeenCalledTimes(1), s.useRealTimers();
+  }), i("calls onClose when close button is clicked", () => {
+    const e = s.fn();
+    a(
+      /* @__PURE__ */ t(
+        n,
+        {
+          id: "1",
+          message: "Closable Notification",
+          variant: "success",
+          duration: 3e3,
+          onClose: e
+        }
+      )
+    );
+    const c = r.getByRole("button");
+    m.click(c), o(e).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/components/Notification/__mocks__/styles.module.css.js

@@ -0,0 +1,9 @@
+const s = {
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "error"
+};
+export {
+  s as default
+};