highsoft-ui 1.0.172 → 1.0.174

package/CLAUDE.md

@@ -687,6 +687,46 @@ Browser-window chrome around embedded content — a real `<iframe>` via `src`, o
 - The frame itself is a non-interactive `<div>` — nothing in the tab order beyond its controls; no authored motion, so there's nothing to gate on `prefers-reduced-motion` beyond the shared Button tokens.
 - `background` is a static surface with no state, so it changes nothing for keyboard or AT. The named values are semantic tokens and remap in dark mode; a raw CSS value does not, so prefer the tokens unless the embed is a fixed colour in both themes.
 
+### Figure
+A `<figure>` with a `<figcaption>`: an image, or any wrapped content (a `BrowserFrame`, `VideoPlayer`, `CodeBlock`, a chart), with the sentence or two that explain it. The caption is what crawlers, AI agents and screen readers get instead of the image or the iframe's contents, so write it as the explanation, not as a label.
+```tsx
+// An image: alt says what it shows, caption says what to notice
+<Figure
+  src="/images/pyramid-3d.png"
+  alt="A pyramid in three stacked segments labelled Leads, Trials and Customers."
+  width={640}
+  height={360}
+  caption="A 3D pyramid with one segment per data point. The largest values form the widest part of the pyramid."
+/>
+
+// A live demo: wrap the BrowserFrame, the paragraph under it becomes the figcaption
+<Figure caption="This demo shows a 3D pyramid with one segment per data point.">
+  <BrowserFrame variant="mini" src={demoUrl} title="3D pyramid demo" aspectRatio="16 / 10" />
+</Figure>
+
+// Centered, smaller caption
+<Figure src={src} alt={alt} caption={caption} align="center" captionSize={75} />
+
+// A light/dark pair: the page's data-theme picks one
+<Figure src="/images/diagram.svg" srcDark="/images/diagram.dark.svg" alt={alt} caption={caption} />
+```
+- **`src` + `alt`:** renders the `<img>`. `alt` is required with `src` (the types enforce it): one sentence on what the image shows, `""` for a decorative image. `width`/`height` reserve the space before load; `loading`, `srcSet` and `sizes` pass through.
+- **`srcDark`:** dark-theme variant of the image. Both render with the same `alt`; `[data-theme='dark']` on `<html>` (ThemeLoader sets it before first paint) shows one and hides the other, and `prefers-color-scheme` decides when no attribute is set. Without it the one image serves both themes: nothing is dimmed or inverted, since a filter would distort a chart's colours.
+- **`zoom`:** click to enlarge (default `false`). The image becomes a `<button>` (cursor `zoom-in`, the shared focus ring) that opens it in a native `<dialog>` over the page: the picture floats on the dimmed backdrop with its own shadow, the close button sits in a row above it, outside the picture, and the caption is repeated under it in white. Escape, the close button, or a click on the backdrop closes it; the browser returns focus to the image. Enter and exit are CSS on `--animations-fade-*` / `--animations-bounce-default` with `@starting-style`, off under `prefers-reduced-motion`; the page behind does not scroll. `zoomLabel` and `closeLabel` name the two controls. The enlarge badge is the VideoCover playback control: a 28px disc bottom-right on the themed surface, hidden at rest and shown on hover or keyboard focus, so a chart's credits or last label stay readable until the reader reaches for it. Hover or keyboard focus lifts the picture 2px and scales it 1% on `--animations-bounce-default`, the cover-tile gesture that says "clickable", and deepens the shadow to `--shadow-size-200`. Opt in for screenshots and diagrams whose detail matters, not for every image.
+- **`children`:** the alternative to `src`: a `BrowserFrame`, `VideoPlayer`, `CodeBlock` or anything else. The figure only stops it from overflowing; the child draws its own frame.
+- **`caption`:** rendered as `<figcaption>` under the content, in `Typography` size `100` (or `captionSize={75}`) and `secondary` color (`captionColor` takes any `TypographyColor`). Capped at 72ch (`--hsui-figure-caption-width`) so a line under a wide demo stays readable. No caption, no `<figcaption>`.
+- **`align`:** `start` (default) or `center` for both content and caption.
+- **`frame`:** how an image sits on the page. `hairline` (default): border-100 and 8px radius (`--hsui-figure-radius`), the BrowserFrame shell look. `card`: the same plus `--shadow-size-100`, the BrowserFrame shadow, for an illustration that should read as a picture placed on the page. `none`: the bare image. Ignored for wrapped children, which draw their own frame.
+- 10px between content and caption (the List marker gap); no outer margin. The page sets the rhythm around a figure, as it does for a BrowserFrame.
+
+**Accessibility:**
+- A real `<figure>`; its accessible name is the `<figcaption>`, so assistive technology announces the figure by its caption and a screen-reader user can skip or jump to it as a landmark-like region.
+- `alt` and `caption` have different jobs: `alt` describes the image for someone who cannot see it, the caption explains it for everyone. Do not repeat one in the other. An empty `alt` hides a decorative image from the reader while the caption still reads.
+- With `zoom`, the trigger is a real `<button>` named "Enlarge image" (`zoomLabel`), so it is reachable by keyboard and announced as a button; the `<dialog>` is modal (`showModal`), named by the image's `alt`, trapped for focus, closed by Escape, and the browser returns focus to the button. The close control is a `Button` named by `closeLabel`. The zoom badge is `aria-hidden` decoration; the button's name carries the meaning, and keyboard focus shows the same lift and badge as hover, so the control is discoverable without a mouse; on touch there is no hover, and the whole picture is the tap target. Under `prefers-reduced-motion` the picture does not move. The transitions respect `prefers-reduced-motion`.
+- With `srcDark` the hidden variant is `display: none`, so assistive technology meets one image, not two with the same `alt`.
+- For wrapped content the child owns its own accessibility (a BrowserFrame's iframe `title`, a VideoPlayer's tracks); the figure adds the caption as the figure's name.
+- Nothing is interactive, nothing animates, colours are tokens, so dark mode and reduced motion need nothing extra.
+
 ### Layout
 ```tsx
 <Header />
@@ -960,6 +1000,42 @@ import NextLink from 'next/link'
 - The disabled edge card is a non-interactive `aria-disabled` span — not focusable, so keyboard users skip straight to the real links, while AT can still read "Previous —" as "there is no previous page".
 - DOM order is prev → back → next, matching the desktop visual order, so focus moves left-to-right across the row.
 
+### TableOfContents
+"On this page" navigation for an article: a rule down the left, a semibold title and one link per heading. Uncontrolled by default with a built-in scroll spy; pass `activeId` to drive the highlight yourself.
+
+```tsx
+const items: TableOfContentsItem[] = [
+  { id: 'requirements', title: 'Requirements' },
+  { id: 'install', title: '1. Install Highcharts React' },
+  { id: 'customize', title: '3. Customize your chart' },
+  { id: 'chart-elements', title: 'Chart elements', level: 2 },   // indented under the row above
+]
+
+// Scroll spy on: the current row is the last heading past the fold line.
+// Set spyOffset to the sticky header's height (plus the headings' scroll-margin-top).
+<TableOfContents items={items} spyOffset={96} style={{ position: 'sticky', top: 96 }} />
+
+// Controlled: you own the highlight; onActiveChange reports clicks
+<TableOfContents items={items} activeId={active} onActiveChange={setActive} />
+
+// Take over the navigation (eased scroll with a header offset) — the row still goes current
+<TableOfContents items={items} onItemClick={(item, e) => { e.preventDefault(); scrollTo(item.id) }} />
+```
+
+- **`items`:** `TableOfContentsItem[]` — `{ id, title, level?, href? }`. `id` is the heading element's id: the link target (`#id`) and what the spy watches. `level` `1` (default) | `2` | `3` indents 12px per step. `href` overrides the `#id` target. Renders nothing when empty.
+- **`title`:** the heading above the list (default `'On this page'`); `null` hides it.
+- **`activeId` / `onActiveChange(id)`:** controlled highlight; `null` highlights nothing. When `activeId` is given the spy is off. `onActiveChange` fires on spy changes and on clicks. **`defaultActiveId`** seeds the highlight in uncontrolled mode; the spy takes over once it finds headings, and while there are none (not rendered yet, or `spy={false}`) the highlight stays put and clicks move it.
+- **`spy`** (default `true`) / **`spyOffset`** (default `0`): the current heading is the last one whose top has crossed `spyOffset` px from the top of the viewport. The listener runs in the capture phase, so a scrolling container works as well as the window. **A clicked row stays current while its heading is on screen** even if it can't reach the fold line (a short last section never can); any wheel, touch or key input hands control back to the spy. A hash in the URL on mount pins its row the same way.
+- **`onItemClick(item, event)`:** runs before the hash navigation; `preventDefault()` to take it over.
+- Rows are 14px/1.3 tertiary text on a 25px pitch (7px gap), text 15px in from the rule, 32px above the title and 12px below the last row — the Figma geometry. Hover lifts a row to `--HS-text-primary-default` and grows a 2px `--HS-surface-ui-border-300` bar over the rule; the current row keeps the bar in `--HS-surface-ui-border-1000`. The bar is a `::before` whose width animates in and out on `--hsui-toc-bar-bounce` (default `--animations-bounce-fast`, so it overshoots a touch and settles); it isn't a border, so the text never moves. **Colours are not transitioned** — neither the text nor the bar — for the same reason as ButtonGroup: a colour transition can't tell a hover from a `data-theme` flip, so it would fade the rail behind the rest of the page on a theme change. The rule is a pseudo-element too, so the bar can cover it. Everything is `--HS-*` tokens, so dark mode is automatic (border-1000 remaps to neutral-0). Width, stickiness and the breakpoint that hides the rail belong to the page.
+
+**Accessibility:**
+- A real `<nav>` named by its visible title via `aria-labelledby` (AT announces "On this page, navigation"); with `title={null}` it takes `aria-label`, falling back to "On this page". Pass `aria-label` explicitly to override either way.
+- The rows are a `<ul role="list">` of real links (the role keeps Safari/VoiceOver from dropping list semantics from an unstyled list), so a screen reader hears "list, 6 items" and can jump between them. The current row carries `aria-current="location"` — the value for "where you are within the page" — so it is announced whichever way it was reached.
+- Keyboard: Tab through the links, Enter follows the hash and marks the row current; `:focus-visible` draws the shared two-tone brand focus ring (the `a11y-focus-ring` mixin, animating on `--animations-bounce-default`). Keyboard scrolling counts as reader input and releases a pinned row to the spy.
+- Hover and current states pair the bar with a text-colour change, so neither rests on colour alone. The bar's width grows on the bounce token and is instant under `prefers-reduced-motion: reduce`, which leaves nothing animating; colours switch instantly in every mode. The spy only swaps which row is current.
+- Rows are 18px tall on a 25px pitch: under the 24px minimum of WCAG 2.5.8, but the pitch keeps every target at least 24px from the next, which is the criterion's spacing exception. Nested rows indent without shrinking.
+
 ## Hooks
 
 ### useSuccessFlash
@@ -1137,6 +1213,18 @@ All components use the same `iconLeft` / `iconRight` naming:
 - **Do** pass an icon component to `icon` for a custom bullet
 - **Don't** write bullets or numbers into the item text (`•`, `1.`) — the component draws them
 
+### Figure
+- **Do** put the explanation in `caption` and what the image shows in `alt`
+- **Don't** repeat the caption as the alt text, or leave the alt as a file name
+- **Do** wrap a `BrowserFrame` in a `Figure` when the demo needs a sentence under it
+- **Don't** add margins inside the figure — the page sets the spacing around it
+- **Do** pass `srcDark` for diagrams and UI screenshots that have a dark version
+- **Don't** dim or invert a light image for dark mode — a filter changes a chart's colours
+- **Do** turn on `zoom` for screenshots and diagrams whose detail matters
+- **Don't** zoom a small illustration or an icon — there is nothing more to see
+- **Do** use `frame="card"` for an illustration that should read as a picture on the page, the way a BrowserFrame does
+- **Don't** put `card` on every screenshot — the hairline is the default for a reason
+
 ### Features
 - **Do** swap the icon per feature, and color it with `iconColor` when the section calls for it
 - **Do** keep `descriptionColor="tertiary"` for white/background-0 surfaces — on the page background or any grey it fails contrast

package/README.md

@@ -15,6 +15,7 @@ The Highsoft design system — a React component library, design tokens, a Story
 | --- | --- | --- | --- |
 | `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 |
+| `tools/icon-studio/` | 3D icon studio and local Blender helper | `npm run build:app` | Design site only — never npm |
 | `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.

package/dist/{BrowserFrame-CisPLoTR.js → BrowserFrame-_qNod9an.js}

@@ -1,7 +1,7 @@
 "use client";
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { G as t, L as n, R as r, k as i } from "./esm-zUd-Cmgs.js";
-import { t as a } from "./Button-CdrrwvXk.js";
+import { A as t, K as n, R as r, z as i } from "./esm-DQBytmnt.js";
+import { t as a } from "./Button-DFcjZsF4.js";
 import { forwardRef as o, useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 var p = {
@@ -52,13 +52,13 @@ var h = o(({ variant: o = "full", src: h, displayUrl: g, href: _, action: v = "v
 	}, [G]), X = o === "full" && v !== "none" ? v === "fullscreen" ? /* @__PURE__ */ d(a, {
 		variant: "soft",
 		size: 100,
-		iconRight: d(V ? i : t, {}),
+		iconRight: d(V ? t : n, {}),
 		onClick: Y,
 		children: y ?? (V ? "Exit fullscreen" : "Fullscreen")
 	}) : G ? /* @__PURE__ */ d(a, {
 		variant: "soft",
 		size: 100,
-		iconRight: /* @__PURE__ */ d(r, {}),
+		iconRight: /* @__PURE__ */ d(i, {}),
 		href: G,
 		target: "_blank",
 		rel: "noreferrer",
@@ -117,7 +117,7 @@ var h = o(({ variant: o = "full", src: h, displayUrl: g, href: _, action: v = "v
 					children: S.map((e) => /* @__PURE__ */ d(a, {
 						variant: "soft",
 						size: 100,
-						iconRight: /* @__PURE__ */ d(n, {}),
+						iconRight: /* @__PURE__ */ d(r, {}),
 						href: e.href,
 						target: "_blank",
 						rel: "noreferrer",

package/dist/{Button-CdrrwvXk.js → Button-DFcjZsF4.js}

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

package/dist/{ButtonGroup-JtJaVLlu.js → ButtonGroup-dTeFICBP.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-CdrrwvXk.js";
+import { t } from "./Button-DFcjZsF4.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {

package/dist/{Checkbox-DU_KGp-P.js → Checkbox-X7FrR_6F.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { P as t } from "./esm-zUd-Cmgs.js";
+import { F as t } from "./esm-DQBytmnt.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-CGBo8nwy.js → CodeBlock-rPC0sIvR.js}

@@ -1,8 +1,8 @@
 "use client";
 import { r as e, s as t } from "./utils-bAjntFD8.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { q as r, tt as i } from "./esm-zUd-Cmgs.js";
-import { t as a } from "./Button-CdrrwvXk.js";
+import { J as r, nt as i } from "./esm-DQBytmnt.js";
+import { t as a } from "./Button-DFcjZsF4.js";
 import { t as o } from "./FrameworkIcon-B8GmMx0r.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";
@@ -23,8 +23,8 @@ var h = {
 }, g = null;
 function _() {
 	return g ||= Promise.all([
-		import("./prism-light-oph9ikSp.js"),
-		import("./create-element-DvDqDt-f.js").then((e) => e.n),
+		import("./prism-light-D9OePufj.js"),
+		import("./create-element-DHbI55TT.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),

package/dist/{CookiePolicyModal-xPb4G_hM.js → CookiePolicyModal-D-IOZSoU.js}

@@ -1,6 +1,6 @@
 "use client";
-import { t as e } from "./esm-zUd-Cmgs.js";
-import { t } from "./Button-CdrrwvXk.js";
+import { n as e } from "./esm-DQBytmnt.js";
+import { t } from "./Button-DFcjZsF4.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-DWZ0DflU.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-72gVieQO.js → CopyCode-DS2T69as.js}

@@ -1,8 +1,8 @@
 "use client";
 import { r as e, s as t } from "./utils-bAjntFD8.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { q as r, tt as i } from "./esm-zUd-Cmgs.js";
-import { t as a } from "./Button-CdrrwvXk.js";
+import { J as r, nt as i } from "./esm-DQBytmnt.js";
+import { t as a } from "./Button-DFcjZsF4.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-DLRtYhFa.js → Dropdown-Ck7IASlc.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { tt as t } from "./esm-zUd-Cmgs.js";
+import { nt as t } from "./esm-DQBytmnt.js";
 import { t as n } from "./Icon-DJTgdvsG.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-DGI5uxql.js";
 import { a as b, i as x, n as S, r as C, t as w } from "./dist-BAH-0dTg.js";

package/dist/{Features-BS-_cksu.js → Features-BQ5o3wcc.js}

@@ -1,7 +1,7 @@
 "use client";
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Icon-DJTgdvsG.js";
-import { t as n } from "./Typography-DI1AkqiO.js";
+import { t } from "./Typography-DI1AkqiO.js";
+import { t as n } from "./Icon-DJTgdvsG.js";
 import { createContext as r, forwardRef as i, useContext as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {
@@ -14,10 +14,10 @@ var c = {
 };
 //#endregion
 //#region lib/components/Features/index.tsx
-function l({ iconColor: e, descriptionColor: t }) {
+function l({ iconColor: e, descriptionColor: n }) {
 	return {
-		...e && { "--hsui-feature-icon-color": n[e] },
-		...t && { "--hsui-feature-description-color": n[t] }
+		...e && { "--hsui-feature-icon-color": t[e] },
+		...n && { "--hsui-feature-description-color": t[n] }
 	};
 }
 var u = r(!1), d = i(({ columns: t = 3, iconColor: n, descriptionColor: r, className: i, style: a, children: s, ...d }, f) => /* @__PURE__ */ o(u.Provider, {
@@ -39,7 +39,7 @@ var u = r(!1), d = i(({ columns: t = 3, iconColor: n, descriptionColor: r, class
 	})
 }));
 d.displayName = "Features";
-var f = i(({ icon: n, title: r, headingLevel: i, iconColor: d, descriptionColor: f, className: p, style: m, children: h, ...g }, _) => {
+var f = i(({ icon: t, title: r, headingLevel: i, iconColor: d, descriptionColor: f, className: p, style: m, children: h, ...g }, _) => {
 	let v = a(u) ? "li" : "div", y = i ? `h${i}` : null;
 	return /* @__PURE__ */ s(v, {
 		className: e("hsui-feature-item", p, c.item),
@@ -55,8 +55,8 @@ var f = i(({ icon: n, title: r, headingLevel: i, iconColor: d, descriptionColor:
 		children: [/* @__PURE__ */ o("span", {
 			className: c.icon,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ o(t, {
-				name: n,
+			children: /* @__PURE__ */ o(n, {
+				name: t,
 				size: 20
 			})
 		}), y ? /* @__PURE__ */ s("div", {

package/dist/{Footer-CqtCkr_g.js → Footer-C2tXo3oR.js}

@@ -1,15 +1,15 @@
 "use client";
 import { r as e } from "./utils-bAjntFD8.js";
-import { J as t, tt as n } from "./esm-zUd-Cmgs.js";
-import { t as r } from "./Button-CdrrwvXk.js";
+import { Y as t, nt as n } from "./esm-DQBytmnt.js";
+import { t as r } from "./Button-DFcjZsF4.js";
 import { t as i } from "./Container-BDssaLig.js";
 import { t as a } from "./DiscordInvite-DfPVlJ5G.js";
 import { t as o } from "./Logo-Bz0G2G-k.js";
-import { t as s } from "./NewsletterSignup-BPLup66s.js";
-import { t as c } from "./FooterBottom-B8GCRg2o.js";
-import { t as l } from "./FooterHelp-D5X2Pco9.js";
-import { t as u } from "./FooterLinks-yn_sgcbu.js";
-import { t as d } from "./YoutubeModal-j51vfjYk.js";
+import { t as s } from "./NewsletterSignup-CTbjNSnk.js";
+import { t as c } from "./FooterBottom-BPuLsXI1.js";
+import { t as l } from "./FooterHelp-99gRcRar.js";
+import { t as u } from "./FooterLinks-DXTz-d8e.js";
+import { t as d } from "./YoutubeModal-CXSHjsEd.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",

package/dist/{FooterBottom-B8GCRg2o.js → FooterBottom-BPuLsXI1.js}

@@ -1,12 +1,12 @@
 "use client";
 import { a as e, t } from "./utils-bAjntFD8.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 { n as u } from "./Typography-DI1AkqiO.js";
-import { t as d } from "./CookiePolicyModal-xPb4G_hM.js";
+import { n } from "./Typography-DI1AkqiO.js";
+import { a as r, c as i, i as a, n as o, o as s, r as c, s as l, t as u } from "./fa-B95RwBpz.js";
+import { t as d } from "./CookiePolicyModal-D-IOZSoU.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) {
-	return r({
+	return i({
 		tag: "svg",
 		attr: { viewBox: "0 0 512 512" },
 		child: [{
@@ -30,12 +30,12 @@ function _(e, t) {
 }
 var v = [
 	{
-		icon: /* @__PURE__ */ p(o, {}),
+		icon: /* @__PURE__ */ p(s, {}),
 		url: "https://stackoverflow.com/questions/tagged/highcharts",
 		label: "StackOverlow"
 	},
 	{
-		icon: /* @__PURE__ */ p(s, {}),
+		icon: /* @__PURE__ */ p(c, {}),
 		url: "https://github.com/highcharts/highcharts",
 		label: "GitHub"
 	},
@@ -45,33 +45,33 @@ var v = [
 		label: "X"
 	},
 	{
-		icon: /* @__PURE__ */ p(a, {}),
+		icon: /* @__PURE__ */ p(o, {}),
 		url: "https://www.facebook.com/Highcharts",
 		label: "Facebook"
 	},
 	{
-		icon: /* @__PURE__ */ p(i, {}),
+		icon: /* @__PURE__ */ p(a, {}),
 		url: "https://www.instagram.com/highsoftcompany/",
 		label: "Instagram"
 	},
 	{
-		icon: /* @__PURE__ */ p(n, {}),
+		icon: /* @__PURE__ */ p(r, {}),
 		url: "https://www.linkedin.com/company/highsoft",
 		label: "LinkedIn"
 	},
 	{
-		icon: /* @__PURE__ */ p(l, {}),
+		icon: /* @__PURE__ */ p(u, {}),
 		url: "https://www.highcharts.com/highcharts-discord/",
 		label: "Discord"
 	},
 	{
-		icon: /* @__PURE__ */ p(c, {}),
+		icon: /* @__PURE__ */ p(l, {}),
 		url: "https://www.youtube.com/channel/UCzxXofPTQ0DoT7uIy3Fxw7A",
 		label: "Youtube"
 	}
 ];
-function y({ link: n = "a", host: r = "https://www.highcharts.com" }) {
-	let i = e(`(min-width: ${t.tablet}px) and (max-width: ${t.laptop - 1}px)`), a = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m(u, {
+function y({ link: r = "a", host: i = "https://www.highcharts.com" }) {
+	let a = e(`(min-width: ${t.tablet}px) and (max-width: ${t.laptop - 1}px)`), o = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m(n, {
 		as: "span",
 		size: 100,
 		color: "secondary",
@@ -84,18 +84,18 @@ function y({ link: n = "a", host: r = "https://www.highcharts.com" }) {
 	}), /* @__PURE__ */ m("div", {
 		className: g.bottomLinks,
 		children: [
-			/* @__PURE__ */ p(n, {
-				href: _("https://www.highcharts.com/blog/article/accessibility-statement/", r),
-				children: /* @__PURE__ */ p(u, {
+			/* @__PURE__ */ p(r, {
+				href: _("https://www.highcharts.com/blog/article/accessibility-statement/", i),
+				children: /* @__PURE__ */ p(n, {
 					as: "span",
 					size: 100,
 					color: "secondary",
 					children: "Accessibility Statement"
 				})
 			}),
-			/* @__PURE__ */ p(n, {
-				href: _("https://www.highcharts.com/sitemap.xml", r),
-				children: /* @__PURE__ */ p(u, {
+			/* @__PURE__ */ p(r, {
+				href: _("https://www.highcharts.com/sitemap.xml", i),
+				children: /* @__PURE__ */ p(n, {
 					as: "span",
 					size: 100,
 					color: "secondary",
@@ -105,7 +105,7 @@ function y({ link: n = "a", host: r = "https://www.highcharts.com" }) {
 			/* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: () => window.CookieConsent?.renew(),
-				children: /* @__PURE__ */ p(u, {
+				children: /* @__PURE__ */ p(n, {
 					as: "span",
 					size: 100,
 					color: "secondary",
@@ -114,7 +114,7 @@ function y({ link: n = "a", host: r = "https://www.highcharts.com" }) {
 			}),
 			/* @__PURE__ */ p(d, {})
 		]
-	})] }), o = /* @__PURE__ */ p("ul", {
+	})] }), s = /* @__PURE__ */ p("ul", {
 		className: g.socials,
 		children: v.map(({ icon: e, url: t, label: n }, r) => /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p("a", {
 			href: t,
@@ -124,10 +124,10 @@ function y({ link: n = "a", host: r = "https://www.highcharts.com" }) {
 	});
 	return /* @__PURE__ */ p("div", {
 		className: g.bottom,
-		children: i ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		children: a ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
 			className: g.tabletBottomLeft,
-			children: a
-		}), o] }) : /* @__PURE__ */ m(f, { children: [a, o] })
+			children: o
+		}), s] }) : /* @__PURE__ */ m(f, { children: [o, s] })
 	});
 }
 //#endregion

package/dist/{FooterHelp-D5X2Pco9.js → FooterHelp-99gRcRar.js}

@@ -1,9 +1,9 @@
 "use client";
 import { a as e, t } from "./utils-bAjntFD8.js";
-import { d as n, g as r } from "./esm-zUd-Cmgs.js";
-import { t as i } from "./Icon-DJTgdvsG.js";
-import { o as a, r as o } from "./fa-B95RwBpz.js";
-import { n as s } from "./Typography-DI1AkqiO.js";
+import { _ as n, f as r } from "./esm-DQBytmnt.js";
+import { n as i } from "./Typography-DI1AkqiO.js";
+import { t as a } from "./Icon-DJTgdvsG.js";
+import { o, r as s } from "./fa-B95RwBpz.js";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {
 	help: "vfdIHG_help",
@@ -23,8 +23,8 @@ function d(e, t) {
 }
 var f = [
 	{
-		icon: /* @__PURE__ */ c(i, {
-			name: n,
+		icon: /* @__PURE__ */ c(a, {
+			name: r,
 			size: 20
 		}),
 		subtitle: "Ask tech and sales questions with",
@@ -32,8 +32,8 @@ var f = [
 		url: "https://www.highcharts.com/chat/gpt/"
 	},
 	{
-		icon: /* @__PURE__ */ c(i, {
-			name: a,
+		icon: /* @__PURE__ */ c(a, {
+			name: o,
 			size: 20
 		}),
 		subtitle: "Search answers on",
@@ -41,8 +41,8 @@ var f = [
 		url: "https://stackoverflow.com/questions/tagged/highcharts"
 	},
 	{
-		icon: /* @__PURE__ */ c(i, {
-			name: o,
+		icon: /* @__PURE__ */ c(a, {
+			name: s,
 			size: 20
 		}),
 		subtitle: "Report issues on",
@@ -50,8 +50,8 @@ var f = [
 		url: "https://github.com/highcharts/highcharts/issues"
 	},
 	{
-		icon: /* @__PURE__ */ c(i, {
-			name: r,
+		icon: /* @__PURE__ */ c(a, {
+			name: n,
 			size: 20
 		}),
 		subtitle: "Contact sales about",
@@ -60,53 +60,53 @@ var f = [
 	}
 ];
 function p({ link: n = "a", host: r = "https://www.highcharts.com" }) {
-	let i = e(`(max-width: ${t.tablet - 1}px)`);
+	let a = e(`(max-width: ${t.tablet - 1}px)`);
 	return /* @__PURE__ */ l("div", {
 		className: u.help,
 		children: [/* @__PURE__ */ l("div", {
 			className: u.helpWays,
-			children: [/* @__PURE__ */ c(s, {
+			children: [/* @__PURE__ */ c(i, {
 				as: "span",
 				size: 100,
 				weight: "semi",
 				color: "primary",
 				className: u.helpEyebrow,
 				children: "Ways to get help"
-			}), /* @__PURE__ */ l(s, {
+			}), /* @__PURE__ */ l(i, {
 				as: "p",
 				size: 75,
 				color: "secondary",
 				className: u.helpSchedule,
 				children: [
 					"We operate in CET",
-					i ? " " : /* @__PURE__ */ c("br", {}),
+					a ? " " : /* @__PURE__ */ c("br", {}),
 					"Monday - Friday"
 				]
 			})]
-		}), f.map(({ icon: e, subtitle: t, title: i, url: a }, o) => /* @__PURE__ */ l(n, {
-			href: d(a, r),
+		}), f.map(({ icon: e, subtitle: t, title: a, url: o }, s) => /* @__PURE__ */ l(n, {
+			href: d(o, r),
 			className: u.helpItem,
 			children: [/* @__PURE__ */ c("div", {
 				className: u.helpBall,
 				children: e
 			}), /* @__PURE__ */ l("div", {
 				className: u.helpContent,
-				children: [/* @__PURE__ */ c(s, {
+				children: [/* @__PURE__ */ c(i, {
 					as: "span",
 					size: 75,
 					color: "secondary",
 					className: u.helpSubtitle,
 					children: t
-				}), /* @__PURE__ */ c(s, {
+				}), /* @__PURE__ */ c(i, {
 					as: "span",
 					size: 100,
 					weight: "semi",
 					color: "primary",
 					className: u.helpTitle,
-					children: i
+					children: a
 				})]
 			})]
-		}, o))]
+		}, s))]
 	});
 }
 //#endregion

package/dist/{FooterLinks-yn_sgcbu.js → FooterLinks-DXTz-d8e.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { I as t } from "./esm-zUd-Cmgs.js";
-import { t as n } from "./Icon-DJTgdvsG.js";
-import { n as r } from "./Typography-DI1AkqiO.js";
-import { t as i } from "./Label-B-Xt6XQQ.js";
+import { L as t } from "./esm-DQBytmnt.js";
+import { n } from "./Typography-DI1AkqiO.js";
+import { t as r } from "./Icon-DJTgdvsG.js";
+import { t as i } from "./Label-DTIv_3zs.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 var s = {
 	externalIcon: "N4RQEq_externalIcon",
@@ -267,7 +267,7 @@ var l = {
 function u({ link: u = "a", host: d = "https://www.highcharts.com" }) {
 	return /* @__PURE__ */ a("div", {
 		className: s.links,
-		children: Object.entries(l).map(([l, f], p) => /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a(r, {
+		children: Object.entries(l).map(([l, f], p) => /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a(n, {
 			as: "h2",
 			size: 100,
 			weight: "medium",
@@ -278,12 +278,12 @@ function u({ link: u = "a", host: d = "https://www.highcharts.com" }) {
 			href: c(f, d),
 			className: e({ [s.tagged]: p }),
 			target: f.includes("highcharts.com") ? void 0 : "_blank",
-			children: [/* @__PURE__ */ o(r, {
+			children: [/* @__PURE__ */ o(n, {
 				as: "span",
 				size: 100,
 				color: "secondary",
 				className: s.linkLabel,
-				children: [l, !f.includes("highcharts.com") && /* @__PURE__ */ a(n, {
+				children: [l, !f.includes("highcharts.com") && /* @__PURE__ */ a(r, {
 					name: t,
 					size: 12,
 					className: s.externalIcon