@namba_one/ui-kit-2 1.0.3 → 1.0.5

package/dist/index.es.js

@@ -1,712 +1,201 @@
-var be = Object.defineProperty;
-var $e = (e, t, s) => t in e ? be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var q = (e, t, s) => $e(e, typeof t != "symbol" ? t + "" : t, s);
-import { defineComponent as B, computed as u, createBlock as E, openBlock as d, resolveDynamicComponent as re, mergeProps as H, withCtx as j, renderSlot as K, createElementBlock as w, createElementVNode as y, useCssModule as D, unref as k, normalizeStyle as P, normalizeClass as m, ref as z, onMounted as Te, normalizeProps as ce, guardReactiveProps as we, createVNode as G, createCommentVNode as W, Transition as ee, watch as X, isRef as pe, shallowRef as oe, h as Se, createTextVNode as se, toDisplayString as ne, inject as _e, TransitionGroup as xe, Fragment as ze, renderList as ke, nextTick as ae, provide as Be } from "vue";
-function Me(e, t, s) {
-  const o = e;
-  let n;
-  const l = (o.ownerDocument || document).defaultView;
-  if (l && l.getComputedStyle)
-    return t = t.replace(/([A-Z])/g, "-$1").toLowerCase(), l.getComputedStyle(o, null).getPropertyValue(t);
-  if (o.currentStyle)
-    return t = t.replace(/\-(\w)/g, function(c, i) {
-      return i.toUpperCase();
-    }), n = o.currentStyle[t], /^\d+(em|pt|%|ex)?$/i.test(n) ? function(c) {
-      const i = o.style.left, h = o.runtimeStyle.left;
-      return o.runtimeStyle.left = o.currentStyle.left, o.style.left = c || "0", c = o.style.pixelLeft + "px", o.style.left = i, o.runtimeStyle.left = h, c;
-    }(n) : n;
-}
-function Le(e, t) {
-  switch (e) {
-    case "button":
-      return {
-        role: "button",
-        type: "button"
-      };
-    case "router-link":
-      return {
-        to: t ?? {}
-      };
-    case "a":
-      return {
-        href: t,
-        ...!((t == null ? void 0 : t.indexOf("tel:")) !== -1 || (t == null ? void 0 : t.indexOf("mailto:")) !== -1) && {
-          rel: "noopener noreferrer",
-          target: "_blank"
-        }
-      };
-    default:
-      return {};
-  }
-}
-const ue = /* @__PURE__ */ B({
-  __name: "ButtonBase",
+var se = Object.defineProperty;
+var oe = (s, e, t) => e in s ? se(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var N = (s, e, t) => oe(s, typeof e != "symbol" ? e + "" : e, t);
+import { defineComponent as T, useCssModule as P, computed as $, createElementBlock as w, openBlock as g, normalizeStyle as y, normalizeClass as u, createElementVNode as h, renderSlot as X, ref as m, watch as Y, nextTick as z, createCommentVNode as ae, withDirectives as le, unref as E, mergeProps as j, vShow as ne, createBlock as re, resolveDynamicComponent as ie, withCtx as O, h as ce, Transition as ue, resolveComponent as de, createVNode as F, createTextVNode as _e, toDisplayString as fe, inject as Z, TransitionGroup as me, Fragment as he, renderList as ve, provide as ye } from "vue";
+const B = (s) => `${Number(s / 12).toFixed(3)}rem`, ge = /* @__PURE__ */ T({
+  __name: "Loader",
   props: {
-    tag: { default: "button" },
-    href: {},
-    type: { default: "button" },
-    isLoading: { type: Boolean },
-    isDisabled: { type: Boolean }
+    view: {},
+    size: {}
   },
-  emits: ["click"],
-  setup(e, { emit: t }) {
-    const s = t, o = u(() => ({
-      ...e.tag === "button" && {
-        type: e.type
-      },
-      ...Le(e.tag, e.href),
-      disabled: e.isLoading || e.isDisabled
+  setup(s) {
+    const e = P(), t = $(() => [e.root, e[`view_${s.view}`]]), a = $(() => ({
+      width: B(Number(s.size)),
+      height: B(Number(s.size))
     }));
-    function n(l) {
-      if (!(e.isDisabled || e.isLoading))
-        return s("click", l);
-    }
-    return (l, c) => (d(), E(re(l.tag), H(o.value, { onClick: n }), {
-      default: j(() => [
-        K(l.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
+    return (r, i) => (g(), w("div", {
+      class: u(t.value),
+      style: y(a.value)
+    }, i[0] || (i[0] = [
+      h("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, [
+        h("path", { d: "M47.7766 27.2672C47.1217 32.0334 45.0494 36.4927 41.8287 40.0666C38.6081 43.6405 34.3876 46.164 29.715 47.3096C25.0424 48.4552 20.1334 48.1701 15.6248 46.4913C11.1163 44.8124 7.21636 41.8173 4.4311 37.8945C1.64583 33.9718 0.103788 29.3025 0.00505465 24.4925C-0.0936792 19.6826 1.25545 14.9539 3.8774 10.9202C6.49934 6.88648 10.2731 3.73385 14.7089 1.87138C19.1448 0.00891139 24.038 -0.477421 28.7537 0.475486L28.0406 4.00416C24.0323 3.19419 19.8731 3.60757 16.1026 5.19067C12.3321 6.77377 9.12444 9.45351 6.89579 12.8822C4.66713 16.3109 3.52037 20.3302 3.6043 24.4187C3.68822 28.5071 4.99895 32.476 7.36643 35.8104C9.73391 39.1447 13.0488 41.6905 16.8811 43.1176C20.7134 44.5446 24.8861 44.787 28.8578 43.8132C32.8295 42.8394 36.4168 40.6945 39.1544 37.6566C41.892 34.6188 43.6534 30.8284 44.2101 26.7771L47.7766 27.2672Z" })
+      ], -1)
+    ]), 6));
   }
-}), Ce = {
-  xmlns: "http://www.w3.org/2000/svg",
-  "xmlns:xlink": "http://www.w3.org/1999/xlink",
-  style: { width: "1em", height: "1em", fill: "currentColor" }
-}, Ie = ["xlink:href"];
-function Fe(e, t) {
-  return d(), w("svg", Ce, [
-    y("use", {
-      "xlink:href": "#" + e.name
-    }, null, 8, Ie)
-  ]);
-}
-const Re = {
-  name: "SvgIcon",
-  props: {
-    name: {
-      type: String,
-      required: !0
-    }
-  },
-  render: Fe
-}, le = (e) => `${Number(e / 12).toFixed(3)}rem`, Oe = /* @__PURE__ */ B({
-  __name: "Icon",
+}), we = "Loader__root_6a680", $e = "Loader__rotate360_01915", Te = "Loader__view_default_209d3", be = "Loader__view_critical_2dd0d", pe = "Loader__view_surface_6ebf8", Ce = {
+  root: we,
+  rotate360: $e,
+  view_default: Te,
+  view_critical: be,
+  view_surface: pe
+}, p = (s, e) => {
+  const t = s.__vccOpts || s;
+  for (const [a, r] of e)
+    t[a] = r;
+  return t;
+}, Se = {
+  $style: Ce
+}, Fe = /* @__PURE__ */ p(ge, [["__cssModules", Se]]), xe = /* @__PURE__ */ T({
+  __name: "SkeletonWrapper",
+  setup(s) {
+    return (e, t) => (g(), w("div", {
+      class: u(e.$style.root)
+    }, [
+      X(e.$slots, "default")
+    ], 2));
+  }
+}), Ie = "SkeletonWrapper__root_e7206", Me = "SkeletonWrapper__pulse_fef1d", Ee = {
+  root: Ie,
+  pulse: Me
+}, Be = {
+  $style: Ee
+}, Le = /* @__PURE__ */ p(xe, [["__cssModules", Be]]), ke = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='_Слой_1'%20data-name='Слой_1'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%2024%2024'%3e%3c!--%20Generator:%20Adobe%20Illustrator%2029.2.1,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%202.1.0%20Build%20116)%20--%3e%3cdefs%3e%3cstyle%3e%20.st0,%20.st1%20{%20fill:%20hsla(204,%2017%25,%2066%25,%201);%20}%20.st1%20{%20fill-rule:%20evenodd;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st1'%20d='M21.2,7c-.1-.9-.3-1.7-.8-2.4-.3-.4-.6-.8-1-1-.7-.5-1.5-.7-2.4-.8-.9,0-2,0-3.4,0h-3.1c-1.4,0-2.5,0-3.4,0-.9,0-1.7.3-2.4.8-.4.3-.8.6-1,1-.5.7-.7,1.5-.8,2.4,0,.9,0,2,0,3.4h0v3h0c0,1.4,0,2.6,0,3.5,0,.9.3,1.7.8,2.4.3.4.6.8,1,1,.7.5,1.5.7,2.4.8.9,0,2,0,3.4,0h3.1c1.4,0,2.5,0,3.4,0,.9-.1,1.7-.3,2.4-.8.4-.3.8-.6,1-1,.5-.7.7-1.5.8-2.4,0-.9,0-2,0-3.4h0v-3h0c0-1.4,0-2.6,0-3.5ZM19.4,16.8c0,.8-.2,1.2-.5,1.5-.2.2-.4.5-.7.7-.3.2-.8.4-1.5.5-.8,0-1.8,0-3.3,0h-3c-1.5,0-2.5,0-3.3,0-.5,0-.9-.1-1.1-.3l7.4-7.4c.5-.5.9-.9,1.2-1.1.3-.2.4-.3.5-.3.1,0,.2,0,.3,0,0,0,.2,0,.5.3.3.2.6.6,1.2,1.1l2.3,2.3c0,1.2,0,2,0,2.7ZM19.5,11.5l-1.1-1.1h0c-.5-.5-.9-.9-1.3-1.2-.4-.3-.8-.6-1.3-.7-.3,0-.6,0-.9,0-.5,0-1,.3-1.3.7-.4.3-.8.7-1.3,1.2h0s-7.4,7.5-7.4,7.5c-.1-.3-.2-.6-.3-1.1,0-.8,0-1.8,0-3.3v-3c0-1.5,0-2.5,0-3.3,0-.8.2-1.2.5-1.5.2-.2.4-.5.7-.7.3-.2.8-.4,1.5-.5.8,0,1.8,0,3.3,0h3c1.5,0,2.5,0,3.3,0,.8,0,1.2.2,1.5.5.2.2.5.4.7.7.2.3.4.8.5,1.5,0,.8,0,1.8,0,3.3v1Z'/%3e%3ccircle%20class='st0'%20cx='8.8'%20cy='8.5'%20r='1.8'/%3e%3c/svg%3e", Ae = ["src"], Ne = ["width", "height", "src", "alt"], ze = /* @__PURE__ */ T({
+  __name: "TheImage",
   props: {
-    name: {},
-    color: {},
-    size: {}
+    src: {},
+    alt: {},
+    width: {},
+    height: {},
+    objectFit: {},
+    hasPlaceholder: { type: Boolean, default: !1 },
+    hasPriority: { type: Boolean, default: !1 },
+    isLayoutFill: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const t = D(), s = u(() => [
-      t.root,
-      t.color,
-      t[`color_${e.color}`],
-      t[e.name]
-    ]), o = u(() => e.size ? { width: le(Number(e.size)), height: le(Number(e.size)) } : {});
-    return (n, l) => (d(), E(k(Re), {
-      class: m(s.value),
-      name: n.name,
-      style: P(o.value)
-    }, null, 8, ["class", "name", "style"]));
+  setup(s) {
+    const e = m("loading"), t = m(""), a = $(() => ({
+      ...s.hasPriority && {
+        fetchpriority: "high"
+      }
+    })), r = $(() => ({
+      opacity: e.value === "idle" ? 1 : 0,
+      ...s.isLayoutFill && {
+        width: "100%",
+        height: "100%"
+      }
+    }));
+    function i() {
+      e.value = "idle";
+    }
+    function S() {
+      s.hasPlaceholder && (e.value = "error");
+    }
+    return Y(
+      () => s.src,
+      (c) => {
+        z(() => {
+          t.value = c;
+        });
+      },
+      { immediate: !0 }
+    ), (c, L) => (g(), w("div", {
+      class: u(c.$style.root)
+    }, [
+      c.hasPlaceholder && e.value !== "idle" ? (g(), w("div", {
+        key: 0,
+        class: u([
+          c.$style.placeholder,
+          e.value === "loading" && c.$style.hasPulse
+        ])
+      }, [
+        h("img", {
+          src: E(ke),
+          alt: "image placeholder",
+          style: y([e.value !== "error" && { opacity: 0 }])
+        }, null, 12, Ae)
+      ], 2)) : ae("", !0),
+      le(h("img", j(a.value, {
+        class: [c.$style.image, c.$style[`objectFit_${c.objectFit}`]],
+        style: r.value,
+        width: c.width,
+        height: c.height,
+        src: t.value,
+        alt: c.alt,
+        onLoad: i,
+        onError: S
+      }), null, 16, Ne), [
+        [ne, e.value !== "error"]
+      ])
+    ], 2));
   }
-}), Pe = "Icon__root_9c34a", Ee = "Icon__color_9a568", je = "Icon__color_secondary_016e8", Ae = "Icon__color_base_49ca4", Ve = "Icon__color_error_21923", De = "Icon__color_success_e8b4a", Ne = "Icon__color_inverse_4d7fc", Ge = "Icon__color_green_35ae9", We = "Icon__color_blue_c217d", He = "Icon__color_red_ecc39", Ke = "Icon__color_disable_bf4c2", Ue = {
+}), Pe = "TheImage__root_484a1", je = "TheImage__image_2c261", Oe = "TheImage__objectFit_cover_8f5ee", Ge = "TheImage__objectFit_contain_c6076", Re = "TheImage__placeholder_1e624", Ve = "TheImage__hasPulse_af1f2", Ke = "TheImage__pulse_56855", De = {
   root: Pe,
-  color: Ee,
-  "color_brand-accent": "Icon__color_brand-accent_0f65a",
-  color_secondary: je,
-  color_base: Ae,
-  color_error: Ve,
-  color_success: De,
-  color_inverse: Ne,
-  color_green: Ge,
-  color_blue: We,
-  color_red: He,
-  color_disable: Ke
-}, C = (e, t) => {
-  const s = e.__vccOpts || e;
-  for (const [o, n] of t)
-    s[o] = n;
-  return s;
-}, Xe = {
-  $style: Ue
-}, Y = /* @__PURE__ */ C(Oe, [["__cssModules", Xe]]), Ye = /* @__PURE__ */ B({
+  image: je,
+  objectFit_cover: Oe,
+  objectFit_contain: Ge,
+  placeholder: Re,
+  hasPulse: Ve,
+  pulse: Ke
+}, We = {
+  $style: De
+}, Xe = /* @__PURE__ */ p(ze, [["__cssModules", We]]), Ye = /* @__PURE__ */ T({
   __name: "TheText",
   props: {
-    testId: {},
     tag: { default: "p" },
-    name: {},
-    align: {},
-    color: {},
-    isEllipsis: { type: Boolean },
+    size: { default: "body" },
+    align: { default: "left" },
+    weight: { default: "regular" },
+    color: { default: "text-common-base-primary-default" },
     numberOfLines: {},
-    fontFamily: {}
+    isMono: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const t = D(), s = u(() => [
-      t.root,
-      t[`font_${e.name}`],
-      t.color,
-      t[`color_${e.color}`],
-      t[`align_${e.align}`],
-      e.fontFamily === "SFMono" ? t["is-mono"] : ""
-    ]), o = u(() => e.numberOfLines ? {
+  setup(s) {
+    const e = P(), t = $(() => [
+      e.root,
+      e[`font_${s.size}`],
+      e.color,
+      s.color,
+      e[`align_${s.align}`],
+      e[`weight_${s.weight}`],
+      s.isMono && e["is-mono"]
+    ]), a = $(() => Number(s.numberOfLines) ? {
       style: {
-        "-webkit-line-clamp": e.numberOfLines,
+        "-webkit-line-clamp": s.numberOfLines,
         display: "-webkit-box",
         "-webkit-box-orient": "vertical",
-        "line-clamp": e.numberOfLines,
+        "line-clamp": s.numberOfLines,
         overflow: "hidden"
       }
     } : null);
-    return (n, l) => (d(), E(re(n.tag), H({
-      "data-testid": n.testId,
-      class: s.value
-    }, o.value), {
-      default: j(() => [
-        K(n.$slots, "default")
+    return (r, i) => (g(), re(ie(r.tag), j({ class: t.value }, a.value), {
+      default: O(() => [
+        X(r.$slots, "default")
       ]),
       _: 3
-    }, 16, ["data-testid", "class"]));
+    }, 16, ["class"]));
   }
-}), Ze = "text__root_5b5d3", qe = "text__font_titleHuge_c2a02", Je = "text__font_titleExtraLarge_9e2ab", Qe = "text__font_titleLarge_adbbd", et = "text__font_titleLargeBold_401fa", tt = "text__font_titleLargeHeavy_d1dcb", ot = "text__font_titleLargeRegular_f5eaa", st = "text__font_titleMedium_11da4", nt = "text__font_titleSmall_aa4de", at = "text__font_titleSmallRegular_c400f", lt = "text__font_titleExtraSmall_fc2fb", it = "text__font_titleExtraSmallBold_c2bd8", rt = "text__font_headlineMedium_a22b3", ct = "text__font_headlineSmall_dfe04", _t = "text__font_subheadLarge_ad928", ut = "text__font_subheadMedium_b6060", dt = "text__font_subheadSmall_648fc", ft = "text__font_body_542cd", mt = "text__font_bodyMedium_9856a", ht = "text__font_textLarge_e8c08", vt = "text__font_textMedium_aac40", yt = "text__font_textSmall_3a961", gt = "text__font_captionLarge_0e2be", bt = "text__font_captionMedium_1f3aa", $t = "text__font_captionSmall_0c0b8", Tt = "text__color_70245", wt = "text__color_base_75fad", pt = "text__color_secondary_757e2", St = "text__color_error_3237c", xt = "text__color_success_df18c", zt = "text__color_inverse_7c356", kt = "text__color_disable_930e6", Bt = "text__align_left_078d3", Mt = "text__align_center_6444c", Lt = "text__align_right_daaa4", Ct = {
+}), Ze = "text__root_5b5d3", He = "text__font_title1_22992", Ue = "text__font_title2_b4f65", qe = "text__font_title3_76ef4", Je = "text__font_headline_62d02", Qe = "text__font_body_542cd", et = "text__font_subhead_3ab93", tt = "text__font_caption_4d6f0", st = "text__color_70245", ot = "text__align_left_078d3", at = "text__align_center_6444c", lt = "text__align_right_daaa4", nt = "text__weight_regular_d3c88", rt = "text__weight_medium_679e2", it = "text__weight_semibold_e82dc", ct = "text__weight_bold_44baa", ut = {
   root: Ze,
   "is-mono": "text__is-mono_8b95d",
-  font_titleHuge: qe,
-  font_titleExtraLarge: Je,
-  font_titleLarge: Qe,
-  font_titleLargeBold: et,
-  font_titleLargeHeavy: tt,
-  font_titleLargeRegular: ot,
-  font_titleMedium: st,
-  font_titleSmall: nt,
-  font_titleSmallRegular: at,
-  font_titleExtraSmall: lt,
-  font_titleExtraSmallBold: it,
-  font_headlineMedium: rt,
-  font_headlineSmall: ct,
-  font_subheadLarge: _t,
-  font_subheadMedium: ut,
-  font_subheadSmall: dt,
-  font_body: ft,
-  font_bodyMedium: mt,
-  font_textLarge: ht,
-  font_textMedium: vt,
-  font_textSmall: yt,
-  font_captionLarge: gt,
-  font_captionMedium: bt,
-  font_captionSmall: $t,
-  color: Tt,
-  color_base: wt,
-  color_secondary: pt,
-  "color_brand-accent": "text__color_brand-accent_2e45f",
-  "color_brand-market": "text__color_brand-market_06771",
-  color_error: St,
-  color_success: xt,
-  color_inverse: zt,
-  "color_inverse-secondary": "text__color_inverse-secondary_1ecb3",
-  color_disable: kt,
-  align_left: Bt,
-  align_center: Mt,
-  align_right: Lt,
+  font_title1: He,
+  font_title2: Ue,
+  font_title3: qe,
+  font_headline: Je,
+  font_body: Qe,
+  font_subhead: et,
+  font_caption: tt,
+  color: st,
+  align_left: ot,
+  align_center: at,
+  align_right: lt,
+  weight_regular: nt,
+  weight_medium: rt,
+  weight_semibold: it,
+  weight_bold: ct,
   "is-ellipsis": "text__is-ellipsis_4b9a7"
-}, It = {
-  $style: Ct
-}, Z = /* @__PURE__ */ C(Ye, [["__cssModules", It]]), Ft = /* @__PURE__ */ B({
-  __name: "TheTextSkeleton",
-  props: {
-    color: {},
-    size: {},
-    widthRange: {}
-  },
-  setup(e) {
-    const t = D(), s = z(), o = z(), n = u(() => [t.root, t[`size_${e.size}`], t[`color_${e.color}`]]);
-    function l() {
-      if (e.widthRange && e.widthRange[0] && e.widthRange[1] && s.value) {
-        const c = Me(s.value, "max-width");
-        if (c) {
-          const i = ~c.toString().indexOf("%") ? parseInt(c.toString().replace("%", ""), 10) : 100, h = parseFloat(
-            (Math.abs(e.widthRange[1] - e.widthRange[0]) * Math.random() * 100).toFixed(2)
-          ), p = (e.widthRange[0] >= e.widthRange[1] ? e.widthRange[0] : e.widthRange[1]) * 100;
-          o.value = `${(p - h) * i / 100}%`;
-        }
-      }
-    }
-    return Te(() => l()), (c, i) => (d(), w("div", {
-      ref_key: "skeleton",
-      ref: s,
-      class: m(n.value),
-      style: P({ width: o.value }),
-      key: o.value
-    }, i[0] || (i[0] = [
-      y("span", null, null, -1)
-    ]), 6));
-  }
-}), Rt = "TheTextSkeleton__root_e7018", Ot = "TheTextSkeleton__color_620e0", Pt = "TheTextSkeleton__color_base_10465", Et = "TheTextSkeleton__color_secondary_e1ef1", jt = "TheTextSkeleton__color_error_64442", At = "TheTextSkeleton__color_success_5a3da", Vt = "TheTextSkeleton__color_inverse_54207", Dt = "TheTextSkeleton__color_disable_88db9", Nt = "TheTextSkeleton__size_title_huge_23e69", Gt = "TheTextSkeleton__size_title_large_3374c", Wt = "TheTextSkeleton__size_title_medium_0f6e0", Ht = "TheTextSkeleton__size_title_small_138c6", Kt = "TheTextSkeleton__size_title_extraSmall_2f6ca", Ut = "TheTextSkeleton__size_headline_small_96a95", Xt = "TheTextSkeleton__size_subhead_large_effd2", Yt = "TheTextSkeleton__size_text_small_e5cd8", Zt = "TheTextSkeleton__size_caption_small_f5390", qt = {
-  root: Rt,
-  color: Ot,
-  color_base: Pt,
-  color_secondary: Et,
-  "color_brand-accent": "TheTextSkeleton__color_brand-accent_afa16",
-  "color_brand-market": "TheTextSkeleton__color_brand-market_fca73",
-  color_error: jt,
-  color_success: At,
-  color_inverse: Vt,
-  "color_inverse-secondary": "TheTextSkeleton__color_inverse-secondary_5e112",
-  color_disable: Dt,
-  size_title_huge: Nt,
-  size_title_large: Gt,
-  size_title_medium: Wt,
-  size_title_small: Ht,
-  size_title_extraSmall: Kt,
-  size_headline_small: Ut,
-  size_subhead_large: Xt,
-  size_text_small: Yt,
-  size_caption_small: Zt
-}, Jt = {
-  $style: qt
-}, Qt = /* @__PURE__ */ C(Ft, [["__cssModules", Jt]]), eo = ["id"], to = { "stroke-width": "15" }, oo = ["stroke"], so = ["stroke"], no = /* @__PURE__ */ B({
-  __name: "Loader",
-  props: {
-    view: {},
-    size: {}
-  },
-  setup(e) {
-    const t = D(), s = {
-      orange: "rgba(255, 97, 0, 1)",
-      white: "rgba(255, 255, 255, 1)",
-      black: "rgba(35, 36, 37, 1)",
-      gray: "rgba(197, 205, 220, 1)",
-      red: "rgba(255, 45, 85, 1)"
-    }, o = {
-      a: `spinner-${e.view}-a`,
-      b: `spinner-${e.view}-b`
-    }, n = u(() => [t.root, t[`size_${e.size}`]]), l = u(
-      () => s[e.view]
-    ), c = u(() => ({
-      color: l.value,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 200 200",
-      width: "200",
-      height: "200"
-    }));
-    return (i, h) => (d(), w("div", {
-      class: m(n.value)
-    }, [
-      (d(), w("svg", ce(we(c.value)), [
-        h[1] || (h[1] = y("defs", null, [
-          y("stop", {
-            offset: "0%",
-            "stop-opacity": "0",
-            "stop-color": "currentColor"
-          }),
-          y("stop", {
-            offset: "100%",
-            "stop-opacity": ".5",
-            "stop-color": "currentColor"
-          })
-        ], -1)),
-        y("linearGradient", {
-          id: o.b
-        }, h[0] || (h[0] = [
-          y("stop", {
-            offset: "0%",
-            "stop-opacity": "0",
-            "stop-color": "currentColor"
-          }, null, -1),
-          y("stop", {
-            offset: "100%",
-            "stop-opacity": ".5",
-            "stop-color": "currentColor"
-          }, null, -1)
-        ]), 8, eo),
-        y("g", to, [
-          y("path", {
-            stroke: `url(#${o.a})`,
-            d: "M15 100a85 85 0 0 1 170 0"
-          }, null, 8, oo),
-          y("path", {
-            stroke: `url(#${o.b})`,
-            d: "M185 100a85 85 0 0 1-170 0"
-          }, null, 8, so)
-        ])
-      ], 16))
-    ], 2));
-  }
-}), ao = "Loader__root_6a680", lo = "Loader__rotate360_01915", io = "Loader__size_xs_72d28", ro = "Loader__size_s_d91c3", co = "Loader__size_m_c2262", _o = "Loader__size_l_ab27e", uo = "Loader__size_xl_f9fa1", fo = {
-  root: ao,
-  rotate360: lo,
-  size_xs: io,
-  size_s: ro,
-  size_m: co,
-  size_l: _o,
-  size_xl: uo
-}, mo = {
-  $style: fo
-}, de = /* @__PURE__ */ C(no, [["__cssModules", mo]]), ho = {
-  xl: 20,
-  l: 20,
-  m: 20,
-  s: 18
-}, vo = {
-  xl: "headlineSmall",
-  l: "headlineSmall",
-  m: "subheadMedium",
-  s: "textMedium"
-}, yo = {
-  primary: "inverse",
-  tertiary: "brand-accent",
-  outlineBase: "base",
-  system: "secondary",
-  brandOpacity: "brand-accent",
-  secondary: "base",
-  criticalOnSurface: "error",
-  onDarkPrimary: "base",
-  base: "inverse",
-  criticalOpacity: "error"
-}, fe = {
-  xl: "m",
-  l: "m",
-  m: "m",
-  s: "s"
-}, go = {
-  primary: "white",
-  tertiary: "orange",
-  outlineBase: "black",
-  system: "gray",
-  brandOpacity: "orange",
-  secondary: "black",
-  criticalOnSurface: "red",
-  onDarkPrimary: "black",
-  base: "white",
-  criticalOpacity: "red"
-}, bo = {
-  xl: "s",
-  l: "s",
-  m: "xs",
-  s: "xs"
-}, $o = /* @__PURE__ */ B({
-  __name: "Button",
-  props: {
-    tag: {},
-    href: {},
-    type: {},
-    isLoading: { type: Boolean },
-    isDisabled: { type: Boolean },
-    view: {},
-    size: {},
-    interactionType: { default: "web" },
-    radius: {},
-    iconLeft: {},
-    iconRight: {},
-    isWide: { type: Boolean }
-  },
-  emits: ["click"],
-  setup(e, { emit: t }) {
-    const s = t, o = D(), n = u(() => ho[e.size]), l = u(() => vo[e.size]), c = u(() => e.isDisabled ? "disable" : yo[e.view]), i = u(() => e.radius ? e.radius : fe[e.size]), h = u(() => ({
-      class: o.loader,
-      view: go[e.view],
-      size: bo[e.size]
-    })), p = u(() => [
-      o.root,
-      o[`size_${e.size}`],
-      o[`view_${e.view}`],
-      o[`radius_${i.value}`],
-      o[`interaction-type_${e.interactionType}`],
-      e.isDisabled && o["is-disabled"],
-      e.isWide && o["is-wide"]
-    ]), v = u(() => [
-      o.wrapper,
-      e.isLoading && o["is-loading"]
-    ]);
-    function _(r) {
-      s("click", r);
-    }
-    return (r, b) => (d(), E(k(ue), {
-      class: m(p.value),
-      tag: r.tag,
-      href: r.href,
-      type: r.type,
-      "is-loading": r.isLoading,
-      "is-disabled": r.isDisabled,
-      onClick: _
-    }, {
-      default: j(() => [
-        y("div", {
-          class: m(v.value)
-        }, [
-          r.iconLeft ? (d(), E(k(Y), {
-            key: 0,
-            name: r.iconLeft,
-            color: c.value,
-            size: n.value
-          }, null, 8, ["name", "color", "size"])) : W("", !0),
-          G(k(Z), {
-            name: l.value,
-            color: c.value
-          }, {
-            default: j(() => [
-              K(r.$slots, "default")
-            ]),
-            _: 3
-          }, 8, ["name", "color"]),
-          r.iconRight ? (d(), E(k(Y), {
-            key: 1,
-            name: r.iconRight,
-            color: c.value,
-            size: n.value
-          }, null, 8, ["name", "color", "size"])) : W("", !0)
-        ], 2),
-        G(ee, {
-          name: "fade",
-          mode: "out-in"
-        }, {
-          default: j(() => [
-            r.isLoading ? (d(), E(k(de), ce(H({ key: 0 }, h.value)), null, 16)) : W("", !0)
-          ]),
-          _: 1
-        })
-      ]),
-      _: 3
-    }, 8, ["class", "tag", "href", "type", "is-loading", "is-disabled"]));
-  }
-}), To = "Button__root_d73c7", wo = "Button__size_xl_d4508", po = "Button__size_l_36a47", So = "Button__size_m_a0dfa", xo = "Button__size_s_c29cc", zo = "Button__view_2d25c", ko = "Button__view_primary_2e1d8", Bo = "Button__view_tertiary_87211", Mo = "Button__view_outlineBase_c6ec7", Lo = "Button__view_system_b353e", Co = "Button__view_brandOpacity_464b2", Io = "Button__view_secondary_04e61", Fo = "Button__view_criticalOnSurface_466b2", Ro = "Button__view_criticalOpacity_0847b", Oo = "Button__view_onDarkPrimary_1e4eb", Po = "Button__view_base_a30a0", Eo = "Button__view_skeleton_fd281", jo = "Button__radius_m_ee05f", Ao = "Button__radius_s_f15d9", Vo = "Button__wrapper_e7d56", Do = "Button__loader_37a37", me = {
-  root: To,
-  "interaction-type_webview": "Button__interaction-type_webview_cbcd8",
-  size_xl: wo,
-  size_l: po,
-  size_m: So,
-  size_s: xo,
-  view: zo,
-  view_primary: ko,
-  view_tertiary: Bo,
-  view_outlineBase: Mo,
-  view_system: Lo,
-  view_brandOpacity: Co,
-  view_secondary: Io,
-  view_criticalOnSurface: Fo,
-  view_criticalOpacity: Ro,
-  view_onDarkPrimary: Oo,
-  view_base: Po,
-  view_skeleton: Eo,
-  radius_m: jo,
-  radius_s: Ao,
-  wrapper: Vo,
-  loader: Do,
-  "is-disabled": "Button__is-disabled_b357e",
-  "is-loading": "Button__is-loading_53182",
-  "is-wide": "Button__is-wide_3f0c1"
-}, No = {
-  $style: me
-}, Go = /* @__PURE__ */ C($o, [["__cssModules", No]]), Wo = /* @__PURE__ */ B({
-  __name: "ButtonSkeleton",
-  props: {
-    size: {}
-  },
-  setup(e) {
-    const t = D(), s = u(() => fe[e.size]), o = u(() => [
-      t.root,
-      t[`size_${e.size}`],
-      t.view_skeleton,
-      t[`radius_${s.value}`],
-      t["is-wide"]
-    ]);
-    return (n, l) => (d(), w("div", {
-      class: m(o.value)
-    }, null, 2));
-  }
-}), Ho = {
-  $style: me
-}, Ko = /* @__PURE__ */ C(Wo, [["__cssModules", Ho]]), Uo = /* @__PURE__ */ B({
-  __name: "SkeletonWrapper",
-  setup(e) {
-    const t = D(), s = u(() => [t.root]);
-    return (o, n) => (d(), w("div", {
-      class: m(s.value)
-    }, [
-      K(o.$slots, "default")
-    ], 2));
-  }
-}), Xo = "SkeletonWrapper__root_e7206", Yo = "SkeletonWrapper__pulse_fef1d", Zo = {
-  root: Xo,
-  pulse: Yo
-}, qo = {
-  $style: Zo
-}, Jo = /* @__PURE__ */ C(Uo, [["__cssModules", qo]]);
-function V(e) {
-  return typeof e == "function" ? e() : k(e);
-}
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const ie = () => {
-};
-function J(e, t = !1, s = "Timeout") {
-  return new Promise((o, n) => {
-    setTimeout(t ? () => n(s) : o, e);
-  });
-}
-function Q(e, t = !1) {
-  function s(_, { flush: r = "sync", deep: b = !1, timeout: M, throwOnTimeout: A } = {}) {
-    let S = null;
-    const L = [new Promise((R) => {
-      S = X(
-        e,
-        (T) => {
-          _(T) !== t && (S == null || S(), R(T));
-        },
-        {
-          flush: r,
-          deep: b,
-          immediate: !0
-        }
-      );
-    })];
-    return M != null && L.push(
-      J(M, A).then(() => V(e)).finally(() => S == null ? void 0 : S())
-    ), Promise.race(L);
-  }
-  function o(_, r) {
-    if (!pe(_))
-      return s((T) => T === _, r);
-    const { flush: b = "sync", deep: M = !1, timeout: A, throwOnTimeout: S } = r ?? {};
-    let $ = null;
-    const R = [new Promise((T) => {
-      $ = X(
-        [e, _],
-        ([a, f]) => {
-          t !== (a === f) && ($ == null || $(), T(a));
-        },
-        {
-          flush: b,
-          deep: M,
-          immediate: !0
-        }
-      );
-    })];
-    return A != null && R.push(
-      J(A, S).then(() => V(e)).finally(() => ($ == null || $(), V(e)))
-    ), Promise.race(R);
-  }
-  function n(_) {
-    return s((r) => !!r, _);
-  }
-  function l(_) {
-    return o(null, _);
-  }
-  function c(_) {
-    return o(void 0, _);
-  }
-  function i(_) {
-    return s(Number.isNaN, _);
-  }
-  function h(_, r) {
-    return s((b) => {
-      const M = Array.from(b);
-      return M.includes(_) || M.includes(V(_));
-    }, r);
-  }
-  function p(_) {
-    return v(1, _);
-  }
-  function v(_ = 1, r) {
-    let b = -1;
-    return s(() => (b += 1, b >= _), r);
-  }
-  return Array.isArray(V(e)) ? {
-    toMatch: s,
-    toContains: h,
-    changed: p,
-    changedTimes: v,
-    get not() {
-      return Q(e, !t);
-    }
-  } : {
-    toMatch: s,
-    toBe: o,
-    toBeTruthy: n,
-    toBeNull: l,
-    toBeNaN: i,
-    toBeUndefined: c,
-    changed: p,
-    changedTimes: v,
-    get not() {
-      return Q(e, !t);
-    }
-  };
-}
-function Qo(e) {
-  return Q(e);
-}
-function es(e, t, s) {
-  const {
-    immediate: o = !0,
-    delay: n = 0,
-    onError: l = ie,
-    onSuccess: c = ie,
-    resetOnExecute: i = !0,
-    shallow: h = !0,
-    throwError: p
-  } = s ?? {}, v = h ? oe(t) : z(t), _ = z(!1), r = z(!1), b = oe(void 0);
-  async function M($ = 0, ...L) {
-    i && (v.value = t), b.value = void 0, _.value = !1, r.value = !0, $ > 0 && await J($);
-    const R = typeof e == "function" ? e(...L) : e;
-    try {
-      const T = await R;
-      v.value = T, _.value = !0, c(T);
-    } catch (T) {
-      if (b.value = T, l(T), p)
-        throw T;
-    } finally {
-      r.value = !1;
-    }
-    return v.value;
-  }
-  o && M(n);
-  const A = {
-    state: v,
-    isReady: _,
-    isLoading: r,
-    error: b,
-    execute: M
-  };
-  function S() {
-    return new Promise(($, L) => {
-      Qo(r).toBe(!1).then(() => $(A)).catch(L);
-    });
-  }
-  return {
-    ...A,
-    then($, L) {
-      return S().then($, L);
-    }
-  };
-}
-async function ts(e) {
-  return new Promise((t, s) => {
-    const o = new Image(), { src: n, srcset: l, sizes: c, class: i, loading: h, crossorigin: p, referrerPolicy: v } = e;
-    o.src = n, l && (o.srcset = l), c && (o.sizes = c), i && (o.className = i), h && (o.loading = h), p && (o.crossOrigin = p), v && (o.referrerPolicy = v), o.onload = () => t(o), o.onerror = s;
-  });
-}
-function os(e, t = {}) {
-  const s = es(
-    () => ts(V(e)),
-    void 0,
-    {
-      resetOnExecute: !0,
-      ...t
-    }
-  );
-  return X(
-    () => V(e),
-    () => s.execute(t.delay),
-    { deep: !0 }
-  ), s;
-}
-const ss = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='_Слой_1'%20data-name='Слой_1'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%2024%2024'%3e%3c!--%20Generator:%20Adobe%20Illustrator%2029.2.1,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%202.1.0%20Build%20116)%20--%3e%3cdefs%3e%3cstyle%3e%20.st0,%20.st1%20{%20fill:%20currentColor;%20}%20.st1%20{%20fill-rule:%20evenodd;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st1'%20d='M21.2,7c-.1-.9-.3-1.7-.8-2.4-.3-.4-.6-.8-1-1-.7-.5-1.5-.7-2.4-.8-.9,0-2,0-3.4,0h-3.1c-1.4,0-2.5,0-3.4,0-.9,0-1.7.3-2.4.8-.4.3-.8.6-1,1-.5.7-.7,1.5-.8,2.4,0,.9,0,2,0,3.4h0v3h0c0,1.4,0,2.6,0,3.5,0,.9.3,1.7.8,2.4.3.4.6.8,1,1,.7.5,1.5.7,2.4.8.9,0,2,0,3.4,0h3.1c1.4,0,2.5,0,3.4,0,.9-.1,1.7-.3,2.4-.8.4-.3.8-.6,1-1,.5-.7.7-1.5.8-2.4,0-.9,0-2,0-3.4h0v-3h0c0-1.4,0-2.6,0-3.5ZM19.4,16.8c0,.8-.2,1.2-.5,1.5-.2.2-.4.5-.7.7-.3.2-.8.4-1.5.5-.8,0-1.8,0-3.3,0h-3c-1.5,0-2.5,0-3.3,0-.5,0-.9-.1-1.1-.3l7.4-7.4c.5-.5.9-.9,1.2-1.1.3-.2.4-.3.5-.3.1,0,.2,0,.3,0,0,0,.2,0,.5.3.3.2.6.6,1.2,1.1l2.3,2.3c0,1.2,0,2,0,2.7ZM19.5,11.5l-1.1-1.1h0c-.5-.5-.9-.9-1.3-1.2-.4-.3-.8-.6-1.3-.7-.3,0-.6,0-.9,0-.5,0-1,.3-1.3.7-.4.3-.8.7-1.3,1.2h0s-7.4,7.5-7.4,7.5c-.1-.3-.2-.6-.3-1.1,0-.8,0-1.8,0-3.3v-3c0-1.5,0-2.5,0-3.3,0-.8.2-1.2.5-1.5.2-.2.4-.5.7-.7.3-.2.8-.4,1.5-.5.8,0,1.8,0,3.3,0h3c1.5,0,2.5,0,3.3,0,.8,0,1.2.2,1.5.5.2.2.5.4.7.7.2.3.4.8.5,1.5,0,.8,0,1.8,0,3.3v1Z'/%3e%3ccircle%20class='st0'%20cx='8.8'%20cy='8.5'%20r='1.8'/%3e%3c/svg%3e", U = {
+}, dt = {
+  $style: ut
+}, H = /* @__PURE__ */ p(Ye, [["__cssModules", dt]]), M = {
   "fade-enter-active": "TransitionFade__fade-enter-active_aa1d8",
   "fade-leave-active": "TransitionFade__fade-leave-active_39194",
   "fade-enter-from": "TransitionFade__fade-enter-from_74398",
   "fade-leave-to": "TransitionFade__fade-leave-to_fab21"
-}, he = B({
+}, _t = T({
   name: "TransitionFade",
   props: {
     appear: {
@@ -719,372 +208,256 @@ const ss = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3c
     },
     duration: {
       type: Number,
-      default: 300
+      default: 450
     }
   },
-  setup(e, { slots: t }) {
-    return () => Se(
-      ee,
+  setup(s, { slots: e }) {
+    return () => ce(
+      ue,
       {
         name: "fade",
-        appear: e.appear,
-        mode: e.mode,
-        duration: e.duration,
-        enterFromClass: U["fade-enter-from"],
-        enterActiveClass: U["fade-enter-active"],
-        leaveActiveClass: U["fade-leave-active"],
-        leaveToClass: U["fade-leave-to"]
+        appear: s.appear,
+        mode: s.mode,
+        duration: s.duration,
+        enterFromClass: M["fade-enter-from"],
+        enterActiveClass: M["fade-enter-active"],
+        leaveActiveClass: M["fade-leave-active"],
+        leaveToClass: M["fade-leave-to"]
       },
-      () => t.default ? t.default() : []
+      () => e.default ? e.default() : []
     );
   }
-}), ns = ["src"], as = ["fetchpriority", "width", "height", "src", "alt"], ls = { key: "loading" }, is = /* @__PURE__ */ B({
-  __name: "TheImage",
+}), ft = ["xlink:href"], mt = /* @__PURE__ */ T({
+  __name: "Icon",
   props: {
-    src: {},
-    alt: {},
-    width: {},
-    height: {},
-    objectFit: {},
-    hasPlaceholder: { type: Boolean, default: !1 },
-    hasPriority: { type: Boolean, default: !1 },
-    isLayoutFill: { type: Boolean },
-    hasMixBlendMode: { type: Boolean, default: !1 }
+    name: {},
+    color: {},
+    size: {}
   },
-  setup(e) {
-    const t = u(() => ({ src: e.src, alt: e.alt })), { isLoading: s, error: o } = os(t, {
-      immediate: !1
-    }), n = u(() => !+e.width && !+e.height ? "auto" : `${e.width}/${e.height}`), l = u(() => e.hasMixBlendMode && c.value === "idle"), c = u(() => s.value ? "loading" : o.value ? "error" : "idle");
-    return (i, h) => (d(), w("div", {
-      class: m([i.$style.root, c.value === "loading" && i.$style.hasPulse]),
-      style: P({ aspectRatio: n.value })
+  setup(s) {
+    const e = P(), t = $(() => [e.root, e.color, s.color, e[s.name]]), a = $(() => s.size ? { width: B(Number(s.size)), height: B(Number(s.size)) } : {});
+    return (r, i) => (g(), w("svg", {
+      class: u(t.value),
+      style: y(a.value)
     }, [
-      G(k(he), null, {
-        default: j(() => [
-          c.value === "error" && i.hasPlaceholder ? (d(), w("img", {
-            key: "error",
-            class: m(i.$style.placeholder),
-            src: k(ss),
-            alt: "image placeholder"
-          }, null, 10, ns)) : c.value === "idle" ? (d(), w("img", {
-            fetchpriority: i.hasPriority,
-            key: "image",
-            class: m([
-              i.$style.image,
-              l.value && i.$style.mixBlendMode,
-              i.$style[`objectFit_${i.objectFit}`]
-            ]),
-            width: i.width,
-            height: i.height,
-            src: i.src,
-            alt: i.alt
-          }, null, 10, as)) : (d(), w("div", ls))
-        ]),
-        _: 1
-      })
+      h("use", {
+        "xlink:href": `#${r.name}`
+      }, null, 8, ft)
     ], 6));
   }
-}), rs = "TheImage__root_484a1", cs = "TheImage__image_2c261", _s = "TheImage__mixBlendMode_ca9ee", us = "TheImage__objectFit_cover_8f5ee", ds = "TheImage__objectFit_contain_c6076", fs = "TheImage__placeholder_1e624", ms = "TheImage__hasPulse_af1f2", hs = "TheImage__pulse_56855", vs = {
-  root: rs,
-  image: cs,
-  mixBlendMode: _s,
-  objectFit_cover: us,
-  objectFit_contain: ds,
-  placeholder: fs,
-  hasPulse: ms,
-  pulse: hs
-}, ys = {
-  $style: vs
-}, gs = /* @__PURE__ */ C(is, [["__cssModules", ys]]), bs = ["srcset"], $s = ["width", "height", "src", "alt"], Ts = /* @__PURE__ */ B({
-  __name: "ThePicture",
-  props: {
-    src: {},
-    alt: {},
-    width: {},
-    height: {},
-    objectFit: {},
-    hasPriority: { type: Boolean }
-  },
-  setup(e) {
-    const t = u(() => {
-      const o = /\.(png|jpg|jpeg)$/;
-      return o.test(e.src) || console.warn("src prop must be png, jpg or jpeg"), e.src.replace(o, "");
-    }), s = u(() => ({
-      ...e.hasPriority && {
-        fetchpriority: "high"
-      }
-    }));
-    return (o, n) => (d(), w("picture", {
-      class: m(o.$style.root)
-    }, [
-      y("source", {
-        srcset: t.value + ".webp",
-        type: "image/webp"
-      }, null, 8, bs),
-      y("img", H(s.value, {
-        class: [o.$style.image, o.$style[`objectFit_${o.objectFit}`]],
-        width: o.width,
-        height: o.height,
-        src: o.src,
-        alt: o.alt,
-        loading: "lazy",
-        onError: n[0] || (n[0] = //@ts-ignore
-        (...l) => o.handleFailure && o.handleFailure(...l))
-      }), null, 16, $s)
-    ], 2));
-  }
-}), ws = "ThePicture__root_e38eb", ps = "ThePicture__image_29186", Ss = "ThePicture__objectFit_cover_0c234", xs = "ThePicture__objectFit_contain_9e95d", zs = {
-  root: ws,
-  image: ps,
-  objectFit_cover: Ss,
-  objectFit_contain: xs
-}, ks = {
-  $style: zs
-}, Bs = /* @__PURE__ */ C(Ts, [["__cssModules", ks]]), Ms = {
-  "enter-active": "TransitionVisibilityToggle__enter-active_bc3d6",
-  "leave-active": "TransitionVisibilityToggle__leave-active_23b21",
-  "enter-from": "TransitionVisibilityToggle__enter-from_0ca29",
-  "enter-to": "TransitionVisibilityToggle__enter-to_6293c",
-  "leave-from": "TransitionVisibilityToggle__leave-from_4b6bf",
-  "leave-to": "TransitionVisibilityToggle__leave-to_d0bb6"
-}, Ls = {};
-function Cs(e, t) {
-  return d(), E(ee, {
-    mode: "out-in",
-    name: "toggle-visibility",
-    enterActiveClass: e.$style["enter-active"],
-    leaveActiveClass: e.$style["leave-active"],
-    enterToClass: e.$style["enter-to"],
-    enterFromClass: e.$style["enter-from"],
-    leaveToClass: e.$style["leave-to"],
-    leaveFromClass: e.$style["leave-from"]
-  }, {
-    default: j(() => [
-      K(e.$slots, "default")
-    ]),
-    _: 3
-  }, 8, ["enterActiveClass", "leaveActiveClass", "enterToClass", "enterFromClass", "leaveToClass", "leaveFromClass"]);
-}
-const Is = {
-  $style: Ms
-}, Fs = /* @__PURE__ */ C(Ls, [["render", Cs], ["__cssModules", Is]]), Rs = /* @__PURE__ */ B({
+}), ht = "Icon__root_9c34a", vt = "Icon__color_9a568", yt = {
+  root: ht,
+  color: vt
+}, gt = {
+  $style: yt
+}, U = /* @__PURE__ */ p(mt, [["__cssModules", gt]]), wt = /* @__PURE__ */ T({
   __name: "ToastItem",
   props: {
-    icon: {},
     title: {},
-    timer: {},
-    buttonText: {},
-    onButtonClick: { type: Function }
+    view: { default: "success" }
   },
-  setup(e) {
-    return (t, s) => (d(), w("div", {
-      class: m([t.$style.root, t.icon && t.$style["is-icon"]]),
-      onClick: s[0] || (s[0] = (o) => t.$emit("click"))
-    }, [
-      G(k(Z), {
-        class: m(t.$style.title),
-        name: "subheadSmall",
-        color: "inverse",
-        align: "left"
-      }, {
-        default: j(() => [
-          se(ne(t.title), 1)
-        ]),
-        _: 1
-      }, 8, ["class"]),
-      t.icon ? (d(), E(k(Y), {
-        key: 0,
-        class: m(t.$style.icon),
-        size: 20,
-        name: t.icon,
-        color: "inverse"
-      }, null, 8, ["class", "name"])) : W("", !0),
-      t.buttonText ? (d(), E(k(Z), {
-        key: 1,
-        class: m(t.$style.button),
-        name: "subheadSmall",
-        color: "brand-accent",
-        onClick: t.onButtonClick
-      }, {
-        default: j(() => [
-          se(ne(t.buttonText), 1)
-        ]),
-        _: 1
-      }, 8, ["class", "onClick"])) : W("", !0)
-    ], 2));
-  }
-}), Os = "ToastItem__root_ef96a", Ps = "ToastItem__icon_27903", Es = "ToastItem__timer_1a2c8", js = "ToastItem__button_eb561", As = "ToastItem__title_949d1", Vs = {
-  root: Os,
-  "is-icon": "ToastItem__is-icon_fab71",
-  icon: Ps,
-  timer: Es,
-  button: js,
-  title: As
-}, Ds = {
-  $style: Vs
-}, Ns = /* @__PURE__ */ C(Rs, [["__cssModules", Ds]]);
-class Gs {
+  setup(s) {
+    const e = $(() => s.view === "success" ? "success_filled" : "warning_filled");
+    return (t, a) => {
+      const r = de("IconBase");
+      return g(), w("div", {
+        class: u([t.$style.root, t.$style[`view_${t.view}`]]),
+        onClick: a[0] || (a[0] = (i) => t.$emit("click"))
+      }, [
+        F(E(U), {
+          size: 18,
+          name: e.value,
+          color: "icon-common-base-tertiary-default"
+        }, null, 8, ["name"]),
+        F(E(H), {
+          class: u(t.$style.title),
+          size: "subhead",
+          color: "text-common-base-inverse-default",
+          align: "left"
+        }, {
+          default: O(() => [
+            _e(fe(t.title), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        F(r, {
+          size: 18,
+          name: "icon-cross",
+          color: "icon-common-base-tertiary-default"
+        })
+      ], 2);
+    };
+  }
+}), $t = "ToastItem__root_ef96a", Tt = "ToastItem__view_success_1372e", bt = "ToastItem__view_danger_4b814", pt = "ToastItem__title_949d1", Ct = {
+  root: $t,
+  view_success: Tt,
+  view_danger: bt,
+  title: pt
+}, St = {
+  $style: Ct
+}, Ft = /* @__PURE__ */ p(wt, [["__cssModules", St]]);
+class xt {
   constructor() {
-    q(this, "list", z([]));
-    q(this, "timeouts", z({}));
+    N(this, "list", m([]));
+    N(this, "timeouts", m({}));
   }
   restartTimeouts() {
-    Object.keys(this.timeouts.value).forEach((t, s) => {
-      this.timeouts.value[t] = setTimeout(
+    Object.keys(this.timeouts.value).forEach((e, t) => {
+      this.timeouts.value[e] = setTimeout(
         () => {
-          this.remove(+t), clearTimeout(this.timeouts.value[t]);
+          this.remove(+e), clearTimeout(this.timeouts.value[e]);
         },
-        4e3 + s * 300
+        4e3 + t * 300
       );
     });
   }
   pauseTimeouts() {
-    Object.keys(this.timeouts.value).forEach((t) => {
-      clearTimeout(this.timeouts.value[t]);
+    Object.keys(this.timeouts.value).forEach((e) => {
+      clearTimeout(this.timeouts.value[e]);
     });
   }
-  remove(t) {
-    this.list.value = this.list.value.filter((s) => s.id !== t);
+  remove(e) {
+    this.list.value = this.list.value.filter((t) => t.id !== e);
   }
-  show(t) {
-    let s;
-    const o = this.list.value[0] ? this.list.value[0].id + 1 : 1;
-    let n = 5e3;
-    typeof t == "string" ? s = {
-      id: o,
-      title: t + ` ${o}`
-    } : (s = {
-      ...t,
-      title: t.title + ` ${o}`,
-      id: o
-    }, n = t.timer ? t.timer * 1e3 : 5e3), this.list.value.length === 3 && this.list.value.pop(), this.list.value.unshift(s), this.timeouts.value[o] = setTimeout(() => {
-      this.remove(s.id), clearTimeout(this.timeouts.value[o]);
-    }, n);
+  show(e) {
+    let t;
+    const a = this.list.value[0] ? this.list.value[0].id + 1 : 1, r = 5e3;
+    typeof e == "string" ? t = {
+      id: a,
+      title: e,
+      view: "success"
+    } : t = {
+      ...e,
+      title: e.title,
+      id: a
+    }, this.list.value.length === 3 && this.list.value.pop(), this.list.value.unshift(t), this.timeouts.value[a] = setTimeout(() => {
+      this.remove(t.id), clearTimeout(this.timeouts.value[a]);
+    }, r);
   }
-  showError(t = "Упс, что-то пошло не так :(", s = "alert_fill") {
+  showError(e = "Упс, что-то пошло не так :(") {
     this.show({
-      title: t,
-      icon: s
+      title: e,
+      view: "danger"
     });
   }
-  install(t) {
-    t.provide(ve, this);
+  install(e) {
+    e.provide(q, this);
   }
 }
-const ve = Symbol("ToastService"), nn = new Gs(), Ws = ["id"], Hs = /* @__PURE__ */ B({
+const q = Symbol("ToastService"), Wt = new xt(), It = ["id"], Mt = /* @__PURE__ */ T({
   __name: "Toaster",
-  setup(e) {
-    let t;
-    const s = _e(ve), o = z(), n = z([]), l = z(!1), c = z(S()), i = z(S()), h = z(S()), p = z(S());
-    function v(a) {
-      const f = $(a);
+  setup(s) {
+    let e;
+    const t = Z(q), a = m(), r = m([]), i = m(!1), S = m(I()), c = m(I()), L = m(I()), G = m(I());
+    function b(o) {
+      const l = V(o);
       return {
         toaster: {
-          transform: c.value[f]
+          transform: S.value[l]
         },
         body: {
-          transform: i.value[f]
+          transform: c.value[l]
         },
         left: {
-          transform: h.value[f]
+          transform: L.value[l]
         },
         right: {
-          transform: p.value[f]
+          transform: G.value[l]
         }
       };
     }
-    function _(a, f) {
-      (f !== "main" || c.value.main.length) && (c.value[f] = a.mainTranslate), i.value[f] = a.scale, h.value[f] = a.leftTranslate, p.value[f] = a.rightTranslate;
+    function x(o, l) {
+      (l !== "main" || S.value.main.length) && (S.value[l] = o.mainTranslate), c.value[l] = o.scale, L.value[l] = o.leftTranslate, G.value[l] = o.rightTranslate;
     }
-    function r() {
-      let f = 0, I = 0;
-      n.value.sort(L).forEach((F, g) => {
-        const x = $(g), N = T(`-${f}px`);
-        _(N, x), f += F.clientHeight + 12, I = Math.max(I, F.clientWidth);
-      }), o.value.style.height = `-${f}px`, o.value.style.width = `${I}px`;
+    function k() {
+      let l = 0, f = 0;
+      r.value.sort(K).forEach((_, n) => {
+        const d = V(n), C = D(`${l}px`);
+        x(C, d), l += _.clientHeight + 12, f = Math.max(f, _.clientWidth);
+      }), a.value.style.height = `${l}px`, a.value.style.width = `${f}px`;
     }
-    function b() {
-      ae(() => {
-        const [a, f, I] = n.value.sort(L), F = T("0");
-        if (_(F, "main"), f) {
-          const g = R({
-            mainElement: a,
-            element: f,
+    function R() {
+      z(() => {
+        const [o, l, f] = r.value.sort(K), _ = D("0");
+        if (x(_, "main"), l) {
+          const n = A({
+            mainElement: o,
+            element: l,
             translateY: "-15%",
             index: 1
           });
-          _(g, "second");
+          x(n, "second");
         }
-        if (I) {
-          const g = R({
-            mainElement: a,
-            element: I,
+        if (f) {
+          const n = A({
+            mainElement: o,
+            element: f,
             translateY: "-30%",
             index: 2
           });
-          _(g, "third"), ae(() => {
-            var N;
-            const x = (N = o.value) == null ? void 0 : N.querySelector(
+          x(n, "third"), z(() => {
+            var C;
+            const d = (C = a.value) == null ? void 0 : C.querySelector(
               ".toaster-leave-active"
             );
-            if (x) {
-              const O = R({
-                mainElement: a,
-                element: x,
+            if (d) {
+              const v = A({
+                mainElement: o,
+                element: d,
                 translateY: "45%",
                 index: 3
               });
-              x.setAttribute(
+              d.setAttribute(
                 "style",
-                `transform: ${O.mainTranslate};`
-              ), x.children[1].setAttribute(
+                `transform: ${v.mainTranslate};`
+              ), d.children[1].setAttribute(
                 "style",
-                `transform: ${O.scale};`
-              ), x.children[0].setAttribute(
+                `transform: ${v.scale};`
+              ), d.children[0].setAttribute(
                 "style",
-                `transform: ${O.leftTranslate};`
-              ), x.children[2].setAttribute(
+                `transform: ${v.leftTranslate};`
+              ), d.children[2].setAttribute(
                 "style",
-                `transform: ${O.rightTranslate};`
-              ), x.children[4].setAttribute(
+                `transform: ${v.rightTranslate};`
+              ), d.children[4].setAttribute(
                 "style",
-                `transform: ${O.scale};`
-              ), x.children[3].setAttribute(
+                `transform: ${v.scale};`
+              ), d.children[3].setAttribute(
                 "style",
-                `transform: ${O.leftTranslate};`
-              ), x.children[5].setAttribute(
+                `transform: ${v.leftTranslate};`
+              ), d.children[5].setAttribute(
                 "style",
-                `transform: ${O.rightTranslate};`
+                `transform: ${v.rightTranslate};`
               );
             }
           });
         }
       });
     }
-    function M(a) {
-      l.value && (s == null || s.remove(a), r());
+    function ee(o) {
+      i.value && (t == null || t.remove(o), k());
     }
-    function A() {
-      l.value || (l.value = !0, s == null || s.pauseTimeouts(), r(), t = setTimeout(() => {
-        l.value = !1, b(), o.value.style.height = "auto", o.value.style.width = "auto", s == null || s.restartTimeouts(), clearTimeout(t);
-      }, 5e3));
+    function te() {
+      !i.value && (t != null && t.list.value) && t.list.value.length > 1 ? (i.value = !0, t == null || t.pauseTimeouts(), k(), e = setTimeout(() => {
+        i.value = !1, R(), a.value.style.height = "auto", a.value.style.width = "auto", t == null || t.restartTimeouts(), clearTimeout(e);
+      }, 5e3)) : t != null && t.list.value[0] && !i.value && (t == null || t.remove(t == null ? void 0 : t.list.value[0].id));
     }
-    X(
-      () => s == null ? void 0 : s.list,
+    Y(
+      () => t == null ? void 0 : t.list,
       () => {
-        l.value ? r() : b();
+        i.value ? k() : R();
       },
       { deep: !0 }
     );
-    function S() {
+    function I() {
       return {
         main: "",
         second: "",
         third: ""
       };
     }
-    function $(a) {
-      switch (a) {
+    function V(o) {
+      switch (o) {
         case 0:
           return "main";
         case 1:
@@ -1093,94 +466,98 @@ const ve = Symbol("ToastService"), nn = new Gs(), Ws = ["id"], Hs = /* @__PURE__
           return "third";
       }
     }
-    function L(a, f) {
-      return Number(f.id) - Number(a.id);
+    function K(o, l) {
+      return Number(l.id) - Number(o.id);
     }
-    function R({
-      mainElement: a,
-      element: f,
-      translateY: I,
-      index: F
+    function A({
+      mainElement: o,
+      element: l,
+      translateY: f,
+      index: _
     }) {
-      const g = f.getBoundingClientRect(), x = a.getBoundingClientRect(), N = x.height / g.height, O = (x.width - 10 * F) / g.width, te = (g.width - O * g.width) / 2;
+      const n = l.getBoundingClientRect(), d = o.getBoundingClientRect(), C = d.height / n.height, v = (d.width - 10 * _) / n.width, W = (n.width - v * n.width) / 2;
       return {
-        mainTranslate: `translateY(${I}) translateX(-50%)`,
-        scale: `scale(${O}, ${N})`,
-        leftTranslate: `translateX(${te - 12}px)`,
-        rightTranslate: `translateX(${-te + 12}px)`
+        mainTranslate: `translateY(${f}) translateX(-50%)`,
+        scale: `scale(${v}, ${C})`,
+        leftTranslate: `translateX(${W - 12}px)`,
+        rightTranslate: `translateX(${-W + 12}px)`
       };
     }
-    function T(a) {
+    function D(o) {
       return {
-        mainTranslate: `translateY(${a}) translateX(-50%)`,
+        mainTranslate: `translateY(${o}) translateX(-50%)`,
         scale: "scale(1, 1)",
         leftTranslate: "translateX(-12px)",
         rightTranslate: "translateX(12px)"
       };
     }
-    return (a, f) => (d(), w("div", {
+    return (o, l) => (g(), w("div", {
       ref_key: "rootRef",
-      ref: o,
-      class: m([a.$style.root, l.value && a.$style["is-expand"]]),
-      onClick: A
+      ref: a,
+      class: u([o.$style.root, i.value && o.$style["is-expand"]]),
+      onClick: te
     }, [
-      G(xe, {
+      F(me, {
         tag: "div",
-        "enter-from-class": a.$style["toaster-enter-from"],
-        "enter-to-class": a.$style["toaster-enter-to"],
-        "enter-active-class": a.$style["toaster-enter-active"],
-        "leave-from-class": a.$style["toaster-leave-from"],
-        "leave-to-class": a.$style["toaster-leave-to"],
-        "leave-active-class": a.$style["toaster-leave-active"]
+        enterFromClass: o.$style["toaster-enter-from"],
+        enterToClass: o.$style["toaster-enter-to"],
+        enterActiveClass: o.$style["toaster-enter-active"],
+        leaveFromClass: o.$style["toaster-leave-from"],
+        leaveToClass: o.$style["toaster-leave-to"],
+        leaveActiveClass: o.$style["toaster-leave-active"]
       }, {
-        default: j(() => {
-          var I;
+        default: O(() => {
+          var f;
           return [
-            (d(!0), w(ze, null, ke((I = k(s)) == null ? void 0 : I.list.value, (F, g) => (d(), w("div", {
-              key: F.id,
-              id: `${F.id}`,
+            (g(!0), w(he, null, ve((f = E(t)) == null ? void 0 : f.list.value, (_, n) => (g(), w("div", {
+              key: _.id,
+              id: `${_.id}`,
               ref_for: !0,
               ref_key: "toastersRef",
-              ref: n,
-              class: m([a.$style.toaster, l.value ? "is-expand" : ""]),
-              style: P(v(g).toaster)
+              ref: r,
+              class: u([
+                o.$style.toaster,
+                o.$style[`view_${_.view ?? "success"}`],
+                i.value ? "is-expand" : ""
+              ]),
+              style: y(b(n).toaster)
             }, [
-              y("div", {
-                class: m(a.$style.left),
-                style: P(v(g).left)
+              h("div", {
+                class: u(o.$style.left),
+                style: y(b(n).left)
               }, null, 6),
-              y("div", {
-                class: m(a.$style.body),
-                style: P(v(g).body)
+              h("div", {
+                class: u(o.$style.body),
+                style: y(b(n).body)
               }, [
-                G(Ns, H({ ref_for: !0 }, F, {
-                  onClick: () => M(F.id)
+                F(Ft, j({ ref_for: !0 }, _, {
+                  onClick: () => ee(_.id)
                 }), null, 16, ["onClick"])
               ], 6),
-              y("div", {
-                class: m(a.$style.right),
-                style: P(v(g).right)
+              h("div", {
+                class: u(o.$style.right),
+                style: y(b(n).right)
               }, null, 6),
-              y("div", {
-                class: m([a.$style.left, a.$style.shadow]),
-                style: P(v(g).left)
+              h("div", {
+                class: u([o.$style.left, o.$style.shadow]),
+                style: y(b(n).left)
               }, null, 6),
-              y("div", {
-                class: m([a.$style.body, a.$style.shadow]),
-                style: P(v(g).body)
+              h("div", {
+                class: u([o.$style.body, o.$style.shadow]),
+                style: y(b(n).body)
               }, null, 6),
-              y("div", {
-                class: m([a.$style.right, a.$style.shadow]),
-                style: P(v(g).right)
+              h("div", {
+                class: u([o.$style.right, o.$style.shadow]),
+                style: y(b(n).right)
               }, null, 6)
-            ], 14, Ws))), 128))
+            ], 14, It))), 128))
           ];
         }),
         _: 1
-      }, 8, ["enter-from-class", "enter-to-class", "enter-active-class", "leave-from-class", "leave-to-class", "leave-active-class"])
+      }, 8, ["enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass"])
     ], 2));
   }
-}), Ks = "Toaster__root_73fc8", Us = "Toaster__toaster_72d65", Xs = "Toaster__body_22a84", Ys = "Toaster__left_4f54d", Zs = "Toaster__right_9c31e", qs = "Toaster__shadow_acb59", Js = {
+}), Et = "Toaster__root_73fc8", Bt = "Toaster__toaster_72d65", Lt = "Toaster__body_22a84", kt = "Toaster__view_success_eed88", At = "Toaster__left_4f54d", Nt = "Toaster__right_9c31e", zt = "Toaster__view_danger_ab705", Pt = "Toaster__shadow_acb59", jt = {
   "toaster-enter-from": "Toaster__toaster-enter-from_efcfd",
   "toaster-enter": "Toaster__toaster-enter_7d5d8",
   "toaster-enter-to": "Toaster__toaster-enter-to_6201a",
@@ -1189,64 +566,67 @@ const ve = Symbol("ToastService"), nn = new Gs(), Ws = ["id"], Hs = /* @__PURE__
   "toaster-leave-from": "Toaster__toaster-leave-from_f98c0",
   "toaster-leave": "Toaster__toaster-leave_948f8",
   "toaster-leave-to": "Toaster__toaster-leave-to_05c33",
-  root: Ks,
+  root: Et,
   "is-expand": "Toaster__is-expand_984b8",
-  toaster: Us,
-  body: Xs,
-  left: Ys,
-  right: Zs,
-  shadow: qs
-}, Qs = {
-  $style: Js
-}, en = /* @__PURE__ */ C(Hs, [["__cssModules", Qs]]), ye = {
+  toaster: Bt,
+  body: Lt,
+  view_success: kt,
+  left: At,
+  right: Nt,
+  view_danger: zt,
+  shadow: Pt
+}, Ot = {
+  $style: jt
+}, Gt = /* @__PURE__ */ p(Mt, [["__cssModules", Ot]]);
+class Rt {
+  async install() {
+    if (!document.getElementById("svg-sprite"))
+      try {
+        const t = await (await fetch("/sprite/sprite.svg")).text(), a = document.createElement("div");
+        a.id = "svg-sprite", a.style.display = "none", a.innerHTML = t, document.body.insertBefore(a, document.body.firstChild);
+      } catch (e) {
+        console.error("Failed to load SVG sprite:", e);
+      }
+  }
+}
+const Xt = new Rt(), J = {
   interactionType: "web"
-}, ge = Symbol("GlobalConfig"), an = (e) => {
-  Be(ge, {
-    ...ye,
-    ...e
+}, Q = Symbol("GlobalConfig"), Yt = (s) => {
+  ye(Q, {
+    ...J,
+    ...s
   });
-}, ln = () => _e(ge, ye), rn = {
+}, Zt = () => Z(Q, J), Ht = {
   KGS: "KGS"
-}, tn = [
-  Go,
-  Ko,
-  ue,
-  de,
+}, Vt = [
+  Fe,
   Response,
-  Jo,
-  gs,
-  Bs,
-  Z,
-  Qt,
-  he,
-  Fs,
-  en,
-  Y
-], cn = {
-  install: (e) => {
-    tn.forEach((t) => {
-      e.component(`${t.name}`, t);
+  Le,
+  Xe,
+  H,
+  _t,
+  Gt,
+  U
+], Ut = {
+  install: (s) => {
+    Vt.forEach((e) => {
+      s.component(`${e.name}`, e);
     });
   }
 };
 export {
-  Go as Button,
-  ue as ButtonBase,
-  Ko as ButtonSkeleton,
-  rn as Currency,
-  Y as Icon,
-  de as Loader,
-  Jo as SkeletonWrapper,
-  gs as TheImage,
-  Bs as ThePicture,
-  Z as TheText,
-  Qt as TheTextSkeleton,
-  ve as ToastServiceKey,
-  en as Toaster,
-  he as TransitionFade,
-  Fs as TransitionVisibilityToggle,
-  cn as default,
-  nn as toastService,
-  ln as useGlobalConfig,
-  an as useGlobalConfigProvide
+  Ht as Currency,
+  U as Icon,
+  Fe as Loader,
+  Le as SkeletonWrapper,
+  Xe as TheImage,
+  H as TheText,
+  q as ToastServiceKey,
+  Gt as Toaster,
+  _t as TransitionFade,
+  Ut as default,
+  Xt as spriteService,
+  Wt as toastService,
+  Zt as useGlobalConfig,
+  Yt as useGlobalConfigProvide
 };