highsoft-ui 1.0.145 → 1.0.147

package/CLAUDE.md

@@ -176,6 +176,8 @@ The foundational layout component. Use it instead of raw `<div>` with inline sty
 - **`iconLeft`:** `ReactNode` — icon placed before the label
 - **`iconRight`:** `ReactNode` — icon placed after the label
 - **`as`:** polymorphic — auto-detects `<a>` when `href` is provided
+- **`disabled` / `loading`:** both render the button non-interactive and share one **unified disabled treatment** across variants — the coloured variants (`brand`, `success`, `attention`, `danger`) fall back to the same neutral surface as `neutral`/`soft` rather than a greyed brand colour, so a disabled control never reads as active. In dark mode disabled buttons use a muted fill with lighter (`neutral-400`) label text and a defined (`neutral-1000`) border; `transparent` stays flat but keeps its border, and `plain` is borderless label-only.
+- **Accessibility:** a real `<button>` uses the native `disabled` attribute (removed from the tab order, not clickable); when rendered as `<a>` (via `href`), disabled instead sets `aria-disabled`, drops `href`, forces `tabIndex={-1}`, and blocks the click — so the disabled meaning is exposed either way. Disabled label contrast is intentionally muted and is exempt from WCAG 1.4.3 (inactive controls). `:focus-visible` shows a 2px brand focus ring on every variant; transitions use the design-token animations and respect `prefers-reduced-motion` via the shared tokens.
 
 ### Heading
 ```tsx
@@ -323,13 +325,25 @@ Sutro-inspired media player with a brand-accent scrubber, floating volume, auto-
 <VideoPlayer src="https://youtu.be/aqz-KE-bpKQ" />        // driven via the YouTube IFrame API
 <VideoPlayer src="https://vimeo.com/76979871" autoPlay muted />
 <VideoPlayer sources={[{ src: '/v.webm', type: 'video/webm' }, { src: '/v.mp4', type: 'video/mp4' }]} />
+
+// Captions + a written transcript (self-hosted video)
+<VideoPlayer
+  src="/history.mp4"
+  tracks={[{ src: '/history.vtt', srclang: 'en', label: 'English', default: true }]}
+  transcript={<HistoryTranscript />}
+/>
 ```
 - **`src`** (or **`sources`**): self-hosted URL, or a YouTube/Vimeo link (auto-detected)
 - **`poster`, `muted`, `autoPlay`, `loop`, `playsInline`, `preload`**: standard video props (`autoPlay` needs `muted`)
 - **`aspectRatio`** (default `'16 / 9'`), **`radius`** (default `16`)
 - **`accentGradient`**: scrubber/volume fill — defaults to the brand color; accepts any CSS color or gradient
-- Keyboard: space/`k` play, `f` fullscreen, `m` mute, arrows seek; forwards a ref to the underlying `<video>`
+- **`tracks`**: WebVTT text tracks (`{ src, srclang, label, kind?, default? }`) for self-hosted video. Adds a CC toggle that cycles `captions`/`subtitles` tracks; `descriptions` tracks are loaded for assistive tech but skipped by the toggle. Ignored for YouTube/Vimeo — provider embeds render their own captions.
+- **`transcript`** (+ **`transcriptTitle`**, default `'Transcript'`): any React content, docked as a panel below the player and toggled from the control bar
+- Keyboard: space/`k` play, `f` fullscreen, `m` mute, `c` captions, `t` transcript, arrows seek; forwards a ref to the underlying `<video>`
 - **Accessibility:** labelled `role="region"` (with an `sr-only` name); scrubber + volume are `role="slider"` with `aria-valuemin/max/now/valuetext`; mute exposes `aria-pressed`; decorative layers are `aria-hidden`; controls respect `prefers-reduced-motion`.
+  - Captions satisfy WCAG 1.2.2 and the transcript 1.2.3 / 1.2.8. The CC button exposes `aria-pressed` and the transcript button `aria-expanded` + `aria-controls`; the panel is a labelled `role="region"`. Active toggles are marked by *both* a background wash and an accent-tinted glyph, so the state never rests on color alone.
+  - **Cue styling is deliberately left to the browser.** Users' OS/browser caption preferences (macOS Accessibility → Captions, `chrome://settings/captions`) are user-origin styles that beat author CSS at any priority — authoring a cue background/box either doubles up with or fights that layer. Only `font-family`/`line-height` are set. Cue *position* is ours: the overlay animates up while the chrome is visible and back down when it idles (WebKit/Blink via the text-track container pseudo, Firefox via `VTTCue.line`).
+  - The collapsed transcript panel is `inert`, so it stays out of the tab order and the AT tree; its reveal animates on the motion tokens and collapses to an instant toggle under `prefers-reduced-motion`.
 
 ### VideoCover
 Chrome-less background/cover video — autoplays muted, loops, and stretches to fill its box like `object-fit: cover` on an image. No controls, no engine, no provider SDKs; self-hosted `<video>` only. Built-in lazy loading + fade-in, an overlay slot for `children`, and optional hover zoom.

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

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

package/dist/{ButtonGroup-BSQzx-sZ.js → ButtonGroup-DKfaXOeS.js}

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

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

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { O as t } from "./esm-B0YmMAXt.js";
+import { j as t } from "./esm-BnxclXHW.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-DtTAC5ru.js → CodeBlock-BeseY88j.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, z as i } from "./esm-B0YmMAXt.js";
-import { t as a } from "./Button-DIGyNR41.js";
+import { H as r, K as i } from "./esm-BnxclXHW.js";
+import { t as a } from "./Button-BGsqFCRW.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-C4xXs3Qn.js"),
-		import("./create-element-WbENDceu.js").then((e) => e.n),
+		import("./prism-light-COlcVrfu.js"),
+		import("./create-element-CDnUGrhg.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-CGRXL0wR.js → CookiePolicyModal-k89sCBEJ.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-B0YmMAXt.js";
-import { t } from "./Button-DIGyNR41.js";
+import { t as e } from "./esm-BnxclXHW.js";
+import { t } from "./Button-BGsqFCRW.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-_MHQorJS.js → CopyCode-_yeXCeeq.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, z as i } from "./esm-B0YmMAXt.js";
-import { t as a } from "./Button-DIGyNR41.js";
+import { H as r, K as i } from "./esm-BnxclXHW.js";
+import { t as a } from "./Button-BGsqFCRW.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-CVyrHJiC.js → Dropdown-B_Ib6i1c.js}

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

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { B as t, U as n } from "./esm-B0YmMAXt.js";
-import { t as r } from "./Button-DIGyNR41.js";
+import { K as t, U as n } from "./esm-BnxclXHW.js";
+import { t as r } from "./Button-BGsqFCRW.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-CJAI81M3.js";
-import { t as c } from "./FooterBottom-CP0f9kYj.js";
-import { t as l } from "./FooterHelp-BxDXmtHK.js";
-import { t as u } from "./FooterLinks-BZwAVSm4.js";
-import { t as d } from "./YoutubeModal-D_ZHayEn.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-CogdK_5Z.js";
+import { t as d } from "./YoutubeModal-BBYdQil8.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 ? n : t, {})]
+		children: [o, f(a ? t : n, {})]
 	});
 }
 function _({ link: e = "a", host: t = "https://www.highcharts.com" }) {

package/dist/{FooterBottom-CP0f9kYj.js → FooterBottom-CqpN8Wky.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-CGRXL0wR.js";
+import { t as d } from "./CookiePolicyModal-k89sCBEJ.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-BxDXmtHK.js → FooterHelp-Cb5sraAE.js}

@@ -1,5 +1,5 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
-import { h as n, u as r } from "./esm-B0YmMAXt.js";
+import { d as n, g as r } from "./esm-BnxclXHW.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";
@@ -23,7 +23,7 @@ function d(e, t) {
 var f = [
 	{
 		icon: /* @__PURE__ */ c(i, {
-			name: r,
+			name: n,
 			size: 20
 		}),
 		subtitle: "Ask tech and sales questions with",
@@ -50,7 +50,7 @@ var f = [
 	},
 	{
 		icon: /* @__PURE__ */ c(i, {
-			name: n,
+			name: r,
 			size: 20
 		}),
 		subtitle: "Contact sales about",

package/dist/{FooterLinks-BZwAVSm4.js → FooterLinks-CogdK_5Z.js}

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

package/dist/{Header-DQ1xi25C.js → Header-CVKH_INR.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 { K as o, P as s, T as c, W as l, Y as u, d, f, o as p, t as m, w as h, y as g } from "./esm-B0YmMAXt.js";
-import { t as _ } from "./Button-DIGyNR41.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 { t as v } from "./Container-BDssaLig.js";
 import { t as y } from "./Logo-Bz0G2G-k.js";
-import { t as b } from "./PrefPanel-BZUX1nfw.js";
-import { t as x } from "./Search-Cw_e1PyF.js";
-import { t as S } from "./Label-C_KZM-FN.js";
-import { t as C } from "./Notification-C2kN_ceR.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 { 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,17 +75,17 @@ var A = {
 	{
 		title: "Products",
 		url: "https://www.highcharts.com/products/",
-		icon: /* @__PURE__ */ O(l, {})
+		icon: /* @__PURE__ */ O(m, {})
 	},
 	{
 		title: "Demos",
 		url: "https://www.highcharts.com/demo",
-		icon: /* @__PURE__ */ O(g, {})
+		icon: /* @__PURE__ */ O(d, {})
 	},
 	{
 		title: "Support",
 		url: "https://www.highcharts.com/support/",
-		icon: /* @__PURE__ */ O(h, {})
+		icon: /* @__PURE__ */ O(o, {})
 	},
 	{
 		title: "Resources",
@@ -95,12 +95,12 @@ var A = {
 	{
 		title: "Pricing",
 		url: "https://shop.highcharts.com/",
-		icon: /* @__PURE__ */ O(o, {})
+		icon: /* @__PURE__ */ O(u, {})
 	},
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(u, {})
+		icon: /* @__PURE__ */ O(l, {})
 	}
 ];
 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: l = "https://www.highcharts.com", pathname: u, cssVariable: h, position: g = "sticky" }) {
+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" }) {
 	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 = "", h && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", h && document.documentElement.style.removeProperty("--header-bottom");
+		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");
 		};
 		let a = window.scrollY, o = 0, s = null, c = null, l = () => {
-			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, h && 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,13 +211,13 @@ 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 = "", h && document.documentElement.style.removeProperty("--header-bottom");
+			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
 		};
 	}, [
-		h,
+		d,
 		N,
 		V.length,
-		g,
+		m,
 		t?.length
 	]), n(() => {
 		if (!o.length) return;
@@ -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(f, {})]
 									}) }),
 									/* @__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/", l),
 										"aria-label": "Buy Now",
-										children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
+										children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										className: A.cta,
 										variant: "brand",
 										as: s,
 										href: B("https://www.highcharts.com/download/", l),
-										children: [/* @__PURE__ */ O(p, {}), "Try for Free"]
+										children: [/* @__PURE__ */ O(h, {}), "Try for Free"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? m : c, {})]
+										children: [F ? "Close" : "Menu", O(F ? g : c, {})]
 									}) })
 								]
 							})
@@ -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(f, {})]
 							}) }),
 							/* @__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/", l),
-						children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
+						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(p, {}), "Try for Free"]
+						children: [/* @__PURE__ */ O(h, {}), "Try for Free"]
 					}) })]
 				}),
 				/* @__PURE__ */ O("ul", {

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

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { I as t, L as n, V as r } from "./esm-B0YmMAXt.js";
-import { t as i } from "./Button-DIGyNR41.js";
+import { B as t, W as n, z as r } from "./esm-BnxclXHW.js";
+import { t as i } from "./Button-BGsqFCRW.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: 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) => {
+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) => {
 	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: r, required: a = !1, helpText: p, showHelpText: m = !1, labe
 			children: [/* @__PURE__ */ d("div", {
 				className: f.leftContent,
 				children: [
-					r && /* @__PURE__ */ d("div", {
+					n && /* @__PURE__ */ d("div", {
 						className: f.labelRow,
 						children: [h && /* @__PURE__ */ u("span", {
 							className: f.labelIcon,
 							children: h
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [r, a && /* @__PURE__ */ u("span", {
+							children: [n, a && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -99,7 +99,7 @@ var h = a(({ label: r, required: a = !1, helpText: p, showHelpText: m = !1, labe
 						type: Y,
 						className: e(f.inputElement, x),
 						disabled: b,
-						"aria-label": r,
+						"aria-label": n,
 						"aria-required": a,
 						"aria-invalid": v,
 						value: D,
@@ -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 ? r : t, {})
 					}),
 					_
 				]
@@ -139,7 +139,7 @@ var h = a(({ label: r, required: a = !1, helpText: p, showHelpText: m = !1, labe
 	});
 });
 h.displayName = "InputGrouped";
-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) => {
+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) => {
 	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: n = !1, helpText: i, showHelpText: a = !1, labe
 							children: s
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [t, n && /* @__PURE__ */ u("span", {
+							children: [t, r && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -190,7 +190,7 @@ var g = a(({ label: t, required: n = !1, helpText: i, showHelpText: a = !1, labe
 						className: e(f.inputElement, f.selectElement, g),
 						disabled: h,
 						"aria-label": t,
-						"aria-required": n,
+						"aria-required": r,
 						"aria-invalid": p,
 						value: C,
 						defaultValue: w,
@@ -214,7 +214,7 @@ var g = a(({ label: t, required: n = !1, helpText: i, showHelpText: a = !1, labe
 				className: f.rightContent,
 				children: /* @__PURE__ */ u("span", {
 					className: e(f.iconRight, f.chevron),
-					children: /* @__PURE__ */ u(r, {})
+					children: /* @__PURE__ */ u(n, {})
 				})
 			})]
 		})

package/dist/{Label-C_KZM-FN.js → Label-CgiWi1v6.js}

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

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

@@ -1,7 +1,7 @@
 import { l as e } from "./utils-K9S_6_Eq.js";
 import { t } from "./clsx-BWCAbrjV.js";
-import { H as n, N as r, Y as i } from "./esm-B0YmMAXt.js";
-import { t as a } from "./Button-DIGyNR41.js";
+import { G as n, I as r, Q as i } from "./esm-BnxclXHW.js";
+import { t as a } from "./Button-BGsqFCRW.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-C2kN_ceR.js → Notification-B3skQvZE.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./esm-B0YmMAXt.js";
-import { t as n } from "./Button-DIGyNR41.js";
+import { t } from "./esm-BnxclXHW.js";
+import { t as n } from "./Button-BGsqFCRW.js";
 import { t as r } from "./Container-BDssaLig.js";
-import { t as i } from "./Label-C_KZM-FN.js";
+import { t as i } from "./Label-CgiWi1v6.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-BZUX1nfw.js → PrefPanel-BGw72I_D.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 { S as r, U as i, c as a, m as o, x as s } from "./esm-B0YmMAXt.js";
-import { t as c } from "./Button-DIGyNR41.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 { _ 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,26 +194,26 @@ var oe = P, se = I, ce = R, le = H, ue = W, Q = {
 };
 //#endregion
 //#region lib/components/PrefPanel/index.tsx
-function $({ children: e, id: t, ...r }) {
+function $({ children: e, id: t, ...i }) {
 	return /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("input", {
 		type: "radio",
 		id: t,
 		className: n(Q.radioInput, "sr-only"),
-		...r
+		...i
 	}), /* @__PURE__ */ k("label", {
 		htmlFor: t,
 		className: Q.radio,
-		children: [e, /* @__PURE__ */ O(i, { className: Q.check })]
+		children: [e, /* @__PURE__ */ O(r, { className: Q.check })]
 	})] });
 }
 function de() {
-	let { theme: n, systemTheme: i, setTheme: l } = e(), u = t();
+	let { theme: n, systemTheme: r, setTheme: l } = e(), u = t();
 	return /* @__PURE__ */ k(oe, { children: [/* @__PURE__ */ O(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ k(c, {
 			variant: "transparent",
 			"aria-label": "Preferences",
-			children: [/* @__PURE__ */ O(o, {}), /* @__PURE__ */ O(se, { className: Q.anchor })]
+			children: [/* @__PURE__ */ O(a, {}), /* @__PURE__ */ O(se, { className: Q.anchor })]
 		})
 	}), /* @__PURE__ */ O(le, { children: /* @__PURE__ */ O(ue, {
 		sideOffset: 8,
@@ -227,9 +227,9 @@ function de() {
 				checked: n === "system",
 				onChange: () => l("system"),
 				children: [
-					/* @__PURE__ */ O(r, {}),
+					/* @__PURE__ */ O(i, {}),
 					"Auto (",
-					i,
+					r,
 					")"
 				]
 			}),
@@ -238,7 +238,7 @@ function de() {
 				name: "theme",
 				checked: n === "light",
 				onChange: () => l("light"),
-				children: [/* @__PURE__ */ O(a, {}), "Light"]
+				children: [/* @__PURE__ */ O(o, {}), "Light"]
 			}),
 			/* @__PURE__ */ k($, {
 				id: "dark",

package/dist/{RoadmapDetails-CfayA5CZ.js → RoadmapDetails-XS0OylnP.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { D as t, V as n, j as r, s as i } from "./esm-B0YmMAXt.js";
-import { t as a } from "./Button-DIGyNR41.js";
+import { A as t, P as n, W as r, c as i } from "./esm-BnxclXHW.js";
+import { t as a } from "./Button-BGsqFCRW.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(n, {})
+					children: /* @__PURE__ */ l(r, {})
 				})]
 			}),
 			p && p.length > 0 && /* @__PURE__ */ l("ul", {
@@ -68,9 +68,9 @@ 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" ? r : t, {}), o = e.icon === null ? void 0 : e.icon === void 0 ? i : e.icon;
+					let r = e.variant ?? "neutral", i = l(r === "soft" ? n : t, {}), o = e.icon === null ? void 0 : e.icon === void 0 ? i : e.icon;
 					return /* @__PURE__ */ l(a, {
-						variant: n,
+						variant: r,
 						size: 200,
 						href: e.href,
 						onClick: (t) => {

package/dist/{Search-Cw_e1PyF.js → Search-UPVxQliM.js}

@@ -1,6 +1,6 @@
 import { a as e, i as t, n, o as r, r as i, t as a } from "./chunk-jwUa06l-.js";
-import { F as o, G as s, J as c, M as l, R as u, X as d, _ as f, b as p, f as m, p as h, q as g, v as _ } from "./esm-B0YmMAXt.js";
-import { t as v } from "./Button-DIGyNR41.js";
+import { $ as o, F as s, J as c, R as l, S as u, V as d, X as f, Z as p, m, p as h, v as g, y as _ } from "./esm-BnxclXHW.js";
+import { t as v } from "./Button-BGsqFCRW.js";
 import { d as y, h as b, l as x, m as S, p as C, u as w } from "./es2015-DWa0ZZ7A.js";
 import { t as ee } from "./dist-J9cXmrDi.js";
 import { i as T, n as E, r as D, t as O } from "./dist-CE9LFbij.js";
@@ -4501,13 +4501,13 @@ function Wt() {
 	}, le = (e) => {
 		n(e.target.value);
 	}, ue = {
-		products: /* @__PURE__ */ F(h, {}),
-		demo: /* @__PURE__ */ F(p, {}),
-		docs: /* @__PURE__ */ F(s, {}),
-		blog: /* @__PURE__ */ F(d, {}),
-		misc: /* @__PURE__ */ F(l, {}),
-		shop: /* @__PURE__ */ F(m, {}),
-		file: /* @__PURE__ */ F(o, {})
+		products: /* @__PURE__ */ F(m, {}),
+		demo: /* @__PURE__ */ F(u, {}),
+		docs: /* @__PURE__ */ F(c, {}),
+		blog: /* @__PURE__ */ F(o, {}),
+		misc: /* @__PURE__ */ F(s, {}),
+		shop: /* @__PURE__ */ F(h, {}),
+		file: /* @__PURE__ */ F(l, {})
 	};
 	return /* @__PURE__ */ I(ie, {
 		open: a,
@@ -4517,7 +4517,7 @@ function Wt() {
 			children: /* @__PURE__ */ F(v, {
 				variant: "transparent",
 				"aria-label": "Search",
-				children: /* @__PURE__ */ F(f, {})
+				children: /* @__PURE__ */ F(g, {})
 			})
 		}), /* @__PURE__ */ I(k, { children: [/* @__PURE__ */ F(A, { className: Z.overlay }), /* @__PURE__ */ I(ne, {
 			className: Z.search,
@@ -4601,14 +4601,14 @@ function Wt() {
 									className: Z.bottomGroup,
 									children: [/* @__PURE__ */ I("div", {
 										className: Z.bottomIcons,
-										children: [/* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(c, {}) }), /* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(g, {}) })]
+										children: [/* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(p, {}) }), /* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(f, {}) })]
 									}), "Navigate"]
 								}),
 								/* @__PURE__ */ I("div", {
 									className: Z.bottomGroup,
 									children: [/* @__PURE__ */ F("div", {
 										className: Z.bottomIcons,
-										children: /* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(u, {}) })
+										children: /* @__PURE__ */ F("span", { children: /* @__PURE__ */ F(d, {}) })
 									}), "Select"]
 								}),
 								/* @__PURE__ */ I("div", {