highsoft-ui 1.0.173 → 1.0.175

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 />
@@ -924,7 +964,38 @@ A page that has a site `<Header>` already spends the top of a phone screen on th
 - The grab handle is `aria-hidden` — it's the touch affordance, and the labelled close button is the control. Under `prefers-reduced-motion: reduce` the sheet arrives and leaves instantly; dragging it still tracks the finger, since that's direct manipulation rather than authored motion.
 - Widening past 760px retires the sheet without moving focus — a resize isn't a dismissal.
 
-### PrevNextNav
+### Breadcrumb
+The trail to the current page: linked items are the plain `Button` at size 100, the current page is a label marked `aria-current="page"`, separators are `Icon`s. Everything sits on one 24px row. Pass your router link as `link`.
+```tsx
+import Link from 'next/link'
+import { Tool02 } from '@untitled-ui/icons-react'
+
+<Breadcrumb
+  link={Link}
+  items={[
+    { label: 'Build', icon: Tool02, iconColor: 'brand' },   // a section name, not a link
+    { label: 'Charts', href: '/docs/charts' },
+    { label: 'Core chart types', href: '/docs/charts/chart-types' },
+    { label: '3D pyramid' }                                  // the current page, no href
+  ]}
+/>
+
+// Arrows or slashes instead of chevrons
+<Breadcrumb items={items} separator="arrow" />
+<Breadcrumb items={items} separator="slash" />
+```
+- **`items`:** `{ label, href?, icon?, iconColor? }`, first to last. An item with `href` is a link; the last item is the current page and never a link; an item without `href` elsewhere (a section name) is a plain label. `icon` is an `@untitled-ui/icons-react` component drawn through `Icon` at 12px; `iconColor="brand"` gives it `--HS-text-brand-default-alt`, the text stays as it is.
+- **`separator`:** `chevron` (default), `arrow`, `slash`. Icons sit in the tertiary tone, 2px from the items.
+- **`link`:** the component for links (Next's `Link`, a router's link); default `"a"`.
+- **`collapse`** (default `true`): with more than three items, the middle ones fold into an ellipsis below 760px (the Sidebar's drawer point) so the first and the last two stay.
+- **`label`:** the `<nav>`'s accessible name (default "Breadcrumb").
+- Labels longer than 28 characters are cut with an ellipsis so a long page title does not push the trail onto three lines.
+
+**Accessibility:**
+- A `<nav aria-label="Breadcrumb">` holding an `<ol>`, so a screen reader hears the trail in order and can jump to or skip it as a landmark.
+- Links are real links (the Button as `<a>` or the router's link), keyboard reachable with the Button's shared focus ring. The current page is not a link and carries `aria-current="page"`, so it is announced as where you are.
+- Separators and icons are `aria-hidden`; the folded middle items are `display: none`, so assistive technology gets the full trail only when it is visible. Nothing animates beyond the Button's own hover.
+
 Previous / next footer navigation — two link cards in a three-slot grid (`1fr auto 1fr`) with an optional centered back-to-overview button. For sequential content: docs articles, changelog versions, API option pages.
 
 ```tsx
@@ -1173,6 +1244,24 @@ 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
 
+### Breadcrumb
+- **Do** end with the current page as a plain item — never link the page you are on
+- **Don't** put the site root in the trail when the header already links it; start at the section
+- **Do** pass `link={Link}` in a Next app so the trail routes client-side
+- **Don't** add icons to every item — one on the section name is enough to mark the band
+
+### 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/Breadcrumb-CyaMrJfW.js

@@ -0,0 +1,80 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { Q as t, st as n } from "./esm-DQBytmnt.js";
+import { t as r } from "./Button-DFcjZsF4.js";
+import { t as i } from "./Icon-DJTgdvsG.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = {
+	brandIcon: "SKL1XW_brandIcon",
+	current: "SKL1XW_current",
+	ellipsis: "SKL1XW_ellipsis",
+	folds: "SKL1XW_folds",
+	item: "SKL1XW_item",
+	label: "SKL1XW_label",
+	list: "SKL1XW_list",
+	nav: "SKL1XW_nav",
+	sep: "SKL1XW_sep",
+	slash: "SKL1XW_slash",
+	text: "SKL1XW_text"
+}, l = a(({ items: a, separator: l = "chevron", link: u = "a", collapse: d = !0, label: f = "Breadcrumb", className: p, ...m }, h) => {
+	if (a.length === 0) return null;
+	let g = a.length - 1, _ = d && a.length > 3, v = l === "slash" ? /* @__PURE__ */ o("span", {
+		className: e(c.sep, c.slash),
+		"aria-hidden": "true",
+		children: "/"
+	}) : /* @__PURE__ */ o(i, {
+		name: l === "arrow" ? n : t,
+		size: 12,
+		className: c.sep,
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ o("nav", {
+		ref: h,
+		className: e("hsui-breadcrumb", c.nav, p),
+		"aria-label": f,
+		...m,
+		children: /* @__PURE__ */ o("ol", {
+			className: c.list,
+			children: a.map((t, n) => {
+				let a = n === g, l = _ && n > 0 && n < g - 1, d = t.icon ? /* @__PURE__ */ o(i, {
+					name: t.icon,
+					size: 12,
+					className: e(t.iconColor === "brand" && c.brandIcon),
+					"aria-hidden": "true"
+				}) : null, f = t.href && !a ? /* @__PURE__ */ o(r, {
+					as: u,
+					href: t.href,
+					variant: "plain",
+					size: 100,
+					iconLeft: d ?? void 0,
+					children: t.label
+				}) : /* @__PURE__ */ s("span", {
+					className: a ? c.current : c.text,
+					"aria-current": a ? "page" : void 0,
+					children: [d, /* @__PURE__ */ o("span", {
+						className: c.label,
+						children: t.label
+					})]
+				});
+				return /* @__PURE__ */ s("li", {
+					className: e(c.item, l && c.folds),
+					children: [
+						n > 0 && v,
+						f,
+						_ && n === 0 && /* @__PURE__ */ s("span", {
+							className: c.ellipsis,
+							"aria-hidden": "true",
+							children: [v, /* @__PURE__ */ o("span", {
+								className: c.text,
+								children: "…"
+							})]
+						})
+					]
+				}, n);
+			})
+		})
+	});
+});
+l.displayName = "Breadcrumb";
+//#endregion
+export { l as t };

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