@studiolxd/brand 38.12.4

package/dist/assets/icons/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+  "name": "SLXD",
+  "short_name": "SLXD",
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#baabff",
+  "background_color": "#baabff",
+  "display": "standalone"
+}

package/dist/assets/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 925.5 265.5" fill="currentColor" role="img" aria-label="Studio LXD">
+  <title>Studio LXD</title>
+  <path d="M108.2,203.5c-7,0-13-1.1-18.1-3.4c-5.1-2.3-9.4-5.2-13-8.9l-10.5,9.9H62l8.3-39.2h4.6 c3.6,24.7,15.1,37,34.6,37c7.6,0,14-1.6,19.2-4.7c5.2-3.1,9.2-7.1,11.9-11.8c2.7-4.7,4-9.4,4-13.9c0-5.3-1.4-9.7-4.2-13.2 c-2.8-3.5-6.4-6.6-10.9-9.2c-4.4-2.6-9.1-5.2-14.1-7.6c-5-2.5-9.7-5.2-14.1-8.4c-4.4-3.1-8-7-10.9-11.7 c-2.8-4.7-4.2-10.4-4.2-17.3c0-7.1,1.5-13.7,4.6-19.9c3.1-6.1,7.7-11.1,13.9-14.9c6.2-3.8,14-5.7,23.5-5.7c6.6,0,12.2,1,16.7,2.9 c4.5,1.9,8.2,4.3,11,7.3l7.7-8.5h4.6L161,99h-4.6c0-6.7-1.1-12.6-3.4-17.7c-2.3-5-5.5-9-9.8-11.8c-4.2-2.8-9.4-4.2-15.5-4.2 c-4.4,0-8.9,0.9-13.5,2.6c-4.6,1.7-8.5,4.2-11.6,7.5c-3.1,3.3-4.7,7.4-4.7,12.1c0,4.7,1.4,8.6,4.3,11.8c2.9,3.2,6.6,6,11,8.5 c4.5,2.5,9.3,4.9,14.4,7.5c5.1,2.5,9.9,5.5,14.4,8.9c4.5,3.4,8.2,7.7,11,12.7c2.9,5,4.3,11.3,4.3,18.8c0,9.4-2.2,17.8-6.5,24.9 c-4.4,7.2-10.2,12.8-17.6,16.8C125.9,201.5,117.5,203.5,108.2,203.5z" />
+  <path d="M171.7,203.5c-4.5,0-8-1.2-10.5-3.5c-2.5-2.3-3.7-5.4-3.7-9.2c0-1,0.1-2,0.3-2.9c0.2-1,0.3-1.9,0.5-2.8 l21.2-87.6h19.7l-21.5,85.7c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4c0,3.1,1.3,4.6,4,4.6c2.9,0,6.1-1.8,9.6-5.3 c3.4-3.6,7.2-9.6,11.4-18.2l3.7,1.7c-2.3,5.2-5.1,10.1-8.4,14.9c-3.3,4.8-7,8.7-11.1,11.8C181.7,201.9,176.9,203.5,171.7,203.5z M161.2,122.9v-4.6h49.1v4.6H161.2z" />
+  <path d="M225.4,203.3c-4.7,0-8.7-1.2-12.1-3.6c-3.4-2.4-5.2-6.2-5.2-11.5c0-2.3,0.4-5,1.1-8.1l15.1-61.8h19.1 l-15.8,66.1c-0.1,0.9-0.3,1.7-0.5,2.5c-0.2,0.8-0.3,1.6-0.3,2.3c0,2.1,0.6,3.6,1.9,4.6c1.3,1,2.9,1.5,4.9,1.5 c2.8,0,5.7-0.9,8.6-2.6c2.9-1.7,5.8-4.1,8.5-7.3c2.7-3.1,5.1-6.7,7.3-10.8c2.1-4,3.9-8.5,5.2-13.2l-4,22.1H258 c-3.8,5-8.4,9.6-13.9,13.7C238.6,201.2,232.4,203.3,225.4,203.3z M209.8,122.9v-4.6H239v4.6H209.8z M273.6,203.3 c-2.3,0-4.7-0.5-7-1.6c-2.3-1-4.2-2.8-5.7-5.3c-1.5-2.5-2.2-6-2.2-10.4c0-1.7,0.2-3.7,0.5-5.9c0.3-2.2,0.8-4.7,1.4-7.4l13.1-54.5 h18.8L278.6,174c-0.9,3.8-1.5,7-2,9.7c-0.5,2.6-0.7,4.8-0.7,6.3c0,3.7,1.2,5.5,3.7,5.5c2.6,0,5.4-1.9,8.6-5.8 c3.1-3.9,6.4-9.4,9.8-16.5l3.7,1.7c-2.5,5.9-5.1,10.9-7.9,15.2c-2.8,4.2-5.9,7.5-9.1,9.8C281.3,202.2,277.7,203.3,273.6,203.3z" />
+  <path d="M322.7,203.5c-5.4,0-10.4-1.3-15.1-4c-4.7-2.6-8.4-6.4-11.2-11.4c-2.8-5-4.2-11-4.2-18.1 c0-7.1,1.4-13.9,4.3-20.4c2.9-6.5,6.7-12.3,11.4-17.3c4.7-5,9.9-9,15.6-11.9c5.7-2.9,11.4-4.3,17-4.3c5.4,0,9.6,1.3,12.5,3.8 c2.9,2.5,5.2,5.7,6.8,9.7h1.3l-4.2,16.7c0.2-1.2,0.4-2.4,0.5-3.5c0.1-1.1,0.1-2.1,0.1-2.9c0-5.2-1.5-9.5-4.4-13.1 c-2.9-3.6-6.6-5.3-10.9-5.3c-3.7,0-7.1,1.4-10.1,4c-3.1,2.7-5.8,6.2-8.1,10.6c-2.3,4.4-4.3,9.1-6,14.3c-1.7,5.2-2.9,10.2-3.7,15.3 c-0.8,5-1.2,9.5-1.2,13.4c0,6.6,1.1,11.4,3.4,14.3c2.3,2.9,5.5,4.3,9.7,4.3c2.3,0,4.9-0.6,7.7-1.9c2.8-1.3,5.7-3.9,8.7-7.9 c3-4,5.9-10,8.6-17.9l-2.2,18.4h-1.3c-2.3,4.3-5.6,7.9-9.8,10.9C333.8,202,328.7,203.5,322.7,203.5z M362.5,203.5 c-4.2,0-7.5-1.2-10.1-3.7c-2.6-2.5-3.9-6.6-3.9-12.3c0-1.8,0.2-4,0.5-6.4c0.3-2.5,0.8-5.2,1.6-8.1l26.3-110.6h19.7l-29.8,120.9 c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4c0,3.1,1.4,4.6,4.2,4.6c3.1,0,6.3-1.8,9.8-5.3c3.5-3.6,7.5-9.6,11.9-18.2 l3.7,1.7c-2.7,5.4-5.6,10.5-8.7,15.3s-6.7,8.6-10.6,11.6C372.2,202,367.6,203.5,362.5,203.5z M358.4,66.9v-4.6h35.9v4.6H358.4z" />
+  <path d="M393.2,122.9v-4.6h28.5v4.6H393.2z M401.7,203.5c-4.5,0-8-1.2-10.5-3.5c-2.5-2.3-3.7-5.4-3.7-9.2 c0-1,0.1-2,0.3-2.9c0.2-1,0.3-1.9,0.5-2.8l16-66.8h19.7l-16.4,65c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4 c0,3.1,1.3,4.6,4,4.6c2.9,0,6.1-1.8,9.6-5.3c3.4-3.6,7.2-9.6,11.4-18.2l3.7,1.7c-2.3,5.2-5.1,10.1-8.4,14.9 c-3.3,4.8-7,8.7-11.1,11.8C411.7,201.9,406.9,203.5,401.7,203.5z M420.3,91.1c-3.4,0-6.3-1.2-8.7-3.6c-2.4-2.4-3.6-5.3-3.6-8.7 c0-3.6,1.2-6.5,3.6-8.9c2.4-2.4,5.3-3.6,8.7-3.6c3.6,0,6.5,1.2,8.9,3.6c2.4,2.4,3.6,5.4,3.6,8.9c0,3.4-1.2,6.3-3.6,8.7 C426.8,89.9,423.8,91.1,420.3,91.1z" />
+  <path d="M458,203.5c-6.7,0-12.6-1.5-17.7-4.6c-5-3.1-9-7.2-11.8-12.4c-2.8-5.2-4.2-11-4.2-17.4 c0-6.5,1.4-12.9,4.3-19.2c2.9-6.3,6.8-12,11.7-17.1c4.9-5.1,10.5-9.1,16.7-12.1c6.3-3,12.8-4.5,19.7-4.5c6.7,0,12.6,1.5,17.7,4.4 c5,2.9,9,6.9,11.8,12c2.8,5,4.2,10.7,4.2,17.1c0,6.5-1.4,12.9-4.3,19.3c-2.9,6.4-6.8,12.2-11.7,17.4c-4.9,5.2-10.5,9.4-16.7,12.5 C471.4,201.9,464.8,203.5,458,203.5z M458.3,198.9c5,0,9.5-1.7,13.3-5.2s7.1-8,9.8-13.6c2.6-5.6,4.6-11.7,6-18.2 c1.3-6.6,2-12.9,2-19c0-6.5-1-11.8-2.9-15.9c-1.9-4.1-5.5-6.2-10.8-6.2c-4.9,0-9.3,1.8-13.1,5.3c-3.8,3.6-7,8.2-9.7,13.9 c-2.6,5.7-4.6,11.9-6,18.6c-1.4,6.7-2,13.1-2,19.2c0,6.9,1,12.1,2.9,15.7C450,197.1,453.4,198.9,458.3,198.9z" />
+  <path d="M547.6,201.4V69.7h20.2v113.1h60.4v18.7H547.6z" />
+  <path d="M631.6,201.4l49.3-74.3l2.2-0.1l35.6-57.3h22.4l-45.4,69.9h-1.8l-39.7,61.8H631.6z M722.6,201.4l-40.8-62.2 l-1.4-0.1l-46.1-69.5h23.3l37.4,57.3h1.8l49.6,74.4H722.6z" />
+  <path d="M751.6,201.4V69.7h45.1c20.2,0,36.3,6,48.5,18c12.1,12,18.2,27.9,18.2,47.8c0,19.8-6.1,35.8-18.4,47.8 c-12.2,12.1-28.4,18.1-48.3,18.1H751.6z M771.9,183.3h24.4c14.2,0,25.4-4.3,33.8-12.8c8.4-8.5,12.6-20.1,12.6-34.6v-0.1 c0-14.7-4.1-26.3-12.4-34.9c-8.2-8.6-19.6-12.9-34-12.9h-24.4V183.3z" />
+</svg>

package/dist/assets/logomark-safe.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="508.125 -61.825 394.75 394.75" fill="currentColor" role="img" aria-label="Studio LXD">
+  <title>Studio LXD</title>
+  <!-- Área de seguridad del 10 % por lado: el isotipo ocupa el 80 % central y entra completo en una máscara circular. -->
+  <path d="M547.6,201.4V69.7h20.2v113.1h60.4v18.7H547.6z" />
+  <path d="M631.6,201.4l49.3-74.3l2.2-0.1l35.6-57.3h22.4l-45.4,69.9h-1.8l-39.7,61.8H631.6z M722.6,201.4l-40.8-62.2 l-1.4-0.1l-46.1-69.5h23.3l37.4,57.3h1.8l49.6,74.4H722.6z" />
+  <path d="M751.6,201.4V69.7h45.1c20.2,0,36.3,6,48.5,18c12.1,12,18.2,27.9,18.2,47.8c0,19.8-6.1,35.8-18.4,47.8 c-12.2,12.1-28.4,18.1-48.3,18.1H751.6z M771.9,183.3h24.4c14.2,0,25.4-4.3,33.8-12.8c8.4-8.5,12.6-20.1,12.6-34.6v-0.1 c0-14.7-4.1-26.3-12.4-34.9c-8.2-8.6-19.6-12.9-34-12.9h-24.4V183.3z" />
+</svg>

package/dist/assets/logomark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="547.6 -22.35 315.8 315.8" fill="currentColor" role="img" aria-label="Studio LXD">
+  <title>Studio LXD</title>
+  <path d="M547.6,201.4V69.7h20.2v113.1h60.4v18.7H547.6z" />
+  <path d="M631.6,201.4l49.3-74.3l2.2-0.1l35.6-57.3h22.4l-45.4,69.9h-1.8l-39.7,61.8H631.6z M722.6,201.4l-40.8-62.2 l-1.4-0.1l-46.1-69.5h23.3l37.4,57.3h1.8l49.6,74.4H722.6z" />
+  <path d="M751.6,201.4V69.7h45.1c20.2,0,36.3,6,48.5,18c12.1,12,18.2,27.9,18.2,47.8c0,19.8-6.1,35.8-18.4,47.8 c-12.2,12.1-28.4,18.1-48.3,18.1H751.6z M771.9,183.3h24.4c14.2,0,25.4-4.3,33.8-12.8c8.4-8.5,12.6-20.1,12.6-34.6v-0.1 c0-14.7-4.1-26.3-12.4-34.9c-8.2-8.6-19.6-12.9-34-12.9h-24.4V183.3z" />
+</svg>

package/dist/assistant-message.css

@@ -0,0 +1 @@
+.assistant-message{align-items:flex-start;gap:var(--assistant-message-gap);flex-direction:column;display:flex}.assistant-message__model{font-family:var(--assistant-message-model-font-family);font-size:var(--assistant-message-model-font-size);font-weight:var(--assistant-message-model-font-weight);color:var(--assistant-message-model-color);padding-inline:var(--assistant-message-model-padding-inline)}.assistant-message__timestamp{font-family:var(--assistant-message-timestamp-font-family);font-size:var(--assistant-message-timestamp-font-size);color:var(--assistant-message-timestamp-color);padding-inline:var(--assistant-message-timestamp-padding-inline)}

package/dist/assistant-message.js

@@ -0,0 +1,32 @@
+import './assistant-message.css';
+import { MessageBubble as e } from "./message-bubble.js";
+import { TypingIndicator as t } from "./typing-indicator.js";
+import { t as n } from "./_shared/messagetimestamp.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+//#region src/stories/molecules/AssistantMessage/AssistantMessage.tsx
+var o = a(function({ children: a, model: o, timestamp: s, locale: c, timestampFormat: l, isStreaming: u = !1, streamingLabel: d, className: f, ...p }, m) {
+	let h = n(s, c, l);
+	return /* @__PURE__ */ i("div", {
+		ref: m,
+		className: `assistant-message${f ? ` ${f}` : ""}`,
+		...p,
+		children: [
+			o && /* @__PURE__ */ r("span", {
+				className: "assistant-message__model",
+				children: o
+			}),
+			/* @__PURE__ */ r(e, {
+				role: "assistant",
+				children: u ? /* @__PURE__ */ r(t, { label: d }) : a
+			}),
+			h && !u && /* @__PURE__ */ r("time", {
+				className: "assistant-message__timestamp",
+				dateTime: h.dateTime,
+				children: h.label
+			})
+		]
+	});
+});
+//#endregion
+export { o as AssistantMessage };

package/dist/async-multi-select-field.css

@@ -0,0 +1 @@
+.async-multi-select-field{gap:var(--async-multi-select-field-gap);flex-direction:column;display:flex}.async-multi-select-field__helper{font-family:var(--async-multi-select-field-helper-font-family);font-size:var(--async-multi-select-field-helper-font-size);font-weight:var(--async-multi-select-field-helper-font-weight);line-height:var(--async-multi-select-field-helper-line-height);color:var(--async-multi-select-field-helper-color)}

package/dist/async-multi-select-field.js

@@ -0,0 +1,58 @@
+'use client';
+import './async-multi-select-field.css';
+import { AsyncMultiSelect as e } from "./async-multi-select.js";
+import { n as t } from "./_shared/form-size.js";
+import { ErrorText as n } from "./error-text.js";
+import { Label as r } from "./label.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/AsyncMultiSelectField/AsyncMultiSelectField.tsx
+var l = s(function({ id: s, label: l, labelHidden: u, onSearch: d, value: f, defaultValue: p, onValueChange: m, selectedOptions: h, placeholder: g, name: _, disabled: v, readOnly: y, size: b, debounceMs: x, required: S, error: C = !1, errorMessage: w, helperText: T, className: E, emptyMessage: D, removeLabel: O, loadingLabel: k, container: A, onBlur: j }, M) {
+	let N = i(u), P = t(b), F = c(), I = s ?? F, L = w ? `${I}-error` : void 0, R = T ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = C || !!w;
+	return /* @__PURE__ */ o("div", {
+		className: ["async-multi-select-field", E].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(r, {
+				htmlFor: I,
+				hidden: N,
+				size: P,
+				children: l
+			}),
+			/* @__PURE__ */ a(e, {
+				ref: M,
+				id: I,
+				name: _,
+				onSearch: d,
+				value: f,
+				defaultValue: p,
+				onValueChange: m,
+				selectedOptions: h,
+				placeholder: g,
+				disabled: v,
+				readOnly: y,
+				size: P,
+				debounceMs: x,
+				required: S,
+				error: B,
+				emptyMessage: D,
+				removeLabel: O,
+				loadingLabel: k,
+				container: A,
+				"aria-describedby": z,
+				onBlur: j
+			}),
+			w && /* @__PURE__ */ a(n, {
+				id: L,
+				children: w
+			}),
+			T && /* @__PURE__ */ a("span", {
+				id: R,
+				className: "async-multi-select-field__helper",
+				children: T
+			})
+		]
+	});
+});
+//#endregion
+export { l as AsyncMultiSelectField };

package/dist/async-multi-select.css

@@ -0,0 +1 @@
+.async-multi-select{align-items:center;gap:var(--async-multi-select-content-gap);min-block-size:var(--async-multi-select-height);padding-block:0;padding-inline:var(--async-multi-select-padding-inline);font-family:var(--async-multi-select-font-family);font-size:var(--async-multi-select-font-size);line-height:var(--async-multi-select-line-height);font-weight:var(--async-multi-select-font-weight);color:var(--async-multi-select-color);background-color:var(--async-multi-select-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-border-color);border-radius:var(--async-multi-select-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.async-multi-select:focus-within{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-multi-select-focus-ring-width) + var(--async-multi-select-border-width)))}.async-multi-select.async-multi-select--disabled{opacity:.5;cursor:var(--async-multi-select-disabled-cursor);pointer-events:none}.async-multi-select__input-area{align-items:center;gap:var(--async-multi-select-selection-gap);flex-wrap:wrap;flex:1;min-width:0;display:flex}.async-multi-select__pill{align-items:center;gap:var(--async-multi-select-pill-gap);padding-block:var(--async-multi-select-pill-padding-block);padding-inline:var(--async-multi-select-pill-padding-inline);background-color:var(--async-multi-select-pill-bg);color:var(--async-multi-select-pill-color);border-radius:var(--async-multi-select-pill-border-radius);font-size:var(--async-multi-select-pill-font-size);white-space:nowrap;line-height:1;display:inline-flex}.async-multi-select__pill-label{line-height:1}.async-multi-select__pill-remove{all:unset;cursor:pointer;line-height:1;font-size:var(--async-multi-select-pill-font-size);opacity:.7;justify-content:center;align-items:center;display:inline-flex}.async-multi-select__pill-remove:hover{opacity:1}.async-multi-select__input{all:unset;cursor:text;min-width:4rem;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-multi-select__input::placeholder{color:var(--async-multi-select-placeholder-color)}.async-multi-select__input:disabled{cursor:var(--async-multi-select-disabled-cursor)}.async-multi-select__content{background-color:var(--async-multi-select-content-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-content-border-color);min-width:var(--anchor-width);max-height:var(--async-multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-multi-select__content[data-side=bottom]{border-top:none}.async-multi-select__content[data-side=top]{border-bottom:none}.async-multi-select__loading{padding-block:var(--async-multi-select-loading-padding-block);padding-inline:var(--async-multi-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-multi-select__empty{padding-block:var(--async-multi-select-empty-padding-block);padding-inline:var(--async-multi-select-empty-padding-inline);font-size:var(--async-multi-select-empty-font-size);font-family:var(--async-multi-select-empty-font-family);color:var(--async-multi-select-empty-color)}.async-multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--async-multi-select-padding-inline);width:100%;padding-block:var(--async-multi-select-item-padding-block);padding-inline:var(--async-multi-select-padding-inline);font-size:var(--async-multi-select-font-size);font-family:var(--async-multi-select-font-family);color:var(--async-multi-select-color);cursor:pointer;display:flex}.async-multi-select__item:focus-visible,.async-multi-select__item:hover{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__item.async-multi-select__item--selected{font-weight:var(--async-multi-select-item-selected-font-weight)}.async-multi-select__item.async-multi-select__item--active{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__content .async-multi-select__item+.async-multi-select__item,.async-multi-select__content[data-side=bottom] .async-multi-select__item:first-child{border-top:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__content[data-side=top] .async-multi-select__item:last-child{border-bottom:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__item-check{width:var(--checkbox-size);height:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.async-multi-select__item--selected .async-multi-select__item-check{background-color:currentColor}.async-multi-select__item-check-mark{width:var(--checkbox-check-size);height:var(--checkbox-check-size);background-color:var(--async-multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.async-multi-select__item--selected .async-multi-select__item-check-mark{transform:scale(1)}.async-multi-select__item:focus-visible .async-multi-select__item-check-mark,.async-multi-select__item:hover .async-multi-select__item-check-mark,.async-multi-select__item--active .async-multi-select__item-check-mark{background-color:var(--async-multi-select-item-highlighted-bg)}.async-multi-select.async-multi-select--sm{font-size:var(--async-multi-select-sm-font-size);--async-multi-select-height:var(--async-multi-select-sm-height);padding-inline:var(--async-multi-select-sm-padding-inline)}.async-multi-select__content--sm .async-multi-select__item{font-size:var(--async-multi-select-sm-font-size);padding-block:var(--async-multi-select-sm-item-padding-block)}.async-multi-select.async-multi-select--lg{font-size:var(--async-multi-select-lg-font-size);--async-multi-select-height:var(--async-multi-select-lg-height);padding-inline:var(--async-multi-select-lg-padding-inline)}.async-multi-select__content--lg .async-multi-select__item{font-size:var(--async-multi-select-lg-font-size);padding-block:var(--async-multi-select-lg-item-padding-block)}.async-multi-select__positioner{z-index:var(--async-multi-select-content-z-index)}.async-multi-select.async-multi-select--error{border-color:var(--async-multi-select-error-border-color)}

package/dist/async-multi-select.js

@@ -0,0 +1,196 @@
+'use client';
+import './async-multi-select.css';
+import { Icon as e } from "./icon.js";
+import { Spinner as t } from "./spinner.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i, useCallback as a, useEffect as ee, useId as o, useRef as s, useState as c } from "react";
+import { Popover as l } from "@base-ui/react/popover";
+//#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
+function u(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var d = i(function({ onSearch: i, value: d, defaultValue: f = [], onValueChange: p, selectedOptions: te, placeholder: m = "Buscar…", disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: y, name: b, error: x = !1, required: S, onBlur: C, className: w, "aria-label": T, "aria-describedby": ne, removeLabel: re = (e) => `Quitar ${e}`, emptyMessage: E = "Sin resultados", loadingLabel: D = "Buscando…", container: O }, ie) {
+	let [k, A] = c(!1), [j, M] = c(""), [N, P] = c(!1), [F, I] = c([]), [L, R] = c(!1), [z, B] = c(-1), [V, H] = c(f), [U, W] = c([]), G = s(null), K = s(0), q = s(null), J = s(null), Y = o(), ae = o(), X = d === void 0 ? V : d, oe = X.map((e) => te?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
+		value: e,
+		label: e
+	}), Z = (e) => `${ae}-opt-${e}`, Q = a(async (e) => {
+		let t = ++K.current;
+		P(!0), R(!1);
+		try {
+			let n = await i(e);
+			if (t !== K.current) return;
+			I(n), B(-1);
+		} catch {
+			if (t !== K.current) return;
+			I([]), B(-1);
+		} finally {
+			t === K.current && (P(!1), R(!0));
+		}
+	}, [i]);
+	ee(() => () => {
+		K.current += 1, G.current && clearTimeout(G.current);
+	}, []);
+	function se(e) {
+		let t = e.target.value;
+		M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), v);
+	}
+	function ce(e) {
+		h || g || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
+	}
+	function $(e, t) {
+		let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
+		t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), d === void 0 && H(n), p?.(n);
+	}
+	function le(e) {
+		if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
+		else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
+		else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
+		else if (e.key === "Escape") A(!1), M(""), B(-1);
+		else if (e.key === "Tab") A(!1), B(-1);
+		else if (e.key === "Backspace" && j === "" && X.length > 0) {
+			let e = X[X.length - 1];
+			$(e);
+		}
+	}
+	function ue(e, t) {
+		if (!e) {
+			if (t.reason === "outside-press") {
+				let e = t.event?.target;
+				if (e instanceof Node && J.current?.contains(e)) return;
+			}
+			A(!1), M(""), B(-1);
+		}
+	}
+	let de = [
+		"async-multi-select",
+		_ === "md" ? "" : `async-multi-select--${_}`,
+		h ? "async-multi-select--disabled" : "",
+		k ? "async-multi-select--open" : "",
+		x ? "async-multi-select--error" : "",
+		w ?? ""
+	].filter(Boolean).join(" "), fe = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r(l.Root, {
+		open: k,
+		onOpenChange: ue,
+		children: [/* @__PURE__ */ r("div", {
+			ref: J,
+			className: de,
+			"data-popup-open": k || void 0,
+			children: [/* @__PURE__ */ r("div", {
+				className: "async-multi-select__input-area",
+				children: [
+					oe.map((t) => /* @__PURE__ */ r("span", {
+						className: "async-multi-select__pill",
+						children: [/* @__PURE__ */ n("span", {
+							className: "async-multi-select__pill-label",
+							children: t.label
+						}), !h && !g && /* @__PURE__ */ n("button", {
+							type: "button",
+							className: "async-multi-select__pill-remove",
+							"aria-label": re(t.label),
+							tabIndex: -1,
+							onMouseDown: (e) => {
+								e.preventDefault(), $(t.value);
+							},
+							children: /* @__PURE__ */ n(e, {
+								name: "close",
+								size: "xs"
+							})
+						})]
+					}, t.value)),
+					/* @__PURE__ */ n("input", {
+						ref: (e) => {
+							q.current = e, u(ie, e);
+						},
+						id: y,
+						type: "text",
+						className: "async-multi-select__input",
+						value: j,
+						onChange: se,
+						onPointerDown: ce,
+						onKeyDown: le,
+						placeholder: X.length === 0 ? m : void 0,
+						disabled: h,
+						readOnly: g,
+						"aria-label": T,
+						"aria-describedby": ne,
+						"aria-invalid": x || void 0,
+						"aria-required": S || void 0,
+						"aria-expanded": k,
+						"aria-haspopup": "listbox",
+						"aria-controls": k ? Y : void 0,
+						"aria-activedescendant": z >= 0 ? Z(z) : void 0,
+						autoComplete: "off",
+						role: "combobox",
+						"aria-autocomplete": "list",
+						onBlur: C
+					}),
+					b && X.map((e) => /* @__PURE__ */ n("input", {
+						type: "hidden",
+						name: b,
+						value: e
+					}, e))
+				]
+			}), N && /* @__PURE__ */ n(t, {
+				size: "sm",
+				"aria-hidden": !0
+			})]
+		}), /* @__PURE__ */ n(l.Portal, {
+			container: O,
+			children: /* @__PURE__ */ n(l.Positioner, {
+				className: "async-multi-select__positioner",
+				anchor: J,
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ n(l.Popup, {
+					className: fe,
+					initialFocus: !1,
+					finalFocus: !1,
+					children: /* @__PURE__ */ r("div", {
+						role: "listbox",
+						"aria-multiselectable": "true",
+						"aria-label": T ?? m,
+						id: Y,
+						children: [
+							N && /* @__PURE__ */ n("div", {
+								className: "async-multi-select__loading",
+								children: /* @__PURE__ */ n(t, {
+									size: "sm",
+									label: D
+								})
+							}),
+							!N && L && F.length === 0 && /* @__PURE__ */ n("div", {
+								className: "async-multi-select__empty",
+								children: E
+							}),
+							!N && F.map((e, t) => {
+								let i = X.includes(e.value), a = z === t;
+								return /* @__PURE__ */ r("div", {
+									id: Z(t),
+									role: "option",
+									"aria-selected": i,
+									className: [
+										"async-multi-select__item",
+										i ? "async-multi-select__item--selected" : "",
+										a ? "async-multi-select__item--active" : ""
+									].filter(Boolean).join(" "),
+									onPointerDown: (e) => e.preventDefault(),
+									onClick: () => {
+										$(e.value, e), q.current?.focus();
+									},
+									children: [/* @__PURE__ */ n("span", {
+										className: "async-multi-select__item-check",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ n("span", { className: "async-multi-select__item-check-mark" })
+									}), /* @__PURE__ */ n("span", { children: e.label })]
+								}, e.value);
+							})
+						]
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { d as AsyncMultiSelect };

package/dist/async-select-field.css

@@ -0,0 +1 @@
+.async-select-field{gap:var(--async-select-field-gap);flex-direction:column;display:flex}.async-select-field__helper{font-family:var(--async-select-field-helper-font-family);font-size:var(--async-select-field-helper-font-size);font-weight:var(--async-select-field-helper-font-weight);line-height:var(--async-select-field-helper-line-height);color:var(--async-select-field-helper-color)}

package/dist/async-select-field.js

@@ -0,0 +1,57 @@
+'use client';
+import './async-select-field.css';
+import { AsyncSelect as e } from "./async-select.js";
+import { n as t } from "./_shared/form-size.js";
+import { ErrorText as n } from "./error-text.js";
+import { Label as r } from "./label.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/AsyncSelectField/AsyncSelectField.tsx
+var l = s(function({ id: s, label: l, labelHidden: u, onSearch: d, value: f, onValueChange: p, selectedOption: m, placeholder: h, name: g, disabled: _, readOnly: v, size: y, debounceMs: b, required: x, error: S = !1, errorMessage: C, helperText: w, className: T, emptyMessage: E, loadingLabel: D, clearLabel: O, container: k, onBlur: A }, j) {
+	let M = i(u), N = t(y), P = c(), F = s ?? P, I = C ? `${F}-error` : void 0, L = w ? `${F}-helper` : void 0, R = [I, L].filter(Boolean).join(" ") || void 0, z = S || !!C;
+	return /* @__PURE__ */ o("div", {
+		className: ["async-select-field", T].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(r, {
+				htmlFor: F,
+				hidden: M,
+				size: N,
+				children: l
+			}),
+			/* @__PURE__ */ a(e, {
+				ref: j,
+				id: F,
+				name: g,
+				onSearch: d,
+				value: f,
+				onValueChange: p,
+				selectedOption: m,
+				placeholder: h,
+				disabled: _,
+				readOnly: v,
+				size: N,
+				debounceMs: b,
+				required: x,
+				error: z,
+				emptyMessage: E,
+				loadingLabel: D,
+				clearLabel: O,
+				container: k,
+				"aria-describedby": R,
+				onBlur: A
+			}),
+			C && /* @__PURE__ */ a(n, {
+				id: I,
+				children: C
+			}),
+			w && /* @__PURE__ */ a("span", {
+				id: L,
+				className: "async-select-field__helper",
+				children: w
+			})
+		]
+	});
+});
+//#endregion
+export { l as AsyncSelectField };

package/dist/async-select.css

@@ -0,0 +1 @@
+.async-select{align-items:center;gap:var(--async-select-content-gap);block-size:var(--async-select-height);padding-block:0;padding-inline:var(--async-select-padding-inline);font-family:var(--async-select-font-family);font-size:var(--async-select-font-size);line-height:var(--async-select-line-height);font-weight:var(--async-select-font-weight);color:var(--async-select-color);background-color:var(--async-select-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-border-color);border-radius:var(--async-select-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.async-select:focus-within{outline:var(--async-select-focus-ring-width) solid var(--async-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-select-focus-ring-width) + var(--async-select-border-width)))}.async-select.async-select--disabled{opacity:.5;cursor:var(--async-select-disabled-cursor);pointer-events:none}.async-select__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-select__input::placeholder{color:var(--async-select-placeholder-color)}.async-select__input:disabled{cursor:var(--async-select-disabled-cursor)}.async-select__clear{all:unset;cursor:pointer;line-height:1;font-size:var(--async-select-font-size);opacity:.7;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.async-select__clear:hover{opacity:1}.async-select__content{background-color:var(--async-select-content-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-content-border-color);min-width:var(--anchor-width);max-height:var(--async-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-select__content[data-side=bottom]{border-top:none}.async-select__content[data-side=top]{border-bottom:none}.async-select__loading{padding-block:var(--async-select-loading-padding-block);padding-inline:var(--async-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-select__empty{padding-block:var(--async-select-empty-padding-block);padding-inline:var(--async-select-empty-padding-inline);font-size:var(--async-select-empty-font-size);font-family:var(--async-select-empty-font-family);color:var(--async-select-empty-color)}.async-select__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--async-select-item-padding-block);padding-inline:var(--async-select-padding-inline);font-size:var(--async-select-font-size);font-family:var(--async-select-font-family);color:var(--async-select-color);cursor:pointer;align-items:center;display:flex}.async-select__item:focus-visible,.async-select__item:hover{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__item.async-select__item--selected{font-weight:var(--async-select-item-selected-font-weight)}.async-select__item.async-select__item--active{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__content .async-select__item+.async-select__item,.async-select__content[data-side=bottom] .async-select__item:first-child{border-top:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select__content[data-side=top] .async-select__item:last-child{border-bottom:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select.async-select--sm{font-size:var(--async-select-sm-font-size);--async-select-height:var(--async-select-sm-height);padding-inline:var(--async-select-sm-padding-inline)}.async-select__content--sm .async-select__item{font-size:var(--async-select-sm-font-size);padding-block:var(--async-select-sm-item-padding-block)}.async-select.async-select--lg{font-size:var(--async-select-lg-font-size);--async-select-height:var(--async-select-lg-height);padding-inline:var(--async-select-lg-padding-inline)}.async-select__content--lg .async-select__item{font-size:var(--async-select-lg-font-size);padding-block:var(--async-select-lg-item-padding-block)}.async-select__positioner{z-index:var(--async-select-content-z-index)}.async-select.async-select--error{border-color:var(--async-select-error-border-color)}

package/dist/async-select.js

@@ -0,0 +1,172 @@
+'use client';
+import './async-select.css';
+import { Icon as e } from "./icon.js";
+import { Spinner as t } from "./spinner.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i, useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { Popover as u } from "@base-ui/react/popover";
+//#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
+function ee(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var d = i(function({ onSearch: i, value: d, onValueChange: f, selectedOption: p, placeholder: m = "Buscar…", disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: y, name: b, error: x = !1, required: te, onBlur: S, className: C, "aria-label": w, "aria-describedby": T, emptyMessage: ne = "Sin resultados", loadingLabel: re = "Buscando…", clearLabel: E = "Limpiar selección", container: D }, ie) {
+	let [O, k] = l(!1), [A, j] = l(""), [M, N] = l(!1), [P, F] = l([]), [I, L] = l(!1), [R, z] = l(-1), [B, V] = l(null), [H, U] = l(null), W = c(null), G = c(0), K = c(null), q = c(null), J = s(), ae = s(), Y = d === void 0 ? B : d, oe = p === void 0 ? H : p, X = (e) => `${ae}-opt-${e}`, Z = a(async (e) => {
+		let t = ++G.current;
+		N(!0), L(!1);
+		try {
+			let n = await i(e);
+			if (t !== G.current) return;
+			F(n), z(-1);
+		} catch {
+			if (t !== G.current) return;
+			F([]), z(-1);
+		} finally {
+			t === G.current && (N(!1), L(!0));
+		}
+	}, [i]);
+	o(() => () => {
+		G.current += 1, W.current && clearTimeout(W.current);
+	}, []);
+	function se(e) {
+		let t = e.target.value;
+		j(t), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(t), v);
+	}
+	function ce(e) {
+		h || g || O || (e.preventDefault(), K.current?.focus(), z(-1), j(""), F([]), L(!1), k(!0), Z(""));
+	}
+	function Q(e) {
+		d === void 0 && (V(e.value), U(e)), f?.(e.value, e), k(!1), z(-1), j("");
+	}
+	function $() {
+		d === void 0 && (V(null), U(null)), f?.(null, null), j(""), F([]), L(!1), K.current?.focus();
+	}
+	function le(e) {
+		e.stopPropagation(), $();
+	}
+	function ue(e) {
+		e.key === "ArrowDown" ? (e.preventDefault(), O ? z((e) => Math.min(e + 1, P.length - 1)) : (k(!0), Z(A))) : e.key === "ArrowUp" ? (e.preventDefault(), z((e) => Math.max(e - 1, -1))) : e.key === "Enter" && R >= 0 && P[R] ? (e.preventDefault(), Q(P[R])) : e.key === "Escape" ? (k(!1), j(""), z(-1)) : e.key === "Tab" ? (k(!1), z(-1)) : (e.key === "Backspace" || e.key === "Delete") && A === "" && Y && !h && !g ? (e.preventDefault(), $()) : !O && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), j(e.key), k(!0), F([]), L(!1), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(e.key), v));
+	}
+	function de(e, t) {
+		if (!e) {
+			if (t.reason === "outside-press") {
+				let e = t.event?.target;
+				if (e instanceof Node && q.current?.contains(e)) return;
+			}
+			k(!1), j(""), z(-1);
+		}
+	}
+	let fe = O ? A : oe?.label ?? "", pe = [
+		"async-select",
+		_ === "md" ? "" : `async-select--${_}`,
+		h ? "async-select--disabled" : "",
+		x ? "async-select--error" : "",
+		C ?? ""
+	].filter(Boolean).join(" "), me = ["async-select__content", _ === "md" ? "" : `async-select__content--${_}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r(u.Root, {
+		open: O,
+		onOpenChange: de,
+		children: [/* @__PURE__ */ r("div", {
+			ref: q,
+			className: pe,
+			"data-popup-open": O || void 0,
+			children: [
+				/* @__PURE__ */ n("input", {
+					ref: (e) => {
+						K.current = e, ee(ie, e);
+					},
+					id: y,
+					type: "text",
+					className: "async-select__input",
+					value: fe,
+					onChange: se,
+					onPointerDown: ce,
+					onKeyDown: ue,
+					placeholder: m,
+					disabled: h,
+					readOnly: g,
+					"aria-label": w,
+					"aria-describedby": T,
+					"aria-invalid": x || void 0,
+					"aria-required": te || void 0,
+					"aria-expanded": O,
+					"aria-haspopup": "listbox",
+					"aria-controls": O ? J : void 0,
+					"aria-activedescendant": R >= 0 ? X(R) : void 0,
+					autoComplete: "off",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					onBlur: S
+				}),
+				b && /* @__PURE__ */ n("input", {
+					type: "hidden",
+					name: b,
+					value: Y ?? ""
+				}),
+				M && /* @__PURE__ */ n(t, {
+					size: "sm",
+					"aria-hidden": !0
+				}),
+				!M && Y && !h && !g && /* @__PURE__ */ n("button", {
+					type: "button",
+					className: "async-select__clear",
+					"aria-label": E,
+					tabIndex: -1,
+					onMouseDown: le,
+					children: /* @__PURE__ */ n(e, {
+						name: "close",
+						size: "xs"
+					})
+				})
+			]
+		}), /* @__PURE__ */ n(u.Portal, {
+			container: D,
+			children: /* @__PURE__ */ n(u.Positioner, {
+				className: "async-select__positioner",
+				anchor: q,
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ n(u.Popup, {
+					className: me,
+					initialFocus: !1,
+					finalFocus: !1,
+					children: /* @__PURE__ */ r("div", {
+						role: "listbox",
+						"aria-label": w ?? m,
+						id: J,
+						children: [
+							M && /* @__PURE__ */ n("div", {
+								className: "async-select__loading",
+								children: /* @__PURE__ */ n(t, {
+									size: "sm",
+									label: re
+								})
+							}),
+							!M && I && P.length === 0 && /* @__PURE__ */ n("div", {
+								className: "async-select__empty",
+								children: ne
+							}),
+							!M && P.map((e, t) => {
+								let r = e.value === Y, i = R === t;
+								return /* @__PURE__ */ n("div", {
+									id: X(t),
+									role: "option",
+									"aria-selected": r,
+									className: [
+										"async-select__item",
+										r ? "async-select__item--selected" : "",
+										i ? "async-select__item--active" : ""
+									].filter(Boolean).join(" "),
+									onPointerDown: (e) => e.preventDefault(),
+									onClick: () => Q(e),
+									children: e.label
+								}, e.value);
+							})
+						]
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { d as AsyncSelect };

package/dist/avatar-upload.css

@@ -0,0 +1 @@
+.avatar-upload{align-items:flex-end;gap:var(--avatar-upload-gap);flex-wrap:wrap;display:flex}.avatar-upload__target{cursor:pointer;border-radius:var(--avatar-border-radius);outline:var(--avatar-upload-ring-width) dashed transparent;outline-offset:var(--avatar-upload-ring-offset);transition:outline-color var(--avatar-upload-transition-duration) var(--avatar-upload-transition-easing);display:inline-flex;position:relative}.avatar-upload.avatar-upload--square .avatar-upload__target{border-radius:var(--avatar-border-radius-square)}.avatar-upload.avatar-upload--armed .avatar-upload__target{outline-color:var(--avatar-upload-ring-color)}.avatar-upload.avatar-upload--over .avatar-upload__target{outline-style:solid}.avatar-upload.avatar-upload--inert .avatar-upload__target{cursor:var(--input-disabled-cursor);pointer-events:none}.avatar-upload__overlay{border-radius:inherit;color:var(--avatar-upload-overlay-icon-color);background-color:var(--avatar-upload-overlay-bg);opacity:0;pointer-events:none;transition:opacity var(--avatar-upload-transition-duration) var(--avatar-upload-transition-easing);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.avatar-upload.avatar-upload--over .avatar-upload__overlay{opacity:var(--avatar-upload-overlay-opacity)}.avatar-upload__body{align-items:flex-start;gap:var(--avatar-upload-body-gap);flex-direction:column;display:flex}.avatar-upload__input{display:none}.avatar-upload__hint{font-family:var(--avatar-upload-hint-font-family);font-size:var(--avatar-upload-hint-font-size);font-weight:var(--avatar-upload-hint-font-weight);line-height:var(--avatar-upload-hint-line-height);color:var(--avatar-upload-hint-color)}