@studiolxd/brand 49.28.0 → 51.0.0

package/dist/floating-dock.js

@@ -1,73 +1,79 @@
 'use client';
 import './floating-dock.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { VisuallyHidden as n } from "./visually-hidden.js";
 import { Button as r } from "./button.js";
-import { CloseButton as i } from "./close-button.js";
+import { t as i } from "./_shared/closebutton.js";
 import { NumberBadge as a } from "./number-badge.js";
 import { useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Dialog as l } from "@base-ui/react/dialog";
+//#region src/stories/messages/es/floatingDock.ts
+var u = {
+	close: "Cerrar",
+	badge: (e) => `${e} mensajes nuevos`
+};
+//#endregion
 //#region src/stories/sections/FloatingDock/FloatingDock.tsx
-function u({ label: u, title: d, titleHidden: f = !1, description: p, children: m, icon: h, position: g = "bottom-end", open: _, defaultOpen: v, onOpenChange: y, closeLabel: b, badge: x = 0, badgeMax: S = 99, badgeLabel: C, badgeLive: w = !0, dismissOnOutsidePress: T = !1, className: E, ...D }) {
-	let O = e("floatingDock"), [k, A] = o(null);
+function d({ label: d, title: f, titleHidden: p = !1, description: m, children: h, icon: g, position: _ = "bottom-end", open: v, defaultOpen: y, onOpenChange: b, closeLabel: x, badge: S = 0, badgeMax: C = 99, badgeLabel: w, badgeLive: T = !0, dismissOnOutsidePress: E = !1, className: D, ...O }) {
+	let k = e("floatingDock", u), [A, j] = o(null);
 	return /* @__PURE__ */ s("div", {
-		ref: A,
-		className: ["floating-dock", E].filter(Boolean).join(" "),
-		"data-position": g,
-		...D,
+		ref: j,
+		className: ["floating-dock", D].filter(Boolean).join(" "),
+		"data-position": _,
+		...O,
 		children: /* @__PURE__ */ c(l.Root, {
-			open: _,
-			defaultOpen: v,
+			open: v,
+			defaultOpen: y,
 			modal: !1,
-			disablePointerDismissal: !T,
-			onOpenChange: (e) => y?.(e),
+			disablePointerDismissal: !E,
+			onOpenChange: (e) => b?.(e),
 			children: [
 				/* @__PURE__ */ s(l.Trigger, { render: /* @__PURE__ */ c(r, {
 					variant: "primary",
 					size: "lg",
 					iconOnly: !0,
-					"aria-label": u,
+					"aria-label": d,
 					className: "floating-dock__trigger",
-					children: [h ?? /* @__PURE__ */ s(t, {
+					children: [g ?? /* @__PURE__ */ s(t, {
 						name: "message",
 						size: "md"
-					}), x > 0 && /* @__PURE__ */ s(a, {
-						count: x,
-						max: S,
-						variant: "danger",
+					}), S > 0 && /* @__PURE__ */ s(a, {
+						count: S,
+						max: C,
+						tone: "error",
 						"aria-hidden": "true",
 						className: "floating-dock__badge"
 					})]
 				}) }),
-				w && x > 0 && /* @__PURE__ */ s(n, {
+				T && S > 0 && /* @__PURE__ */ s(n, {
 					"aria-live": "polite",
-					children: O("badge", C)(x)
+					children: k("badge", w)(S)
 				}),
-				k && /* @__PURE__ */ s(l.Portal, {
-					container: k,
+				A && /* @__PURE__ */ s(l.Portal, {
+					container: A,
 					className: "floating-dock__portal",
 					children: /* @__PURE__ */ c(l.Popup, {
 						className: "floating-dock__panel",
 						children: [
 							/* @__PURE__ */ c("header", {
 								className: "floating-dock__header",
-								children: [f ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(n, { children: d }) }) : /* @__PURE__ */ s(l.Title, {
+								children: [p ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(n, { children: f }) }) : /* @__PURE__ */ s(l.Title, {
 									className: "floating-dock__title",
-									children: d
-								}), p != null && /* @__PURE__ */ s(l.Description, {
+									children: f
+								}), m != null && /* @__PURE__ */ s(l.Description, {
 									className: "floating-dock__description",
-									children: p
+									children: m
 								})]
 							}),
 							/* @__PURE__ */ s(l.Close, {
 								className: "floating-dock__close",
-								render: /* @__PURE__ */ s(i, { label: O("close", b) })
+								render: /* @__PURE__ */ s(i, { label: k("close", x) })
 							}),
 							/* @__PURE__ */ s("div", {
 								className: "floating-dock__body",
-								children: m
+								children: h
 							})
 						]
 					})
@@ -77,4 +83,4 @@ function u({ label: u, title: d, titleHidden: f = !1, description: p, children:
 	});
 }
 //#endregion
-export { u as FloatingDock };
+export { d as FloatingDock };

package/dist/floating-toolbar.css

@@ -0,0 +1 @@
+.floating-toolbar{--floating-toolbar-rail-inline-size:calc(var(--floating-toolbar-button-size) + 2 * var(--floating-toolbar-padding-inline) + 2 * var(--floating-toolbar-border-width));position:relative}.floating-toolbar__bar{box-sizing:border-box;align-items:center;gap:var(--floating-toolbar-gap);padding-block:var(--floating-toolbar-padding-block);padding-inline:var(--floating-toolbar-padding-inline);background-color:var(--floating-toolbar-bg);border-style:solid;border-width:var(--floating-toolbar-border-width);border-color:var(--floating-toolbar-border-color);border-radius:var(--floating-toolbar-border-radius);box-shadow:var(--floating-toolbar-shadow);opacity:0;pointer-events:none;transition-property:opacity;transition-duration:var(--floating-toolbar-transition-duration);transition-timing-function:var(--floating-toolbar-transition-easing);display:flex;position:absolute;inset-block-end:calc(100% + var(--floating-toolbar-offset));inset-inline:0}.floating-toolbar__bar:before{content:"";block-size:calc(var(--floating-toolbar-offset) + var(--floating-toolbar-border-width));position:absolute;inset-block-start:100%;inset-inline:0}.floating-toolbar__group{align-items:center;gap:var(--floating-toolbar-gap);flex-direction:row;display:flex}.floating-toolbar__group.floating-toolbar__group--end{margin-inline-start:auto}.floating-toolbar:is(:hover,:focus-within,.floating-toolbar--always-visible,:has(>.floating-toolbar__bar [data-popup-open]))>.floating-toolbar__bar{opacity:1;pointer-events:auto}.floating-toolbar.floating-toolbar--sides{padding-inline:calc(var(--floating-toolbar-rail-inline-size) + var(--floating-toolbar-offset))}.floating-toolbar.floating-toolbar--sides>.floating-toolbar__bar{box-shadow:none;background-color:#0000;border-width:0;align-items:flex-start;padding-block:0;padding-inline:0;inset-block:0}.floating-toolbar.floating-toolbar--sides>.floating-toolbar__bar:before{content:none}.floating-toolbar.floating-toolbar--sides:is(:hover,:focus-within,.floating-toolbar--always-visible,:has(>.floating-toolbar__bar [data-popup-open]))>.floating-toolbar__bar{pointer-events:none}.floating-toolbar.floating-toolbar--sides:is(:hover,:focus-within,.floating-toolbar--always-visible,:has(>.floating-toolbar__bar [data-popup-open]))>.floating-toolbar__bar>.floating-toolbar__group{pointer-events:auto}.floating-toolbar.floating-toolbar--sides>.floating-toolbar__bar>.floating-toolbar__group{box-sizing:border-box;inline-size:var(--floating-toolbar-rail-inline-size);padding-block:var(--floating-toolbar-padding-block);padding-inline:var(--floating-toolbar-padding-inline);background-color:var(--floating-toolbar-bg);border-style:solid;border-width:var(--floating-toolbar-border-width);border-color:var(--floating-toolbar-border-color);border-radius:var(--floating-toolbar-border-radius);box-shadow:var(--floating-toolbar-shadow);flex-direction:column;position:sticky;inset-block-start:0}@media (width>=1024px){.floating-toolbar.floating-toolbar--auto{padding-inline:calc(var(--floating-toolbar-rail-inline-size) + var(--floating-toolbar-offset))}.floating-toolbar.floating-toolbar--auto>.floating-toolbar__bar{box-shadow:none;background-color:#0000;border-width:0;align-items:flex-start;padding-block:0;padding-inline:0;inset-block:0}.floating-toolbar.floating-toolbar--auto>.floating-toolbar__bar:before{content:none}.floating-toolbar.floating-toolbar--auto:is(:hover,:focus-within,.floating-toolbar--always-visible,:has(>.floating-toolbar__bar [data-popup-open]))>.floating-toolbar__bar{pointer-events:none}.floating-toolbar.floating-toolbar--auto:is(:hover,:focus-within,.floating-toolbar--always-visible,:has(>.floating-toolbar__bar [data-popup-open]))>.floating-toolbar__bar>.floating-toolbar__group{pointer-events:auto}.floating-toolbar.floating-toolbar--auto>.floating-toolbar__bar>.floating-toolbar__group{box-sizing:border-box;inline-size:var(--floating-toolbar-rail-inline-size);padding-block:var(--floating-toolbar-padding-block);padding-inline:var(--floating-toolbar-padding-inline);background-color:var(--floating-toolbar-bg);border-style:solid;border-width:var(--floating-toolbar-border-width);border-color:var(--floating-toolbar-border-color);border-radius:var(--floating-toolbar-border-radius);box-shadow:var(--floating-toolbar-shadow);flex-direction:column;position:sticky;inset-block-start:0}}

package/dist/floating-toolbar.js

@@ -0,0 +1,71 @@
+'use client';
+import './floating-toolbar.css';
+import { Button as e } from "./button.js";
+import { Tooltip as t } from "./tooltip.js";
+import { t as n } from "./_shared/media-query.js";
+import { createContext as r, forwardRef as i, useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Toolbar as c } from "@base-ui/react/toolbar";
+//#region src/stories/molecules/FloatingToolbar/FloatingToolbar.tsx
+var l = "(min-width: 1024px)", u = new Set([
+	"className",
+	"role",
+	"aria-label",
+	"aria-orientation",
+	"children"
+]), d = r("top"), f = i(function({ start: e, end: t, layout: r = "auto", alwaysVisible: i = !1, label: a, toolbarProps: f, children: p, className: m, ...h }, g) {
+	let _ = n(l), v = r === "sides" || r === "auto" && _ === !0, y = f ? Object.fromEntries(Object.entries(f).filter(([e]) => !u.has(e))) : void 0;
+	return /* @__PURE__ */ s("div", {
+		ref: g,
+		className: [
+			"floating-toolbar",
+			`floating-toolbar--${r}`,
+			i ? "floating-toolbar--always-visible" : "",
+			m ?? ""
+		].filter(Boolean).join(" "),
+		...h,
+		children: [/* @__PURE__ */ s(c.Root, {
+			...y,
+			className: "floating-toolbar__bar",
+			"aria-label": a,
+			orientation: v ? "vertical" : "horizontal",
+			children: [e != null && /* @__PURE__ */ o(d.Provider, {
+				value: v ? "left" : "top",
+				children: /* @__PURE__ */ o(c.Group, {
+					className: "floating-toolbar__group floating-toolbar__group--start",
+					children: e
+				})
+			}), t != null && /* @__PURE__ */ o(d.Provider, {
+				value: v ? "right" : "top",
+				children: /* @__PURE__ */ o(c.Group, {
+					className: "floating-toolbar__group floating-toolbar__group--end",
+					children: t
+				})
+			})]
+		}), /* @__PURE__ */ o("div", {
+			className: "floating-toolbar__content",
+			children: p
+		})]
+	});
+}), p = i(function({ label: n, icon: r, destructive: i = !1, className: s, ...l }, u) {
+	return /* @__PURE__ */ o(t, {
+		label: n,
+		side: a(d),
+		describe: !1,
+		ref: u,
+		...l,
+		children: /* @__PURE__ */ o(c.Button, {
+			render: /* @__PURE__ */ o(e, {
+				variant: "ghost",
+				size: "sm",
+				iconOnly: !0,
+				destructive: i,
+				"aria-label": n,
+				className: s
+			}),
+			children: r
+		})
+	});
+});
+//#endregion
+export { f as FloatingToolbar, p as FloatingToolbarButton };

package/dist/form-field.js

@@ -1,27 +1,27 @@
 'use client';
 import './form-field.css';
 import { Label as e } from "./label.js";
-import { createContext as t, useCallback as n, useContext as r, useEffect as i, useId as a, useMemo as o, useState as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import { useRender as l } from "@base-ui/react/use-render";
-import { Controller as u, FormProvider as d, useFormContext as f } from "react-hook-form";
+import { createContext as t, forwardRef as n, useCallback as r, useContext as i, useEffect as a, useId as o, useMemo as s, useState as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useRender as u } from "@base-ui/react/use-render";
+import { Controller as d, FormProvider as f, useFormContext as p } from "react-hook-form";
 //#region src/stories/molecules/FormField/FormField.tsx
-var p = t(void 0);
-function m({ translate: e, children: t, ...n }) {
-	return /* @__PURE__ */ c(p.Provider, {
+var m = t(void 0);
+function h({ translate: e, children: t, ...n }) {
+	return /* @__PURE__ */ l(m.Provider, {
 		value: e,
-		children: /* @__PURE__ */ c(d, {
+		children: /* @__PURE__ */ l(f, {
 			...n,
 			children: t
 		})
 	});
 }
-var h = t({}), g = ({ ...e }) => /* @__PURE__ */ c(h.Provider, {
+var g = t({}), _ = ({ ...e }) => /* @__PURE__ */ l(g.Provider, {
 	value: { name: e.name },
-	children: /* @__PURE__ */ c(u, { ...e })
-}), _ = t({});
-function v() {
-	let e = r(h), t = r(_), { getFieldState: n, formState: i } = f(), a = n(e.name, i), { id: o, described: s, register: c } = t;
+	children: /* @__PURE__ */ l(d, { ...e })
+}), v = t({});
+function y() {
+	let e = i(g), t = i(v), { getFieldState: n, formState: r } = p(), a = n(e.name, r), { id: o, described: s, register: c } = t;
 	return {
 		id: o,
 		name: e.name,
@@ -33,43 +33,44 @@ function v() {
 		...a
 	};
 }
-function y({ className: e, ...t }) {
-	let r = a(), [i, l] = s({
+var b = n(function({ className: e, ...t }, n) {
+	let i = o(), [a, u] = c({
 		description: !1,
 		message: !1
-	}), u = n((e, t) => {
-		l((n) => n[e] === t ? n : {
+	}), d = r((e, t) => {
+		u((n) => n[e] === t ? n : {
 			...n,
 			[e]: t
 		});
-	}, []), d = o(() => ({
-		id: r,
-		described: i,
-		register: u
+	}, []), f = s(() => ({
+		id: i,
+		described: a,
+		register: d
 	}), [
-		r,
 		i,
-		u
+		a,
+		d
 	]);
-	return /* @__PURE__ */ c(_.Provider, {
-		value: d,
-		children: /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l(v.Provider, {
+		value: f,
+		children: /* @__PURE__ */ l("div", {
+			ref: n,
 			className: ["form-field", e].filter(Boolean).join(" "),
 			...t
 		})
 	});
-}
-function b({ ...t }) {
-	let { error: n, formItemId: r } = v();
-	return /* @__PURE__ */ c(e, {
-		"data-error": !!n,
-		htmlFor: r,
+}), x = n(function({ ...t }, n) {
+	let { error: r, formItemId: i } = y();
+	return /* @__PURE__ */ l(e, {
+		ref: n,
+		"data-error": !!r,
+		htmlFor: i,
 		...t
 	});
-}
-function x({ children: e, ...t }) {
-	let { error: n, formItemId: r, formDescriptionId: i, formMessageId: a, described: o } = v(), s = [...[o.description ? i : null, o.message ? a : null], t["aria-describedby"]].filter((e) => typeof e == "string" && e.length > 0).join(" ");
-	return l({
+});
+function S({ children: e, ...t }) {
+	let { error: n, formItemId: r, formDescriptionId: i, formMessageId: a, described: o } = y(), s = [...[o.description ? i : null, o.message ? a : null], t["aria-describedby"]].filter((e) => typeof e == "string" && e.length > 0).join(" ");
+	return u({
 		render: e,
 		props: {
 			id: r,
@@ -79,32 +80,33 @@ function x({ children: e, ...t }) {
 		}
 	});
 }
-function S({ className: e, ...t }) {
-	let { formDescriptionId: n, register: r } = v();
-	return i(() => (r("description", !0), () => r("description", !1)), [r]), /* @__PURE__ */ c("p", {
-		id: n,
+var C = n(function({ className: e, ...t }, n) {
+	let { formDescriptionId: r, register: i } = y();
+	return a(() => (i("description", !0), () => i("description", !1)), [i]), /* @__PURE__ */ l("p", {
+		ref: n,
+		id: r,
 		className: ["form-field__description", e].filter(Boolean).join(" "),
 		...t
 	});
-}
-function C({ className: e, children: t, ...n }) {
-	let { error: a, formMessageId: o, register: s } = v(), l = r(p), u = a ? String(a?.message ?? "") : "", d = a ? l && u ? l(u) : u : t, f = !!d;
-	return i(() => (s("message", f), () => s("message", !1)), [s, f]), d ? /* @__PURE__ */ c("p", {
-		id: o,
+}), w = n(function({ className: e, children: t, ...n }, r) {
+	let { error: o, formMessageId: s, register: c } = y(), u = i(m), d = o ? String(o?.message ?? "") : "", f = o ? u && d ? u(d) : d : t, p = !!f;
+	return a(() => (c("message", p), () => c("message", !1)), [c, p]), f ? /* @__PURE__ */ l("p", {
+		ref: r,
+		id: s,
 		role: "alert",
 		className: ["form-field__message", e].filter(Boolean).join(" "),
 		...n,
-		children: d
+		children: f
 	}) : null;
-}
-function w({ className: e, ...t }) {
-	let { formState: n } = f(), i = r(p), a = n.errors.root?.message, o = a && i ? i(String(a)) : a;
-	return o ? /* @__PURE__ */ c("p", {
+}), T = n(function({ className: e, ...t }, n) {
+	let { formState: r } = p(), a = i(m), o = r.errors.root?.message, s = o && a ? a(String(o)) : o;
+	return s ? /* @__PURE__ */ l("p", {
+		ref: n,
 		role: "alert",
 		className: ["form-error", e].filter(Boolean).join(" "),
 		...t,
-		children: o
+		children: s
 	}) : null;
-}
+});
 //#endregion
-export { x as FormControl, S as FormDescription, g as FormField, y as FormItem, b as FormLabel, C as FormMessage, m as FormProvider, w as FormRootMessage, v as useFormField };
+export { S as FormControl, C as FormDescription, _ as FormField, b as FormItem, x as FormLabel, w as FormMessage, h as FormProvider, T as FormRootMessage, y as useFormField };

package/dist/form.js

@@ -2,62 +2,66 @@
 import './form.css';
 import { t as e } from "./_shared/form-size.js";
 import { ErrorText as t } from "./error-text.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { t as n } from "./_shared/field-optional.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/Form/Form.tsx
-var a = n(function({ errors: n, actions: a, links: o, alternatives: s, alternativesLabel: c, captcha: l, size: u, blockActions: d = !1, success: f, className: p, children: m, ...h }, g) {
-	let _ = [
+var o = r(function({ errors: r, actions: o, links: s, alternatives: c, alternativesLabel: l, captcha: u, size: d, markOptional: f = !1, blockActions: p = !1, success: m, className: h, children: g, ..._ }, v) {
+	let y = [
 		"form",
-		u && u !== "md" ? `form--${u}` : "",
-		d ? "form--block-actions" : "",
-		p
+		d && d !== "md" ? `form--${d}` : "",
+		p ? "form--block-actions" : "",
+		h
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r(e.Provider, {
-		value: u,
-		children: /* @__PURE__ */ i("form", {
-			ref: g,
-			className: _,
-			noValidate: !0,
-			...h,
-			children: [
-				f && /* @__PURE__ */ r("p", {
-					className: "form__success",
-					role: "status",
-					children: f
-				}),
-				!f && m && /* @__PURE__ */ r("div", {
-					className: "form__fields",
-					children: m
-				}),
-				!f && l && /* @__PURE__ */ r("div", {
-					className: "form__captcha",
-					children: l
-				}),
-				!f && n && n.length > 0 && /* @__PURE__ */ r("ul", {
-					className: "form__errors",
-					children: n.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(t, {
-						as: "span",
-						children: e
-					}) }, e))
-				}),
-				!f && a && /* @__PURE__ */ r("div", {
-					className: ["form__actions", d ? "form__actions--block" : ""].filter(Boolean).join(" "),
-					children: a
-				}),
-				o && /* @__PURE__ */ r("div", {
-					className: "form__links",
-					children: o
-				}),
-				!f && s && /* @__PURE__ */ i("div", {
-					className: "form__alternatives",
-					children: [c && /* @__PURE__ */ r("p", {
-						className: "form__alternatives-label",
-						children: c
-					}), s]
-				})
-			]
+	return /* @__PURE__ */ i(e.Provider, {
+		value: d,
+		children: /* @__PURE__ */ i(n.Provider, {
+			value: f,
+			children: /* @__PURE__ */ a("form", {
+				ref: v,
+				className: y,
+				noValidate: !0,
+				..._,
+				children: [
+					m && /* @__PURE__ */ i("p", {
+						className: "form__success",
+						role: "status",
+						children: m
+					}),
+					!m && g && /* @__PURE__ */ i("div", {
+						className: "form__fields",
+						children: g
+					}),
+					!m && u && /* @__PURE__ */ i("div", {
+						className: "form__captcha",
+						children: u
+					}),
+					!m && r && r.length > 0 && /* @__PURE__ */ i("ul", {
+						className: "form__errors",
+						children: r.map((e) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(t, {
+							as: "span",
+							children: e
+						}) }, e))
+					}),
+					!m && o && /* @__PURE__ */ i("div", {
+						className: ["form__actions", p ? "form__actions--block" : ""].filter(Boolean).join(" "),
+						children: o
+					}),
+					s && /* @__PURE__ */ i("div", {
+						className: "form__links",
+						children: s
+					}),
+					!m && c && /* @__PURE__ */ a("div", {
+						className: "form__alternatives",
+						children: [l && /* @__PURE__ */ i("p", {
+							className: "form__alternatives-label",
+							children: l
+						}), c]
+					})
+				]
+			})
 		})
 	});
 });
 //#endregion
-export { a as Form };
+export { o as Form };

package/dist/heatmap.css

@@ -1 +1 @@
-.heatmap{font-family:var(--heatmap-font-family)}.heatmap__wrap{border:var(--heatmap-border-width) solid var(--heatmap-border-color);border-radius:var(--heatmap-radius);overflow:auto visible}.heatmap__table{border-collapse:collapse;inline-size:100%}.heatmap__group{padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-group-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-group-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__corner,.heatmap__row-header{z-index:1;min-inline-size:var(--heatmap-row-header-width);max-inline-size:var(--heatmap-row-header-width);padding-block:var(--heatmap-row-header-padding-block);padding-inline:var(--heatmap-row-header-padding-inline);text-align:start;background-color:var(--heatmap-row-header-bg);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);position:sticky;inset-inline-start:0}.heatmap__corner{z-index:2;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__row-header{font-size:var(--heatmap-row-header-font-size);font-weight:var(--heatmap-row-header-font-weight);color:var(--heatmap-row-header-color)}.heatmap__column-header{min-inline-size:var(--heatmap-column-header-width);padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-column-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-column-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;vertical-align:bottom;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell{padding-block:var(--heatmap-cell-padding-block);padding-inline:var(--heatmap-cell-padding-inline);font-size:var(--heatmap-cell-font-size);font-weight:var(--heatmap-cell-font-weight);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell.heatmap__cell--step-1{background-color:var(--heatmap-step-1-bg);color:var(--heatmap-step-1-color)}.heatmap__cell.heatmap__cell--step-2{background-color:var(--heatmap-step-2-bg);color:var(--heatmap-step-2-color)}.heatmap__cell.heatmap__cell--step-3{background-color:var(--heatmap-step-3-bg);color:var(--heatmap-step-3-color)}.heatmap__cell.heatmap__cell--step-4{background-color:var(--heatmap-step-4-bg);color:var(--heatmap-step-4-color)}.heatmap__cell.heatmap__cell--step-5{background-color:var(--heatmap-step-5-bg);color:var(--heatmap-step-5-color)}.heatmap__cell.heatmap__cell--step-6{background-color:var(--heatmap-step-6-bg);color:var(--heatmap-step-6-color)}.heatmap__cell.heatmap__cell--empty{background-color:var(--heatmap-empty-bg);background-image:repeating-linear-gradient(45deg, var(--heatmap-empty-pattern-color) 0, var(--heatmap-empty-pattern-color) var(--heatmap-empty-pattern-width), transparent var(--heatmap-empty-pattern-width), transparent calc(var(--heatmap-empty-pattern-width) * 2))}.heatmap__legend{align-items:center;gap:var(--heatmap-legend-gap);font-size:var(--heatmap-legend-font-size);color:var(--heatmap-legend-color);flex-wrap:wrap;margin-block-start:var(--heatmap-margin-block-start);display:flex}.heatmap__ramp{gap:var(--heatmap-legend-swatch-gap);display:flex}.heatmap__swatch{inline-size:var(--heatmap-legend-swatch-size);block-size:var(--heatmap-legend-swatch-size)}.heatmap__swatch.heatmap__swatch--step-1{background-color:var(--heatmap-step-1-bg)}.heatmap__swatch.heatmap__swatch--step-2{background-color:var(--heatmap-step-2-bg)}.heatmap__swatch.heatmap__swatch--step-3{background-color:var(--heatmap-step-3-bg)}.heatmap__swatch.heatmap__swatch--step-4{background-color:var(--heatmap-step-4-bg)}.heatmap__swatch.heatmap__swatch--step-5{background-color:var(--heatmap-step-5-bg)}.heatmap__swatch.heatmap__swatch--step-6{background-color:var(--heatmap-step-6-bg)}
+.heatmap{font-family:var(--heatmap-font-family)}.heatmap__wrap{border:var(--heatmap-border-width) solid var(--heatmap-border-color);border-radius:var(--heatmap-radius);overflow:auto visible}.heatmap__table{border-collapse:collapse;inline-size:100%}.heatmap__group{padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-group-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-group-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__corner,.heatmap__row-header{z-index:1;min-inline-size:var(--heatmap-row-header-width);max-inline-size:var(--heatmap-row-header-width);padding-block:var(--heatmap-row-header-padding-block);padding-inline:var(--heatmap-row-header-padding-inline);text-align:start;background-color:var(--heatmap-row-header-bg);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);position:sticky;inset-inline-start:0}.heatmap__corner{z-index:2;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__row-header{font-size:var(--heatmap-row-header-font-size);font-weight:var(--heatmap-row-header-font-weight);color:var(--heatmap-row-header-color)}.heatmap__column-header{min-inline-size:var(--heatmap-column-header-width);padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-column-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-column-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;vertical-align:bottom;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell{padding-block:var(--heatmap-cell-padding-block);padding-inline:var(--heatmap-cell-padding-inline);font-size:var(--heatmap-cell-font-size);font-weight:var(--heatmap-cell-font-weight);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell.heatmap__cell--step-1{background-color:var(--heatmap-step-1-bg);color:var(--heatmap-step-1-color)}.heatmap__cell.heatmap__cell--step-2{background-color:var(--heatmap-step-2-bg);color:var(--heatmap-step-2-color)}.heatmap__cell.heatmap__cell--step-3{background-color:var(--heatmap-step-3-bg);color:var(--heatmap-step-3-color)}.heatmap__cell.heatmap__cell--step-4{background-color:var(--heatmap-step-4-bg);color:var(--heatmap-step-4-color)}.heatmap__cell.heatmap__cell--step-5{background-color:var(--heatmap-step-5-bg);color:var(--heatmap-step-5-color)}.heatmap__cell.heatmap__cell--step-6{background-color:var(--heatmap-step-6-bg);color:var(--heatmap-step-6-color)}.heatmap__cell.heatmap__cell--diverging-warm-3{background-color:var(--heatmap-diverging-warm-3-bg);color:var(--heatmap-diverging-warm-3-color)}.heatmap__cell.heatmap__cell--diverging-warm-2{background-color:var(--heatmap-diverging-warm-2-bg);color:var(--heatmap-diverging-warm-2-color)}.heatmap__cell.heatmap__cell--diverging-warm-1{background-color:var(--heatmap-diverging-warm-1-bg);color:var(--heatmap-diverging-warm-1-color)}.heatmap__cell.heatmap__cell--diverging-neutral{background-color:var(--heatmap-diverging-neutral-bg);color:var(--heatmap-diverging-neutral-color)}.heatmap__cell.heatmap__cell--diverging-cool-1{background-color:var(--heatmap-diverging-cool-1-bg);color:var(--heatmap-diverging-cool-1-color)}.heatmap__cell.heatmap__cell--diverging-cool-2{background-color:var(--heatmap-diverging-cool-2-bg);color:var(--heatmap-diverging-cool-2-color)}.heatmap__cell.heatmap__cell--diverging-cool-3{background-color:var(--heatmap-diverging-cool-3-bg);color:var(--heatmap-diverging-cool-3-color)}.heatmap__cell.heatmap__cell--empty{background-color:var(--heatmap-empty-bg);background-image:repeating-linear-gradient(45deg, var(--heatmap-empty-pattern-color) 0, var(--heatmap-empty-pattern-color) var(--heatmap-empty-pattern-width), transparent var(--heatmap-empty-pattern-width), transparent calc(var(--heatmap-empty-pattern-width) * 2))}.heatmap__legend{align-items:center;gap:var(--heatmap-legend-gap);font-size:var(--heatmap-legend-font-size);color:var(--heatmap-legend-color);flex-wrap:wrap;margin-block-start:var(--heatmap-margin-block-start);display:flex}.heatmap__ramp{display:flex}.heatmap__swatch{inline-size:var(--heatmap-legend-swatch-size);block-size:var(--heatmap-legend-swatch-size)}.heatmap__swatch.heatmap__swatch--step-1{background-color:var(--heatmap-step-1-bg)}.heatmap__swatch.heatmap__swatch--step-2{background-color:var(--heatmap-step-2-bg)}.heatmap__swatch.heatmap__swatch--step-3{background-color:var(--heatmap-step-3-bg)}.heatmap__swatch.heatmap__swatch--step-4{background-color:var(--heatmap-step-4-bg)}.heatmap__swatch.heatmap__swatch--step-5{background-color:var(--heatmap-step-5-bg)}.heatmap__swatch.heatmap__swatch--step-6{background-color:var(--heatmap-step-6-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-3{background-color:var(--heatmap-diverging-warm-3-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-2{background-color:var(--heatmap-diverging-warm-2-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-1{background-color:var(--heatmap-diverging-warm-1-bg)}.heatmap__swatch.heatmap__swatch--diverging-neutral{background-color:var(--heatmap-diverging-neutral-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-1{background-color:var(--heatmap-diverging-cool-1-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-2{background-color:var(--heatmap-diverging-cool-2-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-3{background-color:var(--heatmap-diverging-cool-3-bg)}