@profitliga/ui 2.0.3 → 2.0.4

package/dist/components/v2/ConfirmDialog/ConfirmDialog.types.d.ts

@@ -1,5 +1,5 @@
 import { Component, VNode } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 import { AlertDialogVariant } from '../AlertDialog/AlertDialog.types';
 import { ButtonProps } from '../Button/Button.types';
 export type ConfirmVariant = AlertDialogVariant;
@@ -37,7 +37,7 @@ export interface ConfirmService {
     close: () => void;
 }
 export interface ConfirmDialogProps {
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
     testId?: string;
 }

package/dist/components/v2/ConfirmDialog/ConfirmDialog.vue.d.ts

@@ -1,8 +1,8 @@
 import { ConfirmDialogProps } from './ConfirmDialog.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 declare const _default: DefineComponent<ConfirmDialogProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ConfirmDialogProps> & Readonly<{}>, {
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     testId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/v2/ConfirmDialog/ConfirmDialog.vue.js

@@ -7,11 +7,11 @@ import { registerConfirmDialog as H, confirmState as p } from "./useConfirm.js";
 const Z = /* @__PURE__ */ P({
   __name: "ConfirmDialog",
   props: {
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     testId: { default: void 0 }
   },
   setup(f) {
-    const _ = f, C = G(() => _.testId), { isActive: j, unregister: N } = H(), m = B(null);
+    const _ = f, C = G(() => _.testId), { isActive: j, unregister: S } = H(), m = B(null);
     let b;
     R(p, (t) => {
       if (clearTimeout(b), t) {
@@ -22,7 +22,7 @@ const Z = /* @__PURE__ */ P({
         m.value = null;
       }, q);
     });
-    const e = n(() => p.value ?? m.value), O = n(() => p.value !== null), S = n(
+    const e = n(() => p.value ?? m.value), N = n(() => p.value !== null), O = n(
       () => !!(e.value?.content || e.value?.description)
     ), r = B(!1), u = B(!1), y = n(() => r.value || u.value), g = n(() => {
       const { label: t, enabled: s, ...a } = e.value?.acceptProps ?? {};
@@ -80,10 +80,10 @@ const Z = /* @__PURE__ */ P({
       t || D();
     }
     return U(() => {
-      clearTimeout(b), N();
+      clearTimeout(b), S();
     }), (t, s) => l(j) ? (o(), c(l(K), {
       key: 0,
-      open: O.value,
+      open: N.value,
       variant: e.value?.variant,
       width: e.value?.width ?? 500,
       "breakpoint-mobile": f.breakpointMobile,
@@ -117,7 +117,7 @@ const Z = /* @__PURE__ */ P({
         ]),
         key: "0"
       } : void 0,
-      S.value ? {
+      O.value ? {
         name: "default",
         fn: i(() => [
           e.value?.content ? (o(), c(A(e.value?.content), { key: 0 })) : (o(), z(F, { key: 1 }, [

package/dist/components/v2/DatePicker/DatePicker.css

@@ -1 +1 @@
-.date-picker-field[data-v-e2156ddc]{max-width:100%;height:var(--input-height);background-color:var(--theme-neutral-0);border:1px solid var(--input-border-color);padding:var(--input-padding);cursor:pointer;border-radius:8px;justify-content:flex-start;align-items:center;gap:4px;display:flex;overflow:hidden}.date-picker-field[data-v-e2156ddc]:hover{border-color:var(--input-border-color-hover)}.date-picker-field__main[data-v-e2156ddc]{min-width:0;height:100%;font:inherit;text-align:left;cursor:inherit;background:0 0;border:none;flex:auto;justify-content:flex-start;align-items:center;gap:4px;padding:0;display:flex}.date-picker-field__main[data-v-e2156ddc]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:-2px}.date-picker-field__main[data-v-e2156ddc]:disabled{cursor:not-allowed}.date-picker-field--open[data-v-e2156ddc]{border-color:var(--input-border-color-focus)}.date-picker-field--disabled[data-v-e2156ddc]{cursor:not-allowed;opacity:.6}.date-picker-field--small[data-v-e2156ddc]{height:var(--input-height-small)}.date-picker-field--large[data-v-e2156ddc]{height:var(--input-height-large)}.date-picker-field__icon[data-v-e2156ddc]{color:var(--theme-neutral-icon-caption);flex:none}.date-picker-field__placeholder[data-v-e2156ddc],.date-picker-field__value[data-v-e2156ddc]{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.date-picker-field__placeholder[data-v-e2156ddc]{font-size:var(--input-font-size);color:var(--input-color-placeholder)}.date-picker-field__value[data-v-e2156ddc]{font-size:var(--input-font-size);color:var(--theme-neutral-text-body)}.date-picker-field__clear[data-v-e2156ddc]{width:16px;height:16px;color:var(--color-neutral-text-caption);cursor:pointer;background:0 0;border:none;flex:none;margin-left:auto;padding:0}.date-picker-field__clear[data-v-e2156ddc]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.date-picker-field__clear svg[data-v-e2156ddc]{width:100%;height:100%}.date-picker-field__clear[data-v-e2156ddc]:hover{color:var(--color-error-500)}.date-picker-calendar[data-v-e2156ddc]{padding:16px}.date-picker-calendar__header[data-v-e2156ddc]{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.date-picker-calendar__title[data-v-e2156ddc]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.date-picker-calendar__close[data-v-e2156ddc]{width:24px;height:24px;color:var(--theme-neutral-icon-secondary);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-left:auto;padding:0;display:flex}.date-picker-calendar__close[data-v-e2156ddc]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.date-picker-calendar__close[data-v-e2156ddc]:hover{color:var(--theme-neutral-icon-primary)}.date-picker-calendar__footer[data-v-e2156ddc]{flex-direction:column;align-items:center;gap:12px;margin-top:16px;display:flex}.date-picker-calendar__summary[data-v-e2156ddc]{color:var(--theme-primary-500);text-align:center;margin:0;font-size:.9375rem;font-weight:500}
+.date-picker-field[data-v-b59dbb47]{max-width:100%;height:var(--input-height);background-color:var(--theme-neutral-0);border:1px solid var(--input-border-color);padding:var(--input-padding);cursor:pointer;border-radius:8px;justify-content:flex-start;align-items:center;gap:4px;display:flex;overflow:hidden}.date-picker-field[data-v-b59dbb47]:hover{border-color:var(--input-border-color-hover)}.date-picker-field__main[data-v-b59dbb47]{min-width:0;height:100%;font:inherit;text-align:left;cursor:inherit;background:0 0;border:none;flex:auto;justify-content:flex-start;align-items:center;gap:4px;padding:0;display:flex}.date-picker-field__main[data-v-b59dbb47]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:-2px}.date-picker-field__main[data-v-b59dbb47]:disabled{cursor:not-allowed}.date-picker-field--open[data-v-b59dbb47]{border-color:var(--input-border-color-focus)}.date-picker-field--disabled[data-v-b59dbb47]{cursor:not-allowed;opacity:.6}.date-picker-field--small[data-v-b59dbb47]{height:var(--input-height-small)}.date-picker-field--large[data-v-b59dbb47]{height:var(--input-height-large)}.date-picker-field__icon[data-v-b59dbb47]{color:var(--theme-neutral-icon-caption);flex:none}.date-picker-field__placeholder[data-v-b59dbb47],.date-picker-field__value[data-v-b59dbb47]{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.date-picker-field__placeholder[data-v-b59dbb47]{font-size:var(--input-font-size);color:var(--input-color-placeholder)}.date-picker-field__value[data-v-b59dbb47]{font-size:var(--input-font-size);color:var(--theme-neutral-text-body)}.date-picker-field__clear[data-v-b59dbb47]{width:16px;height:16px;color:var(--color-neutral-text-caption);cursor:pointer;background:0 0;border:none;flex:none;margin-left:auto;padding:0}.date-picker-field__clear[data-v-b59dbb47]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.date-picker-field__clear svg[data-v-b59dbb47]{width:100%;height:100%}.date-picker-field__clear[data-v-b59dbb47]:hover{color:var(--color-error-500)}.date-picker-calendar[data-v-b59dbb47]{padding:16px}.date-picker-calendar__header[data-v-b59dbb47]{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.date-picker-calendar__title[data-v-b59dbb47]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.date-picker-calendar__close[data-v-b59dbb47]{width:24px;height:24px;color:var(--theme-neutral-icon-secondary);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-left:auto;padding:0;display:flex}.date-picker-calendar__close[data-v-b59dbb47]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.date-picker-calendar__close[data-v-b59dbb47]:hover{color:var(--theme-neutral-icon-primary)}.date-picker-calendar__footer[data-v-b59dbb47]{flex-direction:column;align-items:center;gap:12px;margin-top:16px;display:flex}.date-picker-calendar__summary[data-v-b59dbb47]{color:var(--theme-primary-500);text-align:center;margin:0;font-size:.9375rem;font-weight:500}

package/dist/components/v2/DatePicker/DatePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { CalendarDate } from '@internationalized/date';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 import { CalendarRangeValue, CalendarWeekdayFormat, CalendarWeekStartsOn } from '../Calendar';
 export type { CalendarRangeValue };
 export type DatePickerModelValue = CalendarDate | CalendarRangeValue | undefined;
@@ -25,7 +25,7 @@ export interface DatePickerProps {
     format?: string;
     /** Разделитель между границами диапазона в поле */
     rangeSeparator?: string;
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     /**
      * Доступное имя поля. По умолчанию берётся `placeholder`; выбранное
      * значение подставляется к нему автоматически.

package/dist/components/v2/DatePicker/DatePicker.vue.d.ts

@@ -2,7 +2,7 @@ import { CalendarDate } from '@internationalized/date';
 import { CalendarRangeValue, DatePickerProps, DatePickerLabels } from './DatePicker.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { CalendarWeekStartsOn, CalendarWeekdayFormat } from '..';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 type __VLS_Props = DatePickerProps;
 type __VLS_PublicProps = {
     modelValue?: CalendarDate | CalendarRangeValue | undefined;
@@ -26,7 +26,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
     numberOfMonths: number;
     isDateDisabled: (date: CalendarDate) => boolean;
     range: boolean;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     format: string;
     showClear: boolean;
     testId: string;

package/dist/components/v2/DatePicker/DatePicker.vue.js

@@ -2,7 +2,7 @@ import './DatePicker.css';
 import o from "./DatePicker.vue2.js";
 /* empty css                */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e2156ddc"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b59dbb47"]]);
 export {
-  c as default
+  m as default
 };

package/dist/components/v2/DatePicker/DatePicker.vue2.js

@@ -1,22 +1,22 @@
-import { defineComponent as A, useId as F, computed as d, useModel as Y, ref as j, watch as E, openBlock as c, createBlock as R, unref as l, withCtx as w, createElementVNode as f, mergeProps as b, createElementBlock as v, toDisplayString as k, createVNode as p, createCommentVNode as V, createTextVNode as U, normalizeStyle as X, normalizeClass as H, withModifiers as W, mergeModels as Z } from "vue";
+import { defineComponent as A, useId as F, computed as i, useModel as Y, ref as j, watch as E, openBlock as c, createBlock as R, unref as l, withCtx as w, createElementVNode as f, mergeProps as b, createElementBlock as v, toDisplayString as p, createVNode as k, createCommentVNode as V, createTextVNode as U, normalizeStyle as X, normalizeClass as H, withModifiers as W, mergeModels as Z } from "vue";
 import { getLocalTimeZone as $ } from "@internationalized/date";
 import { X as q, CalendarIcon as G, CircleX as J } from "@lucide/vue";
-import { breakpoints as K } from "../../../utils/breakpoints.util.js";
 import { dayjs as O } from "../../../utils/dayjs.util.js";
-import Q from "../Button/Button.vue.js";
-import _ from "../Calendar/Calendar.vue.js";
-import ee from "../Popover/Popover.vue.js";
+import K from "../Button/Button.vue.js";
+import Q from "../Calendar/Calendar.vue.js";
+import _ from "../Popover/Popover.vue.js";
+import { useIsMobile as ee } from "../shared/useIsMobile.util.js";
 import { useTestId as ae } from "../shared/useTestId.util.js";
 const te = ["disabled", "aria-label"], le = {
   key: 0,
   class: "date-picker-field__placeholder"
-}, re = {
+}, oe = {
   key: 1,
   class: "date-picker-field__value"
-}, oe = ["aria-label"], de = {
+}, re = ["aria-label"], ie = {
   key: 0,
   class: "date-picker-calendar__header"
-}, ie = ["aria-label"], ne = {
+}, de = ["aria-label"], ne = {
   key: 1,
   class: "date-picker-calendar__footer"
 }, se = {
@@ -42,7 +42,7 @@ const te = ["disabled", "aria-label"], le = {
     pagedNavigation: { type: Boolean, default: !0 },
     format: { default: "DD.MM.YYYY" },
     rangeSeparator: { default: " – " },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     label: { default: void 0 },
     labels: { default: void 0 },
     testId: { default: void 0 }
@@ -54,48 +54,48 @@ const te = ["disabled", "aria-label"], le = {
   }),
   emits: ["update:modelValue"],
   setup(a) {
-    const t = a, m = ae(() => t.testId), C = `date-picker-title-${F()}`, y = d(() => t.labels?.title ?? "Выбрать дату"), n = Y(a, "modelValue");
-    function i(e) {
+    const t = a, m = ae(() => t.testId), S = `date-picker-title-${F()}`, y = i(() => t.labels?.title ?? "Выбрать дату"), n = Y(a, "modelValue");
+    function d(e) {
       return !!e && typeof e == "object" && !Array.isArray(e) && "start" in e;
     }
-    const s = j(!1), u = K.smaller(t.breakpointMobile), x = d(
+    const s = j(!1), u = ee(t.breakpointMobile), x = i(
       () => Math.max(t.numberOfMonths, ue)
-    ), B = d(
+    ), B = i(
       () => t.width === "full" ? "100%" : `${t.width}px`
-    ), I = d(() => t.numberOfMonths <= 1 ? 320 : t.numberOfMonths * 276 + (t.numberOfMonths - 1) * 24 + 32);
+    ), I = i(() => t.numberOfMonths <= 1 ? 320 : t.numberOfMonths * 276 + (t.numberOfMonths - 1) * 24 + 32);
     function g(e) {
       return O(e.toDate($())).format(t.format);
     }
-    const S = d(() => {
+    const C = i(() => {
       const e = n.value;
-      return t.range ? i(e) && (!!e.start || !!e.end) : !!e && !i(e);
-    }), h = d(() => {
+      return t.range ? d(e) && (!!e.start || !!e.end) : !!e && !d(e);
+    }), h = i(() => {
       const e = n.value;
       if (t.range) {
-        if (!i(e) || !e.start && !e.end) return "";
-        const r = e.start ? g(e.start) : "…", o = e.end ? g(e.end) : "…";
-        return `${r}${t.rangeSeparator}${o}`;
+        if (!d(e) || !e.start && !e.end) return "";
+        const o = e.start ? g(e.start) : "…", r = e.end ? g(e.end) : "…";
+        return `${o}${t.rangeSeparator}${r}`;
       }
-      return e && !i(e) ? g(e) : "";
-    }), N = d(() => {
+      return e && !d(e) ? g(e) : "";
+    }), N = i(() => {
       const e = t.label ?? t.placeholder;
       return h.value ? `${e}: ${h.value}` : e;
     });
     function M(e) {
       return O(e.toDate($())).format("D MMMM");
     }
-    const z = d(() => {
+    const z = i(() => {
       const e = n.value;
       if (t.range) {
-        if (!i(e) || !e.start && !e.end) return "";
-        const r = e.start ? M(e.start) : "…", o = e.end ? M(e.end) : "…";
-        return `Выбранный диапазон: ${r} — ${o}`;
+        if (!d(e) || !e.start && !e.end) return "";
+        const o = e.start ? M(e.start) : "…", r = e.end ? M(e.end) : "…";
+        return `Выбранный диапазон: ${o} — ${r}`;
       }
-      return e && !i(e) ? `Выбранная дата: ${M(e)}` : "";
-    }), L = d(() => {
+      return e && !d(e) ? `Выбранная дата: ${M(e)}` : "";
+    }), L = i(() => {
       const e = n.value;
-      return t.range ? i(e) ? e.start ?? e.end : void 0 : e && !i(e) ? e : void 0;
-    }), D = d({
+      return t.range ? d(e) ? e.start ?? e.end : void 0 : e && !d(e) ? e : void 0;
+    }), D = i({
       get: () => n.value,
       set: (e) => {
         n.value = Array.isArray(e) ? e[0] : e;
@@ -110,24 +110,24 @@ const te = ["disabled", "aria-label"], le = {
     return E(n, (e) => {
       if (u.value) {
         if (t.range) {
-          i(e) && e.start && e.end && (s.value = !1);
+          d(e) && e.start && e.end && (s.value = !1);
           return;
         }
         e && (s.value = !1);
       }
-    }), (e, r) => (c(), R(l(ee), {
+    }), (e, o) => (c(), R(l(_), {
       open: s.value,
-      "onUpdate:open": r[3] || (r[3] = (o) => s.value = o),
+      "onUpdate:open": o[3] || (o[3] = (r) => s.value = r),
       side: "bottom",
       align: "start",
       arrow: !1,
       width: I.value,
       "breakpoint-mobile": a.breakpointMobile,
       label: l(u) ? void 0 : y.value,
-      "labelled-by": l(u) ? C : void 0,
+      "labelled-by": l(u) ? S : void 0,
       "test-id": a.testId
     }, {
-      trigger: w(({ props: o }) => [
+      trigger: w(({ props: r }) => [
         f("div", {
           class: H(["date-picker-field", [
             `date-picker-field--${a.size}`,
@@ -144,15 +144,15 @@ const te = ["disabled", "aria-label"], le = {
             class: "date-picker-field__main",
             disabled: a.disabled,
             "aria-label": N.value
-          }, { ...o, ...l(m)("field") }), [
-            p(l(G), {
+          }, { ...r, ...l(m)("field") }), [
+            k(l(G), {
               class: "date-picker-field__icon",
               size: 18,
               "aria-hidden": "true"
             }),
-            h.value ? (c(), v("span", re, k(h.value), 1)) : (c(), v("span", le, k(a.placeholder), 1))
+            h.value ? (c(), v("span", oe, p(h.value), 1)) : (c(), v("span", le, p(a.placeholder), 1))
           ], 16, te),
-          a.showClear && S.value ? (c(), v("button", b({
+          a.showClear && C.value ? (c(), v("button", b({
             key: 0,
             type: "button",
             class: "date-picker-field__clear",
@@ -160,30 +160,30 @@ const te = ["disabled", "aria-label"], le = {
           }, l(m)("clear"), {
             onClick: W(T, ["stop"])
           }), [
-            p(l(J))
-          ], 16, oe)) : V("", !0)
+            k(l(J))
+          ], 16, re)) : V("", !0)
         ], 6)
       ]),
       default: w(() => [
         f("div", b({ class: "date-picker-calendar" }, l(m)("calendar")), [
-          l(u) ? (c(), v("div", de, [
+          l(u) ? (c(), v("div", ie, [
             f("span", {
-              id: C,
+              id: S,
               class: "date-picker-calendar__title"
-            }, k(y.value), 1),
+            }, p(y.value), 1),
             f("button", b({
               type: "button",
               class: "date-picker-calendar__close",
               "aria-label": a.labels?.close ?? "Закрыть"
             }, l(m)("close"), {
-              onClick: r[0] || (r[0] = (o) => s.value = !1)
+              onClick: o[0] || (o[0] = (r) => s.value = !1)
             }), [
-              p(l(q), { size: 20 })
-            ], 16, ie)
+              k(l(q), { size: 20 })
+            ], 16, de)
           ])) : V("", !0),
-          p(l(_), {
+          k(l(Q), {
             modelValue: D.value,
-            "onUpdate:modelValue": r[1] || (r[1] = (o) => D.value = o),
+            "onUpdate:modelValue": o[1] || (o[1] = (r) => D.value = r),
             range: a.range,
             locale: a.locale,
             "week-starts-on": a.weekStartsOn,
@@ -198,16 +198,16 @@ const te = ["disabled", "aria-label"], le = {
             "default-placeholder": L.value,
             "test-id": a.testId
           }, null, 8, ["modelValue", "range", "locale", "week-starts-on", "weekday-format", "number-of-months", "paged-navigation", "scrollable", "min-value", "max-value", "is-date-disabled", "disabled", "default-placeholder", "test-id"]),
-          !l(u) && S.value ? (c(), v("div", ne, [
-            f("p", se, k(z.value), 1),
-            p(l(Q), b({
+          !l(u) && C.value ? (c(), v("div", ne, [
+            f("p", se, p(z.value), 1),
+            k(l(K), b({
               variant: "success",
               full: ""
             }, l(m)("submit"), {
-              onClick: r[2] || (r[2] = (o) => s.value = !1)
+              onClick: o[2] || (o[2] = (r) => s.value = !1)
             }), {
               default: w(() => [
-                U(k(y.value), 1)
+                U(p(y.value), 1)
               ]),
               _: 1
             }, 16)

package/dist/components/v2/Divider/Divider.types.d.ts

@@ -15,6 +15,14 @@ export interface DividerProps {
     align?: DividerAlign;
     /** Толщина линии в пикселях. */
     thickness?: number;
+    /**
+     * Отступы над и под линией.
+     *
+     * Задаются как `margin-block` в scoped-стилях компонента, а у них
+     * специфичность выше (`[data-v-*]`), чем у одиночного класса. Поэтому
+     * `my-*` и прочие утилиты Tailwind снаружи разделитель не подвинут —
+     * отступ нужно менять этим пропом. Не баг, но встречают неожиданно.
+     */
     spacing?: DividerSpacing;
     /** Цвет линии. Любое значение, допустимое в CSS. */
     color?: string;

package/dist/components/v2/DropdownMenu/DropdownMenu.types.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 import { PopoverAlign, PopoverSide } from '../Popover';
 export interface DropdownMenuItemData {
     type?: 'item';
@@ -29,7 +29,7 @@ export interface DropdownMenuProps {
     alignOffset?: number;
     arrow?: boolean;
     zIndex?: number | 'auto';
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     disableOutsidePointerEvents?: boolean;
     /**
      * Доступное имя меню (`aria-label`) — скринридер объявляет его при

package/dist/components/v2/DropdownMenu/DropdownMenu.vue.d.ts

@@ -1,7 +1,7 @@
 import { DropdownMenuItemData, DropdownMenuProps } from './DropdownMenu.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { PopoverSide, PopoverAlign } from '..';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 type __VLS_Props = DropdownMenuProps;
 type __VLS_PublicProps = {
     'open'?: boolean;
@@ -42,7 +42,7 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
     sideOffset: number;
     align: PopoverAlign;
     alignOffset: number;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     arrow: boolean;
     testId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {

package/dist/components/v2/DropdownMenu/DropdownMenu.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as F, useModel as q, useTemplateRef as N, ref as U, useId as V, computed as H, watch as j, openBlock as l, createBlock as O, unref as f, withCtx as M, createElementVNode as B, mergeProps as b, createElementBlock as d, Fragment as I, renderList as P, toDisplayString as S, createCommentVNode as $, resolveDynamicComponent as G, renderSlot as J, normalizeProps as L, guardReactiveProps as Q, mergeModels as C, nextTick as W } from "vue";
+import { defineComponent as F, useModel as q, useTemplateRef as N, ref as U, useId as V, computed as H, watch as j, openBlock as l, createBlock as O, unref as f, withCtx as M, createElementVNode as B, mergeProps as b, createElementBlock as d, Fragment as I, renderList as S, toDisplayString as P, createCommentVNode as $, resolveDynamicComponent as G, renderSlot as J, normalizeProps as L, guardReactiveProps as Q, mergeModels as C, nextTick as W } from "vue";
 import X from "../Popover/Popover.vue.js";
 import { useTestId as Y } from "../shared/useTestId.util.js";
 const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["disabled", "tabindex", "data-menu-index", "onClick", "onMouseenter"], oe = { class: "dropdown-menu__item-label" }, se = /* @__PURE__ */ F({
@@ -12,7 +12,7 @@ const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["
     alignOffset: { default: 0 },
     arrow: { type: Boolean, default: !1 },
     zIndex: { default: "auto" },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     disableOutsidePointerEvents: { type: Boolean, default: !1 },
     label: { default: void 0 },
     testId: { default: void 0 }
@@ -138,7 +138,7 @@ const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["
           "aria-orientation": "vertical",
           class: "dropdown-menu"
         }, f(c)("content"), { onKeydown: T }), [
-          (l(!0), d(I, null, P(K.value, (t, a) => (l(), d(I, { key: a }, [
+          (l(!0), d(I, null, S(K.value, (t, a) => (l(), d(I, { key: a }, [
             t.type === "separator" ? (l(), d("div", b({
               key: 0,
               role: "separator",
@@ -154,8 +154,8 @@ const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["
                 id: t.labelId,
                 role: "presentation",
                 class: "dropdown-menu__label"
-              }, { ref_for: !0 }, f(c)("label", t.index)), S(t.label), 17, te)) : $("", !0),
-              (l(!0), d(I, null, P(t.items, ({ entry: i, index: p }) => (l(), d("button", b({
+              }, { ref_for: !0 }, f(c)("label", t.index)), P(t.label), 17, te)) : $("", !0),
+              (l(!0), d(I, null, S(t.items, ({ entry: i, index: p }) => (l(), d("button", b({
                 key: p,
                 type: "button",
                 role: "menuitem",
@@ -174,7 +174,7 @@ const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["
                   class: "dropdown-menu__item-icon",
                   "aria-hidden": "true"
                 })) : $("", !0),
-                B("span", oe, S(i.label), 1)
+                B("span", oe, P(i.label), 1)
               ], 16, ne))), 128))
             ], 8, ee))
           ], 64))), 128))

package/dist/components/v2/FileUpload/FileUpload.css

@@ -1 +1 @@
-.file-upload[data-v-27716030]{box-sizing:border-box;background-color:var(--theme-neutral-250_40);border:.0625rem solid var(--theme-neutral-border-default);border-radius:.75rem;flex-direction:column;gap:.625rem;padding:.75rem;display:flex}.file-upload--disabled[data-v-27716030]{opacity:.7;cursor:not-allowed}.file-upload__header[data-v-27716030]{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.file-upload__heading[data-v-27716030]{align-items:center;gap:.5rem;min-width:0;display:flex}.file-upload__title[data-v-27716030]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:1rem;font-weight:600;line-height:1.25rem}.file-upload__hint[data-v-27716030]{width:1rem;height:1rem;color:var(--theme-neutral-icon-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__hint[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__hint svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__hint-content[data-v-27716030]{flex-direction:column;gap:.25rem;display:flex}.file-upload__hint-image[data-v-27716030]{object-fit:contain;border-radius:.5rem;width:100%;max-height:15rem}.file-upload__required[data-v-27716030]{color:var(--theme-error-500);flex-shrink:0;align-items:center;gap:.25rem;font-size:.625rem;font-weight:400;line-height:1.2;display:flex}.file-upload__required svg[data-v-27716030]{width:.875rem;height:.875rem}.file-upload__body[data-v-27716030]{align-items:stretch;gap:.25rem;height:8.25rem;display:flex}.file-upload__dropzone[data-v-27716030]{box-sizing:border-box;background-color:var(--theme-neutral-0);border:.0625rem dashed var(--theme-neutral-border-default);min-width:0;height:100%;transition:border-color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border-radius:.75rem;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:1rem;padding:.5rem;display:flex}.file-upload__dropzone--filled[data-v-27716030]{gap:.75rem}.file-upload__dropzone--dragging[data-v-27716030]{background-color:var(--theme-primary-50);border-color:var(--theme-primary-500)}.file-upload__drop[data-v-27716030]{align-items:center;gap:.25rem;display:flex}.file-upload__drop-icon[data-v-27716030]{width:2.25rem;height:2.25rem;color:var(--theme-neutral-text-subtitle);justify-content:center;align-items:center;display:flex}.file-upload__drop-icon svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__drop-text[data-v-27716030]{color:var(--theme-neutral-text-subtitle);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__divider[data-v-27716030]{align-items:center;gap:.25rem;width:100%;display:flex}.file-upload__divider-line[data-v-27716030]{background-color:var(--theme-neutral-border-divider);flex:1 1 0;min-width:0;height:.0625rem}.file-upload__divider-text[data-v-27716030]{color:var(--theme-neutral-text-caption);white-space:nowrap;font-size:.75rem;font-weight:400;line-height:1rem}.file-upload__list[data-v-27716030]{align-items:center;gap:.5rem;width:100%;min-width:0;display:flex}.file-upload__track[data-v-27716030]{scrollbar-width:none;flex:1 1 0;align-items:center;gap:.5rem;min-width:0;margin:-.625rem -.5rem;padding:.625rem .5rem;display:flex;overflow-x:auto}.file-upload__track[data-v-27716030]::-webkit-scrollbar{display:none}.file-upload__scroll[data-v-27716030]{width:1.5rem;height:1.5rem;color:var(--theme-neutral-icon-negative);background-color:var(--theme-primary-500);box-shadow:var(--theme-shadow-button);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__scroll[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__scroll svg[data-v-27716030]{width:.75rem;height:.75rem}.file-upload__scroll[data-v-27716030]:hover{background-color:var(--theme-primary-600)}.file-upload__button[data-v-27716030]{box-sizing:border-box;width:100%;height:2rem;color:var(--theme-primary-600);white-space:nowrap;background-color:var(--theme-primary-75);cursor:pointer;transition:color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.25rem;padding:.5rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1rem;display:flex}.file-upload__button[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__button svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__button[data-v-27716030]:hover:not(:disabled){color:var(--theme-primary-700);background-color:var(--theme-primary-200)}.file-upload__button[data-v-27716030]:disabled{color:var(--theme-neutral-text-disabled);background-color:var(--theme-neutral-surface-disabled);cursor:not-allowed}.file-upload__input[data-v-27716030]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.file-upload__example[data-v-27716030]{flex-direction:column;flex-shrink:0;gap:.25rem;width:8.25rem;display:flex}.file-upload__example-label[data-v-27716030]{color:var(--theme-neutral-text-body);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__example-preview[data-v-27716030]{border:.0625rem dashed var(--theme-neutral-border-default);cursor:pointer;background:0 0;border-radius:.5rem;flex:1 1 0;justify-content:center;align-items:center;min-height:0;padding:0;display:flex;position:relative;overflow:hidden}.file-upload__example-preview[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__example-image[data-v-27716030]{object-fit:cover;width:100%;height:100%}.file-upload__example-zoom[data-v-27716030]{color:var(--theme-neutral-icon-negative);opacity:0;transition:opacity var(--animation-duration-fast) ease;background-color:#16161666;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.file-upload__example-zoom svg[data-v-27716030]{width:2rem;height:2rem}.file-upload__example-preview:hover .file-upload__example-zoom[data-v-27716030],.file-upload__example-preview:focus-visible .file-upload__example-zoom[data-v-27716030]{opacity:1}
+.file-upload[data-v-0c87172c]{box-sizing:border-box;background-color:var(--theme-neutral-250_40);border:.0625rem solid var(--theme-neutral-border-default);border-radius:.75rem;flex-direction:column;gap:.625rem;padding:.75rem;display:flex}.file-upload--disabled[data-v-0c87172c]{opacity:.7;cursor:not-allowed}.file-upload__header[data-v-0c87172c]{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.file-upload__heading[data-v-0c87172c]{align-items:center;gap:.5rem;min-width:0;display:flex}.file-upload__title[data-v-0c87172c]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:1rem;font-weight:600;line-height:1.25rem}.file-upload__hint[data-v-0c87172c]{width:1rem;height:1rem;color:var(--theme-neutral-icon-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__hint[data-v-0c87172c]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__hint svg[data-v-0c87172c]{width:1rem;height:1rem}.file-upload__hint-content[data-v-0c87172c]{flex-direction:column;gap:.25rem;display:flex}.file-upload__hint-image[data-v-0c87172c]{object-fit:contain;border-radius:.5rem;width:100%;max-height:15rem}.file-upload__required[data-v-0c87172c]{color:var(--theme-error-500);flex-shrink:0;align-items:center;gap:.25rem;font-size:.625rem;font-weight:400;line-height:1.2;display:flex}.file-upload__required svg[data-v-0c87172c]{width:.875rem;height:.875rem}.file-upload__body[data-v-0c87172c]{align-items:stretch;gap:.25rem;height:8.25rem;display:flex}.file-upload__dropzone[data-v-0c87172c]{box-sizing:border-box;background-color:var(--theme-neutral-0);border:.0625rem dashed var(--theme-neutral-border-default);min-width:0;height:100%;transition:border-color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border-radius:.75rem;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:1rem;padding:.5rem;display:flex}.file-upload__dropzone--filled[data-v-0c87172c]{gap:.75rem}.file-upload__dropzone--dragging[data-v-0c87172c]{background-color:var(--theme-primary-50);border-color:var(--theme-primary-500)}.file-upload__drop[data-v-0c87172c]{align-items:center;gap:.25rem;display:flex}.file-upload__drop-icon[data-v-0c87172c]{width:2.25rem;height:2.25rem;color:var(--theme-neutral-text-subtitle);justify-content:center;align-items:center;display:flex}.file-upload__drop-icon svg[data-v-0c87172c]{width:1rem;height:1rem}.file-upload__drop-text[data-v-0c87172c]{color:var(--theme-neutral-text-subtitle);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__divider[data-v-0c87172c]{align-items:center;gap:.25rem;width:100%;display:flex}.file-upload__divider-line[data-v-0c87172c]{background-color:var(--theme-neutral-border-divider);flex:1 1 0;min-width:0;height:.0625rem}.file-upload__divider-text[data-v-0c87172c]{color:var(--theme-neutral-text-caption);white-space:nowrap;font-size:.75rem;font-weight:400;line-height:1rem}.file-upload__list[data-v-0c87172c]{align-items:center;gap:.5rem;width:100%;min-width:0;display:flex}.file-upload__track[data-v-0c87172c]{scrollbar-width:none;flex:1 1 0;align-items:center;gap:.5rem;min-width:0;margin:-.625rem -.5rem;padding:.625rem .5rem;display:flex;overflow-x:auto}.file-upload__track[data-v-0c87172c]::-webkit-scrollbar{display:none}.file-upload__scroll[data-v-0c87172c]{width:1.5rem;height:1.5rem;color:var(--theme-neutral-icon-negative);background-color:var(--theme-primary-500);box-shadow:var(--theme-shadow-button);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__scroll[data-v-0c87172c]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__scroll svg[data-v-0c87172c]{width:.75rem;height:.75rem}.file-upload__scroll[data-v-0c87172c]:hover{background-color:var(--theme-primary-600)}.file-upload__button[data-v-0c87172c]{box-sizing:border-box;width:100%;height:2rem;color:var(--theme-primary-600);white-space:nowrap;background-color:var(--theme-primary-75);cursor:pointer;transition:color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.25rem;padding:.5rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1rem;display:flex}.file-upload__button[data-v-0c87172c]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__button svg[data-v-0c87172c]{width:1rem;height:1rem}.file-upload__button[data-v-0c87172c]:hover:not(:disabled){color:var(--theme-primary-700);background-color:var(--theme-primary-200)}.file-upload__button[data-v-0c87172c]:disabled{color:var(--theme-neutral-text-disabled);background-color:var(--theme-neutral-surface-disabled);cursor:not-allowed}.file-upload__input[data-v-0c87172c]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.file-upload__example[data-v-0c87172c]{flex-direction:column;flex-shrink:0;gap:.25rem;width:8.25rem;display:flex}.file-upload__example-label[data-v-0c87172c]{color:var(--theme-neutral-text-body);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__example-preview[data-v-0c87172c]{border:.0625rem dashed var(--theme-neutral-border-default);cursor:pointer;background:0 0;border-radius:.5rem;flex:1 1 0;justify-content:center;align-items:center;min-height:0;padding:0;display:flex;position:relative;overflow:hidden}.file-upload__example-preview[data-v-0c87172c]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__example-image[data-v-0c87172c]{object-fit:cover;width:100%;height:100%}.file-upload__example-zoom[data-v-0c87172c]{color:var(--theme-neutral-icon-negative);opacity:0;transition:opacity var(--animation-duration-fast) ease;background-color:#16161666;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.file-upload__example-zoom svg[data-v-0c87172c]{width:2rem;height:2rem}.file-upload__example-preview:hover .file-upload__example-zoom[data-v-0c87172c],.file-upload__example-preview:focus-visible .file-upload__example-zoom[data-v-0c87172c]{opacity:1}

package/dist/components/v2/FileUpload/FileUpload.vue.js

@@ -2,7 +2,7 @@ import './FileUpload.css';
 import o from "./FileUpload.vue2.js";
 /* empty css                */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-27716030"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0c87172c"]]);
 export {
-  m as default
+  c as default
 };

package/dist/components/v2/FileUpload/FileUpload.vue2.js

@@ -1,15 +1,15 @@
 import { defineComponent as de, useModel as ne, useSlots as se, useId as re, computed as m, ref as p, watch as N, onBeforeUnmount as ue, openBlock as d, createElementBlock as n, mergeProps as r, unref as t, createElementVNode as o, renderSlot as S, createTextVNode as z, toDisplayString as v, createCommentVNode as u, createBlock as B, withCtx as P, createVNode as b, withModifiers as D, Fragment as U, renderList as ce, mergeModels as j } from "vue";
 import { CircleQuestionMark as fe, CircleAlert as me, ChevronLeft as pe, ChevronRight as ve, Download as be, FileUp as xe, ZoomIn as he } from "@lucide/vue";
-import { breakpoints as ke } from "../../../utils/breakpoints.util.js";
-import ge from "../File/File.vue.js";
-import ye from "../File/FilePreviewDialog.vue.js";
+import ke from "../File/File.vue.js";
+import ge from "../File/FilePreviewDialog.vue.js";
+import { useIsMobile as ye } from "../shared/useIsMobile.util.js";
 import { useTestId as _e } from "../shared/useTestId.util.js";
 import we from "../Tooltip/Tooltip.vue.js";
 import { useFileSelection as Ce } from "./useFileSelection.util.js";
 const Fe = ["aria-labelledby"], De = {
   key: 0,
   class: "file-upload__header"
-}, $e = { class: "file-upload__heading" }, Le = ["aria-label"], Te = { class: "file-upload__hint-content" }, Ie = { class: "file-upload__example-label" }, Se = ["src", "alt"], ze = { class: "file-upload__body" }, Be = {
+}, $e = { class: "file-upload__heading" }, Ie = ["aria-label"], Le = { class: "file-upload__hint-content" }, Te = { class: "file-upload__example-label" }, Se = ["src", "alt"], ze = { class: "file-upload__body" }, Be = {
   key: 0,
   class: "file-upload__list"
 }, Ae = { class: "file-upload__drop" }, Me = { class: "file-upload__drop-icon" }, Re = { class: "file-upload__drop-text" }, qe = { class: "file-upload__divider" }, Ve = { class: "file-upload__divider-text" }, Oe = ["disabled"], Ee = ["id", "name", "accept", "multiple", "disabled"], Ne = { class: "file-upload__example-label" }, Pe = ["aria-label"], Ue = ["src", "alt"], je = {
@@ -45,7 +45,7 @@ const Fe = ["aria-labelledby"], De = {
   }),
   emits: /* @__PURE__ */ j(["add", "remove", "reject", "preview", "exampleClick"], ["update:modelValue"]),
   setup(e, { emit: W }) {
-    const i = e, x = W, f = ne(e, "modelValue"), A = se(), s = _e(() => i.testId), $ = re(), M = `file-upload-title-${$}`, H = m(() => i.id ?? `${$}-file-upload`), g = ke.smaller(i.breakpointMobile), R = p(null), y = p(null), _ = p(!1), w = p(!1), C = p(null), L = p(!1), T = p(!1), I = m(() => !!(i.title || A.title)), q = m(() => !!(i.example || A.example)), Q = m(() => I.value || i.required), { addFiles: V, removeFile: O, isFull: Z } = Ce({
+    const i = e, x = W, f = ne(e, "modelValue"), A = se(), s = _e(() => i.testId), $ = re(), M = `file-upload-title-${$}`, H = m(() => i.id ?? `${$}-file-upload`), g = ye(i.breakpointMobile), R = p(null), y = p(null), _ = p(!1), w = p(!1), C = p(null), I = p(!1), L = p(!1), T = m(() => !!(i.title || A.title)), q = m(() => !!(i.example || A.example)), Q = m(() => T.value || i.required), { addFiles: V, removeFile: O, isFull: Z } = Ce({
       files: () => f.value,
       setFiles: (l) => {
         f.value = l;
@@ -108,11 +108,11 @@ const Fe = ["aria-labelledby"], De = {
     function k() {
       const l = y.value;
       if (!l) {
-        L.value = !1, T.value = !1;
+        I.value = !1, L.value = !1;
         return;
       }
       const a = l.scrollWidth - l.clientWidth;
-      L.value = l.scrollLeft > 1, T.value = l.scrollLeft < a - 1;
+      I.value = l.scrollLeft > 1, L.value = l.scrollLeft < a - 1;
     }
     let F;
     return N(y, (l) => {
@@ -131,11 +131,11 @@ const Fe = ["aria-labelledby"], De = {
     }), (l, a) => (d(), n("div", r({
       class: J.value,
       role: "group",
-      "aria-labelledby": I.value ? M : void 0
+      "aria-labelledby": T.value ? M : void 0
     }, { ...l.$attrs, ...t(s)("root") }), [
       Q.value ? (d(), n("div", De, [
         o("div", $e, [
-          I.value ? (d(), n("span", r({
+          T.value ? (d(), n("span", r({
             key: 0,
             id: M,
             class: "file-upload__title"
@@ -157,11 +157,11 @@ const Fe = ["aria-labelledby"], De = {
                 "aria-label": e.exampleLabel
               }, t(s)("example-hint")), [
                 b(t(fe), { "aria-hidden": "true" })
-              ], 16, Le)
+              ], 16, Ie)
             ]),
             default: P(() => [
-              o("span", Te, [
-                o("span", Ie, v(e.exampleLabel), 1),
+              o("span", Le, [
+                o("span", Te, v(e.exampleLabel), 1),
                 S(l.$slots, "example", {}, () => [
                   e.example ? (d(), n("img", {
                     key: 0,
@@ -192,7 +192,7 @@ const Fe = ["aria-labelledby"], De = {
           onDrop: D(te, ["prevent"])
         }), [
           f.value.length ? (d(), n("div", Be, [
-            !t(g) && L.value ? (d(), n("button", r({
+            !t(g) && I.value ? (d(), n("button", r({
               key: 0,
               type: "button",
               class: "file-upload__scroll file-upload__scroll--prev",
@@ -207,7 +207,7 @@ const Fe = ["aria-labelledby"], De = {
               ref: y,
               class: "file-upload__track"
             }, t(s)("track"), { onScroll: k }), [
-              (d(!0), n(U, null, ce(f.value, (c) => (d(), B(t(ge), {
+              (d(!0), n(U, null, ce(f.value, (c) => (d(), B(t(ke), {
                 key: c.id,
                 file: c,
                 disabled: e.disabled,
@@ -216,7 +216,7 @@ const Fe = ["aria-labelledby"], De = {
                 onRemove: (oe) => t(O)(c)
               }, null, 8, ["file", "disabled", "test-id", "onOpen", "onRemove"]))), 128))
             ], 16),
-            !t(g) && T.value ? (d(), n("button", r({
+            !t(g) && L.value ? (d(), n("button", r({
               key: 1,
               type: "button",
               class: "file-upload__scroll file-upload__scroll--next",
@@ -286,7 +286,7 @@ const Fe = ["aria-labelledby"], De = {
           ], 16, Pe)
         ], 16)) : u("", !0)
       ]),
-      e.preview ? (d(), B(t(ye), {
+      e.preview ? (d(), B(t(ge), {
         key: 1,
         open: w.value,
         "onUpdate:open": a[3] || (a[3] = (c) => w.value = c),

package/dist/components/v2/FormField/FormField.css

@@ -0,0 +1 @@
+.form-field-v2[data-v-80b99a34]{flex-direction:column;align-items:flex-start;width:100%;display:flex}.form-field-v2__label[data-v-80b99a34]{width:100%;color:var(--theme-neutral-text-title);overflow-wrap:break-word;cursor:pointer;align-items:center;gap:.125rem;padding:.375rem .6875rem .375rem .5rem;font-size:.875rem;font-weight:400;line-height:1rem;display:flex}.form-field-v2__required[data-v-80b99a34]{color:var(--theme-error-500);flex-shrink:0}.form-field-v2__control[data-v-80b99a34]{width:100%}.form-field-v2__message[data-v-80b99a34]{width:100%;color:var(--theme-neutral-text-caption);overflow-wrap:break-word;padding:.25rem .6875rem 0 .5rem;font-size:.625rem;font-weight:400;line-height:normal}.form-field-v2--error .form-field-v2__label[data-v-80b99a34],.form-field-v2--error .form-field-v2__message[data-v-80b99a34]{color:var(--theme-error-500)}