highsoft-ui 1.0.11 → 1.0.13

package/dist/components/Button/index.js

@@ -1,47 +1,47 @@
 import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { c as u } from "../../clsx-OuTLNxxd.js";
-const j = "_button_57js8_293", z = "_neutral_57js8_335", f = "_white_57js8_359", p = "_transparent_57js8_383", b = "_plain_57js8_407", d = "_brand_57js8_431", m = "_success_57js8_455", w = "_attention_57js8_479", g = "_danger_57js8_503", h = "_full_57js8_629", s = {
-  button: j,
+import { forwardRef as w } from "react";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+const u = "_button_1we8s_285", z = "_neutral_1we8s_327", f = "_white_1we8s_351", p = "_transparent_1we8s_375", b = "_plain_1we8s_399", d = "_brand_1we8s_423", m = "_success_1we8s_447", g = "_attention_1we8s_471", h = "_danger_1we8s_495", x = "_full_1we8s_621", s = {
+  button: u,
   neutral: z,
   white: f,
   transparent: p,
   plain: b,
   brand: d,
   success: m,
-  attention: w,
-  danger: g,
-  "size-50": "_size-50_57js8_527",
-  "size-100": "_size-100_57js8_544",
-  "size-200": "_size-200_57js8_561",
-  "size-300": "_size-300_57js8_578",
-  "size-400": "_size-400_57js8_595",
-  "size-500": "_size-500_57js8_612",
-  full: h
-}, N = l(
+  attention: g,
+  danger: h,
+  "size-50": "_size-50_1we8s_519",
+  "size-100": "_size-100_1we8s_536",
+  "size-200": "_size-200_1we8s_553",
+  "size-300": "_size-300_1we8s_570",
+  "size-400": "_size-400_1we8s_587",
+  "size-500": "_size-500_1we8s_604",
+  full: x
+}, N = w(
   ({
-    children: t,
-    variant: _ = "neutral",
-    size: n = 200,
-    fullWidth: e = !1,
+    children: e,
+    variant: t = "neutral",
+    size: _ = 200,
+    fullWidth: n = !1,
     as: o = "button",
     className: a,
     ...r
   }, i) => /* @__PURE__ */ c(
     o,
     {
-      className: u(
+      className: l(
         a,
         s.button,
-        s[_],
-        s[`size-${n}`],
+        s[t],
+        s[`size-${_}`],
         {
-          [s.full]: e
+          [s.full]: n
         }
       ),
       ref: i,
       ...r,
-      children: t
+      children: e
     }
   )
 );

package/dist/components/GPTInput/index.js

@@ -1,9 +1,9 @@
 import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { useRef as y, useState as g, useLayoutEffect as b } from "react";
-import { c as f } from "../../clsx-OuTLNxxd.js";
-import x from "../icons/Bubble.js";
+import { useRef as y, useState as b, useLayoutEffect as x } from "react";
+import { c as h } from "../../clsx-OuTLNxxd.js";
+import g from "../icons/Bubble.js";
 import C from "../icons/Plane.js";
-const v = "_inputContainer_1hfog_293", S = "_bottomFade_1hfog_296", K = "_inputWrap_1hfog_299", P = "_textarea_1hfog_302", N = "_button_1hfog_368", W = "_primary_1hfog_403", k = "_secondary_1hfog_412", D = "_disclaimer_1hfog_418", o = {
+const v = "_inputContainer_h08to_285", S = "_bottomFade_h08to_288", K = "_inputWrap_h08to_291", P = "_textarea_h08to_294", N = "_button_h08to_360", W = "_primary_h08to_395", k = "_secondary_h08to_404", D = "_disclaimer_h08to_410", o = {
   inputContainer: v,
   bottomFade: S,
   inputWrap: K,
@@ -22,7 +22,7 @@ function F({
   return /* @__PURE__ */ n(
     "button",
     {
-      className: f(o.button, o[r], s),
+      className: h(o.button, o[r], s),
       ...a,
       children: /* @__PURE__ */ n("span", { children: e })
     }
@@ -32,46 +32,46 @@ function I({
   autoFocus: r,
   onSubmit: s
 }) {
-  const e = y(null), [a, i] = g(""), c = a.trim(), u = !!c;
-  b(() => {
+  const e = y(null), [a, i] = b(""), c = a.trim(), u = !!c;
+  x(() => {
     var t;
     r && ((t = e.current) == null || t.focus());
   }, [r]);
   const p = () => {
     const t = e.current;
     t && (t.style.height = "64px", t.style.height = `${t.scrollHeight + 4}px`);
-  }, h = (t) => {
+  }, _ = (t) => {
     i(t.target.value), p();
   }, m = (t) => {
     t.preventDefault(), s(c), i(""), requestAnimationFrame(p);
-  }, _ = (t) => {
+  }, d = (t) => {
     t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && m(t);
-  }, d = () => {
+  }, f = () => {
     var t;
     (t = e.current) == null || t.focus();
   };
   return /* @__PURE__ */ l(
     "form",
     {
-      className: f(o.inputWrap, { [o.active]: u }),
-      onKeyDown: _,
+      className: h(o.inputWrap, { [o.active]: u }),
+      onKeyDown: d,
       onSubmit: m,
       children: [
-        /* @__PURE__ */ n(x, {}),
+        /* @__PURE__ */ n(g, {}),
         /* @__PURE__ */ n(
           "textarea",
           {
             className: o.textarea,
             ref: e,
             value: a,
-            onChange: h
+            onChange: _
           }
         ),
         /* @__PURE__ */ l(
           F,
           {
             variant: u ? "primary" : "secondary",
-            onClick: d,
+            onClick: f,
             children: [
               /* @__PURE__ */ n(C, {}),
               /* @__PURE__ */ n("span", { className: "sr-only", children: "Send message" })

package/dist/components/Header/index.d.ts

@@ -11,16 +11,17 @@ export interface SubHeaderItem {
 export declare function SubHeader({ items }: {
     items: Array<SubHeaderItem>;
 }): import("react/jsx-runtime").JSX.Element;
+export interface Notification {
+    id?: string;
+    title?: string;
+    description?: string;
+    variant?: NotificationVariant;
+    closable?: boolean;
+}
 export declare function Header({ subItems, children, notifications: initialNotifications, // TODO: Fetch these from the internets
 link: Link }: {
     subItems?: Array<SubHeaderItem>;
     children?: ReactNode;
-    notifications?: Array<{
-        id?: string;
-        title?: string;
-        description?: string;
-        variant?: NotificationVariant;
-        closable?: boolean;
-    }>;
+    notifications?: Array<Notification>;
     link?: ElementType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/index.js

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as o, Fragment as P } from "react/jsx-runtime";
-import { useState as x, useEffect as V } from "react";
+import { useState as b, useEffect as V } from "react";
 import { J as q } from "../../index-CMegByeX.js";
 import { _ as h } from "../../extends-hS2Bh-Yp.js";
-import { N as z, X as J } from "../../index-CYCXI8lK.js";
-import { c as p } from "../../clsx-OuTLNxxd.js";
+import { N as z, X as J } from "../../index-CcO3hfIY.js";
+import { c as m } from "../../clsx-OuTLNxxd.js";
 import { Button as c } from "../Button/index.js";
 import { Container as H } from "../Container/index.js";
-import { ThemedLogo as b } from "../Logo/index.js";
+import { ThemedLogo as x } from "../Logo/index.js";
 import { PrefPanel as M } from "../PrefPanel/index.js";
 import { useMediaQuery as k } from "../../utils.js";
 var U = function(t) {
@@ -137,7 +137,7 @@ var U = function(t) {
       d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
     })
   }));
-}, L = function(t) {
+}, S = function(t) {
   return /* @__PURE__ */ e("svg", h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -153,7 +153,7 @@ var U = function(t) {
       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"
     })
   }));
-}, S = function(t) {
+}, L = function(t) {
   return /* @__PURE__ */ e("svg", h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -186,7 +186,7 @@ var U = function(t) {
     })
   }));
 };
-const D = "_header_1ar49_293", E = "_outer_1ar49_304", R = "_main_1ar49_313", I = "_container_1ar49_317", K = "_links_1ar49_323", Y = "_buttons_1ar49_324", Z = "_menu_1ar49_332", e1 = "_logo_1ar49_337", t1 = "_subContainer_1ar49_349", r1 = "_selected_1ar49_377", n1 = "_subTag_1ar49_389", o1 = "_mobileOverlay_1ar49_407", s1 = "_show_1ar49_1", a1 = "_open_1ar49_419", i1 = "_mobile_1ar49_407", c1 = "_slideUp_1ar49_1", h1 = "_sub_1ar49_349", l1 = "_gpt_1ar49_485", r = {
+const D = "_header_ap7gr_285", E = "_outer_ap7gr_296", R = "_main_ap7gr_305", I = "_container_ap7gr_309", K = "_links_ap7gr_315", Y = "_buttons_ap7gr_316", Z = "_menu_ap7gr_324", e1 = "_logo_ap7gr_329", t1 = "_subContainer_ap7gr_341", r1 = "_selected_ap7gr_369", n1 = "_subTag_ap7gr_381", o1 = "_mobileOverlay_ap7gr_399", s1 = "_show_ap7gr_1", a1 = "_open_ap7gr_411", i1 = "_mobile_ap7gr_399", c1 = "_slideUp_ap7gr_1", h1 = "_sub_ap7gr_341", l1 = "_gpt_ap7gr_477", r = {
   header: D,
   outer: E,
   main: R,
@@ -198,8 +198,8 @@ const D = "_header_1ar49_293", E = "_outer_1ar49_304", R = "_main_1ar49_313", I
   subContainer: t1,
   selected: r1,
   subTag: n1,
-  "subTag-success": "_subTag-success_1ar49_394",
-  "subTag-brand": "_subTag-brand_1ar49_398",
+  "subTag-success": "_subTag-success_ap7gr_386",
+  "subTag-brand": "_subTag-brand_ap7gr_390",
   mobileOverlay: o1,
   show: s1,
   open: a1,
@@ -240,33 +240,33 @@ const D = "_header_1ar49_293", E = "_outer_1ar49_304", R = "_main_1ar49_313", I
   }
 ];
 function d1({ items: n }) {
-  return /* @__PURE__ */ e("div", { className: p(r.sub, r.outer), children: /* @__PURE__ */ e(H, { className: r.subContainer, as: "ul", children: n.map(
-    ({ title: t, url: u, icon: i, tag: m, tagVariant: g = "success", link: v = "a" }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(v, { href: u, children: [
+  return /* @__PURE__ */ e("div", { className: m(r.sub, r.outer), children: /* @__PURE__ */ e(H, { className: r.subContainer, as: "ul", children: n.map(
+    ({ title: t, url: u, icon: i, tag: p, tagVariant: w = "success", link: v = "a" }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(v, { href: u, children: [
       i,
       /* @__PURE__ */ o("span", { children: [
         t,
-        m && /* @__PURE__ */ e(
+        p && /* @__PURE__ */ e(
           "span",
           {
-            className: p(
+            className: m(
               r.subTag,
-              r[`subTag-${g}`]
+              r[`subTag-${w}`]
             ),
-            children: m
+            children: p
           }
         )
       ] })
     ] }) }, d)
   ) }) });
 }
-function b1({
+function x1({
   subItems: n,
   children: t,
   notifications: u = [],
   // TODO: Fetch these from the internets
   link: i = "a"
 }) {
-  const m = k("(max-width: 374px)"), g = k("(max-width: 849px)"), v = k("(min-width: 850px) and (max-width: 999px)"), [d, W] = x(!1), [w, f] = x([]);
+  const p = k("(max-width: 374px)"), w = k("(max-width: 849px)"), v = k("(min-width: 850px) and (max-width: 999px)"), [d, W] = b(!1), [g, f] = b([]);
   V(() => {
     if (u.length) {
       const a = localStorage.getItem("notifications");
@@ -284,7 +284,7 @@ function b1({
   const C = () => {
     W(!d);
   }, j = (a) => {
-    f(w.filter((s) => !s.id || s.id !== a));
+    f(g.filter((s) => !s.id || s.id !== a));
     const l = localStorage.getItem("notifications");
     if (l) {
       const s = JSON.parse(l);
@@ -298,7 +298,7 @@ function b1({
       );
   };
   return /* @__PURE__ */ e(q, { children: /* @__PURE__ */ o("header", { className: r.header, children: [
-    w == null ? void 0 : w.map(
+    g == null ? void 0 : g.map(
       ({ id: a, title: l, description: s, variant: _, closable: O }, y) => /* @__PURE__ */ e(
         z,
         {
@@ -311,19 +311,9 @@ function b1({
         y
       )
     ),
-    /* @__PURE__ */ e("div", { className: p(r.main, r.outer), children: /* @__PURE__ */ o(H, { as: "nav", className: r.container, children: [
-      /* @__PURE__ */ e(i, { className: r.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ e(b, { showText: !v && !m }) }),
-      /* @__PURE__ */ e("ul", { className: r.links, children: B.map(({ title: a, url: l }, s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        c,
-        {
-          variant: "plain",
-          size: 300,
-          as: i,
-          href: l,
-          children: a
-        },
-        s
-      ) })) }),
+    /* @__PURE__ */ e("div", { className: m(r.main, r.outer), children: /* @__PURE__ */ o(H, { as: "nav", className: r.container, children: [
+      /* @__PURE__ */ e(i, { className: r.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ e(x, { showText: !v && !p }) }),
+      /* @__PURE__ */ e("ul", { className: r.links, children: B.map(({ title: a, url: l }, s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(c, { variant: "plain", size: 300, as: i, href: l, children: a }) }, s)) }),
       /* @__PURE__ */ o("div", { className: r.buttons, children: [
         /* @__PURE__ */ o(
           c,
@@ -333,11 +323,11 @@ function b1({
             href: "https://www.highcharts.com/chat/gpt/",
             children: [
               /* @__PURE__ */ e("span", { className: r.gpt, children: "Highcharts GPT" }),
-              /* @__PURE__ */ e(L, {})
+              /* @__PURE__ */ e(S, {})
             ]
           }
         ),
-        /* @__PURE__ */ e(c, { variant: "transparent", children: /* @__PURE__ */ e(N, {}) }),
+        /* @__PURE__ */ e(c, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(N, {}) }),
         /* @__PURE__ */ e(M, {}),
         /* @__PURE__ */ e(
           c,
@@ -345,6 +335,7 @@ function b1({
             variant: "brand",
             as: i,
             href: "https://shop.highcharts.com/account",
+            "aria-label": "Login",
             children: /* @__PURE__ */ e(T, {})
           }
         ),
@@ -355,7 +346,7 @@ function b1({
             as: i,
             href: "https://www.highcharts.com/download/",
             children: [
-              /* @__PURE__ */ e(S, {}),
+              /* @__PURE__ */ e(L, {}),
               "Get started"
             ]
           }
@@ -376,18 +367,18 @@ function b1({
     ] }) }),
     !!(n != null && n.length) && /* @__PURE__ */ e(d1, { items: n }),
     t,
-    g && /* @__PURE__ */ o(P, { children: [
+    w && /* @__PURE__ */ o(P, { children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: p(r.mobileOverlay, { [r.open]: d }),
+          className: m(r.mobileOverlay, { [r.open]: d }),
           onClick: C
         }
       ),
       /* @__PURE__ */ o(
         "nav",
         {
-          className: p(r.mobile, {
+          className: m(r.mobile, {
             [r.open]: d
           }),
           children: [
@@ -397,7 +388,7 @@ function b1({
                 {
                   className: r.logo,
                   href: "https://www.highcharts.com/",
-                  children: /* @__PURE__ */ e(b, { showText: !m })
+                  children: /* @__PURE__ */ e(x, { showText: !p })
                 }
               ),
               /* @__PURE__ */ o("div", { className: r.buttons, children: [
@@ -409,11 +400,11 @@ function b1({
                     href: "https://www.highcharts.com/chat/gpt/",
                     children: [
                       /* @__PURE__ */ e("span", { className: r.gpt, children: "Highcharts GPT" }),
-                      /* @__PURE__ */ e(L, {})
+                      /* @__PURE__ */ e(S, {})
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(c, { variant: "transparent", children: /* @__PURE__ */ e(N, {}) }),
+                /* @__PURE__ */ e(c, { variant: "transparent", "aria-label": "Search", children: /* @__PURE__ */ e(N, {}) }),
                 /* @__PURE__ */ e(M, {})
               ] })
             ] }),
@@ -439,7 +430,7 @@ function b1({
                   as: i,
                   href: "https://www.highcharts.com/download/",
                   children: [
-                    /* @__PURE__ */ e(S, {}),
+                    /* @__PURE__ */ e(L, {}),
                     "Get started"
                   ]
                 }
@@ -457,9 +448,8 @@ function b1({
                   s,
                   a
                 ]
-              },
-              _
-            ) })) })
+              }
+            ) }, _)) })
           ]
         }
       )
@@ -467,6 +457,6 @@ function b1({
   ] }) });
 }
 export {
-  b1 as Header,
+  x1 as Header,
   d1 as SubHeader
 };

package/dist/components/Logo/index.js

@@ -1,7 +1,7 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { z as h } from "../../index-CMegByeX.js";
-import { useState as d, useEffect as n } from "react";
-function p({
+import { useMounted as d } from "../../utils.js";
+function n({
   title: s = "Highcharts",
   light: l,
   showText: o = !0,
@@ -246,13 +246,11 @@ function p({
   );
   return e ? /* @__PURE__ */ t("a", { href: "https://www.highcharts.com", children: r }) : r;
 }
-function v(s) {
-  const { resolvedTheme: l } = h(), [o, e] = d(!1);
-  return n(() => {
-    e(!0);
-  }, []), /* @__PURE__ */ t(p, { light: !o || l === "light", ...s });
+function a(s) {
+  const { resolvedTheme: l } = h(), o = d();
+  return /* @__PURE__ */ t(n, { light: !o || l === "light", ...s });
 }
 export {
-  p as Logo,
-  v as ThemedLogo
+  n as Logo,
+  a as ThemedLogo
 };

package/dist/components/Notification/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { N as f } from "../../index-CYCXI8lK.js";
+import { N as f } from "../../index-CcO3hfIY.js";
 import "../../clsx-OuTLNxxd.js";
 import "../Button/index.js";
 import "../Container/index.js";