mimir-ui-kit 1.41.5 → 1.42.0

package/dist/assets/CardTrail.css

@@ -1 +1 @@
-._card-trail_vv8gl_3{display:flex;flex-direction:column}._card-trail-header_vv8gl_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_vv8gl_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_vv8gl_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_vv8gl_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_vv8gl_29{margin-left:auto}._card-trail-list_vv8gl_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}._card-trail-list_vv8gl_32::-webkit-scrollbar{display:none}._card-trail-list-item_vv8gl_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_vv8gl_45._pointer_vv8gl_49{cursor:pointer}
+._card-trail_c21mz_3{display:flex;flex-direction:column}._card-trail-header_c21mz_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_c21mz_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_c21mz_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_c21mz_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_c21mz_29{margin-left:auto}._card-trail-list_c21mz_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}._card-trail-list_c21mz_32::-webkit-scrollbar{display:none}._card-trail-list-item_c21mz_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_c21mz_45._pointer_c21mz_49{cursor:pointer}

package/dist/assets/ClearButton.css

@@ -0,0 +1 @@
+._clear_135p1_2{color:var(--asphalt-normal);border-radius:var(--mimir-control-radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}._clear_135p1_2 svg{color:currentcolor;fill:currentcolor}._clear_135p1_2 svg path{color:currentcolor;fill:currentcolor}._clear_135p1_2._gray_135p1_18{background:var(--gray-normal)}._clear_135p1_2:hover{box-shadow:none;color:var(--counter-text)}._clear_135p1_2:active{box-shadow:none;color:var(--asphalt-active)}._clear_135p1_2:disabled{color:var(--disabled)}._clear_135p1_2._l_135p1_32{height:var(--button-height-xs);width:var(--button-height-xs)}._clear_135p1_2._m-s_135p1_36{height:var(--button-height-ms);width:var(--button-height-ms)}

package/dist/assets/ListFiles.css

@@ -1 +1 @@
-._file-info_wnnpg_2{display:flex;flex-direction:column;gap:var(--mimir-space-xs);overflow:hidden}._file-info_wnnpg_2 ._file-info-size_wnnpg_8{color:var(--disabled-color);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-m);font-family:var(--mimir-font-inter),sans-serif;line-height:var(--mimir-line-height-text-xxs);text-align:left}._file-info_wnnpg_2 ._file-info-name-wrapper_wnnpg_16{display:table;width:100%;table-layout:fixed}._file-info_wnnpg_2 ._file-info-name-wrapper_wnnpg_16 ._file-info-name_wnnpg_16{display:table-cell;overflow:hidden;color:var(--black-100);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-l2);font-family:var(--mimir-font-inter),sans-serif;line-height:var(--mimir-line-height-text-xl);white-space:nowrap;text-align:left;text-overflow:ellipsis}._file-upload-container_wnnpg_34{display:flex;flex-direction:column;gap:var(--mimir-space-xs);width:100%;margin-bottom:0;padding-left:0}._file-upload-container_wnnpg_34 ._file-upload-container-item_wnnpg_42{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--mimir-space-xs) var(--mimir-space-m);background:var(--file-upload-container-background);border-radius:var(--mimir-control-radius)}._file-upload-container_wnnpg_34 ._file-upload-container-item_wnnpg_42 ._delete-button_wnnpg_51{position:absolute;top:var(--mimir-space-2xs);right:var(--mimir-space-2xs);background:var(--delete-button-background)}._white_wnnpg_58{--file-upload-container-background: var(--white);--delete-button-background: var(--black-5)}._gray_wnnpg_63{--file-upload-container-background: var(--black-5);--delete-button-background: var(--white)}
+._file-info_rd4f3_2{display:flex;flex-direction:column;gap:var(--mimir-space-xs);overflow:hidden}._file-info_rd4f3_2 ._file-info-size_rd4f3_8{color:var(--disabled-color);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-m);font-family:var(--mimir-font-inter),sans-serif;line-height:var(--mimir-line-height-text-xxs);text-align:left;height:var(--mimir-space-2m);display:flex;align-items:center}._file-info_rd4f3_2 ._file-info-name-wrapper_rd4f3_19{display:table;width:100%;table-layout:fixed}._file-info_rd4f3_2 ._file-info-name-wrapper_rd4f3_19 ._file-info-name_rd4f3_19{display:table-cell;overflow:hidden;color:var(--black-100);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-l2);font-family:var(--mimir-font-inter),sans-serif;line-height:var(--mimir-line-height-text-xl);white-space:nowrap;text-align:left;text-overflow:ellipsis}._file-upload-container_rd4f3_37{display:flex;flex-direction:column;gap:var(--mimir-space-xs);width:100%;margin-bottom:0;padding-left:0}._file-upload-container_rd4f3_37 ._file-upload-container-item_rd4f3_45{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--mimir-space-xs) var(--mimir-space-m);background:var(--file-upload-container-background);border-radius:var(--mimir-control-radius)}._file-upload-container_rd4f3_37 ._file-upload-container-item_rd4f3_45 ._delete-button_rd4f3_54{position:absolute;top:var(--mimir-space-2xs);right:var(--mimir-space-2xs);background:var(--delete-button-background)}._white_rd4f3_61{--file-upload-container-background: var(--white);--delete-button-background: var(--black-5)}._gray_rd4f3_66{--file-upload-container-background: var(--black-5);--delete-button-background: var(--white)}

package/dist/components/CardTrail/CardTrail.d.ts

@@ -9,10 +9,18 @@ export type TProps = {
      * Расстояние между карточками.
      */
     spaceBetween?: number;
+    /**
+     * Делитель ширины карточками, который позволяет оставлять предыдщую карточку немного выглядывать.
+     */
+    dividedCardWidth?: number;
     /**
      * Количество карточек для перелистывания.
      */
     scrollStep?: number;
+    /**
+     * Index карточке, у которой надо брать ширирну.
+     */
+    currentCardIndex?: number;
     /**
      * Флаг, определяющий, нужно ли при клике на карточку скроллиться до нее.
      */

package/dist/components/CardTrail/CardTrail.js

@@ -1,116 +1,118 @@
-import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
 import { c as i } from "../../index-DIxK0V-G.js";
-import { forwardRef as x, useRef as p, useState as B, useEffect as H, Children as O } from "react";
-import { DEFAULT_SPACE_BETWEEN as R, DEFAULT_SCROLL_STEP as j } from "./constants.js";
-import { hasHorizontalScroll as u, isScrollAtEdge as C } from "./utils.js";
-import { useMergeRefs as F } from "../../hooks/useMergeRefs/useMergeRefs.js";
-import { useThrottledCallback as U } from "../../hooks/useThrottledCallback/index.js";
-import { MergedButton as $ } from "../MergedButton/MergedButton.js";
-import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
-  "card-trail": "_card-trail_vv8gl_3",
-  "card-trail-header": "_card-trail-header_vv8gl_7",
-  "card-trail-header-title": "_card-trail-header-title_vv8gl_15",
-  "card-trail-header-merged-button": "_card-trail-header-merged-button_vv8gl_29",
-  "card-trail-list": "_card-trail-list_vv8gl_32",
-  "card-trail-list-item": "_card-trail-list-item_vv8gl_45",
-  pointer: q
-}, P = x((b, N) => {
+import { forwardRef as H, useRef as E, useState as u, useEffect as O, Children as $ } from "react";
+import { DEFAULT_SPACE_BETWEEN as j, DEFAULT_SCROLL_STEP as V, DEFAULT_DIVIDED as q, DEFAULT_CARD_INDEX as X } from "./constants.js";
+import { hasHorizontalScroll as h, isScrollAtEdge as S } from "./utils.js";
+import { useMergeRefs as G } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { useThrottledCallback as J } from "../../hooks/useThrottledCallback/index.js";
+import { MergedButton as K } from "../MergedButton/MergedButton.js";
+import '../../assets/CardTrail.css';const P = "_pointer_c21mz_49", c = {
+  "card-trail": "_card-trail_c21mz_3",
+  "card-trail-header": "_card-trail-header_c21mz_7",
+  "card-trail-header-title": "_card-trail-header-title_c21mz_15",
+  "card-trail-header-merged-button": "_card-trail-header-merged-button_c21mz_29",
+  "card-trail-list": "_card-trail-list_c21mz_32",
+  "card-trail-list-item": "_card-trail-list-item_c21mz_45",
+  pointer: P
+}, lr = H((v, D) => {
   const {
-    cardClassName: S,
-    cardTrailClassName: E,
-    cardTrailHeaderClassName: T,
-    cardTrailListClassName: k,
-    cardTrailMergedButtonClassName: L,
-    children: h,
-    title: m,
-    spaceBetween: d = R,
-    scrollStep: f = j,
-    mergedButtonProps: c,
-    scrollToCard: _ = !1,
-    needButtons: w = !0
-  } = b, r = p(null), n = p(null), [o, y] = B({
+    cardClassName: T,
+    cardTrailClassName: z,
+    cardTrailHeaderClassName: L,
+    cardTrailListClassName: A,
+    cardTrailMergedButtonClassName: W,
+    children: m,
+    title: f,
+    spaceBetween: d = j,
+    scrollStep: _ = V,
+    mergedButtonProps: l,
+    scrollToCard: C = !1,
+    needButtons: k = !0,
+    dividedCardWidth: p = q,
+    currentCardIndex: g = X
+  } = v, r = E(null), n = E(null), [o, I] = u({
     leftButton: !0,
     rightButton: !1
-  }), [A, g] = B(
-    () => u(r == null ? void 0 : r.current)
-  ), W = F(r, N), z = U(() => {
-    const t = !C(r.current, "left"), e = !C(r.current, "right");
-    y({
-      leftButton: !t,
-      rightButton: !e
+  }), [w, B] = u(0), [y, b] = u(
+    () => h(r == null ? void 0 : r.current)
+  ), x = G(r, D), M = J(() => {
+    const e = !S(r.current, "left"), t = !S(r.current, "right");
+    I({
+      leftButton: !e,
+      rightButton: !t
     });
-  }, 300), M = (t) => () => {
+  }, 300), F = (e) => () => {
     var a;
-    if (!_)
+    if (!C)
       return;
-    const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
-      `[data-active-card='${t}']`
+    const t = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
+      `[data-active-card='${e}']`
     );
-    e && (e == null || e.scrollIntoView({
+    t && (t == null || t.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     }));
-  }, D = () => {
+  }, R = () => {
     var a;
     if (!r.current || o.leftButton) return;
-    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    t.scrollBy({
-      left: -(e + d) * f,
+    const e = r.current, t = ((a = e.children[g]) == null ? void 0 : a.clientWidth) ?? 0;
+    B(t / p), e.scrollBy({
+      left: -(t + d) * _,
       behavior: "smooth"
     });
-  }, I = () => {
+  }, U = () => {
     var a;
     if (!r.current || o.rightButton) return;
-    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    t.scrollBy({
-      left: (e + d) * f,
+    const e = r.current, t = ((a = e.children[g]) == null ? void 0 : a.clientWidth) ?? 0;
+    B(t / p), e.scrollBy({
+      left: (t + d) * _,
       behavior: "smooth"
     });
   };
-  return H(() => {
-    const t = r.current;
-    if (t)
+  return O(() => {
+    const e = r.current;
+    if (e)
       return n.current = new ResizeObserver(() => {
-        g(u(r == null ? void 0 : r.current));
-      }), n.current.observe(t), g(u(r == null ? void 0 : r.current)), () => {
+        b(h(r == null ? void 0 : r.current));
+      }), n.current.observe(e), b(h(r == null ? void 0 : r.current)), () => {
         n.current && n.current.disconnect();
       };
-  }, [h]), /* @__PURE__ */ v("section", { className: i(l["card-trail"], E), children: [
-    /* @__PURE__ */ v(
+  }, [m]), /* @__PURE__ */ N("section", { className: i(c["card-trail"], z), children: [
+    /* @__PURE__ */ N(
       "header",
       {
         className: i(
-          l["card-trail-header"],
-          T
+          c["card-trail-header"],
+          L
         ),
         children: [
-          m && /* @__PURE__ */ s("h3", { className: l["card-trail-header-title"], children: m }),
-          A && w && /* @__PURE__ */ s(
-            $,
+          f && /* @__PURE__ */ s("h3", { className: c["card-trail-header-title"], children: f }),
+          y && k && /* @__PURE__ */ s(
+            K,
             {
               buttonsWrapperClassName: i(
-                l["card-trail-header-merged-button"],
-                L
+                c["card-trail-header-merged-button"],
+                W
               ),
               buttons: [
                 {
                   isIconButton: !0,
                   iconName: "ArrowLeft16px",
                   variant: "gray",
-                  onClick: D,
+                  onClick: R,
                   disabled: o.leftButton,
                   size: "s",
-                  ...c == null ? void 0 : c.leftButton
+                  ...l == null ? void 0 : l.leftButton
                 },
                 {
                   isIconButton: !0,
                   iconName: "ArrowRight16px",
                   variant: "gray",
-                  onClick: I,
+                  onClick: U,
                   size: "s",
                   disabled: o.rightButton,
-                  ...c == null ? void 0 : c.rightButton
+                  ...l == null ? void 0 : l.rightButton
                 }
               ]
             }
@@ -121,22 +123,22 @@ import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
     /* @__PURE__ */ s(
       "ul",
       {
-        onScroll: z,
-        style: { gap: d },
-        className: i(l["card-trail-list"], k),
-        ref: W,
-        children: O.map(h, (t, e) => /* @__PURE__ */ s(
+        onScroll: M,
+        style: { gap: d, scrollPadding: `0 ${w}px` },
+        className: i(c["card-trail-list"], A),
+        ref: x,
+        children: $.map(m, (e, t) => /* @__PURE__ */ s(
           "li",
           {
-            onClick: M(e),
-            "data-active-card": e,
-            "data-testid": `card-trail-item-${e}`,
+            onClick: F(t),
+            "data-active-card": t,
+            "data-testid": `card-trail-item-${t}`,
             className: i(
-              l["card-trail-list-item"],
-              { [l.pointer]: _ },
-              S
+              c["card-trail-list-item"],
+              { [c.pointer]: C },
+              T
             ),
-            children: t
+            children: e
           }
         ))
       }
@@ -144,5 +146,5 @@ import '../../assets/CardTrail.css';const q = "_pointer_vv8gl_49", l = {
   ] });
 });
 export {
-  P as CardTrail
+  lr as CardTrail
 };

package/dist/components/CardTrail/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const DEFAULT_SPACE_BETWEEN = 10;
 export declare const DEFAULT_SCROLL_STEP = 1;
+export declare const DEFAULT_CARD_INDEX = 1;
+export declare const DEFAULT_DIVIDED = 1;

package/dist/components/CardTrail/constants.js

@@ -1,5 +1,7 @@
-const E = 10, L = 1;
+const E = 10, D = 1, _ = 1, A = 1;
 export {
-  L as DEFAULT_SCROLL_STEP,
+  _ as DEFAULT_CARD_INDEX,
+  A as DEFAULT_DIVIDED,
+  D as DEFAULT_SCROLL_STEP,
   E as DEFAULT_SPACE_BETWEEN
 };

package/dist/components/InputClearButton/ClearButton.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+
+export type TClearButton = {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Выключен ли clearButton или нет
+     */
+    disabled?: boolean;
+    /**
+     * Вариант кнопки загрузки файла
+     */
+    variant?: 'gray' | 'white';
+    /**
+     * Размер кнопки загрузки файла
+     */
+    size?: 'l' | 'm-s';
+    /**
+     * Класс для кнопки
+     */
+    clearButtonClassName?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const ClearButton: React.ForwardRefExoticComponent<{
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Выключен ли clearButton или нет
+     */
+    disabled?: boolean;
+    /**
+     * Вариант кнопки загрузки файла
+     */
+    variant?: "gray" | "white";
+    /**
+     * Размер кнопки загрузки файла
+     */
+    size?: "l" | "m-s";
+    /**
+     * Класс для кнопки
+     */
+    clearButtonClassName?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/InputClearButton/ClearButton.js

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as i } from "../../index-DIxK0V-G.js";
+import { forwardRef as _ } from "react";
+import { EClearButtonSize as a, EClearButtonVariant as f } from "./constants.js";
+import { Icon as u } from "../../icons/Icon.js";
+import '../../assets/ClearButton.css';const C = "_clear_135p1_2", y = "_gray_135p1_18", N = "_l_135p1_32", o = {
+  clear: C,
+  gray: y,
+  l: N,
+  "m-s": "_m-s_135p1_36"
+}, d = _(
+  (s, e) => {
+    const {
+      disabled: l = !1,
+      size: r = a.MS,
+      variant: n = f.Gray,
+      className: c,
+      ...m
+    } = s, p = i(
+      o.clear,
+      r === a.L ? o.l : o["m-s"],
+      o[n],
+      c
+    );
+    return /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        ref: e,
+        ...m,
+        disabled: l,
+        className: p,
+        children: /* @__PURE__ */ t(u, { iconName: r === "l" ? "Close16px" : "Close12px" })
+      }
+    );
+  }
+);
+d.displayName = "ClearButton";
+export {
+  d as ClearButton
+};

package/dist/components/InputClearButton/constants.d.ts

@@ -0,0 +1,8 @@
+export declare enum EClearButtonVariant {
+    Gray = "gray",
+    White = "white"
+}
+export declare enum EClearButtonSize {
+    L = "l",
+    MS = "m-s"
+}

package/dist/components/InputClearButton/constants.js

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.Gray = "gray", r.White = "white", r))(e || {}), h = /* @__PURE__ */ ((r) => (r.L = "l", r.MS = "m-s", r))(h || {});
+export {
+  h as EClearButtonSize,
+  e as EClearButtonVariant
+};

package/dist/components/InputClearButton/index.d.ts

@@ -0,0 +1,4 @@
+export { ClearButton } from './ClearButton.tsx';
+export type { TClearButton } from './ClearButton.tsx';
+export { EClearButtonVariant } from './constants.ts';
+export type { EClearButtonSize } from './constants.ts';

package/dist/components/InputClearButton/index.js

@@ -0,0 +1,6 @@
+import { ClearButton as o } from "./ClearButton.js";
+import { EClearButtonVariant as e } from "./constants.js";
+export {
+  o as ClearButton,
+  e as EClearButtonVariant
+};

package/dist/components/ListFiles/ListFiles.js

@@ -1,66 +1,63 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { c as d } from "../../index-DIxK0V-G.js";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { c as p } from "../../index-DIxK0V-G.js";
 import { useState as u, useEffect as w } from "react";
-import { EFileItemVariant as g } from "./constants.js";
-import { formating as N } from "../../utils/index.js";
-import { Button as h } from "../Button/Button.js";
-import '../../assets/ListFiles.css';const z = "_white_wnnpg_58", y = "_gray_wnnpg_63", e = {
-  "file-info": "_file-info_wnnpg_2",
-  "file-info-size": "_file-info-size_wnnpg_8",
-  "file-info-name-wrapper": "_file-info-name-wrapper_wnnpg_16",
-  "file-info-name": "_file-info-name_wnnpg_16",
-  "file-upload-container": "_file-upload-container_wnnpg_34",
-  "file-upload-container-item": "_file-upload-container-item_wnnpg_42",
-  "delete-button": "_delete-button_wnnpg_51",
-  white: z,
-  gray: y
+import { EFileItemVariant as h } from "./constants.js";
+import { formating as z } from "../../utils/index.js";
+import { ClearButton as N } from "../InputClearButton/ClearButton.js";
+import '../../assets/ListFiles.css';const y = "_white_rd4f3_61", x = "_gray_rd4f3_66", e = {
+  "file-info": "_file-info_rd4f3_2",
+  "file-info-size": "_file-info-size_rd4f3_8",
+  "file-info-name-wrapper": "_file-info-name-wrapper_rd4f3_19",
+  "file-info-name": "_file-info-name_rd4f3_19",
+  "file-upload-container": "_file-upload-container_rd4f3_37",
+  "file-upload-container-item": "_file-upload-container-item_rd4f3_45",
+  "delete-button": "_delete-button_rd4f3_54",
+  white: y,
+  gray: x
 };
-function B({
-  value: o,
-  onChange: s,
-  classNameWrapper: f,
-  variant: c = g.white,
-  disabled: m
+function F({
+  value: n,
+  onChange: f,
+  classNameWrapper: l,
+  variant: m = h.white,
+  disabled: c
 }) {
-  const [a, l] = u(o);
+  const [o, s] = u(n);
   w(() => {
-    l(o);
-  }, [o]);
-  const p = async (i) => {
-    const n = [...a.filter((_) => _.id !== i)];
-    l(n), s == null || s({ deleteId: i, list: n });
+    s(n);
+  }, [n]);
+  const d = async (i) => {
+    const t = [...o.filter((_) => _.id !== i)];
+    s(t), f == null || f({ deleteId: i, list: t });
   };
-  return a.length ? /* @__PURE__ */ t(
+  return o.length ? /* @__PURE__ */ r(
     "ul",
     {
-      className: d(
+      className: p(
         e["file-upload-container"],
-        f,
-        e[c]
+        l,
+        e[m]
       ),
-      children: a.map((i, n) => /* @__PURE__ */ r("li", { className: e["file-upload-container-item"], children: [
-        /* @__PURE__ */ r("div", { className: e["file-info"], children: [
-          (i == null ? void 0 : i.size) && /* @__PURE__ */ r("span", { className: e["file-info-size"], children: [
+      children: o.map((i, t) => /* @__PURE__ */ a("li", { className: e["file-upload-container-item"], children: [
+        /* @__PURE__ */ a("div", { className: e["file-info"], children: [
+          (i == null ? void 0 : i.size) && /* @__PURE__ */ a("span", { className: e["file-info-size"], children: [
             " ",
-            N.Size(i == null ? void 0 : i.size)
+            z.Size(i == null ? void 0 : i.size)
           ] }),
-          /* @__PURE__ */ t("div", { className: e["file-info-name-wrapper"], children: /* @__PURE__ */ t("div", { className: e["file-info-name"], children: i.name }) })
+          /* @__PURE__ */ r("div", { className: e["file-info-name-wrapper"], children: /* @__PURE__ */ r("div", { className: e["file-info-name"], children: i.name }) })
         ] }),
-        !m && /* @__PURE__ */ t(
-          h,
+        !c && /* @__PURE__ */ r(
+          N,
           {
-            isIconButton: !0,
-            iconName: "Close12px",
             size: "m-s",
-            variant: "secondary-gray",
-            className: e["delete-button"],
-            onClick: () => p(i.id)
+            variant: "gray",
+            onClick: () => d(i.id)
           }
         )
-      ] }, n))
+      ] }, t))
     }
   ) : null;
 }
 export {
-  B as ListFiles
+  F as ListFiles
 };

package/dist/components/index.d.ts

@@ -72,3 +72,4 @@ export { Table } from './Table';
 export { ESortDirection, ETableVariant, ETableDisplayMode, ETableScrollButtonVariant, ETableScrollIconName } from './Table';
 export { PromoSlider } from './PromoSlider';
 export { CardTrail } from './CardTrail';
+export { ClearButton } from './InputClearButton';

package/dist/components/index.js

@@ -5,12 +5,12 @@ import { EInputSize as S, EInputStatus as s, EInputVariant as u } from "./Input/
 import { TextArea as c } from "./TextArea/TextArea.js";
 import { ETextAreaInputSize as I } from "./TextArea/constants.js";
 import { InputPassword as g } from "./InputPassword/InputPassword.js";
-import { InputPhoneNumber as h } from "./InputPhoneNumber/InputPhoneNumber.js";
+import { InputPhoneNumber as B } from "./InputPhoneNumber/InputPhoneNumber.js";
 import { getMaskedInputPhoneValue as k, getUnmaskedInputValue as P } from "./InputPhoneNumber/utils.js";
 import { OtpInput as L } from "./OtpInput/OtpInput.js";
 import { RadioGroup as A } from "./RadioGroup/RadioGroup.js";
-import { DatePicker as U } from "./DatePicker/DatePicker.js";
-import { MergedButton as y } from "./MergedButton/MergedButton.js";
+import { DatePicker as R } from "./DatePicker/DatePicker.js";
+import { MergedButton as w } from "./MergedButton/MergedButton.js";
 import { EMergedButtonVariantRound as D } from "./MergedButton/constants.js";
 import { AppImage as v } from "./Image/Image.js";
 import { Loader as N } from "./Loader/Loader.js";
@@ -30,13 +30,13 @@ import { Tag as So } from "./Tag/Tag.js";
 import { ETagSize as uo, ETagType as co } from "./Tag/constants.js";
 import { Timer as Io } from "./Timer/Timer.js";
 import { Accordion as go } from "./Accordion/Accordion.js";
-import { EAccordionSize as ho } from "./Accordion/constants.js";
+import { EAccordionSize as Bo } from "./Accordion/constants.js";
 import { AccordionItem as ko } from "./Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail as bo } from "./TabTrail/TabTrail.js";
 import { ETabTrailSize as Mo } from "./TabTrail/constants.js";
-import { Pagination as Ro } from "./Pagination/Pagination.js";
-import { ToastProvider as wo } from "./Toasts/ToastsProvider.js";
-import { useToast as Co } from "./Toasts/hooks.js";
+import { Pagination as Co } from "./Pagination/Pagination.js";
+import { ToastProvider as Uo } from "./Toasts/ToastsProvider.js";
+import { useToast as yo } from "./Toasts/hooks.js";
 import { EToastPosition as Fo, EToastVariant as vo } from "./Toasts/constants.js";
 import { UploaderPhotos as No } from "./UploaderPhotos/UploaderPhotos.js";
 import { UploaderFiles as Oo } from "./UploaderFiles/UploaderFiles.js";
@@ -55,12 +55,12 @@ import { EInputRangeSliderBorderState as sr, EInputRangeSliderPositions as ur }
 import { GosZnak as cr } from "./GosZnak/GosZnak.js";
 import { EGosZnakSize as Ir, EGosZnakType as Vr } from "./GosZnak/constants.js";
 import { Switcher as zr } from "./Switcher/Switcher.js";
-import { ELabelPositions as Br } from "./Switcher/constants.js";
+import { ELabelPositions as hr } from "./Switcher/constants.js";
 import { TwinSwitcher as Pr } from "./TwinSwitcher/TwinSwitcher.js";
 import { SkeletonBrick as Lr } from "./Skeleton/SkeletonBrick/SkeletonBrick.js";
 import { SkeletonText as Ar } from "./Skeleton/SkeletonText/SkeletonText.js";
-import { SkeletonCircle as Ur } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
-import { ESkeletonVariant as yr } from "./Skeleton/constants.js";
+import { SkeletonCircle as Rr } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
+import { ESkeletonVariant as wr } from "./Skeleton/constants.js";
 import { Avatar as Dr } from "./Avatar/Avatar.js";
 import { EAvatarSize as vr } from "./Avatar/constants.js";
 import { MultiSelectSearch as Nr } from "./MultiSelectSearch/MultiSelectSearch.js";
@@ -74,8 +74,9 @@ import { Table as oe } from "./Table/Table.js";
 import { ESortDirection as ee, ETableDisplayMode as te, ETableScrollButtonVariant as pe, ETableScrollIconName as ae, ETableVariant as ie } from "./Table/constants.js";
 import { PromoSlider as fe } from "./PromoSlider/PromoSlider.js";
 import { CardTrail as ne } from "./CardTrail/CardTrail.js";
-import { default as Ee } from "./Slider/Slider.js";
-import { EProgressBarPosition as se } from "./Slider/constants.js";
+import { ClearButton as Ee } from "./InputClearButton/ClearButton.js";
+import { default as se } from "./Slider/Slider.js";
+import { EProgressBarPosition as de } from "./Slider/constants.js";
 export {
   go as Accordion,
   ko as AccordionItem,
@@ -84,10 +85,11 @@ export {
   ne as CardTrail,
   lo as CheckboxMimir,
   tr as Chip,
-  U as DatePicker,
+  Ee as ClearButton,
+  R as DatePicker,
   J as Drawer,
   X as Dropdown,
-  ho as EAccordionSize,
+  Bo as EAccordionSize,
   vr as EAvatarSize,
   p as EButtonForm,
   a as EButtonSize,
@@ -106,7 +108,7 @@ export {
   S as EInputSize,
   s as EInputStatus,
   u as EInputVariant,
-  Br as ELabelPositions,
+  hr as ELabelPositions,
   Xo as ELinkSize,
   Yo as ELinkVariant,
   O as ELoaderSize,
@@ -114,9 +116,9 @@ export {
   _r as EMessageShortReplyVariant,
   Or as EMultiSelectSearchSize,
   rr as ENotificationBadgeSize,
-  se as EProgressBarPosition,
+  de as EProgressBarPosition,
   xo as ESelectSearchSize,
-  yr as ESkeletonVariant,
+  wr as ESkeletonVariant,
   ee as ESortDirection,
   oo as EStepColor,
   ro as EStepsSize,
@@ -137,25 +139,25 @@ export {
   v as Image,
   l as Input,
   g as InputPassword,
-  h as InputPhoneNumber,
+  B as InputPhoneNumber,
   Er as InputRangeSlider,
   Qo as Link,
   qr as ListFiles,
   Qr as ListPhotos,
   N as Loader,
-  y as MergedButton,
+  w as MergedButton,
   Xr as MessageShortReply,
   Nr as MultiSelectSearch,
   $o as NotificationBadge,
   L as OtpInput,
-  Ro as Pagination,
+  Co as Pagination,
   fe as PromoSlider,
   A as RadioGroup,
   mo as SelectSearch,
   Lr as SkeletonBrick,
-  Ur as SkeletonCircle,
+  Rr as SkeletonCircle,
   Ar as SkeletonText,
-  Ee as Slider,
+  se as Slider,
   q as SliderLazy,
   _ as Steps,
   zr as Switcher,
@@ -164,7 +166,7 @@ export {
   So as Tag,
   c as TextArea,
   Io as Timer,
-  wo as ToastProvider,
+  Uo as ToastProvider,
   Pr as TwinSwitcher,
   fr as UniversalUploader,
   Jo as Uploader,
@@ -173,5 +175,5 @@ export {
   to as Vote,
   k as getMaskedInputPhoneValue,
   P as getUnmaskedInputValue,
-  Co as useToast
+  yo as useToast
 };

package/dist/icons/components/12px/Close12px.js

@@ -1,16 +1,23 @@
-import { jsx as t } from "react/jsx-runtime";
-const r = (e) => /* @__PURE__ */ t(
+import { jsx as l } from "react/jsx-runtime";
+const o = (e) => /* @__PURE__ */ l(
   "svg",
   {
     width: "12",
     height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
+    viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ...e,
-    children: /* @__PURE__ */ t("path", { d: "M3 9L8.99991 3M9 9L3 3", stroke: "#333333", strokeWidth: "1.5" })
+    children: /* @__PURE__ */ l(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9.06 8l3.47 3.47-1.06 1.06L8 9.06l-3.47 3.47-1.06-1.06L6.94 8 3.47 4.53l1.06-1.06L8 6.94l3.47-3.47 1.06 1.06L9.06 8z",
+        fill: "#000"
+      }
+    )
   }
 );
 export {
-  r as default
+  o as default
 };

package/dist/index.js

@@ -1,12 +1,12 @@
 import { Button as e } from "./components/Button/Button.js";
-import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as m, EButtonVariantDefault as i, EButtonVariantOutline as f, EButtonVariantRound as x } from "./components/Button/constants.js";
+import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as m, EButtonVariantDefault as f, EButtonVariantOutline as i, EButtonVariantRound as x } from "./components/Button/constants.js";
 import { I as l } from "./Input-BU_6U1CW.js";
 import { EInputSize as u, EInputStatus as E, EInputVariant as S } from "./components/Input/constants.js";
 import { TextArea as c } from "./components/TextArea/TextArea.js";
 import { ETextAreaInputSize as I } from "./components/TextArea/constants.js";
 import { InputPassword as V } from "./components/InputPassword/InputPassword.js";
 import { InputPhoneNumber as z } from "./components/InputPhoneNumber/InputPhoneNumber.js";
-import { getMaskedInputPhoneValue as B, getUnmaskedInputValue as P } from "./components/InputPhoneNumber/utils.js";
+import { getMaskedInputPhoneValue as h, getUnmaskedInputValue as P } from "./components/InputPhoneNumber/utils.js";
 import { OtpInput as M } from "./components/OtpInput/OtpInput.js";
 import { RadioGroup as C } from "./components/RadioGroup/RadioGroup.js";
 import { DatePicker as L } from "./components/DatePicker/DatePicker.js";
@@ -23,7 +23,7 @@ import { Steps as _ } from "./components/Steps/Steps.js";
 import { EStepColor as rr, EStepsSize as or } from "./components/Steps/constants.js";
 import { Vote as tr } from "./components/Vote/Vote.js";
 import { EVoteSize as ar } from "./components/Vote/constants.js";
-import { SelectSearch as ir } from "./components/SelectSearch/SelectSearch.js";
+import { SelectSearch as fr } from "./components/SelectSearch/SelectSearch.js";
 import { ESelectSearchSize as xr } from "./components/SelectSearch/constants.js";
 import { CheckboxMimir as lr } from "./components/CheckboxMimir/CheckboxMimir.js";
 import { Tag as ur } from "./components/Tag/Tag.js";
@@ -31,7 +31,7 @@ import { ETagSize as Sr, ETagType as dr } from "./components/Tag/constants.js";
 import { Timer as Tr } from "./components/Timer/Timer.js";
 import { Accordion as gr } from "./components/Accordion/Accordion.js";
 import { EAccordionSize as kr } from "./components/Accordion/constants.js";
-import { AccordionItem as hr } from "./components/Accordion/AccordionItem/AccordionItem.js";
+import { AccordionItem as Br } from "./components/Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail as Pr } from "./components/TabTrail/TabTrail.js";
 import { ETabTrailSize as Mr } from "./components/TabTrail/constants.js";
 import { Pagination as Cr } from "./components/Pagination/Pagination.js";
@@ -48,14 +48,14 @@ import { NotificationBadge as _r } from "./components/NotificationBadge/Notifica
 import { ENotificationBadgeSize as ro } from "./components/NotificationBadge/constants.js";
 import { Chip as eo } from "./components/Chip/Chip.js";
 import { EChipSize as po, EChipVariant as ao } from "./components/Chip/constants.js";
-import { UniversalUploader as io } from "./components/UniversalUploader/UniversalUploader.js";
+import { UniversalUploader as fo } from "./components/UniversalUploader/UniversalUploader.js";
 import { EUploaderType as xo } from "./components/UniversalUploader/constants.js";
 import { InputRangeSlider as lo } from "./components/InputRangeSlider/InputRangeSlider.js";
 import { EInputRangeSliderBorderState as uo, EInputRangeSliderPositions as Eo } from "./components/InputRangeSlider/constants.js";
 import { GosZnak as co } from "./components/GosZnak/GosZnak.js";
 import { EGosZnakSize as Io, EGosZnakType as go } from "./components/GosZnak/constants.js";
 import { Switcher as ko } from "./components/Switcher/Switcher.js";
-import { ELabelPositions as ho } from "./components/Switcher/constants.js";
+import { ELabelPositions as Bo } from "./components/Switcher/constants.js";
 import { TwinSwitcher as Po } from "./components/TwinSwitcher/TwinSwitcher.js";
 import { SkeletonBrick as Mo } from "./components/Skeleton/SkeletonBrick/SkeletonBrick.js";
 import { SkeletonText as Co } from "./components/Skeleton/SkeletonText/SkeletonText.js";
@@ -72,31 +72,33 @@ import { MessageShortReply as Xo } from "./components/MessageShortReply/MessageS
 import { EMessageShortReplyVariant as _o } from "./components/MessageShortReply/constants.js";
 import { Table as re } from "./components/Table/Table.js";
 import { ESortDirection as ee, ETableDisplayMode as te, ETableScrollButtonVariant as pe, ETableScrollIconName as ae, ETableVariant as me } from "./components/Table/constants.js";
-import { PromoSlider as fe } from "./components/PromoSlider/PromoSlider.js";
+import { PromoSlider as ie } from "./components/PromoSlider/PromoSlider.js";
 import { CardTrail as ne } from "./components/CardTrail/CardTrail.js";
-import { useMediaQuery as se } from "./hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as Ee, EMinMediaQuery as Se } from "./hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as ce } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useInterval as Ie } from "./hooks/useInterval/useInterval.js";
-import { useTimer as Ve } from "./hooks/useTimer/index.js";
-import { useCopyToClipboard as ze } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
-import { useMergeRefs as Be } from "./hooks/useMergeRefs/useMergeRefs.js";
-import { useResizeObserver as be } from "./hooks/useResizeObserver/useResizeObserver.js";
-import { useCallbackRef as ye } from "./hooks/useCallbackRef/index.js";
-import { useThrottledCallback as Re } from "./hooks/useThrottledCallback/index.js";
-import { Icon as Ae } from "./icons/Icon.js";
-import { formating as Ue } from "./utils/index.js";
-import { default as ve } from "./components/Slider/Slider.js";
-import { EProgressBarPosition as Ge } from "./components/Slider/constants.js";
-import { parseDate as Oe } from "./utils/formating/Date.js";
+import { ClearButton as se } from "./components/InputClearButton/ClearButton.js";
+import { useMediaQuery as Ee } from "./hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery as de, EMinMediaQuery as ce } from "./hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll as Ie } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useInterval as Ve } from "./hooks/useInterval/useInterval.js";
+import { useTimer as ze } from "./hooks/useTimer/index.js";
+import { useCopyToClipboard as he } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
+import { useMergeRefs as be } from "./hooks/useMergeRefs/useMergeRefs.js";
+import { useResizeObserver as ye } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useCallbackRef as Re } from "./hooks/useCallbackRef/index.js";
+import { useThrottledCallback as Ae } from "./hooks/useThrottledCallback/index.js";
+import { Icon as Ue } from "./icons/Icon.js";
+import { formating as ve } from "./utils/index.js";
+import { default as Ge } from "./components/Slider/Slider.js";
+import { EProgressBarPosition as Oe } from "./components/Slider/constants.js";
+import { parseDate as Ze } from "./utils/formating/Date.js";
 import './assets/index.css';export {
   gr as Accordion,
-  hr as AccordionItem,
+  Br as AccordionItem,
   wo as Avatar,
   e as Button,
   ne as CardTrail,
   lr as CheckboxMimir,
   eo as Chip,
+  se as ClearButton,
   L as DatePicker,
   H as Drawer,
   X as Dropdown,
@@ -105,8 +107,8 @@ import './assets/index.css';export {
   p as EButtonForm,
   a as EButtonSize,
   m as EButtonVariantBorderless,
-  i as EButtonVariantDefault,
-  f as EButtonVariantOutline,
+  f as EButtonVariantDefault,
+  i as EButtonVariantOutline,
   x as EButtonVariantRound,
   po as EChipSize,
   ao as EChipVariant,
@@ -119,17 +121,17 @@ import './assets/index.css';export {
   u as EInputSize,
   E as EInputStatus,
   S as EInputVariant,
-  ho as ELabelPositions,
+  Bo as ELabelPositions,
   Wr as ELinkSize,
   Xr as ELinkVariant,
   Q as ELoaderSize,
-  Ee as EMediaQuery,
+  de as EMediaQuery,
   w as EMergedButtonVariantRound,
   _o as EMessageShortReplyVariant,
-  Se as EMinMediaQuery,
+  ce as EMinMediaQuery,
   Qo as EMultiSelectSearchSize,
   ro as ENotificationBadgeSize,
-  Ge as EProgressBarPosition,
+  Oe as EProgressBarPosition,
   xr as ESelectSearchSize,
   Do as ESkeletonVariant,
   ee as ESortDirection,
@@ -149,7 +151,7 @@ import './assets/index.css';export {
   xo as EUploaderType,
   ar as EVoteSize,
   co as GosZnak,
-  Ae as Icon,
+  Ue as Icon,
   F as Image,
   l as Input,
   V as InputPassword,
@@ -165,13 +167,13 @@ import './assets/index.css';export {
   _r as NotificationBadge,
   M as OtpInput,
   Cr as Pagination,
-  fe as PromoSlider,
+  ie as PromoSlider,
   C as RadioGroup,
-  ir as SelectSearch,
+  fr as SelectSearch,
   Mo as SkeletonBrick,
   Lo as SkeletonCircle,
   Co as SkeletonText,
-  ve as Slider,
+  Ge as Slider,
   j as SliderLazy,
   _ as Steps,
   ko as Switcher,
@@ -182,23 +184,23 @@ import './assets/index.css';export {
   Tr as Timer,
   Lr as ToastProvider,
   Po as TwinSwitcher,
-  io as UniversalUploader,
+  fo as UniversalUploader,
   qr as Uploader,
   Or as UploaderFiles,
   Gr as UploaderPhotos,
   tr as Vote,
-  Ue as formating,
-  B as getMaskedInputPhoneValue,
+  ve as formating,
+  h as getMaskedInputPhoneValue,
   P as getUnmaskedInputValue,
-  Oe as parseDate,
-  ye as useCallbackRef,
-  ze as useCopyToClipboard,
-  Ie as useInterval,
-  ce as useLockBodyScroll,
-  se as useMediaQuery,
-  Be as useMergeRefs,
-  be as useResizeObserver,
-  Re as useThrottledCallback,
-  Ve as useTimer,
+  Ze as parseDate,
+  Re as useCallbackRef,
+  he as useCopyToClipboard,
+  Ve as useInterval,
+  Ie as useLockBodyScroll,
+  Ee as useMediaQuery,
+  be as useMergeRefs,
+  ye as useResizeObserver,
+  Ae as useThrottledCallback,
+  ze as useTimer,
   Dr as useToast
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.41.5",
+  "version": "1.42.0",
   "type": "module",
   "exports": {
     ".": {

package/src/assets/styles/mixins/media.scss

@@ -13,7 +13,9 @@ $xxs: 375px;
     @media (min-width: $breakpoint) {
       @content;
     }
-  } @else if $type == max {
+  }
+
+ @else if $type == max {
     @media (max-width: $breakpoint) {
       @content;
     }