highsoft-ui 1.0.87 → 1.0.89

package/dist/components/Header/index.js

@@ -1,26 +1,26 @@
-import { jsx as t, jsxs as i, Fragment as R } from "react/jsx-runtime";
-import { useRef as G, useState as H, useEffect as T } from "react";
-import { a as S, J as U, b as $ } from "../../utils-CT0G9Gzw.js";
-import { A as D } from "../../Announcement03-obPaH4LK.js";
-import { _ as u } from "../../extends-hS2Bh-Yp.js";
-import { X as F } from "../../XClose-CCu1vrNS.js";
+import { jsx as e, jsxs as c, Fragment as F } from "react/jsx-runtime";
+import { useRef as R, useState as E, useEffect as S } from "react";
+import { a as q, b as Y, J, c as X, z as Z } from "../../utils-BKDJp1i0.js";
+import { A as ee } from "../../Announcement03-obPaH4LK.js";
+import { _ as p } from "../../extends-hS2Bh-Yp.js";
+import { X as te } from "../../XClose-CCu1vrNS.js";
 import { c as C } from "../../clsx-OuTLNxxd.js";
-import { Button as m } from "../Button/index.js";
-import { Container as z } from "../Container/index.js";
+import { Button as u } from "../Button/index.js";
+import { Container as U } from "../Container/index.js";
 import { Logo as I } from "../Logo/index.js";
-import { NewTag as K } from "../NewTag/index.js";
-import { Notification as Y } from "../Notification/index.js";
-import { Search as P } from "../Search/index.js";
-import { PrefPanel as W } from "../PrefPanel/index.js";
-var X = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+import { NewTag as ne } from "../NewTag/index.js";
+import { Notification as oe } from "../Notification/index.js";
+import { Search as H } from "../Search/index.js";
+import { PrefPanel as O } from "../PrefPanel/index.js";
+var re = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -28,15 +28,15 @@ var X = function(n) {
       d: "M6 11v4m12-6v4m-1-9c2.4487 0 3.7731.3748 4.4321.6654.0878.0388.1317.0581.2583.179.0759.0724.2145.285.2501.3837.0595.1646.0595.2546.0595.4346v10.7484c0 .9088 0 1.3632-.1363 1.5968-.1386.2375-.2723.348-.5318.4393-.255.0897-.7699-.0092-1.7997-.2071A13.45 13.45 0 0 0 17 18c-3 0-6 2-10 2-2.4487 0-3.7731-.3748-4.4321-.6654-.0878-.0388-.1317-.0581-.2583-.179-.076-.0724-.2145-.285-.2501-.3837C2 18.6073 2 18.5173 2 18.3373V7.5889c0-.9088 0-1.3632.1363-1.5968.1386-.2375.2723-.348.5318-.4393.255-.0898.77.0092 1.7997.207A13.44 13.44 0 0 0 7 6c3 0 6-2 10-2m-2.5 8c0 1.3807-1.1193 2.5-2.5 2.5S9.5 13.3807 9.5 12s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5"
     })
   }));
-}, Z = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, se = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -44,15 +44,15 @@ var X = function(n) {
       d: "M11 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8v8.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C5.2798 21 6.1198 21 7.8 21h8.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.7202 21 17.8802 21 16.2V13m-9-5h4v4m-.5-8.5V2m3.9393 2.5607L20.5 3.5m.0103 5h1.5M3 13.3471c.652.1007 1.3199.1529 2 .1529 4.3864 0 8.2653-2.1724 10.6197-5.5"
     })
   }));
-}, tt = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, ie = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -60,15 +60,15 @@ var X = function(n) {
       d: "M14 2.2695v4.1306c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C14.7599 8 15.0399 8 15.6 8h4.1305M16 13H8m8 4H8m2-8H8m6-7H8.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C4 4.2798 4 5.1198 4 6.8v10.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C6.2798 22 7.1198 22 8.8 22h6.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.7202 20 18.8802 20 17.2V8z"
     })
   }));
-}, et = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, ce = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -76,15 +76,15 @@ var X = function(n) {
       d: "M3 12h12M3 6h18M3 18h18"
     })
   }));
-}, nt = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, ae = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -92,15 +92,15 @@ var X = function(n) {
       d: "M10 8.0022a2.2485 2.2485 0 0 1 2.501-1.4698 2.248 2.248 0 0 1 1.8682 2.2193c0 1.4989-2.2483 2.2483-2.2483 2.2483m.029 3h.01M7 18v2.3355c0 .5329 0 .7993.1092.9361a.5.5 0 0 0 .3913.1881c.1751-.0002.3832-.1666.7993-.4995l2.3854-1.9084c.4873-.3898.731-.5847 1.0023-.7233a3 3 0 0 1 .7617-.2672C12.7477 18 13.0597 18 13.6837 18H16.2c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 15.7202 21 14.8802 21 13.2V7.8c0-1.6802 0-2.5202-.327-3.162a3 3 0 0 0-1.311-1.311C18.7202 3 17.8802 3 16.2 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8V14c0 .93 0 1.395.1022 1.7765a3 3 0 0 0 2.1213 2.1213C5.605 18 6.07 18 7 18"
     })
   }));
-}, ot = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, le = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -108,15 +108,15 @@ var X = function(n) {
       d: "M12 16v5m6 0-3.9514-3.2928c-.7288-.6074-1.0932-.911-1.4999-1.0271a2 2 0 0 0-1.0974 0c-.4067.1161-.7711.4197-1.4999 1.0271L6 21m2-10v1m4-3v3m4-5v5m6-9H2m1 0h18v8.2c0 1.6802 0 2.5202-.327 3.162a3 3 0 0 1-1.311 1.311C18.7202 16 17.8802 16 16.2 16H7.8c-1.6802 0-2.5202 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 13.7202 3 12.8802 3 11.2z"
     })
   }));
-}, j = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, W = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -124,15 +124,15 @@ var X = function(n) {
       d: "M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.7342 4.5089c-.282.7332-.423 1.0998-.6423 1.4082a3 3 0 0 1-.7064.7064c-.3084.2193-.675.3603-1.4082.6423L4 12l4.5089 1.7342c.7332.282 1.0998.423 1.4082.6423.2733.1943.5121.4331.7064.7064.2193.3084.3603.675.6423 1.4082L13 21l1.7342-4.5089c.282-.7332.423-1.0998.6423-1.4082a3 3 0 0 1 .7064-.7064c.3084-.2193.675-.3603 1.4082-.6423L22 12l-4.5089-1.7342c-.7332-.282-1.0998-.423-1.4082-.6423a3 3 0 0 1-.7064-.7064c-.2193-.3084-.3603-.675-.6423-1.4082z"
     })
   }));
-}, O = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, $ = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -140,15 +140,15 @@ var X = function(n) {
       d: "m7 15 3-3-3-3m6 6h4m-9.2 6h8.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.7202 21 17.8802 21 16.2V7.8c0-1.6802 0-2.5202-.327-3.162a3 3 0 0 0-1.311-1.311C18.7202 3 17.8802 3 16.2 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8v8.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C5.2798 21 6.1198 21 7.8 21"
     })
   }));
-}, E = function(n) {
-  return /* @__PURE__ */ t("svg", u({
+}, j = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
   }, n, {
-    children: /* @__PURE__ */ t("path", {
+    children: /* @__PURE__ */ e("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -157,388 +157,438 @@ var X = function(n) {
     })
   }));
 };
-const rt = "m_QBtq_buttons", st = "m_QBtq_container", it = "m_QBtq_gpt", ct = "m_QBtq_header", at = "m_QBtq_icon", lt = "m_QBtq_icons", ht = "m_QBtq_links", dt = "m_QBtq_logo", mt = "m_QBtq_main", ut = "m_QBtq_menu", pt = "m_QBtq_mobile", wt = "m_QBtq_mobileOverlay", gt = "m_QBtq_open", ft = "m_QBtq_outer", vt = "m_QBtq_selectableIcon", kt = "m_QBtq_selected", Ct = "m_QBtq_selectedIcon", _t = "m_QBtq_skip", bt = "m_QBtq_sub", xt = "m_QBtq_subContainer", Bt = "m_QBtq_subTitle", e = {
-  buttons: rt,
-  container: st,
-  gpt: it,
-  header: ct,
-  icon: at,
-  icons: lt,
-  links: ht,
-  logo: dt,
-  main: mt,
-  menu: ut,
-  mobile: pt,
-  mobileOverlay: wt,
-  open: gt,
-  outer: ft,
-  selectableIcon: vt,
-  selected: kt,
-  selectedIcon: Ct,
-  skip: _t,
-  sub: bt,
-  subContainer: xt,
-  subTitle: Bt
-}, V = [
+const he = "m_QBtq_buttons", de = "m_QBtq_container", me = "m_QBtq_gpt", ue = "m_QBtq_header", pe = "m_QBtq_icon", we = "m_QBtq_icons", fe = "m_QBtq_links", ge = "m_QBtq_logo", ve = "m_QBtq_main", ke = "m_QBtq_menu", Ce = "m_QBtq_mobile", _e = "m_QBtq_mobileOverlay", xe = "m_QBtq_open", be = "m_QBtq_outer", Be = "m_QBtq_selectableIcon", Ne = "m_QBtq_selected", ye = "m_QBtq_selectedIcon", qe = "m_QBtq_skip", Se = "m_QBtq_sub", Me = "m_QBtq_subContainer", Te = "m_QBtq_subTitle", o = {
+  buttons: he,
+  container: de,
+  gpt: me,
+  header: ue,
+  icon: pe,
+  icons: we,
+  links: fe,
+  logo: ge,
+  main: ve,
+  menu: ke,
+  mobile: Ce,
+  mobileOverlay: _e,
+  open: xe,
+  outer: be,
+  selectableIcon: Be,
+  selected: Ne,
+  selectedIcon: ye,
+  skip: qe,
+  sub: Se,
+  subContainer: Me,
+  subTitle: Te
+}, D = "notifications", G = "theme", Qe = 365 * 20, Le = (t) => /^\d{1,3}(?:\.\d{1,3}){3}$/.test(t), Ee = () => {
+  if (typeof window > "u") return;
+  const t = window.location.hostname;
+  if (!t || t === "localhost" || Le(t))
+    return;
+  const n = t.replace(/^www\./, ""), h = n.split(".");
+  return h.length <= 2 ? `.${n}` : `.${h.slice(-2).join(".")}`;
+}, P = () => {
+  if (typeof document > "u") return null;
+  const t = document.cookie.split("; ").find((n) => n.startsWith(`${D}=`));
+  if (!t) return null;
+  try {
+    return JSON.parse(decodeURIComponent(t.split("=")[1]));
+  } catch {
+    return null;
+  }
+}, Ie = () => {
+  if (typeof document > "u") return null;
+  const t = document.cookie.split("; ").find((n) => n.startsWith(`${G}=`));
+  if (!t) return null;
+  try {
+    return decodeURIComponent(t.split("=")[1]);
+  } catch {
+    return null;
+  }
+}, V = (t, n) => {
+  if (typeof document > "u") return;
+  const h = new Date(
+    Date.now() + Qe * 24 * 60 * 60 * 1e3
+  ).toUTCString(), s = Ee(), a = [
+    `${t}=${encodeURIComponent(n)}`,
+    "path=/",
+    "SameSite=Lax",
+    `expires=${h}`
+  ];
+  s && a.push(`domain=${s}`), document.cookie = a.join("; ");
+}, A = [
   {
     title: "Products",
     url: "https://www.highcharts.com/products/",
-    icon: /* @__PURE__ */ t(Z, {})
+    icon: /* @__PURE__ */ e(se, {})
   },
   {
     title: "Demos",
     url: "https://www.highcharts.com/demo",
-    icon: /* @__PURE__ */ t(ot, {})
+    icon: /* @__PURE__ */ e(le, {})
   },
   {
     title: "Support",
     url: "https://www.highcharts.com/support/",
-    icon: /* @__PURE__ */ t(nt, {})
+    icon: /* @__PURE__ */ e(ae, {})
   },
   {
     title: "Resources",
     url: "https://www.highcharts.com/resources/",
-    icon: /* @__PURE__ */ t(tt, {})
+    icon: /* @__PURE__ */ e(ie, {})
   },
   {
     title: "Pricing",
     url: "https://shop.highcharts.com/",
-    icon: /* @__PURE__ */ t(X, {})
+    icon: /* @__PURE__ */ e(re, {})
   },
   {
     title: "Blog",
     url: "https://www.highcharts.com/blog/home/",
-    icon: /* @__PURE__ */ t(D, {})
+    icon: /* @__PURE__ */ e(ee, {})
   }
 ];
-function d(c, n) {
-  return n ? c.replace(n, "") : c;
+function m(t, n) {
+  return n ? t.replace(n, "") : t;
 }
-function Nt({
-  items: c,
+function He({
+  items: t,
   link: n = "a",
-  host: f = "https://www.highcharts.com",
-  pathname: l
+  host: h = "https://www.highcharts.com",
+  pathname: s
 }) {
-  const h = $();
-  return /* @__PURE__ */ t("div", { className: C(e.sub, e.outer), children: /* @__PURE__ */ t(z, { className: e.subContainer, as: "ul", children: c.map(
-    ({ title: N, url: v, icon: _, selectedIcon: b, tag: q, tagVariant: g = "success" }, p) => {
-      const x = typeof window < "u" && window.location.origin || "http://example.com", w = new URL(v, x), k = (!!l || h) && w.origin === x && w.pathname === (l || typeof window < "u" && window.location.pathname);
-      return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ i(
+  const a = X();
+  return /* @__PURE__ */ e("div", { className: C(o.sub, o.outer), children: /* @__PURE__ */ e(U, { className: o.subContainer, as: "ul", children: t.map(
+    ({ title: N, url: v, icon: _, selectedIcon: x, tag: y, tagVariant: g = "success" }, w) => {
+      const b = typeof window < "u" && window.location.origin || "http://example.com", f = new URL(v, b), k = (!!s || a) && f.origin === b && f.pathname === (s || typeof window < "u" && window.location.pathname);
+      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
         n,
         {
-          href: d(v, f),
+          href: m(v, h),
           className: C({
-            [e.selectableIcon]: b,
-            [e.selected]: k
+            [o.selectableIcon]: x,
+            [o.selected]: k
           }),
           children: [
-            /* @__PURE__ */ i("span", { className: e.icons, children: [
-              /* @__PURE__ */ t("span", { className: e.selectedIcon, children: b }),
-              /* @__PURE__ */ t("span", { className: e.icon, children: _ })
+            /* @__PURE__ */ c("span", { className: o.icons, children: [
+              /* @__PURE__ */ e("span", { className: o.selectedIcon, children: x }),
+              /* @__PURE__ */ e("span", { className: o.icon, children: _ })
             ] }),
-            /* @__PURE__ */ i("span", { className: e.subTitle, children: [
+            /* @__PURE__ */ c("span", { className: o.subTitle, children: [
               N,
-              q && /* @__PURE__ */ t(K, { variant: g, icon: !1 })
+              y && /* @__PURE__ */ e(ne, { variant: g, icon: !1 })
             ] })
           ]
         }
-      ) }, p);
+      ) }, w);
     }
   ) }) });
 }
-const qt = [
+const Oe = [
   {
     id: "whats-new",
     content: [
       {
         title: "Grid Pro",
         description: "50% off through 2025",
-        url: "https://www.highcharts.com/products/grid/"
+        url: "https://www.highcharts.com/products/grid/",
+        tag: "new"
       },
       {
         title: "React",
         description: "Our improved React integration",
-        url: "https://www.highcharts.com/blog/news/how-to-migrate-to-the-new-highcharts-for-react/"
+        url: "https://www.highcharts.com/blog/news/how-to-migrate-to-the-new-highcharts-for-react/",
+        tag: "new"
       },
       {
         title: "Highcharts on Discord",
         description: "Join our server",
-        url: "https://discord.com/invite/xHxxcyyy6K"
+        url: "https://discord.com/invite/xHxxcyyy6K",
+        tag: "new"
       }
     ]
   }
 ];
-function zt({
-  subItems: c,
+function We() {
+  const { theme: t, setTheme: n } = Z(), h = R(!1);
+  return S(() => {
+    if (h.current) return;
+    const s = Ie();
+    if (s && s !== t) {
+      n(s), h.current = !0;
+      return;
+    }
+    h.current = !0;
+  }, [n, t]), S(() => {
+    t && V(G, t);
+  }, [t]), null;
+}
+function Xe({
+  subItems: t,
   children: n,
-  notifications: f = qt,
+  notifications: h = Oe,
   // TODO: Fetch these from the internets
-  link: l = "a",
-  host: h = "https://www.highcharts.com",
+  link: s = "a",
+  host: a = "https://www.highcharts.com",
   pathname: N,
   cssVariable: v
 }) {
-  const _ = S("(max-width: 374px)"), b = S("(max-width: 849px)"), q = S("(min-width: 850px) and (max-width: 999px)"), g = G(null), [p, x] = H(!1), [w, k] = H([]);
-  T(() => {
-    let o = window.scrollY;
-    const r = 82 + w.length * 48 + (c?.length ? 72 : 0), s = -(82 + w.length * 48);
-    let a = s, B = a;
-    g.current && (g.current.style.top = `${a}px`), v && document.documentElement.style.setProperty(
+  const _ = q("(max-width: 374px)"), x = q("(max-width: 849px)"), y = q("(min-width: 850px) and (max-width: 999px)"), g = R(null), [w, b] = E(!1), [f, k] = E([]);
+  S(() => {
+    let r = window.scrollY;
+    const i = 82 + f.length * 48 + (t?.length ? 72 : 0), d = -(82 + f.length * 48);
+    let l = d, B = l;
+    g.current && (g.current.style.top = `${l}px`), v && document.documentElement.style.setProperty(
       "--header-bottom",
-      `${r + a}px`
+      `${i + l}px`
     );
     const Q = () => {
-      const L = window.scrollY, J = L - o;
-      a -= J, a < s ? a = s : a > 0 && (a = 0), g.current && a !== B && (g.current.style.top = `${a}px`, v && document.documentElement.style.setProperty(
+      const L = window.scrollY, K = L - r;
+      l -= K, l < d ? l = d : l > 0 && (l = 0), g.current && l !== B && (g.current.style.top = `${l}px`, v && document.documentElement.style.setProperty(
         "--header-bottom",
-        `${r + a}px`
-      )), o = L, B = a;
+        `${i + l}px`
+      )), r = L, B = l;
     };
     return window.addEventListener("scroll", Q), () => window.removeEventListener("scroll", Q);
-  }, [v, w.length]), T(() => {
-    if (f.length) {
-      const o = localStorage.getItem("notifications");
-      if (o) {
-        const r = JSON.parse(o);
-        k(
-          f.filter(
-            (s) => !s.id || !r.closed.includes(s.id)
-          )
-        );
-      } else
-        k(f);
-    }
-  }, [f]);
-  const M = (o) => {
-    if (o.preventDefault(), !(o.nativeEvent instanceof KeyboardEvent) || o.nativeEvent.code === "Enter" || o.nativeEvent.code === "Space") {
-      const r = document.querySelector("main");
-      r && (r.scrollIntoView(), r.getAttribute("tabindex") !== "-1" && r.setAttribute("tabindex", "-1"), r.focus());
+  }, [v, f.length]), Y(() => {
+    if (!h.length) return;
+    const r = P();
+    k(
+      r ? h.filter(
+        (i) => !i.id || !r.closed.includes(i.id)
+      ) : h
+    );
+  }, [a, h]);
+  const M = (r) => {
+    if (r.preventDefault(), !(r.nativeEvent instanceof KeyboardEvent) || r.nativeEvent.code === "Enter" || r.nativeEvent.code === "Space") {
+      const i = document.querySelector("main");
+      i && (i.scrollIntoView(), i.getAttribute("tabindex") !== "-1" && i.setAttribute("tabindex", "-1"), i.focus());
     }
-  }, y = () => {
-    x(!p);
-  }, A = (o) => {
-    k(w.filter((s) => !s.id || s.id !== o));
-    const r = localStorage.getItem("notifications");
-    if (r) {
-      const s = JSON.parse(r);
-      s.closed.includes(o) || (s.closed.push(o), localStorage.setItem("notifications", JSON.stringify(s)));
-    } else
-      localStorage.setItem(
-        "notifications",
-        JSON.stringify({
-          closed: [o]
-        })
-      );
+  }, T = () => {
+    b(!w);
+  }, z = (r) => {
+    if (k(f.filter((d) => !d.id || d.id !== r)), !r) return;
+    const i = P() ?? {
+      closed: []
+    };
+    i.closed.includes(r) || V(
+      D,
+      JSON.stringify({
+        closed: [...i.closed, r]
+      })
+    );
   };
-  return /* @__PURE__ */ t(U, { children: /* @__PURE__ */ i("header", { className: e.header, ref: g, children: [
-    w?.map(({ id: o, content: r, variant: s, closable: a }, B) => /* @__PURE__ */ t(
-      Y,
-      {
-        content: r,
-        variant: s,
-        closable: a,
-        onClose: () => A(o)
-      },
-      B
-    )),
-    /* @__PURE__ */ t("div", { className: C(e.main, e.outer), children: /* @__PURE__ */ i(z, { as: "nav", className: e.container, children: [
-      /* @__PURE__ */ t(
-        m,
-        {
-          as: "a",
-          className: e.skip,
-          size: 500,
-          tabIndex: "0",
-          onClick: M,
-          onKeyPress: M,
-          children: "Skip to content"
-        }
-      ),
-      /* @__PURE__ */ t(
-        l,
-        {
-          className: e.logo,
-          href: d("https://www.highcharts.com/", h),
-          children: /* @__PURE__ */ t(I, { showText: !q && !_ })
-        }
-      ),
-      /* @__PURE__ */ t("ul", { className: e.links, children: V.map(({ title: o, url: r }, s) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-        m,
+  return /* @__PURE__ */ c(J, { children: [
+    /* @__PURE__ */ e(We, {}),
+    /* @__PURE__ */ c("header", { className: o.header, ref: g, children: [
+      f?.map(({ id: r, content: i, variant: d, closable: l }, B) => /* @__PURE__ */ e(
+        oe,
         {
-          variant: "plain",
-          size: 300,
-          as: l,
-          href: d(r, h),
-          children: o
-        }
-      ) }, s)) }),
-      /* @__PURE__ */ i("div", { className: e.buttons, children: [
-        /* @__PURE__ */ i(
-          m,
+          id: r,
+          content: i,
+          variant: d,
+          closable: l,
+          onClose: () => z(r)
+        },
+        B
+      )),
+      /* @__PURE__ */ e("div", { className: C(o.main, o.outer), children: /* @__PURE__ */ c(U, { as: "nav", className: o.container, children: [
+        /* @__PURE__ */ e(
+          u,
           {
-            variant: "transparent",
-            as: l,
-            href: d(
-              "https://www.highcharts.com/chat/gpt/",
-              h
-            ),
-            children: [
-              /* @__PURE__ */ t("span", { className: e.gpt, children: "Highcharts GPT" }),
-              /* @__PURE__ */ t(j, {})
-            ]
+            as: "a",
+            className: o.skip,
+            size: 500,
+            tabIndex: "0",
+            onClick: M,
+            onKeyPress: M,
+            children: "Skip to content"
           }
         ),
-        /* @__PURE__ */ t(P, {}),
-        /* @__PURE__ */ t(W, {}),
-        /* @__PURE__ */ t(
-          m,
+        /* @__PURE__ */ e(
+          s,
           {
-            variant: "brand",
-            as: l,
-            href: d("https://shop.highcharts.com/account", h),
-            "aria-label": "Login",
-            children: /* @__PURE__ */ t(E, {})
+            className: o.logo,
+            href: m("https://www.highcharts.com/", a),
+            children: /* @__PURE__ */ e(I, { showText: !y && !_ })
           }
         ),
-        /* @__PURE__ */ i(
-          m,
+        /* @__PURE__ */ e("ul", { className: o.links, children: A.map(({ title: r, url: i }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+          u,
           {
-            variant: "success",
-            as: l,
-            href: d(
-              "https://www.highcharts.com/download/",
-              h
-            ),
-            children: [
-              /* @__PURE__ */ t(O, {}),
-              "Get started"
-            ]
+            variant: "plain",
+            size: 300,
+            as: s,
+            href: m(i, a),
+            children: r
           }
-        ),
-        /* @__PURE__ */ i(
-          m,
-          {
-            variant: p ? "white" : "transparent",
-            className: e.menu,
-            onClick: y,
-            children: [
-              p ? "Close" : "Menu",
-              p ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(et, {})
-            ]
-          }
-        )
-      ] })
-    ] }) }),
-    !!c?.length && /* @__PURE__ */ t(
-      Nt,
-      {
-        items: c,
-        link: l,
-        host: h,
-        pathname: N
-      }
-    ),
-    n,
-    b && /* @__PURE__ */ i(R, { children: [
-      /* @__PURE__ */ t(
-        "div",
+        ) }, d)) }),
+        /* @__PURE__ */ c("div", { className: o.buttons, children: [
+          /* @__PURE__ */ c(
+            u,
+            {
+              variant: "transparent",
+              as: s,
+              href: m(
+                "https://www.highcharts.com/chat/gpt/",
+                a
+              ),
+              children: [
+                /* @__PURE__ */ e("span", { className: o.gpt, children: "Highcharts GPT" }),
+                /* @__PURE__ */ e(W, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(H, {}),
+          /* @__PURE__ */ e(O, {}),
+          /* @__PURE__ */ e(
+            u,
+            {
+              variant: "brand",
+              as: s,
+              href: m("https://shop.highcharts.com/account", a),
+              "aria-label": "Login",
+              children: /* @__PURE__ */ e(j, {})
+            }
+          ),
+          /* @__PURE__ */ c(
+            u,
+            {
+              variant: "success",
+              as: s,
+              href: m(
+                "https://www.highcharts.com/download/",
+                a
+              ),
+              children: [
+                /* @__PURE__ */ e($, {}),
+                "Get started"
+              ]
+            }
+          ),
+          /* @__PURE__ */ c(
+            u,
+            {
+              variant: w ? "white" : "transparent",
+              className: o.menu,
+              onClick: T,
+              children: [
+                w ? "Close" : "Menu",
+                w ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ e(ce, {})
+              ]
+            }
+          )
+        ] })
+      ] }) }),
+      !!t?.length && /* @__PURE__ */ e(
+        He,
         {
-          className: C(e.mobileOverlay, { [e.open]: p }),
-          onClick: y
+          items: t,
+          link: s,
+          host: a,
+          pathname: N
         }
       ),
-      /* @__PURE__ */ i(
-        "nav",
-        {
-          className: C(e.mobile, {
-            [e.open]: p
-          }),
-          children: [
-            /* @__PURE__ */ i("div", { className: e.container, children: [
-              /* @__PURE__ */ t(
-                l,
-                {
-                  className: e.logo,
-                  href: d("https://www.highcharts.com/", h),
-                  children: /* @__PURE__ */ t(I, { showText: !_ })
-                }
-              ),
-              /* @__PURE__ */ i("div", { className: e.buttons, children: [
-                /* @__PURE__ */ i(
-                  m,
+      n,
+      x && /* @__PURE__ */ c(F, { children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: C(o.mobileOverlay, { [o.open]: w }),
+            onClick: T
+          }
+        ),
+        /* @__PURE__ */ c(
+          "nav",
+          {
+            className: C(o.mobile, {
+              [o.open]: w
+            }),
+            children: [
+              /* @__PURE__ */ c("div", { className: o.container, children: [
+                /* @__PURE__ */ e(
+                  s,
                   {
-                    variant: "transparent",
-                    as: l,
-                    href: d(
-                      "https://www.highcharts.com/chat/gpt/",
-                      h
+                    className: o.logo,
+                    href: m("https://www.highcharts.com/", a),
+                    children: /* @__PURE__ */ e(I, { showText: !_ })
+                  }
+                ),
+                /* @__PURE__ */ c("div", { className: o.buttons, children: [
+                  /* @__PURE__ */ c(
+                    u,
+                    {
+                      variant: "transparent",
+                      as: s,
+                      href: m(
+                        "https://www.highcharts.com/chat/gpt/",
+                        a
+                      ),
+                      children: [
+                        /* @__PURE__ */ e("span", { className: o.gpt, children: "Highcharts GPT" }),
+                        /* @__PURE__ */ e(W, {})
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e(H, {}),
+                  /* @__PURE__ */ e(O, {})
+                ] })
+              ] }),
+              /* @__PURE__ */ c("div", { className: o.buttons, children: [
+                /* @__PURE__ */ c(
+                  u,
+                  {
+                    variant: "brand",
+                    fullWidth: !0,
+                    as: s,
+                    href: m(
+                      "https://shop.highcharts.com/account",
+                      a
                     ),
                     children: [
-                      /* @__PURE__ */ t("span", { className: e.gpt, children: "Highcharts GPT" }),
-                      /* @__PURE__ */ t(j, {})
+                      /* @__PURE__ */ e(j, {}),
+                      "Login"
                     ]
                   }
                 ),
-                /* @__PURE__ */ t(P, {}),
-                /* @__PURE__ */ t(W, {})
-              ] })
-            ] }),
-            /* @__PURE__ */ i("div", { className: e.buttons, children: [
-              /* @__PURE__ */ i(
-                m,
-                {
-                  variant: "brand",
-                  fullWidth: !0,
-                  as: l,
-                  href: d(
-                    "https://shop.highcharts.com/account",
-                    h
-                  ),
-                  children: [
-                    /* @__PURE__ */ t(E, {}),
-                    "Login"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ i(
-                m,
+                /* @__PURE__ */ c(
+                  u,
+                  {
+                    variant: "success",
+                    fullWidth: !0,
+                    as: s,
+                    href: m(
+                      "https://www.highcharts.com/download/",
+                      a
+                    ),
+                    children: [
+                      /* @__PURE__ */ e($, {}),
+                      "Get started"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e("ul", { className: o.links, children: A.map(({ title: r, url: i, icon: d }, l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+                u,
                 {
-                  variant: "success",
+                  variant: "plain",
+                  size: 500,
                   fullWidth: !0,
-                  as: l,
-                  href: d(
-                    "https://www.highcharts.com/download/",
-                    h
-                  ),
+                  as: s,
+                  href: m(i, a),
                   children: [
-                    /* @__PURE__ */ t(O, {}),
-                    "Get started"
+                    d,
+                    r
                   ]
                 }
-              )
-            ] }),
-            /* @__PURE__ */ t("ul", { className: e.links, children: V.map(({ title: o, url: r, icon: s }, a) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ i(
-              m,
-              {
-                variant: "plain",
-                size: 500,
-                fullWidth: !0,
-                as: l,
-                href: d(r, h),
-                children: [
-                  s,
-                  o
-                ]
-              }
-            ) }, a)) })
-          ]
-        }
-      )
+              ) }, l)) })
+            ]
+          }
+        )
+      ] })
     ] })
-  ] }) });
+  ] });
 }
 export {
-  zt as Header,
-  Nt as SubHeader
+  Xe as Header,
+  He as SubHeader
 };