@boobooking/dashboard-ui-components 0.2.1 → 0.4.0

package/README.md

@@ -1,7 +1,6 @@
 # @boobooking/dashboard-ui-components
 
-Компоненты фильтров дашборда на Vue 3: телефон, поиск, выпадающий список,
-интервал дат.
+Компоненты дашборда на Vue 3: фильтры и общие элементы интерфейса.
 
 ## Установка
 
@@ -16,15 +15,18 @@ import '@boobooking/dashboard-ui-components/style.css'
 
 ## Требования
 
-Vue не ниже 3.2, ESM, сборщик, умеющий импорт CSS из пакета.
+Vue не ниже 3.5, ESM, сборщик, умеющий импорт CSS из пакета. Версия 3.5 нужна
+ради `useId()`: им компоненты связывают свои `id` с `aria-`атрибутами, и две
+копии компонента на одной странице не делят один `id`.
 
 Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в CSS приложения
 пакету не нужны.
 
 ## Компоненты
 
-Пакет экспортирует семь компонентов: `Popup`, `Dot`, `PickDay`,
-`RussianMobileFilter`, `Search`, `SelectDateInterval`, `SelectSingle`. В
+Пакет экспортирует двенадцать компонентов: `Popup`, `Dot`, `PickDay`,
+`RussianMobileFilter`, `Search`, `SelectDateInterval`, `SelectSingle`,
+`SmallBadge`, `ErrorMessages`, `Closer`, `DownloadLink`, `ConfirmationModal`. В
 архив пакета (`files: ["dist"]`) исходники не попадают, поэтому контракт
 каждого компонента — здесь и в playground, а не в исходном коде.
 
@@ -166,6 +168,83 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 События: `update:modelValue` и `changed` — при выборе элемента (повторный
 клик по уже выбранному снимает выбор) и при очистке через ластик.
 
+### SmallBadge
+
+Бейдж-пилюля с коротким текстом. Текст не переносится.
+
+    <small-badge text="Отправлено" color="green" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `text` | `String` | обязателен | Текст бейджа |
+| `color` | `String` | обязателен | `"green"`, `"indigo"`, `"gray"`, `"blue"`, `"red"` или `"yellow"` |
+
+Событий нет.
+
+### ErrorMessages
+
+Плашка со списком сообщений: жёлтая для предупреждений, красная для ошибок.
+Без сообщений не отрисовывается вовсе.
+
+    <error-messages :messages="errors" type="dangerous" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `messages` | `Object \| Array` | обязателен | Объект ошибок валидации (ключ — поле, значение — текст) или массив строк |
+| `type` | `String` | `"warning"` | `"warning"` (жёлтая) или `"dangerous"` (красная) |
+
+Событий нет.
+
+### Closer
+
+Кнопка-крестик закрытия. Размер и положение задаёт приложение классами на
+корне: без них у крестика нулевой размер.
+
+    <closer class="absolute top-0 right-0 w-8 h-8" @clicked="close" />
+
+Пропов нет. Событие: `clicked` — по клику.
+
+### DownloadLink
+
+Ссылка на файл в виде бейджа с иконкой скачивания. Кликабелен весь бейдж.
+
+    <download-link :url="exportUrl" title="скачать xlsx" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `url` | `String` | обязателен | Адрес файла |
+| `title` | `String` | `"Скачать"` | Подпись и всплывающая подсказка |
+
+Событий нет.
+
+### ConfirmationModal
+
+Модалка подтверждения действия: заголовок, текст, кнопка действия и кнопка
+отмены.
+
+    <confirmation-modal
+        :is-open="showDelete"
+        type="dangerous"
+        confirmation-heading="Удаление администратора"
+        confirmation-text="Это действие необратимо."
+        action-button-text="Удалить"
+        @action-canceled="showDelete = false"
+        @action-confirmed="deleteUser"
+    />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `isOpen` | `Boolean` | `false` | Открыта ли модалка |
+| `type` | `String` | `"warning"` | `"warning"` (жёлтая) или `"dangerous"` (красная) |
+| `confirmationHeading` | `String` | `""` | Заголовок |
+| `confirmationText` | `String` | `""` | Текст под заголовком |
+| `cancelButtonText` | `String` | `"Отмена"` | Подпись кнопки отмены |
+| `actionButtonText` | `String` | обязателен | Подпись кнопки действия |
+
+События: `actionConfirmed` — по кнопке действия, `actionCanceled` — по кнопке
+отмены. Ни одна из кнопок модалку не закрывает — см. раздел «Почему у
+ConfirmationModal нет v-model».
+
 ## Правила API пакета
 
 Компонент, добавляемый в пакет, следует тем же правилам, что и уже
@@ -205,11 +284,22 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 Отсутствие `changed` у `Popup` и `Dot` — сознательное решение, а не
 пропуск.
 
+## Почему у ConfirmationModal нет v-model
+
+Правило пакета — значение через `v-model` — относится к состоянию, которое
+компонент меняет сам: `Popup` закрывается по клику вне, `SelectSingle` меняет
+выбор. `ConfirmationModal` свою видимость не меняет никогда. Обе кнопки только
+сообщают родителю решение пользователя, а закрыть модалку, оставить её открытой
+на время запроса или открыть следующую — решает родитель.
+
+`v-model` обещал бы двустороннюю связь, которой нет, поэтому видимость
+передаётся пропом `isOpen`.
+
 ## Playground
 
     npm run playground
 
-Поднимает демо-страницы со всеми семью компонентами в двух окружениях:
+Поднимает демо-страницы со всеми двенадцатью компонентами в двух окружениях:
 голом (без Tailwind и стилей приложения) и в окружении приложения (с
 Tailwind, `@tailwindcss/forms` и типографикой, как у потребителя). Это
 основной способ посмотреть, как компоненты выглядят и ведут себя, а не
@@ -235,3 +325,11 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 Ресет пакета распространяется и на содержимое слотов — разметку приложения
 внутри `Popup`. В приложении с preflight это ничего не меняет; без него
 содержимое слота получит `box-sizing` и снятые границы.
+
+У `Closer` нет доступного имени, и он выключен из порядка табуляции
+(`tabindex="-1"`): скринридер его не назовёт, а с клавиатуры до него не
+добраться.
+
+`ConfirmationModal` не переносит фокус внутрь при открытии, не удерживает его
+внутри, не возвращает на прежнее место после закрытия и не закрывается по
+Escape.

package/dist/index.js

@@ -1,12 +1,12 @@
-import { Fragment as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, mergeProps as s, normalizeClass as c, openBlock as l, renderList as u, renderSlot as d, resolveComponent as f, toDisplayString as p, vModelText as m, vShow as h, withCtx as g, withDirectives as _, withKeys as v, withModifiers as y } from "vue";
+import { Fragment as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, mergeProps as s, normalizeClass as c, openBlock as l, renderList as u, renderSlot as d, resolveComponent as f, toDisplayString as p, useId as m, vModelText as h, vShow as g, withCtx as _, withDirectives as v, withKeys as y, withModifiers as b } from "vue";
 import ee from "pikaday";
-import b from "imask";
+import x from "imask";
 //#region \0plugin-vue:export-helper
-var x = (e, t) => {
+var S = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, S = {
+}, C = {
 	props: {
 		isOpen: {
 			type: Boolean,
@@ -33,21 +33,21 @@ var x = (e, t) => {
 		document.removeEventListener("keydown", this.handleEscape);
 	}
 };
-function C(e, t, n, r, a, o) {
-	return _((l(), i("button", {
+function w(e, t, n, r, a, o) {
+	return v((l(), i("button", {
 		tabindex: "-1",
-		onClick: t[0] ||= y((...e) => o.closeOverlay && o.closeOverlay(...e), ["prevent"]),
+		onClick: t[0] ||= b((...e) => o.closeOverlay && o.closeOverlay(...e), ["prevent"]),
 		class: c(["fixed inset-0 w-full h-full cursor-default flex items-start", {
 			"z-20": n.isOpen,
 			"bg-transparent": n.isTransparent,
 			"bg-gray-900 opacity-75": !n.isTransparent
 		}])
-	}, null, 2)), [[h, n.isOpen]]);
+	}, null, 2)), [[g, n.isOpen]]);
 }
 //#endregion
 //#region src/components/Popup.vue
-var w = {
-	components: { Overlay: /* @__PURE__ */ x(S, [["render", C]]) },
+var T = {
+	components: { Overlay: /* @__PURE__ */ S(C, [["render", w]]) },
 	inheritAttrs: !1,
 	emits: ["update:modelValue"],
 	props: {
@@ -80,10 +80,10 @@ var w = {
 			return this.align === "right";
 		}
 	}
-}, T = { class: "bb-dashboard-ui relative" };
-function E(e, n, r, c, u, p) {
+}, E = { class: "bb-dashboard-ui relative" };
+function D(e, n, r, c, u, p) {
 	let m = f("overlay");
-	return l(), i("div", T, [o(m, {
+	return l(), i("div", E, [o(m, {
 		"is-open": u.overlayIsOpen,
 		"onUpdate:isOpen": n[0] ||= (e) => u.overlayIsOpen = e
 	}, null, 8, ["is-open"]), o(t, {
@@ -94,14 +94,14 @@ function E(e, n, r, c, u, p) {
 		"leave-from-class": "opacity-100 scale-100",
 		"leave-to-class": "opacity-0 scale-95"
 	}, {
-		default: g(() => [_(a("div", s(e.$attrs, { class: ["absolute z-20", {
+		default: _(() => [v(a("div", s(e.$attrs, { class: ["absolute z-20", {
 			"left-0": p.alignLeft,
 			"right-0": p.alignRight
-		}] }), [d(e.$slots, "default")], 16), [[h, r.modelValue]])]),
+		}] }), [d(e.$slots, "default")], 16), [[g, r.modelValue]])]),
 		_: 3
 	})]);
 }
-var D = /*#__PURE__*/ x(w, [["render", E]]), O = {
+var O = /*#__PURE__*/ S(T, [["render", D]]), te = {
 	props: {
 		withPulse: {
 			type: Boolean,
@@ -122,7 +122,7 @@ var D = /*#__PURE__*/ x(w, [["render", E]]), O = {
 		}
 	}
 };
-function te(e, t, n, r, o, s) {
+function ne(e, t, n, r, o, s) {
 	return l(), i("div", { class: c(["bb-dashboard-ui flex h-full items-center leading-none text-4xl", {
 		"text-red-500": s.isRed,
 		"text-green-500": s.isGreen,
@@ -136,7 +136,7 @@ function te(e, t, n, r, o, s) {
 		r: "45"
 	})], -1)]], 2);
 }
-var k = /*#__PURE__*/ x(O, [["render", te]]), A = {}, j = {
+var k = /*#__PURE__*/ S(te, [["render", ne]]), A = {}, j = {
 	type: "button",
 	tabindex: "-1",
 	class: "absolute right-0 top-0 flex items-center justify-center bg-transparent cursor-pointer text-gray-300 hover:text-gray-400 focus:outline-hidden"
@@ -153,7 +153,7 @@ function M(e, t, n, r, o, s) {
 		d: "M6 18L18 6M6 6l12 12"
 	})], -1)]]);
 }
-var N = /*#__PURE__*/ x(A, [["render", M]]);
+var N = /*#__PURE__*/ S(A, [["render", M]]);
 //#endregion
 //#region src/date.js
 function P(e) {
@@ -169,7 +169,7 @@ function F(e) {
 //#region src/components/PickDay.vue
 var I = {
 	components: {
-		Popup: D,
+		Popup: O,
 		Eraser: N
 	},
 	emits: ["update:modelValue", "changed"],
@@ -303,11 +303,11 @@ function H(e, t, s, u, d, p) {
 		modelValue: d.popupIsOpen,
 		"onUpdate:modelValue": t[1] ||= (e) => d.popupIsOpen = e
 	}, {
-		default: g(() => [a("div", V, null, 512)]),
+		default: _(() => [a("div", V, null, 512)]),
 		_: 1
 	}, 8, ["modelValue"])]);
 }
-var U = /*#__PURE__*/ x(I, [["render", H]]), W = {
+var U = /*#__PURE__*/ S(I, [["render", H]]), W = {
 	components: { Dot: k },
 	props: {
 		text: {
@@ -331,18 +331,18 @@ function q(e, t, n, r, s, c) {
 			class: "flex flex-1 h-full items-center text-xs text-gray-500 whitespace-nowrap truncate leading-tight select-none",
 			textContent: p(n.text)
 		}, null, 8, K),
-		_(o(u, {
+		v(o(u, {
 			color: "red",
 			"with-pulse": !0,
 			class: "ml-3"
-		}, null, 512), [[h, n.isLoading]]),
-		_(o(u, {
+		}, null, 512), [[g, n.isLoading]]),
+		v(o(u, {
 			color: "red",
 			class: "ml-3"
-		}, null, 512), [[h, n.isRequired]])
+		}, null, 512), [[g, n.isRequired]])
 	]);
 }
-var J = /*#__PURE__*/ x(W, [["render", q]]), Y = 10;
+var J = /*#__PURE__*/ S(W, [["render", q]]), Y = 10;
 function X(e) {
 	let t = e.replace(/\D/g, "");
 	return (t.startsWith("7") || t.startsWith("8")) && t[1] === "9" && (t = t.slice(1)), t.slice(0, Y);
@@ -356,7 +356,7 @@ function Q(e) {
 }
 //#endregion
 //#region src/components/RussianMobileFilter.vue
-var ne = 400, re = 3, ie = {
+var re = 400, ie = 3, ae = {
 	components: {
 		ElementHeader: J,
 		Eraser: N
@@ -387,7 +387,7 @@ var ne = 400, re = 3, ie = {
 		this.mask = null, this.debounceTimer = null, this.isWritingProgrammatically = !1, this.lastCommitted = Q(this.modelValue);
 	},
 	mounted() {
-		this.mask = b(this.$refs.input, {
+		this.mask = x(this.$refs.input, {
 			mask: "+7 (000) 000 00 00",
 			lazy: !0,
 			prepare: (e, t) => t.unmaskedValue === "" && (e === "7" || e === "8") ? "" : e
@@ -439,16 +439,16 @@ var ne = 400, re = 3, ie = {
 				this.commit();
 				return;
 			}
-			this.digits.length < re || (this.debounceTimer = setTimeout(() => this.commit(), ne));
+			this.digits.length < ie || (this.debounceTimer = setTimeout(() => this.commit(), re));
 		},
 		commit() {
 			clearTimeout(this.debounceTimer), this.digits !== this.lastCommitted && (this.lastCommitted = this.digits, this.$emit("changed"));
 		}
 	}
-}, ae = { class: "bb-dashboard-ui flex flex-none" }, oe = { class: "flex w-full flex-col border border-white bg-white" }, se = { class: "relative flex h-full w-full" }, ce = { class: "flex w-full h-full items-center justify-center" };
-function le(e, t, n, r, s, c) {
+}, oe = { class: "bb-dashboard-ui flex flex-none" }, se = { class: "flex w-full flex-col border border-white bg-white" }, ce = { class: "relative flex h-full w-full" }, le = { class: "flex w-full h-full items-center justify-center" };
+function ue(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("eraser");
-	return l(), i("div", ae, [a("div", oe, [o(u, {
+	return l(), i("div", oe, [a("div", se, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -456,7 +456,7 @@ function le(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", se, [a("label", ce, [a("input", {
+	]), a("div", ce, [a("label", le, [a("input", {
 		ref: "input",
 		type: "tel",
 		inputmode: "tel",
@@ -464,15 +464,15 @@ function le(e, t, n, r, s, c) {
 		class: "flex w-phone h-full px-3 py-2 cursor-pointer truncate focus:outline-hidden border-none",
 		onFocus: t[0] ||= (...e) => c.onFocus && c.onFocus(...e),
 		onBlur: t[1] ||= (...e) => c.onBlur && c.onBlur(...e),
-		onKeydown: t[2] ||= v((...e) => c.commit && c.commit(...e), ["enter"]),
-		onPaste: t[3] ||= y((...e) => c.onPaste && c.onPaste(...e), ["prevent"])
-	}, null, 544), _(o(d, {
-		onMousedown: t[4] ||= y(() => {}, ["prevent"]),
+		onKeydown: t[2] ||= y((...e) => c.commit && c.commit(...e), ["enter"]),
+		onPaste: t[3] ||= b((...e) => c.onPaste && c.onPaste(...e), ["prevent"])
+	}, null, 544), v(o(d, {
+		onMousedown: t[4] ||= b(() => {}, ["prevent"]),
 		onClick: c.clear,
 		class: "pr-2 h-full"
-	}, null, 8, ["onClick"]), [[h, s.digits.length > 0]])])])])]);
+	}, null, 8, ["onClick"]), [[g, s.digits.length > 0]])])])])]);
 }
-var ue = /*#__PURE__*/ x(ie, [["render", le]]), de = {
+var de = /*#__PURE__*/ S(ae, [["render", ue]]), fe = {
 	components: {
 		ElementHeader: J,
 		Eraser: N
@@ -511,10 +511,10 @@ var ue = /*#__PURE__*/ x(ie, [["render", le]]), de = {
 			this.$emit("update:modelValue", this.search), this.$emit("changed");
 		}
 	}
-}, fe = { class: "bb-dashboard-ui flex flex-none" }, pe = { class: "flex w-full flex-col border border-white bg-white" }, me = { class: "relative flex h-full w-full" }, he = { class: "flex w-full h-full items-center justify-center" };
-function ge(e, t, n, r, s, c) {
+}, pe = { class: "bb-dashboard-ui flex flex-none" }, me = { class: "flex w-full flex-col border border-white bg-white" }, he = { class: "relative flex h-full w-full" }, ge = { class: "flex w-full h-full items-center justify-center" };
+function _e(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("eraser");
-	return l(), i("div", fe, [a("div", pe, [o(u, {
+	return l(), i("div", pe, [a("div", me, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -522,21 +522,21 @@ function ge(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", me, [a("label", he, [_(a("input", {
+	]), a("div", he, [a("label", ge, [v(a("input", {
 		class: "flex w-full h-full px-3 py-2 cursor-pointer truncate focus:outline-hidden border-none",
 		"onUpdate:modelValue": t[0] ||= (e) => s.search = e,
 		onInput: t[1] ||= (...e) => c.startSearch && c.startSearch(...e)
 	}, null, 544), [[
-		m,
+		h,
 		s.search,
 		void 0,
 		{ trim: !0 }
-	]]), _(o(d, {
+	]]), v(o(d, {
 		onClick: c.clearInput,
 		class: "pr-2 h-full"
-	}, null, 8, ["onClick"]), [[h, c.inputNeedsEraser]])])])])]);
+	}, null, 8, ["onClick"]), [[g, c.inputNeedsEraser]])])])])]);
 }
-var _e = /*#__PURE__*/ x(de, [["render", ge]]), ve = {
+var ve = /*#__PURE__*/ S(fe, [["render", _e]]), ye = {
 	components: {
 		ElementHeader: J,
 		PickDay: U
@@ -588,10 +588,10 @@ var _e = /*#__PURE__*/ x(de, [["render", ge]]), ve = {
 			this.$emit("update:dateTo", e), this.dateTo !== e && this.$emit("changed");
 		}
 	}
-}, ye = { class: "bb-dashboard-ui flex" }, be = { class: "flex border border-white" }, xe = { class: "flex flex-col min-w-72 w-72 bg-white h-full" }, Se = { class: "flex h-full divide-x divide-gray-200" };
-function Ce(e, t, n, r, s, c) {
+}, be = { class: "bb-dashboard-ui flex" }, xe = { class: "flex border border-white" }, Se = { class: "flex flex-col min-w-72 w-72 bg-white h-full" }, Ce = { class: "flex h-full divide-x divide-gray-200" };
+function we(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("pick-day");
-	return l(), i("div", ye, [a("div", be, [a("div", xe, [o(u, {
+	return l(), i("div", be, [a("div", xe, [a("div", Se, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -599,7 +599,7 @@ function Ce(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", Se, [o(d, {
+	]), a("div", Ce, [o(d, {
 		modelValue: s.userDateFrom,
 		"onUpdate:modelValue": t[0] ||= (e) => s.userDateFrom = e,
 		class: "flex-1 min-w-36 pl-3",
@@ -611,9 +611,9 @@ function Ce(e, t, n, r, s, c) {
 		"placeholder-text": "до"
 	}, null, 8, ["modelValue"])])])])]);
 }
-var we = /*#__PURE__*/ x(ve, [["render", Ce]]), Te = {
+var Te = /*#__PURE__*/ S(ye, [["render", we]]), Ee = {
 	components: {
-		Popup: D,
+		Popup: O,
 		Eraser: N
 	},
 	emits: ["update:isOpen", "erased"],
@@ -645,17 +645,17 @@ var we = /*#__PURE__*/ x(ve, [["render", Ce]]), Te = {
 	computed: { needsEraser() {
 		return !this.isOpen && this.hasValue;
 	} }
-}, Ee = { class: "flex flex-col grow bg-white" }, De = { class: "relative flex w-full h-full" }, $ = ["textContent"];
-function Oe(e, t, s, u, m, h) {
-	let _ = f("eraser"), v = f("popup");
-	return l(), i("div", Ee, [a("div", De, [a("button", {
+}, De = { class: "flex flex-col grow bg-white" }, Oe = { class: "relative flex w-full h-full" }, ke = ["textContent"];
+function Ae(e, t, s, u, m, h) {
+	let g = f("eraser"), v = f("popup");
+	return l(), i("div", De, [a("div", Oe, [a("button", {
 		type: "button",
 		class: c(["flex w-full h-full items-center focus:outline-hidden cursor-pointer", { "z-20": s.isOpen }]),
-		onClick: t[0] ||= y((t) => e.$emit("update:isOpen", !s.isOpen), ["prevent"])
+		onClick: t[0] ||= b((t) => e.$emit("update:isOpen", !s.isOpen), ["prevent"])
 	}, [a("span", {
 		class: "flex w-full h-full pl-3 pr-12 py-2 items-center whitespace-nowrap leading-none",
 		textContent: p(s.title)
-	}, null, 8, $)], 2), h.needsEraser ? (l(), n(_, {
+	}, null, 8, ke)], 2), h.needsEraser ? (l(), n(g, {
 		key: 0,
 		onClick: t[1] ||= (t) => e.$emit("erased"),
 		class: "pr-2 h-full"
@@ -663,11 +663,11 @@ function Oe(e, t, s, u, m, h) {
 		modelValue: m.popupIsOpen,
 		"onUpdate:modelValue": t[2] ||= (e) => m.popupIsOpen = e
 	}, {
-		default: g(() => [d(e.$slots, "default")]),
+		default: _(() => [d(e.$slots, "default")]),
 		_: 3
 	}, 8, ["modelValue"])]);
 }
-var ke = /*#__PURE__*/ x(Te, [["render", Oe]]), Ae = {
+var je = /*#__PURE__*/ S(Ee, [["render", Ae]]), Me = {
 	props: {
 		isChecked: {
 			type: Boolean,
@@ -679,31 +679,31 @@ var ke = /*#__PURE__*/ x(Te, [["render", Oe]]), Ae = {
 	methods: { toggle() {
 		this.$emit("clicked");
 	} }
-}, je = { class: "flex w-9 h-9 items-center justify-center" }, Me = {
+}, Ne = { class: "flex w-9 h-9 items-center justify-center" }, Pe = {
 	class: "w-5 h-5 fill-current text-green-300",
 	viewBox: "0 0 20 20"
-}, Ne = ["textContent"];
-function Pe(e, t, n, r, o, s) {
+}, Fe = ["textContent"];
+function Ie(e, t, n, r, o, s) {
 	return l(), i("button", {
 		type: "button",
-		onClick: t[0] ||= y((...e) => s.toggle && s.toggle(...e), ["prevent"]),
+		onClick: t[0] ||= b((...e) => s.toggle && s.toggle(...e), ["prevent"]),
 		class: "flex w-full bg-white hover:bg-indigo-100 cursor-pointer focus:outline-hidden focus:ring-3 focus:z-10 focus:ring-blue-500/50"
-	}, [a("span", je, [_((l(), i("svg", Me, [...t[1] ||= [a("path", {
+	}, [a("span", Ne, [v((l(), i("svg", Pe, [...t[1] ||= [a("path", {
 		d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
 		"clip-rule": "evenodd",
 		"fill-rule": "evenodd"
-	}, null, -1)]], 512)), [[h, n.isChecked]])]), a("span", {
+	}, null, -1)]], 512)), [[g, n.isChecked]])]), a("span", {
 		class: "flex h-9 justify-center items-center pr-6 whitespace-nowrap select-none",
 		textContent: p(n.name)
-	}, null, 8, Ne)]);
+	}, null, 8, Fe)]);
 }
 //#endregion
 //#region src/components/SelectSingle.vue
-var Fe = {
+var Le = {
 	components: {
 		ElementHeader: J,
-		DropdownButton: ke,
-		ListElement: /* @__PURE__ */ x(Ae, [["render", Pe]])
+		DropdownButton: je,
+		ListElement: /* @__PURE__ */ S(Me, [["render", Ie]])
 	},
 	emits: ["update:modelValue", "changed"],
 	props: {
@@ -753,10 +753,10 @@ var Fe = {
 			this.$emit("update:modelValue", null), this.$emit("changed");
 		}
 	}
-}, Ie = { class: "bb-dashboard-ui flex flex-none" }, Le = { class: "flex w-full flex-col border border-white bg-white" }, Re = { class: "flex flex-col py-1 mt-1 bg-white border border-gray-200 rounded-md shadow-lg divide-y divide-gray-200 divide-dashed" };
-function ze(t, s, c, d, p, m) {
-	let h = f("element-header"), _ = f("list-element"), v = f("dropdown-button");
-	return l(), i("div", Ie, [a("div", Le, [o(h, {
+}, Re = { class: "bb-dashboard-ui flex flex-none" }, ze = { class: "flex w-full flex-col border border-white bg-white" }, Be = { class: "flex flex-col py-1 mt-1 bg-white border border-gray-200 rounded-md shadow-lg divide-y divide-gray-200 divide-dashed" };
+function Ve(t, s, c, d, p, m) {
+	let h = f("element-header"), g = f("list-element"), v = f("dropdown-button");
+	return l(), i("div", Re, [a("div", ze, [o(h, {
 		text: c.header,
 		"is-required": c.isRequired,
 		"is-loading": c.isLoading
@@ -772,7 +772,7 @@ function ze(t, s, c, d, p, m) {
 		"has-value": m.hasValue,
 		onErased: m.clear
 	}, {
-		default: g(() => [a("div", Re, [(l(!0), i(e, null, u(c.items, (e) => (l(), n(_, {
+		default: _(() => [a("div", Be, [(l(!0), i(e, null, u(c.items, (e) => (l(), n(g, {
 			name: e.name,
 			key: e.id,
 			"is-checked": e.id === c.modelValue,
@@ -790,6 +790,301 @@ function ze(t, s, c, d, p, m) {
 		"onErased"
 	])) : r("", !0)])]);
 }
-var Be = /*#__PURE__*/ x(Fe, [["render", ze]]);
+var He = /*#__PURE__*/ S(Le, [["render", Ve]]), Ue = {
+	props: {
+		text: {
+			type: String,
+			required: !0
+		},
+		color: {
+			type: String,
+			required: !0,
+			validator: (e) => [
+				"green",
+				"indigo",
+				"gray",
+				"blue",
+				"red",
+				"yellow"
+			].indexOf(e) !== -1
+		}
+	},
+	computed: {
+		isGreen() {
+			return this.color === "green";
+		},
+		isIndigo() {
+			return this.color === "indigo";
+		},
+		isGray() {
+			return this.color === "gray";
+		},
+		isBlue() {
+			return this.color === "blue";
+		},
+		isRed() {
+			return this.color === "red";
+		},
+		isYellow() {
+			return this.color === "yellow";
+		}
+	}
+}, We = ["textContent"];
+function Ge(e, t, n, r, a, o) {
+	return l(), i("span", {
+		class: c(["bb-dashboard-ui inline-flex items-center px-3 py-2 rounded-full text-xs font-medium leading-none select-none whitespace-nowrap", {
+			"bg-green-50 text-gray-700": o.isGreen,
+			"bg-indigo-100 text-gray-700": o.isIndigo,
+			"bg-gray-200 text-gray-700": o.isGray,
+			"bg-blue-100 text-blue-800": o.isBlue,
+			"bg-red-100 text-red-800": o.isRed,
+			"bg-yellow-100 text-yellow-800": o.isYellow
+		}]),
+		textContent: p(n.text)
+	}, null, 10, We);
+}
+var Ke = /*#__PURE__*/ S(Ue, [["render", Ge]]), qe = {
+	props: {
+		messages: {
+			type: [Object, Array],
+			required: !0
+		},
+		type: {
+			type: String,
+			default: "warning",
+			validator: (e) => ["warning", "dangerous"].indexOf(e) !== -1
+		}
+	},
+	computed: {
+		hasErrors() {
+			return Object.keys(this.messages).length > 0;
+		},
+		isDangerous() {
+			return this.type === "dangerous";
+		}
+	}
+}, Je = { class: "flex" }, Ye = { class: "shrink-0" }, Xe = { class: "ml-3" }, Ze = ["textContent"];
+function Qe(t, n, o, s, d, f) {
+	return f.hasErrors ? (l(), i("div", {
+		key: 0,
+		class: c(["bb-dashboard-ui border-l-4 p-4", f.isDangerous ? "bg-red-50 border-red-400" : "bg-yellow-50 border-yellow-400"])
+	}, [a("div", Je, [a("div", Ye, [(l(), i("svg", {
+		class: c(["h-5 w-5", f.isDangerous ? "text-red-400" : "text-yellow-400"]),
+		viewBox: "0 0 20 20",
+		fill: "currentColor"
+	}, [...n[0] ||= [a("path", {
+		"fill-rule": "evenodd",
+		d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+		"clip-rule": "evenodd"
+	}, null, -1)]], 2))]), a("div", Xe, [(l(!0), i(e, null, u(o.messages, (e, t) => (l(), i("p", {
+		class: c(["text-sm leading-5", f.isDangerous ? "text-red-700" : "text-yellow-700"]),
+		key: t,
+		textContent: p(e)
+	}, null, 10, Ze))), 128))])])], 2)) : r("", !0);
+}
+var $e = /*#__PURE__*/ S(qe, [["render", Qe]]), et = { emits: ["clicked"] };
+function tt(e, t, n, r, o, s) {
+	return l(), i("button", {
+		type: "button",
+		tabindex: "-1",
+		class: "bb-dashboard-ui flex items-center justify-center bg-transparent cursor-pointer text-gray-400 focus:outline-hidden hover:text-gray-600",
+		onClick: t[0] ||= b((t) => e.$emit("clicked"), ["prevent"])
+	}, [...t[1] ||= [a("svg", {
+		class: "w-full h-full stroke-current",
+		fill: "none",
+		viewBox: "0 0 24 24"
+	}, [a("path", {
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M6 18L18 6M6 6l12 12"
+	})], -1)]]);
+}
+var nt = /*#__PURE__*/ S(et, [["render", tt]]), rt = {}, it = {
+	class: "w-4 h-4",
+	fill: "none",
+	stroke: "currentColor",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+function at(e, t, n, r, o, s) {
+	return l(), i("svg", it, [...t[0] ||= [a("path", {
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+	}, null, -1)]]);
+}
+//#endregion
+//#region src/components/DownloadLink.vue
+var ot = {
+	components: { "download-icon": /* @__PURE__ */ S(rt, [["render", at]]) },
+	props: {
+		url: {
+			type: String,
+			required: !0
+		},
+		title: {
+			type: String,
+			default: "Скачать"
+		}
+	}
+}, st = ["href", "title"], ct = { class: "ml-1" };
+function lt(e, t, n, r, s, c) {
+	let u = f("download-icon");
+	return l(), i("a", {
+		href: n.url,
+		title: n.title,
+		class: "bb-dashboard-ui inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium leading-none select-none bg-purple-100 text-purple-800 hover:text-purple-600"
+	}, [o(u), a("span", ct, p(n.title), 1)], 8, st);
+}
+var ut = /*#__PURE__*/ S(ot, [["render", lt]]), dt = { props: {
+	isOpen: {
+		type: Boolean,
+		default: !1
+	},
+	headingId: {
+		type: String,
+		required: !0
+	}
+} }, ft = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" }, pt = { class: "fixed inset-0 transition-opacity" }, mt = ["aria-labelledby"];
+function ht(e, n, r, s, u, f) {
+	return l(), i("div", { class: c(["bb-dashboard-ui fixed inset-0 overflow-y-auto z-20", { "pointer-events-none": !r.isOpen }]) }, [a("div", ft, [
+		o(t, {
+			"enter-active-class": "ease-out duration-300",
+			"enter-from-class": "opacity-0",
+			"enter-to-class": "opacity-100",
+			"leave-active-class": "ease-in duration-200",
+			"leave-from-class": "opacity-100",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: _(() => [v(a("div", pt, [...n[0] ||= [a("div", { class: "absolute inset-0 bg-gray-500 opacity-75" }, null, -1)]], 512), [[g, r.isOpen]])]),
+			_: 1
+		}),
+		n[1] ||= a("span", { class: "hidden sm:inline-block sm:align-middle sm:h-screen" }, null, -1),
+		o(t, {
+			"enter-active-class": "ease-out duration-300",
+			"enter-from-class": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+			"enter-to-class": "opacity-100 translate-y-0 sm:scale-100",
+			"leave-active-class": "ease-in duration-200",
+			"leave-from-class": "opacity-100 translate-y-0 sm:scale-100",
+			"leave-to-class": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+		}, {
+			default: _(() => [v(a("div", {
+				class: "relative inline-block align-bottom bg-white rounded-lg text-left overflow-visible shadow-xl transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": r.headingId
+			}, [d(e.$slots, "default")], 8, mt), [[g, r.isOpen]])]),
+			_: 3
+		})
+	])], 2);
+}
+var gt = /*#__PURE__*/ S(dt, [["render", ht]]), _t = {}, vt = {
+	class: "h-7 w-7 text-red-600",
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	"aria-hidden": "true"
+};
+function yt(e, t, n, r, o, s) {
+	return l(), i("svg", vt, [...t[0] ||= [a("path", {
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+	}, null, -1)]]);
+}
+var $ = /*#__PURE__*/ S(_t, [["render", yt]]), bt = {}, xt = {
+	class: "h-7 w-7 text-yellow-400",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 20 20",
+	fill: "currentColor",
+	"aria-hidden": "true"
+};
+function St(e, t, n, r, o, s) {
+	return l(), i("svg", xt, [...t[0] ||= [a("path", {
+		"fill-rule": "evenodd",
+		d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+		"clip-rule": "evenodd"
+	}, null, -1)]]);
+}
+//#endregion
+//#region src/components/ConfirmationModal.vue
+var Ct = {
+	components: {
+		Modal: gt,
+		Dangerous: $,
+		Warning: /* @__PURE__ */ S(bt, [["render", St]])
+	},
+	emits: ["actionConfirmed", "actionCanceled"],
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: !1
+		},
+		type: {
+			type: String,
+			default: "warning",
+			validator: (e) => ["warning", "dangerous"].indexOf(e) !== -1
+		},
+		confirmationHeading: {
+			type: String,
+			default: ""
+		},
+		confirmationText: {
+			type: String,
+			default: ""
+		},
+		cancelButtonText: {
+			type: String,
+			default: "Отмена"
+		},
+		actionButtonText: {
+			type: String,
+			required: !0
+		}
+	},
+	setup() {
+		return { headingId: m() };
+	},
+	computed: {
+		isDangerous() {
+			return this.type === "dangerous";
+		},
+		isWarning() {
+			return this.type === "warning";
+		}
+	}
+}, wt = { class: "flex bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, Tt = { class: "sm:flex sm:items-start" }, Et = { class: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left" }, Dt = ["id"], Ot = { class: "mt-2" }, kt = { class: "text-sm text-gray-500" }, At = { class: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse" };
+function jt(e, t, i, o, s, u) {
+	let d = f("warning"), m = f("dangerous"), h = f("modal");
+	return l(), n(h, {
+		"is-open": i.isOpen,
+		"heading-id": o.headingId
+	}, {
+		default: _(() => [a("div", wt, [a("div", Tt, [a("div", { class: c(["mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10", {
+			"bg-red-100": u.isDangerous,
+			"bg-yellow-100": u.isWarning
+		}]) }, [u.isWarning ? (l(), n(d, { key: 0 })) : r("", !0), u.isDangerous ? (l(), n(m, { key: 1 })) : r("", !0)], 2), a("div", Et, [a("h3", {
+			class: "text-lg leading-6 font-medium text-gray-900",
+			id: o.headingId
+		}, p(i.confirmationHeading), 9, Dt), a("div", Ot, [a("p", kt, p(i.confirmationText), 1)])])])]), a("div", At, [a("button", {
+			type: "button",
+			class: c(["w-full inline-flex justify-center rounded-md border border-transparent shadow-xs px-4 py-2 text-base font-medium text-white focus:outline-hidden focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm", {
+				"bg-red-600 hover:bg-red-700 focus:ring-red-500": u.isDangerous,
+				"bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300": u.isWarning
+			}]),
+			onClick: t[0] ||= b((t) => e.$emit("actionConfirmed"), ["prevent"])
+		}, p(i.actionButtonText), 3), a("button", {
+			type: "button",
+			class: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm",
+			onClick: t[1] ||= b((t) => e.$emit("actionCanceled"), ["prevent"])
+		}, p(i.cancelButtonText), 1)])]),
+		_: 1
+	}, 8, ["is-open", "heading-id"]);
+}
+var Mt = /*#__PURE__*/ S(Ct, [["render", jt]]);
 //#endregion
-export { k as Dot, U as PickDay, D as Popup, ue as RussianMobileFilter, _e as Search, we as SelectDateInterval, Be as SelectSingle };
+export { nt as Closer, Mt as ConfirmationModal, k as Dot, ut as DownloadLink, $e as ErrorMessages, U as PickDay, O as Popup, de as RussianMobileFilter, ve as Search, Te as SelectDateInterval, He as SelectSingle, Ke as SmallBadge };

package/dist/style.css

@@ -1,2 +1,2 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--color-red-500:oklch(63.7% .237 25.331);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-indigo-100:oklch(93% .034 272.788);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--leading-tight:1.25;--radius-md:.375rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--container-phone:calc(19ch + 16px)}}@layer base;@layer components{.bb-dashboard-ui,.bb-dashboard-ui *,.bb-dashboard-ui :before,.bb-dashboard-ui :after{box-sizing:border-box;border:0 solid;margin:0;padding:0}.bb-dashboard-ui button,.bb-dashboard-ui input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.bb-dashboard-ui button{appearance:button}.bb-dashboard-ui input{appearance:none}.bb-dashboard-ui input:focus{box-shadow:none}.bb-dashboard-ui ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.bb-dashboard-ui ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}.bb-dashboard-ui ::placeholder{opacity:1}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mt-1{margin-top:var(--spacing)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.h-2{height:calc(var(--spacing) * 2)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-9{height:calc(var(--spacing) * 9)}.h-full{height:100%}.w-2{width:calc(var(--spacing) * 2)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-9{width:calc(var(--spacing) * 9)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.w-phone{width:var(--container-phone)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-36{min-width:calc(var(--spacing) * 36)}.min-w-72{min-width:calc(var(--spacing) * 72)}.flex-1{flex:1}.flex-none{flex:none}.grow{flex-grow:1}.origin-top-right{transform-origin:100% 0}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-dashed>:not(:last-child)){--tw-border-style:dashed;border-style:dashed}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-gray-200{border-color:var(--color-gray-200)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.whitespace-nowrap{white-space:nowrap}.text-gray-300{color:var(--color-gray-300)}.text-gray-500{color:var(--color-gray-500)}.text-green-300{color:var(--color-green-300)}.text-green-500{color:var(--color-green-500)}.text-red-500{color:var(--color-red-500)}.placeholder-gray-300::placeholder{color:var(--color-gray-300)}.opacity-0{opacity:0}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-sm::placeholder{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}@media (hover:hover){.hover\:bg-indigo-100:hover{background-color:var(--color-indigo-100)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}}.focus\:z-10:focus{z-index:10}.focus\:ring-3:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500\/50:focus{--tw-ring-color:#3080ff80}@supports (color:color-mix(in lab, red, red)){.focus\:ring-blue-500\/50:focus{--tw-ring-color:color-mix(in oklab, var(--color-blue-500) 50%, transparent)}}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}.pika-single{z-index:9999;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:block;position:relative}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{text-align:center;position:relative}.pika-label{z-index:9999;background-color:#fff;margin:0;padding:5px 3px;font-size:14px;font-weight:700;line-height:20px;display:inline-block;position:relative;overflow:hidden}.pika-title select{cursor:pointer;z-index:9998;opacity:0;margin:0;position:absolute;top:5px;left:0}.pika-prev,.pika-next{cursor:pointer;text-indent:20px;white-space:nowrap;opacity:.5;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:75% 75%;border:0;outline:none;width:20px;height:30px;padding:0;display:block;position:relative;overflow:hidden}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pika-select{display:inline-block}.pika-table{border-collapse:collapse;border-spacing:0;border:0;width:100%}.pika-table th,.pika-table td{width:14.2857%;padding:0}.pika-table th{color:#999;text-align:center;font-size:12px;font-weight:700;line-height:25px}.pika-button{cursor:pointer;box-sizing:border-box;color:#666;text-align:right;width:100%;height:initial;background:#f5f5f5;border:0;outline:none;margin:0;padding:5px;font-size:12px;line-height:15px;display:block}.pika-week{color:#999;font-size:11px}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;background:#3af;border-radius:3px;font-weight:700;box-shadow:inset 0 1px 3px #178fe5}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#d5e9f7}.is-startrange .pika-button{color:#fff;box-shadow:none;background:#6cb31d;border-radius:3px}.is-endrange .pika-button{color:#fff;box-shadow:none;background:#3af;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;box-shadow:none;background:#ff8000;border-radius:3px}.pika-table abbr{cursor:help;border-bottom:none}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-800:oklch(43.8% .218 303.724);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--leading-tight:1.25;--radius-md:.375rem;--radius-lg:.5rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--container-phone:calc(19ch + 16px)}}@layer base;@layer components{.bb-dashboard-ui,.bb-dashboard-ui *,.bb-dashboard-ui :before,.bb-dashboard-ui :after{box-sizing:border-box;border:0 solid;margin:0;padding:0}.bb-dashboard-ui button,.bb-dashboard-ui input,button.bb-dashboard-ui{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.bb-dashboard-ui button,button.bb-dashboard-ui{appearance:button}.bb-dashboard-ui a,a.bb-dashboard-ui{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.bb-dashboard-ui input{appearance:none}.bb-dashboard-ui input:focus{box-shadow:none}.bb-dashboard-ui ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.bb-dashboard-ui ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}.bb-dashboard-ui ::placeholder{opacity:1}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.ml-1{margin-left:var(--spacing)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-12{width:calc(var(--spacing) * 12)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.w-phone{width:var(--container-phone)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-36{min-width:calc(var(--spacing) * 36)}.min-w-72{min-width:calc(var(--spacing) * 72)}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.origin-top-right{transform-origin:100% 0}.translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-dashed>:not(:last-child)){--tw-border-style:dashed;border-style:dashed}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-red-400{border-color:var(--color-red-400)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-yellow-400{border-color:var(--color-yellow-400)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-400{background-color:var(--color-yellow-400)}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.p-4{padding:calc(var(--spacing) * 4)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-left{text-align:left}.align-bottom{vertical-align:bottom}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-blue-800{color:var(--color-blue-800)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-300{color:var(--color-green-300)}.text-green-500{color:var(--color-green-500)}.text-purple-800{color:var(--color-purple-800)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.placeholder-gray-300::placeholder{color:var(--color-gray-300)}.opacity-0{opacity:0}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-sm::placeholder{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}@media (hover:hover){.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-indigo-100:hover{background-color:var(--color-indigo-100)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-purple-600:hover{color:var(--color-purple-600)}}.focus\:z-10:focus{z-index:10}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-3:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500\/50:focus{--tw-ring-color:#3080ff80}@supports (color:color-mix(in lab, red, red)){.focus\:ring-blue-500\/50:focus{--tw-ring-color:color-mix(in oklab, var(--color-blue-500) 50%, transparent)}}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-red-500:focus{--tw-ring-color:var(--color-red-500)}.focus\:ring-yellow-300:focus{--tw-ring-color:var(--color-yellow-300)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}@media (width>=40rem){.sm\:mx-0{margin-inline:0}.sm\:my-8{margin-block:calc(var(--spacing) * 8)}.sm\:mt-0{margin-top:0}.sm\:ml-3{margin-left:calc(var(--spacing) * 3)}.sm\:ml-4{margin-left:calc(var(--spacing) * 4)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline-block{display:inline-block}.sm\:h-10{height:calc(var(--spacing) * 10)}.sm\:h-screen{height:100vh}.sm\:w-10{width:calc(var(--spacing) * 10)}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:max-w-lg{max-width:var(--container-lg)}.sm\:translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sm\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:items-start{align-items:flex-start}.sm\:p-0{padding:0}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.sm\:text-left{text-align:left}.sm\:align-middle{vertical-align:middle}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}.pika-single{z-index:9999;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:block;position:relative}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{text-align:center;position:relative}.pika-label{z-index:9999;background-color:#fff;margin:0;padding:5px 3px;font-size:14px;font-weight:700;line-height:20px;display:inline-block;position:relative;overflow:hidden}.pika-title select{cursor:pointer;z-index:9998;opacity:0;margin:0;position:absolute;top:5px;left:0}.pika-prev,.pika-next{cursor:pointer;text-indent:20px;white-space:nowrap;opacity:.5;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:75% 75%;border:0;outline:none;width:20px;height:30px;padding:0;display:block;position:relative;overflow:hidden}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pika-select{display:inline-block}.pika-table{border-collapse:collapse;border-spacing:0;border:0;width:100%}.pika-table th,.pika-table td{width:14.2857%;padding:0}.pika-table th{color:#999;text-align:center;font-size:12px;font-weight:700;line-height:25px}.pika-button{cursor:pointer;box-sizing:border-box;color:#666;text-align:right;width:100%;height:initial;background:#f5f5f5;border:0;outline:none;margin:0;padding:5px;font-size:12px;line-height:15px;display:block}.pika-week{color:#999;font-size:11px}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;background:#3af;border-radius:3px;font-weight:700;box-shadow:inset 0 1px 3px #178fe5}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#d5e9f7}.is-startrange .pika-button{color:#fff;box-shadow:none;background:#6cb31d;border-radius:3px}.is-endrange .pika-button{color:#fff;box-shadow:none;background:#3af;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;box-shadow:none;background:#ff8000;border-radius:3px}.pika-table abbr{cursor:help;border-bottom:none}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@boobooking/dashboard-ui-components",
-    "version": "0.2.1",
-    "description": "Компоненты фильтров дашборда на Vue 3",
+    "version": "0.4.0",
+    "description": "Компоненты дашборда на Vue 3",
     "keywords": [
         "vue",
         "vue3",
@@ -30,7 +30,7 @@
         "playground": "npm run build && vite --config vite.playground.config.js"
     },
     "peerDependencies": {
-        "vue": "^3.2"
+        "vue": "^3.5.0"
     },
     "dependencies": {
         "imask": "^7.6.1",
@@ -40,6 +40,8 @@
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/vite": "^4.3.3",
         "@vitejs/plugin-vue": "^6.0.8",
+        "@vue/test-utils": "^2.5.1",
+        "happy-dom": "^20.14.5",
         "tailwindcss": "^4.3.3",
         "vite": "^8.3.0",
         "vitest": "^5.0.0",