@retailcrm/embed-ui-v1-components 0.5.5 → 0.5.7

package/README.md

@@ -1,5 +1,7 @@
 # `@retailcrm/embed-ui-v1-components`
 
+[![npm version](https://img.shields.io/npm/v/@retailcrm/embed-ui-v1-components.svg)](https://www.npmjs.com/package/@retailcrm/embed-ui-v1-components)
+
 Компоненты UI для использования в JS-расширениях RetailCRM
 
 ## Установка
@@ -34,9 +36,8 @@ import { UiButton } from '@retailcrm/embed-ui-v1-components/remote'
 </script>
 ```
 
-**⚠ Важно**
-
-Расширения используют определения из remote части для передачи системе инструкций, из чего собирать
+> [!IMPORTANT]
+> Расширения используют определения из remote части для передачи системе инструкций, из чего собирать
 интерфейс. Библиотека также содержит `@retailcrm/embed-ui-v1-components/host` &ndash; набор компонентов,
 который будет использовать CRM при интерпретации инструкций от расширений. **_Не используйте_** host компоненты
-как часть кода расширения.
+как часть кода расширения.

package/assets/sprites/arrows/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.22 12.7199C8.07931 12.5793 8.00018 12.3887 8 12.1899V11.8099C8.0023 11.6114 8.08112 11.4216 8.22 11.2799L13.36 6.14985C13.4539 6.0552 13.5817 6.00195 13.715 6.00195C13.8483 6.00195 13.9761 6.0552 14.07 6.14985L14.78 6.85985C14.8741 6.95202 14.9271 7.07816 14.9271 7.20985C14.9271 7.34154 14.8741 7.46769 14.78 7.55985L10.33 11.9999L14.78 16.4399C14.8747 16.5337 14.9279 16.6615 14.9279 16.7949C14.9279 16.9282 14.8747 17.056 14.78 17.1499L14.07 17.8499C13.9761 17.9445 13.8483 17.9978 13.715 17.9978C13.5817 17.9978 13.4539 17.9445 13.36 17.8499L8.22 12.7199Z" fill="currentColor"/>
+</svg>

package/assets/sprites/user/bad.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8">
+  <g fill="currentColor">
+    <path d="M0 0V8H2.86724C3.70479 7.99267 4.34983 7.79121 4.80238 7.3956C5.25492 7 5.48119 6.41758 5.48119 5.64835C5.48119 5.1978 5.37144 4.81685 5.15192 4.50549C4.93578 4.19414 4.63858 3.98718 4.26034 3.88462C4.5913 3.74542 4.84966 3.52747 5.0354 3.23077C5.22115 2.9304 5.31402 2.58425 5.31402 2.19231C5.31402 1.47436 5.08268 0.930403 4.62001 0.560439C4.15733 0.186813 3.47852 0 2.58356 0H0ZM1.51974 6.67582V4.51648H2.91283C3.61191 4.52747 3.96145 4.89927 3.96145 5.63187C3.96145 5.95788 3.86014 6.21429 3.65751 6.4011C3.45825 6.58425 3.17963 6.67582 2.82165 6.67582H1.51974ZM2.64435 3.35165H1.51974V1.33517H2.58356C3.00233 1.33517 3.30797 1.41575 3.50047 1.57692C3.69634 1.73443 3.79428 1.99451 3.79428 2.35714C3.79428 3.00549 3.41097 3.337 2.64435 3.35165Z" />
+    <path d="M7.50306 6.35165H10.1677L10.6793 8H12.2953L9.53444 0H8.12615L5.38049 8H6.99648L7.50306 6.35165ZM9.75734 5.01648H7.91339L8.8303 2.02198L9.75734 5.01648Z" />
+    <path d="M12.3618 8V0H14.6312C15.2797 0 15.8589 0.159341 16.3688 0.478022C16.8821 0.79304 17.2823 1.24359 17.5694 1.82967C17.8565 2.41209 18 3.07509 18 3.81868V4.18681C18 4.9304 17.8582 5.59158 17.5745 6.17033C17.2942 6.74908 16.8973 7.1978 16.384 7.51648C15.8707 7.83516 15.2915 7.99634 14.6464 8H12.3618ZM13.8815 1.33517V6.67582H14.616C15.2104 6.67582 15.6647 6.4652 15.9787 6.04396C16.2928 5.62271 16.4532 5.02015 16.46 4.23626V3.81319C16.46 3 16.3046 2.38462 15.9939 1.96703C15.6832 1.54579 15.229 1.33517 14.6312 1.33517H13.8815Z" />
+  </g>
+</svg>

package/assets/sprites/user/vip.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8">
+  <g fill="currentColor">
+    <path d="M3.37348 6.01648L5.05767 0H6.76227L4.17475 8H2.57732L0 0H1.6995L3.37348 6.01648Z" />
+    <path d="M8.9901 8H7.45902V0H8.9901V8Z" />
+    <path d="M11.8406 8V5.18132H13.1828C14.064 5.18132 14.753 4.95604 15.2498 4.50549C15.7499 4.05128 16 3.43223 16 2.64835C16 2.13187 15.886 1.67216 15.6581 1.26923C15.4301 0.862638 15.1035 0.549451 14.6782 0.32967C14.2563 0.10989 13.7663 0 13.2083 0H10.3095V8H11.8406ZM13.2083 3.84615H11.8406V1.33517H13.2441C13.6217 1.34249 13.9177 1.46703 14.1321 1.70879C14.3464 1.95055 14.4536 2.2674 14.4536 2.65934C14.4536 3.04029 14.3464 3.33333 14.1321 3.53846C13.9211 3.74359 13.6132 3.84615 13.2083 3.84615Z" />
+  </g>
+</svg>

package/assets/stylesheets/geometry.less

@@ -21,6 +21,11 @@
   height: @size;
 }
 
+.rectangle(@width, @height) {
+  width: @width;
+  height: @height;
+}
+
 .square-rounded (@size, @border-radius) {
   .square(@size);
   border-radius: @border-radius;

package/dist/host.cjs

@@ -4,14 +4,198 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
+const _hoisted_1$e = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function render$7(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
+    vue.createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m3.237-10.576A2.424 2.424 0 0 0 12.812 7H11.13a2.424 2.424 0 0 0-2.424 2.424v.421c0 .233.188.421.42.421h.64a.42.42 0 0 0 .421-.42v-.422a.943.943 0 0 1 .943-.942h1.683c.521 0 .943.422.943.942v.472a.95.95 0 0 1-.64.9l-.8.261a1.58 1.58 0 0 0-1.085 1.499v.656c0 .233.188.421.42.421h.64a.42.42 0 0 0 .421-.42v-.657a.11.11 0 0 1 .101-.101l.8-.261a2.43 2.43 0 0 0 1.684-2.298zm-2.845 5.893h-.842a.42.42 0 0 0-.421.42v.842c0 .233.188.421.42.421h.843a.42.42 0 0 0 .42-.42v-.843a.42.42 0 0 0-.42-.42",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ]));
+}
+const IconHelpOutlined = { render: render$7 };
+const _hoisted_1$d = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 18 8"
+};
+function render$6(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
+    vue.createElementVNode("g", { fill: "currentColor" }, [
+      vue.createElementVNode("path", { d: "M0 0v8h2.867q1.257-.011 1.935-.604.68-.594.68-1.748 0-.675-.33-1.143a1.54 1.54 0 0 0-.892-.62q.497-.21.775-.654.279-.45.279-1.039 0-1.077-.694-1.632Q3.926 0 2.584 0zm1.52 6.676v-2.16h1.393q1.048.016 1.048 1.116 0 .488-.303.77-.3.273-.836.274zm1.124-3.324H1.52V1.335h1.064q.628 0 .916.242.294.236.294.78 0 .972-1.15.995M7.503 6.352h2.665L10.679 8h1.616l-2.76-8H8.125L5.38 8h1.616zm2.254-1.336H7.913l.917-2.994zM12.362 8V0h2.27q.972 0 1.737.478.77.473 1.2 1.352.432.873.431 1.989v.368q0 1.115-.425 1.983a3.17 3.17 0 0 1-1.191 1.346A3.26 3.26 0 0 1 14.646 8zm1.52-6.665v5.34h.734q.891 0 1.363-.631.47-.632.481-1.808v-.423q0-1.22-.466-1.846-.466-.632-1.363-.632z" })
+    ], -1)
+  ]));
+}
+const SpriteBAD = { render: render$6 };
+const _hoisted_1$c = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 8"
+};
+function render$5(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+    vue.createElementVNode("g", { fill: "currentColor" }, [
+      vue.createElementVNode("path", { d: "M3.373 6.016 5.058 0h1.704L4.175 8H2.577L0 0h1.7zM8.99 8H7.46V0H8.99zM11.84 8V5.181h1.343q1.322 0 2.067-.676.75-.681.75-1.857 0-.774-.342-1.379a2.3 2.3 0 0 0-.98-.94Q14.045 0 13.208 0H10.31v8zm1.368-4.154h-1.367v-2.51h1.403q.567.01.888.373t.322.95q0 .571-.322.88-.316.307-.924.307" })
+    ], -1)
+  ]));
+}
+const SpriteVIP = { render: render$5 };
 const isURL = (href) => {
   try {
-    new URL(href);
-    return true;
+    const normalizedHref = href.includes("://") ? href : `http://${href}`;
+    const url = new URL(normalizedHref);
+    const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\S*)$/;
+    return urlPattern.test(url.href);
   } catch {
     return false;
   }
 };
+const AvatarSizeKey = Symbol("UiAvatarSize");
+var SIZE$5 = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["XS"] = "xs";
+  SIZE2["SM"] = "sm";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE$5 || {});
+var STATUS = /* @__PURE__ */ ((STATUS2) => {
+  STATUS2["NONE"] = "";
+  STATUS2["BUSY"] = "busy";
+  STATUS2["BREAK"] = "break";
+  STATUS2["DINNER"] = "dinner";
+  STATUS2["FREE"] = "free";
+  return STATUS2;
+})(STATUS || {});
+const _hoisted_1$b = ["src"];
+const _hoisted_2$4 = {
+  key: 1,
+  class: "ui-v1-avatar__unresolved"
+};
+const _hoisted_3$3 = {
+  key: 3,
+  class: "ui-v1-avatar__initials"
+};
+const _hoisted_4$1 = {
+  key: 4,
+  class: "ui-v1-avatar__labels"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "ui-v1-avatar__label ui-v1-avatar__label_vip"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "ui-v1-avatar__label ui-v1-avatar__label_bad"
+};
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "UiAvatar",
+  props: {
+    /** Путь к изображению */
+    src: {
+      type: String,
+      validator: (src) => isURL(src) || src.length === 0,
+      default: ""
+    },
+    /** Наименование участника */
+    name: {
+      type: String,
+      default: null
+    },
+    /** Ссылка для перехода */
+    href: {
+      type: String,
+      validator: (href) => isURL(href) || href.length === 0,
+      default: ""
+    },
+    /** Статус пользователя */
+    status: {
+      type: String,
+      validator: (status) => Object.values(STATUS).includes(status),
+      default: null
+    },
+    /** Пометка VIP в карточке пользователя */
+    vip: {
+      type: Boolean,
+      default: false
+    },
+    /** Пометка BAD в карточке пользователя */
+    bad: {
+      type: Boolean,
+      default: false
+    },
+    /** Размер изображения */
+    size: {
+      type: String,
+      validator: (size) => Object.values(SIZE$5).includes(size),
+      default: SIZE$5.SM
+    }
+  },
+  setup(__props) {
+    const firstLetterOf = (name) => name.charAt(0).toUpperCase();
+    const props = __props;
+    const slots = vue.useSlots();
+    const loaded = vue.ref(false);
+    const unresolved = vue.computed(() => !(props.name || slots.default));
+    const initials = vue.computed(() => {
+      if (!props.name) {
+        return "";
+      }
+      const [firstName, ...otherNames] = props.name.split(" ");
+      return otherNames.length > 0 ? firstLetterOf(firstName) + firstLetterOf(otherNames[otherNames.length - 1]) : firstLetterOf(firstName);
+    });
+    const size = vue.inject(AvatarSizeKey, vue.computed(() => props.size));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.href ? "a" : "div"), vue.mergeProps({
+        ref: "root",
+        href: __props.href || void 0,
+        class: {
+          ["ui-v1-avatar"]: true,
+          [`ui-v1-avatar_${vue.unref(size)}`]: true,
+          ["ui-v1-avatar_bad"]: __props.bad,
+          ["ui-v1-avatar_vip"]: __props.vip
+        }
+      }, _ctx.$attrs), {
+        default: vue.withCtx(() => [
+          __props.src ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: __props.src,
+            alt: "",
+            class: "ui-v1-avatar__image",
+            draggable: "false",
+            onLoad: _cache[0] || (_cache[0] = ($event) => loaded.value = true),
+            onError: _cache[1] || (_cache[1] = ($event) => loaded.value = false)
+          }, null, 40, _hoisted_1$b)) : !__props.src && unresolved.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
+            vue.createVNode(vue.unref(IconHelpOutlined))
+          ])) : vue.createCommentVNode("", true),
+          __props.status && !(__props.vip || __props.bad) ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 2,
+            class: vue.normalizeClass({
+              ["ui-v1-avatar__status"]: true,
+              [`ui-v1-avatar__status_${vue.unref(size)}`]: true,
+              [`ui-v1-avatar__status_${__props.status}`]: __props.status
+            })
+          }, null, 2)) : vue.createCommentVNode("", true),
+          !(unresolved.value || loaded.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(initials.value), 1)
+            ])
+          ])) : vue.createCommentVNode("", true),
+          __props.vip || __props.bad ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+            __props.vip ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, [
+              vue.createVNode(vue.unref(SpriteVIP), { class: "ui-v1-avatar__vip" })
+            ])) : vue.createCommentVNode("", true),
+            __props.bad ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
+              vue.createVNode(vue.unref(SpriteBAD), { class: "ui-v1-avatar__bad" })
+            ])) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["href", "class"]);
+    };
+  }
+});
 const SHAPE_FLAG_ARRAY_CHILDREN = 16;
 const SHAPE_FLAG_TEXT = 8;
 const inlines = ["b", "i", "span", "strong"];
@@ -3480,6 +3664,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
 });
 exports.I18nPlugin = plugin;
 exports.ModalPlugin = plugin$1;
+exports.UiAvatar = _sfc_main$g;
 exports.UiButton = _sfc_main$f;
 exports.UiCheckbox = _sfc_main$e;
 exports.UiError = _sfc_main$d;

package/dist/host.css

@@ -1,3 +1,247 @@
+.ui-v1-avatar {
+  background-color: #E9ECEE;
+  border-radius: 50%;
+  position: relative;
+}
+.ui-v1-avatar::before,
+.ui-v1-avatar::after {
+  content: '';
+  border-radius: 50%;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.ui-v1-avatar_xs {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__unresolved svg {
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__initials {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.16666667;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__label {
+  width: 13.33px;
+  height: 6.67px;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__vip {
+  width: 9.33px;
+  height: 4px;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__bad {
+  width: 7.62px;
+  height: 3.81px;
+}
+.ui-v1-avatar_xs .ui-v1-avatar__status {
+  right: 0;
+  bottom: 1px;
+}
+.ui-v1-avatar_sm {
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__unresolved svg {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__initials {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.16666667;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__label {
+  width: 20px;
+  height: 10px;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__vip {
+  width: 12px;
+  height: 6px;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__bad {
+  width: 14px;
+  height: 6px;
+}
+.ui-v1-avatar_sm .ui-v1-avatar__status {
+  bottom: 2px;
+}
+.ui-v1-avatar_lg {
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__unresolved svg {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__initials {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.55555556;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__label {
+  width: 28px;
+  height: 14px;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__vip {
+  width: 16px;
+  height: 8px;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__bad {
+  width: 18px;
+  height: 8px;
+}
+.ui-v1-avatar_lg .ui-v1-avatar__status {
+  right: 4px;
+  bottom: 4px;
+}
+.ui-v1-avatar_vip.ui-v1-avatar::before {
+  border: 2px solid #FEA530;
+}
+.ui-v1-avatar_bad.ui-v1-avatar::after {
+  border: 2px solid #FF5353;
+}
+.ui-v1-avatar.ui-v1-avatar_bad.ui-v1-avatar_vip::before {
+  left: 0;
+  right: 50%;
+  border-radius: 52px 0 0 52px;
+  border-right: none;
+}
+.ui-v1-avatar.ui-v1-avatar_bad.ui-v1-avatar_vip::after {
+  left: 50%;
+  right: 0;
+  border-radius: 0 52px 52px 0;
+  border-left: none;
+}
+.ui-v1-avatar_bad.ui-v1-avatar_vip .ui-v1-avatar__label_vip {
+  border-radius: 33px 0 0 33px;
+}
+.ui-v1-avatar_bad.ui-v1-avatar_vip .ui-v1-avatar__label_bad {
+  border-radius: 0 33px 33px 0;
+}
+.ui-v1-avatar__image {
+  display: block;
+  width: 100%;
+  min-width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  z-index: 1;
+  position: relative;
+}
+.ui-v1-avatar__unresolved {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 100%;
+  height: 100%;
+  color: #636F7F;
+}
+.ui-v1-avatar__status {
+  width: 8px;
+  min-width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  z-index: 1;
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+}
+.ui-v1-avatar__status_busy {
+  background-color: #FF5353;
+}
+.ui-v1-avatar__status_break {
+  background-color: #FFE1BA;
+}
+.ui-v1-avatar__status_dinner {
+  background-color: #EF8E06;
+}
+.ui-v1-avatar__status_free {
+  background-color: #22C993;
+}
+.ui-v1-avatar__status_xs {
+  width: 6px;
+  min-width: 6px;
+  height: 6px;
+}
+.ui-v1-avatar__initials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  color: #636F7F;
+  overflow: hidden;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+}
+.ui-v1-avatar__labels {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  z-index: 5;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.ui-v1-avatar__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  border-radius: 33px;
+  margin-left: auto;
+}
+.ui-v1-avatar__label_bad {
+  background-color: #FF5353;
+}
+.ui-v1-avatar__label_vip {
+  background-color: #FEA530;
+}
+.ui-v1-avatar-list {
+  --ui-v1-avatar-list-gap-color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+.ui-v1-avatar-list__item {
+  position: relative;
+  padding: 2px;
+}
+.ui-v1-avatar-list__item .ui-v1-avatar {
+  border: 2px solid var(--ui-v1-avatar-list-gap-color);
+  border-radius: 50%;
+}
+.ui-v1-avatar-list__item:not(:first-child) {
+  z-index: 2;
+}
+.ui-v1-avatar-list_xs .ui-v1-avatar-list__item:not(:first-child) {
+  margin-left: -12px;
+}
+.ui-v1-avatar-list_sm .ui-v1-avatar-list__item:not(:first-child) {
+  margin-left: -14px;
+}
+.ui-v1-avatar-list_lg .ui-v1-avatar-list__item:not(:first-child) {
+  margin-left: -16px;
+}
 .ui-v1-button {
   --text-color: #1E2248;
   display: inline-block;

package/dist/host.d.ts

@@ -136,8 +136,8 @@ onClosed?: ((...args: any[]) => any) | undefined;
 "onContainer:scroll:y:end"?: ((...args: any[]) => any) | undefined;
 "onContent:scroll:y:end"?: ((...args: any[]) => any) | undefined;
 }>, {
-appearance: APPEARANCE_3;
 id: string;
+appearance: APPEARANCE_3;
 opened: boolean;
 closable: boolean;
 disposeTimeout: string | number | null;
@@ -148,16 +148,16 @@ responsive: boolean;
 
 declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<    {
 size: {
-type: PropType<SIZE_5 | `${SIZE_5}`>;
-default: SIZE_5;
+type: PropType<SIZE_6 | `${SIZE_6}`>;
+default: SIZE_6;
 };
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 size: {
-type: PropType<SIZE_5 | `${SIZE_5}`>;
-default: SIZE_5;
+type: PropType<SIZE_6 | `${SIZE_6}`>;
+default: SIZE_6;
 };
 }>> & Readonly<{}>, {
-size: "md" | "sm" | SIZE_5;
+size: "sm" | "md" | SIZE_6;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare function __VLS_template(): {
@@ -265,13 +265,19 @@ declare enum SCROLLING_2 {
 }
 
 declare enum SIZE {
+    XS = "xs",
+    SM = "sm",
+    LG = "lg"
+}
+
+declare enum SIZE_2 {
     LG = "lg",
     MD = "md",
     SM = "sm",
     XS = "xs"
 }
 
-declare enum SIZE_2 {
+declare enum SIZE_3 {
     ARTICLE = "article",
     BODY = "body",
     PARAGRAPH = "paragraph",
@@ -281,23 +287,45 @@ declare enum SIZE_2 {
     TITLE02 = "title-02"
 }
 
-declare enum SIZE_3 {
+declare enum SIZE_4 {
     LG = "lg",
     SM = "sm"
 }
 
-declare enum SIZE_4 {
+declare enum SIZE_5 {
     LG = "lg",
     MD = "md",
     SM = "sm",
     XS = "xs"
 }
 
-declare enum SIZE_5 {
+declare enum SIZE_6 {
     SM = "sm",
     MD = "md"
 }
 
+declare enum STATUS {
+    NONE = "",
+    BUSY = "busy",
+    BREAK = "break",
+    DINNER = "dinner",
+    FREE = "free"
+}
+
+export declare const UiAvatar: DefineComponent<
+UiAvatarProperties
+>;
+
+declare type UiAvatarProperties = {
+    src?: string;
+    name?: string;
+    href?: string;
+    status?: STATUS;
+    vip?: boolean;
+    bad?: boolean;
+    size?: SIZE;
+};
+
 export declare const UiButton: DefineComponent<
 UiButtonProperties,
 UiButtonMethods
@@ -314,7 +342,7 @@ declare type UiButtonProperties = {
     href?: HTMLAnchorElement['href'] | undefined;
     appearance?: APPEARANCE | `${APPEARANCE}`;
     variant?: VARIANT | `${VARIANT}`;
-    size?: SIZE | `${SIZE}`;
+    size?: SIZE_2 | `${SIZE_2}`;
     active?: boolean;
     disabled?: boolean;
     locked?: boolean;
@@ -354,7 +382,7 @@ declare type UiLinkProperties = {
     href?: string;
     external?: boolean;
     appearance?: APPEARANCE_2 | `${APPEARANCE_2}`;
-    size?: SIZE_2 | `${SIZE_2}`;
+    size?: SIZE_3 | `${SIZE_3}`;
     light?: boolean;
     accent?: boolean;
     dotted?: boolean;
@@ -381,7 +409,7 @@ declare type UiModalSidebarProperties = {
     disposeTimeout?: number | string | null;
     fixed?: boolean;
     scrolling?: SCROLLING | `${SCROLLING}`;
-    size?: SIZE_3 | `${SIZE_3}`;
+    size?: SIZE_4 | `${SIZE_4}`;
 };
 
 export declare const UiModalWindow: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -443,7 +471,7 @@ declare type UiScrollBoxProperties = {
 export declare const UiTag: DefineComponent<UiTagProperties>;
 
 declare type UiTagProperties = {
-    size?: SIZE_4 | `${SIZE_4}`;
+    size?: SIZE_5 | `${SIZE_5}`;
     pinned?: boolean;
     removable?: boolean;
     interactive?: boolean;

package/dist/host.js

@@ -1,15 +1,199 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Text, Comment, defineComponent, ref, h, openBlock, createElementBlock, createElementVNode, computed, mergeProps, unref, createBlock, createCommentVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, createVNode, Transition, withCtx, resolveDynamicComponent, normalizeProps, guardReactiveProps, normalizeStyle, reactive, inject, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, useSlots, Teleport, withDirectives, vShow, toHandlers, withModifiers, provide, createSlots } from "vue";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, useSlots, ref, computed, inject, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createVNode, createCommentVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, Text, Comment, h, Transition, normalizeProps, guardReactiveProps, normalizeStyle, reactive, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, Teleport, withDirectives, vShow, toHandlers, withModifiers, provide, createSlots } from "vue";
+const _hoisted_1$e = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function render$7(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m3.237-10.576A2.424 2.424 0 0 0 12.812 7H11.13a2.424 2.424 0 0 0-2.424 2.424v.421c0 .233.188.421.42.421h.64a.42.42 0 0 0 .421-.42v-.422a.943.943 0 0 1 .943-.942h1.683c.521 0 .943.422.943.942v.472a.95.95 0 0 1-.64.9l-.8.261a1.58 1.58 0 0 0-1.085 1.499v.656c0 .233.188.421.42.421h.64a.42.42 0 0 0 .421-.42v-.657a.11.11 0 0 1 .101-.101l.8-.261a2.43 2.43 0 0 0 1.684-2.298zm-2.845 5.893h-.842a.42.42 0 0 0-.421.42v.842c0 .233.188.421.42.421h.843a.42.42 0 0 0 .42-.42v-.843a.42.42 0 0 0-.42-.42",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ]));
+}
+const IconHelpOutlined = { render: render$7 };
+const _hoisted_1$d = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 18 8"
+};
+function render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
+    createElementVNode("g", { fill: "currentColor" }, [
+      createElementVNode("path", { d: "M0 0v8h2.867q1.257-.011 1.935-.604.68-.594.68-1.748 0-.675-.33-1.143a1.54 1.54 0 0 0-.892-.62q.497-.21.775-.654.279-.45.279-1.039 0-1.077-.694-1.632Q3.926 0 2.584 0zm1.52 6.676v-2.16h1.393q1.048.016 1.048 1.116 0 .488-.303.77-.3.273-.836.274zm1.124-3.324H1.52V1.335h1.064q.628 0 .916.242.294.236.294.78 0 .972-1.15.995M7.503 6.352h2.665L10.679 8h1.616l-2.76-8H8.125L5.38 8h1.616zm2.254-1.336H7.913l.917-2.994zM12.362 8V0h2.27q.972 0 1.737.478.77.473 1.2 1.352.432.873.431 1.989v.368q0 1.115-.425 1.983a3.17 3.17 0 0 1-1.191 1.346A3.26 3.26 0 0 1 14.646 8zm1.52-6.665v5.34h.734q.891 0 1.363-.631.47-.632.481-1.808v-.423q0-1.22-.466-1.846-.466-.632-1.363-.632z" })
+    ], -1)
+  ]));
+}
+const SpriteBAD = { render: render$6 };
+const _hoisted_1$c = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 8"
+};
+function render$5(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+    createElementVNode("g", { fill: "currentColor" }, [
+      createElementVNode("path", { d: "M3.373 6.016 5.058 0h1.704L4.175 8H2.577L0 0h1.7zM8.99 8H7.46V0H8.99zM11.84 8V5.181h1.343q1.322 0 2.067-.676.75-.681.75-1.857 0-.774-.342-1.379a2.3 2.3 0 0 0-.98-.94Q14.045 0 13.208 0H10.31v8zm1.368-4.154h-1.367v-2.51h1.403q.567.01.888.373t.322.95q0 .571-.322.88-.316.307-.924.307" })
+    ], -1)
+  ]));
+}
+const SpriteVIP = { render: render$5 };
 const isURL = (href) => {
   try {
-    new URL(href);
-    return true;
+    const normalizedHref = href.includes("://") ? href : `http://${href}`;
+    const url = new URL(normalizedHref);
+    const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\S*)$/;
+    return urlPattern.test(url.href);
   } catch {
     return false;
   }
 };
+const AvatarSizeKey = Symbol("UiAvatarSize");
+var SIZE$5 = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["XS"] = "xs";
+  SIZE2["SM"] = "sm";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE$5 || {});
+var STATUS = /* @__PURE__ */ ((STATUS2) => {
+  STATUS2["NONE"] = "";
+  STATUS2["BUSY"] = "busy";
+  STATUS2["BREAK"] = "break";
+  STATUS2["DINNER"] = "dinner";
+  STATUS2["FREE"] = "free";
+  return STATUS2;
+})(STATUS || {});
+const _hoisted_1$b = ["src"];
+const _hoisted_2$4 = {
+  key: 1,
+  class: "ui-v1-avatar__unresolved"
+};
+const _hoisted_3$3 = {
+  key: 3,
+  class: "ui-v1-avatar__initials"
+};
+const _hoisted_4$1 = {
+  key: 4,
+  class: "ui-v1-avatar__labels"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "ui-v1-avatar__label ui-v1-avatar__label_vip"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "ui-v1-avatar__label ui-v1-avatar__label_bad"
+};
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "UiAvatar",
+  props: {
+    /** Путь к изображению */
+    src: {
+      type: String,
+      validator: (src) => isURL(src) || src.length === 0,
+      default: ""
+    },
+    /** Наименование участника */
+    name: {
+      type: String,
+      default: null
+    },
+    /** Ссылка для перехода */
+    href: {
+      type: String,
+      validator: (href) => isURL(href) || href.length === 0,
+      default: ""
+    },
+    /** Статус пользователя */
+    status: {
+      type: String,
+      validator: (status) => Object.values(STATUS).includes(status),
+      default: null
+    },
+    /** Пометка VIP в карточке пользователя */
+    vip: {
+      type: Boolean,
+      default: false
+    },
+    /** Пометка BAD в карточке пользователя */
+    bad: {
+      type: Boolean,
+      default: false
+    },
+    /** Размер изображения */
+    size: {
+      type: String,
+      validator: (size) => Object.values(SIZE$5).includes(size),
+      default: SIZE$5.SM
+    }
+  },
+  setup(__props) {
+    const firstLetterOf = (name) => name.charAt(0).toUpperCase();
+    const props = __props;
+    const slots = useSlots();
+    const loaded = ref(false);
+    const unresolved = computed(() => !(props.name || slots.default));
+    const initials = computed(() => {
+      if (!props.name) {
+        return "";
+      }
+      const [firstName, ...otherNames] = props.name.split(" ");
+      return otherNames.length > 0 ? firstLetterOf(firstName) + firstLetterOf(otherNames[otherNames.length - 1]) : firstLetterOf(firstName);
+    });
+    const size = inject(AvatarSizeKey, computed(() => props.size));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.href ? "a" : "div"), mergeProps({
+        ref: "root",
+        href: __props.href || void 0,
+        class: {
+          ["ui-v1-avatar"]: true,
+          [`ui-v1-avatar_${unref(size)}`]: true,
+          ["ui-v1-avatar_bad"]: __props.bad,
+          ["ui-v1-avatar_vip"]: __props.vip
+        }
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          __props.src ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: __props.src,
+            alt: "",
+            class: "ui-v1-avatar__image",
+            draggable: "false",
+            onLoad: _cache[0] || (_cache[0] = ($event) => loaded.value = true),
+            onError: _cache[1] || (_cache[1] = ($event) => loaded.value = false)
+          }, null, 40, _hoisted_1$b)) : !__props.src && unresolved.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+            createVNode(unref(IconHelpOutlined))
+          ])) : createCommentVNode("", true),
+          __props.status && !(__props.vip || __props.bad) ? (openBlock(), createElementBlock("span", {
+            key: 2,
+            class: normalizeClass({
+              ["ui-v1-avatar__status"]: true,
+              [`ui-v1-avatar__status_${unref(size)}`]: true,
+              [`ui-v1-avatar__status_${__props.status}`]: __props.status
+            })
+          }, null, 2)) : createCommentVNode("", true),
+          !(unresolved.value || loaded.value) ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(initials.value), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          __props.vip || __props.bad ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            __props.vip ? (openBlock(), createElementBlock("span", _hoisted_5$1, [
+              createVNode(unref(SpriteVIP), { class: "ui-v1-avatar__vip" })
+            ])) : createCommentVNode("", true),
+            __props.bad ? (openBlock(), createElementBlock("span", _hoisted_6, [
+              createVNode(unref(SpriteBAD), { class: "ui-v1-avatar__bad" })
+            ])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["href", "class"]);
+    };
+  }
+});
 const SHAPE_FLAG_ARRAY_CHILDREN = 16;
 const SHAPE_FLAG_TEXT = 8;
 const inlines = ["b", "i", "span", "strong"];
@@ -3479,6 +3663,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   plugin as I18nPlugin,
   plugin$1 as ModalPlugin,
+  _sfc_main$g as UiAvatar,
   _sfc_main$f as UiButton,
   _sfc_main$e as UiCheckbox,
   _sfc_main$d as UiError,

package/dist/remote.cjs

@@ -42,6 +42,10 @@ const defineRemoteComponent = (type, emits = void 0, slots = []) => vue.defineCo
     }, toRemoteSlots(slots, internalSlots));
   }
 });
+const UiAvatarType = "UiAvatar";
+const UiAvatar = defineRemoteComponent(UiAvatarType);
+const UiAvatarListType = "UiAvatarList";
+const UiAvatarList = defineRemoteComponent(UiAvatarListType);
 const UiButtonType = "UiButton";
 const UiButton = defineRemoteComponent(
   UiButtonType,
@@ -168,6 +172,10 @@ const UiYandexMap = defineRemoteComponent(
     "update:address"
   ]
 );
+exports.UiAvatar = UiAvatar;
+exports.UiAvatarList = UiAvatarList;
+exports.UiAvatarListType = UiAvatarListType;
+exports.UiAvatarType = UiAvatarType;
 exports.UiButton = UiButton;
 exports.UiButtonType = UiButtonType;
 exports.UiCheckbox = UiCheckbox;

package/dist/remote.d.ts

@@ -67,13 +67,19 @@ declare type SerializedDOMRect = {
 };
 
 declare enum SIZE {
+    XS = "xs",
+    SM = "sm",
+    LG = "lg"
+}
+
+declare enum SIZE_2 {
     LG = "lg",
     MD = "md",
     SM = "sm",
     XS = "xs"
 }
 
-declare enum SIZE_2 {
+declare enum SIZE_3 {
     ARTICLE = "article",
     BODY = "body",
     PARAGRAPH = "paragraph",
@@ -83,18 +89,68 @@ declare enum SIZE_2 {
     TITLE02 = "title-02"
 }
 
-declare enum SIZE_3 {
+declare enum SIZE_4 {
     LG = "lg",
     SM = "sm"
 }
 
-declare enum SIZE_4 {
+declare enum SIZE_5 {
     LG = "lg",
     MD = "md",
     SM = "sm",
     XS = "xs"
 }
 
+declare enum STATUS {
+    NONE = "",
+    BUSY = "busy",
+    BREAK = "break",
+    DINNER = "dinner",
+    FREE = "free"
+}
+
+export declare const UiAvatar: Component<    {
+[x: string]: unknown;
+}, RemoteProperties<UiAvatarProperties>, {
+[x: string]: never;
+}, {
+[x: string]: never;
+}, MethodOptions, {
+[x: string]: never;
+}>;
+
+export declare const UiAvatarList: Component<    {
+[x: string]: unknown;
+}, RemoteProperties<UiAvatarListProperties>, {
+[x: string]: never;
+}, {
+[x: string]: never;
+}, MethodOptions, {
+[x: string]: never;
+}>;
+
+declare type UiAvatarListProperties = {
+    avatars?: Array<{
+        src: string;
+        name: string;
+    }>;
+    size?: SIZE;
+};
+
+export declare const UiAvatarListType: SchemaType<"UiAvatarList", RemoteProperties<UiAvatarListProperties>>;
+
+declare type UiAvatarProperties = {
+    src?: string;
+    name?: string;
+    href?: string;
+    status?: STATUS;
+    vip?: boolean;
+    bad?: boolean;
+    size?: SIZE;
+};
+
+export declare const UiAvatarType: SchemaType<"UiAvatar", RemoteProperties<UiAvatarProperties>>;
+
 export declare const UiButton: Component<    {
 [x: string]: unknown;
 }, RemoteProperties<UiButtonProperties>, {
@@ -118,7 +174,7 @@ declare type UiButtonProperties = {
     href?: HTMLAnchorElement['href'] | undefined;
     appearance?: APPEARANCE | `${APPEARANCE}`;
     variant?: VARIANT | `${VARIANT}`;
-    size?: SIZE | `${SIZE}`;
+    size?: SIZE_2 | `${SIZE_2}`;
     active?: boolean;
     disabled?: boolean;
     locked?: boolean;
@@ -194,7 +250,7 @@ declare type UiLinkProperties = {
     href?: string;
     external?: boolean;
     appearance?: APPEARANCE_2 | `${APPEARANCE_2}`;
-    size?: SIZE_2 | `${SIZE_2}`;
+    size?: SIZE_3 | `${SIZE_3}`;
     light?: boolean;
     accent?: boolean;
     dotted?: boolean;
@@ -253,7 +309,7 @@ declare type UiModalSidebarProperties = {
     disposeTimeout?: number | string | null;
     fixed?: boolean;
     scrolling?: SCROLLING | `${SCROLLING}`;
-    size?: SIZE_3 | `${SIZE_3}`;
+    size?: SIZE_4 | `${SIZE_4}`;
 };
 
 export declare const UiModalSidebarType: SchemaType<"UiModalSidebar", RemoteProperties<UiModalSidebarProperties>, Record<string, never>>;
@@ -391,7 +447,7 @@ remove: () => boolean;
 }>;
 
 declare type UiTagProperties = {
-    size?: SIZE_4 | `${SIZE_4}`;
+    size?: SIZE_5 | `${SIZE_5}`;
     pinned?: boolean;
     removable?: boolean;
     interactive?: boolean;

package/dist/remote.js

@@ -40,6 +40,10 @@ const defineRemoteComponent = (type, emits = void 0, slots = []) => defineCompon
     }, toRemoteSlots(slots, internalSlots));
   }
 });
+const UiAvatarType = "UiAvatar";
+const UiAvatar = defineRemoteComponent(UiAvatarType);
+const UiAvatarListType = "UiAvatarList";
+const UiAvatarList = defineRemoteComponent(UiAvatarListType);
 const UiButtonType = "UiButton";
 const UiButton = defineRemoteComponent(
   UiButtonType,
@@ -167,6 +171,10 @@ const UiYandexMap = defineRemoteComponent(
   ]
 );
 export {
+  UiAvatar,
+  UiAvatarList,
+  UiAvatarListType,
+  UiAvatarType,
   UiButton,
   UiButtonType,
   UiCheckbox,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui-v1-components",
   "type": "module",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -54,30 +54,32 @@
     "vue": "^3.5"
   },
   "dependencies": {
-    "@omnicajs/vue-remote": "^0.2.3",
-    "@remote-ui/rpc": "^1.4.5"
+    "@omnicajs/vue-remote": "^0.2.5",
+    "@remote-ui/rpc": "^1.4.5",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-themes": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/builder-vite": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/types": "^8.4.5",
-    "@storybook/vue3": "^8.4.5",
-    "@storybook/vue3-vite": "^8.4.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/builder-vite": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/types": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.12",
     "@yandex/ymaps3-types": "^0.0.21",
     "less": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.7",
     "tsx": "^4.19.2",
     "typescript": "^5.6.3",
     "uuid": "^11.0.3",