@studiolxd/brand 46.0.0 → 47.0.0

package/dist/input-phone.js

@@ -2,72 +2,73 @@
 import './input-phone.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
-import { forwardRef as n, useMemo as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Select as o } from "@base-ui/react/select";
-import s, { getCountryCallingCode as c } from "react-phone-number-input";
+import { n } from "./_shared/portal-container.js";
+import { forwardRef as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Select as s } from "@base-ui/react/select";
+import c, { getCountryCallingCode as l } from "react-phone-number-input";
 //#region src/stories/atoms/InputPhone/InputPhone.tsx
-function l({ value: n, onChange: r, options: s, disabled: l, size: u = "md", countryLabel: d, internationalLabel: f = "🌐", container: p }) {
-	let m = e("inputPhone"), h = "__intl__", g = (e) => e ?? h, _ = (e) => e === h ? void 0 : e, v = u === "sm" ? "xs" : u === "lg" ? "md" : "sm", y = ["input-phone__country-content", u === "md" ? "" : `input-phone__country-content--${u}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ a(o.Root, {
-		value: g(n),
-		onValueChange: (e) => r(_(e)),
-		disabled: l,
-		children: [/* @__PURE__ */ a(o.Trigger, {
+function u({ value: r, onChange: i, options: c, disabled: u, size: d = "md", countryLabel: f, internationalLabel: p = "🌐", container: m }) {
+	let h = e("inputPhone"), g = n(m), _ = "__intl__", v = (e) => e ?? _, y = (e) => e === _ ? void 0 : e, b = d === "sm" ? "xs" : d === "lg" ? "md" : "sm", x = ["input-phone__country-content", d === "md" ? "" : `input-phone__country-content--${d}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ o(s.Root, {
+		value: v(r),
+		onValueChange: (e) => i(y(e)),
+		disabled: u,
+		children: [/* @__PURE__ */ o(s.Trigger, {
 			className: "input-phone__country",
-			"aria-label": m("country", d),
-			children: [/* @__PURE__ */ i(o.Value, { children: n ? `+${c(n)}` : f }), /* @__PURE__ */ i(t, {
+			"aria-label": h("country", f),
+			children: [/* @__PURE__ */ a(s.Value, { children: r ? `+${l(r)}` : p }), /* @__PURE__ */ a(t, {
 				name: "chevron",
 				className: "input-phone__country-icon",
-				size: v
+				size: b
 			})]
-		}), /* @__PURE__ */ i(o.Portal, {
-			container: p,
-			children: /* @__PURE__ */ i(o.Positioner, {
+		}), /* @__PURE__ */ a(s.Portal, {
+			container: g,
+			children: /* @__PURE__ */ a(s.Positioner, {
 				className: "input-phone__country-positioner",
 				side: "bottom",
 				align: "start",
 				alignItemWithTrigger: !1,
-				children: /* @__PURE__ */ i(o.Popup, {
-					className: y,
-					children: s.map(({ value: e, label: t }) => /* @__PURE__ */ i(o.Item, {
-						value: g(e),
+				children: /* @__PURE__ */ a(s.Popup, {
+					className: x,
+					children: c.map(({ value: e, label: t }) => /* @__PURE__ */ a(s.Item, {
+						value: v(e),
 						className: "input-phone__country-item",
-						children: /* @__PURE__ */ i(o.ItemText, { children: t })
-					}, g(e)))
+						children: /* @__PURE__ */ a(s.ItemText, { children: t })
+					}, v(e)))
 				})
 			})
 		})]
 	});
 }
-var u = n(function({ value: e, defaultCountry: t = "ES", placeholder: a, disabled: o, error: c = !1, size: u = "md", id: f, name: p, describedBy: m, "aria-describedby": h, "aria-label": g, autoComplete: _, required: v, readOnly: y, onChange: b, onBlur: x, onFocus: S, countryLabel: C, internationalLabel: w, container: T }, E) {
-	return /* @__PURE__ */ i(s, {
+var d = r(function({ value: e, defaultCountry: t = "ES", placeholder: n, disabled: o, error: s = !1, size: l = "md", id: d, name: p, describedBy: m, "aria-describedby": h, "aria-label": g, autoComplete: _, required: v, readOnly: y, onChange: b, onBlur: x, onFocus: S, countryLabel: C, internationalLabel: w, container: T }, E) {
+	return /* @__PURE__ */ a(c, {
 		className: [
 			"input-phone",
-			c ? "input-phone--error" : "",
-			u === "md" ? "" : `input-phone--${u}`
+			s ? "input-phone--error" : "",
+			l === "md" ? "" : `input-phone--${l}`
 		].filter(Boolean).join(" "),
 		value: e,
 		defaultCountry: t,
-		placeholder: a,
+		placeholder: n,
 		disabled: o,
 		readOnly: y,
 		required: v,
 		autoComplete: _,
-		id: f,
+		id: d,
 		name: p,
-		inputComponent: r(() => n(function(e, t) {
-			return /* @__PURE__ */ i("input", {
+		inputComponent: i(() => r(function(e, t) {
+			return /* @__PURE__ */ a("input", {
 				...e,
 				ref: (e) => {
-					d(t, e), d(E, e);
+					f(t, e), f(E, e);
 				},
 				className: "input-phone__number"
 			});
 		}), [E]),
-		countrySelectComponent: l,
+		countrySelectComponent: u,
 		countrySelectProps: {
-			size: u,
+			size: l,
 			countryLabel: C,
 			internationalLabel: w,
 			container: T
@@ -78,12 +79,12 @@ var u = n(function({ value: e, defaultCountry: t = "ES", placeholder: a, disable
 		numberInputProps: {
 			"aria-describedby": h ?? m,
 			"aria-label": g,
-			"aria-invalid": c || void 0
+			"aria-invalid": s || void 0
 		}
 	});
 });
-function d(e, t) {
+function f(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
 //#endregion
-export { u as InputPhone };
+export { d as InputPhone };

package/dist/menu-button.js

@@ -1,27 +1,29 @@
 'use client';
 import './menu-button.css';
-import { Icon as e } from "./icon.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/stories/atoms/MenuButton/MenuButton.tsx
-var r = t(function({ isOpen: t = !1, label: r = "Menú", closeLabel: i, size: a = "md", className: o, ...s }, c) {
-	return /* @__PURE__ */ n("button", {
-		ref: c,
+var i = n(function({ isOpen: n = !1, label: i, closeLabel: a, size: o = "md", className: s, ...c }, l) {
+	let u = e("menuButton");
+	return /* @__PURE__ */ r("button", {
+		ref: l,
 		type: "button",
 		className: [
 			"menu-button",
-			`menu-button--${a}`,
-			o
+			`menu-button--${o}`,
+			s
 		].filter(Boolean).join(" "),
-		"aria-label": t && i ? i : r,
-		"aria-expanded": t,
-		...s,
-		children: /* @__PURE__ */ n(e, {
+		"aria-label": n ? u("close", a) : u("open", i),
+		"aria-expanded": n,
+		...c,
+		children: /* @__PURE__ */ r(t, {
 			name: "menu",
-			size: a === "lg" ? "lg" : "md",
+			size: o === "lg" ? "lg" : "md",
 			className: "menu-button__icon"
 		})
 	});
 });
 //#endregion
-export { r as MenuButton };
+export { i as MenuButton };

package/dist/menu.js

@@ -1,51 +1,55 @@
 'use client';
 import './menu.css';
-import { t as e } from "./_shared/css-properties.js";
-import { n as t, t as n } from "./_shared/dropdownitems.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Menu as a } from "@base-ui/react/menu";
+import { n as e } from "./_shared/portal-container.js";
+import { t } from "./_shared/css-properties.js";
+import { n, t as r } from "./_shared/dropdownitems.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Menu as o } from "@base-ui/react/menu";
 //#region src/stories/molecules/Menu/Menu.tsx
-function o(e) {
+function s(e) {
 	return ["menu__item", e ? "menu__item--destructive" : ""].filter(Boolean).join(" ");
 }
-function s({ trigger: s, items: c, value: l, onValueChange: u, renderLink: d = n, open: f, defaultOpen: p, onOpenChange: m, openOnHover: h = !1, hoverDelay: g = 150, side: _ = "bottom", align: v = "start", sideOffset: y = 4, minWidth: b = "10rem", maxWidth: x, size: S = "md", className: C }) {
-	let w = s, T = typeof w.props?.id == "string" ? w.props.id : void 0, E = e({
-		"min-width": b,
-		"max-width": x
+function c({ trigger: c, items: l, value: u, onValueChange: d, renderLink: f = r, open: p, defaultOpen: m, onOpenChange: h, openOnHover: g = !1, hoverDelay: _ = 150, side: v = "bottom", align: y = "start", sideOffset: b = 4, minWidth: x = "10rem", maxWidth: S, size: C = "md", container: w, className: T }) {
+	let E = e(w), D = c, O = typeof D.props?.id == "string" ? D.props.id : void 0, k = t({
+		"min-width": x,
+		"max-width": S
 	});
-	return /* @__PURE__ */ i(a.Root, {
-		open: f,
-		defaultOpen: p,
-		onOpenChange: (e) => m?.(e),
-		children: [/* @__PURE__ */ r(a.Trigger, {
-			id: T,
-			render: w,
-			openOnHover: h,
-			delay: g
-		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
-			className: "menu__positioner",
-			side: _,
-			align: v,
-			sideOffset: y,
-			children: /* @__PURE__ */ r(a.Popup, {
-				ref: E,
-				className: [
-					"menu__content",
-					S === "md" ? "" : `menu__content--${S}`,
-					C
-				].filter(Boolean).join(" "),
-				children: t({
-					items: c,
-					itemClass: o,
-					separatorClass: "menu__separator",
-					labelClass: "menu__label",
-					radioValue: l,
-					onRadioValueChange: u,
-					renderLink: d
+	return /* @__PURE__ */ a(o.Root, {
+		open: p,
+		defaultOpen: m,
+		onOpenChange: (e) => h?.(e),
+		children: [/* @__PURE__ */ i(o.Trigger, {
+			id: O,
+			render: D,
+			openOnHover: g,
+			delay: _
+		}), /* @__PURE__ */ i(o.Portal, {
+			container: E,
+			children: /* @__PURE__ */ i(o.Positioner, {
+				className: "menu__positioner",
+				side: v,
+				align: y,
+				sideOffset: b,
+				children: /* @__PURE__ */ i(o.Popup, {
+					ref: k,
+					className: [
+						"menu__content",
+						C === "md" ? "" : `menu__content--${C}`,
+						T
+					].filter(Boolean).join(" "),
+					children: n({
+						items: l,
+						itemClass: s,
+						separatorClass: "menu__separator",
+						labelClass: "menu__label",
+						radioValue: u,
+						onRadioValueChange: d,
+						renderLink: f
+					})
 				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion
-export { s as Menu };
+export { c as Menu };

package/dist/modal.js

@@ -2,56 +2,57 @@
 import './modal.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
-import { CloseButton as n } from "./close-button.js";
-import { n as r, r as i, t as a } from "./_shared/dialogsurface.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Dialog as l } from "@base-ui/react/dialog";
+import { n } from "./_shared/portal-container.js";
+import { CloseButton as r } from "./close-button.js";
+import { n as i, r as a, t as o } from "./_shared/dialogsurface.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Dialog as u } from "@base-ui/react/dialog";
 //#region src/stories/molecules/Modal/Modal.tsx
-function u({ open: u, onClose: d, title: f, children: p, closeLabel: m, fallbackTitle: h, container: g, description: _, "aria-describedby": v, initialFocus: y, footer: b, footerClassName: x, ...S }) {
-	let C = e("modal"), w = v === void 0 ? {} : { "aria-describedby": v }, T = y === void 0 ? {} : { initialFocus: y };
-	return /* @__PURE__ */ s(l.Root, {
-		open: u,
+function d({ open: d, onClose: f, title: p, children: m, closeLabel: h, fallbackTitle: g, container: _, description: v, "aria-describedby": y, initialFocus: b, footer: x, footerClassName: S, ...C }) {
+	let w = e("modal"), T = n(_), E = y === void 0 ? {} : { "aria-describedby": y }, D = b === void 0 ? {} : { initialFocus: b };
+	return /* @__PURE__ */ c(u.Root, {
+		open: d,
 		onOpenChange: (e) => {
-			e || d();
+			e || f();
 		},
-		children: /* @__PURE__ */ c(l.Portal, {
-			container: g,
-			children: [/* @__PURE__ */ s(i, { className: "modal__overlay" }), /* @__PURE__ */ c(l.Popup, {
+		children: /* @__PURE__ */ l(u.Portal, {
+			container: T,
+			children: [/* @__PURE__ */ c(a, { className: "modal__overlay" }), /* @__PURE__ */ l(u.Popup, {
 				className: "modal__content",
-				...w,
-				...T,
-				...S,
+				...E,
+				...D,
+				...C,
 				children: [
-					f ? /* @__PURE__ */ c(r, {
+					p ? /* @__PURE__ */ l(i, {
 						layout: "inline",
 						className: "modal__header",
-						children: [/* @__PURE__ */ s(l.Title, {
+						children: [/* @__PURE__ */ c(u.Title, {
 							className: "modal__title",
-							children: f
-						}), /* @__PURE__ */ s(l.Close, {
+							children: p
+						}), /* @__PURE__ */ c(u.Close, {
 							className: "modal__close",
-							render: /* @__PURE__ */ s(n, { label: C("close", m) })
+							render: /* @__PURE__ */ c(r, { label: w("close", h) })
 						})]
-					}) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(t, { children: C("fallbackTitle", h) }) }), /* @__PURE__ */ s(r, {
+					}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Title, { render: /* @__PURE__ */ c(t, { children: w("fallbackTitle", g) }) }), /* @__PURE__ */ c(i, {
 						layout: "inline",
 						noTitle: !0,
 						className: "modal__header modal__header--no-title",
-						children: /* @__PURE__ */ s(l.Close, {
+						children: /* @__PURE__ */ c(u.Close, {
 							className: "modal__close",
-							render: /* @__PURE__ */ s(n, { label: C("close", m) })
+							render: /* @__PURE__ */ c(r, { label: w("close", h) })
 						})
 					})] }),
-					_ != null && /* @__PURE__ */ s(l.Description, {
+					v != null && /* @__PURE__ */ c(u.Description, {
 						className: "modal__description",
-						children: _
+						children: v
 					}),
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ c("div", {
 						className: "modal__body",
-						children: p
+						children: m
 					}),
-					b != null && /* @__PURE__ */ s(a, {
-						className: ["modal__footer", x].filter(Boolean).join(" "),
-						children: b
+					x != null && /* @__PURE__ */ c(o, {
+						className: ["modal__footer", S].filter(Boolean).join(" "),
+						children: x
 					})
 				]
 			})]
@@ -59,4 +60,4 @@ function u({ open: u, onClose: d, title: f, children: p, closeLabel: m, fallback
 	});
 }
 //#endregion
-export { u as Modal };
+export { d as Modal };