@selectwin/kit 0.1.195 → 0.1.197

package/README.md

@@ -1,47 +1,52 @@
-# @selectwin/kit
-
-Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
-gráficos) e tokens CSS, theme-aware (light/dark).
-
-Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
-não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
-
-## Uso
-
-```bash
-npm i @selectwin/kit
-```
-
-```tsx
-import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
-import { SelectButton, SelectSection } from '@selectwin/kit';
-```
-
-Idioma (0.1.187): os textos próprios do kit ("Página anterior", "Mais filtros", "Fechar"…) e os números que ele
-formata saem em português. Para inglês, envolva o app no `SelectLocaleProvider`:
-
-```tsx
-import { SelectLocaleProvider } from '@selectwin/kit';
-
-<SelectLocaleProvider locale="en">{app}</SelectLocaleProvider>; // 'pt-BR' | 'en'
-```
-
-A prop de texto do componente (`confirmLabel`, `noun`…) sempre ganha do dicionário.
-
-Tom corporativo (0.1.188; arredondado suave no botão desde a 0.1.192, em tudo desde a 0.1.193 e bem suave desde a
-0.1.195): campo e botão com 1rem (`--select-radius`, `--select-radius-button`), card 1.5rem, caixa de dentro e menu
-1rem, item de menu 0.75rem (`--select-radius-sm`); pílula só em selo. Rótulos de KPI
-e cabeçalho de tabela em caixa-alta espaçada. Nos gráficos, cor é situação: verde `--select-chart-paid` = pago, dourado
-`--select-chart-pending` (+ `-edge`) = pendente, `--select-chart-compare` = o período anterior, e os cinzas
-`--select-chart-ramp-1..4` para categoria. O app que quer o visual antigo sobrescreve esses tokens.
-
-Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
-**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
-
-## Build
-
-```bash
-npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
-```
-
-`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).
+# @selectwin/kit
+
+Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
+gráficos) e tokens CSS, theme-aware (light/dark).
+
+Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
+não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
+
+## Uso
+
+```bash
+npm i @selectwin/kit
+```
+
+```tsx
+import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
+import { SelectButton, SelectSection } from '@selectwin/kit';
+```
+
+Idioma (0.1.187): os textos próprios do kit ("Página anterior", "Mais filtros", "Fechar"…) e os números que ele
+formata saem em português. Para inglês, envolva o app no `SelectLocaleProvider`:
+
+```tsx
+import { SelectLocaleProvider } from '@selectwin/kit';
+
+<SelectLocaleProvider locale="en">{app}</SelectLocaleProvider>; // 'pt-BR' | 'en'
+```
+
+A prop de texto do componente (`confirmLabel`, `noun`…) sempre ganha do dicionário.
+
+Tom corporativo (0.1.188; arredondado suave no botão desde a 0.1.192, em tudo desde a 0.1.193 e bem suave desde a
+0.1.195): campo e botão com 1rem (`--select-radius`, `--select-radius-button`), card 1.5rem, caixa de dentro e menu
+1rem, item de menu 0.75rem (`--select-radius-sm`); pílula só em selo. Rótulos de KPI
+e cabeçalho de tabela em caixa-alta espaçada. Nos gráficos, cor é situação: verde `--select-chart-paid` = pago, dourado
+`--select-chart-pending` (+ `-edge`) = pendente, `--select-chart-compare` = o período anterior, e os cinzas
+`--select-chart-ramp-1..4` para categoria. O app que quer o visual antigo sobrescreve esses tokens.
+
+O card mostra o dado; a explicação vai no tooltip (0.1.196). O "i" `help` está no `SelectSection`, no
+`SelectDataTable`, no `SelectChartCard`, no `SelectKpiCard`, no `SelectListCard`, em cada número do `SelectMiniStats` e
+em cada balde do `SelectBalanceCard`. Na `SelectShareBar`, cada faixa tem o seu tooltip, e a nota da parte vai em
+`tip`; o que o clique faz vai em `selectHint`/`clearHint`, no lugar da linha `hint`.
+
+Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
+**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
+
+## Build
+
+```bash
+npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
+```
+
+`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).

package/dist/SelectBalanceCard.d.ts

@@ -4,8 +4,10 @@ export interface SelectBalanceBucket {
     cents: number | string | null | undefined;
     /** Optional icon embedded in the bucket's mini-card. */
     icon?: ReactNode;
-    /** One line of context under the amount (hero tiles only) — "Entra no disponível nos próximos dias". */
+    /** One line of context under the amount (hero tiles only) — a DADO ("Nada retido agora"), não a definição. */
     hint?: ReactNode;
+    /** O "i" ao lado do rótulo (0.1.196): o que o balde é ("Vira disponível no prazo de cada venda"). */
+    help?: ReactNode;
 }
 /** One context number on the hero's strip ("Entra nos próximos 7 dias", "Último saque · 23/09"). */
 export interface SelectBalanceMeta {
@@ -20,6 +22,9 @@ export interface SelectBalanceMeta {
 export interface SelectBalanceCardProps {
     availableCents: number | string | null | undefined;
     availableLabel?: string;
+    /** hero: o "i" ao lado do rótulo do saldo (0.1.197) — "Os próximos recebíveis abatem sozinhos" sob o saldo devedor.
+     *  A explicação não ocupa a linha do "Atualizado…" (dono, 03/11/2026: a explicação vai no tooltip). */
+    availableHelp?: ReactNode;
     /** Period-over-period variation of the available balance (percentage). `card` only. */
     delta?: number | null;
     buckets?: SelectBalanceBucket[];

package/dist/SelectListCard.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 type SelectListCardOwnProps = {
     title?: ReactNode;
+    /**
+     * O "i" ao lado do título (0.1.196), como o do `SelectSection`: a explicação do card mora aqui, não numa linha do
+     * corpo nem na descrição (dono, 03/11/2026 — o card mostra o dado).
+     */
+    help?: ReactNode;
     description?: ReactNode;
     /** Right-aligned action in the header (e.g. an "Add" button). */
     headerAction?: ReactNode;

package/dist/SelectMiniStats.d.ts

@@ -3,8 +3,10 @@ export interface SelectMiniStat {
     key?: string;
     label: ReactNode;
     value: ReactNode;
-    /** Linha de apoio sob o número ("398 de 1.284", "mediana entre compras"). */
+    /** Linha de apoio sob o número — DADO ("398 de 1.284"). A definição do número vai em `help`. */
     hint?: ReactNode;
+    /** O "i" ao lado do rótulo (0.1.196): como o número é contado ("mediana entre compras"). Não vira linha no card. */
+    help?: ReactNode;
 }
 type SelectMiniStatsOwnProps = {
     items: SelectMiniStat[];

package/dist/SelectShareBar.d.ts

@@ -10,6 +10,8 @@ export interface SelectShareItem {
     valueText?: ReactNode;
     /** Na legenda em fichas: o número em negrito ao lado do rótulo (a contagem). */
     count?: ReactNode;
+    /** A nota da parte, no tooltip da faixa e da ficha (0.1.196): "Inclui 203 Pix vencidos…". Nunca uma linha no card. */
+    tip?: ReactNode;
 }
 type SelectShareBarOwnProps = {
     items: SelectShareItem[];
@@ -23,9 +25,13 @@ type SelectShareBarOwnProps = {
     onSelect?: (key: string) => void;
     /** A parte escolhida (as outras esmaecem). */
     selected?: string | null;
-    /** Linha discreta sob a legenda. */
+    /** Linha discreta sob a legenda. Prefira o tooltip: a explicação vai no `tip` da parte e o clique em `selectHint`. */
     hint?: ReactNode;
+    /** Com `onSelect`, a última linha do tooltip de cada faixa e ficha (0.1.196). Padrão: "Clique para filtrar." */
+    selectHint?: ReactNode;
+    /** A mesma linha na parte escolhida. Padrão: "Clique de novo para ver todas." */
+    clearHint?: ReactNode;
 };
 export type SelectShareBarProps = SelectShareBarOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectShareBarOwnProps>;
-export declare function SelectShareBar({ items, label, aside, legend, size, onSelect, selected, hint, className, ...rest }: SelectShareBarProps): import("react").JSX.Element | null;
+export declare function SelectShareBar({ items, label, aside, legend, size, onSelect, selected, hint, selectHint, clearHint, className, ...rest }: SelectShareBarProps): import("react").JSX.Element | null;
 export {};

package/dist/index.js

@@ -12715,19 +12715,19 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 			})
 		})]
 	});
-}), Iu = r(function({ availableCents: e, availableLabel: t = "Saldo disponível", delta: n, buckets: r = [], action: i, variant: a = "card", updatedLabel: o, meta: s = [], status: c, loading: l = !1, className: u, ...d }, f) {
-	if (a === "hero") {
-		let n = (e, t = "1em") => /* @__PURE__ */ v("span", {
+}), Iu = r(function({ availableCents: e, availableLabel: t = "Saldo disponível", availableHelp: n, delta: r, buckets: i = [], action: a, variant: o = "card", updatedLabel: s, meta: c = [], status: l, loading: u = !1, className: d, ...f }, p) {
+	if (o === "hero") {
+		let r = (e, t = "1em") => /* @__PURE__ */ v("span", {
 			className: "select-skeleton select-balance__skel",
 			style: {
 				width: e,
 				height: t
 			}
-		}), a = (e) => e == null || e === "" ? "—" : /* @__PURE__ */ v(Gl, { cents: e });
+		}), o = (e) => e == null || e === "" ? "—" : /* @__PURE__ */ v(Gl, { cents: e });
 		return /* @__PURE__ */ v("div", {
-			ref: f,
-			...d,
-			className: `select-balance-hero${u ? " " + u : ""}`,
+			ref: p,
+			...f,
+			className: `select-balance-hero${d ? " " + d : ""}`,
 			children: /* @__PURE__ */ y("div", {
 				className: "select-balance-hero__layout",
 				children: [/* @__PURE__ */ y("section", {
@@ -12737,64 +12737,74 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 						/* @__PURE__ */ y("div", {
 							className: "select-balance-hero__top",
 							children: [
-								/* @__PURE__ */ v("span", {
-									className: "select-balance-hero__label",
-									children: t
+								/* @__PURE__ */ y("span", {
+									className: `select-balance-hero__label${n == null ? "" : " select-balance-hero__label--help"}`,
+									children: [t, n != null && /* @__PURE__ */ v(Mn, {
+										content: n,
+										label: `Sobre ${t}`
+									})]
 								}),
 								/* @__PURE__ */ v("span", {
 									className: "select-balance-hero__amount",
-									children: l ? n("11ch", "0.9em") : a(e)
+									children: u ? r("11ch", "0.9em") : o(e)
 								}),
-								o != null && !l && /* @__PURE__ */ y("span", {
+								s != null && !u && /* @__PURE__ */ y("span", {
 									className: "select-balance-hero__updated",
-									children: [/* @__PURE__ */ v(he, {}), o]
+									children: [/* @__PURE__ */ v(he, {}), s]
 								})
 							]
 						}),
-						s.length > 0 && /* @__PURE__ */ v("dl", {
+						c.length > 0 && /* @__PURE__ */ v("dl", {
 							className: "select-balance-hero__meta",
-							children: s.map((e, t) => /* @__PURE__ */ y("div", {
+							children: c.map((e, t) => /* @__PURE__ */ y("div", {
 								className: "select-balance-hero__metaitem",
-								children: [/* @__PURE__ */ v("dt", { children: e.label }), /* @__PURE__ */ v("dd", { children: l ? n("7ch") : e.cents != null && e.cents !== "" ? /* @__PURE__ */ y(_, { children: [e.prefix, /* @__PURE__ */ v(Gl, { cents: e.cents })] }) : e.value ?? "—" })]
+								children: [/* @__PURE__ */ v("dt", { children: e.label }), /* @__PURE__ */ v("dd", { children: u ? r("7ch") : e.cents != null && e.cents !== "" ? /* @__PURE__ */ y(_, { children: [e.prefix, /* @__PURE__ */ v(Gl, { cents: e.cents })] }) : e.value ?? "—" })]
 							}, t))
 						}),
-						(i || c) && /* @__PURE__ */ y("div", {
+						(a || l) && /* @__PURE__ */ y("div", {
 							className: "select-balance-hero__foot",
-							children: [i && /* @__PURE__ */ y("button", {
+							children: [a && /* @__PURE__ */ y("button", {
 								type: "button",
 								className: "select-balance-hero__cta",
-								onClick: i.onAction,
-								disabled: i.disabled || i.loading,
-								"aria-busy": i.loading || void 0,
-								children: [i.icon, i.content]
-							}), c && /* @__PURE__ */ y("span", {
-								className: `select-balance-hero__status select-balance-hero__status--${c.tone ?? "success"}`,
+								onClick: a.onAction,
+								disabled: a.disabled || a.loading,
+								"aria-busy": a.loading || void 0,
+								children: [a.icon, a.content]
+							}), l && /* @__PURE__ */ y("span", {
+								className: `select-balance-hero__status select-balance-hero__status--${l.tone ?? "success"}`,
 								children: [/* @__PURE__ */ v("span", {
 									className: "select-balance-hero__statusdot",
 									"aria-hidden": "true"
-								}), c.label]
+								}), l.label]
 							})]
 						})
 					]
-				}), r.length > 0 && /* @__PURE__ */ v("div", {
+				}), i.length > 0 && /* @__PURE__ */ v("div", {
 					className: "select-balance-hero__tiles",
-					children: r.map((e) => /* @__PURE__ */ y("div", {
+					children: i.map((e) => /* @__PURE__ */ y("div", {
 						className: "select-balance-hero__tile",
 						children: [
 							/* @__PURE__ */ y("div", {
 								className: "select-balance-hero__tilehead",
-								children: [e.icon && /* @__PURE__ */ v("span", {
-									className: "select-balance-hero__tileicon",
-									children: e.icon
-								}), /* @__PURE__ */ v("span", {
-									className: "select-balance-hero__tilelabel",
-									title: e.label,
-									children: e.label
-								})]
+								children: [
+									e.icon && /* @__PURE__ */ v("span", {
+										className: "select-balance-hero__tileicon",
+										children: e.icon
+									}),
+									/* @__PURE__ */ v("span", {
+										className: "select-balance-hero__tilelabel",
+										title: e.label,
+										children: e.label
+									}),
+									e.help != null && /* @__PURE__ */ v(Mn, {
+										content: e.help,
+										label: `Sobre ${e.label}`
+									})
+								]
 							}),
 							/* @__PURE__ */ v("span", {
 								className: "select-balance-hero__tileamount",
-								children: l ? n("8ch", "0.85em") : a(e.cents)
+								children: u ? r("8ch", "0.85em") : o(e.cents)
 							}),
 							e.hint != null && /* @__PURE__ */ v("span", {
 								className: "select-balance-hero__tilehint",
@@ -12807,22 +12817,22 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 		});
 	}
 	return /* @__PURE__ */ y("div", {
-		ref: f,
-		...d,
-		className: `select-balance${u ? " " + u : ""}`,
+		ref: p,
+		...f,
+		className: `select-balance${d ? " " + d : ""}`,
 		children: [/* @__PURE__ */ y("div", {
 			className: "select-balance__head",
 			children: [/* @__PURE__ */ v("h3", {
 				className: "select-balance__title",
 				children: t
-			}), i && /* @__PURE__ */ v(W, {
+			}), a && /* @__PURE__ */ v(W, {
 				variant: "primary",
 				size: "sm",
 				inline: !0,
-				onClick: i.onAction,
-				disabled: i.disabled,
-				loading: i.loading,
-				children: i.content
+				onClick: a.onAction,
+				disabled: a.disabled,
+				loading: a.loading,
+				children: a.content
 			})]
 		}), /* @__PURE__ */ y("div", {
 			className: "select-balance__body",
@@ -12831,23 +12841,26 @@ var Mu = "allow-scripts allow-same-origin allow-forms", Nu = 390, Pu = 1280, Fu
 				children: [/* @__PURE__ */ v("span", {
 					className: "select-balance__heroamount",
 					children: /* @__PURE__ */ v(Gl, { cents: e })
-				}), n != null && /* @__PURE__ */ v(ql, {
-					value: n,
+				}), r != null && /* @__PURE__ */ v(ql, {
+					value: r,
 					caption: "vs. período anterior"
 				})]
-			}), r.length > 0 && /* @__PURE__ */ v("div", {
+			}), i.length > 0 && /* @__PURE__ */ v("div", {
 				className: "select-balance__buckets",
-				children: r.map((e) => /* @__PURE__ */ y("div", {
+				children: i.map((e) => /* @__PURE__ */ y("div", {
 					className: "select-balance__bucket",
 					children: [e.icon && /* @__PURE__ */ v("span", {
 						className: "select-balance__bucketicon",
 						children: e.icon
 					}), /* @__PURE__ */ y("span", {
 						className: "select-balance__bucketbody",
-						children: [/* @__PURE__ */ v("span", {
+						children: [/* @__PURE__ */ y("span", {
 							className: "select-balance__bucketlabel",
 							title: e.label,
-							children: e.label
+							children: [e.label, e.help != null && /* @__PURE__ */ v(Mn, {
+								content: e.help,
+								label: `Sobre ${e.label}`
+							})]
 						}), /* @__PURE__ */ v("span", {
 							className: "select-balance__bucketamount",
 							children: /* @__PURE__ */ v(Gl, { cents: e.cents })
@@ -15073,17 +15086,38 @@ function Yd({ items: e, className: t, ...n }) {
 }
 //#endregion
 //#region src/SelectShareBar.tsx
-function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm", onSelect: a, selected: o, hint: s, className: c, ...l }) {
-	let u = e.map((e, t) => ({
+function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm", onSelect: a, selected: o, hint: s, selectHint: c = "Clique para filtrar.", clearHint: l = "Clique de novo para ver todas.", className: u, ...d }) {
+	let f = e.map((e, t) => ({
 		...e,
 		key: e.key ?? e.label,
 		color: e.color ?? X(t)
-	})).filter((e) => e.value > 0), d = u.reduce((e, t) => e + t.value, 0);
-	if (d <= 0) return null;
-	let f = (e) => Math.round(e / d * 100), p = (e) => o != null && o !== e;
+	})).filter((e) => e.value > 0), p = f.reduce((e, t) => e + t.value, 0);
+	if (p <= 0) return null;
+	let m = (e) => Math.round(e / p * 100), h = (e) => o != null && o !== e, g = (e, t) => {
+		let n = a ? o === e.key ? l : c : null;
+		return !t && e.tip == null && n == null ? null : /* @__PURE__ */ y("span", {
+			className: "select-sharebar__tip",
+			children: [
+				t && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("strong", { children: e.label }), /* @__PURE__ */ y("span", { children: [
+					e.count != null && /* @__PURE__ */ y(_, { children: [e.count, " · "] }),
+					e.valueText != null && /* @__PURE__ */ y(_, { children: [e.valueText, " · "] }),
+					m(e.value),
+					"%"
+				] })] }),
+				e.tip != null && /* @__PURE__ */ v("span", { children: e.tip }),
+				n != null && /* @__PURE__ */ v("span", {
+					className: "select-sharebar__tipaction",
+					children: n
+				})
+			]
+		});
+	}, b = (e, t) => e == null ? t : /* @__PURE__ */ v(wn, {
+		content: e,
+		children: t
+	});
 	return /* @__PURE__ */ y("div", {
-		...l,
-		className: `select-sharebar select-sharebar--${i}${r === "chips" ? " select-sharebar--chips" : ""}${c ? " " + c : ""}`,
+		...d,
+		className: `select-sharebar select-sharebar--${i}${r === "chips" ? " select-sharebar--chips" : ""}${u ? " " + u : ""}`,
 		children: [
 			(t != null || n != null) && /* @__PURE__ */ y("div", {
 				className: "select-sharebar__head",
@@ -15092,28 +15126,31 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 			/* @__PURE__ */ v("div", {
 				className: "select-sharebar__track",
 				role: a ? "group" : "img",
-				"aria-label": u.map((e) => `${e.label} ${f(e.value)}%`).join(", "),
-				children: u.map((e) => a ? /* @__PURE__ */ v("button", {
-					type: "button",
-					className: `select-sharebar__seg select-sharebar__seg--btn${p(e.key) ? " is-dim" : ""}`,
-					style: {
-						width: `${e.value / d * 100}%`,
-						background: e.color
-					},
-					"aria-label": `${e.label}: ${f(e.value)}%`,
-					"aria-pressed": o === e.key,
-					onClick: () => a(e.key)
-				}, e.key) : /* @__PURE__ */ v("span", {
-					className: `select-sharebar__seg${p(e.key) ? " is-dim" : ""}`,
-					style: {
-						width: `${e.value / d * 100}%`,
-						background: e.color
-					}
+				"aria-label": f.map((e) => `${e.label} ${m(e.value)}%`).join(", "),
+				children: f.map((e) => /* @__PURE__ */ v(wn, {
+					content: g(e, !0),
+					children: a ? /* @__PURE__ */ v("button", {
+						type: "button",
+						className: `select-sharebar__seg select-sharebar__seg--btn${h(e.key) ? " is-dim" : ""}`,
+						style: {
+							width: `${e.value / p * 100}%`,
+							background: e.color
+						},
+						"aria-label": `${e.label}: ${m(e.value)}%`,
+						"aria-pressed": o === e.key,
+						onClick: () => a(e.key)
+					}) : /* @__PURE__ */ v("span", {
+						className: `select-sharebar__seg${h(e.key) ? " is-dim" : ""}`,
+						style: {
+							width: `${e.value / p * 100}%`,
+							background: e.color
+						}
+					})
 				}, e.key))
 			}),
 			r === "chips" ? /* @__PURE__ */ v("ul", {
 				className: "select-sharebar__chips",
-				children: u.map((e) => {
+				children: f.map((e) => {
 					let t = /* @__PURE__ */ y(_, { children: [
 						/* @__PURE__ */ v("span", {
 							className: "select-sharebar__dot",
@@ -15133,20 +15170,20 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 							children: e.valueText
 						})
 					] });
-					return /* @__PURE__ */ v("li", { children: a ? /* @__PURE__ */ v("button", {
+					return /* @__PURE__ */ v("li", { children: b(g(e, !1), a ? /* @__PURE__ */ v("button", {
 						type: "button",
-						className: `select-sharebar__chip select-sharebar__chip--btn${o === e.key ? " is-selected" : ""}${p(e.key) ? " is-dim" : ""}`,
+						className: `select-sharebar__chip select-sharebar__chip--btn${o === e.key ? " is-selected" : ""}${h(e.key) ? " is-dim" : ""}`,
 						"aria-pressed": o === e.key,
 						onClick: () => a(e.key),
 						children: t
 					}) : /* @__PURE__ */ v("span", {
 						className: "select-sharebar__chip",
 						children: t
-					}) }, e.key);
+					})) }, e.key);
 				})
 			}) : /* @__PURE__ */ v("ul", {
 				className: "select-sharebar__legend",
-				children: u.map((e) => /* @__PURE__ */ y("li", {
+				children: f.map((e) => /* @__PURE__ */ y("li", {
 					className: "select-sharebar__item",
 					children: [
 						/* @__PURE__ */ v("span", {
@@ -15154,17 +15191,20 @@ function Xd({ items: e, label: t, aside: n, legend: r = "list", size: i = "sm",
 							style: { background: e.color },
 							"aria-hidden": "true"
 						}),
-						/* @__PURE__ */ v("span", {
+						b(e.tip == null ? null : /* @__PURE__ */ v("span", {
+							className: "select-sharebar__tip",
+							children: e.tip
+						}), /* @__PURE__ */ v("span", {
 							className: "select-sharebar__label",
 							children: e.label
-						}),
+						})),
 						e.valueText != null && /* @__PURE__ */ v("span", {
 							className: "select-sharebar__value",
 							children: e.valueText
 						}),
 						/* @__PURE__ */ y("span", {
 							className: "select-sharebar__pct",
-							children: [f(e.value), "%"]
+							children: [m(e.value), "%"]
 						})
 					]
 				}, e.key))
@@ -15420,9 +15460,9 @@ var Zd = r(function({ value: e, max: t = 100, size: n = 64, thickness: r, tone:
 		children: e.map((e, t) => /* @__PURE__ */ y("div", {
 			className: "select-ministats__item",
 			children: [
-				/* @__PURE__ */ v("dt", {
-					className: "select-ministats__label",
-					children: e.label
+				/* @__PURE__ */ y("dt", {
+					className: `select-ministats__label${e.help == null ? "" : " select-ministats__label--help"}`,
+					children: [e.label, e.help != null && /* @__PURE__ */ v(Mn, { content: e.help })]
 				}),
 				/* @__PURE__ */ v("dd", {
 					className: "select-ministats__value",
@@ -30466,38 +30506,38 @@ var Vp = r(function({ name: e, price: t, priceSuffix: n, headerAction: r, summar
 			})]
 		})]
 	});
-}), Hp = r(function({ title: e, description: t, headerAction: n, footer: r, dense: i = !1, spread: a = !1, flush: o = !1, children: s, className: c, ...l }, u) {
+}), Hp = r(function({ title: e, help: t, description: n, headerAction: r, footer: i, dense: a = !1, spread: o = !1, flush: s = !1, children: c, className: l, ...u }, d) {
 	return /* @__PURE__ */ y("div", {
-		ref: u,
-		...l,
-		className: `select-listcard${i ? " select-listcard--dense" : ""}${a ? " select-listcard--spread" : ""}${o ? " select-listcard--flush" : ""}${c ? " " + c : ""}`,
+		ref: d,
+		...u,
+		className: `select-listcard${a ? " select-listcard--dense" : ""}${o ? " select-listcard--spread" : ""}${s ? " select-listcard--flush" : ""}${l ? " " + l : ""}`,
 		children: [
-			(e || n) && /* @__PURE__ */ y("div", {
+			(e || r) && /* @__PURE__ */ y("div", {
 				className: "select-listcard__head",
 				children: [/* @__PURE__ */ y("div", {
 					className: "select-listcard__heading",
-					children: [e && /* @__PURE__ */ v("h3", {
-						className: "select-listcard__title",
-						children: e
-					}), t && /* @__PURE__ */ v("p", {
+					children: [e && /* @__PURE__ */ y("h3", {
+						className: `select-listcard__title${t == null ? "" : " select-listcard__title--help"}`,
+						children: [e, t != null && /* @__PURE__ */ v(Mn, { content: t })]
+					}), n && /* @__PURE__ */ v("p", {
 						className: "select-listcard__desc",
-						children: t
+						children: n
 					})]
-				}), n && /* @__PURE__ */ v("div", {
+				}), r && /* @__PURE__ */ v("div", {
 					className: "select-listcard__headeraction",
-					children: n
+					children: r
 				})]
 			}),
 			/* @__PURE__ */ v("div", {
 				className: "select-listcard__body",
 				children: /* @__PURE__ */ v("div", {
 					className: "select-listcard__rows",
-					children: s
+					children: c
 				})
 			}),
-			r && /* @__PURE__ */ v("div", {
+			i && /* @__PURE__ */ v("div", {
 				className: "select-listcard__footer",
-				children: r
+				children: i
 			})
 		]
 	});