highsoft-ui 1.0.96 → 1.0.97

package/dist/components/Header/index.js

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as c, Fragment as F } from "react/jsx-runtime";
-import { useRef as R, useState as E, useEffect as T } from "react";
-import { a as M, b as Y, J, c as X, z as Z } from "../../utils-BKDJp1i0.js";
-import { A as ee } from "../../Announcement03-obPaH4LK.js";
-import { _ as f } from "../../extends-hS2Bh-Yp.js";
-import { S as I, a as H } from "../../index-ClA5awl_.js";
-import { X as te } from "../../XClose-CCu1vrNS.js";
-import { c as _ } from "../../clsx-OuTLNxxd.js";
-import { Button as u } from "../Button/index.js";
-import { Container as D } from "../Container/index.js";
-import { Logo as O } from "../Logo/index.js";
-import { NewTag as ne } from "../NewTag/index.js";
-import { Notification as oe } from "../Notification/index.js";
-import { PrefPanel as P } from "../PrefPanel/index.js";
-var re = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+import { jsx as e, jsxs as i, Fragment as ne } from "react/jsx-runtime";
+import { useRef as U, useState as P, useEffect as W } from "react";
+import { a as T, b as A, J as oe, c as re, z as se } from "../../utils-BKDJp1i0.js";
+import { A as ie } from "../../Announcement03-obPaH4LK.js";
+import { _ as p } from "../../extends-hS2Bh-Yp.js";
+import { X as ce } from "../../XClose-CCu1vrNS.js";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import { Button as m } from "../Button/index.js";
+import { Container as G } from "../Container/index.js";
+import { Logo as j } from "../Logo/index.js";
+import { NewTag as ae } from "../NewTag/index.js";
+import { Notification as le } from "../Notification/index.js";
+import { Search as $ } from "../Search/index.js";
+import { PrefPanel as R } from "../PrefPanel/index.js";
+var he = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -28,8 +28,8 @@ var re = 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"
     })
   }));
-}, se = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, de = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -44,8 +44,24 @@ var re = 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"
     })
   }));
-}, ie = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, F = 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__ */ e("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M13 5c0 1.1046-2.4624 2-5.5 2S2 6.1046 2 5m11 0c0-1.1046-2.4624-2-5.5-2S2 3.8954 2 5m11 0v1.5M2 5v12c0 1.1046 2.4624 2 5.5 2m0-8q-.2528 0-.5-.0082C4.1967 10.9 2 10.0433 2 9m5.5 6C4.4624 15 2 14.1046 2 13m20-1.5c0 1.1046-2.4624 2-5.5 2s-5.5-.8954-5.5-2m11 0c0-1.1046-2.4624-2-5.5-2s-5.5.8954-5.5 2m11 0V19c0 1.1046-2.4624 2-5.5 2s-5.5-.8954-5.5-2v-7.5m11 3.75c0 1.1046-2.4624 2-5.5 2s-5.5-.8954-5.5-2"
+    })
+  }));
+}, me = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -60,8 +76,8 @@ var re = 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"
     })
   }));
-}, ce = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, ue = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -76,8 +92,8 @@ var re = function(n) {
       d: "M3 12h12M3 6h18M3 18h18"
     })
   }));
-}, ae = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, pe = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -92,8 +108,8 @@ var re = 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"
     })
   }));
-}, le = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, we = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -108,8 +124,8 @@ var re = 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"
     })
   }));
-}, W = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, D = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -124,8 +140,8 @@ var re = 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"
     })
   }));
-}, $ = function(n) {
-  return /* @__PURE__ */ e("svg", f({
+}, V = function(n) {
+  return /* @__PURE__ */ e("svg", p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -141,141 +157,143 @@ var re = function(n) {
     })
   }));
 };
-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", Ce = "m_QBtq_menu", ke = "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", Se = "m_QBtq_skip", qe = "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: Ce,
-  mobile: ke,
-  mobileOverlay: _e,
-  open: xe,
-  outer: be,
-  selectableIcon: Be,
-  selected: Ne,
-  selectedIcon: ye,
-  skip: Se,
-  sub: qe,
-  subContainer: Me,
-  subTitle: Te
-}, G = "notifications", V = "theme", Qe = 365 * 20, Le = (t) => /^\d{1,3}(?:\.\d{1,3}){3}$/.test(t), Ee = () => {
+const fe = "m_QBtq_buttons", ge = "m_QBtq_container", ve = "m_QBtq_content", ke = "m_QBtq_cta", Ce = "m_QBtq_gpt", _e = "m_QBtq_header", xe = "m_QBtq_icon", be = "m_QBtq_icons", Be = "m_QBtq_links", Ne = "m_QBtq_logo", ye = "m_QBtq_main", qe = "m_QBtq_menu", Se = "m_QBtq_mobile", Me = "m_QBtq_mobileOverlay", Qe = "m_QBtq_open", Te = "m_QBtq_outer", Ee = "m_QBtq_selectableIcon", He = "m_QBtq_selected", Le = "m_QBtq_selectedIcon", Ie = "m_QBtq_skip", Oe = "m_QBtq_sub", Pe = "m_QBtq_subContainer", We = "m_QBtq_subTitle", o = {
+  buttons: fe,
+  container: ge,
+  content: ve,
+  cta: ke,
+  gpt: Ce,
+  header: _e,
+  icon: xe,
+  icons: be,
+  links: Be,
+  logo: Ne,
+  main: ye,
+  menu: qe,
+  mobile: Se,
+  mobileOverlay: Me,
+  open: Qe,
+  outer: Te,
+  selectableIcon: Ee,
+  selected: He,
+  selectedIcon: Le,
+  skip: Ie,
+  sub: Oe,
+  subContainer: Pe,
+  subTitle: We
+}, Y = "notifications", J = "theme", Ae = 365 * 20, je = (t) => /^\d{1,3}(?:\.\d{1,3}){3}$/.test(t), $e = () => {
   if (typeof window > "u") return;
   const t = window.location.hostname;
-  if (!t || t === "localhost" || Le(t))
+  if (!t || t === "localhost" || je(t))
     return;
-  const n = t.replace(/^www\./, ""), h = n.split(".");
-  return h.length <= 2 ? `.${n}` : `.${h.slice(-2).join(".")}`;
-}, j = () => {
+  const n = t.replace(/^www\./, ""), l = n.split(".");
+  return l.length <= 2 ? `.${n}` : `.${l.slice(-2).join(".")}`;
+}, z = () => {
   if (typeof document > "u") return null;
-  const t = document.cookie.split("; ").find((n) => n.startsWith(`${G}=`));
+  const t = document.cookie.split("; ").find((n) => n.startsWith(`${Y}=`));
   if (!t) return null;
   try {
     return JSON.parse(decodeURIComponent(t.split("=")[1]));
   } catch {
     return null;
   }
-}, Ie = () => {
+}, Re = () => {
   if (typeof document > "u") return null;
-  const t = document.cookie.split("; ").find((n) => n.startsWith(`${V}=`));
+  const t = document.cookie.split("; ").find((n) => n.startsWith(`${J}=`));
   if (!t) return null;
   try {
     return decodeURIComponent(t.split("=")[1]);
   } catch {
     return null;
   }
-}, z = (t, n) => {
+}, X = (t, n) => {
   if (typeof document > "u") return;
-  const h = new Date(
-    Date.now() + Qe * 24 * 60 * 60 * 1e3
-  ).toUTCString(), s = Ee(), a = [
+  const l = new Date(
+    Date.now() + Ae * 24 * 60 * 60 * 1e3
+  ).toUTCString(), s = $e(), a = [
     `${t}=${encodeURIComponent(n)}`,
     "path=/",
     "SameSite=Lax",
-    `expires=${h}`
+    `expires=${l}`
   ];
   s && a.push(`domain=${s}`), document.cookie = a.join("; ");
-}, A = [
+}, K = [
   {
     title: "Products",
     url: "https://www.highcharts.com/products/",
-    icon: /* @__PURE__ */ e(se, {})
+    icon: /* @__PURE__ */ e(de, {})
   },
   {
     title: "Demos",
     url: "https://www.highcharts.com/demo",
-    icon: /* @__PURE__ */ e(le, {})
+    icon: /* @__PURE__ */ e(we, {})
   },
   {
     title: "Support",
     url: "https://www.highcharts.com/support/",
-    icon: /* @__PURE__ */ e(ae, {})
+    icon: /* @__PURE__ */ e(pe, {})
   },
   {
     title: "Resources",
     url: "https://www.highcharts.com/resources/",
-    icon: /* @__PURE__ */ e(ie, {})
+    icon: /* @__PURE__ */ e(me, {})
   },
   {
     title: "Pricing",
     url: "https://shop.highcharts.com/",
-    icon: /* @__PURE__ */ e(re, {})
+    icon: /* @__PURE__ */ e(he, {})
   },
   {
     title: "Blog",
     url: "https://www.highcharts.com/blog/home/",
-    icon: /* @__PURE__ */ e(ee, {})
+    icon: /* @__PURE__ */ e(ie, {})
   }
 ];
-function m(t, n) {
+function d(t, n) {
   return n ? t.replace(n, "") : t;
 }
-function He({
+function Fe({
   items: t,
   link: n = "a",
-  host: h = "https://www.highcharts.com",
+  host: l = "https://www.highcharts.com",
   pathname: s
 }) {
-  const a = X();
-  return /* @__PURE__ */ e("div", { className: _(o.sub, o.outer), children: /* @__PURE__ */ e(D, { className: o.subContainer, as: "ul", children: t.map(
+  const a = re();
+  return /* @__PURE__ */ e("div", { className: x(o.sub, o.outer), children: /* @__PURE__ */ e(G, { className: o.subContainer, as: "ul", children: t.map(
     ({
-      title: y,
-      url: v,
-      prefixMatch: x,
-      icon: S,
-      selectedIcon: b,
-      tag: g,
+      title: S,
+      url: f,
+      prefixMatch: b,
+      icon: B,
+      selectedIcon: N,
+      tag: y,
       tagVariant: w = "success"
-    }, q) => {
-      const p = s || typeof window < "u" && window.location.pathname, C = typeof window < "u" && window.location.origin || "http://example.com", k = new URL(v, C), B = p && (!!s || a) && k.origin === C && (x ? p.startsWith(k.pathname) : k.pathname === p);
-      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+    }, M) => {
+      const u = s || typeof window < "u" && window.location.pathname, g = typeof window < "u" && window.location.origin || "http://example.com", v = new URL(f, g), q = u && (!!s || a) && v.origin === g && (b ? u.startsWith(v.pathname) : v.pathname === u);
+      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
         n,
         {
-          href: m(v, h),
-          className: _({
-            [o.selectableIcon]: b,
-            [o.selected]: B
+          href: d(f, l),
+          className: x({
+            [o.selectableIcon]: N,
+            [o.selected]: q
           }),
           children: [
-            /* @__PURE__ */ c("span", { className: o.icons, children: [
-              /* @__PURE__ */ e("span", { className: o.selectedIcon, children: b }),
-              /* @__PURE__ */ e("span", { className: o.icon, children: S })
+            /* @__PURE__ */ i("span", { className: o.icons, children: [
+              /* @__PURE__ */ e("span", { className: o.selectedIcon, children: N }),
+              /* @__PURE__ */ e("span", { className: o.icon, children: B })
             ] }),
-            /* @__PURE__ */ c("span", { className: o.subTitle, children: [
-              y,
-              g && /* @__PURE__ */ e(ne, { variant: w, icon: !1 })
+            /* @__PURE__ */ i("span", { className: o.subTitle, children: [
+              S,
+              y && /* @__PURE__ */ e(ae, { variant: w, icon: !1 })
             ] })
           ]
         }
-      ) }, q);
+      ) }, M);
     }
   ) }) });
 }
-const Oe = [
+const De = [
   {
     id: "whats-new",
     content: [
@@ -300,276 +318,286 @@ const Oe = [
     ]
   }
 ];
-function Pe() {
-  const { theme: t, setTheme: n } = Z(), h = R(!1);
-  return T(() => {
-    if (h.current) return;
-    const s = Ie();
+function Ve() {
+  const { theme: t, setTheme: n } = se(), l = U(!1);
+  return W(() => {
+    if (l.current) return;
+    const s = Re();
     if (s && s !== t) {
-      n(s), h.current = !0;
+      n(s), l.current = !0;
       return;
     }
-    h.current = !0;
-  }, [n, t]), T(() => {
-    t && z(V, t);
+    l.current = !0;
+  }, [n, t]), W(() => {
+    t && X(J, t);
   }, [t]), null;
 }
-function Xe({
+function it({
   subItems: t,
   children: n,
-  notifications: h = Oe,
+  notifications: l = De,
   // TODO: Fetch these from the internets
   link: s = "a",
   host: a = "https://www.highcharts.com",
-  pathname: y,
-  cssVariable: v
+  pathname: S,
+  cssVariable: f
 }) {
-  const x = M("(max-width: 374px)"), S = M("(max-width: 849px)"), b = M("(min-width: 850px) and (max-width: 999px)"), g = R(null), [w, q] = E(!1), [p, C] = E([]);
-  T(() => {
-    let r = window.scrollY;
-    const i = 82 + p.length * 48 + (t?.length ? 72 : 0), d = -(82 + p.length * 48);
-    let l = d, N = l;
-    g.current && (g.current.style.top = `${l}px`), v && document.documentElement.style.setProperty(
-      "--header-bottom",
-      `${i + l}px`
-    );
-    const Q = () => {
-      const L = window.scrollY, U = L - r;
-      l -= U, l < d ? l = d : l > 0 && (l = 0), g.current && l !== N && (g.current.style.top = `${l}px`, v && document.documentElement.style.setProperty(
+  const b = T("(max-width: 374px)"), B = T("(max-width: 849px)"), N = T("(max-width: 1300px)"), y = U(null), [w, M] = P(!1), [u, g] = P([]);
+  A(() => {
+    const r = y.current;
+    if (!r) return;
+    const c = 48, h = 82, C = t?.length ? 72 : 0, Q = h + u.length * c + C, ee = -(h + u.length * c);
+    let E = window.scrollY, k = 0, H = null, _ = null;
+    const L = () => {
+      _ = null, !(!r || H === k) && (r.style.transform = `translate3d(0, ${k}px, 0)`, f && document.documentElement.style.setProperty(
         "--header-bottom",
-        `${i + l}px`
-      )), r = L, N = l;
+        `${Q + k}px`
+      ), H = k);
     };
-    return window.addEventListener("scroll", Q), () => window.removeEventListener("scroll", Q);
-  }, [v, p.length]), Y(() => {
-    if (!h.length) return;
-    const r = j();
-    C(
-      r ? h.filter(
-        (i) => !i.id || !r.closed.includes(i.id)
-      ) : h
+    L();
+    const I = () => {
+      const O = window.scrollY, te = O - E;
+      E = O, k = Math.min(0, Math.max(ee, k - te)), _ === null && (_ = window.requestAnimationFrame(L));
+    };
+    return window.addEventListener("scroll", I, { passive: !0 }), () => {
+      window.removeEventListener("scroll", I), _ !== null && cancelAnimationFrame(_), r.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
+    };
+  }, [f, u.length, t?.length]), A(() => {
+    if (!l.length) return;
+    const r = z();
+    g(
+      r ? l.filter(
+        (c) => !c.id || !r.closed.includes(c.id)
+      ) : l
     );
-  }, [a, h]);
-  const k = (r) => {
+  }, [a, l]);
+  const v = (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());
+      const c = document.querySelector("main");
+      c && (c.scrollIntoView(), c.getAttribute("tabindex") !== "-1" && c.setAttribute("tabindex", "-1"), c.focus());
     }
-  }, B = () => {
-    q(!w);
-  }, K = (r) => {
-    if (C(p.filter((d) => !d.id || d.id !== r)), !r) return;
-    const i = j() ?? {
+  }, q = () => {
+    M(!w);
+  }, Z = (r) => {
+    if (g(u.filter((h) => !h.id || h.id !== r)), !r) return;
+    const c = z() ?? {
       closed: []
     };
-    i.closed.includes(r) || z(
-      G,
+    c.closed.includes(r) || X(
+      Y,
       JSON.stringify({
-        closed: [...i.closed, r]
+        closed: [...c.closed, r]
       })
     );
   };
-  return /* @__PURE__ */ c(J, { children: [
-    /* @__PURE__ */ e(Pe, {}),
-    /* @__PURE__ */ c("header", { className: o.header, ref: g, children: [
-      p?.map(({ id: r, content: i, variant: d, closable: l }, N) => /* @__PURE__ */ e(
-        oe,
-        {
-          id: r,
-          content: i,
-          variant: d,
-          closable: l,
-          onClose: () => K(r)
-        },
-        N
-      )),
-      /* @__PURE__ */ e("div", { className: _(o.main, o.outer), children: /* @__PURE__ */ c(D, { as: "nav", className: o.container, children: [
-        /* @__PURE__ */ e(
-          u,
+  return /* @__PURE__ */ i(oe, { children: [
+    /* @__PURE__ */ e(Ve, {}),
+    /* @__PURE__ */ i("header", { className: o.header, children: [
+      /* @__PURE__ */ i("div", { className: o.content, ref: y, children: [
+        u?.map(({ id: r, content: c, variant: h, closable: C }, Q) => /* @__PURE__ */ e(
+          le,
           {
-            as: "a",
-            className: o.skip,
-            size: 500,
-            tabIndex: "0",
-            onClick: k,
-            onKeyPress: k,
-            children: "Skip to content"
-          }
-        ),
-        /* @__PURE__ */ e(
-          s,
-          {
-            className: o.logo,
-            href: m("https://www.highcharts.com/", a),
-            children: /* @__PURE__ */ e(O, { showText: !b && !x })
-          }
-        ),
-        /* @__PURE__ */ e("ul", { className: o.links, children: A.map(({ title: r, url: i }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-          u,
-          {
-            variant: "plain",
-            size: 300,
-            as: s,
-            href: m(i, a),
-            children: r
-          }
-        ) }, d)) }),
-        /* @__PURE__ */ c("div", { className: o.buttons, children: [
-          /* @__PURE__ */ c(
-            u,
+            id: r,
+            content: c,
+            variant: h,
+            closable: C,
+            onClose: () => Z(r)
+          },
+          Q
+        )),
+        /* @__PURE__ */ e("div", { className: x(o.main, o.outer), children: /* @__PURE__ */ i(G, { as: "nav", className: o.container, children: [
+          /* @__PURE__ */ e(
+            m,
             {
-              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, {})
-              ]
+              as: "a",
+              className: o.skip,
+              size: 500,
+              tabIndex: "0",
+              onClick: v,
+              onKeyPress: v,
+              children: "Skip to content"
             }
           ),
-          /* @__PURE__ */ e(I, {}),
-          /* @__PURE__ */ e(P, {}),
           /* @__PURE__ */ e(
-            u,
+            s,
             {
-              variant: "brand",
-              as: s,
-              href: m("https://shop.highcharts.com/", a),
-              "aria-label": "Login",
-              children: /* @__PURE__ */ e(H, {})
+              className: o.logo,
+              href: d("https://www.highcharts.com/", a),
+              children: /* @__PURE__ */ e(j, { showText: !N || B && !b })
             }
           ),
-          /* @__PURE__ */ c(
-            u,
+          /* @__PURE__ */ e("ul", { className: o.links, children: K.map(({ title: r, url: c }, h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            m,
             {
-              variant: "success",
+              variant: "plain",
+              size: 300,
               as: s,
-              href: m(
-                "https://www.highcharts.com/download/",
-                a
-              ),
-              children: [
-                /* @__PURE__ */ e($, {}),
-                "Get started"
-              ]
+              href: d(c, a),
+              children: r
             }
-          ),
-          /* @__PURE__ */ c(
-            u,
-            {
-              variant: w ? "white" : "transparent",
-              className: o.menu,
-              onClick: B,
-              children: [
-                w ? "Close" : "Menu",
-                w ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ e(ce, {})
-              ]
-            }
-          )
-        ] })
-      ] }) }),
-      !!t?.length && /* @__PURE__ */ e(
-        He,
-        {
-          items: t,
-          link: s,
-          host: a,
-          pathname: y
-        }
-      ),
-      n,
-      S && /* @__PURE__ */ c(F, { children: [
+          ) }, h)) }),
+          /* @__PURE__ */ i("div", { className: o.buttons, children: [
+            /* @__PURE__ */ i(
+              m,
+              {
+                variant: "transparent",
+                as: s,
+                href: d(
+                  "https://www.highcharts.com/chat/gpt/",
+                  a
+                ),
+                children: [
+                  /* @__PURE__ */ e("span", { className: o.gpt, children: "Highcharts GPT" }),
+                  /* @__PURE__ */ e(D, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ e($, {}),
+            /* @__PURE__ */ e(R, {}),
+            /* @__PURE__ */ i(
+              m,
+              {
+                className: o.cta,
+                variant: "brand",
+                as: s,
+                href: d("https://shop.highcharts.com/", a),
+                "aria-label": "Buy Now",
+                children: [
+                  /* @__PURE__ */ e(F, {}),
+                  "Buy Now"
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              m,
+              {
+                className: o.cta,
+                variant: "success",
+                as: s,
+                href: d(
+                  "https://www.highcharts.com/download/",
+                  a
+                ),
+                children: [
+                  /* @__PURE__ */ e(V, {}),
+                  "Try for Free"
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              m,
+              {
+                variant: w ? "white" : "transparent",
+                className: o.menu,
+                onClick: q,
+                children: [
+                  w ? "Close" : "Menu",
+                  w ? /* @__PURE__ */ e(ce, {}) : /* @__PURE__ */ e(ue, {})
+                ]
+              }
+            )
+          ] })
+        ] }) }),
+        !!t?.length && /* @__PURE__ */ e(
+          Fe,
+          {
+            items: t,
+            link: s,
+            host: a,
+            pathname: S
+          }
+        ),
+        n
+      ] }),
+      B && /* @__PURE__ */ i(ne, { children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: _(o.mobileOverlay, { [o.open]: w }),
-            onClick: B
+            className: x(o.mobileOverlay, { [o.open]: w }),
+            onClick: q
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ i(
           "nav",
           {
-            className: _(o.mobile, {
+            className: x(o.mobile, {
               [o.open]: w
             }),
             children: [
-              /* @__PURE__ */ c("div", { className: o.container, children: [
+              /* @__PURE__ */ i("div", { className: o.container, children: [
                 /* @__PURE__ */ e(
                   s,
                   {
                     className: o.logo,
-                    href: m("https://www.highcharts.com/", a),
-                    children: /* @__PURE__ */ e(O, { showText: !x })
+                    href: d("https://www.highcharts.com/", a),
+                    children: /* @__PURE__ */ e(j, { showText: !b })
                   }
                 ),
-                /* @__PURE__ */ c("div", { className: o.buttons, children: [
-                  /* @__PURE__ */ c(
-                    u,
+                /* @__PURE__ */ i("div", { className: o.buttons, children: [
+                  /* @__PURE__ */ i(
+                    m,
                     {
                       variant: "transparent",
                       as: s,
-                      href: m(
+                      href: d(
                         "https://www.highcharts.com/chat/gpt/",
                         a
                       ),
                       children: [
                         /* @__PURE__ */ e("span", { className: o.gpt, children: "Highcharts GPT" }),
-                        /* @__PURE__ */ e(W, {})
+                        /* @__PURE__ */ e(D, {})
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e(I, {}),
-                  /* @__PURE__ */ e(P, {})
+                  /* @__PURE__ */ e($, {}),
+                  /* @__PURE__ */ e(R, {})
                 ] })
               ] }),
-              /* @__PURE__ */ c("div", { className: o.buttons, children: [
-                /* @__PURE__ */ c(
-                  u,
+              /* @__PURE__ */ i("div", { className: o.buttons, children: [
+                /* @__PURE__ */ i(
+                  m,
                   {
                     variant: "brand",
                     fullWidth: !0,
                     as: s,
-                    href: m("https://shop.highcharts.com/", a),
+                    href: d("https://shop.highcharts.com/", a),
                     children: [
-                      /* @__PURE__ */ e(H, {}),
-                      "Login"
+                      /* @__PURE__ */ e(F, {}),
+                      "Buy Now"
                     ]
                   }
                 ),
-                /* @__PURE__ */ c(
-                  u,
+                /* @__PURE__ */ i(
+                  m,
                   {
                     variant: "success",
                     fullWidth: !0,
                     as: s,
-                    href: m(
+                    href: d(
                       "https://www.highcharts.com/download/",
                       a
                     ),
                     children: [
-                      /* @__PURE__ */ e($, {}),
-                      "Get started"
+                      /* @__PURE__ */ e(V, {}),
+                      "Try for Free"
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ e("ul", { className: o.links, children: A.map(({ title: r, url: i, icon: d }, l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
-                u,
+              /* @__PURE__ */ e("ul", { className: o.links, children: K.map(({ title: r, url: c, icon: h }, C) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
+                m,
                 {
                   variant: "plain",
                   size: 500,
                   fullWidth: !0,
                   as: s,
-                  href: m(i, a),
+                  href: d(c, a),
                   children: [
-                    d,
+                    h,
                     r
                   ]
                 }
-              ) }, l)) })
+              ) }, C)) })
             ]
           }
         )
@@ -578,6 +606,6 @@ function Xe({
   ] });
 }
 export {
-  Xe as Header,
-  He as SubHeader
+  it as Header,
+  Fe as SubHeader
 };