@studiolxd/brand 49.28.0 → 50.0.0

package/dist/tooltip.css

@@ -1 +1 @@
-.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}.tooltip__trigger{display:inline-flex}.tooltip__trigger:focus-visible{outline:var(--border-width-focus) solid currentColor;outline-offset:var(--spacing-1)}.tooltip__trigger>:disabled,.tooltip__trigger>[aria-disabled=true]{pointer-events:none}
+.tooltip{box-sizing:border-box;max-inline-size:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{inset-block-start:100%}.tooltip__arrow[data-side=bottom]{inset-block-end:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}.tooltip__trigger{display:inline-flex}.tooltip__trigger:focus-visible{outline:var(--border-width-focus) solid currentColor;outline-offset:var(--spacing-1)}.tooltip__trigger>:disabled,.tooltip__trigger>[aria-disabled=true]{pointer-events:none}

package/dist/tooltip.js

@@ -1,62 +1,55 @@
 'use client';
 import './tooltip.css';
 import { n as e } from "./_shared/portal-container.js";
-import { forwardRef as t, useId as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Tooltip as o } from "@base-ui/react/tooltip";
+import { t } from "./_shared/side-offset.js";
+import { forwardRef as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Tooltip as s } from "@base-ui/react/tooltip";
 //#region src/stories/atoms/Tooltip/Tooltip.tsx
-function s({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
-	return /* @__PURE__ */ i(o.Provider, {
+function c({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
+	return /* @__PURE__ */ a(s.Provider, {
 		delay: t,
 		...n === void 0 ? {} : { timeout: n },
 		children: e
 	});
 }
-function c(e, t) {
-	let n = parseFloat(e);
-	return Number.isNaN(n) ? 0 : e.endsWith("rem") ? n * parseFloat(getComputedStyle(document.documentElement).fontSize) : e.endsWith("em") ? n * parseFloat(getComputedStyle(t).fontSize) : n;
-}
-function l() {
-	let e = document.documentElement;
-	return c(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
-}
-var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, disabledTrigger: _ = !1, container: v, className: y, ...b }, x) {
-	let S = e(v), C = n(), [w, T] = r(p ?? !1), E = f ?? w;
-	return /* @__PURE__ */ a(o.Root, {
+var l = t("--tooltip-offset"), u = n(function({ label: t, children: n, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, disabledTrigger: _ = !1, container: v, className: y, ...b }, x) {
+	let S = e(v), C = r(), [w, T] = i(p ?? !1), E = f ?? w;
+	return /* @__PURE__ */ o(s.Root, {
 		open: f,
 		defaultOpen: p,
 		onOpenChange: (e) => {
 			f === void 0 && T(e), m?.(e);
 		},
-		children: [/* @__PURE__ */ i(o.Trigger, {
+		children: [/* @__PURE__ */ a(s.Trigger, {
 			ref: x,
-			render: _ ? /* @__PURE__ */ i("span", {
+			render: _ ? /* @__PURE__ */ a("span", {
 				className: "tooltip__trigger",
 				tabIndex: 0,
-				children: s
-			}) : s,
+				children: n
+			}) : n,
 			"aria-describedby": E && g ? C : void 0,
 			...h === void 0 ? {} : { delay: h },
 			...b
-		}), /* @__PURE__ */ i(o.Portal, {
+		}), /* @__PURE__ */ a(s.Portal, {
 			container: S,
-			children: /* @__PURE__ */ i(o.Positioner, {
+			children: /* @__PURE__ */ a(s.Positioner, {
 				className: "tooltip__positioner",
 				side: c,
 				align: u,
 				sideOffset: d ?? l,
-				children: /* @__PURE__ */ a(o.Popup, {
+				children: /* @__PURE__ */ o(s.Popup, {
 					id: C,
 					role: "tooltip",
 					className: ["tooltip", y].filter(Boolean).join(" "),
-					children: [t, /* @__PURE__ */ i(o.Arrow, {
+					children: [t, /* @__PURE__ */ a(s.Arrow, {
 						className: "tooltip__arrow",
-						children: /* @__PURE__ */ i("svg", {
+						children: /* @__PURE__ */ a("svg", {
 							width: "10",
 							height: "5",
 							viewBox: "0 0 30 10",
 							preserveAspectRatio: "none",
-							children: /* @__PURE__ */ i("polygon", { points: "0,0 30,0 15,10" })
+							children: /* @__PURE__ */ a("polygon", { points: "0,0 30,0 15,10" })
 						})
 					})]
 				})
@@ -65,4 +58,4 @@ var u = t(function({ label: t, children: s, side: c = "top", align: u = "center"
 	});
 });
 //#endregion
-export { u as Tooltip, s as TooltipProvider };
+export { u as Tooltip, c as TooltipProvider };

package/dist/typing-indicator.css

@@ -1 +1 @@
-.typing-indicator{align-items:center;gap:var(--typing-indicator-dot-gap);display:inline-flex}.typing-indicator__dot{width:var(--typing-indicator-dot-size);height:var(--typing-indicator-dot-size);background-color:var(--typing-indicator-dot-color);opacity:var(--typing-indicator-dot-opacity-inactive);animation:typing-bounce var(--typing-indicator-animation-duration) var(--typing-indicator-animation-easing) infinite;display:block}.typing-indicator__dot:nth-child(2){animation-delay:calc(var(--typing-indicator-animation-duration) / 5)}.typing-indicator__dot:nth-child(3){animation-delay:calc(var(--typing-indicator-animation-duration) / 5 * 2)}@media (prefers-reduced-motion:reduce){.typing-indicator__dot{opacity:var(--typing-indicator-dot-opacity-inactive);animation:none}.typing-indicator__dot:nth-child(2),.typing-indicator__dot:nth-child(3){animation-delay:0s}}@keyframes typing-bounce{0%,60%,to{opacity:var(--typing-indicator-dot-opacity-inactive);transform:translateY(0)}30%{opacity:var(--typing-indicator-dot-opacity-active);transform:translateY(calc(-1 * var(--typing-indicator-dot-rise)))}}
+.typing-indicator{align-items:center;gap:var(--typing-indicator-dot-gap);display:inline-flex}.typing-indicator__dot{inline-size:var(--typing-indicator-dot-size);block-size:var(--typing-indicator-dot-size);background-color:var(--typing-indicator-dot-color);opacity:var(--typing-indicator-dot-opacity-inactive);animation:typing-bounce var(--typing-indicator-animation-duration) var(--typing-indicator-animation-easing) infinite;display:block}.typing-indicator__dot:nth-child(2){animation-delay:calc(var(--typing-indicator-animation-duration) / 5)}.typing-indicator__dot:nth-child(3){animation-delay:calc(var(--typing-indicator-animation-duration) / 5 * 2)}@media (prefers-reduced-motion:reduce){.typing-indicator__dot{opacity:var(--typing-indicator-dot-opacity-inactive);animation:none}.typing-indicator__dot:nth-child(2),.typing-indicator__dot:nth-child(3){animation-delay:0s}}@keyframes typing-bounce{0%,60%,to{opacity:var(--typing-indicator-dot-opacity-inactive);transform:translateY(0)}30%{opacity:var(--typing-indicator-dot-opacity-active);transform:translateY(calc(-1 * var(--typing-indicator-dot-rise)))}}

package/dist/typing-indicator.js

@@ -4,10 +4,10 @@ import { n as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/stories/atoms/TypingIndicator/TypingIndicator.tsx
-function i({ name: i, label: a }) {
-	let o = e("typingIndicator");
+function i({ name: i, label: a, className: o }) {
+	let s = e("typingIndicator");
 	return /* @__PURE__ */ r("span", {
-		className: "typing-indicator",
+		className: ["typing-indicator", o].filter(Boolean).join(" "),
 		role: "status",
 		children: [
 			/* @__PURE__ */ n("span", {
@@ -22,7 +22,7 @@ function i({ name: i, label: a }) {
 				className: "typing-indicator__dot",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ n(t, { children: a ?? o("typing")(i) })
+			/* @__PURE__ */ n(t, { children: a ?? s("typing")(i) })
 		]
 	});
 }

package/dist/user-menu.css

@@ -1 +1 @@
-.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);width:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{width:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-width:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-height:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{align-items:center;gap:var(--user-menu-trigger-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);display:flex}.user-menu__header-text{gap:var(--user-menu-header-gap);flex-direction:column;min-width:0;display:flex}.user-menu__header-name{font-size:var(--user-menu-header-name-font-size);font-weight:var(--user-menu-header-name-font-weight);color:var(--user-menu-header-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__header-email{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item{align-items:center;gap:var(--user-menu-item-icon-gap);padding-block:var(--user-menu-item-padding-block);padding-inline:var(--user-menu-item-padding-inline);border-radius:var(--user-menu-item-border-radius);font-family:var(--user-menu-item-font-family);font-size:var(--user-menu-item-font-size);font-weight:var(--user-menu-item-font-weight);color:var(--user-menu-item-color);cursor:pointer;box-shadow:none;transition:background-color var(--user-menu-transition-duration) var(--user-menu-transition-easing), color var(--user-menu-transition-duration) var(--user-menu-transition-easing);outline:none;text-decoration:none;display:flex}.user-menu__item[data-highlighted]{background-color:var(--user-menu-item-highlighted-bg);color:var(--user-menu-item-highlighted-color)}.user-menu__item[data-disabled]{opacity:var(--user-menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.user-menu__item.user-menu__item--destructive{color:var(--user-menu-item-destructive-color)}.user-menu__item.user-menu__item--destructive[data-highlighted]{background-color:var(--user-menu-item-destructive-highlighted-bg);color:var(--user-menu-item-destructive-highlighted-color)}.user-menu__separator{height:var(--user-menu-separator-height);background-color:var(--user-menu-separator-color);margin-block:var(--user-menu-separator-margin-block);border:none}.user-menu__positioner{z-index:var(--user-menu-content-z-index)}.user-menu__item-icon{flex-shrink:0}.user-menu__item-text{flex-direction:column;flex:1;min-width:0;display:flex}.user-menu__item-label,.user-menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item-description{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color)}.user-menu__item[data-highlighted] .user-menu__item-description,.user-menu__item.user-menu__item--destructive .user-menu__item-description{color:inherit}
+.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);inline-size:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{inline-size:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-inline-size:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-block-size:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{align-items:center;gap:var(--user-menu-trigger-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);display:flex}.user-menu__header-text{gap:var(--user-menu-header-gap);flex-direction:column;min-inline-size:0;display:flex}.user-menu__header-name{font-size:var(--user-menu-header-name-font-size);font-weight:var(--user-menu-header-name-font-weight);color:var(--user-menu-header-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__header-email{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item{align-items:center;gap:var(--user-menu-item-icon-gap);padding-block:var(--user-menu-item-padding-block);padding-inline:var(--user-menu-item-padding-inline);border-radius:var(--user-menu-item-border-radius);font-family:var(--user-menu-item-font-family);font-size:var(--user-menu-item-font-size);font-weight:var(--user-menu-item-font-weight);color:var(--user-menu-item-color);cursor:pointer;box-shadow:none;transition:background-color var(--user-menu-transition-duration) var(--user-menu-transition-easing), color var(--user-menu-transition-duration) var(--user-menu-transition-easing);outline:none;text-decoration:none;display:flex}.user-menu__item[data-highlighted]{background-color:var(--user-menu-item-highlighted-bg);color:var(--user-menu-item-highlighted-color)}.user-menu__item[data-disabled]{opacity:var(--user-menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.user-menu__item.user-menu__item--destructive{color:var(--user-menu-item-destructive-color)}.user-menu__item.user-menu__item--destructive[data-highlighted]{background-color:var(--user-menu-item-destructive-highlighted-bg);color:var(--user-menu-item-destructive-highlighted-color)}.user-menu__separator{block-size:var(--user-menu-separator-height);background-color:var(--user-menu-separator-color);margin-block:var(--user-menu-separator-margin-block);border:none}.user-menu__positioner{z-index:var(--user-menu-content-z-index)}.user-menu__item-icon{flex-shrink:0}.user-menu__item-text{flex-direction:column;flex:1;min-inline-size:0;display:flex}.user-menu__item-label,.user-menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item-description{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color)}.user-menu__item[data-highlighted] .user-menu__item-description,.user-menu__item.user-menu__item--destructive .user-menu__item-description{color:inherit}

package/dist/user-menu.js

@@ -4,88 +4,81 @@ import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { n } from "./_shared/portal-container.js";
 import { Avatar as r } from "./avatar.js";
-import { NumberBadge as i } from "./number-badge.js";
-import { n as a } from "./_shared/dropdownitems.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Menu as l } from "@base-ui/react/menu";
+import { t as i } from "./_shared/side-offset.js";
+import { NumberBadge as a } from "./number-badge.js";
+import { t as o } from "./_shared/default-render-link.js";
+import { t as s } from "./_shared/dropdownitems.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Menu as d } from "@base-ui/react/menu";
 //#region src/stories/molecules/UserMenu/UserMenu.tsx
-function u(e) {
-	let t = parseFloat(e);
-	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
-}
-function d() {
-	let e = document.documentElement;
-	return u(getComputedStyle(e).getPropertyValue("--user-menu-offset").trim());
-}
-function f({ children: e, ...t }) {
-	return /* @__PURE__ */ s("a", {
-		...t,
-		children: e
-	});
-}
+var f = i("--user-menu-offset");
 function p(e) {
 	return ["user-menu__item", e ? "user-menu__item--destructive" : ""].filter(Boolean).join(" ");
 }
-function m({ name: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [], label: v, compact: y = !1, renderLink: b = f, onOpenChange: x, defaultOpen: S }) {
-	let C = e("userMenu"), w = n(void 0);
-	return /* @__PURE__ */ c(l.Root, {
+function m({ name: i, email: m, avatarUrl: h, notificationCount: g, items: _ = [], label: v, compact: y = !1, renderLink: b = o, onOpenChange: x, defaultOpen: S, className: C }) {
+	let w = e("userMenu"), T = n(void 0);
+	return /* @__PURE__ */ u(d.Root, {
 		onOpenChange: (e) => x?.(e),
 		defaultOpen: S,
-		children: [/* @__PURE__ */ c(l.Trigger, {
-			className: ["user-menu__trigger", y ? "user-menu__trigger--compact" : ""].filter(Boolean).join(" "),
-			"aria-label": v ?? C("trigger")(u),
+		children: [/* @__PURE__ */ u(d.Trigger, {
+			className: [
+				"user-menu__trigger",
+				y ? "user-menu__trigger--compact" : "",
+				C
+			].filter(Boolean).join(" "),
+			"aria-label": v ?? w("trigger")(i),
 			children: [
-				/* @__PURE__ */ c("span", {
+				/* @__PURE__ */ u("span", {
 					className: "user-menu__avatar-wrap",
-					children: [/* @__PURE__ */ s(r, {
+					children: [/* @__PURE__ */ l(r, {
 						src: h,
-						name: u,
+						name: i,
 						alt: "",
 						size: "sm"
-					}), !!g && g > 0 && /* @__PURE__ */ s(i, {
+					}), !!g && g > 0 && /* @__PURE__ */ l(a, {
 						count: g,
 						variant: "danger",
-						"aria-label": C("unread")(g),
+						"aria-label": w("unread")(g),
 						className: "user-menu__notification-badge"
 					})]
 				}),
-				!y && /* @__PURE__ */ s("span", {
+				!y && /* @__PURE__ */ l("span", {
 					className: "user-menu__name",
-					children: u
+					children: i
 				}),
-				/* @__PURE__ */ s(t, {
+				/* @__PURE__ */ l(t, {
 					name: "chevron",
 					size: "sm",
 					className: "user-menu__chevron"
 				})
 			]
-		}), /* @__PURE__ */ s(l.Portal, {
-			container: w,
-			children: /* @__PURE__ */ s(l.Positioner, {
+		}), /* @__PURE__ */ l(d.Portal, {
+			container: T,
+			children: /* @__PURE__ */ l(d.Positioner, {
 				className: "user-menu__positioner",
-				sideOffset: d,
+				sideOffset: f,
 				align: "start",
-				children: /* @__PURE__ */ c(l.Popup, {
+				children: /* @__PURE__ */ u(d.Popup, {
 					className: "user-menu__content",
-					children: [/* @__PURE__ */ c("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "user-menu__header",
-						children: [/* @__PURE__ */ s(r, {
+						children: [/* @__PURE__ */ l(r, {
 							src: h,
-							name: u,
+							name: i,
 							alt: "",
 							size: "md",
 							className: "user-menu__header-avatar"
-						}), /* @__PURE__ */ c("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "user-menu__header-text",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: "user-menu__header-name",
-								children: u
-							}), /* @__PURE__ */ s("span", {
+								children: i
+							}), /* @__PURE__ */ l("span", {
 								className: "user-menu__header-email",
 								children: m
 							})]
 						})]
-					}), _.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Separator, { className: "user-menu__separator" }), a({
+					}), _.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(d.Separator, { className: "user-menu__separator" }), s({
 						items: _,
 						itemClass: p,
 						separatorClass: "user-menu__separator",

package/dist/visuallyhidden.css

@@ -1 +1 @@
-.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
+.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.28.0",
+  "version": "50.0.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/studiolxd/brand.git"
   },
   "homepage": "https://github.com/studiolxd/brand#readme",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
   "type": "module",
   "exports": {
     "./accordion": {
@@ -207,6 +211,11 @@
       "import": "./dist/copy-button.js",
       "default": "./dist/copy-button.js"
     },
+    "./floating-toolbar": {
+      "types": "./dist/_types/molecules/FloatingToolbar/FloatingToolbar.d.ts",
+      "import": "./dist/floating-toolbar.js",
+      "default": "./dist/floating-toolbar.js"
+    },
     "./recovery-codes": {
       "types": "./dist/_types/molecules/RecoveryCodes/RecoveryCodes.d.ts",
       "import": "./dist/recovery-codes.js",
@@ -950,21 +959,18 @@
   "files": [
     "dist",
     "src/tokens",
-    "CHANGELOG.md"
+    "!src/tokens/**/*.test.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
     "build:lib": "rm -rf dist && vite build --config vite.lib.config.ts && tsc -b --force tsconfig.lib.json && node scripts/post-build.mjs",
-    "build:css": "postcss src/index.css --use postcss-import -o dist/brand.css",
-    "build:tokens-css": "postcss src/tokens/index.css --use postcss-import -o dist/tokens.css",
+    "build:css": "postcss src/index.css --use postcss-import --no-map -o dist/brand.css",
+    "build:tokens-css": "postcss src/tokens/index.css --use postcss-import --no-map -o dist/tokens.css",
     "build:fonts-css": "node scripts/build-fonts-css.mjs",
     "build:icons": "node scripts/build-icons.mjs",
     "lint": "eslint .",
-    "preview": "vite preview",
     "build:tokens": "node sd.config.mjs",
     "build:email-assets": "node scripts/build-email-assets.mjs",
     "build:native-fonts": "python3 scripts/build-native-fonts.py",
@@ -981,22 +987,28 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@tanstack/react-table": "^8.21.3",
-    "react-image-crop": "^11.1.2",
     "react-phone-number-input": "^3.4.16"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
+    "@tanstack/react-table": "^8.21.3",
+    "react": ">=19",
+    "react-dom": ">=19",
     "react-email": ">=6",
-    "react-hook-form": ">=7"
+    "react-hook-form": ">=7",
+    "react-image-crop": "^11.1.2"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
     "react-email": {
       "optional": true
     },
     "react-hook-form": {
       "optional": true
+    },
+    "react-image-crop": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -1007,6 +1019,7 @@
     "@storybook/addon-mcp": "^10.6.0",
     "@storybook/addon-vitest": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.5",
@@ -1033,7 +1046,7 @@
     "react-dom": "^19.2.4",
     "react-email": "^6.9.3",
     "react-hook-form": "^7.85.0",
-    "react-phone-number-input": "^3.4.16",
+    "react-image-crop": "^11.1.2",
     "remark-gfm": "^4.0.1",
     "sharp": "^0.35.4",
     "storybook": "^10.6.0",
@@ -1042,7 +1055,6 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^8.0.1",
-    "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.2"
   },
   "sideEffects": [

package/src/tokens/components/async-multi-select.css

@@ -3,7 +3,11 @@
  */
 
 :root {
+  --async-multi-select-input-min-inline-size: 4rem; /** Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra */
   --async-multi-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --async-multi-select-disabled-opacity: var(--async-select-disabled-opacity); /** Opacidad del control deshabilitado: la del buscador de selección única */
+  --async-multi-select-pill-remove-opacity: var(--opacity-muted); /** Opacidad del aspa de la píldora en reposo: presente pero en segundo plano */
+  --async-multi-select-pill-remove-hover-opacity: var(--opacity-full); /** Opacidad del aspa de la píldora bajo el puntero */
   --async-multi-select-content-max-height: var(--multi-select-content-max-height); /** Hereda de `multi-select.content-max-height`: el buscador múltiple tiene la misma cara que el control síncrono */
   --async-multi-select-border-style: var(--multi-select-border-style); /** Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono */
   --async-multi-select-content-gap: var(--multi-select-content-gap); /** Hereda de `multi-select.content-gap`: el buscador múltiple tiene la misma cara que el control síncrono */

package/src/tokens/components/async-select.css

@@ -3,8 +3,11 @@
  */
 
 :root {
+  --async-select-disabled-opacity: 0.5; /** Opacidad del control deshabilitado. 0.5 no está en la escala `opacity` (la más cercana, `opacity.disabled`, es 0.4): se conserva el valor de siempre */
   --async-select-border-style: var(--select-border-style); /** Hereda de `select.border-style`: el buscador tiene la misma cara que el control síncrono */
   --async-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --async-select-clear-opacity: var(--opacity-muted); /** Opacidad del botón de limpiar en reposo: presente pero en segundo plano */
+  --async-select-clear-hover-opacity: var(--opacity-full); /** Opacidad del botón de limpiar bajo el puntero */
   --async-select-content-max-height: var(--select-content-max-height); /** Hereda de `select.content-max-height`: el buscador tiene la misma cara que el control síncrono */
   --async-select-bg: var(--select-bg); /** Hereda de `select.bg`: el buscador tiene la misma cara que el control síncrono */
   --async-select-content-bg: var(--select-content-bg); /** Hereda de `select.content-bg`: el buscador tiene la misma cara que el control síncrono */

package/src/tokens/components/autocomplete.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --autocomplete-disabled-opacity: var(--async-select-disabled-opacity); /** Hereda de `async-select.disabled-opacity`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-border-style: var(--async-select-border-style); /** Hereda de `async-select.border-style`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-disabled-cursor: var(--async-select-disabled-cursor); /** Hereda de `async-select.disabled-cursor`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-content-max-height: var(--async-select-content-max-height); /** Hereda de `async-select.content-max-height`: el autocompletado tiene la misma cara que el buscador y el Select */

package/src/tokens/components/breadcrumb.css

@@ -4,8 +4,6 @@
 
 :root {
   --breadcrumb-padding-inline: 0; /** Sin padding lateral */
-  --breadcrumb-link-text-decoration: none; /** OBSOLETO — no viste nada. El subrayado de las migas es la línea del sistema, la misma de cualquier enlace, y no `text-decoration`. Se conserva en `none` para no romper a quien lo tenga referenciado; a retirar en el próximo major */
-  --breadcrumb-link-text-decoration-hover: none; /** OBSOLETO — no viste nada. Valía `underline` y era la vía por la que el subrayado de `text-decoration` seguía entrando en el DS. A retirar en el próximo major */
   --breadcrumb-font-family: var(--font-family-sans); /** Font family */
   --breadcrumb-line-height: var(--line-height-none); /** Single-line */
   --breadcrumb-gap: var(--spacing-2); /** Gap entre items y separadores */

package/src/tokens/components/button.css

@@ -4,7 +4,6 @@
 
 :root {
   --button-border-style: solid; /** Border style */
-  --button-border-color: rgba(0, 0, 0, 0); /** Default border color — overridden by variants */
   --button-justify-content: center; /** Justify content */
   --button-cursor: pointer; /** Cursor */
   --button-white-space: nowrap; /** White space */
@@ -50,14 +49,6 @@
   --button-primary-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
   --button-primary-disabled-color: var(--color-white); /** Text color when disabled — white on grey background */
   --button-primary-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
-  --button-destructive-border-style: var(--button-border-style); /** Border style */
-  --button-destructive-justify-content: var(--button-justify-content); /** Justify content */
-  --button-destructive-cursor: var(--button-cursor); /** Cursor */
-  --button-destructive-white-space: var(--button-white-space); /** White space */
-  --button-destructive-text-decoration: var(--button-text-decoration); /** Text decoration */
-  --button-destructive-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
-  --button-destructive-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
-  --button-destructive-bg: var(--color-white); /** Background */
   --button-outline-border-style: var(--button-border-style); /** Border style */
   --button-outline-justify-content: var(--button-justify-content); /** Justify content */
   --button-outline-cursor: var(--button-cursor); /** Cursor */
@@ -83,7 +74,6 @@
   --button-border-radius: var(--border-radius-default); /** Rectangular: el radio del sistema (0), como los campos */
   --button-border-width: var(--border-width-default); /** Border width */
   --button-font-weight: var(--font-weight-default); /** Font weight */
-  --button-disabled-bg: var(--color-disabled-bg-on-light); /** Background when disabled — only form button changes bg */
   --button-disabled-color: var(--color-disabled-text-on-light); /** Text color when disabled — light surface */
   --button-disabled-border: var(--color-disabled-text-on-light); /** Border color when disabled — light surface, matches text for contrast */
   --button-focus-ring-width: var(--border-width-focus); /** Focus ring width */
@@ -104,13 +94,6 @@
   --button-primary-active-bg: var(--color-accent-2); /** Active background */
   --button-primary-active-color: var(--color-primary); /** Active text color */
   --button-primary-active-border: var(--color-accent-2); /** Active border color */
-  --button-destructive-font-family: var(--button-font-family); /** Font family */
-  --button-destructive-font-size: var(--button-font-size); /** Font size */
-  --button-destructive-line-height: var(--button-line-height); /** Line height */
-  --button-destructive-transition-duration: var(--button-transition-duration); /** Transition duration */
-  --button-destructive-transition-easing: var(--button-transition-easing); /** Transition easing */
-  --button-destructive-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
-  --button-destructive-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
   --button-destructive-focus-ring-color: var(--color-destructive-text-on-light); /** Focus ring color */
   --button-destructive-color: var(--color-destructive-text-on-light); /** Text color */
   --button-destructive-border: var(--color-destructive-text-on-light); /** Border color */
@@ -163,12 +146,6 @@
   --button-primary-disabled-bg: var(--button-disabled-border); /** Background when disabled — filled with the disabled border color */
   --button-primary-disabled-border: var(--button-disabled-border); /** Border color when disabled */
   --button-primary-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
-  --button-destructive-border-radius: var(--button-border-radius); /** Border radius */
-  --button-destructive-border-width: var(--button-border-width); /** Border width */
-  --button-destructive-font-weight: var(--button-font-weight); /** Font weight */
-  --button-destructive-disabled-color: var(--button-disabled-color); /** Text color when disabled */
-  --button-destructive-disabled-border: var(--button-disabled-border); /** Border color when disabled */
-  --button-destructive-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
   --button-outline-border-radius: var(--button-border-radius); /** Border radius */
   --button-outline-border-width: var(--button-border-width); /** Border width */
   --button-outline-font-weight: var(--button-font-weight); /** Font weight */

package/src/tokens/components/control.css

@@ -4,14 +4,10 @@
 
 :root {
   --control-border-style: solid; /** Estilo del borde */
-  --control-cursor: text; /** Cursor por defecto */
-  --control-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
   --control-height: var(--size-component-md); /** Altura del control de una línea: la talla md del sistema. Es la talla de PARTIDA, y la superficie pública la apunta a `lg-height` */
   --control-font-family: var(--font-family-sans); /** Familia tipográfica */
   --control-font-size: var(--font-size-2); /** Tamaño de fuente */
   --control-line-height: var(--line-height-none); /** Interlineado */
-  --control-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
-  --control-transition-easing: var(--motion-easing-default); /** Curva de animación */
   --control-padding-inline: var(--spacing-4); /** Padding inline — compartido por controles y elementos de formulario */
   --control-padding-block: var(--spacing-4); /** Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0 */
   --control-lg-height: var(--size-component-lg); /** Altura del control en talla lg: la talla lg del sistema. Es lo que la superficie pública pone como talla de partida (`.site-shell`) */

package/src/tokens/components/file-upload.css

@@ -3,9 +3,6 @@
  */
 
 :root {
-  --file-upload-border-style: dashed; /** Estilo de borde del dropzone */
-  --file-upload-drag-border-style: solid; /** Estilo de borde en drag activo */
-  --file-upload-error-border-style: solid; /** Estilo de borde en error */
   --file-upload-disabled-opacity: 0.5; /** Opacidad cuando está deshabilitado */
   --file-upload-padding-inline: var(--spacing-5); /** Padding horizontal del dropzone */
   --file-upload-gap: var(--spacing-1); /** Espacio entre elementos dentro del dropzone */
@@ -40,7 +37,6 @@
   --file-upload-border-dash-gap: var(--spacing-2); /** Hueco entre trazos del borde discontinuo (antes 10px, fuera de la escala) */
   --file-upload-border-color: var(--color-primary); /** Borde del dropzone por defecto */
   --file-upload-border-width: var(--border-width-default); /** Grosor del borde */
-  --file-upload-border-radius: var(--border-radius-default); /** Radio de esquinas del dropzone */
   --file-upload-bg: var(--color-surface-secondary-on-light); /** Fondo del dropzone */
   --file-upload-text-color: var(--color-text-on-light); /** Color del texto principal */
   --file-upload-subtext-color: var(--color-text-muted-on-light); /** Color del texto secundario y restricciones */

package/src/tokens/components/radio.css

@@ -36,4 +36,6 @@ html.dark {
   --radio-border-color: var(--color-text-on-dark); /** Borde de la marca — surface-dark: la tinta de la superficie */
   --radio-dot-color: var(--color-text-on-dark); /** Punto de la marca — surface-dark */
   --radio-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --radio-disabled-border-color: var(--color-text-muted-on-dark); /** Borde deshabilitado — surface-dark (mismo par que checkbox) */
+  --radio-disabled-dot-color: var(--color-text-muted-on-dark); /** Punto deshabilitado y seleccionado — surface-dark (mismo par que checkbox) */
 }

package/src/tokens/components/site-header.css

@@ -17,7 +17,6 @@
   --site-header-z-index: var(--app-header-z-index); /** Capa z — sobre el contenido, bajo los paneles flotantes */
   --site-header-panel-bg: var(--color-background-light); /** Fondo del panel de navegación */
   --site-header-panel-padding-block: var(--section-padding-block-xl); /** Aire superior del panel, entre la barra y el índice */
-  --site-header-settings-margin-block-start: var(--site-header-panel-gap); /** Aire mínimo entre el índice y los ajustes del sitio (idioma, tema), que van pegados al borde inferior del panel: el ritmo del panel. Se mantiene por compatibilidad; quien quiera cambiarlo toca `panel-gap` */
   --site-header-content-height: var(--logo-height-xxl); /** Lo más alto que lleva la barra: el logotipo a talla xxl (85px) */
   --site-header-height-narrow: calc(var(--site-header-content-height-narrow) + 2 * var(--app-header-padding-block)); /** Alto de la barra en teléfono (56px, la misma que la barra de aplicación) */
   --site-header-height-compact: calc(var(--site-header-content-height-compact) + 2 * var(--app-header-padding-block)); /** Alto de la barra en móvil (64px) */

package/src/tokens/index.css

@@ -169,6 +169,7 @@
 @import "./molecules/org-chart.css";
 @import "./molecules/site-search.css";
 @import "./molecules/copy-button.css";
+@import "./molecules/floating-toolbar.css";
 @import "./molecules/confirm-dialog.css";
 @import "./molecules/avatar-upload.css";
 @import "./molecules/recovery-codes.css";
@@ -180,15 +181,12 @@
 @import "./surface-dark-derived.css";
 
 /* Superficie invertida dentro de una oscura: devuelve a claro los tokens que el
-   modo oscuro voltea. Va después del bloque de arriba, aunque gane por
-   especificidad, para que se lea en el orden en que actúa. */
+   modo oscuro voltea. En el mismo bloque va la superficie siempre clara
+   (`.surface-light`, el interior del amarillo del aviso), que necesita los
+   mismos tokens con los mismos valores. Va después del bloque de arriba, aunque
+   gane por especificidad, para que se lea en el orden en que actúa. */
 @import "./surface-invert.css";
 
-/* Superficie siempre clara: el contrapunto de `.surface-dark`, para el interior
-   de un relleno claro universal (el amarillo del aviso). Solo actúa dentro de
-   una superficie oscura, que es donde hay algo que devolver a claro. */
-@import "./surface-light.css";
-
 /* Remapeo de la superficie pública (`.site-shell`) — va al final: los tokens
    que redefine tienen la misma especificidad que los `:root` de arriba. */
 @import "./surface-public.css";

package/src/tokens/molecules/async-multi-select-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --async-multi-select-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
-  --async-multi-select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --async-multi-select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --async-multi-select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --async-multi-select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --async-multi-select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --async-multi-select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --async-multi-select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --async-multi-select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --async-multi-select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --async-multi-select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --async-multi-select-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --async-multi-select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }