@codbex/harmonia 1.6.1 → 1.7.1

package/dist/harmonia.esm.js

@@ -1905,49 +1905,18 @@ var require_nouislider = __commonJS({
   }
 });
 
-// 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, offset3 = 0) {
-  return (byteToHex[arr[offset3 + 0]] + byteToHex[arr[offset3 + 1]] + byteToHex[arr[offset3 + 2]] + byteToHex[arr[offset3 + 3]] + "-" + byteToHex[arr[offset3 + 4]] + byteToHex[arr[offset3 + 5]] + "-" + byteToHex[arr[offset3 + 6]] + byteToHex[arr[offset3 + 7]] + "-" + byteToHex[arr[offset3 + 8]] + byteToHex[arr[offset3 + 9]] + "-" + byteToHex[arr[offset3 + 10]] + byteToHex[arr[offset3 + 11]] + byteToHex[arr[offset3 + 12]] + byteToHex[arr[offset3 + 13]] + byteToHex[arr[offset3 + 14]] + byteToHex[arr[offset3 + 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, offset3) {
-  if (!buf && !options && crypto.randomUUID) {
-    return crypto.randomUUID();
+// 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 _v4(options, buf, offset3);
-}
-function _v4(options, buf, offset3) {
-  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) {
-    offset3 = offset3 || 0;
-    if (offset3 < 0 || offset3 + 16 > buf.length) {
-      throw new RangeError(`UUID byte range ${offset3}:${offset3 + 15} is out of buffer bounds`);
-    }
-    for (let i = 0; i < 16; ++i) {
-      buf[offset3 + i] = rnds[i];
-    }
-    return buf;
-  }
-  return unsafeStringify(rnds);
-}
-var v4_default = v4;
+  return _p8() + _p8(true) + _p8(true) + _p8();
+};
+var uuid_default = uuidv4;
 
 // src/common/icons.js
 var Calendar = 0;
@@ -1962,6 +1931,23 @@ var Search = 8;
 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(
@@ -2088,6 +2074,222 @@ function setPlusContent(svg) {
   );
   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");
@@ -2137,6 +2339,57 @@ function createSvg({ icon, classes = "size-4", attrs } = {}) {
     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;
   }
@@ -2144,8 +2397,8 @@ function createSvg({ icon, classes = "size-4", attrs } = {}) {
 }
 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) {
@@ -2185,6 +2438,57 @@ function setSvgContent(svg, icon) {
     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;
   }
@@ -2206,7 +2510,7 @@ function accordion_default(Alpine) {
     }
     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 !== "") {
@@ -2221,7 +2525,7 @@ function accordion_default(Alpine) {
     }
     el._h_accordionItem = Alpine2.reactive({
       id: itemId,
-      controls: `ha${v4_default()}`,
+      controls: `ha${uuid_default()}`,
       expanded: getIsExpanded()
     });
     const setAttributes = () => {
@@ -2393,22 +2697,49 @@ function alert_default(Alpine) {
   });
 }
 
+// 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",
@@ -2427,7 +2758,7 @@ function avatar_default(Alpine) {
     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;
@@ -2461,7 +2792,7 @@ function avatar_default(Alpine) {
     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");
@@ -2521,6 +2852,59 @@ function badge_default(Alpine) {
       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
@@ -4403,7 +4787,7 @@ function calendar_default(Alpine) {
     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");
@@ -4446,7 +4830,7 @@ function calendar_default(Alpine) {
     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");
@@ -4871,7 +5255,7 @@ function datepicker_default(Alpine) {
     });
     el._h_datepicker = {
       id: void 0,
-      controls: `hdpc${v4_default()}`,
+      controls: `hdpc${uuid_default()}`,
       input: void 0,
       state,
       inTable: modifiers.includes("table")
@@ -4882,7 +5266,7 @@ function datepicker_default(Alpine) {
     } 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;
     }
@@ -5106,7 +5490,7 @@ function dialog_default(Alpine) {
     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"));
@@ -5138,7 +5522,7 @@ function dialog_default(Alpine) {
     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"));
@@ -5508,7 +5892,7 @@ function input_default(Alpine) {
       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");
@@ -5755,7 +6139,7 @@ function list_default(Alpine) {
       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"));
@@ -6387,6 +6771,293 @@ function menu_default(Alpine) {
   });
 }
 
+// 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) => {
@@ -6472,7 +7143,7 @@ function popover_default(Alpine) {
   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
     });
@@ -6492,7 +7163,7 @@ function popover_default(Alpine) {
     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);
@@ -6529,7 +7200,7 @@ function popover_default(Alpine) {
       });
     }
   });
-  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")) {
@@ -6552,6 +7223,12 @@ function popover_default(Alpine) {
       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, {
@@ -6588,6 +7265,9 @@ function popover_default(Alpine) {
         });
       }
     });
+    cleanup(() => {
+      el.removeEventListener("click", stopPropagation);
+    });
   });
 }
 
@@ -6695,7 +7375,7 @@ function select_default(Alpine) {
     el._h_select = Alpine2.reactive({
       fieldLabelId: void 0,
       trigger: void 0,
-      controls: `hsc${v4_default()}`,
+      controls: `hsc${uuid_default()}`,
       expanded: false,
       multiple: false,
       label: [],
@@ -6797,7 +7477,7 @@ function select_default(Alpine) {
     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"));
@@ -7139,7 +7819,7 @@ function select_default(Alpine) {
     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;
     }
@@ -7181,7 +7861,7 @@ function select_default(Alpine) {
     );
     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");
@@ -7430,10 +8110,10 @@ function sidebar_default(Alpine) {
       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 = () => {
@@ -7621,10 +8301,10 @@ function sidebar_default(Alpine) {
       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 = () => {
@@ -8898,7 +9578,7 @@ function timepicker_default(Alpine) {
   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,
@@ -9056,7 +9736,7 @@ function timepicker_default(Alpine) {
     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(
@@ -9667,13 +10347,13 @@ function tooltip_default(Alpine) {
   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);
@@ -9967,24 +10647,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.6.1";
-
-// 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);
-    }
-  };
-}
+var version = "1.7.1";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -10193,6 +10856,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(label_default);
   registerPlugin(list_default);
   registerPlugin(menu_default);
+  registerPlugin(notifications_default);
   registerPlugin(pagination_default);
   registerPlugin(popover_default);
   registerPlugin(progress_default);
@@ -10240,6 +10904,7 @@ export {
   label_default as Label,
   list_default as List,
   menu_default as Menu,
+  notifications_default as Notifications,
   pagination_default as Pagination,
   popover_default as Popover,
   progress_default as Progress,