highsoft-ui 1.0.140 → 1.0.143

package/CLAUDE.md

@@ -208,9 +208,41 @@ The foundational layout component. Use it instead of raw `<div>` with inline sty
 ```
 
 ### InputSolo
+Standalone, self-bordered text field with a floating label, help text, and error/success states.
 ```tsx
 <InputSolo label="Email" placeholder="you@example.com" />
+<InputSolo label="Search" size={300} iconLeft={<Icon name="search-md" />} />
+<InputSolo label="API key" hasError helpText="That key isn't valid." />
 ```
+- **`size`:** `100`, `200` (default), `300`
+- **`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`
+
+### SearchDropdown
+Combobox / autocomplete: a search field (built on `InputSolo`) with a filtered, keyboard-navigable results popover and match highlighting.
+```tsx
+const items = [
+  { id: 'chart.type', label: 'chart.type', kind: 'option' },
+  { id: 'series.data', label: 'series.data', kind: 'option' },
+]
+
+<SearchDropdown
+  items={items}
+  placeholder="Search options…"
+  onSelect={(item) => router.push(`/api/${item.id}`)}
+/>
+
+// Server-side / async filtering — disable built-in filtering and feed results:
+<SearchDropdown items={results} filter={false} onQueryChange={setQuery} mono />
+```
+- **`items`:** `SearchDropdownItem[]` — each `{ id, label, kind?, iconLeft?, disabled?, highlightFrom? }`
+- **`onSelect(item)`:** called when a result is chosen; **`onQueryChange(query)`:** called as the user types
+- **`filter`:** `true` (default, built-in substring match), `false` (you filter — pair with `onQueryChange`), or a custom `(item, query) => boolean`
+- **`value` / `defaultValue`:** controlled / uncontrolled query
+- **`size`:** `100` | `200` (default) | `300`; **`variant`:** `"default"` | `"white"` (forwarded to `InputSolo`)
+- **`mono`:** monospace row labels (handy for code/API names); **`minChars`:** chars before the popover opens (default `1`)
+- **`iconLeft`, `label`, `placeholder`, `emptyState`, `maxHeight`** also supported
 
 ### InputGrouped / SelectGrouped / FormGroup / FormRow
 ```tsx
@@ -284,6 +316,49 @@ const a = 2   // [!code ++]`} />
 <Notification variant="danger" title="Error" message="Something went wrong" />
 ```
 
+### 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.
+
+```tsx
+import {
+  SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody,
+  SidebarSection, NavItem, NavGroup, NavDisclosure
+} from 'highsoft-ui'
+import { BarChart01 } from '@untitled-ui/icons-react'
+
+<SidebarLayout storageKey="docs.sidebarWidth">
+  <Sidebar aria-label="Docs navigation">
+    <SidebarHeader>{/* logo, product switcher, search */}</SidebarHeader>
+    <SidebarBody>
+      <SidebarSection label="Getting started">
+        <NavItem href="/overview" active iconLeft={<BarChart01 />}>Overview</NavItem>
+        <NavItem href="/install">Installation</NavItem>
+      </SidebarSection>
+      <SidebarSection label="Components" collapsible>
+        <NavGroup label="Inputs" defaultOpen>
+          <NavItem href="/inputs/text">Text field</NavItem>
+          <NavItem href="/inputs/select">Select</NavItem>
+        </NavGroup>
+        <NavItem href="/button">Button</NavItem>
+      </SidebarSection>
+    </SidebarBody>
+  </Sidebar>
+  <SidebarMain>{children}</SidebarMain>
+</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).
+- **`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.
+- **`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.
+- **`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.
+
 ## Hooks
 
 ### useSuccessFlash

package/README.md

@@ -1,13 +1,44 @@
 # Highsoft UI
 
+The Highsoft design system — a React component library, design tokens, a Storybook component explorer, and the Astro docs site that documents them.
+
+**Live**
+
+- Design site — https://design.highdev.dev
+- Storybook (component explorer) — https://storybook.highdev.dev
+
+> The complete reference lives in [`CLAUDE.md`](./CLAUDE.md): every component's props, the semantic token rules, and the do's & don'ts. It ships inside the published package too.
+
+## What's in this repo
+
+| Path | What it is | Build | Ships to |
+| --- | --- | --- | --- |
+| `lib/` | The component library (the published package) | `npm run build` → `dist/` | npm — `highsoft-ui` |
+| `src/` | The Astro docs site (multi-page, React islands) | `npm run build:app` → `dist-app/` | design.highdev.dev |
+| `stories/` | Storybook stories | `npm run build-storybook` | storybook.highdev.dev |
+
+`lib/` is the source of truth; the docs site and Storybook both consume it directly (via the `highsoft-ui` alias), so a change to a component shows up in all three.
+
+## For AI agents / LLMs
+
+The design system is self-describing for coding agents. A prompt like _"use guidelines from design.highdev.dev"_ should land here:
+
+- `/llms.txt` — concise guide: install, core rules, and a **"which component when"** decision matrix
+- `/llms-full.txt` — the full guide **plus the complete component API**
+- `/api.json` — machine-readable component API (props, types, defaults, enums)
+- `/guidelines` → redirects to `/llms.txt`
+
+`/llms-full.txt` and `/api.json` are **generated from `lib/` source** by [`scripts/extract-component-api.mjs`](./scripts/extract-component-api.mjs) (runs on `predev` / `prebuild:app`), so they can't drift from the real props. Every page also advertises `/llms.txt` via a `<link rel="alternate">` in its `<head>`.
+
 ## Development
 
 ```sh
 npm i
-npm run dev
+npm run dev          # docs site (Astro) → http://localhost:4321
+npm run storybook    # component explorer → http://localhost:6006
 ```
 
-This will run the test application located in `src` that uses the component library located in `lib`.
+Both run against the live library in `lib/`, so editing a component hot-reloads here.
 
 ## Usage
 
@@ -17,7 +48,7 @@ This will run the test application located in `src` that uses the component libr
 npm i highsoft-ui
 ```
 
-2. Load the the css somehow:
+2. Load the CSS — `highsoft-ui/css` bundles the component styles, resets **and** the design tokens (tokens drive the colors and dark mode):
 
 ```scss
 @import 'highsoft-ui/css';
@@ -31,6 +62,28 @@ import { Button } from 'highsoft-ui';
 <Button variant="brand" size={300}>Hello</Button>
 ```
 
+### Design tokens only
+
+Need just the tokens — plain CSS/SCSS, WordPress blocks, no React? Install the tokens package on its own:
+
+```sh
+npm i highsoft-design-tokens
+```
+
+```scss
+// the CSS custom properties — drives the colors and dark mode
+@import 'highsoft-design-tokens/dist/css/tokens.css';
+```
+
+It also ships SCSS mixins, e.g. the link styles:
+
+```scss
+@use 'highsoft-design-tokens/dist/scss/mixins/links' as *;
+
+a       { @include link; }        // subtle underline
+a.fancy { @include link(fancy); } // animated slide-in underline
+```
+
 ### PHP
 
 How to use components that need hydration (running client-side react) in PHP.

package/dist/{Button-Dc8NFRWQ.js → Button-awCDIEXQ.js}

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

package/dist/{ButtonGroup-CYmrw7gQ.js → ButtonGroup-Cwn0djAz.js}

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

package/dist/{Checkbox-CErz7eBz.js → Checkbox-CrF45NBl.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { S as t } from "./esm-CDDjSK4f.js";
+import { C as t } from "./esm-VMwHsplm.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-BreFXfK5.js → CodeBlock-BIdeK3gz.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 { L as r, N as i } from "./esm-CDDjSK4f.js";
-import { t as a } from "./Button-Dc8NFRWQ.js";
+import { P as r, R as i } from "./esm-VMwHsplm.js";
+import { t as a } from "./Button-awCDIEXQ.js";
 import { t as o } from "./FrameworkIcon-Ds6WrxO0.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-hml_uDoc.js"),
-		import("./create-element-B4K6TXvP.js").then((e) => e.n),
+		import("./prism-light-B3yrtgki.js"),
+		import("./create-element-CWTzyETe.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),
@@ -195,7 +195,7 @@ var C = {}, w = ({ children: e }) => /* @__PURE__ */ p("pre", {
 			}), /* @__PURE__ */ p(a, {
 				variant: B ? "success" : "transparent",
 				size: 100,
-				iconRight: p(B ? r : i, {}),
+				iconRight: p(B ? i : r, {}),
 				onClick: U,
 				"aria-label": B ? "Copied" : A,
 				className: h.copyBtn,

package/dist/{CookiePolicyModal-DdXZ2d36.js → CookiePolicyModal-CTA02JGV.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-CDDjSK4f.js";
-import { t } from "./Button-Dc8NFRWQ.js";
+import { t as e } from "./esm-VMwHsplm.js";
+import { t } from "./Button-awCDIEXQ.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-DH9Jh7PD.js → CopyCode-QiPNPCQN.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 { L as r, N as i } from "./esm-CDDjSK4f.js";
-import { t as a } from "./Button-Dc8NFRWQ.js";
+import { P as r, R as i } from "./esm-VMwHsplm.js";
+import { t as a } from "./Button-awCDIEXQ.js";
 import { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {
@@ -26,7 +26,7 @@ var u = {
 		}), /* @__PURE__ */ c(a, {
 			variant: x ? "success" : "soft",
 			size: 200,
-			iconLeft: c(x ? r : i, {}),
+			iconLeft: c(x ? i : r, {}),
 			onClick: (e) => {
 				e.stopPropagation(), S();
 			},

package/dist/{Dropdown-DbXr3sb-.js → Dropdown-0Vn7yro7.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { L as t } from "./esm-CDDjSK4f.js";
+import { R as t } from "./esm-VMwHsplm.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-DtFs2Sgb.js → Footer-BlCmsIDd.js}

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { L as t, P as n } from "./esm-CDDjSK4f.js";
-import { t as r } from "./Button-Dc8NFRWQ.js";
+import { F as t, R as n } from "./esm-VMwHsplm.js";
+import { t as r } from "./Button-awCDIEXQ.js";
 import { t as i } from "./Container-BDssaLig.js";
 import { t as a } from "./DiscordInvite-CLYxexdH.js";
-import { t as o } from "./Logo-DTfFHBgU.js";
-import { t as s } from "./NewsletterSignup-Dw9YbhEh.js";
-import { t as c } from "./FooterBottom-Dtttgp4F.js";
-import { t as l } from "./FooterHelp-COjjt6h7.js";
-import { t as u } from "./FooterLinks-DZ0uH7HO.js";
-import { t as d } from "./YoutubeModal-DGj2INF0.js";
+import { t as o } from "./Logo-Bz0G2G-k.js";
+import { t as s } from "./NewsletterSignup-BMRnrbw8.js";
+import { t as c } from "./FooterBottom-CF5ctutk.js";
+import { t as l } from "./FooterHelp-BthIJ2ye.js";
+import { t as u } from "./FooterLinks-BBOOTdRf.js";
+import { t as d } from "./YoutubeModal-CZgbaRB6.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-Dtttgp4F.js → FooterBottom-CF5ctutk.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-DdXZ2d36.js";
+import { t as d } from "./CookiePolicyModal-CTA02JGV.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-COjjt6h7.js → FooterHelp-BthIJ2ye.js}

@@ -1,5 +1,5 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
-import { f as n, s as r } from "./esm-CDDjSK4f.js";
+import { f as n, s as r } from "./esm-VMwHsplm.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-DZ0uH7HO.js → FooterLinks-BBOOTdRf.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { w as t } from "./esm-CDDjSK4f.js";
+import { T as t } from "./esm-VMwHsplm.js";
 import { t as n } from "./Icon-VeXJMj8Q.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
-import { t as i } from "./Label-BM4vL0vA.js";
+import { t as i } from "./Label-DdXaM1Bo.js";
 import a from "./components/icons/MadeInNorway.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {

package/dist/{Header-C7MCiwiz.js → Header-DY4mJxHm.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 { B as o, O as s, R as c, U as l, b as u, c as d, h as f, l as p, r as m, t as h, y as g } from "./esm-CDDjSK4f.js";
-import { t as _ } from "./Button-Dc8NFRWQ.js";
+import { V as o, W as s, b as c, c as l, g as u, k as d, l as f, r as p, t as m, x as h, z as g } from "./esm-VMwHsplm.js";
+import { t as _ } from "./Button-awCDIEXQ.js";
 import { t as v } from "./Container-BDssaLig.js";
-import { t as y } from "./Logo-DTfFHBgU.js";
-import { t as b } from "./PrefPanel-BG4jW8wc.js";
-import { t as x } from "./Search-CpJ2XTLG.js";
-import { t as S } from "./Label-BM4vL0vA.js";
-import { t as C } from "./Notification-BgmhEw6w.js";
+import { t as y } from "./Logo-Bz0G2G-k.js";
+import { t as b } from "./PrefPanel-DDD8R_-o.js";
+import { t as x } from "./Search-CDOpNByw.js";
+import { t as S } from "./Label-DdXaM1Bo.js";
+import { t as C } from "./Notification-DM31Uzfz.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,22 +75,22 @@ var A = {
 	{
 		title: "Products",
 		url: "https://www.highcharts.com/products/",
-		icon: /* @__PURE__ */ O(c, {})
+		icon: /* @__PURE__ */ O(g, {})
 	},
 	{
 		title: "Demos",
 		url: "https://www.highcharts.com/demo",
-		icon: /* @__PURE__ */ O(f, {})
+		icon: /* @__PURE__ */ O(u, {})
 	},
 	{
 		title: "Support",
 		url: "https://www.highcharts.com/support/",
-		icon: /* @__PURE__ */ O(g, {})
+		icon: /* @__PURE__ */ O(c, {})
 	},
 	{
 		title: "Resources",
 		url: "https://www.highcharts.com/resources/",
-		icon: /* @__PURE__ */ O(s, {})
+		icon: /* @__PURE__ */ O(d, {})
 	},
 	{
 		title: "Pricing",
@@ -100,7 +100,7 @@ var A = {
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(l, {})
+		icon: /* @__PURE__ */ O(s, {})
 	}
 ];
 function B(e, t) {
@@ -193,17 +193,17 @@ 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: f, position: g = "sticky" }) {
+function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: u, cssVariable: d, 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 = "", f && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
+		if (g === "static") return e.style.transform = "", d && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
+			e.style.transform = "", d && 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)`, f && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
+			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);
 		};
 		l();
 		let u = () => {
@@ -211,10 +211,10 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 			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 = "", f && document.documentElement.style.removeProperty("--header-bottom");
+			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
 		};
 	}, [
-		f,
+		d,
 		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(l, {})]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) }),
@@ -299,20 +299,20 @@ 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,
 										variant: "brand",
 										as: s,
 										href: B("https://www.highcharts.com/download/", c),
-										children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
+										children: [/* @__PURE__ */ O(p, {}), "Try for Free"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? h : u, {})]
+										children: [F ? "Close" : "Menu", O(F ? m : h, {})]
 									}) })
 								]
 							})
@@ -323,7 +323,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 					items: t,
 					link: s,
 					host: c,
-					pathname: l
+					pathname: u
 				}),
 				r
 			]
@@ -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(l, {})]
 							}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) })
@@ -363,13 +363,13 @@ 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,
 						as: s,
 						href: B("https://www.highcharts.com/download/", c),
-						children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
+						children: [/* @__PURE__ */ O(p, {}), "Try for Free"]
 					}) })]
 				}),
 				/* @__PURE__ */ O("ul", {

package/dist/{InputGrouped-CIokpRn5.js → InputGrouped-DyxraUpb.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { A as t, F as n, j as r } from "./esm-CDDjSK4f.js";
-import { t as i } from "./Button-Dc8NFRWQ.js";
+import { I as t, M as n, j as r } from "./esm-VMwHsplm.js";
+import { t as i } from "./Button-awCDIEXQ.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: t, 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", {
+					t && /* @__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: [t, 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": t,
 						"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 ? t : r, {})
+						children: u(L ? r : 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: n, 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) => {
 	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) => {
@@ -172,14 +172,14 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 			children: [/* @__PURE__ */ d("div", {
 				className: f.leftContent,
 				children: [
-					t && /* @__PURE__ */ d("div", {
+					n && /* @__PURE__ */ d("div", {
 						className: f.labelRow,
 						children: [s && /* @__PURE__ */ u("span", {
 							className: f.labelIcon,
 							children: s
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [t, r && /* @__PURE__ */ u("span", {
+							children: [n, r && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -189,7 +189,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 						ref: O,
 						className: e(f.inputElement, f.selectElement, g),
 						disabled: h,
-						"aria-label": t,
+						"aria-label": n,
 						"aria-required": r,
 						"aria-invalid": p,
 						value: C,
@@ -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(t, {})
 				})
 			})]
 		})