@codbex/harmonia 1.6.1 → 1.7.1

package/dist/harmonia.js

@@ -1,47 +1,16 @@
 (() => {
-  // node_modules/uuid/dist/stringify.js
-  var byteToHex = [];
-  for (let i = 0; i < 256; ++i) {
-    byteToHex.push((i + 256).toString(16).slice(1));
-  }
-  function unsafeStringify(arr, offset4 = 0) {
-    return (byteToHex[arr[offset4 + 0]] + byteToHex[arr[offset4 + 1]] + byteToHex[arr[offset4 + 2]] + byteToHex[arr[offset4 + 3]] + "-" + byteToHex[arr[offset4 + 4]] + byteToHex[arr[offset4 + 5]] + "-" + byteToHex[arr[offset4 + 6]] + byteToHex[arr[offset4 + 7]] + "-" + byteToHex[arr[offset4 + 8]] + byteToHex[arr[offset4 + 9]] + "-" + byteToHex[arr[offset4 + 10]] + byteToHex[arr[offset4 + 11]] + byteToHex[arr[offset4 + 12]] + byteToHex[arr[offset4 + 13]] + byteToHex[arr[offset4 + 14]] + byteToHex[arr[offset4 + 15]]).toLowerCase();
-  }
-
-  // node_modules/uuid/dist/rng.js
-  var rnds8 = new Uint8Array(16);
-  function rng() {
-    return crypto.getRandomValues(rnds8);
-  }
-
-  // node_modules/uuid/dist/v4.js
-  function v4(options, buf, offset4) {
-    if (!buf && !options && crypto.randomUUID) {
-      return crypto.randomUUID();
-    }
-    return _v4(options, buf, offset4);
-  }
-  function _v4(options, buf, offset4) {
-    options = options || {};
-    const rnds = options.random ?? options.rng?.() ?? rng();
-    if (rnds.length < 16) {
-      throw new Error("Random bytes length must be >= 16");
-    }
-    rnds[6] = rnds[6] & 15 | 64;
-    rnds[8] = rnds[8] & 63 | 128;
-    if (buf) {
-      offset4 = offset4 || 0;
-      if (offset4 < 0 || offset4 + 16 > buf.length) {
-        throw new RangeError(`UUID byte range ${offset4}:${offset4 + 15} is out of buffer bounds`);
-      }
-      for (let i = 0; i < 16; ++i) {
-        buf[offset4 + i] = rnds[i];
-      }
-      return buf;
-    }
-    return unsafeStringify(rnds);
-  }
-  var v4_default = v4;
+  // src/utils/uuid.js
+  var uuidv4 = self?.crypto?.randomUUID ? function() {
+    return self.crypto.randomUUID();
+  } : function() {
+    console.warn("UUIDv4: Running in a non-secure context!");
+    function _p8(s) {
+      const p = (Math.random().toString(16) + "000000000").substring(2, 10);
+      return s ? `-${p.substring(0, 4)}-${p.substring(4, 8)}` : p;
+    }
+    return _p8() + _p8(true) + _p8(true) + _p8();
+  };
+  var uuid_default = uuidv4;
 
   // src/common/icons.js
   var Calendar = 0;
@@ -56,6 +25,23 @@
   var Ellipsis = 9;
   var Minus = 10;
   var Plus = 11;
+  var Close = 12;
+  var Bell = 13;
+  var Trash = 14;
+  var Mail = 15;
+  var Send = 16;
+  var Export = 17;
+  var Import = 18;
+  var Edit = 19;
+  var Menu = 20;
+  var Reply = 21;
+  var Refresh = 22;
+  var CircleInfo = 23;
+  var CircleWarning = 24;
+  var CircleError = 25;
+  var CircleSuccess = 26;
+  var CircleUnknown = 27;
+  var CircleUser = 28;
   function setCalendarContent(svg) {
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     path.setAttributeNS(
@@ -182,6 +168,222 @@
     );
     svg.appendChild(path);
   }
+  function setCloseContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m12.95 3.0503c-0.2938-0.2938-0.76686-0.2938-1.0607 0l-3.8891 3.8891-3.8891-3.8891c-0.2938-0.2938-0.76686-0.2938-1.0607 0-0.2938 0.2938-0.2938 0.76686 0 1.0607l3.8891 3.8891-3.8891 3.8891c-0.2938 0.2938-0.2938 0.76686 0 1.0607 0.2938 0.2938 0.76686 0.2938 1.0607 0l3.8891-3.8891 3.8891 3.8891c0.2938 0.2938 0.76686 0.2938 1.0607 0 0.2938-0.2938 0.2938-0.76686 0-1.0607l-3.8891-3.8891 3.8891-3.8891c0.2938-0.2938 0.2938-0.76686 0-1.0607z"
+    );
+    svg.appendChild(path1);
+  }
+  function setBellContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", "m6.7206 13.171c-0.65794 0-0.78791 0.50739-0.53794 0.92414 0.72424 1.2064 2.9155 1.2064 3.6397 0 0.25-0.41678 0.11804-0.92414-0.53794-0.92414z");
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8.0017 1.0011c-1.4533-0.029274-2.9825 0.51861-3.8425 1.7418-1.0308 1.3944-1.1644 3.1887-1.131 4.8636-0.019737 1.2007-0.5306 2.3761-1.3316 3.2619-0.32199 0.50537 0.16335 1.2079 0.74794 1.108 3.7645-0.0022 7.5293 0.0045 11.294-0.0034 0.60962-0.02615 0.89718-0.87008 0.45127-1.2798-0.84568-0.96782-1.2957-2.2626-1.2151-3.5465 0.026492-1.7605-0.29402-3.6931-1.625-4.9635-0.88559-0.8583-2.141-1.1911-3.3478-1.182zm0 1.2923c1.1918-0.059451 2.4095 0.52351 3.006 1.5756 0.73891 1.2564 0.62867 2.7544 0.66947 4.1572 0.05518 0.93177 0.35347 1.8382 0.78938 2.6591h-8.9282c0.60148-1.0838 0.86112-2.3294 0.80315-3.5635-9.659e-4 -1.4009 0.15123-2.9948 1.2579-3.9921 0.64424-0.60975 1.5307-0.85343 2.4026-0.83627z"
+    );
+    svg.appendChild(path2);
+  }
+  function setTrashContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m6.5156 6.9909c-0.36016 0-0.65232 0.29024-0.65234 0.65039l2e-3 1.1074v1.4844l-2e-3 1.1074c2.1e-5 0.36015 0.29218 0.65039 0.65234 0.65039 0.18009 0 0.34336-0.07187 0.46094-0.18945 0.11758-0.11758 0.18945-0.28085 0.18945-0.46094v-3.6992c0-0.18009-0.07187-0.34336-0.18945-0.46094-0.11758-0.11758-0.28085-0.18945-0.46094-0.18945z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m6.4082 1c-1.0468 0-1.9082 0.86333-1.9082 1.9102v1.0703h-2.2285a0.63636 0.63636 0 0 0-0.63477 0.63672 0.63636 0.63636 0 0 0 0.63477 0.63672h0.63672v7.8379c0 1.0468 0.86333 1.9082 1.9102 1.9082h6.3633c1.0468 0 1.9082-0.86138 1.9082-1.9082v-7.8379h0.63672a0.63636 0.63636 0 0 0 0.63672-0.63672 0.63636 0.63636 0 0 0-0.63672-0.63672h-2.2266v-1.0703c-1e-6 -1.0468-0.86138-1.9102-1.9082-1.9102zm0 1.2734h3.1836c0.35899 0 0.63477 0.27773 0.63477 0.63672v1.0703h-4.4531v-1.0703c0-0.35899 0.27577-0.63672 0.63476-0.63672zm-2.2266 2.9805h7.6367v7.8379c0 0.35899-0.27773 0.63672-0.63672 0.63672h-6.3633c-0.35899 0-0.63672-0.27773-0.63672-0.63672z"
+    );
+    svg.appendChild(path2);
+    const path3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path3.setAttributeNS(
+      null,
+      "d",
+      "m9.4853 6.9909c-0.36016 0-0.65232 0.29024-0.65234 0.65039l2e-3 1.1074v1.4844l-2e-3 1.1074c2.1e-5 0.36015 0.29218 0.65039 0.65234 0.65039 0.18009 0 0.34336-0.07187 0.46094-0.18945 0.11758-0.11758 0.18945-0.28085 0.18945-0.46094v-3.6992c0-0.18009-0.07187-0.34336-0.18945-0.46094-0.11758-0.11758-0.28085-0.18945-0.46094-0.18945z"
+    );
+    svg.appendChild(path3);
+  }
+  function setMailContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m3 2.2725c-1.108 0-2 0.892-2 2v7.4551c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-7.4551c0-1.108-0.892-2-2-2zm0.30078 1.2988h9.3984c0.554 0 1 0.446 1 1l-4.2031 2.7207c-0.46835 0.30545-0.96668 0.57394-1.4961 0.57422-0.52942-2.795e-4 -1.0277-0.26876-1.4961-0.57422l-4.2031-2.7207c0-0.554 0.446-1 1-1zm-1 2.5195 4.2031 2.7227c0.46835 0.30546 0.96668 0.45687 1.4961 0.45703 0.52942-1.57e-4 1.0277-0.15158 1.4961-0.45703l4.2031-2.7227v5.3379c0 0.554-0.446 1-1 1h-9.3984c-0.554 0-1-0.446-1-1z"
+    );
+    svg.appendChild(path1);
+  }
+  function setSendContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m14.072 1.0638-12.641 4.7555c-0.56634 0.21308-0.56955 1.0125-0.04008 1.2365l5.2444 2.2184 2.2084 5.2144 2e-3 0.0061c0.16229 0.59685 0.99893 0.674 1.2545 0.09819l4.8416-12.619c0.25524-0.64396-0.38635-1.1184-0.86973-0.90981zm-2.4308 2.3427-4.6272 4.5771-3.5491-1.501zm0.96993 0.91983-3.1483 8.2023-1.517-3.5851z"
+    );
+    svg.appendChild(path1);
+  }
+  function setExportContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m1.6367 8.873a0.6355 0.6355 0 0 0-0.63672 0.63477v3.1816c0 1.0469 0.8614 1.9102 1.9082 1.9102h10.184c1.0468 0 1.9082-0.86329 1.9082-1.9102v-3.1816a0.6355 0.6355 0 0 0-0.63672-0.63477 0.6355 0.6355 0 0 0-0.63476 0.63477v3.1816c0 0.35899-0.27773 0.63672-0.63672 0.63672h-10.184c-0.35899 1e-6 -0.63672-0.27773-0.63672-0.63672v-3.1816a0.6355 0.6355 0 0 0-0.63477-0.63477z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8 1.4004c-0.36016 0-0.65232 0.29024-0.65234 0.65039v6.123l-2.457-2.457c-0.25556-0.25556-0.66436-0.25556-0.91992 0-0.25467 0.25467-0.25658 0.6672-0.00195 0.92188l3.5703 3.5703c0.25408 0.25408 0.66556 0.2542 0.91992 0l3.5703-3.5703c0.25556-0.25556 0.25556-0.66436 0-0.91992-0.25467-0.25467-0.6672-0.25659-0.92188-0.00195l-2.457 2.459v-6.125c0-0.36142-0.28897-0.65039-0.65039-0.65039z"
+    );
+    svg.appendChild(path2);
+  }
+  function setImportContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m1.6367 8.873a0.6355 0.6355 0 0 0-0.63672 0.63477v3.1816c0 1.0469 0.8614 1.9102 1.9082 1.9102h10.184c1.0468 0 1.9082-0.86329 1.9082-1.9102v-3.1816a0.6355 0.6355 0 0 0-0.63672-0.63477 0.6355 0.6355 0 0 0-0.63476 0.63477v3.1816c0 0.35899-0.27773 0.63672-0.63672 0.63672h-10.184c-0.35899 1e-6 -0.63672-0.27773-0.63672-0.63672v-3.1816a0.6355 0.6355 0 0 0-0.63477-0.63477z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8 10.4c-0.36016 0-0.65232-0.29024-0.65234-0.65039v-6.123l-2.457 2.457c-0.25556 0.25556-0.66436 0.25556-0.91992 0-0.25467-0.25467-0.25658-0.6672-0.00195-0.92187l3.5703-3.5703c0.25408-0.25408 0.66556-0.2542 0.91992 0l3.5703 3.5703c0.25556 0.25556 0.25556 0.66436 0 0.91992-0.25467 0.25467-0.6672 0.25659-0.92188 0.00195l-2.457-2.459v6.125c0 0.36142-0.28897 0.65039-0.65039 0.65039z"
+    );
+    svg.appendChild(path2);
+  }
+  function setEditContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m13.713 1.5513c-0.73596-0.73596-1.9485-0.73464-2.6845 0.00137l-9.84 9.84c-0.11663 0.11665-0.1879 0.27904-0.18812 0.45726l-1e-7 2.5019c-6.96e-6 0.17354 0.070916 0.33848 0.1895 0.45863 0.12014 0.1186 0.2851 0.1895 0.45863 0.1895h2.5019c0.17854-1e-5 0.34044-0.07132 0.45726-0.18812l9.84-9.84c0.73601-0.73601 0.73733-1.9486 0.0014-2.6845zm-0.8953 0.8953 0.73601 0.73601c0.25239 0.25239 0.25102 0.64153-0.0014 0.89392l-0.75247 0.75249-1.6286-1.6286 0.75249-0.75249c0.25239-0.25239 0.64154-0.25376 0.89393-0.00137zm-2.5417 1.6492 1.6286 1.6286-7.9808 7.9808-1.6286-1.6286z"
+    );
+    svg.appendChild(path1);
+  }
+  function setMenuContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", "m2.75 2.6667h10.5c0.4155 0 0.75 0.3345 0.75 0.75s-0.3345 0.75-0.75 0.75h-10.5c-0.4155 0-0.75-0.3345-0.75-0.75s0.3345-0.75 0.75-0.75z");
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(null, "d", "m2.75 7.25h10.5c0.4155 0 0.75 0.3345 0.75 0.75s-0.3345 0.75-0.75 0.75h-10.5c-0.4155 0-0.75-0.3345-0.75-0.75s0.3345-0.75 0.75-0.75z");
+    svg.appendChild(path2);
+    const path3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path3.setAttributeNS(null, "d", "m2.75 11.833h10.5c0.4155 0 0.75 0.3345 0.75 0.75s-0.3345 0.75-0.75 0.75h-10.5c-0.4155 0-0.75-0.3345-0.75-0.75s0.3345-0.75 0.75-0.75z");
+    svg.appendChild(path3);
+  }
+  function setReplyContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m7.1956 2.0915c-0.17362 0-0.33638 0.0536-0.4883 0.16212l-5.6331 4.3948c-0.21703 0.17363-0.32423 0.38999-0.32423 0.65042-1e-6 0.26044 0.1072 0.47874 0.32423 0.65238l5.6331 4.3948c0.15192 0.10852 0.31468 0.16212 0.4883 0.16212 0.23874 0 0.43882-0.08138 0.60159-0.24415 0.16278-0.16277 0.24415-0.36285 0.24415-0.60159v-1.3575h0.94536c2.2661 0 3.3516 1.6295 4.3674 3.3888 0.11666 0.20206 0.30215 0.21485 0.48245 0.21485 0.21839 0 0.47762-0.15346 0.65628-0.46291 0.33483-0.5924 0.55854-1.215 0.668-1.8653 0.10946-0.65035 0.1175-1.2995 0.02734-1.9435-0.09014-0.64391-0.28195-1.2659-0.57816-1.8712-0.29619-0.60528-0.69702-1.1599-1.1993-1.6622-0.60528-0.60528-1.2885-1.0607-2.0548-1.3634-0.76626-0.30264-1.5493-0.45315-2.3478-0.45315h-0.96684v-1.3497c0-0.23874-0.08138-0.43882-0.24415-0.60159-0.16277-0.16278-0.36285-0.24415-0.60159-0.24415zm-0.4551 1.9825v0.71488h2e-3c-1.91e-4 0.4412 0.35755 0.79894 0.79887 0.79887h1.4669c1.0795 0 2.5837 0.5738 3.4201 1.4102 0.61816 0.61816 1.0403 1.3452 1.2657 2.1759 0.22537 0.83065 0.21539 1.8427-0.0293 2.6798-0.97733-1.6928-2.5629-2.8498-4.678-2.8498h-1.4454c-0.44132-7.2e-5 -0.79906 0.35767-0.79887 0.79887h-2e-3v0.72074l-4.1701-3.2228z"
+    );
+    svg.appendChild(path1);
+  }
+  function setRefreshContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m7.9707 0.75c-1.0016 0-1.9388 0.18895-2.8164 0.56641-0.87885 0.37799-1.6436 0.8916-2.2949 1.543-0.65124 0.65124-1.1649 1.4202-1.543 2.3086-0.37757 0.88727-0.56641 1.8304-0.56641 2.832s0.18888 1.9448 0.56641 2.832c0.37802 0.88836 0.89173 1.6574 1.543 2.3086 0.65124 0.65124 1.4202 1.1649 2.3086 1.543 0.88727 0.37757 1.8304 0.56641 2.832 0.56641 0.8314 0 1.6239-0.13224 2.3789-0.39648 0.75572-0.26451 1.4452-0.63563 2.0684-1.1172 0.62353-0.48181 1.1617-1.0492 1.6152-1.7012 0.45251-0.65049 0.77222-1.3715 0.96094-2.1641l2e-3 -2e-3 0.04297-0.13281c0.0065-0.0195 0.01172-0.04408 0.01172-0.07617 0-0.1934-0.06474-0.34794-0.19531-0.47852-0.13058-0.13057-0.28317-0.19336-0.47656-0.19336-0.13605 0-0.26917 0.04492-0.40234 0.14258-0.13208 0.09684-0.21022 0.20993-0.24414 0.3457-0.17355 0.65565-0.44381 1.2604-0.81055 1.8105-0.36657 0.54985-0.80651 1.018-1.3184 1.4043-0.51116 0.38578-1.0746 0.69046-1.6914 0.91211-0.61812 0.22216-1.2662 0.33208-1.9415 0.33208-0.8289 0-1.6015-0.15376-2.3164-0.46289-0.71353-0.30856-1.3406-0.73315-1.8809-1.2734-0.54029-0.5403-0.96684-1.1693-1.2754-1.8828-0.30913-0.71489-0.46289-1.4875-0.46289-2.3164-1e-7 -0.8289 0.15389-1.6058 0.46289-2.3301 0.30846-0.72294 0.72874-1.3518 1.2598-1.8828 0.53103-0.53103 1.1599-0.95131 1.8828-1.2598 0.72402-0.30891 1.4907-0.46289 2.3008-0.46289 1.0797 0 2.0859 0.26648 3.0117 0.79688 0.92594 0.53049 1.651 1.2595 2.1719 2.1855l0.06055 0.10742h-3.0117c-0.19448 1e-6 -0.35029 0.06014-0.48047 0.18164-0.12927 0.12065-0.19141 0.26754-0.19141 0.46094 0 0.19339 0.062788 0.34794 0.19336 0.47852 0.13057 0.13057 0.28512 0.19336 0.47852 0.19336h4.375c0.1934 0 0.34794-0.06279 0.47852-0.19336 0.13057-0.13057 0.19336-0.28512 0.19336-0.47852v-4.375c0-0.1934-0.06279-0.34794-0.19336-0.47852-0.13057-0.13057-0.28512-0.19336-0.47852-0.19336-0.19339 0-0.34029 0.06214-0.46094 0.19141-0.12151 0.13018-0.18164 0.28598-0.18164 0.48047v2.3613l-0.12891-0.17383c-0.67984-0.90645-1.533-1.6088-2.5625-2.1094-1.0298-0.50071-2.1207-0.75-3.2734-0.75z"
+    );
+    svg.appendChild(path1);
+  }
+  var circlePath = "M 8,0.75000006 A 7.25,7.25 0 0 0 0.75,8 7.25,7.25 0 0 0 8,15.25 7.25,7.25 0 0 0 15.25,8 7.25,7.25 0 0 0 8,0.75000006 Z M 8,2.0508 A 5.95,5.95 0 0 1 13.9492,8 5.95,5.95 0 0 1 8,13.9512 5.95,5.95 0 0 1 2.0508,8 5.95,5.95 0 0 1 8,2.0508 Z";
+  function setCircleInfoContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", "m8 7.207c-0.36016 0-0.6505 0.29034-0.6505 0.6505v2.8306c0 0.36016 0.29034 0.6505 0.6505 0.6505 0.36016 0 0.6505-0.29034 0.6505-0.6505v-2.8306c0-0.36016-0.29034-0.6505-0.6505-0.6505z");
+    svg.appendChild(path1);
+    const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle1.setAttributeNS(null, "cx", "8.0032");
+    circle1.setAttributeNS(null, "cy", "5.4545");
+    circle1.setAttributeNS(null, "r", ".6505");
+    svg.appendChild(circle1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(null, "d", circlePath);
+    svg.appendChild(path2);
+  }
+  function setCircleWarningContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", "m8.0016 4.7327c-0.36016 0-0.6505 0.29034-0.6505 0.6505v2.8306c0 0.36016 0.29034 0.6505 0.6505 0.6505s0.6505-0.29034 0.6505-0.6505v-2.8306c0-0.36016-0.29034-0.6505-0.6505-0.6505z");
+    svg.appendChild(path1);
+    const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle1.setAttributeNS(null, "cx", "7.9984");
+    circle1.setAttributeNS(null, "cy", "10.617");
+    circle1.setAttributeNS(null, "r", ".6505");
+    svg.appendChild(circle1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(null, "d", circlePath);
+    svg.appendChild(path2);
+  }
+  function setCircleErrorContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", circlePath);
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m6.0166 5.3645c-0.16628 0-0.3336 0.06407-0.46094 0.19141-0.25467 0.25467-0.25465 0.6672 0 0.92188l1.5234 1.5215-1.5234 1.5234c-0.25467 0.25467-0.25469 0.6672 0 0.92187 0.25467 0.25467 0.66525 0.25467 0.91992 0l1.5234-1.5234 1.5234 1.5234c0.25467 0.25467 0.6672 0.25469 0.92187 0 0.25467-0.25467 0.25467-0.66525 0-0.91992l-1.5234-1.5234 1.5234-1.5234c0.25467-0.25467 0.25467-0.66525 0-0.91992-0.25467-0.25467-0.6672-0.2566-0.92187-2e-3l-1.5234 1.5234-1.5234-1.5234c-0.12734-0.12734-0.2927-0.19141-0.45898-0.19141z"
+    );
+    svg.appendChild(path2);
+  }
+  function setCircleSuccessContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", circlePath);
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m10.524 5.757c-0.16628 1e-6 -0.3336 0.06407-0.46094 0.19141l-2.7207 2.7227-1.1309-1.1328c-0.25467-0.25467-0.66525-0.25467-0.91992 0-0.25467 0.25467-0.25658 0.6672-0.00195 0.92188l1.5918 1.5918c0.25467 0.25467 0.66525 0.25463 0.91992 0l3.1836-3.1836c0.25465-0.25467 0.25274-0.66525-2e-3 -0.91992-0.12734-0.12734-0.2927-0.19141-0.45898-0.19141z"
+    );
+    svg.appendChild(path2);
+  }
+  function setCircleUnknownContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(null, "d", circlePath);
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8.0273 4.6844c-1.0807 0-1.8911 0.80753-1.8911 1.8654 0 0.2914 0.26536 0.55114 0.5572 0.55114 0.29183 0 0.55265-0.26874 0.55265-0.55114 0-0.25055 0.077134-0.43674 0.20289-0.56477 0.12576-0.12802 0.30885-0.21046 0.57839-0.21046 0.47844 0 0.72678 0.28654 0.72678 0.6541 0 0.27054-0.069541 0.42451-0.19381 0.58748-0.12338 0.16181-0.31514 0.32247-0.52843 0.52843-0.38485 0.36029-0.59051 0.86593-0.59051 1.3218 0 0.29183 0.25827 0.56628 0.55871 0.56628 0.30044 0 0.55871-0.27445 0.55871-0.56628 0-0.18611 0.052582-0.44507 0.24226-0.61625l0.00151-0.0015h0.00151c0.25623-0.23652 0.51176-0.45141 0.71618-0.72981 0.20442-0.27839 0.3437-0.62946 0.3437-1.0629 0-1.0019-0.8073-1.7715-1.8366-1.7715z"
+    );
+    svg.appendChild(path2);
+    const circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle1.setAttributeNS(null, "cx", "8");
+    circle1.setAttributeNS(null, "cy", "10.665");
+    circle1.setAttributeNS(null, "r", ".6505");
+    svg.appendChild(circle1);
+  }
+  function setCircleUserContent(svg) {
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttributeNS(
+      null,
+      "d",
+      "m8 0.75a7.25 7.25 0 0 0-7.25 7.25 7.25 7.25 0 0 0 7.25 7.25 7.25 7.25 0 0 0 7.25-7.25 7.25 7.25 0 0 0-7.25-7.25zm0 1.3008a5.95 5.95 0 0 1 5.9492 5.9492 5.95 5.95 0 0 1-1.3965 3.832c-0.32045-0.54275-0.75894-0.96968-1.3125-1.2793-0.55697-0.31152-1.1549-0.4668-1.7969-0.4668h-2.8867c-0.64193 0-1.2399 0.15527-1.7969 0.4668-0.55356 0.30962-0.99205 0.73654-1.3125 1.2793a5.95 5.95 0 0 1-1.3965-3.832 5.95 5.95 0 0 1 5.9492-5.9492zm-1.4453 9.334h2.8906c0.45252 2.79e-4 0.86077 0.12397 1.2285 0.36914 0.23059 0.15372 0.52694 0.36032 0.82812 1.0566a5.95 5.95 0 0 1-3.502 1.1406 5.95 5.95 0 0 1-3.502-1.1406c0.30119-0.69632 0.59754-0.90292 0.82812-1.0566 0.36775-0.24517 0.776-0.36886 1.2285-0.36914z"
+    );
+    svg.appendChild(path1);
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttributeNS(
+      null,
+      "d",
+      "m8 3.555a2.719 2.719 0 0 0-2.7188 2.7188 2.719 2.719 0 0 0 2.7188 2.7188 2.719 2.719 0 0 0 2.7188-2.7188 2.719 2.719 0 0 0-2.7188-2.7188zm0 1.3008a1.4182 1.4182 0 0 1 1.418 1.418 1.4182 1.4182 0 0 1-1.418 1.418 1.4182 1.4182 0 0 1-1.418-1.418 1.4182 1.4182 0 0 1 1.418-1.418z"
+    );
+    svg.appendChild(path2);
+  }
   function createSvg({ icon, classes = "size-4", attrs } = {}) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttributeNS(null, "width", "16");
@@ -231,6 +433,57 @@
       case Plus:
         setPlusContent(svg);
         break;
+      case Close:
+        setCloseContent(svg);
+        break;
+      case Bell:
+        setBellContent(svg);
+        break;
+      case Trash:
+        setTrashContent(svg);
+        break;
+      case Mail:
+        setMailContent(svg);
+        break;
+      case Send:
+        setSendContent(svg);
+        break;
+      case Export:
+        setExportContent(svg);
+        break;
+      case Import:
+        setImportContent(svg);
+        break;
+      case Edit:
+        setEditContent(svg);
+        break;
+      case Menu:
+        setMenuContent(svg);
+        break;
+      case Reply:
+        setReplyContent(svg);
+        break;
+      case Refresh:
+        setRefreshContent(svg);
+        break;
+      case CircleInfo:
+        setCircleInfoContent(svg);
+        break;
+      case CircleWarning:
+        setCircleWarningContent(svg);
+        break;
+      case CircleError:
+        setCircleErrorContent(svg);
+        break;
+      case CircleSuccess:
+        setCircleSuccessContent(svg);
+        break;
+      case CircleUnknown:
+        setCircleUnknownContent(svg);
+        break;
+      case CircleUser:
+        setCircleUserContent(svg);
+        break;
       default:
         break;
     }
@@ -238,8 +491,8 @@
   }
   function setSvgContent(svg, icon) {
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svg.setAttribute("width", "16");
-    svg.setAttribute("height", "16");
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", "100%");
     svg.setAttribute("viewBox", "0 0 16 16");
     svg.setAttribute("fill", "currentColor");
     switch (icon) {
@@ -279,6 +532,57 @@
       case "plus":
         setPlusContent(svg);
         break;
+      case "close":
+        setCloseContent(svg);
+        break;
+      case "bell":
+        setBellContent(svg);
+        break;
+      case "trash":
+        setTrashContent(svg);
+        break;
+      case "mail":
+        setMailContent(svg);
+        break;
+      case "send":
+        setSendContent(svg);
+        break;
+      case "export":
+        setExportContent(svg);
+        break;
+      case "import":
+        setImportContent(svg);
+        break;
+      case "edit":
+        setEditContent(svg);
+        break;
+      case "menu":
+        setMenuContent(svg);
+        break;
+      case "reply":
+        setReplyContent(svg);
+        break;
+      case "refresh":
+        setRefreshContent(svg);
+        break;
+      case "circle-info":
+        setCircleInfoContent(svg);
+        break;
+      case "circle-warning":
+        setCircleWarningContent(svg);
+        break;
+      case "circle-error":
+        setCircleErrorContent(svg);
+        break;
+      case "circle-success":
+        setCircleSuccessContent(svg);
+        break;
+      case "circle-unknown":
+        setCircleUnknownContent(svg);
+        break;
+      case "circle-user":
+        setCircleUserContent(svg);
+        break;
       default:
         break;
     }
@@ -300,7 +604,7 @@
       }
       el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
-      const itemId = expression ?? `ha${v4_default()}`;
+      const itemId = expression ?? `ha${uuid_default()}`;
       function getIsExpanded() {
         if (accordion._h_accordion.single) {
           if (accordion._h_accordion.expandedId !== "") {
@@ -315,7 +619,7 @@
       }
       el._h_accordionItem = Alpine2.reactive({
         id: itemId,
-        controls: `ha${v4_default()}`,
+        controls: `ha${uuid_default()}`,
         expanded: getIsExpanded()
       });
       const setAttributes = () => {
@@ -487,22 +791,49 @@
     });
   }
 
+  // src/common/class-list.js
+  function classListStartsWith(classList, term) {
+    for (let i = 0; i < classList.length; i++) {
+      if (classList.item(i).startsWith(term)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   // src/components/avatar.js
   function avatar_default(Alpine) {
     Alpine.directive("h-avatar", (el, _, { Alpine: Alpine2 }) => {
+      if (!classListStartsWith(el.classList, "rounded")) {
+        el.classList.add("rounded-full");
+      }
       el.classList.add(
         "relative",
         "bg-secondary",
         "text-secondary-foreground",
         "fill-secondary-foreground",
-        "[[data-slot=toolbar]:not([data-variant=transparent])_&]:border",
+        "[[data-slot=toolbar]:not([data-variant=transparent])>&]:border",
+        'data-[variant="information"]:bg-information/10',
+        'data-[variant="information"]:text-information',
+        'data-[variant="information"]:border-information',
+        '[&[data-variant="information"]>svg]:fill-information',
+        'data-[variant="warning"]:bg-warning/10',
+        'data-[variant="warning"]:text-warning',
+        'data-[variant="warning"]:border-warning',
+        '[&[data-variant="warning"]>svg]:fill-warning',
+        'data-[variant="positive"]:bg-positive/10',
+        'data-[variant="positive"]:text-positive',
+        'data-[variant="positive"]:border-positive',
+        '[&[data-variant="positive"]>svg]:fill-positive',
+        'data-[variant="negative"]:bg-negative/10',
+        'data-[variant="negative"]:text-negative',
+        'data-[variant="negative"]:border-negative',
+        '[&[data-variant="negative"]>svg]:fill-negative',
         "has-[img]:border-0",
         "flex",
         "size-8",
         "aspect-square",
         "shrink-0",
-        "overflow-hidden",
-        "rounded-full",
         "items-center",
         "justify-center",
         "text-sm",
@@ -521,7 +852,7 @@
       if (!avatar) {
         throw new Error(`${original2} must be inside an avatar element`);
       }
-      el.classList.add("aspect-square", "size-full");
+      el.classList.add("aspect-square", "size-full", "rounded-[inherit]");
       el.setAttribute("data-slot", "avatar-image");
       el.setAttribute("role", "img");
       let interval;
@@ -555,7 +886,7 @@
       if (!avatar) {
         throw new Error(`${original2} must be inside an avatar element`);
       }
-      el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
+      el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center", "rounded-[inherit]");
       el.setAttribute("data-slot", "avatar-fallback");
       effect(() => {
         if (avatar._h_avatar.fallback) el.classList.remove("hidden");
@@ -615,6 +946,59 @@
         observer.disconnect();
       });
     });
+    Alpine.directive("h-badge-indicator", (el, _, { cleanup }) => {
+      el.classList.add(
+        "absolute",
+        "-end-1",
+        "-top-1",
+        "[.rounded-full>&]:end-0",
+        "[.rounded-full>&]:top-0",
+        "inline-flex",
+        "h-4",
+        "min-w-4",
+        "items-center",
+        "justify-center",
+        "rounded-full",
+        "py-0.5",
+        "px-1",
+        "text-xs",
+        "font-bold",
+        "leading-none",
+        "transform-gpu",
+        "data-[dot=true]:p-0",
+        "data-[dot=true]:min-w-3",
+        "data-[dot=true]:h-3",
+        "data-[ping=true]:before:absolute",
+        "data-[ping=true]:before:inline-flex",
+        "data-[ping=true]:before:w-full",
+        "data-[ping=true]:before:h-full",
+        "data-[ping=true]:before:rounded-full",
+        "data-[ping=true]:before:opacity-75",
+        "data-[ping=true]:before:animate-ping"
+      );
+      el.setAttribute("data-slot", "badge-indicator");
+      const variants = {
+        primary: ["bg-primary", "text-primary-foreground", "data-[ping=true]:before:bg-primary"],
+        positive: ["bg-positive", "text-positive-foreground", "data-[ping=true]:before:bg-positive"],
+        negative: ["bg-negative", "text-negative-foreground", "data-[ping=true]:before:bg-negative"],
+        warning: ["bg-warning", "text-warning-foreground", "data-[ping=true]:before:bg-warning"],
+        information: ["bg-information", "text-information-foreground", "data-[ping=true]:before:bg-information"]
+      };
+      function setVariant(variant) {
+        for (const [_2, value] of Object.entries(variants)) {
+          el.classList.remove(...value);
+        }
+        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+      }
+      setVariant(el.getAttribute("data-variant") ?? "primary");
+      const observer = new MutationObserver(() => {
+        setVariant(el.getAttribute("data-variant") ?? "primary");
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
+      cleanup(() => {
+        observer.disconnect();
+      });
+    });
   }
 
   // src/components/button.js
@@ -2497,7 +2881,7 @@
       header.appendChild(previousMonthBtn);
       const headerLabel = document.createElement("h2");
       headerLabel.classList.add("min-w-[8rem]", "text-center");
-      headerLabel.setAttribute("id", `hdpl${v4_default()}`);
+      headerLabel.setAttribute("id", `hdpl${uuid_default()}`);
       headerLabel.setAttribute("aria-live", "polite");
       header.appendChild(headerLabel);
       const nextMonthBtn = document.createElement("button");
@@ -2540,7 +2924,7 @@
       header.appendChild(nextYearBtn);
       el.appendChild(header);
       const datesTable = document.createElement("table");
-      if (datepicker) datesTable.setAttribute("aria-labelledby", `hdpl${v4_default()}`);
+      if (datepicker) datesTable.setAttribute("aria-labelledby", `hdpl${uuid_default()}`);
       datesTable.classList.add("table-fixed", "border-separate", "border-spacing-1");
       if (!datepicker) datesTable.classList.add("w-full");
       const thead = document.createElement("thead");
@@ -2965,7 +3349,7 @@
       });
       el._h_datepicker = {
         id: void 0,
-        controls: `hdpc${v4_default()}`,
+        controls: `hdpc${uuid_default()}`,
         input: void 0,
         state,
         inTable: modifiers.includes("table")
@@ -2976,7 +3360,7 @@
       } else if (el._h_datepicker.input.hasAttribute("id")) {
         el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
       } else {
-        const id = `hdp${v4_default()}`;
+        const id = `hdp${uuid_default()}`;
         el._h_datepicker.input.setAttribute("id", id);
         el._h_datepicker.id = id;
       }
@@ -3200,7 +3584,7 @@
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-labelledby") || !dialog.hasAttribute("aria-label"))) {
         if (!el.hasAttribute("id")) {
-          const id = `dht${v4_default()}`;
+          const id = `dht${uuid_default()}`;
           el.setAttribute("id", id);
         }
         dialog.setAttribute("aria-labelledby", el.getAttribute("id"));
@@ -3232,7 +3616,7 @@
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-describedby") || !dialog.hasAttribute("aria-description"))) {
         if (!el.hasAttribute("id")) {
-          const id = `dhd${v4_default()}`;
+          const id = `dhd${uuid_default()}`;
           el.setAttribute("id", id);
         }
         dialog.setAttribute("aria-describedby", el.getAttribute("id"));
@@ -3602,7 +3986,7 @@
         input.setAttribute("aria-roledescription", "Number field");
       }
       if (!input.hasAttribute("id")) {
-        input.setAttribute("id", `in${v4_default()}`);
+        input.setAttribute("id", `in${uuid_default()}`);
       }
       input.setAttribute("tabindex", "0");
       input.setAttribute("autocomplete", "off");
@@ -3849,7 +4233,7 @@
         throw new Error(`${original2} must be placed inside a list element`);
       }
       if (!el.hasAttribute("id")) {
-        const id = `lbh${v4_default()}`;
+        const id = `lbh${uuid_default()}`;
         el.setAttribute("id", id);
       }
       list.setAttribute("aria-labelledby", el.getAttribute("id"));
@@ -4481,6 +4865,293 @@
     });
   }
 
+  // src/utils/breakpoint-listener.js
+  function getBreakpointListener(handler, breakpoint = 768, frame = false) {
+    let bps = Number.isFinite(breakpoint) ? `${breakpoint}px` : breakpoint;
+    const mql = frame ? window.matchMedia(`(width <= ${bps})`) : top.matchMedia(`(width <= ${bps})`);
+    const onWidthChange = (event) => {
+      handler(event.matches);
+    };
+    mql.addEventListener("change", onWidthChange);
+    handler(mql.matches);
+    return {
+      _mql: mql,
+      _onWidthChange: onWidthChange,
+      remove() {
+        this._mql.removeEventListener("change", this._onWidthChange);
+      }
+    };
+  }
+
+  // src/components/notifications.js
+  function notifications_default(Alpine) {
+    Alpine.store("_h_notifications", {
+      items: [],
+      listeners: [],
+      push(id = `hn${uuid_default()}`, template, position = "top-right", timeout = 5e3, data = {}) {
+        if (!template) {
+          throw new Error("Notification must have a template ID");
+        }
+        const item = {
+          id,
+          template,
+          position,
+          timeout,
+          data: Alpine.reactive(data)
+        };
+        this.items.push(item);
+        this.listeners.forEach((listener) => {
+          if (listener.hasOwnProperty("added")) listener.added(item);
+        });
+      },
+      update(id, data) {
+        if (!id) {
+          throw new Error("Cannot update a notification if an ID is not provided");
+        }
+        const index = this.items.findIndex((item) => item.id === id);
+        if (index > -1) {
+          for (const [key, value] of Object.entries(data)) {
+            this.items[index].data[key] = value;
+          }
+          this.listeners.forEach((listener) => {
+            if (listener.hasOwnProperty("updated")) listener.updated(id, data);
+          });
+        } else {
+          console.error(`Notification with id "${id}" does not exist`);
+        }
+      },
+      remove(id) {
+        if (!id) {
+          throw new Error("Cannot remove a notification if an ID is not provided");
+        }
+        this.listeners.forEach((listener) => {
+          if (listener.hasOwnProperty("removed")) listener.removed(id);
+        });
+        this.items = this.items.filter((n) => n.id !== id);
+      }
+    });
+    Alpine.magic("notifications", () => {
+      return {
+        add({ id, template, position, timeout, data } = {}) {
+          Alpine.store("_h_notifications").push(id, template, position, timeout, data);
+        },
+        update({ id, data } = {}) {
+          Alpine.store("_h_notifications").update(id, data);
+        },
+        remove(id) {
+          Alpine.store("_h_notifications").remove(id);
+        },
+        addListener(listener) {
+          Alpine.store("_h_notifications").listeners.push(listener);
+          return Alpine.store("_h_notifications").listeners[Alpine.store("_h_notifications").listeners.length - 1];
+        },
+        removeListener(listener) {
+          Alpine.store("_h_notifications").listeners = Alpine.store("_h_notifications").listeners.filter((item) => item !== listener);
+        }
+      };
+    });
+    Alpine.directive("h-notification-overlay", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "SECTION") {
+        throw new Error(`${original2} must be a button`);
+      }
+      const notificationTemplates = {};
+      el.querySelectorAll("template").forEach((template) => {
+        if (!template.hasAttribute("id")) {
+          throw new Error("Notification templates must have an ID");
+        }
+        notificationTemplates[template.getAttribute("id")] = template;
+      });
+      el.classList.add("fixed", "w", "inset-0", "z-60", "pointer-events-none", "grid", "grid-rows-2", "grid-cols-1", "lg:grid-cols-2", "xl:grid-cols-3");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("aria-live", "polite");
+      el.setAttribute("aria-atomic", "false");
+      el.setAttribute("data-slot", "notification-overlay");
+      const commonListClasses = ["flex", "flex-col", "py-4", "p-10", "gap-4", "overflow-visible", "size-full"];
+      const commonTopClasses = ["[mask-image:linear-gradient(to_bottom,black_80%,transparent)]", "row-1"];
+      const commonBottomClasses = ["[mask-image:linear-gradient(to_top,black_80%,transparent)]", "row-2"];
+      const olTopLeft = document.createElement("ol");
+      olTopLeft.classList.add(...commonListClasses, ...commonTopClasses, "max-lg:hidden", "items-start");
+      olTopLeft.setAttribute("tabindex", "-1");
+      el.appendChild(olTopLeft);
+      const olTopCenter = document.createElement("ol");
+      olTopCenter.classList.add(...commonListClasses, ...commonTopClasses, "lg:col-2", "items-center");
+      olTopCenter.setAttribute("tabindex", "-1");
+      el.appendChild(olTopCenter);
+      const olTopRight = document.createElement("ol");
+      olTopRight.classList.add(...commonListClasses, ...commonTopClasses, "max-lg:hidden", "lg:col-2", "xl:col-3", "items-end");
+      olTopRight.setAttribute("tabindex", "-1");
+      el.appendChild(olTopRight);
+      const olBottomLeft = document.createElement("ol");
+      olBottomLeft.classList.add(...commonListClasses, ...commonBottomClasses, "max-lg:hidden", "items-start", "justify-end");
+      olBottomLeft.setAttribute("tabindex", "-1");
+      el.appendChild(olBottomLeft);
+      const olBottomCenter = document.createElement("ol");
+      olBottomCenter.classList.add(...commonListClasses, ...commonBottomClasses, "lg:col-2", "items-center", "justify-end");
+      olBottomCenter.setAttribute("tabindex", "-1");
+      el.appendChild(olBottomCenter);
+      const olBottomRight = document.createElement("ol");
+      olBottomRight.classList.add(...commonListClasses, ...commonBottomClasses, "max-lg:hidden", "lg:col-2", "xl:col-3", "items-end", "justify-end");
+      olBottomRight.setAttribute("tabindex", "-1");
+      el.appendChild(olBottomRight);
+      let isLarge = true;
+      let isExtraLarge = true;
+      const lgBreakpointListener = getBreakpointListener((matches) => {
+        isLarge = !matches;
+      }, getComputedStyle(el).getPropertyValue("--breakpoint-lg").trim());
+      const xlBreakpointListener = getBreakpointListener((matches) => {
+        isExtraLarge = !matches;
+      }, getComputedStyle(el).getPropertyValue("--breakpoint-xl").trim());
+      const listener = {
+        added(item) {
+          const clone = notificationTemplates[item.template].content.firstElementChild.cloneNode(true);
+          clone.classList.add("transform", "transition-all", "duration-300", "ease-out", "opacity-0");
+          clone.setAttribute("id", item.id);
+          Alpine2.addScopeToNode(clone, item.data);
+          if (!isExtraLarge && !isLarge) {
+            if (item.position.startsWith("top-")) {
+              item.position = "top-center";
+            } else {
+              item.position = "bottom-center";
+            }
+          } else if (!isExtraLarge) {
+            if (item.position === "top-center") {
+              item.position = "top-right";
+            } else if (item.position === "bottom-center") {
+              item.position = "bottom-right";
+            }
+          }
+          if (item.position === "top-left") {
+            clone._h_animation_class = "-translate-x-full";
+            clone.classList.add(clone._h_animation_class);
+            olTopLeft.appendChild(clone);
+          } else if (item.position === "top-center") {
+            clone._h_animation_class = "-translate-y-full";
+            clone.classList.add(clone._h_animation_class);
+            olTopCenter.appendChild(clone);
+          } else if (item.position === "top-right") {
+            clone._h_animation_class = "translate-x-full";
+            clone.classList.add(clone._h_animation_class);
+            olTopRight.appendChild(clone);
+          } else if (item.position === "bottom-left") {
+            clone._h_animation_class = "-translate-x-full";
+            clone.classList.add(clone._h_animation_class);
+            olBottomLeft.appendChild(clone);
+          } else if (item.position === "bottom-center") {
+            clone._h_animation_class = "translate-y-full";
+            clone.classList.add(clone._h_animation_class);
+            olBottomCenter.appendChild(clone);
+          } else {
+            clone._h_animation_class = "translate-x-full";
+            clone.classList.add(clone._h_animation_class);
+            olBottomRight.appendChild(clone);
+          }
+          Alpine2.initTree(clone);
+          Alpine2.nextTick(() => {
+            clone.offsetHeight;
+            clone.classList.remove(clone._h_animation_class, "opacity-0");
+          });
+          if (item.timeout > 0) {
+            setTimeout(() => {
+              Alpine2.store("_h_notifications").remove(item.id);
+            }, item.timeout);
+          }
+        },
+        removed(id) {
+          const element = el.querySelector(`#${id}`);
+          if (element) {
+            element.addEventListener(
+              "transitionend",
+              () => {
+                Alpine2.destroyTree(element);
+                element.remove();
+              },
+              { once: true }
+            );
+            element.classList.add(element._h_animation_class, "opacity-0");
+          }
+        }
+      };
+      Alpine2.store("_h_notifications").listeners.push(listener);
+      if (Alpine2.store("_h_notifications").items.length) {
+        Alpine2.store("_h_notifications").items.forEach((item) => {
+          listener.added(item);
+        });
+      }
+      cleanup(() => {
+        lgBreakpointListener.remove();
+        xlBreakpointListener.remove();
+      });
+    });
+    Alpine.directive("h-notification-list", (el, { original: original2 }) => {
+      if (el.tagName !== "OL" && el.tagName !== "UL") {
+        throw new Error(`${original2} must be a list element`);
+      }
+      el.classList.add("flex", "flex-col", "divide-solid", "divide-y");
+      el.setAttribute("data-slot", "notification-list");
+      el.setAttribute("role", "group");
+    });
+    Alpine.directive("h-notification", (el, { original: original2, modifiers }) => {
+      if (el.tagName !== "LI") {
+        throw new Error(`${original2} must be a list item element`);
+      }
+      el.classList.add("pointer-events-auto", "p-3", "flex", "gap-2");
+      if (modifiers.includes("floating")) {
+        el.classList.add("rounded-lg", "data-[variant=toast]:rounded-full", "data-[variant=toast]:py-2", "border", "shadow-lg", "bg-popover", "text-popover-foreground");
+      } else {
+        el.classList.add("data-[unread=true]:border-l-warning", "data-[unread=true]:border-l-3");
+      }
+      el.setAttribute("data-slot", "notification");
+      el.setAttribute("role", "alert");
+    });
+    Alpine.directive("h-notification-media", (el) => {
+      if (!classListStartsWith(el.classList, "items-")) {
+        el.classList.add("items-center");
+      }
+      if (!classListStartsWith(el.classList, "justify-")) {
+        el.classList.add("justify-center");
+      }
+      el.classList.add("flex", "flex-col", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4", "[&>svg]:text-current");
+      el.setAttribute("data-slot", "notification-media");
+    });
+    Alpine.directive("h-notification-title", (el) => {
+      el.classList.add("line-clamp-1", "text-sm", "font-medium", "tracking-tight");
+      el.setAttribute("data-slot", "notification-title");
+    });
+    Alpine.directive("h-notification-description", (el) => {
+      el.classList.add("text-muted-foreground", "text-sm", "font-medium", "[&_p]:leading-relaxed");
+      el.setAttribute("data-slot", "notification-description");
+    });
+    Alpine.directive("h-notification-actions", (el) => {
+      if (!classListStartsWith(el.classList, "justify-")) {
+        el.classList.add("[&[data-orientation=vertical]]:justify-center");
+      }
+      el.classList.add("flex", "gap-2", "data-[orientation=vertical]:flex-col");
+      el.setAttribute("data-slot", "notification-actions");
+    });
+    Alpine.directive("h-notification-close", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "notification-close");
+      let nId;
+      function close() {
+        Alpine2.store("_h_notifications").remove(nId);
+      }
+      Alpine2.findClosest(el.parentElement, (parent) => {
+        if (parent.getAttribute("data-slot") === "notification") {
+          nId = parent.id;
+          return true;
+        }
+        return false;
+      });
+      if (nId) {
+        el.addEventListener("click", close);
+        cleanup(() => {
+          el.removeEventListener("click", close);
+        });
+      } else {
+        console.error(`${original2} must be inside a notification with an id`);
+      }
+    });
+  }
+
   // src/components/pagination.js
   function pagination_default(Alpine) {
     Alpine.directive("h-pagination", (el) => {
@@ -4566,7 +5237,7 @@
     Alpine.directive("h-popover-trigger", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2, cleanup }) => {
       el._popover = Alpine2.reactive({
         id: void 0,
-        controls: `hpc${v4_default()}`,
+        controls: `hpc${uuid_default()}`,
         auto: expression ? false : true,
         expanded: expression ? evaluate2(expression) : false
       });
@@ -4586,7 +5257,7 @@
       if (el.hasAttribute("id")) {
         el._popover.id = el.getAttribute("id");
       } else {
-        el._popover.id = `hp${v4_default()}`;
+        el._popover.id = `hp${uuid_default()}`;
         el.setAttribute("id", el._popover.id);
       }
       el.setAttribute("aria-controls", el._popover.controls);
@@ -4623,7 +5294,7 @@
         });
       }
     });
-    Alpine.directive("h-popover", (el, { original: original2, modifiers }, { effect }) => {
+    Alpine.directive("h-popover", (el, { original: original2, modifiers }, { effect, cleanup }) => {
       const popover = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_popover")) {
@@ -4646,6 +5317,12 @@
         el.classList.remove("overflow-scroll");
         el.classList.add("overflow-none");
       }
+      const stopPropagation = (event) => {
+        event.stopPropagation();
+      };
+      if (el.getAttribute("data-innerclicks") === "true") {
+        el.addEventListener("click", stopPropagation);
+      }
       let autoUpdateCleanup;
       function updatePosition() {
         computePosition2(popover, el, {
@@ -4682,6 +5359,9 @@
           });
         }
       });
+      cleanup(() => {
+        el.removeEventListener("click", stopPropagation);
+      });
     });
   }
 
@@ -6648,7 +7328,7 @@
       el._h_select = Alpine2.reactive({
         fieldLabelId: void 0,
         trigger: void 0,
-        controls: `hsc${v4_default()}`,
+        controls: `hsc${uuid_default()}`,
         expanded: false,
         multiple: false,
         label: [],
@@ -6750,7 +7430,7 @@
       let labelObserver;
       if (label) {
         if (!label.hasAttribute("id")) {
-          label.setAttribute("id", `hsil${v4_default()}`);
+          label.setAttribute("id", `hsil${uuid_default()}`);
         }
         select._h_select.fieldLabelId = label.getAttribute("id");
         fakeTrigger.setAttribute("aria-labelledby", label.getAttribute("id"));
@@ -7092,7 +7772,7 @@
       el.setAttribute("data-slot", "select-label");
       const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_selectGroup"));
       if (selectGroup) {
-        const id = `hsl${v4_default()}`;
+        const id = `hsl${uuid_default()}`;
         el.setAttribute("id", id);
         selectGroup._h_selectGroup.labelledby = id;
       }
@@ -7134,7 +7814,7 @@
       );
       el.setAttribute("data-slot", "select-option");
       el.setAttribute("tabindex", "-1");
-      const id = `hso${v4_default()}`;
+      const id = `hso${uuid_default()}`;
       el.setAttribute("role", "option");
       el.setAttribute("aria-labelledby", id);
       const indicatorEl = document.createElement("span");
@@ -7383,10 +8063,10 @@
         if (el.hasAttribute("id")) {
           group._h_sidebar_group.controlId = el.getAttribute("id");
         } else {
-          group._h_sidebar_group.controlId = `sgl${v4_default()}`;
+          group._h_sidebar_group.controlId = `sgl${uuid_default()}`;
           el.setAttribute("id", group._h_sidebar_group.controlId);
         }
-        group._h_sidebar_group.controls = `sgc${v4_default()}`;
+        group._h_sidebar_group.controls = `sgc${uuid_default()}`;
         el.setAttribute("aria-controls", group._h_sidebar_group.controls);
         el.setAttribute("aria-expanded", !group._h_sidebar_group.state.collapsed);
         const handler = () => {
@@ -7574,10 +8254,10 @@
         if (el.hasAttribute("id")) {
           menuItem._h_sidebar_menu_item.controlId = el.getAttribute("id");
         } else {
-          menuItem._h_sidebar_menu_item.controlId = `sgl${v4_default()}`;
+          menuItem._h_sidebar_menu_item.controlId = `sgl${uuid_default()}`;
           el.setAttribute("id", menuItem._h_sidebar_menu_item.controlId);
         }
-        menuItem._h_sidebar_menu_item.controls = `sgc${v4_default()}`;
+        menuItem._h_sidebar_menu_item.controls = `sgc${uuid_default()}`;
         el.setAttribute("aria-controls", menuItem._h_sidebar_menu_item.controls);
         el.setAttribute("aria-expanded", !menuItem._h_sidebar_menu_item.state.collapsed);
         const handler = () => {
@@ -8851,7 +9531,7 @@
     Alpine.directive("h-time-picker", (el, { expression, modifiers }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
       el._h_timepicker = Alpine2.reactive({
         id: void 0,
-        controls: `htpc${v4_default()}`,
+        controls: `htpc${uuid_default()}`,
         model: void 0,
         expanded: false,
         is12Hour: false,
@@ -9009,7 +9689,7 @@
       if (el.hasAttribute("id")) {
         timepicker._h_timepicker.id = el.getAttribute("id");
       } else {
-        timepicker._h_timepicker.id = `htp${v4_default()}`;
+        timepicker._h_timepicker.id = `htp${uuid_default()}`;
         el.setAttribute("id", timepicker._h_timepicker.id);
       }
       el.classList.add(
@@ -9620,13 +10300,13 @@
     Alpine.directive("h-tooltip-trigger", (el, _, { Alpine: Alpine2, cleanup }) => {
       el._tooltip = Alpine2.reactive({
         id: void 0,
-        controls: `hpc${v4_default()}`,
+        controls: `hpc${uuid_default()}`,
         shown: false
       });
       if (el.hasAttribute("id")) {
         el._tooltip.id = el.getAttribute("id");
       } else {
-        el._tooltip.id = `hp${v4_default()}`;
+        el._tooltip.id = `hp${uuid_default()}`;
         el.setAttribute("id", el._tooltip.id);
       }
       el.setAttribute("aria-describedby", el._tooltip.controls);
@@ -9996,23 +10676,6 @@
   };
   initColorScheme();
 
-  // src/utils/breakpoint-listener.js
-  function getBreakpointListener(handler, breakpoint = 768) {
-    const mql = top.matchMedia(`(width <= ${breakpoint}px)`);
-    const onWidthChange = (event) => {
-      handler(event.matches);
-    };
-    mql.addEventListener("change", onWidthChange);
-    handler(mql.matches);
-    return {
-      _mql: mql,
-      _onWidthChange: onWidthChange,
-      remove() {
-        this._mql.removeEventListener("change", this._onWidthChange);
-      }
-    };
-  }
-
   // src/utils/template.js
   function template_default(Alpine) {
     Alpine.directive("h-template", (el, { original: original2, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
@@ -10122,7 +10785,7 @@
   }
 
   // package.json
-  var version = "1.6.1";
+  var version = "1.7.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -10145,6 +10808,7 @@
     window.Alpine.plugin(label_default);
     window.Alpine.plugin(list_default);
     window.Alpine.plugin(menu_default);
+    window.Alpine.plugin(notifications_default);
     window.Alpine.plugin(pagination_default);
     window.Alpine.plugin(popover_default);
     window.Alpine.plugin(progress_default);