@studiolxd/brand 49.28.0 → 51.0.0

package/dist/stat-tile.js

@@ -1,64 +1,66 @@
+'use client';
 import './stat-tile.css';
-import { Icon as e } from "./icon.js";
-import { VisuallyHidden as t } from "./visually-hidden.js";
-import { Tag as n } from "./tag.js";
-import { forwardRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/stories/molecules/StatTile/StatTile.tsx
-var o = {
+import { r as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { VisuallyHidden as n } from "./visually-hidden.js";
+import { Tag as r } from "./tag.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/messages/es/statTile.ts
+var s = {
+	up: "Sube",
+	down: "Baja",
+	flat: "Sin cambio"
+}, c = {
 	up: "positive",
 	down: "negative",
 	flat: "neutral"
-}, s = {
+}, l = {
 	positive: "success",
-	negative: "danger",
+	negative: "error",
 	neutral: "neutral"
-}, c = {
-	up: "Sube",
-	down: "Baja",
-	flat: "Sin cambio"
-}, l = r(function({ label: r, value: l, delta: u, description: d, icon: f, size: p = "md", className: m, ...h }, g) {
-	let _ = [
+}, u = i(function({ label: i, value: u, delta: d, description: f, icon: p, size: m = "md", className: h, ...g }, _) {
+	let v = e("statTile", s), y = [
 		"stat-tile",
-		p === "md" ? "" : `stat-tile--${p}`,
-		m ?? ""
-	].filter(Boolean).join(" "), v = u?.direction ?? "flat", y = u?.tone ?? o[v], b = u?.label ?? c[v];
-	return /* @__PURE__ */ a("div", {
-		ref: g,
-		className: _,
-		...h,
+		m === "md" ? "" : `stat-tile--${m}`,
+		h ?? ""
+	].filter(Boolean).join(" "), b = d?.direction ?? "flat", x = d?.tone ?? c[b];
+	return /* @__PURE__ */ o("div", {
+		ref: _,
+		className: y,
+		...g,
 		children: [
-			/* @__PURE__ */ a("p", {
+			/* @__PURE__ */ o("p", {
 				className: "stat-tile__label",
-				children: [f && /* @__PURE__ */ i("span", {
+				children: [p && /* @__PURE__ */ a("span", {
 					className: "stat-tile__icon",
 					"aria-hidden": "true",
-					children: f
-				}), r]
+					children: p
+				}), i]
 			}),
-			/* @__PURE__ */ i("p", {
+			/* @__PURE__ */ a("p", {
 				className: "stat-tile__value",
-				children: l
+				children: u
 			}),
-			u && /* @__PURE__ */ a(n, {
-				variant: s[y],
+			d && /* @__PURE__ */ o(r, {
+				tone: l[x],
 				className: "stat-tile__delta",
 				children: [
-					/* @__PURE__ */ i(e, {
+					/* @__PURE__ */ a(t, {
 						name: "arrow",
 						size: "sm",
-						className: `stat-tile__delta-icon stat-tile__delta-icon--${v}`
+						className: `stat-tile__delta-icon stat-tile__delta-icon--${b}`
 					}),
-					/* @__PURE__ */ i(t, { children: b }),
-					u.value
+					/* @__PURE__ */ a(n, { children: v(b, d.label) }),
+					d.value
 				]
 			}),
-			d && /* @__PURE__ */ i("p", {
+			f && /* @__PURE__ */ a("p", {
 				className: "stat-tile__description",
-				children: d
+				children: f
 			})
 		]
 	});
 });
 //#endregion
-export { l as StatTile };
+export { u as StatTile };

package/dist/step-marker.css

@@ -1 +1 @@
-.step-marker{border-radius:var(--step-border-radius);font-family:var(--step-font-family);font-weight:var(--step-font-weight);transition:background-color var(--step-transition-duration) var(--step-transition-easing);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.step-marker--sm{inline-size:var(--step-size-sm);block-size:var(--step-size-sm);font-size:var(--step-font-size-sm)}.step-marker--md{inline-size:var(--step-size-md);block-size:var(--step-size-md);font-size:var(--step-font-size-md)}.step-marker--tone-primary{background-color:var(--step-tone-primary-bg);color:var(--step-tone-primary-color)}.step-marker--tone-accent-1{background-color:var(--step-tone-accent-1-bg);color:var(--step-tone-accent-1-color)}.step-marker--tone-accent-2{background-color:var(--step-tone-accent-2-bg);color:var(--step-tone-accent-2-color)}.step-marker--tone-support-1{background-color:var(--step-tone-support-1-bg);color:var(--step-tone-support-1-color)}.step-marker--tone-support-2{background-color:var(--step-tone-support-2-bg);color:var(--step-tone-support-2-color)}.step-marker--tone-danger{background-color:var(--step-tone-danger-bg);color:var(--step-tone-danger-color)}.step-marker--tone-success{background-color:var(--step-tone-success-bg);color:var(--step-tone-success-color)}.step-marker--tone-neutral{background-color:var(--step-tone-neutral-bg);color:var(--step-tone-neutral-color)}.step-marker--state-pending{background-color:var(--step-pending-bg);border-width:var(--step-border-width);border-style:solid;border-color:var(--step-pending-border-color);color:var(--step-pending-color)}.step-marker__icon{inline-size:var(--step-icon-size);block-size:var(--step-icon-size)}
+.step-marker{border-radius:var(--step-border-radius);font-family:var(--step-font-family);font-weight:var(--step-font-weight);transition:background-color var(--step-transition-duration) var(--step-transition-easing);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.step-marker--sm{inline-size:var(--step-size-sm);block-size:var(--step-size-sm);font-size:var(--step-font-size-sm)}.step-marker--md{inline-size:var(--step-size-md);block-size:var(--step-size-md);font-size:var(--step-font-size-md)}.step-marker--tone-primary{background-color:var(--step-tone-primary-bg);color:var(--step-tone-primary-color)}.step-marker--tone-accent-1{background-color:var(--step-tone-accent-1-bg);color:var(--step-tone-accent-1-color)}.step-marker--tone-accent-2{background-color:var(--step-tone-accent-2-bg);color:var(--step-tone-accent-2-color)}.step-marker--tone-support-1{background-color:var(--step-tone-support-1-bg);color:var(--step-tone-support-1-color)}.step-marker--tone-support-2{background-color:var(--step-tone-support-2-bg);color:var(--step-tone-support-2-color)}.step-marker--tone-error{background-color:var(--step-tone-error-bg);color:var(--step-tone-error-color)}.step-marker--tone-success{background-color:var(--step-tone-success-bg);color:var(--step-tone-success-color)}.step-marker--tone-neutral{background-color:var(--step-tone-neutral-bg);color:var(--step-tone-neutral-color)}.step-marker--state-pending{background-color:var(--step-pending-bg);border-width:var(--step-border-width);border-style:solid;border-color:var(--step-pending-border-color);color:var(--step-pending-color)}.step-marker__icon{inline-size:var(--step-icon-size);block-size:var(--step-icon-size)}

package/dist/step-marker.js

@@ -1,26 +1,29 @@
 import './step-marker.css';
-import { Icon as e } from "./icon.js";
-import { jsx as t } from "react/jsx-runtime";
+import { n as e } from "./_shared/env.js";
+import { Icon as t } from "./icon.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/stories/atoms/StepMarker/StepMarker.tsx
-function n({ state: n = "neutral", tone: r = "primary", size: i = "md", count: a, icon: o, className: s }) {
-	let c = n === "done", l = n === "pending", u = [
+function r({ state: r = "neutral", tone: i = "primary", size: a = "md", count: o, icon: s, className: c }) {
+	let l = i;
+	l === "danger" && (e("StepMarker", "tone=\"danger\"", "`tone=\"error\"`"), l = "error");
+	let u = r === "done", d = r === "pending", f = [
 		"step-marker",
-		`step-marker--${i}`,
-		`step-marker--state-${n}`,
-		!l && `step-marker--tone-${r}`,
-		s
-	].filter(Boolean).join(" "), d = a;
-	return c ? d = /* @__PURE__ */ t(e, {
+		`step-marker--${a}`,
+		`step-marker--state-${r}`,
+		!d && `step-marker--tone-${l}`,
+		c
+	].filter(Boolean).join(" "), p = o;
+	return u ? p = /* @__PURE__ */ n(t, {
 		name: "check",
 		className: "step-marker__icon"
-	}) : o && (d = /* @__PURE__ */ t(e, {
-		name: o,
+	}) : s && (p = /* @__PURE__ */ n(t, {
+		name: s,
 		className: "step-marker__icon"
-	})), /* @__PURE__ */ t("span", {
-		className: u,
+	})), /* @__PURE__ */ n("span", {
+		className: f,
 		"aria-hidden": "true",
-		children: d
+		children: p
 	});
 }
 //#endregion
-export { n as StepMarker };
+export { r as StepMarker };

package/dist/stepper.css

@@ -1 +1 @@
-.stepper{font-family:var(--stepper-font-family)}.stepper__compact{align-items:baseline;gap:var(--stepper-compact-gap);font-size:var(--stepper-compact-font-size);line-height:var(--stepper-line-height);flex-wrap:wrap;margin:0;display:flex}.stepper__compact-count{font-weight:var(--stepper-compact-count-font-weight);color:var(--stepper-compact-color)}.stepper__compact-label{color:var(--stepper-compact-label-color)}.stepper__list{margin:0;padding:0;list-style:none;display:none}@media (width>=768px){.stepper__compact{display:none}.stepper__list{gap:var(--stepper-gap);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}}.stepper__step{padding-block:var(--stepper-padding-block);position:relative}.stepper__step:not(:first-child):before{content:"";inline-size:calc(100% + var(--stepper-gap));block-size:var(--step-connector-thickness);translate:0 calc(-1 * var(--step-connector-thickness) / 2);background-color:var(--step-connector-color);z-index:0;position:absolute;inset-block-start:calc(var(--stepper-padding-block) + var(--step-size-md) / 2);inset-inline-end:50%}.stepper__step--completed:before,.stepper__step--current:before{background-color:var(--step-connector-done-color)}.stepper__item{z-index:1;justify-items:center;gap:var(--stepper-item-gap);text-align:center;font-size:var(--stepper-font-size);font-weight:var(--stepper-font-weight);line-height:var(--stepper-line-height);color:var(--stepper-label-color);display:grid;position:relative}.stepper__step--pending .stepper__item{color:var(--stepper-pending-color)}.stepper__step--current .stepper__item{font-weight:var(--stepper-current-font-weight)}.stepper__marker{flex-shrink:0}.stepper__text{gap:var(--stepper-text-gap);display:grid}.stepper__description{font-size:var(--stepper-description-font-size);font-weight:var(--stepper-font-weight);color:var(--stepper-description-color)}.stepper__item--action{cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0;padding:0;font-family:inherit}.stepper__label{justify-self:center;padding-block-end:var(--stepper-label-hover-line-offset)}.stepper__item--action:hover .stepper__label{box-shadow:inset 0 calc(-1 * var(--stepper-label-hover-line-width)) 0 0 currentColor}.stepper__item--action:focus-visible{outline-width:var(--stepper-focus-ring-width);outline-style:solid;outline-color:var(--stepper-focus-ring-color);outline-offset:var(--stepper-focus-ring-offset)}
+.stepper{font-family:var(--stepper-font-family)}.stepper__compact{align-items:baseline;gap:var(--stepper-compact-gap);font-size:var(--stepper-compact-font-size);line-height:var(--stepper-line-height);flex-wrap:wrap;margin:0;display:flex}.stepper__compact-count{font-weight:var(--stepper-compact-count-font-weight);color:var(--stepper-compact-color)}.stepper__compact-label{color:var(--stepper-compact-label-color)}.stepper__list{margin:0;padding:0;list-style:none;display:none}@media (width>=768px){.stepper__compact{display:none}.stepper__list{gap:var(--stepper-gap);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}}.stepper__step{padding-block:var(--stepper-padding-block);position:relative}.stepper__step:not(:first-child):before{content:"";inline-size:calc(100% + var(--stepper-gap));block-size:var(--step-connector-thickness);translate:0 calc(-1 * var(--step-connector-thickness) / 2);background-color:var(--step-connector-color);z-index:0;position:absolute;inset-block-start:calc(var(--stepper-padding-block) + var(--step-size-md) / 2);inset-inline-end:50%}.stepper__step--completed:before,.stepper__step--current:before{background-color:var(--step-connector-done-color)}.stepper__item{z-index:1;justify-items:center;gap:var(--stepper-item-gap);text-align:center;font-size:var(--stepper-font-size);font-weight:var(--stepper-font-weight);line-height:var(--stepper-line-height);color:var(--stepper-label-color);display:grid;position:relative}.stepper__step--pending .stepper__item{color:var(--stepper-pending-color)}.stepper__step--current .stepper__item{font-weight:var(--stepper-current-font-weight)}.stepper__marker{flex-shrink:0}.stepper__text{gap:var(--stepper-text-gap);display:grid}.stepper__description{font-size:var(--stepper-description-font-size);font-weight:var(--stepper-font-weight);color:var(--stepper-description-color)}.stepper__item--action{cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0;padding:0;font-family:inherit}.stepper__label{justify-self:center;padding-block-end:var(--stepper-label-hover-line-offset)}.stepper__item--action:hover .stepper__label{text-decoration-line:underline;text-decoration-thickness:var(--stepper-label-hover-line-width);-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-underline-position:under;text-underline-offset:calc(var(--stepper-label-hover-line-offset) - var(--stepper-label-hover-line-width))}.stepper__item--action:focus-visible{outline-width:var(--stepper-focus-ring-width);outline-style:solid;outline-color:var(--stepper-focus-ring-color);outline-offset:var(--stepper-focus-ring-offset)}

package/dist/stepper.js

@@ -1,38 +1,47 @@
 'use client';
 import './stepper.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { StepMarker as n } from "./step-marker.js";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/stepper.ts
+var o = {
+	label: "Progreso",
+	compact: (e, t) => `Paso ${e} de ${t}`,
+	completed: "Completado",
+	current: "Paso actual",
+	pending: "Pendiente"
+};
+//#endregion
 //#region src/stories/molecules/Stepper/Stepper.tsx
-function o({ steps: o, current: s, onStepSelect: c, label: l, compactLabel: u, labels: d, className: f, id: p }) {
-	let m = e("stepper");
-	if (o.length < 2) return null;
-	let h = (e) => m(e, d?.[e]), g = o.length, _ = Math.min(Math.max(s, 0), g - 1), v = o[_];
+function s({ steps: s, current: c, onStepSelect: l, label: u, compactLabel: d, labels: f, className: p, id: m }) {
+	let h = e("stepper", o);
+	if (s.length < 2) return null;
+	let g = (e) => h(e, f?.[e]), _ = s.length, v = Math.min(Math.max(c, 0), _ - 1), y = s[v];
 	return /* @__PURE__ */ a("div", {
-		id: p,
-		className: ["stepper", f].filter(Boolean).join(" "),
+		id: m,
+		className: ["stepper", p].filter(Boolean).join(" "),
 		children: [/* @__PURE__ */ a("p", {
 			className: "stepper__compact",
 			children: [/* @__PURE__ */ i("span", {
 				className: "stepper__compact-count",
-				children: m("compact", u)(_ + 1, g)
+				children: h("compact", d)(v + 1, _)
 			}), /* @__PURE__ */ i("span", {
 				className: "stepper__compact-label",
-				children: v.label
+				children: y.label
 			})]
 		}), /* @__PURE__ */ i("ol", {
 			className: "stepper__list",
-			"aria-label": m("label", l),
-			children: o.map((e, o) => {
-				let s = o < _ ? "completed" : o === _ ? "current" : "pending", l = c !== void 0 && s !== "current" && (e.reachable ?? s === "completed"), u = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n, {
+			"aria-label": h("label", u),
+			children: s.map((e, o) => {
+				let s = o < v ? "completed" : o === v ? "current" : "pending", c = l !== void 0 && s !== "current" && (e.reachable ?? s === "completed"), u = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n, {
 					state: s === "completed" ? "done" : s === "current" ? "current" : "pending",
 					count: o + 1,
 					className: "stepper__marker"
 				}), /* @__PURE__ */ a("span", {
 					className: "stepper__text",
 					children: [
-						/* @__PURE__ */ a(t, { children: [h(s), ": "] }),
+						/* @__PURE__ */ a(t, { children: [g(s), ": "] }),
 						/* @__PURE__ */ i("span", {
 							className: "stepper__label",
 							children: e.label
@@ -45,10 +54,10 @@ function o({ steps: o, current: s, onStepSelect: c, label: l, compactLabel: u, l
 				})] });
 				return /* @__PURE__ */ i("li", {
 					className: `stepper__step stepper__step--${s}`,
-					children: l ? /* @__PURE__ */ i("button", {
+					children: c ? /* @__PURE__ */ i("button", {
 						type: "button",
 						className: "stepper__item stepper__item--action",
-						onClick: () => c(o, e),
+						onClick: () => l(o, e),
 						children: u
 					}) : /* @__PURE__ */ i("span", {
 						className: "stepper__item",
@@ -61,4 +70,4 @@ function o({ steps: o, current: s, onStepSelect: c, label: l, compactLabel: u, l
 	});
 }
 //#endregion
-export { o as Stepper };
+export { s as Stepper };

package/dist/switcher-field.js

@@ -1,61 +1,45 @@
 'use client';
 import './switcher-field.css';
-import { VisuallyHidden as e } from "./visually-hidden.js";
-import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Switcher as r } from "./switcher.js";
-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";
+import { n as e } from "./_shared/form-size.js";
+import { Switcher as t } from "./switcher.js";
+import { n } from "./_shared/field-labels.js";
+import { a as r, n as i } from "./_shared/fieldshell.js";
+import { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/stories/molecules/SwitcherField/SwitcherField.tsx
-var l = a(function({ label: a, labelHidden: l, id: u, checked: d, defaultChecked: f, disabled: p, required: m, name: h, value: g, size: _, error: v = !1, errorMessage: y, helperText: b, className: x, onCheckedChange: S, onBlur: C }, w) {
-	let T = i(l), E = t(_), D = o(), O = u ?? D, k = y ? `${O}-error` : void 0, A = b ? `${O}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
-	return /* @__PURE__ */ c("div", {
-		className: [
-			"switcher-field",
-			E === "md" ? "" : `switcher-field--${E}`,
-			p ? "switcher-field--disabled" : "",
-			x
-		].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ c("label", {
-				className: "switcher-field__control",
-				htmlFor: O,
-				children: [/* @__PURE__ */ s(r, {
-					ref: w,
-					id: O,
-					checked: d,
-					defaultChecked: f,
-					disabled: p,
-					size: E,
-					name: h,
-					value: g,
-					required: m,
-					error: M,
-					"aria-labelledby": `${O}-label`,
-					"aria-describedby": j,
-					onCheckedChange: S,
-					onBlur: C
-				}), T ? /* @__PURE__ */ s(e, {
-					id: `${O}-label`,
-					children: a
-				}) : /* @__PURE__ */ s("span", {
-					id: `${O}-label`,
-					className: "switcher-field__label",
-					children: a
-				})]
-			}),
-			y && /* @__PURE__ */ s(n, {
-				id: k,
-				children: y
-			}),
-			b && /* @__PURE__ */ s("span", {
-				id: A,
-				className: "switcher-field__helper",
-				children: b
-			})
-		]
+var s = a(function({ label: a, labelHidden: s, id: c, checked: l, defaultChecked: u, disabled: d, required: f, name: p, value: m, size: h, error: g = !1, errorMessage: _, helperText: v, className: y, onCheckedChange: b, onBlur: x }, S) {
+	let C = n(s), w = e(h), T = r({
+		id: c,
+		error: g,
+		errorMessage: _,
+		helperText: v
+	}), { id: E } = T;
+	return /* @__PURE__ */ o(i, {
+		field: T,
+		block: "switcher-field",
+		modifiers: [w !== "md" && `switcher-field--${w}`, d && "switcher-field--disabled"],
+		className: y,
+		layout: "inline",
+		label: a,
+		labelHidden: C,
+		labelIdentified: !0,
+		children: /* @__PURE__ */ o(t, {
+			ref: S,
+			id: E,
+			checked: l,
+			defaultChecked: u,
+			disabled: d,
+			size: w,
+			name: p,
+			value: m,
+			required: f,
+			error: T.hasError,
+			"aria-labelledby": T.labelId,
+			"aria-describedby": T.describedBy,
+			onCheckedChange: b,
+			onBlur: x
+		})
 	});
 });
 //#endregion
-export { l as SwitcherField };
+export { s as SwitcherField };

package/dist/switcher.css

@@ -1 +1 @@
-.switcher{all:unset;box-sizing:border-box;width:var(--switcher-track-width);height:var(--switcher-track-height);padding-inline:var(--switcher-track-padding);border-radius:var(--switcher-track-border-radius);background-color:var(--switcher-track-bg);cursor:var(--switcher-cursor);transition:background-color var(--switcher-transition-duration) var(--switcher-transition-easing);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.switcher:after{content:"";inline-size:max(100%, var(--switcher-target-size));block-size:max(100%, var(--switcher-target-size));position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.switcher[data-checked]{background-color:var(--switcher-track-bg-checked)}.switcher__thumb{width:var(--switcher-thumb-size);height:var(--switcher-thumb-size);border-radius:var(--switcher-thumb-border-radius);background-color:var(--switcher-thumb-bg);transition:transform var(--switcher-transition-duration) var(--switcher-transition-easing);will-change:transform;display:block}.switcher[data-checked] .switcher__thumb{transform:translateX(calc(var(--switcher-track-width) - var(--switcher-track-padding) * 2 - var(--switcher-thumb-size)))}.switcher.switcher--error{outline:var(--switcher-error-ring-width) solid var(--switcher-error-ring-color);outline-offset:var(--switcher-error-ring-offset)}.switcher:focus-visible{outline:var(--switcher-focus-ring-width) solid var(--switcher-focus-ring-color);outline-offset:var(--switcher-focus-ring-offset)}.switcher[data-disabled]{opacity:var(--switcher-disabled-opacity);cursor:var(--switcher-disabled-cursor);pointer-events:none}.switcher.switcher--sm{--switcher-track-width:var(--switcher-sm-track-width);--switcher-track-height:var(--switcher-sm-track-height);--switcher-thumb-size:var(--switcher-sm-thumb-size)}.switcher.switcher--lg{--switcher-track-width:var(--switcher-lg-track-width);--switcher-track-height:var(--switcher-lg-track-height);--switcher-thumb-size:var(--switcher-lg-thumb-size)}
+.switcher{all:unset;box-sizing:border-box;inline-size:var(--switcher-track-width);block-size:var(--switcher-track-height);padding-inline:var(--switcher-track-padding);border-radius:var(--switcher-track-border-radius);background-color:var(--switcher-track-bg);cursor:var(--switcher-cursor);transition:background-color var(--switcher-transition-duration) var(--switcher-transition-easing);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.switcher:after{content:"";inline-size:max(100%, var(--switcher-target-size));block-size:max(100%, var(--switcher-target-size));position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.switcher[data-checked]{background-color:var(--switcher-track-checked-bg)}.switcher__thumb{inline-size:var(--switcher-thumb-size);block-size:var(--switcher-thumb-size);border-radius:var(--switcher-thumb-border-radius);background-color:var(--switcher-thumb-bg);transition:transform var(--switcher-transition-duration) var(--switcher-transition-easing);will-change:transform;display:block}.switcher[data-checked] .switcher__thumb{transform:translateX(calc(var(--switcher-track-width) - var(--switcher-track-padding) * 2 - var(--switcher-thumb-size)))}.switcher.switcher--error{outline:var(--switcher-error-ring-width) solid var(--switcher-error-ring-color);outline-offset:var(--switcher-error-ring-offset)}.switcher:focus-visible{outline:var(--switcher-focus-ring-width) solid var(--switcher-focus-ring-color);outline-offset:var(--switcher-focus-ring-offset)}.switcher[data-disabled]{opacity:var(--switcher-disabled-opacity);cursor:var(--switcher-disabled-cursor);pointer-events:none}.switcher.switcher--sm{--switcher-track-width:var(--switcher-sm-track-width);--switcher-track-height:var(--switcher-sm-track-height);--switcher-thumb-size:var(--switcher-sm-thumb-size)}.switcher.switcher--lg{--switcher-track-width:var(--switcher-lg-track-width);--switcher-track-height:var(--switcher-lg-track-height);--switcher-thumb-size:var(--switcher-lg-thumb-size)}

package/dist/table-of-contents.css

@@ -1 +1 @@
-.table-of-contents{font-size:var(--table-of-contents-item-font-size)}.table-of-contents.table-of-contents--sticky{max-block-size:var(--table-of-contents-sticky-max-block-size);position:sticky;inset-block-start:var(--table-of-contents-sticky-offset);overflow-y:auto}.table-of-contents__title{margin-block:0 var(--table-of-contents-title-space-after);font-size:var(--table-of-contents-title-font-size);font-weight:var(--table-of-contents-title-font-weight);color:var(--table-of-contents-title-color);margin-inline:0}.table-of-contents__list.list{font-size:inherit}.table-of-contents__item+.table-of-contents__item{margin-block-start:var(--table-of-contents-gap)}.table-of-contents__item{padding-inline-start:calc(var(--table-of-contents-item-padding-inline-start) + var(--table-of-contents-item-level,0) * var(--table-of-contents-item-indent))}.table-of-contents__item--level-0{--table-of-contents-item-level:0}.table-of-contents__item--level-1{--table-of-contents-item-level:1}.table-of-contents__item--level-2{--table-of-contents-item-level:2}.table-of-contents__item--level-3{--table-of-contents-item-level:3}.table-of-contents__item--level-4{--table-of-contents-item-level:4}.table-of-contents__item--level-5{--table-of-contents-item-level:5}.table-of-contents__link{padding-block:var(--table-of-contents-item-padding-block);box-shadow:none;font-size:var(--table-of-contents-item-font-size);line-height:var(--table-of-contents-item-line-height);color:var(--table-of-contents-item-color);transition:box-shadow var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing), color var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing);display:block}.table-of-contents__link:hover{color:var(--table-of-contents-item-color);box-shadow:inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color)}.table-of-contents__link:focus-visible{outline:var(--table-of-contents-focus-ring-width) solid var(--table-of-contents-focus-ring-color);outline-offset:var(--table-of-contents-focus-ring-offset)}.table-of-contents__link.table-of-contents__link--active{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color);color:var(--table-of-contents-item-active-color);font-weight:var(--table-of-contents-item-active-font-weight)}.table-of-contents__link.table-of-contents__link--active:hover{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color), inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color);color:var(--table-of-contents-item-active-color)}
+.table-of-contents{font-size:var(--table-of-contents-item-font-size)}.table-of-contents.table-of-contents--sticky{max-block-size:var(--table-of-contents-sticky-max-height);position:sticky;inset-block-start:var(--table-of-contents-sticky-offset);overflow-y:auto}.table-of-contents__title{margin-block:0 var(--table-of-contents-title-space-after);font-size:var(--table-of-contents-title-font-size);font-weight:var(--table-of-contents-title-font-weight);color:var(--table-of-contents-title-color);margin-inline:0}.table-of-contents__list.list{font-size:inherit}.table-of-contents__item+.table-of-contents__item{margin-block-start:var(--table-of-contents-gap)}.table-of-contents__item{padding-inline-start:calc(var(--table-of-contents-item-padding-inline-start) + var(--table-of-contents-item-level,0) * var(--table-of-contents-item-indent))}.table-of-contents__item--level-0{--table-of-contents-item-level:0}.table-of-contents__item--level-1{--table-of-contents-item-level:1}.table-of-contents__item--level-2{--table-of-contents-item-level:2}.table-of-contents__item--level-3{--table-of-contents-item-level:3}.table-of-contents__item--level-4{--table-of-contents-item-level:4}.table-of-contents__item--level-5{--table-of-contents-item-level:5}.table-of-contents__link{padding-block:var(--table-of-contents-item-padding-block);box-shadow:none;font-size:var(--table-of-contents-item-font-size);line-height:var(--table-of-contents-item-line-height);color:var(--table-of-contents-item-color);transition:box-shadow var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing), color var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing);text-decoration-line:none;display:block}.table-of-contents__link:hover{color:var(--table-of-contents-item-color);box-shadow:inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color)}.table-of-contents__link:focus-visible{outline:var(--table-of-contents-focus-ring-width) solid var(--table-of-contents-focus-ring-color);outline-offset:var(--table-of-contents-focus-ring-offset)}.table-of-contents__link.table-of-contents__link--active{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color);color:var(--table-of-contents-item-active-color);font-weight:var(--table-of-contents-item-active-font-weight)}.table-of-contents__link.table-of-contents__link--active:hover{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color), inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color);color:var(--table-of-contents-item-active-color)}

package/dist/table-of-contents.js

@@ -1,42 +1,47 @@
 'use client';
 import './table-of-contents.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Link as t } from "./link.js";
-import { List as n } from "./list.js";
-import { forwardRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { n as e } from "./_shared/env.js";
+import { r as t } from "./_shared/brandmessagescontext.js";
+import { Link as n } from "./link.js";
+import { List as r } from "./list.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/messages/es/tableOfContents.ts
+var s = { label: "En esta página" };
+//#endregion
 //#region src/stories/molecules/TableOfContents/TableOfContents.tsx
-function o(e, t) {
+function c(e, t) {
 	return Math.min(Math.max(e - t, 0), 5);
 }
-var s = r(function({ items: r, activeId: s, ariaLabel: c, title: l, sticky: u = !1, onItemClick: d, className: f, ...p }, m) {
-	let h = e("tableOfContents");
-	if (r.length === 0) return null;
-	let g = Math.min(...r.map((e) => e.level));
-	return /* @__PURE__ */ a("nav", {
-		ref: m,
+var l = i(function({ items: i, activeId: l, "aria-label": u, ariaLabel: d, title: f, sticky: p = !1, onItemClick: m, className: h, ...g }, _) {
+	d !== void 0 && e("TableOfContents", "ariaLabel", "`aria-label`");
+	let v = u ?? d, y = t("tableOfContents", s);
+	if (i.length === 0) return null;
+	let b = Math.min(...i.map((e) => e.level));
+	return /* @__PURE__ */ o("nav", {
+		ref: _,
 		className: [
 			"table-of-contents",
-			u ? "table-of-contents--sticky" : "",
-			f ?? ""
+			p ? "table-of-contents--sticky" : "",
+			h ?? ""
 		].filter(Boolean).join(" "),
-		"aria-label": h("label", c),
-		...p,
-		children: [l && /* @__PURE__ */ i("p", {
+		"aria-label": y("label", v),
+		...g,
+		children: [f && /* @__PURE__ */ a("p", {
 			className: "table-of-contents__title",
-			children: l
-		}), /* @__PURE__ */ i(n, {
+			children: f
+		}), /* @__PURE__ */ a(r, {
 			type: "plain",
 			className: "table-of-contents__list",
-			children: r.map((e) => {
-				let n = e.id === s;
-				return /* @__PURE__ */ i("li", {
-					className: `table-of-contents__item table-of-contents__item--level-${o(e.level, g)}`,
-					children: /* @__PURE__ */ i(t, {
+			children: i.map((e) => {
+				let t = e.id === l;
+				return /* @__PURE__ */ a("li", {
+					className: `table-of-contents__item table-of-contents__item--level-${c(e.level, b)}`,
+					children: /* @__PURE__ */ a(n, {
 						href: `#${e.id}`,
-						className: ["table-of-contents__link", n ? "table-of-contents__link--active" : ""].filter(Boolean).join(" "),
-						"aria-current": n ? "location" : void 0,
-						onClick: d ? (t) => d(e, t) : void 0,
+						className: ["table-of-contents__link", t ? "table-of-contents__link--active" : ""].filter(Boolean).join(" "),
+						"aria-current": t ? "location" : void 0,
+						onClick: m ? (t) => m(e, t) : void 0,
 						children: e.label
 					})
 				}, e.id);
@@ -45,4 +50,4 @@ var s = r(function({ items: r, activeId: s, ariaLabel: c, title: l, sticky: u =
 	});
 });
 //#endregion
-export { s as TableOfContents };
+export { l as TableOfContents };

package/dist/table.css

@@ -1 +1 @@
-.table__wrapper{width:100%;overflow-x:auto}.table{border-collapse:collapse;width:100%;font-family:var(--table-font-family);font-size:var(--table-font-size);font-weight:var(--table-font-weight);line-height:var(--table-line-height);color:var(--table-color);background:var(--table-bg)}.table__header{padding-block:var(--table-header-padding-block);padding-inline:var(--table-header-padding-inline);font-weight:var(--table-header-font-weight);text-align:left;border-bottom-width:var(--table-header-border-width);border-bottom-style:solid;border-bottom-color:var(--table-header-border-color);white-space:nowrap}.table__header-content{align-items:center;gap:var(--table-header-content-gap);font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.table__header-content:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:var(--table-focus-ring-offset)}.table__sort-icon{color:var(--table-sort-icon-color);transition:transform var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing);flex-shrink:0;transform:rotate(90deg)}.table__header-content:hover .table__sort-icon{color:var(--table-sort-icon-active-color)}.table__header--sorted-asc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(-90deg)}.table__header--sorted-desc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(90deg)}.table__row{transition:box-shadow var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing)}.table tbody .table__row:last-child .table__cell,.table tbody .table__row:last-child .table__header{border-bottom:none}.table__row.table__row--selected{color:var(--table-row-selected-color);font-weight:var(--table-row-selected-font-weight)}.table__row.table__row--interactive{cursor:pointer}.table__row.table__row--interactive:hover{box-shadow:inset var(--table-row-hover-marker-width) 0 0 var(--table-row-hover-marker-color)}.table__row.table__row--interactive:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:calc(var(--table-focus-ring-offset) * -1)}.table tfoot{background-color:var(--table-footer-bg);border-top-width:var(--table-footer-border-width);border-top-style:solid;border-top-color:var(--table-footer-border-color)}.table tfoot .table__cell{font-weight:var(--table-footer-font-weight)}.table__cell{padding-block:var(--table-cell-padding-block);padding-inline:var(--table-cell-padding-inline);border-bottom-width:var(--table-border-width);border-bottom-style:solid;border-bottom-color:var(--table-row-border-color)}.table__header.table__header--actions{width:1px}.table__cell.table__cell--actions,.table__cell.table__cell--nowrap,.table__header.table__header--nowrap{white-space:nowrap}.table__header.table__header--sticky,.table__cell.table__cell--sticky{z-index:1;background-color:var(--table-sticky-bg);position:sticky;inset-inline-end:0}.table.table--sm{font-size:var(--table-sm-font-size)}.table.table--sm .table__header{padding-block:var(--table-sm-header-padding-block);padding-inline:var(--table-sm-header-padding-inline)}.table.table--sm .table__cell{padding-block:var(--table-sm-cell-padding-block);padding-inline:var(--table-sm-cell-padding-inline)}
+.table__wrapper{inline-size:100%;overflow-x:auto}.table{border-collapse:collapse;inline-size:100%;font-family:var(--table-font-family);font-size:var(--table-font-size);font-weight:var(--table-font-weight);line-height:var(--table-line-height);color:var(--table-color);background:var(--table-bg)}.table__header{padding-block:var(--table-header-padding-block);padding-inline:var(--table-header-padding-inline);font-weight:var(--table-header-font-weight);text-align:start;border-block-end-width:var(--table-header-border-width);border-block-end-style:solid;border-block-end-color:var(--table-header-border-color);white-space:nowrap}.table__header-content{align-items:center;gap:var(--table-header-content-gap);font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.table__wrapper:focus-visible,.table__header-content:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:var(--table-focus-ring-offset)}.table__sort-icon{color:var(--table-sort-icon-color);transition:transform var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing);flex-shrink:0;transform:rotate(90deg)}.table__header-content:hover .table__sort-icon{color:var(--table-sort-icon-active-color)}.table__header--sorted-asc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(-90deg)}.table__header--sorted-desc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(90deg)}.table__row{transition:box-shadow var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing)}.table tbody .table__row:last-child .table__cell,.table tbody .table__row:last-child .table__header{border-block-end:none}.table__row.table__row--selected{color:var(--table-row-selected-color);font-weight:var(--table-row-selected-font-weight)}.table__row.table__row--interactive{cursor:pointer}.table__row.table__row--interactive:hover{box-shadow:inset var(--table-row-hover-marker-width) 0 0 var(--table-row-hover-marker-color)}.table__row.table__row--interactive:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:calc(var(--table-focus-ring-offset) * -1)}.table tfoot{background-color:var(--table-footer-bg);border-block-start-width:var(--table-footer-border-width);border-block-start-style:solid;border-block-start-color:var(--table-footer-border-color)}.table tfoot .table__cell{font-weight:var(--table-footer-font-weight)}.table__cell{padding-block:var(--table-cell-padding-block);padding-inline:var(--table-cell-padding-inline);border-block-end-width:var(--table-border-width);border-block-end-style:solid;border-block-end-color:var(--table-row-border-color)}.table__header.table__header--actions{inline-size:var(--table-actions-width)}.table__cell.table__cell--actions,.table__cell.table__cell--nowrap,.table__header.table__header--nowrap{white-space:nowrap}.table__header.table__header--sticky,.table__cell.table__cell--sticky{z-index:1;background-color:var(--table-sticky-bg);position:sticky;inset-inline-end:0}.table.table--sm{font-size:var(--table-sm-font-size)}.table.table--sm .table__header{padding-block:var(--table-sm-header-padding-block);padding-inline:var(--table-sm-header-padding-inline)}.table.table--sm .table__cell{padding-block:var(--table-sm-cell-padding-block);padding-inline:var(--table-sm-cell-padding-inline)}

package/dist/table.js

@@ -1,123 +1,4 @@
 'use client';
 import './table.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { VisuallyHidden as n } from "./visually-hidden.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/stories/molecules/Table/Table.tsx
-function a({ children: e, ...t }) {
-	return /* @__PURE__ */ r("thead", {
-		...t,
-		children: e
-	});
-}
-function o({ children: e, ...t }) {
-	return /* @__PURE__ */ r("tfoot", {
-		...t,
-		children: e
-	});
-}
-function s({ children: e, ...t }) {
-	return /* @__PURE__ */ r("tbody", {
-		...t,
-		children: e
-	});
-}
-function c({ sortable: a = !1, sorted: o = !1, onSort: s, actions: c = !1, actionsLabel: l, sortedAscLabel: u, sortedDescLabel: d, sortableLabel: f, sticky: p, nowrap: m = !1, children: h, className: g, scope: _ = "col", ...v }) {
-	let y = e("table"), b = [
-		"table__header",
-		a ? "table__header--sortable" : "",
-		o === "asc" ? "table__header--sorted-asc" : "",
-		o === "desc" ? "table__header--sorted-desc" : "",
-		c ? "table__header--actions" : "",
-		p === "end" ? "table__header--sticky" : "",
-		m ? "table__header--nowrap" : "",
-		g
-	].filter(Boolean).join(" ");
-	return a ? /* @__PURE__ */ i("th", {
-		...v,
-		scope: _,
-		className: b,
-		"aria-sort": o === "asc" ? "ascending" : o === "desc" ? "descending" : "none",
-		children: [/* @__PURE__ */ i("button", {
-			type: "button",
-			className: "table__header-content",
-			onClick: s,
-			children: [h, /* @__PURE__ */ r(t, {
-				name: "chevron",
-				size: "sm",
-				className: "table__sort-icon"
-			})]
-		}), /* @__PURE__ */ r(n, { children: o === "asc" ? y("sortedAscending", u) : o === "desc" ? y("sortedDescending", d) : y("sortable", f) })]
-	}) : c ? /* @__PURE__ */ r("th", {
-		...v,
-		scope: _,
-		className: b,
-		children: /* @__PURE__ */ r(n, { children: h ?? y("actions", l) })
-	}) : /* @__PURE__ */ r("th", {
-		...v,
-		scope: _,
-		className: b,
-		children: h
-	});
-}
-function l({ onClick: e, interactive: t = !1, selected: n = !1, label: i, children: a, className: o, ...s }) {
-	let c = t || !!e, l = c ? n : n || void 0, u = [
-		"table__row",
-		c ? "table__row--interactive" : "",
-		n ? "table__row--selected" : "",
-		o
-	].filter(Boolean).join(" ");
-	return c ? /* @__PURE__ */ r("tr", {
-		...s,
-		className: u,
-		"aria-label": i,
-		"aria-selected": l,
-		onClick: e,
-		onKeyDown: (t) => {
-			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e?.());
-		},
-		tabIndex: 0,
-		children: a
-	}) : /* @__PURE__ */ r("tr", {
-		...s,
-		className: u,
-		"aria-label": i,
-		"aria-selected": l,
-		children: a
-	});
-}
-function u({ sticky: e, actions: t = !1, nowrap: n = !1, children: i, className: a, ...o }) {
-	let s = [
-		"table__cell",
-		e === "end" ? "table__cell--sticky" : "",
-		t ? "table__cell--actions" : "",
-		n ? "table__cell--nowrap" : "",
-		a
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r("td", {
-		...o,
-		className: s,
-		children: i
-	});
-}
-function d({ caption: e, children: t, size: n = "md", className: a, ...o }) {
-	return /* @__PURE__ */ r("div", {
-		className: "table__wrapper",
-		children: /* @__PURE__ */ i("table", {
-			className: [
-				"table",
-				n === "sm" ? "table--sm" : "",
-				a ?? ""
-			].filter(Boolean).join(" "),
-			...o,
-			children: [e && /* @__PURE__ */ r("caption", {
-				className: "visually-hidden",
-				children: e
-			}), t]
-		})
-	});
-}
-d.Head = a, d.Footer = o, d.Header = c, d.Body = s, d.Row = l, d.Cell = u;
-//#endregion
-export { d as Table, s as TableBody, u as TableCell, o as TableFooter, a as TableHead, c as TableHeader, l as TableRow };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./_shared/table.js";
+export { o as Table, n as TableBody, i as TableCell, t as TableFooter, e as TableHead, r as TableHeader, a as TableRow };

package/dist/tabs.css

@@ -1 +1 @@
-.tabs{flex-direction:column;display:flex}.tabs[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.tabs__list{gap:var(--tabs-list-gap);border-block-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:row;flex-shrink:0;display:flex}.tabs__list--pill{padding-block:var(--tabs-list-gap);padding-inline:var(--tabs-list-gap);gap:var(--tabs-list-gap);border-block-end:none}.tabs[data-orientation=vertical]>.tabs__list{border-block-end:none;border-inline-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:column}.tabs__trigger{padding-block:var(--tabs-trigger-padding-block);padding-inline:var(--tabs-trigger-padding-inline);font-size:var(--tabs-trigger-font-size);font-weight:var(--tabs-trigger-font-weight);color:var(--tabs-trigger-color);cursor:pointer;white-space:nowrap;border-radius:var(--tabs-trigger-border-radius);transition:color var(--tabs-transition-duration) var(--tabs-transition-easing);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.tabs__trigger:after{content:"";block-size:var(--tabs-trigger-indicator-width);border-radius:var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0 0;transition:background-color var(--tabs-transition-duration) var(--tabs-transition-easing);background-color:#0000;position:absolute;inset-block-end:calc(-1 * var(--tabs-list-border-width));inset-inline:0}.tabs__trigger[data-active]:after{background-color:var(--tabs-trigger-indicator-color)}.tabs__trigger:hover{color:var(--tabs-trigger-hover-color)}.tabs__trigger[data-active]{color:var(--tabs-trigger-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__trigger[data-disabled]{opacity:var(--tabs-trigger-disabled-opacity);cursor:not-allowed;pointer-events:none}.tabs__trigger:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset)}.tabs[data-orientation=vertical]>.tabs__list>.tabs__trigger:after{block-size:auto;inline-size:var(--tabs-trigger-indicator-width);border-radius:0 var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0;inset-block:0;inset-inline-start:auto;inset-inline-end:calc(-1 * var(--tabs-list-border-width))}.tabs__list--pill .tabs__trigger{border-radius:var(--tabs-trigger-border-radius)}.tabs__list--pill .tabs__trigger:after{display:none}.tabs__list--pill .tabs__trigger[data-active]{background-color:var(--tabs-trigger-pill-bg-active);color:var(--tabs-trigger-pill-color-active);font-weight:var(--tabs-trigger-active-weight)}.tabs__content{padding-block:var(--tabs-content-padding-block);outline:none}.tabs__content:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset);border-radius:var(--tabs-trigger-border-radius)}.tabs[data-orientation=vertical]>.tabs__content{padding-block:0;padding-inline-start:var(--tabs-content-padding-block)}
+.tabs{flex-direction:column;display:flex}.tabs[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.tabs__list{gap:var(--tabs-list-gap);border-block-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:row;flex-shrink:0;display:flex}.tabs__list--pill{padding-block:var(--tabs-list-gap);padding-inline:var(--tabs-list-gap);gap:var(--tabs-list-gap);border-block-end:none}.tabs[data-orientation=vertical]>.tabs__list{border-block-end:none;border-inline-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:column}.tabs__trigger{padding-block:var(--tabs-trigger-padding-block);padding-inline:var(--tabs-trigger-padding-inline);font-size:var(--tabs-trigger-font-size);font-weight:var(--tabs-trigger-font-weight);line-height:var(--tabs-trigger-line-height);color:var(--tabs-trigger-color);cursor:pointer;white-space:nowrap;border-radius:var(--tabs-trigger-border-radius);transition:color var(--tabs-transition-duration) var(--tabs-transition-easing);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.tabs__trigger:after{content:"";block-size:var(--tabs-trigger-indicator-width);border-radius:var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0 0;transition:background-color var(--tabs-transition-duration) var(--tabs-transition-easing);background-color:#0000;position:absolute;inset-block-end:calc(-1 * var(--tabs-list-border-width));inset-inline:0}.tabs__trigger[data-active]:after{background-color:var(--tabs-trigger-indicator-color)}.tabs__trigger:hover{color:var(--tabs-trigger-hover-color)}.tabs__trigger[data-active]{color:var(--tabs-trigger-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__trigger[data-disabled]{opacity:var(--tabs-trigger-disabled-opacity);cursor:not-allowed;pointer-events:none}.tabs__trigger:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset)}.tabs[data-orientation=vertical]>.tabs__list>.tabs__trigger:after{block-size:auto;inline-size:var(--tabs-trigger-indicator-width);border-radius:0 var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0;inset-block:0;inset-inline-start:auto;inset-inline-end:calc(-1 * var(--tabs-list-border-width))}.tabs__list--pill .tabs__trigger{border-radius:var(--tabs-trigger-border-radius)}.tabs__list--pill .tabs__trigger:after{display:none}.tabs__list--pill .tabs__trigger[data-active]{background-color:var(--tabs-trigger-pill-active-bg);color:var(--tabs-trigger-pill-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__content{padding-block:var(--tabs-content-padding-block);outline:none}.tabs__content:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset);border-radius:var(--tabs-trigger-border-radius)}.tabs[data-orientation=vertical]>.tabs__content{padding-block:0;padding-inline-start:var(--tabs-content-padding-block)}