highsoft-ui 1.0.154 → 1.0.156

package/CLAUDE.md

@@ -239,6 +239,29 @@ The `.tsx` icons are **generated** — edit the Figma exports in `lib/components
 - **Keyboard/focus:** the icon is a non-interactive `<span>` — it takes no focus and adds nothing to the tab order. `box` is purely presentational; focus styling belongs to the interactive ancestor.
 - **Reduced motion:** under `prefers-reduced-motion: reduce` the `box` tile drops the hover lift — the `translateY` is cancelled and the transition removed — while the `box-shadow` step stays, so the affordance survives as an instant depth change rather than a movement. The outer shell keeps its `background-color` fade: that's a colour change, not motion.
 
+### ProductIcon
+Highcharts product and feature icons in four themes.
+```tsx
+<ProductIcon icon="core" size={32} />                        // full color (multi)
+<ProductIcon icon="orbit" theme="monochrome" size={24} />    // brand duotone
+<ProductIcon icon="grid" theme="line" size={24} />           // single-line art
+<ProductIcon icon="stock" theme="grayscale" size={24} />     // neutral tones
+<ProductIcon icon="core" size={32} box />                    // layered box tile
+```
+- **`icon`:** products `core`, `stock`, `maps`, `gantt`, `dashboards`, `grid`, `orbit`; plus feature/resource names like `demos`, `docs`, `API`, `changelog`, `roadmap`, `gpt`, `editor`, `export server`, `python`, `lab`, `support`, `custom projects`, `case studies`, `chart chooser`, `hca`, `a11y`, `edu license`, `license`, `ADV+`
+- **`theme`:** `multi` (default, full color) | `monochrome` (brand duotone) | `grayscale` (neutral tones) | `line` (single-line art)
+- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72`
+- **`box`:** wraps the icon in a shell + inner tile with a hover lift; the shell background reads `--hsui-icon-box-bg` so a parent can retint it without a prop
+
+**Every fill must be an `--icon-*` CSS variable, never a hex color** — `--icon-multicolor-*` (multi), `--icon-duotone-*` (monochrome), `--icon-monotone-mono-key-*` (grayscale), `--icon-single-line-color` (line), defined in `lib/scss/variables.scss` with a dark-mode remap. A hardcoded hex renders identically in both modes and breaks dark mode. Figma sometimes exports flattened hexes — swap them for the matching variable in the source SVG before generating.
+
+The `.tsx` icons are **generated** — put Figma exports in `lib/components/ProductIcon/svg-export/` (`theme=<theme>, icon=<name>, alt bg=false.svg`; sources need a `viewBox` or the icon won't scale), add the name to the map in `scripts/convert-product-icons.cjs`, then run `npm run icons` and `npm run prettier`. Hand-editing a component under `icons/` is silently reverted on the next regeneration. New names also go in the `ProductIconName` type + `iconComponentMap` in `lib/components/ProductIcon/index.tsx`.
+
+**Accessibility:**
+- Icons are **decorative by default** — an inline `<svg>` with no `<title>` and no accessible name, so they add no noise to the AT tree. When an icon is the *only* content of a control, name it at the call site: `role="img"` + `aria-label` (props spread onto the `<svg>`), or label the wrapping control.
+- **Keyboard/focus:** the icon is a non-interactive `<span>` — no focus, nothing in the tab order. `box` is presentational; focus styling belongs to the interactive ancestor.
+- **Reduced motion:** under `prefers-reduced-motion: reduce` the `box` tile drops the hover lift but keeps the `box-shadow` step (instant depth change instead of movement); the shell keeps its `background-color` fade — a colour change, not motion.
+
 ### InputSolo
 Standalone, self-bordered text field with a floating label, help text, and error/success states.
 ```tsx
@@ -335,6 +358,41 @@ const a = 2   // [!code ++]`} />
 - **`copyLabel`:** copy button label (default `'Copy code'`).
 - Colors come from `--code-block-*` design tokens (light/dark automatic). Code renders in IBM Plex Mono — load `@fontsource/ibm-plex-mono` (or it falls back to the system monospace).
 
+### BrowserFrame
+Browser-window chrome around embedded content — a real `<iframe>` via `src`, or any children (a live demo, plain markup). Three bar variants share one shell.
+```tsx
+// Full: traffic lights, URL pill, View button opening href in a new tab
+<BrowserFrame src="https://www.highcharts.com/samples/nonav/highcharts/website/homepage-defaults-demo"
+  displayUrl="https://www.highcharts.com/demo" title="Smart defaults demo" />
+
+// Fullscreen action instead of View
+<BrowserFrame src={url} action="fullscreen" title="…" />
+
+// Mini: muted dots, centered explainer, external-link buttons
+<BrowserFrame variant="mini" src={url} title="…"
+  explainer="World map with drilldown" explainerHref={demoUrl}
+  actions={[{ label: 'JSFiddle', href: fiddleUrl }, { label: 'CodePen', href: penUrl }]} />
+
+// Plain chrome around children at their natural height
+<BrowserFrame variant="plain" aspectRatio="auto">
+  <LiveChartDemo />
+</BrowserFrame>
+```
+- **`variant`:** `full` (URL pill + action button, default) | `mini` (explainer line) | `plain` (dots only)
+- **`src`:** embeds a real `<iframe>` (lazy-loaded; `sandbox`, `allow`, `allowFullScreen`, `referrerPolicy`, `loading` forwarded). **`children`** renders instead of an iframe. **`title`** is required with `src` — it names the iframe for AT.
+- **`displayUrl`** — address shown in the pill (defaults to `src`); **`href`** — link target for the URL text and View button (defaults to `displayUrl`/`src`)
+- **`action`:** `view` (default) | `fullscreen` | `none`. Fullscreen uses the Fullscreen API on the frame and falls back to opening `href` in a new tab when the API is missing (iOS Safari) or rejects (embedding page without `allowfullscreen`).
+- **`explainer`** / **`explainerHref`** (mini), **`actions`** — external-link soft buttons
+- **`dots`:** `color` | `muted` — defaults per variant (colored traffic lights on `full`, muted on `mini`/`plain`); override to force either
+- **`aspectRatio`** (default `'3 / 2'`, `'auto'` = children flow naturally), **`width`**, **`height`** (fixed height overrides `aspectRatio`), **`radius`** (default `8`)
+- **Bar geometry:** the bar is 40px (`plain` 34px) — 8px padding around 24px controls (size-100 `Button`s and the URL pill). Dots are 11px (`plain` 10px).
+- **Theming:** the shell uses `--HS-*` tokens, so dark mode is automatic. The colored dots are the one sanctioned primitive use (`--primitives-danger/attention/success-400`) — decorative window realism with no semantic token, identical in both modes like macOS's own. **The site theme propagates into cross-origin embeds:** `[data-theme]` on the root maps to `color-scheme` on the iframe element, which is what `prefers-color-scheme` resolves from inside a frame — an embed that supports dark mode flips with the site, no JS involved. The default (no `data-theme`) is `light`, matching the tokens' own light-by-default behavior — the embed follows the chrome around it, never the OS directly. `ThemeLoader` resolves even the "system" preference to a concrete `data-theme`, so themed pages always drive it explicitly; nested `[data-theme='light']` sections inside a dark page are honored like the tokens honor them.
+
+**Accessibility:**
+- The window dots are decorative (`aria-hidden`); the embedded `<iframe>` carries `title` as its accessible name — describe what it shows.
+- The URL text, explainer, and action buttons are real links/`Button`s: keyboard reachable, brand `:focus-visible` ring, `target="_blank"` with `rel="noreferrer"`. The Fullscreen button's label switches to "Exit fullscreen" while active.
+- The frame itself is a non-interactive `<div>` — nothing in the tab order beyond its controls; no authored motion, so there's nothing to gate on `prefers-reduced-motion` beyond the shared Button tokens.
+
 ### Layout
 ```tsx
 <Header />

package/dist/BrowserFrame-z7X66igu.js

@@ -0,0 +1,133 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { D as t, F as n, I as r, U as i } from "./esm-bFdwg2E8.js";
+import { t as a } from "./Button-CSYKfiMM.js";
+import { forwardRef as o, useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var p = {
+	actions: "VfGqmW_actions",
+	body: "VfGqmW_body",
+	bodyAspect: "VfGqmW_bodyAspect",
+	bodyFill: "VfGqmW_bodyFill",
+	content: "VfGqmW_content",
+	dot: "VfGqmW_dot",
+	dots: "VfGqmW_dots",
+	dotsColor: "VfGqmW_dotsColor",
+	explainer: "VfGqmW_explainer",
+	frame: "VfGqmW_frame",
+	iframe: "VfGqmW_iframe",
+	mini: "VfGqmW_mini",
+	plain: "VfGqmW_plain",
+	topBar: "VfGqmW_topBar",
+	url: "VfGqmW_url",
+	urlBar: "VfGqmW_urlBar"
+}, m = o(({ variant: o = "full", src: m, displayUrl: h, href: g, action: _ = "view", actionLabel: v, explainer: y, explainerHref: b, actions: x, dots: S, aspectRatio: C = "3 / 2", width: w, height: T, radius: E = 8, title: D, loading: O = "lazy", sandbox: k, allow: A, allowFullScreen: j = !0, referrerPolicy: M, children: N, className: P, style: F, ...I }, L) => {
+	let R = l(null), [z, B] = u(!1), V = s((e) => {
+		R.current = e, typeof L == "function" ? L(e) : L && (L.current = e);
+	}, [L]);
+	c(() => {
+		let e = () => B(document.fullscreenElement === R.current);
+		return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+	}, []), m && !D && console.warn("BrowserFrame: `title` is required with `src` — it names the iframe for assistive tech. Falling back to \"Embedded content\".");
+	let H = h ?? m, U = g ?? H, W = S ?? (o === "full" ? "color" : "muted"), G = T === void 0 && C !== "auto", K = s(() => {
+		let e = R.current;
+		if (!e) return;
+		let t = () => {
+			U && window.open(U, "_blank", "noopener,noreferrer");
+		};
+		document.fullscreenElement === e ? document.exitFullscreen().catch(() => {}) : e.requestFullscreen ? e.requestFullscreen().catch(t) : t();
+	}, [U]), q = o === "full" && _ !== "none" ? _ === "fullscreen" ? /* @__PURE__ */ d(a, {
+		variant: "soft",
+		size: 100,
+		iconRight: d(z ? t : i, {}),
+		onClick: K,
+		children: v ?? (z ? "Exit fullscreen" : "Fullscreen")
+	}) : U ? /* @__PURE__ */ d(a, {
+		variant: "soft",
+		size: 100,
+		iconRight: /* @__PURE__ */ d(r, {}),
+		href: U,
+		target: "_blank",
+		rel: "noreferrer",
+		children: v ?? "View"
+	}) : null : null, J = o === "mini" && y ? b ? /* @__PURE__ */ d("a", {
+		className: p.explainer,
+		href: b,
+		target: "_blank",
+		rel: "noreferrer",
+		children: y
+	}) : /* @__PURE__ */ d("span", {
+		className: p.explainer,
+		children: y
+	}) : null;
+	return /* @__PURE__ */ f("div", {
+		ref: V,
+		className: e(p.frame, o === "plain" && p.plain, o === "mini" && p.mini, P),
+		style: {
+			"--hsbf-radius": `${E}px`,
+			"--hsbf-aspect": G ? C : void 0,
+			width: w,
+			height: T,
+			...F
+		},
+		...I,
+		children: [/* @__PURE__ */ f("div", {
+			className: p.topBar,
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: e(p.dots, W === "color" && p.dotsColor),
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ d("span", { className: p.dot }),
+						/* @__PURE__ */ d("span", { className: p.dot }),
+						/* @__PURE__ */ d("span", { className: p.dot })
+					]
+				}),
+				o === "full" && H && /* @__PURE__ */ d("span", {
+					className: p.urlBar,
+					children: U ? /* @__PURE__ */ d("a", {
+						className: p.url,
+						href: U,
+						target: "_blank",
+						rel: "noreferrer",
+						children: H
+					}) : /* @__PURE__ */ d("span", {
+						className: p.url,
+						children: H
+					})
+				}),
+				q,
+				J,
+				x && x.length > 0 && /* @__PURE__ */ d("span", {
+					className: p.actions,
+					children: x.map((e) => /* @__PURE__ */ d(a, {
+						variant: "soft",
+						size: 100,
+						iconRight: /* @__PURE__ */ d(n, {}),
+						href: e.href,
+						target: "_blank",
+						rel: "noreferrer",
+						children: e.label
+					}, `${e.label}-${e.href}`))
+				})
+			]
+		}), /* @__PURE__ */ f("div", {
+			className: e(p.body, G && p.bodyAspect, (G || T !== void 0) && p.bodyFill),
+			children: [m && !N && /* @__PURE__ */ d("iframe", {
+				className: p.iframe,
+				src: m,
+				title: D ?? "Embedded content",
+				loading: O,
+				sandbox: k,
+				allow: A,
+				allowFullScreen: j,
+				referrerPolicy: M
+			}), N && /* @__PURE__ */ d("div", {
+				className: p.content,
+				children: N
+			})]
+		})]
+	});
+});
+m.displayName = "BrowserFrame";
+//#endregion
+export { m as t };

package/dist/{Button-DSGsV45k.js → Button-CSYKfiMM.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { N as t } from "./esm-C4Ybr9s4.js";
+import { N as t } from "./esm-bFdwg2E8.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {

package/dist/{ButtonGroup-DNTpDU-E.js → ButtonGroup-CRCpF1mq.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-DSGsV45k.js";
+import { t } from "./Button-CSYKfiMM.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {

package/dist/{Checkbox-imALf2_N.js → Checkbox-Ve_qaCW-.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { M as t } from "./esm-C4Ybr9s4.js";
+import { M as t } from "./esm-bFdwg2E8.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = {

package/dist/{CodeBlock-7BTXXf30.js → CodeBlock-D5HGMQXp.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { U as r, Y as i } from "./esm-C4Ybr9s4.js";
-import { t as a } from "./Button-DSGsV45k.js";
+import { G as r, Z as i } from "./esm-bFdwg2E8.js";
+import { t as a } from "./Button-CSYKfiMM.js";
 import { t as o } from "./FrameworkIcon-D7N3PjYr.js";
 import { Fragment as s, forwardRef as c, useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ var h = {
 }, g = null;
 function _() {
 	return g ||= Promise.all([
-		import("./prism-light-BLaY8zo6.js"),
-		import("./create-element-C3ORyDVw.js").then((e) => e.n),
+		import("./prism-light-BTlrcsMq.js"),
+		import("./create-element-E8WYUYfK.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),

package/dist/{CookiePolicyModal-DulwuSp4.js → CookiePolicyModal-Jajmg0gS.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-C4Ybr9s4.js";
-import { t } from "./Button-DSGsV45k.js";
+import { t as e } from "./esm-bFdwg2E8.js";
+import { t } from "./Button-CSYKfiMM.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-f0z6DapB.js";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/dist/{CopyCode-PbZbRLn-.js → CopyCode-B5XYKD2s.js}

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { U as r, Y as i } from "./esm-C4Ybr9s4.js";
-import { t as a } from "./Button-DSGsV45k.js";
+import { G as r, Z as i } from "./esm-bFdwg2E8.js";
+import { t as a } from "./Button-CSYKfiMM.js";
 import { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {

package/dist/{Dropdown-c_EhnzqC.js → Dropdown-C7cw9SiY.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { Y as t } from "./esm-C4Ybr9s4.js";
+import { Z as t } from "./esm-bFdwg2E8.js";
 import { t as n } from "./Icon-VeXJMj8Q.js";
 import { _ as r, a as i, c as a, d as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, t as g, u as _, v, y } from "./es2015-DWa0ZZ7A.js";
 import { a as ee, i as b, n as te, r as x, t as S } from "./dist-CE9LFbij.js";

package/dist/{Footer-C6a3PeJq.js → Footer-Bjccchkp.js}

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { W as t, Y as n } from "./esm-C4Ybr9s4.js";
-import { t as r } from "./Button-DSGsV45k.js";
+import { K as t, Z as n } from "./esm-bFdwg2E8.js";
+import { t as r } from "./Button-CSYKfiMM.js";
 import { t as i } from "./Container-BDssaLig.js";
 import { t as a } from "./DiscordInvite-CLYxexdH.js";
 import { t as o } from "./Logo-Bz0G2G-k.js";
-import { t as s } from "./NewsletterSignup-mPKBEpYq.js";
-import { t as c } from "./FooterBottom-DADUJdzz.js";
-import { t as l } from "./FooterHelp-DN7Mdy40.js";
-import { t as u } from "./FooterLinks-rrtsCIdv.js";
-import { t as d } from "./YoutubeModal-DqBis8Cm.js";
+import { t as s } from "./NewsletterSignup-BwSHFFxv.js";
+import { t as c } from "./FooterBottom-B4_6jDJ2.js";
+import { t as l } from "./FooterHelp-BODC1jYl.js";
+import { t as u } from "./FooterLinks-0FQT6GGH.js";
+import { t as d } from "./YoutubeModal-B-D2bQLx.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",

package/dist/{FooterBottom-DADUJdzz.js → FooterBottom-B4_6jDJ2.js}

@@ -1,7 +1,7 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
 import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./fa-B95RwBpz.js";
 import { t as u } from "./Typography-AvvBRu-u.js";
-import { t as d } from "./CookiePolicyModal-DulwuSp4.js";
+import { t as d } from "./CookiePolicyModal-Jajmg0gS.js";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region node_modules/react-icons/fa6/index.mjs
 function h(e) {

package/dist/{FooterHelp-DN7Mdy40.js → FooterHelp-BODC1jYl.js}

@@ -1,5 +1,5 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
-import { d as n, g as r } from "./esm-C4Ybr9s4.js";
+import { d as n, g as r } from "./esm-bFdwg2E8.js";
 import { t as i } from "./Icon-VeXJMj8Q.js";
 import { o as a, r as o } from "./fa-B95RwBpz.js";
 import { t as s } from "./Typography-AvvBRu-u.js";

package/dist/{FooterLinks-rrtsCIdv.js → FooterLinks-0FQT6GGH.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { P as t } from "./esm-C4Ybr9s4.js";
+import { P as t } from "./esm-bFdwg2E8.js";
 import { t as n } from "./Icon-VeXJMj8Q.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
-import { t as i } from "./Label-BhFeSC8Z.js";
+import { t as i } from "./Label-arNNMKJi.js";
 import a from "./components/icons/MadeInNorway.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {

package/dist/{Header-BokKjfF7.js → Header-BIEG3fWi.js}

@@ -1,13 +1,13 @@
 import { a as e, d as t, i as n, o as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./clsx-BWCAbrjV.js";
-import { O as o, Q as s, R as c, X as l, b as u, f as d, k as f, p, s as m, t as h, tt as g } from "./esm-C4Ybr9s4.js";
-import { t as _ } from "./Button-DSGsV45k.js";
+import { O as o, Q as s, b as c, et as l, f as u, k as d, p as f, rt as p, s as m, t as h, z as g } from "./esm-bFdwg2E8.js";
+import { t as _ } from "./Button-CSYKfiMM.js";
 import { t as v } from "./Container-BDssaLig.js";
 import { t as y } from "./Logo-Bz0G2G-k.js";
-import { t as b } from "./PrefPanel-DxSIkYDF.js";
-import { t as x } from "./Search-Cc9ZJgGx.js";
-import { t as S } from "./Label-BhFeSC8Z.js";
-import { t as C } from "./Notification-JovL5anc.js";
+import { t as b } from "./PrefPanel-DHotymro.js";
+import { t as x } from "./Search-Dd2PjPua.js";
+import { t as S } from "./Label-arNNMKJi.js";
+import { t as C } from "./Notification-Coii3TQE.js";
 import { useEffect as w, useRef as T, useState as E } from "react";
 import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
 var A = {
@@ -75,12 +75,12 @@ var A = {
 	{
 		title: "Products",
 		url: "https://www.highcharts.com/products/",
-		icon: /* @__PURE__ */ O(l, {})
+		icon: /* @__PURE__ */ O(s, {})
 	},
 	{
 		title: "Demos",
 		url: "https://www.highcharts.com/demo",
-		icon: /* @__PURE__ */ O(u, {})
+		icon: /* @__PURE__ */ O(c, {})
 	},
 	{
 		title: "Support",
@@ -90,17 +90,17 @@ var A = {
 	{
 		title: "Resources",
 		url: "https://www.highcharts.com/resources/",
-		icon: /* @__PURE__ */ O(c, {})
+		icon: /* @__PURE__ */ O(g, {})
 	},
 	{
 		title: "Pricing",
 		url: "https://shop.highcharts.com/",
-		icon: /* @__PURE__ */ O(s, {})
+		icon: /* @__PURE__ */ O(l, {})
 	},
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(g, {})
+		icon: /* @__PURE__ */ O(p, {})
 	}
 ];
 function B(e, t) {
@@ -193,28 +193,28 @@ function Y() {
 		e && R(M, e);
 	}, [e]), null;
 }
-function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: l, cssVariable: u, position: g = "sticky" }) {
+function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: l, cssVariable: p, position: g = "sticky" }) {
 	let S = e("(max-width: 374px)"), w = e("(max-width: 849px)"), M = e("(max-width: 1300px)"), N = G(t), P = T(null), [F, L] = E(!1), [V, H] = E([]);
 	n(() => {
 		let e = P.current;
 		if (!e) return;
 		let n = t?.length ? N ? U : W : 0, r = 82 + V.length * 48 + n, i = -(82 + V.length * 48);
-		if (g === "static") return e.style.transform = "", u && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", u && document.documentElement.style.removeProperty("--header-bottom");
+		if (g === "static") return e.style.transform = "", p && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
+			e.style.transform = "", p && document.documentElement.style.removeProperty("--header-bottom");
 		};
 		let a = window.scrollY, o = 0, s = null, c = null, l = () => {
-			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, u && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
+			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, p && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
 		};
 		l();
-		let d = () => {
+		let u = () => {
 			let e = window.scrollY, t = e - a;
 			a = e, o = Math.min(0, Math.max(i, o - t)), c === null && (c = window.requestAnimationFrame(l));
 		};
-		return window.addEventListener("scroll", d, { passive: !0 }), () => {
-			window.removeEventListener("scroll", d), c !== null && cancelAnimationFrame(c), e.style.transform = "", u && document.documentElement.style.removeProperty("--header-bottom");
+		return window.addEventListener("scroll", u, { passive: !0 }), () => {
+			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", p && document.documentElement.style.removeProperty("--header-bottom");
 		};
 	}, [
-		u,
+		p,
 		N,
 		V.length,
 		g,
@@ -289,7 +289,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										children: [/* @__PURE__ */ O("span", {
 											className: A.gpt,
 											children: "Highcharts Assist"
-										}), /* @__PURE__ */ O(d, {})]
+										}), /* @__PURE__ */ O(u, {})]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) }),
@@ -299,7 +299,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										as: s,
 										href: B("https://shop.highcharts.com/", c),
 										"aria-label": "Buy Now",
-										children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
+										children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										className: A.cta,
@@ -312,7 +312,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? h : f, {})]
+										children: [F ? "Close" : "Menu", O(F ? h : d, {})]
 									}) })
 								]
 							})
@@ -349,7 +349,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 								children: [/* @__PURE__ */ O("span", {
 									className: A.gpt,
 									children: "Highcharts Assist"
-								}), /* @__PURE__ */ O(d, {})]
+								}), /* @__PURE__ */ O(u, {})]
 							}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) })
@@ -363,7 +363,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 						fullWidth: !0,
 						as: s,
 						href: B("https://shop.highcharts.com/", c),
-						children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
+						children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
 					}) }), /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 						variant: "success",
 						fullWidth: !0,

package/dist/{InputGrouped-BJEodhml.js → InputGrouped-Iz23ILtZ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { B as t, V as n, q as r } from "./esm-C4Ybr9s4.js";
-import { t as i } from "./Button-DSGsV45k.js";
+import { H as t, V as n, Y as r } from "./esm-bFdwg2E8.js";
+import { t as i } from "./Button-CSYKfiMM.js";
 import { forwardRef as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 var f = {
@@ -130,7 +130,7 @@ var h = a(({ label: r, required: a = !1, helpText: p, showHelpText: m = !1, labe
 							e.stopPropagation(), R((e) => !e);
 						},
 						"aria-label": L ? "Hide password" : "Show password",
-						children: u(L ? t : n, {})
+						children: u(L ? n : t, {})
 					}),
 					_
 				]

package/dist/{Label-BhFeSC8Z.js → Label-arNNMKJi.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { u as t } from "./esm-C4Ybr9s4.js";
+import { u as t } from "./esm-bFdwg2E8.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 var i = {
 	attention: "UwHMOW_attention",

package/dist/{NewsletterSignup-mPKBEpYq.js → NewsletterSignup-BwSHFFxv.js}

@@ -1,7 +1,7 @@
 import { l as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
-import { J as n, L as r, tt as i } from "./esm-C4Ybr9s4.js";
-import { t as a } from "./Button-DSGsV45k.js";
+import { R as n, X as r, rt as i } from "./esm-bFdwg2E8.js";
+import { t as a } from "./Button-CSYKfiMM.js";
 import { t as o } from "./Icon-VeXJMj8Q.js";
 import { t as s } from "./Link-CYR92_U0.js";
 import { t as c } from "./InputSolo-DUdKtZjX.js";
@@ -78,7 +78,7 @@ function g({ link: g = "a", privacyUrl: _ = "https://www.highcharts.com/privacy/
 			L ? /* @__PURE__ */ m("div", {
 				className: h.content,
 				children: [/* @__PURE__ */ p(o, {
-					name: r,
+					name: n,
 					size: 16
 				}), E ? "Check your inbox and confirm your email to finish signing up." : "You’re already subscribed to our newsletter."]
 			}) : /* @__PURE__ */ m("form", {
@@ -104,7 +104,7 @@ function g({ link: g = "a", privacyUrl: _ = "https://www.highcharts.com/privacy/
 						variant: "success",
 						disabled: !0,
 						children: [/* @__PURE__ */ p(o, {
-							name: n,
+							name: r,
 							size: 16
 						}), "You’re in"]
 					}) : /* @__PURE__ */ p(a, {

package/dist/{Notification-JovL5anc.js → Notification-Coii3TQE.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./esm-C4Ybr9s4.js";
-import { t as n } from "./Button-DSGsV45k.js";
+import { t } from "./esm-bFdwg2E8.js";
+import { t as n } from "./Button-CSYKfiMM.js";
 import { t as r } from "./Container-BDssaLig.js";
-import { t as i } from "./Label-BhFeSC8Z.js";
+import { t as i } from "./Label-arNNMKJi.js";
 import { useEffect as a, useState as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {

package/dist/{PrefPanel-DxSIkYDF.js → PrefPanel-DHotymro.js}

@@ -1,7 +1,7 @@
 import { d as e, o as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { T as r, Y as i, h as a, l as o, w as s } from "./esm-C4Ybr9s4.js";
-import { t as c } from "./Button-DSGsV45k.js";
+import { T as r, Z as i, h as a, l as o, w as s } from "./esm-bFdwg2E8.js";
+import { t as c } from "./Button-CSYKfiMM.js";
 import { _ as l, a as u, d, h as f, i as p, l as m, m as h, n as ee, o as g, p as _, r as v, t as y, u as b, y as x } from "./es2015-DWa0ZZ7A.js";
 import { a as S, i as te, n as C, r as w, t as T } from "./dist-B04QoImH.js";
 import * as E from "react";

package/dist/{ProductIcon-DFLAYWbu.js → ProductIcon-CKtF7AWy.js}

@@ -16,6 +16,7 @@ var o = {
 	gantt: "Gantt",
 	dashboards: "Dashboards",
 	grid: "Grid",
+	orbit: "Orbit",
 	demos: "Demos",
 	docs: "Docs",
 	API: "Api",

package/dist/{RoadmapDetails-ZnyXG2j7.js → RoadmapDetails-CtyefwR6.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { F as t, c as n, j as r, q as i } from "./esm-C4Ybr9s4.js";
-import { t as a } from "./Button-DSGsV45k.js";
+import { F as t, Y as n, c as r, j as i } from "./esm-bFdwg2E8.js";
+import { t as a } from "./Button-CSYKfiMM.js";
 import { t as o } from "./Typography-AvvBRu-u.js";
 import { useEffect as s, useRef as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
@@ -46,7 +46,7 @@ function f({ title: f, items: p, primaryAction: m, meta: h, open: g, defaultOpen
 				}), /* @__PURE__ */ l("span", {
 					className: d.chevron,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ l(i, {})
+					children: /* @__PURE__ */ l(n, {})
 				})]
 			}),
 			p && p.length > 0 && /* @__PURE__ */ l("ul", {
@@ -56,7 +56,7 @@ function f({ title: f, items: p, primaryAction: m, meta: h, open: g, defaultOpen
 					children: [/* @__PURE__ */ l("span", {
 						className: d.itemIcon,
 						"aria-hidden": "true",
-						children: e.icon ?? /* @__PURE__ */ l(n, {})
+						children: e.icon ?? /* @__PURE__ */ l(r, {})
 					}), /* @__PURE__ */ l(o, {
 						as: "span",
 						size: 200,
@@ -68,7 +68,7 @@ function f({ title: f, items: p, primaryAction: m, meta: h, open: g, defaultOpen
 			(m || h) && /* @__PURE__ */ u("div", {
 				className: d.actions,
 				children: [m && ((e) => {
-					let n = e.variant ?? "neutral", i = l(n === "soft" ? t : r, {}), o = e.icon === null ? void 0 : e.icon === void 0 ? i : e.icon;
+					let n = e.variant ?? "neutral", r = l(n === "soft" ? t : i, {}), o = e.icon === null ? void 0 : e.icon === void 0 ? r : e.icon;
 					return /* @__PURE__ */ l(a, {
 						variant: n,
 						size: 200,