@studiolxd/brand 49.17.0 → 49.19.0

package/dist/list.css

@@ -1 +1 @@
-.list{font-family:var(--text-list-font-family);font-size:var(--text-list-font-size);font-weight:var(--text-list-font-weight);line-height:var(--text-list-line-height);color:var(--text-list-color);letter-spacing:var(--text-list-letter-spacing);margin-block:0;margin-inline:0;padding-inline-start:var(--text-list-padding-inline-start)}.list>li+li,.list>.list__item+.list__item{margin-block-start:var(--text-list-gap)}.list.list--unordered{list-style-type:disc}.list.list--ordered{list-style-type:decimal}.list.list--plain{padding-inline-start:0;list-style-type:none}
+.list{font-family:var(--text-list-font-family);font-size:var(--text-list-font-size);font-weight:var(--text-list-font-weight);line-height:var(--text-list-line-height);color:var(--text-list-color);letter-spacing:var(--text-list-letter-spacing);margin-block:0;margin-inline:0;padding-inline-start:var(--text-list-padding-inline-start)}.list>li+li,.list>.list__item+.list__item{margin-block-start:var(--text-list-gap)}.list.list--unordered{list-style-type:disc}.list.list--ordered{list-style-type:decimal}.list.list--plain{padding-inline-start:0;list-style-type:none}.list.list--separated>li+li,.list.list--separated>.list__item+.list__item{border-block-start:var(--text-list-separator-thickness) solid var(--text-list-separator-color);margin-block-start:var(--text-list-separator-spacing);padding-block-start:var(--text-list-separator-spacing)}.list__item-row{align-items:center;column-gap:var(--text-list-item-gap);display:flex}.list__item-main{flex:auto;min-inline-size:0}.list__item-secondary{font-size:var(--text-list-secondary-font-size);line-height:var(--text-list-secondary-line-height);color:var(--text-list-secondary-color)}.list__item-leading,.list__item-trailing{flex:none;align-items:center;display:flex}

package/dist/list.js

@@ -1,25 +1,51 @@
 import './list.css';
 import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/stories/atoms/List/List.tsx
-var n = e(function({ type: e = "unordered", className: n, children: r, ...i }, a) {
+var r = e(function({ type: e = "unordered", showSeparators: n = !1, className: r, children: i, ...a }, o) {
 	return /* @__PURE__ */ t(e === "ordered" ? "ol" : "ul", {
-		ref: a,
+		ref: o,
 		className: [
 			"list",
 			`list--${e}`,
-			n ?? ""
+			n ? "list--separated" : "",
+			r ?? ""
 		].filter(Boolean).join(" "),
-		...i,
-		children: r
+		...a,
+		children: i
 	});
-}), r = e(function({ as: e = "li", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ t(e, {
-		ref: a,
-		className: ["list__item", n ?? ""].filter(Boolean).join(" "),
-		...i,
-		children: r
+}), i = e(function({ as: e = "li", leading: r, secondary: i, trailing: a, className: o, children: s, ...c }, l) {
+	let u = ["list__item", o ?? ""].filter(Boolean).join(" "), d = i != null && i !== !1, f = r != null && r !== !1, p = a != null && a !== !1;
+	return !d && !p && !f ? /* @__PURE__ */ t(e, {
+		ref: l,
+		className: u,
+		...c,
+		children: s
+	}) : /* @__PURE__ */ t(e, {
+		ref: l,
+		className: u,
+		...c,
+		children: /* @__PURE__ */ n("div", {
+			className: "list__item-row",
+			children: [
+				f && /* @__PURE__ */ t("div", {
+					className: "list__item-leading",
+					children: r
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "list__item-main",
+					children: [s, d && /* @__PURE__ */ t("div", {
+						className: "list__item-secondary",
+						children: i
+					})]
+				}),
+				p && /* @__PURE__ */ t("div", {
+					className: "list__item-trailing",
+					children: a
+				})
+			]
+		})
 	});
 });
 //#endregion
-export { n as List, r as ListItem };
+export { r as List, i as ListItem };

package/dist/number-input-field.js

@@ -8,21 +8,21 @@ import { n as i } from "./_shared/field-labels.js";
 import { forwardRef as a, useId as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/NumberInputField/NumberInputField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, min: p, max: m, step: h = 1, decimal: g, disabled: _, readOnly: v, size: y, error: b = !1, errorMessage: x, helperText: S, className: C, onChange: w, ...T }, E) {
-	let D = i(u), O = e(y), k = o(), A = a ?? k, j = x ? `${A}-error` : void 0, M = S ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = b || !!x;
+var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, min: p, max: m, step: h = 1, decimal: g, disabled: _, readOnly: v, size: y, error: b = !1, errorMessage: x, helperText: S, className: C, onChange: w, onEmpty: T, ...E }, D) {
+	let O = i(u), k = e(y), A = o(), j = a ?? A, M = x ? `${j}-error` : void 0, N = S ? `${j}-helper` : void 0, P = [M, N].filter(Boolean).join(" ") || void 0, F = b || !!x;
 	return /* @__PURE__ */ c("div", {
 		className: ["number-input-field", C].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ s(n, {
-				htmlFor: A,
-				hidden: D,
-				size: O,
+				htmlFor: j,
+				hidden: O,
+				size: k,
 				children: l
 			}),
 			/* @__PURE__ */ s(r, {
-				ref: E,
-				...T,
-				id: A,
+				ref: D,
+				...E,
+				id: j,
 				value: d,
 				defaultValue: f,
 				min: p,
@@ -31,17 +31,18 @@ var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f,
 				decimal: g,
 				disabled: _,
 				readOnly: v,
-				size: O,
-				error: P,
-				"aria-describedby": N,
-				onChange: w
+				size: k,
+				error: F,
+				"aria-describedby": P,
+				onChange: w,
+				onEmpty: T
 			}),
 			x && /* @__PURE__ */ s(t, {
-				id: j,
+				id: M,
 				children: x
 			}),
 			S && /* @__PURE__ */ s("span", {
-				id: M,
+				id: N,
 				className: "number-input-field__helper",
 				children: S
 			})

package/dist/number-input.js

@@ -5,47 +5,47 @@ import { Icon as t } from "./icon.js";
 import { forwardRef as n, useCallback as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/atoms/NumberInput/NumberInput.tsx
-var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1, decimal: d = !1, disabled: f = !1, readOnly: p = !1, size: m = "md", error: h = !1, id: g, name: _, describedBy: v, ariaLabel: y, decrementLabel: b, incrementLabel: x, className: S, onChange: C, onBlur: w, onFocus: T, ...E }, D) {
-	let O = e("numberInput"), k = n !== void 0, [A, j] = i(s), [M, N] = i(!1), [P, F] = i(null), I = k ? n : A, L = P === null ? String(I) : P, R = r((e) => {
+var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1, decimal: d = !1, disabled: f = !1, readOnly: p = !1, size: m = "md", error: h = !1, id: g, name: _, describedBy: v, ariaLabel: y, decrementLabel: b, incrementLabel: x, className: S, onChange: C, onEmpty: w, onBlur: T, onFocus: E, ...D }, O) {
+	let k = e("numberInput"), A = n !== void 0, [j, M] = i(s), [N, P] = i(!1), [F, I] = i(null), L = A ? n : j, R = F === null ? L === null ? "" : String(L) : F, z = L ?? 0, B = r((e) => {
 		let t = e;
 		return c !== void 0 && (t = Math.max(c, t)), l !== void 0 && (t = Math.min(l, t)), t;
-	}, [c, l]), z = r((e) => {
-		let t = R(e);
-		k || j(t), C?.(t);
+	}, [c, l]), V = r((e) => {
+		let t = B(e);
+		A || M(t), C?.(t);
 	}, [
-		R,
-		k,
+		B,
+		A,
 		C
-	]), B = () => {
-		f || p || (F(null), z(I - u));
-	}, V = () => {
-		f || p || (F(null), z(I + u));
-	}, H = (e) => {
+	]), H = () => {
+		f || p || (I(null), V(z - u));
+	}, U = () => {
+		f || p || (I(null), V(z + u));
+	}, W = (e) => {
 		let t = e.target.value;
-		F(t);
+		I(t);
 		let n = d ? t.replace(",", ".") : t, r = parseFloat(n);
-		isNaN(r) || z(r);
-	}, U = (e) => {
-		N(!0), T?.(e);
-	}, W = (e) => {
-		N(!1), F(null), w?.(e);
-	}, G = [
+		isNaN(r) ? w && t.trim() === "" && (A || M(null), w()) : V(r);
+	}, G = (e) => {
+		P(!0), E?.(e);
+	}, K = (e) => {
+		P(!1), I(null), T?.(e);
+	}, q = [
 		"number-input",
 		m === "md" ? "" : `number-input--${m}`,
 		h ? "number-input--error" : "",
 		f ? "number-input--disabled" : "",
-		M ? "number-input--focused" : "",
+		N ? "number-input--focused" : "",
 		S ?? ""
-	].filter(Boolean).join(" "), K = f || p || c !== void 0 && I <= c, q = f || p || l !== void 0 && I >= l;
+	].filter(Boolean).join(" "), J = f || p || L !== null && c !== void 0 && L <= c, Y = f || p || L !== null && l !== void 0 && L >= l;
 	return /* @__PURE__ */ o("div", {
-		className: G,
+		className: q,
 		children: [
 			/* @__PURE__ */ a("button", {
 				className: "number-input__btn number-input__btn--decrement",
 				type: "button",
-				onClick: B,
-				disabled: K,
-				"aria-label": O("decrement", b),
+				onClick: H,
+				disabled: J,
+				"aria-label": k("decrement", b),
 				tabIndex: -1,
 				children: /* @__PURE__ */ a(t, {
 					name: "minus",
@@ -53,7 +53,7 @@ var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1,
 				})
 			}),
 			/* @__PURE__ */ a("input", {
-				ref: D,
+				ref: O,
 				className: "number-input__field",
 				type: "text",
 				inputMode: d ? "decimal" : "numeric",
@@ -61,22 +61,22 @@ var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1,
 				"aria-invalid": h || void 0,
 				"aria-describedby": v,
 				"aria-label": y,
-				...E,
+				...D,
 				id: g,
 				name: _,
-				value: L,
+				value: R,
 				disabled: f,
 				readOnly: p,
-				onChange: H,
-				onFocus: U,
-				onBlur: W
+				onChange: W,
+				onFocus: G,
+				onBlur: K
 			}),
 			/* @__PURE__ */ a("button", {
 				className: "number-input__btn number-input__btn--increment",
 				type: "button",
-				onClick: V,
-				disabled: q,
-				"aria-label": O("increment", x),
+				onClick: U,
+				disabled: Y,
+				"aria-label": k("increment", x),
 				tabIndex: -1,
 				children: /* @__PURE__ */ a(t, {
 					name: "plus",

package/dist/recovery-codes.js

@@ -26,6 +26,7 @@ function i({ codes: i, columns: a = 2, labels: o, actions: s, className: c, id:
 			children: [/* @__PURE__ */ n(t, {
 				value: () => i.join("\n"),
 				copiedLabel: o.copied,
+				errorLabel: o.error,
 				variant: "outline",
 				children: o.copy
 			}), s]

package/dist/toaster.js

@@ -19,33 +19,36 @@ function h(e, t) {
 	return [
 		"alert",
 		m[e ?? ""] ?? "",
-		e === "warning" ? "" : "surface-dark",
+		e === "success" || e === "error" ? "surface-dark" : "",
 		t ? "alert--dismissible" : "",
 		"toast"
 	].filter(Boolean).join(" ");
 }
-function g({ position: a, containerAriaLabel: o, closeLabel: c, closeButton: p, gap: m, expand: g }) {
-	let _ = e("toaster"), { toasts: v } = f.useToastManager(), [y, b] = a.split("-"), x = v.map((e) => e.id).join(",");
+function g(e) {
+	return e === "success" || e === "error" ? "" : e === "warning" ? " surface-light" : " surface-invert";
+}
+function _({ position: a, containerAriaLabel: o, closeLabel: c, closeButton: p, gap: m, expand: _ }) {
+	let v = e("toaster"), { toasts: y } = f.useToastManager(), [b, x] = a.split("-"), S = y.map((e) => e.id).join(",");
 	l(() => {
-		s(x ? x.split(",") : []);
-	}, [x]);
-	let S = i({ "--toast-gap": `${m}px` }), C = t(void 0), w = [
+		s(S ? S.split(",") : []);
+	}, [S]);
+	let C = i({ "--toast-gap": `${m}px` }), w = t(void 0), T = [
 		"toaster",
-		y === "top" ? "toaster--top" : "",
-		b === "right" ? "" : `toaster--${b}`,
-		g ? "toaster--expanded" : ""
+		b === "top" ? "toaster--top" : "",
+		x === "right" ? "" : `toaster--${x}`,
+		_ ? "toaster--expanded" : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ u(f.Portal, {
-		container: C,
+		container: w,
 		children: /* @__PURE__ */ u(f.Viewport, {
-			ref: S,
-			className: w,
-			"aria-label": _("container", o),
-			children: v.map((e) => /* @__PURE__ */ d(f.Root, {
+			ref: C,
+			className: T,
+			"aria-label": v("container", o),
+			children: y.map((e) => /* @__PURE__ */ d(f.Root, {
 				toast: e,
 				className: h(e.type, p),
 				children: [/* @__PURE__ */ d("div", {
-					className: "alert__content",
+					className: `alert__content${g(e.type)}`,
 					children: [
 						/* @__PURE__ */ u(f.Title, { className: "alert__title" }),
 						/* @__PURE__ */ u(f.Description, { className: "alert__description" }),
@@ -58,20 +61,20 @@ function g({ position: a, containerAriaLabel: o, closeLabel: c, closeButton: p,
 						})
 					]
 				}), p && /* @__PURE__ */ u(f.Close, {
-					className: "alert__close",
-					render: /* @__PURE__ */ u(r, { label: _("close", c) })
+					className: `alert__close${g(e.type)}`,
+					render: /* @__PURE__ */ u(r, { label: v("close", c) })
 				})]
 			}, e.id))
 		})
 	});
 }
-function _({ position: e = "bottom-right", containerAriaLabel: t, closeLabel: n, closeButton: r = !0, duration: i = a, gap: s = p, visibleToasts: d = 3, expand: m = !1 }) {
+function v({ position: e = "bottom-right", containerAriaLabel: t, closeLabel: n, closeButton: r = !0, duration: i = a, gap: s = p, visibleToasts: d = 3, expand: m = !1 }) {
 	let h = Number.isFinite(i) ? i : 0;
 	return l(() => o(h), [h]), /* @__PURE__ */ u(f.Provider, {
 		toastManager: c,
 		timeout: h,
 		limit: d,
-		children: /* @__PURE__ */ u(g, {
+		children: /* @__PURE__ */ u(_, {
 			position: e,
 			containerAriaLabel: t,
 			closeLabel: n,
@@ -82,4 +85,4 @@ function _({ position: e = "bottom-right", containerAriaLabel: t, closeLabel: n,
 	});
 }
 //#endregion
-export { _ as Toaster };
+export { v as Toaster };