highsoft-ui 1.0.153 → 1.0.154

package/CLAUDE.md

@@ -205,9 +205,17 @@ The foundational layout component. Use it instead of raw `<div>` with inline sty
 - Polymorphic: `<Link as={RouterLink} to="/page">` for SPA navigation
 
 ### Icon
+Wraps an `@untitled-ui/icons-react` icon so it picks up the design system's size
+and stroke-width scale. `name` takes the **component**, not a string — you still
+import the icon itself.
 ```tsx
-<Icon name="chevron-right" size={200} />
+import { ChevronRight } from '@untitled-ui/icons-react'
+
+<Icon name={ChevronRight} size={16} />
 ```
+- **`name`:** the icon component from `@untitled-ui/icons-react`
+- **`size`:** `12` | `16` | `20` | `24` (default) | `32` | `40` | `52` | `64` | `72` — each maps to a stroke width (16 → 1.33, 20 → 1.67, 24 → 2), which is what keeps icons visually consistent at different sizes
+- Icons passed to `Button`/`Label` via `iconLeft`/`iconRight` don't need this — those components size raw SVG children themselves.
 
 ### FrameworkIcon
 Language, framework and platform brand icons in two themes.
@@ -242,6 +250,7 @@ Standalone, self-bordered text field with a floating label, help text, and error
 - **`variant`:** `"default"`, `"white"`
 - **`iconLeft`:** icon rendered inside the field (not next to the label — that's `InputGrouped`'s `labelIcon`)
 - **`hasError` / `success`:** state styling; pair with `helpText`
+- **Touch devices get a 16px field** regardless of `size`. iOS Safari zooms the whole viewport when you focus a field whose text is under 16px, and doesn't zoom back out — so sizes `100` and `200` are floored under `@media (pointer: coarse)`. **Don't "fix" this at the page level** with a `maximum-scale=1` / `user-scalable=no` viewport meta: that buys it by disabling pinch-zoom for everyone, which fails WCAG 1.4.4 (Resize Text).
 
 ### SearchDropdown
 Combobox / autocomplete: a search field (built on `InputSolo`) with a filtered, keyboard-navigable results popover and match highlighting.
@@ -403,7 +412,7 @@ Lightbox wrapping `VideoPlayer` in a Radix dialog. The player mounts on open (au
 ### Sidebar (SidebarLayout, Sidebar, NavItem, NavGroup, …)
 A composable, resizable sidebar-navigation shell for docs/app layouts. The
 `<SidebarLayout>` is a two-column grid that owns the resize width and the mobile
-off-canvas drawer; compose the rest inside it.
+bottom sheet; compose the rest inside it.
 
 ```tsx
 import {
@@ -433,15 +442,60 @@ import { BarChart01 } from '@untitled-ui/icons-react'
 </SidebarLayout>
 ```
 
-- **`SidebarLayout`** — the grid shell. `defaultWidth`/`minWidth`/`maxWidth` (drag-to-resize), `storageKey` (persist width), `resizable` (default `true`), `fill` (default `true` — grows to fill a flex/grid parent), `mobileTriggerLabel` (default `"Menu"`). Owns the mobile drawer (sticky trigger, backdrop, Escape).
+- **`SidebarLayout`** — the grid shell. `defaultWidth`/`minWidth`/`maxWidth` (drag-to-resize), `storageKey` (persist width), `resizable` (default `true`), `fill` (default `true` — grows to fill a flex/grid parent). Owns the mobile bar and sheet (see below).
 - **`SidebarMain`** — the fluid content column beside the sidebar.
-- **`Sidebar`** — the `<aside>`; becomes the off-canvas drawer on mobile and auto-renders the resize handle + close button.
+- **`Sidebar`** — the `<aside>`; becomes the bottom sheet on mobile and auto-renders the resize handle, the grab handle and the close button.
 - **`SidebarHeader` / `SidebarBody`** — fixed top region / scrollable body.
 - **`SidebarSection`** — labelled group. `collapsible` surfaces a "Minimize" control that collapses its open `NavGroup`s; `action` slots a custom control instead.
-- **`NavItem`** — polymorphic nav link (`as`, default `<a>`); `active`, `icon`. Closes the mobile drawer on click. Open parents pin to the top while their list scrolls.
+- **`NavItem`** — polymorphic nav link (`as`, default `<a>`); `active`, `icon`. Closes the mobile sheet on click, after a ~350ms beat so the row visibly takes its selected state under the finger rather than the sheet vanishing out from under the tap. **Touch only** (`pointer: coarse`) — the same breakpoint fires on a narrow desktop window, where hover has already shown which row is which and the pause would just read as lag. Open parents pin to the top while their list scrolls.
 - **`NavGroup`** — expandable tree node (`defaultOpen`, controlled `open`/`onOpenChange`, `active` to tint the guide-line on the active path).
 - **`NavDisclosure`** — collapses behind a tap-toggle on narrow screens, inert on desktop.
-- The sidebar imposes **no background** of its own — set `--hs-sidebar-bg` (the mobile drawer keeps an opaque fallback). Colours use `--HS-*` tokens, so dark mode is automatic.
+- The sidebar imposes **no background** of its own — set `--hs-sidebar-bg` (the mobile sheet keeps an opaque fallback). Colours use `--HS-*` tokens, so dark mode is automatic.
+
+#### Mobile (≤760px): the bar and the sheet
+
+A page that has a site `<Header>` already spends the top of a phone screen on the site menu. A second hamburger 40px below it reads as one navigation split in half, whatever the second one is called — so the section nav takes the **opposite end of the screen**: a bar fixed in thumb reach that **names its own contents and where you currently are**, and a sheet that rises from it. Different place, different shape, different words, so the two are legible as different controls at a glance.
+
+**The position line comes for free.** The bar names the page you're on by reading the active `<NavItem>` — `"<enclosing group> / <item>"`, e.g. `"Highcharts Core / v12.5.0"`. The sidebar already knows which item is current, so nothing needs passing:
+
+```tsx
+<SidebarLayout
+  storageKey="changelog.sidebarWidth"
+  mobileTriggerLabel="Changelog"                        // what this nav is
+  mobileTriggerIcon={<ProductMark slug={product} />}
+  mobileTriggerAction={<SearchButton />}                // stays outside the sheet
+>
+```
+
+- **`mobileTriggerLabel`** (default `"Navigation"`) — names the nav. Rendered as a small overline above the position line; with no position line it becomes the headline instead.
+- **`mobileTriggerValue`** — override the derived position. Only worth passing when you want different wording; pass `false` to show no position line at all. Derivation needs labels that reduce to text (a string, `v{version}`, a wrapped span); a label built from arbitrary JSX yields nothing, and then this prop is how you say it. Deep trees keep the **last two** segments, so the most specific part survives at 320px.
+- **`mobileTriggerIcon`** — 20×20 leading glyph.
+- **`mobileTriggerAction`** — a control slotted beside the trigger, outside the sheet, divided off so a thumb aimed at it can't open the tree. **Put search here** — on a phone it's usually what the reader came for, and shutting it inside the sheet costs an extra tap. Wire it to `openMobile({ focus: 'search' })`, which opens the sheet and puts the caret in the first field of `<SidebarHeader>`: tapping search means "let me type", so the keyboard coming up is the point rather than an intrusion. (Opening any other way focuses the sheet, precisely so the keyboard *doesn't* come up and cover it.)
+
+  ```tsx
+  function MobileSearchButton() {
+    const { openMobile } = useSidebarLayout()
+    return (
+      <Button variant="transparent" size={300} aria-label="Search"
+              onClick={() => openMobile({ focus: 'search' })}>
+        <SearchMd />
+      </Button>
+    )
+  }
+  ```
+- **`mobileBar`** (default `true`) — set `false` to drive the sheet from your own control via `useSidebarLayout().openMobile()`; you then own `aria-expanded`, `aria-controls="hs-sidebar-drawer"` and returning focus.
+- **`--hs-sidebar-mobile-bar-h`** — the space the fixed bar occupies (`0px` above the breakpoint). Read it to keep anything outside the layout clear of the bar: `footer { padding-bottom: var(--hs-sidebar-mobile-bar-h); }`. It tracks the breakpoint, not the presence of a `<SidebarLayout>`, so only read it on pages that render one.
+- `useSidebarLayout()` also exposes **`isMobile`** — whether the layout is currently in its narrow form.
+
+**Accessibility:**
+- The trigger keeps `aria-expanded` + `aria-controls="hs-sidebar-drawer"`. The open sheet is a `role="dialog"` `aria-modal` **with focus trapped inside it**; Escape, the backdrop, the close button and dragging the grab handle down all dismiss it, and focus returns to the trigger every time. Selecting a `NavItem` closes it too.
+- **Opening moves focus to the sheet itself** (`tabindex="-1"`), not to the close button. A screen reader then announces what opened — "Changelog navigation, dialog" — rather than the one control that dismisses it, and a keyboard open doesn't park a focus ring on the X. The first Tab still reaches the close button; Shift+Tab from the sheet wraps to the last item instead of stepping out. The sheet has no focus indicator of its own, which is fine because it isn't keyboard operable — you can't tab to it.
+- While closed on a narrow screen the sidebar is **`inert`**, so its (often several hundred) links stay out of the tab order and the AT tree. The bar's own controls stay reachable.
+- The trigger fills a **44px** target and the sheet's controls are large enough to hit without aiming; nothing depends on hover. `:focus-visible` shows the brand focus ring, so a narrow *desktop* window — the same breakpoint, but with a cursor and keyboard — behaves as expected.
+- Opening the sheet **locks page scroll** (compensating for the scrollbar so a narrow desktop window doesn't jolt sideways) and restores it on close.
+- The sheet **stays inside the visual viewport when a software keyboard opens**. iOS doesn't shrink the layout viewport for the keyboard — it shrinks the *visual* viewport and scrolls the layout one underneath, which would leave a bottom-anchored `position: fixed` sheet half behind the keyboard with its head pushed off the top, hiding the search field that focusing it was meant to expose. `<Sidebar>` tracks `visualViewport` and lifts/caps the sheet to match. Only for a keyboard-sized bite (≥120px), so a moving address bar doesn't resize it, and it hands the geometry back to CSS when the keyboard goes.
+- The grab handle is `aria-hidden` — it's the touch affordance, and the labelled close button is the control. Under `prefers-reduced-motion: reduce` the sheet arrives and leaves instantly; dragging it still tracks the finger, since that's direct manipulation rather than authored motion.
+- Widening past 760px retires the sheet without moving focus — a resize isn't a dismissal.
 
 ## Hooks
 

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { j as t } from "./esm-BnxclXHW.js";
+import { M as t } from "./esm-C4Ybr9s4.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-BKiZQpA5.js → CodeBlock-7BTXXf30.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 { H as r, K as i } from "./esm-BnxclXHW.js";
-import { t as a } from "./Button-BGsqFCRW.js";
+import { U as r, Y as i } from "./esm-C4Ybr9s4.js";
+import { t as a } from "./Button-DSGsV45k.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-COlcVrfu.js"),
-		import("./create-element-CDnUGrhg.js").then((e) => e.n),
+		import("./prism-light-BLaY8zo6.js"),
+		import("./create-element-C3ORyDVw.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),

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

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-BnxclXHW.js";
-import { t } from "./Button-BGsqFCRW.js";
+import { t as e } from "./esm-C4Ybr9s4.js";
+import { t } from "./Button-DSGsV45k.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-_yeXCeeq.js → CopyCode-PbZbRLn-.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 { H as r, K as i } from "./esm-BnxclXHW.js";
-import { t as a } from "./Button-BGsqFCRW.js";
+import { U as r, Y as i } from "./esm-C4Ybr9s4.js";
+import { t as a } from "./Button-DSGsV45k.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-B_Ib6i1c.js → Dropdown-c_EhnzqC.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { K as t } from "./esm-BnxclXHW.js";
+import { Y as t } from "./esm-C4Ybr9s4.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-ZdzuxuhY.js → Footer-C6a3PeJq.js}

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { K as t, U as n } from "./esm-BnxclXHW.js";
-import { t as r } from "./Button-BGsqFCRW.js";
+import { W as t, Y as n } from "./esm-C4Ybr9s4.js";
+import { t as r } from "./Button-DSGsV45k.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-DrcPfdrg.js";
-import { t as c } from "./FooterBottom-CqpN8Wky.js";
-import { t as l } from "./FooterHelp-Cb5sraAE.js";
-import { t as u } from "./FooterLinks-HGxMx6Xz.js";
-import { t as d } from "./YoutubeModal-BBYdQil8.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 { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",
@@ -29,7 +29,7 @@ function g() {
 	return /* @__PURE__ */ p(r, {
 		variant: "neutral",
 		onClick: () => i(o),
-		children: [o, f(a ? t : n, {})]
+		children: [o, f(a ? n : t, {})]
 	});
 }
 function _({ link: e = "a", host: t = "https://www.highcharts.com" }) {

package/dist/{FooterBottom-CqpN8Wky.js → FooterBottom-DADUJdzz.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-k89sCBEJ.js";
+import { t as d } from "./CookiePolicyModal-DulwuSp4.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-Cb5sraAE.js → FooterHelp-DN7Mdy40.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-BnxclXHW.js";
+import { d as n, g as r } from "./esm-C4Ybr9s4.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-HGxMx6Xz.js → FooterLinks-rrtsCIdv.js}

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

package/dist/{Header-CVKH_INR.js → Header-BokKjfF7.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 { D as o, L as s, O as c, Q as l, Y as u, b as d, f, p, q as m, s as h, t as g } from "./esm-BnxclXHW.js";
-import { t as _ } from "./Button-BGsqFCRW.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 { t as v } from "./Container-BDssaLig.js";
 import { t as y } from "./Logo-Bz0G2G-k.js";
-import { t as b } from "./PrefPanel-BGw72I_D.js";
-import { t as x } from "./Search-UPVxQliM.js";
-import { t as S } from "./Label-CgiWi1v6.js";
-import { t as C } from "./Notification-B3skQvZE.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 { 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(m, {})
+		icon: /* @__PURE__ */ O(l, {})
 	},
 	{
 		title: "Demos",
 		url: "https://www.highcharts.com/demo",
-		icon: /* @__PURE__ */ O(d, {})
+		icon: /* @__PURE__ */ O(u, {})
 	},
 	{
 		title: "Support",
@@ -90,17 +90,17 @@ var A = {
 	{
 		title: "Resources",
 		url: "https://www.highcharts.com/resources/",
-		icon: /* @__PURE__ */ O(s, {})
+		icon: /* @__PURE__ */ O(c, {})
 	},
 	{
 		title: "Pricing",
 		url: "https://shop.highcharts.com/",
-		icon: /* @__PURE__ */ O(u, {})
+		icon: /* @__PURE__ */ O(s, {})
 	},
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(l, {})
+		icon: /* @__PURE__ */ O(g, {})
 	}
 ];
 function B(e, t) {
@@ -193,37 +193,37 @@ function Y() {
 		e && R(M, e);
 	}, [e]), null;
 }
-function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: l = "https://www.highcharts.com", pathname: u, cssVariable: d, position: m = "sticky" }) {
+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" }) {
 	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 (m === "static") return e.style.transform = "", d && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
+		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");
 		};
 		let a = window.scrollY, o = 0, s = null, c = null, l = () => {
-			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, d && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
+			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);
 		};
 		l();
-		let u = () => {
+		let d = () => {
 			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", u, { passive: !0 }), () => {
-			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
+		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");
 		};
 	}, [
-		d,
+		u,
 		N,
 		V.length,
-		m,
+		g,
 		t?.length
 	]), n(() => {
 		if (!o.length) return;
 		let e = I();
 		H(e ? o.filter((t) => !t.id || !e.closed.includes(t.id)) : o);
-	}, [l, o]);
+	}, [c, o]);
 	let q = (e) => {
 		if (e.preventDefault(), !(e.nativeEvent instanceof KeyboardEvent) || e.nativeEvent.code === "Enter" || e.nativeEvent.code === "Space") {
 			let e = document.querySelector("main");
@@ -266,7 +266,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 							}),
 							/* @__PURE__ */ O(s, {
 								className: A.logo,
-								href: B("https://www.highcharts.com/", l),
+								href: B("https://www.highcharts.com/", c),
 								children: /* @__PURE__ */ O(y, { showText: !M || w && !S })
 							}),
 							/* @__PURE__ */ O("ul", {
@@ -275,7 +275,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 									variant: "plain",
 									size: 300,
 									as: s,
-									href: B(t, l),
+									href: B(t, c),
 									children: e
 								}) }, n))
 							}),
@@ -285,11 +285,11 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										variant: "transparent",
 										as: s,
-										href: B("https://www.highcharts.com/chat/gpt/", l),
+										href: B("https://www.highcharts.com/chat/gpt/", c),
 										children: [/* @__PURE__ */ O("span", {
 											className: A.gpt,
 											children: "Highcharts Assist"
-										}), /* @__PURE__ */ O(f, {})]
+										}), /* @__PURE__ */ O(d, {})]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) }),
@@ -297,7 +297,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										className: A.cta,
 										variant: "success",
 										as: s,
-										href: B("https://shop.highcharts.com/", l),
+										href: B("https://shop.highcharts.com/", c),
 										"aria-label": "Buy Now",
 										children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
 									}) }),
@@ -305,14 +305,14 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										className: A.cta,
 										variant: "brand",
 										as: s,
-										href: B("https://www.highcharts.com/download/", l),
-										children: [/* @__PURE__ */ O(h, {}), "Try for Free"]
+										href: B("https://www.highcharts.com/download/", c),
+										children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? g : c, {})]
+										children: [F ? "Close" : "Menu", O(F ? h : f, {})]
 									}) })
 								]
 							})
@@ -322,8 +322,8 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 				!!t?.length && /* @__PURE__ */ O(K, {
 					items: t,
 					link: s,
-					host: l,
-					pathname: u
+					host: c,
+					pathname: l
 				}),
 				r
 			]
@@ -337,7 +337,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 					className: A.container,
 					children: [/* @__PURE__ */ O(s, {
 						className: A.logo,
-						href: B("https://www.highcharts.com/", l),
+						href: B("https://www.highcharts.com/", c),
 						children: /* @__PURE__ */ O(y, { showText: !S })
 					}), /* @__PURE__ */ k("ul", {
 						className: A.buttons,
@@ -345,11 +345,11 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 								variant: "transparent",
 								as: s,
-								href: B("https://www.highcharts.com/chat/gpt/", l),
+								href: B("https://www.highcharts.com/chat/gpt/", c),
 								children: [/* @__PURE__ */ O("span", {
 									className: A.gpt,
 									children: "Highcharts Assist"
-								}), /* @__PURE__ */ O(f, {})]
+								}), /* @__PURE__ */ O(d, {})]
 							}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) })
@@ -362,14 +362,14 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 						variant: "brand",
 						fullWidth: !0,
 						as: s,
-						href: B("https://shop.highcharts.com/", l),
+						href: B("https://shop.highcharts.com/", c),
 						children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
 					}) }), /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 						variant: "success",
 						fullWidth: !0,
 						as: s,
-						href: B("https://www.highcharts.com/download/", l),
-						children: [/* @__PURE__ */ O(h, {}), "Try for Free"]
+						href: B("https://www.highcharts.com/download/", c),
+						children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
 					}) })]
 				}),
 				/* @__PURE__ */ O("ul", {
@@ -379,7 +379,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 						size: 500,
 						fullWidth: !0,
 						as: s,
-						href: B(t, l),
+						href: B(t, c),
 						children: [n, e]
 					}) }, r))
 				})

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

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { B as t, W as n, z as r } from "./esm-BnxclXHW.js";
-import { t as i } from "./Button-BGsqFCRW.js";
+import { B as t, V as n, q as r } from "./esm-C4Ybr9s4.js";
+import { t as i } from "./Button-DSGsV45k.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 = {
@@ -41,7 +41,7 @@ function m({ children: t, className: n }) {
 		children: t
 	});
 }
-var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labelIcon: h, iconRight: g, button: _, hasError: v = !1, success: y = !1, disabled: b = !1, className: x, wrapperClassName: S, type: C, onFocus: w, onBlur: T, onChange: E, value: D, defaultValue: O, ...k }, A) => {
+var h = a(({ label: r, required: a = !1, helpText: p, showHelpText: m = !1, labelIcon: h, iconRight: g, button: _, hasError: v = !1, success: y = !1, disabled: b = !1, className: x, wrapperClassName: S, type: C, onFocus: w, onBlur: T, onChange: E, value: D, defaultValue: O, ...k }, A) => {
 	let j = c(null), M = A || j, [N, P] = l(!1), [F, I] = l(!1), [L, R] = l(!1), z = C === "password", [B, V] = l(O === void 0 ? "" : String(O)), H = D !== void 0, U = H ? String(D).length > 0 : B.length > 0, W = o((e) => {
 		P(!0), w?.(e);
 	}, [w]), G = o((e) => {
@@ -81,14 +81,14 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 			children: [/* @__PURE__ */ d("div", {
 				className: f.leftContent,
 				children: [
-					n && /* @__PURE__ */ d("div", {
+					r && /* @__PURE__ */ d("div", {
 						className: f.labelRow,
 						children: [h && /* @__PURE__ */ u("span", {
 							className: f.labelIcon,
 							children: h
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [n, a && /* @__PURE__ */ u("span", {
+							children: [r, a && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -99,7 +99,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 						type: Y,
 						className: e(f.inputElement, x),
 						disabled: b,
-						"aria-label": n,
+						"aria-label": r,
 						"aria-required": a,
 						"aria-invalid": v,
 						value: D,
@@ -130,7 +130,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 							e.stopPropagation(), R((e) => !e);
 						},
 						"aria-label": L ? "Hide password" : "Show password",
-						children: u(L ? r : t, {})
+						children: u(L ? t : n, {})
 					}),
 					_
 				]
@@ -139,7 +139,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 	});
 });
 h.displayName = "InputGrouped";
-var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labelIcon: s, hasError: p = !1, success: m = !1, disabled: h = !1, className: g, wrapperClassName: _, placeholder: v, children: y, onFocus: b, onBlur: x, onChange: S, value: C, defaultValue: w, ...T }, E) => {
+var g = a(({ label: t, required: n = !1, helpText: i, showHelpText: a = !1, labelIcon: s, hasError: p = !1, success: m = !1, disabled: h = !1, className: g, wrapperClassName: _, placeholder: v, children: y, onFocus: b, onBlur: x, onChange: S, value: C, defaultValue: w, ...T }, E) => {
 	let D = c(null), O = E || D, [k, A] = l(!1), [j, M] = l(!1), [N, P] = l(w === void 0 ? "" : String(w)), F = C !== void 0, I = F ? String(C).length > 0 : N.length > 0, L = o((e) => {
 		A(!0), b?.(e);
 	}, [b]), R = o((e) => {
@@ -179,7 +179,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 							children: s
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [t, r && /* @__PURE__ */ u("span", {
+							children: [t, n && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -190,7 +190,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 						className: e(f.inputElement, f.selectElement, g),
 						disabled: h,
 						"aria-label": t,
-						"aria-required": r,
+						"aria-required": n,
 						"aria-invalid": p,
 						value: C,
 						defaultValue: w,
@@ -214,7 +214,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 				className: f.rightContent,
 				children: /* @__PURE__ */ u("span", {
 					className: e(f.iconRight, f.chevron),
-					children: /* @__PURE__ */ u(n, {})
+					children: /* @__PURE__ */ u(r, {})
 				})
 			})]
 		})

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

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

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

@@ -1,7 +1,7 @@
 import { l as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
-import { G as n, I as r, Q as i } from "./esm-BnxclXHW.js";
-import { t as a } from "./Button-BGsqFCRW.js";
+import { J as n, L as r, tt as i } from "./esm-C4Ybr9s4.js";
+import { t as a } from "./Button-DSGsV45k.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";

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

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./esm-BnxclXHW.js";
-import { t as n } from "./Button-BGsqFCRW.js";
+import { t } from "./esm-C4Ybr9s4.js";
+import { t as n } from "./Button-DSGsV45k.js";
 import { t as r } from "./Container-BDssaLig.js";
-import { t as i } from "./Label-CgiWi1v6.js";
+import { t as i } from "./Label-BhFeSC8Z.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-BGw72I_D.js → PrefPanel-DxSIkYDF.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 { K as r, T as i, h as a, l as o, w as s } from "./esm-BnxclXHW.js";
-import { t as c } from "./Button-BGsqFCRW.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 { _ 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";
@@ -194,20 +194,20 @@ var oe = P, se = I, ce = R, le = H, ue = W, Q = {
 };
 //#endregion
 //#region lib/components/PrefPanel/index.tsx
-function $({ children: e, id: t, ...i }) {
+function $({ children: e, id: t, ...r }) {
 	return /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("input", {
 		type: "radio",
 		id: t,
 		className: n(Q.radioInput, "sr-only"),
-		...i
+		...r
 	}), /* @__PURE__ */ k("label", {
 		htmlFor: t,
 		className: Q.radio,
-		children: [e, /* @__PURE__ */ O(r, { className: Q.check })]
+		children: [e, /* @__PURE__ */ O(i, { className: Q.check })]
 	})] });
 }
 function de() {
-	let { theme: n, systemTheme: r, setTheme: l } = e(), u = t();
+	let { theme: n, systemTheme: i, setTheme: l } = e(), u = t();
 	return /* @__PURE__ */ k(oe, { children: [/* @__PURE__ */ O(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ k(c, {
@@ -227,9 +227,9 @@ function de() {
 				checked: n === "system",
 				onChange: () => l("system"),
 				children: [
-					/* @__PURE__ */ O(i, {}),
+					/* @__PURE__ */ O(r, {}),
 					"Auto (",
-					r,
+					i,
 					")"
 				]
 			}),