npm - highsoft-ui - Versions diffs - 1.0.140 → 1.0.141 - Mend

highsoft-ui 1.0.140 → 1.0.141

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/README.md CHANGED Viewed

@@ -1,13 +1,44 @@
 # Highsoft UI
+The Highsoft design system — a React component library, design tokens, a Storybook component explorer, and the Astro docs site that documents them.
+**Live**
+- Design site — https://design.highdev.dev
+- Storybook (component explorer) — https://storybook.highdev.dev
+> The complete reference lives in [`CLAUDE.md`](./CLAUDE.md): every component's props, the semantic token rules, and the do's & don'ts. It ships inside the published package too.
+## What's in this repo
+| Path | What it is | Build | Ships to |
+| --- | --- | --- | --- |
+| `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 |
+| `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.
+## For AI agents / LLMs
+The design system is self-describing for coding agents. A prompt like _"use guidelines from design.highdev.dev"_ should land here:
+- `/llms.txt` — concise guide: install, core rules, and a **"which component when"** decision matrix
+- `/llms-full.txt` — the full guide **plus the complete component API**
+- `/api.json` — machine-readable component API (props, types, defaults, enums)
+- `/guidelines` → redirects to `/llms.txt`
+`/llms-full.txt` and `/api.json` are **generated from `lib/` source** by [`scripts/extract-component-api.mjs`](./scripts/extract-component-api.mjs) (runs on `predev` / `prebuild:app`), so they can't drift from the real props. Every page also advertises `/llms.txt` via a `<link rel="alternate">` in its `<head>`.
 ## Development
 ```sh
 npm i
-npm run dev
+npm run dev          # docs site (Astro) → http://localhost:4321
+npm run storybook    # component explorer → http://localhost:6006
 ```
-This will run the test application located in `src` that uses the component library located in `lib`.
+Both run against the live library in `lib/`, so editing a component hot-reloads here.
 ## Usage
@@ -17,7 +48,7 @@ This will run the test application located in `src` that uses the component libr
 npm i highsoft-ui
 ```
-2. Load the the css somehow:
+2. Load the CSS — `highsoft-ui/css` bundles the component styles, resets **and** the design tokens (tokens drive the colors and dark mode):
 ```scss
 @import 'highsoft-ui/css';
@@ -31,6 +62,28 @@ import { Button } from 'highsoft-ui';
 <Button variant="brand" size={300}>Hello</Button>
 ```
+### Design tokens only
+Need just the tokens — plain CSS/SCSS, WordPress blocks, no React? Install the tokens package on its own:
+```sh
+npm i highsoft-design-tokens
+```
+```scss
+// the CSS custom properties — drives the colors and dark mode
+@import 'highsoft-design-tokens/dist/css/tokens.css';
+```
+It also ships SCSS mixins, e.g. the link styles:
+```scss
+@use 'highsoft-design-tokens/dist/scss/mixins/links' as *;
+a       { @include link; }        // subtle underline
+a.fancy { @include link(fancy); } // animated slide-in underline
+```
 ### PHP
 How to use components that need hydration (running client-side react) in PHP.

package/dist/{Button-Dc8NFRWQ.js → Button-awCDIEXQ.js} RENAMED Viewed

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

package/dist/{ButtonGroup-CYmrw7gQ.js → ButtonGroup-Cwn0djAz.js} RENAMED Viewed

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

package/dist/{Checkbox-CErz7eBz.js → Checkbox-CrF45NBl.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { S as t } from "./esm-CDDjSK4f.js";
+import { C as t } from "./esm-VMwHsplm.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-BreFXfK5.js → CodeBlock-BIdeK3gz.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { L as r, N as i } from "./esm-CDDjSK4f.js";
-import { t as a } from "./Button-Dc8NFRWQ.js";
+import { P as r, R as i } from "./esm-VMwHsplm.js";
+import { t as a } from "./Button-awCDIEXQ.js";
 import { t as o } from "./FrameworkIcon-Ds6WrxO0.js";
 import { Fragment as s, forwardRef as c, useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ var h = {
 }, g = null;
 function _() {
 	return g ||= Promise.all([
-		import("./prism-light-hml_uDoc.js"),
-		import("./create-element-B4K6TXvP.js").then((e) => e.n),
+		import("./prism-light-B3yrtgki.js"),
+		import("./create-element-CWTzyETe.js").then((e) => e.n),
 		import("./jsx-B57trbk8.js"),
 		import("./tsx-CJFgwLf7.js"),
 		import("./json-Bfzk2Msc.js"),
@@ -195,7 +195,7 @@ var C = {}, w = ({ children: e }) => /* @__PURE__ */ p("pre", {
 			}), /* @__PURE__ */ p(a, {
 				variant: B ? "success" : "transparent",
 				size: 100,
-				iconRight: p(B ? r : i, {}),
+				iconRight: p(B ? i : r, {}),
 				onClick: U,
 				"aria-label": B ? "Copied" : A,
 				className: h.copyBtn,

package/dist/{CookiePolicyModal-DdXZ2d36.js → CookiePolicyModal-CTA02JGV.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { t as e } from "./esm-CDDjSK4f.js";
-import { t } from "./Button-Dc8NFRWQ.js";
+import { t as e } from "./esm-VMwHsplm.js";
+import { t } from "./Button-awCDIEXQ.js";
 import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./dist-f0z6DapB.js";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/dist/{CopyCode-DH9Jh7PD.js → CopyCode-QiPNPCQN.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { r as e, s as t } from "./utils-K9S_6_Eq.js";
 import { t as n } from "./clsx-BWCAbrjV.js";
-import { L as r, N as i } from "./esm-CDDjSK4f.js";
-import { t as a } from "./Button-Dc8NFRWQ.js";
+import { P as r, R as i } from "./esm-VMwHsplm.js";
+import { t as a } from "./Button-awCDIEXQ.js";
 import { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 var u = {
@@ -26,7 +26,7 @@ var u = {
 		}), /* @__PURE__ */ c(a, {
 			variant: x ? "success" : "soft",
 			size: 200,
-			iconLeft: c(x ? r : i, {}),
+			iconLeft: c(x ? i : r, {}),
 			onClick: (e) => {
 				e.stopPropagation(), S();
 			},

package/dist/{Dropdown-DbXr3sb-.js → Dropdown-0Vn7yro7.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { L as t } from "./esm-CDDjSK4f.js";
+import { R as t } from "./esm-VMwHsplm.js";
 import { t as n } from "./Icon-VeXJMj8Q.js";
 import { _ as r, a as i, c as a, d as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, t as g, u as _, v, y } from "./es2015-DWa0ZZ7A.js";
 import { a as ee, i as b, n as te, r as x, t as S } from "./dist-CE9LFbij.js";

package/dist/{Footer-DtFs2Sgb.js → Footer-BlCmsIDd.js} RENAMED Viewed

@@ -1,14 +1,14 @@
 import { r as e } from "./utils-K9S_6_Eq.js";
-import { L as t, P as n } from "./esm-CDDjSK4f.js";
-import { t as r } from "./Button-Dc8NFRWQ.js";
+import { F as t, R as n } from "./esm-VMwHsplm.js";
+import { t as r } from "./Button-awCDIEXQ.js";
 import { t as i } from "./Container-BDssaLig.js";
 import { t as a } from "./DiscordInvite-CLYxexdH.js";
-import { t as o } from "./Logo-DTfFHBgU.js";
-import { t as s } from "./NewsletterSignup-Dw9YbhEh.js";
-import { t as c } from "./FooterBottom-Dtttgp4F.js";
-import { t as l } from "./FooterHelp-COjjt6h7.js";
-import { t as u } from "./FooterLinks-DZ0uH7HO.js";
-import { t as d } from "./YoutubeModal-DGj2INF0.js";
+import { t as o } from "./Logo-Bz0G2G-k.js";
+import { t as s } from "./NewsletterSignup-BMRnrbw8.js";
+import { t as c } from "./FooterBottom-CF5ctutk.js";
+import { t as l } from "./FooterHelp-BthIJ2ye.js";
+import { t as u } from "./FooterLinks-BBOOTdRf.js";
+import { t as d } from "./YoutubeModal-CZgbaRB6.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 var m = {
 	discordCard: "_4W4F3q_discordCard",
@@ -29,7 +29,7 @@ function g() {
 	return /* @__PURE__ */ p(r, {
 		variant: "neutral",
 		onClick: () => i(o),
-		children: [o, f(a ? t : n, {})]
+		children: [o, f(a ? n : t, {})]
 	});
 }
 function _({ link: e = "a", host: t = "https://www.highcharts.com" }) {

package/dist/{FooterBottom-Dtttgp4F.js → FooterBottom-CF5ctutk.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
 import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./fa-B95RwBpz.js";
 import { t as u } from "./Typography-AvvBRu-u.js";
-import { t as d } from "./CookiePolicyModal-DdXZ2d36.js";
+import { t as d } from "./CookiePolicyModal-CTA02JGV.js";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region node_modules/react-icons/fa6/index.mjs
 function h(e) {

package/dist/{FooterHelp-COjjt6h7.js → FooterHelp-BthIJ2ye.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { a as e, t } from "./utils-K9S_6_Eq.js";
-import { f as n, s as r } from "./esm-CDDjSK4f.js";
+import { f as n, s as r } from "./esm-VMwHsplm.js";
 import { t as i } from "./Icon-VeXJMj8Q.js";
 import { o as a, r as o } from "./fa-B95RwBpz.js";
 import { t as s } from "./Typography-AvvBRu-u.js";

package/dist/{FooterLinks-DZ0uH7HO.js → FooterLinks-BBOOTdRf.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { w as t } from "./esm-CDDjSK4f.js";
+import { T as t } from "./esm-VMwHsplm.js";
 import { t as n } from "./Icon-VeXJMj8Q.js";
 import { t as r } from "./Typography-AvvBRu-u.js";
-import { t as i } from "./Label-BM4vL0vA.js";
+import { t as i } from "./Label-DdXaM1Bo.js";
 import a from "./components/icons/MadeInNorway.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {

package/dist/{Header-C7MCiwiz.js → Header-DY4mJxHm.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { a as e, d as t, i as n, o as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./clsx-BWCAbrjV.js";
-import { B as o, O as s, R as c, U as l, b as u, c as d, h as f, l as p, r as m, t as h, y as g } from "./esm-CDDjSK4f.js";
-import { t as _ } from "./Button-Dc8NFRWQ.js";
+import { V as o, W as s, b as c, c as l, g as u, k as d, l as f, r as p, t as m, x as h, z as g } from "./esm-VMwHsplm.js";
+import { t as _ } from "./Button-awCDIEXQ.js";
 import { t as v } from "./Container-BDssaLig.js";
-import { t as y } from "./Logo-DTfFHBgU.js";
-import { t as b } from "./PrefPanel-BG4jW8wc.js";
-import { t as x } from "./Search-CpJ2XTLG.js";
-import { t as S } from "./Label-BM4vL0vA.js";
-import { t as C } from "./Notification-BgmhEw6w.js";
+import { t as y } from "./Logo-Bz0G2G-k.js";
+import { t as b } from "./PrefPanel-DDD8R_-o.js";
+import { t as x } from "./Search-CDOpNByw.js";
+import { t as S } from "./Label-DdXaM1Bo.js";
+import { t as C } from "./Notification-DM31Uzfz.js";
 import { useEffect as w, useRef as T, useState as E } from "react";
 import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
 var A = {
@@ -75,22 +75,22 @@ var A = {
 	{
 		title: "Products",
 		url: "https://www.highcharts.com/products/",
-		icon: /* @__PURE__ */ O(c, {})
+		icon: /* @__PURE__ */ O(g, {})
 	},
 	{
 		title: "Demos",
 		url: "https://www.highcharts.com/demo",
-		icon: /* @__PURE__ */ O(f, {})
+		icon: /* @__PURE__ */ O(u, {})
 	},
 	{
 		title: "Support",
 		url: "https://www.highcharts.com/support/",
-		icon: /* @__PURE__ */ O(g, {})
+		icon: /* @__PURE__ */ O(c, {})
 	},
 	{
 		title: "Resources",
 		url: "https://www.highcharts.com/resources/",
-		icon: /* @__PURE__ */ O(s, {})
+		icon: /* @__PURE__ */ O(d, {})
 	},
 	{
 		title: "Pricing",
@@ -100,7 +100,7 @@ var A = {
 	{
 		title: "Blog",
 		url: "https://www.highcharts.com/blog/home/",
-		icon: /* @__PURE__ */ O(l, {})
+		icon: /* @__PURE__ */ O(s, {})
 	}
 ];
 function B(e, t) {
@@ -193,17 +193,17 @@ function Y() {
 		e && R(M, e);
 	}, [e]), null;
 }
-function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: l, cssVariable: f, position: g = "sticky" }) {
+function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host: c = "https://www.highcharts.com", pathname: u, cssVariable: d, position: g = "sticky" }) {
 	let S = e("(max-width: 374px)"), w = e("(max-width: 849px)"), M = e("(max-width: 1300px)"), N = G(t), P = T(null), [F, L] = E(!1), [V, H] = E([]);
 	n(() => {
 		let e = P.current;
 		if (!e) return;
 		let n = t?.length ? N ? U : W : 0, r = 82 + V.length * 48 + n, i = -(82 + V.length * 48);
-		if (g === "static") return e.style.transform = "", f && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
-			e.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
+		if (g === "static") return e.style.transform = "", d && document.documentElement.style.setProperty("--header-bottom", `${r}px`), () => {
+			e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
 		};
 		let a = window.scrollY, o = 0, s = null, c = null, l = () => {
-			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, f && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
+			c = null, !(!e || s === o) && (e.style.transform = `translate3d(0, ${o}px, 0)`, d && document.documentElement.style.setProperty("--header-bottom", `${r + o}px`), s = o);
 		};
 		l();
 		let u = () => {
@@ -211,10 +211,10 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 			a = e, o = Math.min(0, Math.max(i, o - t)), c === null && (c = window.requestAnimationFrame(l));
 		};
 		return window.addEventListener("scroll", u, { passive: !0 }), () => {
-			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", f && document.documentElement.style.removeProperty("--header-bottom");
+			window.removeEventListener("scroll", u), c !== null && cancelAnimationFrame(c), e.style.transform = "", d && document.documentElement.style.removeProperty("--header-bottom");
 		};
 	}, [
-		f,
+		d,
 		N,
 		V.length,
 		g,
@@ -289,7 +289,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										children: [/* @__PURE__ */ O("span", {
 											className: A.gpt,
 											children: "Highcharts Assist"
-										}), /* @__PURE__ */ O(d, {})]
+										}), /* @__PURE__ */ O(l, {})]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) }),
@@ -299,20 +299,20 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 										as: s,
 										href: B("https://shop.highcharts.com/", c),
 										"aria-label": "Buy Now",
-										children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
+										children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										className: A.cta,
 										variant: "brand",
 										as: s,
 										href: B("https://www.highcharts.com/download/", c),
-										children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
+										children: [/* @__PURE__ */ O(p, {}), "Try for Free"]
 									}) }),
 									/* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 										variant: F ? "soft" : "transparent",
 										className: A.menu,
 										onClick: X,
-										children: [F ? "Close" : "Menu", O(F ? h : u, {})]
+										children: [F ? "Close" : "Menu", O(F ? m : h, {})]
 									}) })
 								]
 							})
@@ -323,7 +323,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 					items: t,
 					link: s,
 					host: c,
-					pathname: l
+					pathname: u
 				}),
 				r
 			]
@@ -349,7 +349,7 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 								children: [/* @__PURE__ */ O("span", {
 									className: A.gpt,
 									children: "Highcharts Assist"
-								}), /* @__PURE__ */ O(d, {})]
+								}), /* @__PURE__ */ O(l, {})]
 							}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(x, {}) }),
 							/* @__PURE__ */ O("li", { children: /* @__PURE__ */ O(b, {}) })
@@ -363,13 +363,13 @@ function X({ subItems: t, children: r, notifications: o = J, link: s = "a", host
 						fullWidth: !0,
 						as: s,
 						href: B("https://shop.highcharts.com/", c),
-						children: [/* @__PURE__ */ O(p, {}), "Buy Now"]
+						children: [/* @__PURE__ */ O(f, {}), "Buy Now"]
 					}) }), /* @__PURE__ */ O("li", { children: /* @__PURE__ */ k(_, {
 						variant: "success",
 						fullWidth: !0,
 						as: s,
 						href: B("https://www.highcharts.com/download/", c),
-						children: [/* @__PURE__ */ O(m, {}), "Try for Free"]
+						children: [/* @__PURE__ */ O(p, {}), "Try for Free"]
 					}) })]
 				}),
 				/* @__PURE__ */ O("ul", {

package/dist/{InputGrouped-CIokpRn5.js → InputGrouped-DyxraUpb.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { A as t, F as n, j as r } from "./esm-CDDjSK4f.js";
-import { t as i } from "./Button-Dc8NFRWQ.js";
+import { I as t, M as n, j as r } from "./esm-VMwHsplm.js";
+import { t as i } from "./Button-awCDIEXQ.js";
 import { forwardRef as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 var f = {
@@ -41,7 +41,7 @@ function m({ children: t, className: n }) {
 		children: t
 	});
 }
-var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labelIcon: h, iconRight: g, button: _, hasError: v = !1, success: y = !1, disabled: b = !1, className: x, wrapperClassName: S, type: C, onFocus: w, onBlur: T, onChange: E, value: D, defaultValue: O, ...k }, A) => {
+var h = a(({ label: t, required: a = !1, helpText: p, showHelpText: m = !1, labelIcon: h, iconRight: g, button: _, hasError: v = !1, success: y = !1, disabled: b = !1, className: x, wrapperClassName: S, type: C, onFocus: w, onBlur: T, onChange: E, value: D, defaultValue: O, ...k }, A) => {
 	let j = c(null), M = A || j, [N, P] = l(!1), [F, I] = l(!1), [L, R] = l(!1), z = C === "password", [B, V] = l(O === void 0 ? "" : String(O)), H = D !== void 0, U = H ? String(D).length > 0 : B.length > 0, W = o((e) => {
 		P(!0), w?.(e);
 	}, [w]), G = o((e) => {
@@ -81,14 +81,14 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 			children: [/* @__PURE__ */ d("div", {
 				className: f.leftContent,
 				children: [
-					n && /* @__PURE__ */ d("div", {
+					t && /* @__PURE__ */ d("div", {
 						className: f.labelRow,
 						children: [h && /* @__PURE__ */ u("span", {
 							className: f.labelIcon,
 							children: h
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [n, a && /* @__PURE__ */ u("span", {
+							children: [t, a && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -99,7 +99,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 						type: Y,
 						className: e(f.inputElement, x),
 						disabled: b,
-						"aria-label": n,
+						"aria-label": t,
 						"aria-required": a,
 						"aria-invalid": v,
 						value: D,
@@ -130,7 +130,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 							e.stopPropagation(), R((e) => !e);
 						},
 						"aria-label": L ? "Hide password" : "Show password",
-						children: u(L ? t : r, {})
+						children: u(L ? r : n, {})
 					}),
 					_
 				]
@@ -139,7 +139,7 @@ var h = a(({ label: n, required: a = !1, helpText: p, showHelpText: m = !1, labe
 	});
 });
 h.displayName = "InputGrouped";
-var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labelIcon: s, hasError: p = !1, success: m = !1, disabled: h = !1, className: g, wrapperClassName: _, placeholder: v, children: y, onFocus: b, onBlur: x, onChange: S, value: C, defaultValue: w, ...T }, E) => {
+var g = a(({ label: n, required: r = !1, helpText: i, showHelpText: a = !1, labelIcon: s, hasError: p = !1, success: m = !1, disabled: h = !1, className: g, wrapperClassName: _, placeholder: v, children: y, onFocus: b, onBlur: x, onChange: S, value: C, defaultValue: w, ...T }, E) => {
 	let D = c(null), O = E || D, [k, A] = l(!1), [j, M] = l(!1), [N, P] = l(w === void 0 ? "" : String(w)), F = C !== void 0, I = F ? String(C).length > 0 : N.length > 0, L = o((e) => {
 		A(!0), b?.(e);
 	}, [b]), R = o((e) => {
@@ -172,14 +172,14 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 			children: [/* @__PURE__ */ d("div", {
 				className: f.leftContent,
 				children: [
-					t && /* @__PURE__ */ d("div", {
+					n && /* @__PURE__ */ d("div", {
 						className: f.labelRow,
 						children: [s && /* @__PURE__ */ u("span", {
 							className: f.labelIcon,
 							children: s
 						}), /* @__PURE__ */ d("span", {
 							className: f.label,
-							children: [t, r && /* @__PURE__ */ u("span", {
+							children: [n, r && /* @__PURE__ */ u("span", {
 								className: f.required,
 								children: " *"
 							})]
@@ -189,7 +189,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 						ref: O,
 						className: e(f.inputElement, f.selectElement, g),
 						disabled: h,
-						"aria-label": t,
+						"aria-label": n,
 						"aria-required": r,
 						"aria-invalid": p,
 						value: C,
@@ -214,7 +214,7 @@ var g = a(({ label: t, required: r = !1, helpText: i, showHelpText: a = !1, labe
 				className: f.rightContent,
 				children: /* @__PURE__ */ u("span", {
 					className: e(f.iconRight, f.chevron),
-					children: /* @__PURE__ */ u(n, {})
+					children: /* @__PURE__ */ u(t, {})
 				})
 			})]
 		})

package/dist/InputSolo-DUdKtZjX.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { forwardRef as t, useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = {
+	autofilled: "YDdfMa_autofilled",
+	buttonSlot: "YDdfMa_buttonSlot",
+	default: "YDdfMa_default",
+	dirty: "YDdfMa_dirty",
+	disabled: "YDdfMa_disabled",
+	field: "YDdfMa_field",
+	focus: "YDdfMa_focus",
+	hasError: "YDdfMa_hasError",
+	helpText: "YDdfMa_helpText",
+	iconLeft: "YDdfMa_iconLeft",
+	inputElement: "YDdfMa_inputElement",
+	inputRow: "YDdfMa_inputRow",
+	inputSolo: "YDdfMa_inputSolo",
+	label: "YDdfMa_label",
+	labelRow: "YDdfMa_labelRow",
+	onAutoFillStart: "YDdfMa_onAutoFillStart",
+	required: "YDdfMa_required",
+	"size-100": "YDdfMa_size-100",
+	"size-200": "YDdfMa_size-200",
+	"size-300": "YDdfMa_size-300",
+	success: "YDdfMa_success",
+	white: "YDdfMa_white"
+}, u = t(({ label: t, size: u = 200, iconLeft: d, button: f, helpText: p, showHelpText: m, variant: h = "default", hasError: g = !1, success: _ = !1, disabled: v = !1, required: y = !1, className: b, wrapperClassName: x, onFocus: S, onBlur: C, id: w, "aria-label": T, "aria-describedby": E, value: D, defaultValue: O, onChange: k, ...A }, j) => {
+	let M = a(null), N = j || M, P = i(), [F, I] = o(!1), [L, R] = o(!1), [z, B] = o(O === void 0 ? "" : String(O)), V = D !== void 0, H = m ?? !!p, U = H && p ? `${w ?? P}-help-text` : void 0, W = [E, U].filter(Boolean).join(" ") || void 0, G = V ? String(D ?? "").length > 0 : z.length > 0, K = n((e) => {
+		e.animationName.includes("onAutoFillStart") && R(!0);
+	}, []);
+	r(() => {
+		let e = N.current;
+		if (!e) return;
+		let t = () => {
+			try {
+				e.matches(":-webkit-autofill") && R(!0);
+			} catch {}
+		}, n = setTimeout(t, 100), r = setTimeout(t, 500);
+		return () => {
+			clearTimeout(n), clearTimeout(r);
+		};
+	}, [N]);
+	let q = n((e) => {
+		I(!0), S?.(e);
+	}, [S]), J = n((e) => {
+		I(!1), C?.(e);
+	}, [C]), Y = n((e) => {
+		V || B(e.target.value), k?.(e);
+	}, [V, k]);
+	return /* @__PURE__ */ c("div", {
+		onClick: n(() => {
+			!v && N.current && N.current.focus();
+		}, [v, N]),
+		className: e("hsui-input-solo", `hsui-input-solo--${u}`, l.inputSolo, l[`size-${u}`], {
+			[l[h]]: h,
+			[l.focus]: F,
+			[l.hasError]: g,
+			[l.success]: _,
+			[l.disabled]: v,
+			[l.dirty]: G || L,
+			[l.autofilled]: L
+		}, x),
+		children: [
+			t && /* @__PURE__ */ s("div", {
+				className: l.labelRow,
+				children: w ? /* @__PURE__ */ c("label", {
+					className: l.label,
+					htmlFor: w,
+					children: [t, y && /* @__PURE__ */ s("span", {
+						className: l.required,
+						children: " *"
+					})]
+				}) : /* @__PURE__ */ c("span", {
+					className: l.label,
+					children: [t, y && /* @__PURE__ */ s("span", {
+						className: l.required,
+						children: " *"
+					})]
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: l.field,
+				children: /* @__PURE__ */ c("div", {
+					className: l.inputRow,
+					children: [
+						d && /* @__PURE__ */ s("span", {
+							className: l.iconLeft,
+							children: d
+						}),
+						/* @__PURE__ */ s("input", {
+							ref: N,
+							id: w,
+							className: e(l.inputElement, b),
+							disabled: v,
+							required: y,
+							"aria-invalid": g,
+							"aria-label": T ?? t,
+							"aria-describedby": W,
+							value: D,
+							defaultValue: O,
+							onFocus: q,
+							onBlur: J,
+							onChange: Y,
+							onAnimationStart: K,
+							...A
+						}),
+						f && /* @__PURE__ */ s("span", {
+							className: l.buttonSlot,
+							onClick: (e) => e.stopPropagation(),
+							onMouseDown: (e) => e.stopPropagation(),
+							children: f
+						})
+					]
+				})
+			}),
+			H && p && /* @__PURE__ */ s("span", {
+				id: U,
+				className: l.helpText,
+				children: p
+			})
+		]
+	});
+});
+u.displayName = "InputSolo";
+//#endregion
+export { u as t };

package/dist/{Label-BM4vL0vA.js → Label-DdXaM1Bo.js} RENAMED Viewed

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