highsoft-ui 1.0.173 → 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 />
@@ -1173,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/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