@studiolxd/brand 50.0.0 → 51.0.0

package/dist/_shared/colorpicker.js

@@ -1,68 +1,82 @@
 import '../colorpicker.css';
-import { n as e } from "./brandmessagescontext.js";
+import { r as e } from "./brandmessagescontext.js";
 import { VisuallyHidden as t } from "../visually-hidden.js";
 import { Button as n } from "../button.js";
 import { Input as r } from "../input.js";
 import { Popover as i } from "../popover.js";
-import { Slider as a } from "../slider.js";
+import { t as a } from "./slider.js";
 import { t as o } from "./css-properties.js";
 import { ColorSwatch as s } from "../color-swatch.js";
-import { cloneElement as c, forwardRef as l, useCallback as u, useId as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useRender as g } from "@base-ui/react/use-render";
-import { useDirection as _ } from "@base-ui/react/direction-provider";
-//#region src/stories/molecules/ColorPicker/ColorArea.tsx
-var v = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = l(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: l = !1 }, d) {
-	let p = _() === "rtl", h = f(null), g = f(null), x = f({
+import { t as c } from "./requiredinput.js";
+import { cloneElement as l, forwardRef as u, useCallback as d, useId as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useRender as _ } from "@base-ui/react/use-render";
+import { useDirection as ee } from "@base-ui/react/direction-provider";
+//#region src/stories/messages/es/colorPicker.ts
+var v = {
+	trigger: "Elegir color",
+	value: (e) => `Color actual: ${e}`,
+	empty: "Sin color",
+	dialog: "Selector de color",
+	area: "Saturación y brillo",
+	areaDescription: "deslizador bidimensional",
+	areaValue: (e, t) => `Saturación ${e} %, brillo ${t} %`,
+	hue: "Tono",
+	alpha: "Opacidad",
+	hex: "Hexadecimal",
+	presets: "Colores predefinidos",
+	clear: "Quitar color"
+}, te = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = u(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: l = !1 }, u) {
+	let f = ee() === "rtl", m = p(null), g = p(null), _ = p({
 		s: 0,
 		v: 0
-	}), S = o({
-		"--color-picker-area-x": `${p ? 100 - t : t}%`,
+	}), v = o({
+		"--color-picker-area-x": `${f ? 100 - t : t}%`,
 		"--color-picker-area-y": `${100 - n}%`,
 		"--color-picker-area-hue": e
-	}), C = u((e) => {
-		h.current = e, S(e);
-	}, [S]), w = (e) => {
+	}), x = d((e) => {
+		m.current = e, v(e);
+	}, [v]), S = (e) => {
 		let t = e.currentTarget.getBoundingClientRect(), n = t.width ? (e.clientX - t.left) / t.width : 0, r = t.height ? (e.clientY - t.top) / t.height : 0;
 		return {
-			s: b((p ? 1 - n : n) * 100),
+			s: b((f ? 1 - n : n) * 100),
 			v: b((1 - r) * 100)
 		};
-	}, T = () => {
-		((typeof d == "function" ? null : d?.current) ?? h.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
-	}, E = (e) => {
+	}, C = () => {
+		((typeof u == "function" ? null : u?.current) ?? m.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
+	}, w = (e) => {
 		if (l || e.button !== 0) return;
 		e.preventDefault();
 		try {
 			e.currentTarget.setPointerCapture?.(e.pointerId);
 		} catch {}
-		g.current = e.pointerId, T();
-		let t = w(e);
-		x.current = t, r(t);
-	}, D = (e) => {
+		g.current = e.pointerId, C();
+		let t = S(e);
+		_.current = t, r(t);
+	}, T = (e) => {
 		if (g.current !== e.pointerId) return;
-		let t = w(e);
-		x.current = t, r(t);
-	}, O = (e) => {
+		let t = S(e);
+		_.current = t, r(t);
+	}, E = (e) => {
 		if (g.current === e.pointerId) {
 			g.current = null;
 			try {
 				e.currentTarget.releasePointerCapture?.(e.pointerId);
 			} catch {}
-			i(x.current);
+			i(_.current);
 		}
-	}, k = (e) => {
+	}, D = (e) => {
 		if (l) return;
-		let a = e.shiftKey ? y : v, { s: o, v: s } = {
+		let a = e.shiftKey ? y : te, { s: o, v: s } = {
 			s: t,
 			v: n
 		};
 		switch (e.key) {
 			case "ArrowRight":
-				o += p ? -a : a;
+				o += f ? -a : a;
 				break;
 			case "ArrowLeft":
-				o += p ? a : -a;
+				o += f ? a : -a;
 				break;
 			case "ArrowUp":
 				s += a;
@@ -91,17 +105,17 @@ var v = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = l(function({ hu
 		};
 		r(c), i(c);
 	};
-	return /* @__PURE__ */ m("div", {
-		ref: C,
+	return /* @__PURE__ */ h("div", {
+		ref: x,
 		className: "color-picker__area",
-		"data-direction": p ? "rtl" : "ltr",
+		"data-direction": f ? "rtl" : "ltr",
 		"data-disabled": l ? "" : void 0,
-		onPointerDown: E,
-		onPointerMove: D,
-		onPointerUp: O,
-		onPointerCancel: O,
-		children: /* @__PURE__ */ m("div", {
-			ref: d,
+		onPointerDown: w,
+		onPointerMove: T,
+		onPointerUp: E,
+		onPointerCancel: E,
+		children: /* @__PURE__ */ h("div", {
+			ref: u,
 			className: "color-picker__area-thumb",
 			role: "slider",
 			tabIndex: l ? -1 : 0,
@@ -112,7 +126,7 @@ var v = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = l(function({ hu
 			"aria-valuenow": Math.round(t),
 			"aria-valuetext": c,
 			"aria-disabled": l || void 0,
-			onKeyDown: k
+			onKeyDown: D
 		})
 	});
 }), S = (e, t, n) => Math.min(n, Math.max(t, e));
@@ -189,7 +203,7 @@ function A(e, t) {
 	let n = C(e);
 	return n ? T(n, t) : null;
 }
-function ee() {
+function ne() {
 	return [
 		0,
 		60,
@@ -207,128 +221,133 @@ function ee() {
 }
 //#endregion
 //#region src/stories/molecules/ColorPicker/ColorPicker.tsx
+function re(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
 var j = {
 	h: 0,
 	s: 0,
 	v: 0,
 	a: 1
-}, te = l(function({ value: l, defaultValue: v = null, onValueChange: y, onValueCommitted: b, alpha: S = !1, presets: C, clearable: w = !1, onClear: T, open: E, defaultOpen: D = !1, onOpenChange: te, size: M = "md", disabled: N = !1, error: P = !1, locale: ne = "es-ES", id: re, name: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ie, dialogLabel: ae, clearLabel: oe, trigger: R, anchor: z, className: se }, B) {
-	let V = e("colorPicker"), H = _() === "rtl", [ce, U] = p(D), W = E ?? ce, G = l !== void 0, [le, ue] = p(v), K = G ? l : le, q = K ? A(K, S) : null, [J, de] = p(() => q && O(q) || j), [fe, pe] = p(q);
-	q !== fe && (pe(q), q && k(J, S) !== q && de(O(q) ?? j));
-	let me = k(J, S), he = k({
+}, ie = u(function({ value: u, defaultValue: te = null, onValueChange: y, onValueCommitted: b, alpha: S = !1, presets: C, clearable: w = !1, onClear: T, open: E, defaultOpen: D = !1, onOpenChange: ie, size: M = "md", disabled: N = !1, error: P = !1, locale: ae = "es-ES", id: oe, name: se, required: ce = !1, "aria-label": F, "aria-labelledby": I, "aria-describedby": le, dialogLabel: ue, clearLabel: de, trigger: L, anchor: R, className: z }, B) {
+	let V = e("colorPicker", v), H = ee() === "rtl", [fe, U] = m(D), W = E ?? fe, G = u !== void 0, [pe, me] = m(te), K = G ? u : pe, q = K ? A(K, S) : null, [J, he] = m(() => q && O(q) || j), [ge, _e] = m(q);
+	q !== ge && (_e(q), q && k(J, S) !== q && he(O(q) ?? j));
+	let ve = k(J, S), ye = k({
 		...J,
 		a: 1
-	}, !1), Y = u((e, t) => {
+	}, !1), Y = d((e, t) => {
 		let n = S ? e : {
 			...e,
 			a: 1
 		};
-		de(n);
+		he(n);
 		let r = k(n, S);
-		G || ue(r), y?.(r), t && b?.(r);
+		G || me(r), y?.(r), t && b?.(r);
 	}, [
 		S,
 		G,
 		y,
 		b
-	]), [X, Z] = p(null), [ge, _e] = p(W);
-	W !== ge && (_e(W), W || Z(null));
-	let ve = (e, t) => {
+	]), [X, Z] = m(null), [be, xe] = m(W);
+	W !== be && (xe(W), W || Z(null));
+	let Se = (e, t) => {
 		let n = A(e, S), r = n ? O(n) : null;
 		return r ? (Y(r, t), !0) : !1;
-	}, ye = (e) => {
+	}, Ce = (e) => {
 		let t = e.target.value;
 		Z(t);
 		let n = t.trim().replace(/^#/, "").length;
-		(n === 6 || S && n === 8) && ve(t, !0);
-	}, be = () => {
-		X !== null && ve(X, !0), Z(null);
-	}, xe = () => {
-		G || ue(null), T?.(), E === void 0 && U(!1);
-	}, Se = (e, t) => {
-		e && N || (E === void 0 && U(e), te?.(e, t));
-	}, Ce = f(null), Q = d(), we = o({
-		"--color-picker-hue-gradient": `linear-gradient(to ${H ? "left" : "right"}, ${ee().join(", ")})`,
-		"--color-picker-alpha-gradient": `linear-gradient(to ${H ? "left" : "right"}, transparent, ${he})`
-	}), Te = (e) => Y({
+		(n === 6 || S && n === 8) && Se(t, !0);
+	}, we = () => {
+		X !== null && Se(X, !0), Z(null);
+	}, Te = () => {
+		G || me(null), T?.(), E === void 0 && U(!1);
+	}, Ee = (e, t) => {
+		e && N || (E === void 0 && U(e), ie?.(e, t));
+	}, De = p(null), Q = f(), Oe = o({
+		"--color-picker-hue-gradient": `linear-gradient(to ${H ? "left" : "right"}, ${ne().join(", ")})`,
+		"--color-picker-alpha-gradient": `linear-gradient(to ${H ? "left" : "right"}, transparent, ${ye})`
+	}), ke = (e) => Y({
 		...J,
 		s: e.s,
 		v: e.v
-	}, !1), Ee = (e) => Y({
+	}, !1), Ae = (e) => Y({
 		...J,
 		s: e.s,
 		v: e.v
-	}, !0), De = (C ?? []).map((e) => ({
+	}, !0), je = (C ?? []).map((e) => ({
 		...e,
 		hex: A(e.color, S)
-	})).filter((e) => e.hex !== null), Oe = [
+	})).filter((e) => e.hex !== null), Me = [
 		"color-picker",
 		M === "md" ? "" : `color-picker--${M}`,
-		P ? "color-picker--error" : "",
-		se ?? ""
-	].filter(Boolean).join(" "), ke = [Q, ie].filter(Boolean).join(" "), Ae = /* @__PURE__ */ h("button", {
-		ref: B,
-		id: re,
+		P ? "color-picker--error" : ""
+	].filter(Boolean).join(" "), Ne = L === void 0 && R === void 0, Pe = [Q, le].filter(Boolean).join(" "), Fe = p(null), Ie = d((e) => {
+		Fe.current = e, re(B, e);
+	}, [B]), Le = /* @__PURE__ */ g("button", {
+		ref: Ie,
+		id: oe,
 		type: "button",
-		className: "color-picker__trigger",
+		className: ["color-picker__trigger", Ne ? z : void 0].filter(Boolean).join(" "),
 		disabled: N,
-		"aria-label": I ?? (L ? void 0 : V("trigger")),
-		"aria-labelledby": I ? void 0 : L,
-		"aria-describedby": ke,
+		"aria-label": F ?? (I ? void 0 : V("trigger")),
+		"aria-labelledby": F ? void 0 : I,
+		"aria-describedby": Pe,
 		"aria-haspopup": "dialog",
 		"aria-expanded": W,
 		"aria-invalid": P || void 0,
-		children: [/* @__PURE__ */ m(s, {
+		children: [/* @__PURE__ */ h(s, {
 			color: K,
 			className: "color-picker__swatch"
-		}), /* @__PURE__ */ m(t, {
+		}), /* @__PURE__ */ h(t, {
 			id: Q,
 			children: K ? V("value")(q ?? K) : V("empty")
 		})]
-	}), je = R?.props ?? {}, Me = g({
-		render: R && c(R, {
-			disabled: N || je.disabled || void 0,
-			"aria-describedby": [ke, je["aria-describedby"]].filter(Boolean).join(" ")
+	}), Re = L?.props ?? {}, ze = _({
+		render: L && l(L, {
+			disabled: N || Re.disabled || void 0,
+			"aria-describedby": [Pe, Re["aria-describedby"]].filter(Boolean).join(" ")
 		}),
-		ref: B,
-		enabled: R !== void 0,
+		ref: Ie,
+		enabled: L !== void 0,
 		props: {
-			id: re,
-			"aria-label": I,
-			"aria-labelledby": I ? void 0 : L,
+			id: oe,
+			"aria-label": F,
+			"aria-labelledby": F ? void 0 : I,
 			"aria-haspopup": "dialog",
 			"aria-expanded": W,
 			"aria-invalid": P || void 0
 		}
 	}), $;
-	return Me ? $ = Me : z === void 0 && ($ = Ae), /* @__PURE__ */ h("div", {
-		className: Oe,
+	return ze ? $ = ze : R === void 0 && ($ = Le), /* @__PURE__ */ g("div", {
+		className: Me,
 		children: [
-			F && /* @__PURE__ */ m("input", {
-				type: "hidden",
-				name: F,
-				value: q ?? ""
+			/* @__PURE__ */ h(c, {
+				name: se,
+				value: q ?? "",
+				required: ce,
+				focusTarget: () => Fe.current
 			}),
-			R && /* @__PURE__ */ m(t, {
+			L && /* @__PURE__ */ h(t, {
 				id: Q,
 				children: K ? V("value")(q ?? K) : V("empty")
 			}),
-			/* @__PURE__ */ m(i, {
+			/* @__PURE__ */ h(i, {
 				trigger: $,
-				anchor: z,
-				label: V("dialog", ae),
+				anchor: R,
+				label: V("dialog", ue),
 				open: W,
-				onOpenChange: Se,
+				onOpenChange: Ee,
 				side: "bottom",
 				align: "start",
-				initialFocus: Ce,
-				className: "color-picker__popover",
-				children: /* @__PURE__ */ h("div", {
-					ref: we,
+				initialFocus: De,
+				className: ["color-picker__popover", Ne ? void 0 : z].filter(Boolean).join(" "),
+				children: /* @__PURE__ */ g("div", {
+					ref: Oe,
 					className: "color-picker__panel",
 					children: [
-						/* @__PURE__ */ m(x, {
-							ref: Ce,
+						/* @__PURE__ */ h(x, {
+							ref: De,
 							hueColor: k({
 								h: J.h,
 								s: 100,
@@ -337,13 +356,13 @@ var j = {
 							}, !1),
 							saturation: J.s,
 							brightness: J.v,
-							onChange: Te,
-							onCommit: Ee,
+							onChange: ke,
+							onCommit: Ae,
 							label: V("area"),
 							roleDescription: V("areaDescription"),
 							valueText: V("areaValue")(Math.round(J.s), Math.round(J.v))
 						}),
-						/* @__PURE__ */ m(a, {
+						/* @__PURE__ */ h(a, {
 							className: "color-picker__channel color-picker__channel--hue",
 							label: V("hue"),
 							min: 0,
@@ -354,7 +373,7 @@ var j = {
 								style: "unit",
 								unit: "degree"
 							},
-							locale: ne,
+							locale: ae,
 							onValueChange: (e) => Y({
 								...J,
 								h: e
@@ -364,7 +383,7 @@ var j = {
 								h: e
 							}, !0)
 						}),
-						S && /* @__PURE__ */ m(a, {
+						S && /* @__PURE__ */ h(a, {
 							className: "color-picker__channel color-picker__channel--alpha",
 							label: V("alpha"),
 							min: 0,
@@ -375,7 +394,7 @@ var j = {
 								style: "unit",
 								unit: "percent"
 							},
-							locale: ne,
+							locale: ae,
 							onValueChange: (e) => Y({
 								...J,
 								a: e / 100
@@ -385,7 +404,7 @@ var j = {
 								a: e / 100
 							}, !0)
 						}),
-						/* @__PURE__ */ m(r, {
+						/* @__PURE__ */ h(r, {
 							className: "color-picker__hex",
 							type: "text",
 							size: M,
@@ -393,36 +412,36 @@ var j = {
 							autoComplete: "off",
 							spellCheck: !1,
 							maxLength: S ? 9 : 7,
-							value: X ?? me,
-							onChange: ye,
-							onBlur: be,
+							value: X ?? ve,
+							onChange: Ce,
+							onBlur: we,
 							onKeyDown: (e) => {
-								e.key === "Enter" && (e.preventDefault(), be());
+								e.key === "Enter" && (e.preventDefault(), we());
 							}
 						}),
-						De.length > 0 && /* @__PURE__ */ m("div", {
+						je.length > 0 && /* @__PURE__ */ h("div", {
 							className: "color-picker__presets",
 							role: "group",
 							"aria-label": V("presets"),
-							children: De.map((e) => /* @__PURE__ */ m("button", {
+							children: je.map((e) => /* @__PURE__ */ h("button", {
 								type: "button",
 								className: "color-picker__preset",
 								title: e.title,
 								"aria-label": e.title,
-								"aria-pressed": e.hex === me,
+								"aria-pressed": e.hex === ve,
 								onClick: () => Y(O(e.hex) ?? j, !0),
-								children: /* @__PURE__ */ m(s, {
+								children: /* @__PURE__ */ h(s, {
 									color: e.hex,
 									className: "color-picker__preset-swatch"
 								})
 							}, `${e.hex}-${e.title}`))
 						}),
-						w && /* @__PURE__ */ m(n, {
+						w && /* @__PURE__ */ h(n, {
 							variant: "ghost",
 							size: "sm",
 							className: "color-picker__clear",
-							onClick: xe,
-							children: V("clear", oe)
+							onClick: Te,
+							children: V("clear", de)
 						})
 					]
 				})
@@ -431,4 +450,4 @@ var j = {
 	});
 });
 //#endregion
-export { te as t };
+export { ie as t };

package/dist/_shared/connectorrequestsummary.js

@@ -0,0 +1,46 @@
+import '../connectorrequestsummary.css';
+import { r as e } from "./brandmessagescontext.js";
+import { DescriptionDetails as t, DescriptionList as n, DescriptionTerm as r } from "../description-list.js";
+import { t as i } from "./untrustedtext.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/connectorRequestSummary.ts
+var c = {
+	client: "Herramienta",
+	product: "Producto",
+	account: "Cuenta",
+	scope: "Permiso",
+	redirect: "Destino"
+};
+//#endregion
+//#region src/stories/templates/ConnectorAuth/ConnectorRequestSummary.tsx
+function l({ clientName: l, productName: u, accountEmail: d, scope: f, redirectHost: p, clientLabel: m, productLabel: h, accountLabel: g, scopeLabel: _, redirectLabel: v, scopeReadLabel: y, scopeWriteLabel: b, expandLabel: x, collapseLabel: S, valueQuotes: C, className: w }) {
+	let T = e("connectorRequestSummary", c), E = (e) => /* @__PURE__ */ o(i, {
+		value: e,
+		expandable: !0,
+		expandLabel: x,
+		collapseLabel: S,
+		quotes: C
+	});
+	return /* @__PURE__ */ s(n, {
+		className: ["connector-request-summary", w].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ o(r, { children: T("client", m) }),
+			/* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(l)
+			}),
+			u !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("product", h) }), /* @__PURE__ */ o(t, { children: u })] }),
+			d !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("account", g) }), /* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(d)
+			})] }),
+			f !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("scope", _) }), /* @__PURE__ */ o(t, { children: f === "read" ? y : b })] }),
+			p !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("redirect", v) }), /* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(p)
+			})] })
+		]
+	});
+}
+//#endregion
+export { l as t };

package/dist/_shared/{copy-to-clipboard.js → copy.js}

@@ -27,4 +27,11 @@ function i(i = r) {
 	};
 }
 //#endregion
-export { i as n, r as t };
+//#region src/stories/messages/es/copy.ts
+var a = {
+	label: "Copiar",
+	copied: "Copiado",
+	error: "No se pudo copiar"
+};
+//#endregion
+export { r as n, i as r, a as t };