mimir-ui-kit 1.21.3 → 1.22.0

package/dist/assets/ListFiles.css

@@ -0,0 +1 @@
+._file-info_d2me4_2{display:flex;flex-direction:column;gap:8px;overflow:hidden}._file-info_d2me4_2 span{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:18px;text-align:left;color:#b2b2b2}._file-info_d2me4_2 ._file-info__name-wrapper_d2me4_16{display:table;table-layout:fixed;width:100%}._file-info_d2me4_2 ._file-info__name-wrapper_d2me4_16 div{font-family:Inter,sans-serif;font-size:18px;font-weight:400;line-height:24px;text-align:left;color:#000;display:table-cell;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._file-upload-container_d2me4_34{display:flex;flex-direction:column;width:100%;padding-left:0;margin-bottom:0;gap:8px}._file-upload-container_d2me4_34 li{display:flex;justify-content:space-between;align-items:center;background:#fff;position:relative;padding:8px 16px;border-radius:6px}._file-upload-container_d2me4_34 li button{background:#f2f2f2;position:absolute;right:4px;top:4px}._file-upload-container_d2me4_34 li span{display:flex}

package/dist/assets/styles.css

@@ -0,0 +1 @@
+._input_3fxwe_2{padding-right:var(--space-3xl)}._input-wrapper_3fxwe_6{flex:1}._date-wrapper_3fxwe_10{position:relative;width:100%}._date-wrapper_3fxwe_10:hover ._input-wrapper_3fxwe_6{background-color:var(--input-bg-color-hover)}._date-wrapper_3fxwe_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_3fxwe_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 label,[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_3fxwe_35 svg{color:var(--white);fill:var(--white);cursor:default}._wrapper_3fxwe_41{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_3fxwe_41._active_3fxwe_47{border-bottom:1px solid var(--citrine-100)}._button-wrapper_3fxwe_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_3fxwe_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_3fxwe_68{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_3fxwe_74{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_3fxwe_74 ._h_3fxwe_97{display:flex;width:100%;color:var(--black-100)}._calendar-block_3fxwe_74 ._b_3fxwe_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_3fxwe_74 ._d_3fxwe_10{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer;gap:4px}._calendar-block_3fxwe_74 ._m_3fxwe_118,._calendar-block_3fxwe_74 ._a_3fxwe_47,._calendar-block_3fxwe_74 ._prev_3fxwe_120{width:auto;height:48px;overflow:hidden}._calendar-block_3fxwe_74 ._m_3fxwe_118{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_3fxwe_74 ._m_3fxwe_118 b{font-weight:var(--font-weight-text-regular)}._calendar-block_3fxwe_74 ._orange_3fxwe_136{color:var(--citrine-100)}._calendar-block_3fxwe_74 ._a_3fxwe_47{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:hover{background:var(--black-10)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_3fxwe_74 ._current_3fxwe_161{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._monthGrid_3fxwe_166{display:grid;grid-template-columns:repeat(3,1fr)}

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

@@ -14,6 +14,12 @@ export type DatePicker = {
      * значение из стейта (data)
      */
     value?: string;
+    /**
+     * значение типа модально окна календаря
+     */
+    type?: 'days' | 'months' | 'years';
+    disabled?: boolean;
+    error?: boolean;
 } & TInputProps;
 export type TDatePickerValue = {
     value?: Date;
@@ -33,4 +39,10 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
      * значение из стейта (data)
      */
     value?: string;
+    /**
+     * значение типа модально окна календаря
+     */
+    type?: "days" | "months" | "years";
+    disabled?: boolean;
+    error?: boolean;
 } & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/DatePicker/DatePicker.js

@@ -1,44 +1,92 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { memo, forwardRef, useState } from "react";
-import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.js";
+import { memo, forwardRef, useState, useEffect } from "react";
+import { DatePickerModal } from "./DatePickerModal.js";
+import { MonthPickerModal } from "./MonthPickerModal.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { YearPickerModal } from "./YearPickerModal.js";
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
 import { I as Input } from "../../Input-6mudFqTb.js";
+import { EInputVariant } from "../Input/constants.js";
 const DatePicker = memo(
   forwardRef(
-    ({ size, value, onChangeValue, name, before, ...props }, ref) => {
+    ({
+      size,
+      value,
+      onChangeValue,
+      name,
+      before,
+      type = "days",
+      error,
+      variant,
+      disabled = false,
+      ...props
+    }, ref) => {
       const [isActive, setActive] = useState(false);
+      const [pickerType, setType] = useState(type);
       const [date, setDate] = useState(
         value ? new Date(value) : /* @__PURE__ */ new Date()
       );
+      const [isError, setError] = useState(error);
+      useEffect(() => {
+        setError(error);
+      }, [error]);
       useClickOutside({
         isActive,
-        setActive,
+        setActive: (e) => {
+          setActive(e);
+          setType(type);
+        },
         className: cls["calendar-block"]
       });
       const onOpen = () => {
-        setActive(true);
+        if (!disabled) setActive(true);
       };
       const onDate = (d) => {
+        if (pickerType === "years") {
+          if (type === "years") {
+            setActive(false);
+            setType(type);
+          } else {
+            setType("months");
+          }
+        }
+        if (pickerType === "months") {
+          if (type === "months") {
+            setActive(false);
+            setType(type);
+          } else {
+            setType("days");
+          }
+        }
         setDate(d);
         onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
       };
       const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
-      return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
-        /* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
-          Input,
+      return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            ref,
-            className: cls.input,
-            wrapperClassName: cls["input-wrapper"],
-            size,
-            type: "text",
-            value: formating.Date(date, "dd.mm.yy"),
-            ...props
+            "data-error": isError,
+            className: cls["date-wrapper"],
+            onClick: onOpen,
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref,
+                className: cls.input,
+                wrapperClassName: cls["input-wrapper"],
+                size,
+                type: "text",
+                variant: isError ? EInputVariant.Error : variant,
+                value: formating.Date(date, "dd.mm.yy"),
+                ...props
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
           Button,
           {
@@ -50,13 +98,34 @@ const DatePicker = memo(
             iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
           }
         ) }),
-        isActive && /* @__PURE__ */ jsx(
+        pickerType === "days" && isActive && /* @__PURE__ */ jsx(
           DatePickerModal,
           {
             onChangeValue: onDate,
             date,
             setActive,
-            before: typeof before === "string" ? new Date(before) : before
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
+          }
+        ),
+        pickerType === "months" && isActive && /* @__PURE__ */ jsx(
+          MonthPickerModal,
+          {
+            onChangeValue: onDate,
+            date,
+            setActive,
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
+          }
+        ),
+        pickerType === "years" && isActive && /* @__PURE__ */ jsx(
+          YearPickerModal,
+          {
+            onChangeValue: onDate,
+            date,
+            setActive,
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
           }
         )
       ] });

package/dist/components/DatePicker/DatePickerModal.d.ts

@@ -3,6 +3,7 @@ type DatePickerModal = {
     onChangeValue: (d: Date) => void;
     setActive: (s: boolean) => void;
     before?: Date;
+    onType?: (s: 'days' | 'months' | 'years') => void;
 };
-export declare function DatePickerModal({ date, onChangeValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerModal({ date, onChangeValue, setActive, before, onType }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DatePicker/DatePickerModal.js

@@ -1,9 +1,184 @@
-import "react/jsx-runtime";
-import "react";
-import "./constants.js";
-import { D } from "../../DatePickerModal-BM0BgzTb.js";
-import "../../utils/index.js";
-import "../Button/Button.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { week } from "./constants.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function DatePickerModal({
+  date,
+  onChangeValue,
+  setActive,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const countWorkDays = 4;
+  const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, [month]);
+  const countPrevDays = (e) => {
+    let dayOfWeek = e.getDay();
+    if (dayOfWeek === 0) dayOfWeek = 7;
+    return dayOfWeek - 1;
+  };
+  const currentMonthIndex = month.m - 1;
+  const currentMonthFull = new Date(month.y, currentMonthIndex);
+  const days = [];
+  const prevDays = () => {
+    const prevMonth = new Date(currentMonthFull);
+    prevMonth.setDate(prevMonth.getDate() - 1);
+    const lastDayPrevMohth = prevMonth.getDate();
+    const prevList = [];
+    for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
+      prevList.push(lastDayPrevMohth - i);
+    }
+    prevList.reverse();
+    return prevList;
+  };
+  const prevDaysArray = prevDays();
+  while (currentMonthFull.getMonth() === currentMonthIndex) {
+    days.push(currentMonthFull.getDate());
+    currentMonthFull.setDate(currentMonthFull.getDate() + 1);
+  }
+  const nextDays = () => {
+    const totalViewDays = 42;
+    const daysCount = totalViewDays - (prevDaysArray.length + days.length);
+    const nextList = [];
+    for (let i = 1; i <= daysCount; i++) {
+      nextList.push(i);
+    }
+    return nextList;
+  };
+  const nextDaysArray = nextDays();
+  const update = (m, y) => {
+    y = m > 12 ? y + 1 : m < 1 ? y - 1 : y;
+    m = m > 12 ? 1 : m < 1 ? 12 : m;
+    return { y, m };
+  };
+  const onExit = () => {
+    setActive(false);
+  };
+  const next = () => {
+    setMonth(update(month.m + 1, month.y));
+  };
+  const prev = () => {
+    setMonth(update(month.m - 1, month.y));
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
+      )
+    );
+    onExit();
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
+        formating.Month(month.m).name,
+        "’",
+        month.y.toString().slice(-2),
+        /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
+      week.map((i, s) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
+          children: i
+        },
+        `v${s}`
+      )),
+      prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
+      days.map((i, s) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: isBefore(
+            (/* @__PURE__ */ new Date(
+              `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
+            )).getTime()
+          ) ? cls["m"] : cls["a"],
+          children: i !== 0 ? /* @__PURE__ */ jsx(
+            "b",
+            {
+              className: current.y === month.y && current.m === month.m && current.d === i ? cls["current"] : "",
+              onClick: () => send(i),
+              children: i
+            }
+          ) : /* @__PURE__ */ jsx("p", {})
+        },
+        s
+      )),
+      nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
+    ] })
+  ] }) });
+}
 export {
-  D as DatePickerModal
+  DatePickerModal
 };

package/dist/components/DatePicker/MonthPickerModal.d.ts

@@ -0,0 +1,9 @@
+type MonthPickerModal = {
+    date: Date;
+    onChangeValue: (d: Date) => void;
+    setActive: (s: boolean) => void;
+    before?: Date;
+    onType?: (s: 'years') => void;
+};
+export declare function MonthPickerModal({ date, onChangeValue, before, onType }: MonthPickerModal): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/MonthPickerModal.js

@@ -0,0 +1,123 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { months } from "./constants.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function MonthPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, []);
+  const next = () => {
+    setYear(year + 1);
+  };
+  const prev = () => {
+    setYear(year - 1);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"], children: [
+        year.toString(),
+        /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: months.map((i, s) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${year}-${formating.Number(2, s + 1)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: current.y === year && current.m === s + 1 ? cls["current"] : "",
+            onClick: () => send(s + 1),
+            children: i
+          }
+        )
+      },
+      s
+    )) })
+  ] }) });
+}
+export {
+  MonthPickerModal
+};

package/dist/components/DatePicker/YearPickerModal.d.ts

@@ -0,0 +1,9 @@
+type YearPickerModal = {
+    date: Date;
+    onChangeValue: (d: Date) => void;
+    setActive: (s: boolean) => void;
+    before?: Date;
+    onType?: (s: 'years') => void;
+};
+export declare function YearPickerModal({ date, onChangeValue, before, onType }: YearPickerModal): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/YearPickerModal.js

@@ -0,0 +1,120 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function YearPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  const firstYears = year - 7;
+  const years = Array.from(Array(15).keys()).map((i) => i + firstYears);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, []);
+  const next = () => {
+    setYear(year + 15);
+  };
+  const prev = () => {
+    setYear(year - 15);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: years.map((i, s) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${i}-${formating.Number(2, current.m)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: current.y === i ? cls["current"] : "",
+            onClick: () => send(i),
+            children: i
+          }
+        )
+      },
+      s
+    )) })
+  ] }) });
+}
+export {
+  YearPickerModal
+};

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

@@ -4,3 +4,4 @@ export declare enum EDatePickerBeforeDate {
     CurrentDate3 = "2024-07-11"
 }
 export declare const week: string[];
+export declare const months: string[];

package/dist/components/DatePicker/constants.js

@@ -5,7 +5,22 @@ var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
   return EDatePickerBeforeDate2;
 })(EDatePickerBeforeDate || {});
 const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
+const months = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь"
+];
 export {
   EDatePickerBeforeDate,
+  months,
   week
 };

package/dist/components/ListFiles/ListFiles.d.ts

@@ -0,0 +1,26 @@
+export type TListFiles = {
+    /**
+     * Массив фото
+     */
+    value: TFilesDetail[];
+    /**
+     * функция -callback, которая вызывается при изменении списка и передает обновленный список и deleteId,
+     */
+    onChange?: (e: TFileValue) => void;
+};
+export type TFileItem = {
+    id: number;
+    url: string;
+};
+export type TFileValue = {
+    deleteId?: number;
+    list: TFilesDetail[];
+};
+export type TFilesDetail = {
+    id: number;
+    url: string;
+    name: string;
+    size?: number;
+    type?: string;
+};
+export declare function ListFiles({ value, onChange }: TListFiles): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListFiles/ListFiles.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+import '../../assets/ListFiles.css';const cls = {
+  "file-info": "_file-info_d2me4_2",
+  "file-info__name-wrapper": "_file-info__name-wrapper_d2me4_16",
+  "file-upload-container": "_file-upload-container_d2me4_34"
+};
+function ListFiles({ value, onChange }) {
+  const [list, setList] = useState(value);
+  useEffect(() => {
+    setList(value);
+  }, [value]);
+  const onDelete = async (id) => {
+    const newList = [...list.filter((el) => el.id !== id)];
+    setList(newList);
+    onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
+  };
+  return /* @__PURE__ */ jsx("ul", { className: cls["file-upload-container"], children: list.map((el, key) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["file-info"], children: [
+      (el == null ? void 0 : el.size) && /* @__PURE__ */ jsxs("span", { children: [
+        " ",
+        formating.Size(el == null ? void 0 : el.size)
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cls["file-info__name-wrapper"], children: /* @__PURE__ */ jsx("div", { children: el.name }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        isIconButton: true,
+        iconName: "Close12px",
+        size: "m-s",
+        variant: "secondary-gray",
+        onClick: () => onDelete(el.id)
+      }
+    )
+  ] }, key)) });
+}
+export {
+  ListFiles
+};

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

@@ -0,0 +1,3 @@
+import { TFilesDetail } from './ListFiles';
+
+export declare const photos: TFilesDetail[];

package/dist/components/ListFiles/constants.js

@@ -0,0 +1,33 @@
+const photos = [
+  {
+    id: 111,
+    name: "ООО “КИЗ-СТРОЙ” - Свидетельство о регистрации (06.12.2003).xls",
+    url: "https://i.pinimg.com/736x/5a/e6/12/5ae612a7ecf50870c8f41961fefc332f.jpg",
+    size: 1024,
+    type: "image/png"
+  },
+  {
+    id: 112,
+    name: "ООО “КИЗ-СТРОЙ” - Доверенность (20.10.2005).xls",
+    url: "https://i1.sndcdn.com/artworks-rQAPPfrs44UvRwIz-WJkvyQ-t500x500.jpg",
+    size: 1024,
+    type: "image/png"
+  },
+  {
+    id: 113,
+    name: "Скан паспорта.pdf",
+    url: "https://i1.sndcdn.com/avatars-000095020320-0pmjnu-t500x500.jpg",
+    size: 2064,
+    type: "image/png"
+  },
+  {
+    id: 114,
+    name: "Прочие документы.xls",
+    url: "https://i1.sndcdn.com/avatars-000151937348-27m28p-t500x500.jpg",
+    size: 1024,
+    type: "image/png"
+  }
+];
+export {
+  photos
+};

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

@@ -0,0 +1,2 @@
+export { ListFiles } from './ListFiles';
+export type { ListFiles as TListFiles } from './ListFiles';

package/dist/components/ListFiles/index.js

@@ -0,0 +1,4 @@
+import { ListFiles } from "./ListFiles.js";
+export {
+  ListFiles
+};

package/dist/components/Uploader/Uploader.js

@@ -23,7 +23,7 @@ const MIME = {
 };
 const filesTyps = ["jpeg", "jpg", "png", "tiff", "gif"];
 const generateId = (min, max) => {
-  return Math.random() * (max - min) + min;
+  return Math.round(Math.random() * (max - min) + min);
 };
 const Uploader = forwardRef(
   (props, ref) => {

package/dist/components/UploaderFiles/UploaderFiles.d.ts

@@ -0,0 +1,38 @@
+import { TFilesDetail } from '../ListFiles/ListFiles';
+import { imageTypesArr } from '../Uploader/constants';
+import { TFileItem } from '../Uploader/Uploader';
+
+export type TUploaderFiles = {
+    /**
+     * Массив разрешенных типов файлов для настройки валидации
+     * 'jpeg' | 'jpg' | 'png' | 'tiff' | 'gif' | 'doc' | 'xls' | 'pdf' |'docx' |  'txt'
+     */
+    filesType: imageTypesArr[];
+    /**
+     * Наименование передаваемого массива файлов
+     */
+    arrayName: string;
+    /**
+     * Максимальный размер файлов.
+     */
+    maxSize: number;
+    /**
+     * Функция обратного вызова, передает параметры type и data,
+     * type 'add' в data передает массив файлов,
+     * type:'delete' в data передает id удаленного файла
+     */
+    onChange: (j: TOnChangeFilesUpdate) => void;
+    /**
+     * Передаваемые файлы.
+     */
+    value?: TFilesDetail[];
+    /**
+     * Максимальное количество файлов.
+     */
+    maxFiles: number;
+};
+export type TOnChangeFilesUpdate = {
+    type: string;
+    data: TFileItem[] | number;
+};
+export declare const UploaderFiles: import('react').ForwardRefExoticComponent<TUploaderFiles & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/UploaderFiles/UploaderFiles.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect } from "react";
+import { ListFiles } from "../ListFiles/ListFiles.js";
+import { Uploader } from "../Uploader/Uploader.js";
+import '../../assets/UploaderPhotos.css';const cls = {
+  "upload-file__wrapper": "_upload-file__wrapper_17bcu_2"
+};
+const UploaderFiles = forwardRef(
+  (props, ref) => {
+    const { filesType, arrayName, maxSize, onChange, value, maxFiles } = props;
+    const [files, setFiles] = useState(value || []);
+    const isMaxFilesReached = files.length >= maxFiles;
+    useEffect(() => {
+      if (value) {
+        setFiles(value);
+      }
+    }, [value]);
+    const onChangeValue = (e) => {
+      const newFiles = [
+        ...files,
+        ...e.value.map((el) => {
+          var _a, _b, _c;
+          return {
+            id: el.id,
+            url: "",
+            size: (_a = el == null ? void 0 : el.file) == null ? void 0 : _a.size,
+            name: (_b = el == null ? void 0 : el.file) == null ? void 0 : _b.name,
+            type: (_c = el == null ? void 0 : el.file) == null ? void 0 : _c.type
+          };
+        })
+      ];
+      setFiles(newFiles);
+      onChange == null ? void 0 : onChange({ type: "add", data: e.value });
+    };
+    const onDelete = (j) => {
+      setFiles(j.list);
+      if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          cls["upload-file__wrapper"],
+          isMaxFilesReached && cls.disabled
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Uploader,
+            {
+              filesType,
+              arrayName,
+              maxSize,
+              onChangeValue,
+              ref,
+              maxFiles,
+              isDisabled: isMaxFilesReached
+            }
+          ),
+          /* @__PURE__ */ jsx(ListFiles, { value: files, onChange: onDelete })
+        ]
+      }
+    );
+  }
+);
+export {
+  UploaderFiles
+};

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

@@ -0,0 +1,2 @@
+export { UploaderFiles } from './UploaderFiles';
+export type { TUploaderFiles, TOnChangeFilesUpdate } from './UploaderFiles';

package/dist/components/UploaderFiles/index.js

@@ -0,0 +1,4 @@
+import { UploaderFiles } from "./UploaderFiles.js";
+export {
+  UploaderFiles
+};

package/dist/components/UploaderPhotos/UploaderPhotos.js

@@ -31,6 +31,7 @@ const UploaderPhotos = forwardRef(
       setPhotos(j.list);
       if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
     };
+    console.log(photos);
     return /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/styles.module-BZXDqssF.js

@@ -0,0 +1,36 @@
+import './assets/styles.css';const input = "_input_3fxwe_2";
+const wrapper = "_wrapper_3fxwe_41";
+const active = "_active_3fxwe_47";
+const button = "_button_3fxwe_35";
+const h = "_h_3fxwe_97";
+const b = "_b_3fxwe_35";
+const d = "_d_3fxwe_10";
+const m = "_m_3fxwe_118";
+const a = "_a_3fxwe_47";
+const prev = "_prev_3fxwe_120";
+const orange = "_orange_3fxwe_136";
+const current = "_current_3fxwe_161";
+const monthGrid = "_monthGrid_3fxwe_166";
+const cls = {
+  input,
+  "input-wrapper": "_input-wrapper_3fxwe_6",
+  "date-wrapper": "_date-wrapper_3fxwe_10",
+  "button-wrapper": "_button-wrapper_3fxwe_35",
+  wrapper,
+  active,
+  button,
+  "field-overlow": "_field-overlow_3fxwe_68",
+  "calendar-block": "_calendar-block_3fxwe_74",
+  h,
+  b,
+  d,
+  m,
+  a,
+  prev,
+  orange,
+  current,
+  monthGrid
+};
+export {
+  cls as c
+};

package/dist/utils/formating/FileSize.d.ts

@@ -0,0 +1 @@
+export default function Size(size: number): string;

package/dist/utils/formating/FileSize.js

@@ -0,0 +1,13 @@
+function Size(size) {
+  if (!size) return "";
+  let i = -1;
+  const b = [" Kb", " Mb", " Gb", " Tb", "Pb", "Eb", "Zb", "Yb"];
+  do {
+    size /= 1024;
+    i += 1;
+  } while (size > 1024);
+  return Math.max(size, 0.1).toFixed(1) + b[i];
+}
+export {
+  Size as default
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 import { default as Date } from './formating/Date';
+import { default as Size } from './formating/FileSize';
 import { default as Month } from './formating/Month';
 import { default as Number } from './formating/Numbers';
 import { default as UUIDv4 } from './UUID4';
@@ -8,4 +9,5 @@ export declare const formating: {
     Month: typeof Month;
     Date: typeof Date;
     UUIDv4: typeof UUIDv4;
+    Size: typeof Size;
 };

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import _Date from "./formating/Date.js";
+import Size from "./formating/FileSize.js";
 import Month from "./formating/Month.js";
 import Numbers from "./formating/Numbers.js";
 import UUIDv4 from "./UUID4.js";
@@ -6,7 +7,8 @@ const formating = {
   Number: Numbers,
   Month,
   Date: _Date,
-  UUIDv4
+  UUIDv4,
+  Size
 };
 export {
   formating

package/package.json

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

package/dist/DatePickerModal-BM0BgzTb.js

@@ -1,204 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { week } from "./components/DatePicker/constants.js";
-import { formating } from "./utils/index.js";
-import { Button } from "./components/Button/Button.js";
-import './assets/DatePickerModal.css';const input = "_input_1ndkx_2";
-const wrapper = "_wrapper_1ndkx_21";
-const active = "_active_1ndkx_27";
-const button = "_button_1ndkx_35";
-const h = "_h_1ndkx_81";
-const b = "_b_1ndkx_35";
-const d = "_d_1ndkx_6";
-const m = "_m_1ndkx_100";
-const a = "_a_1ndkx_27";
-const prev = "_prev_1ndkx_102";
-const orange = "_orange_1ndkx_118";
-const current = "_current_1ndkx_143";
-const cls = {
-  input,
-  "date-wrapper": "_date-wrapper_1ndkx_6",
-  wrapper,
-  active,
-  "input-wrapper": "_input-wrapper_1ndkx_31",
-  "button-wrapper": "_button-wrapper_1ndkx_35",
-  button,
-  "field-overlow": "_field-overlow_1ndkx_52",
-  "calendar-block": "_calendar-block_1ndkx_58",
-  h,
-  b,
-  d,
-  m,
-  a,
-  prev,
-  orange,
-  current
-};
-function DatePickerModal({
-  date,
-  onChangeValue,
-  setActive,
-  before
-}) {
-  const field = useRef(null);
-  const _current = new Date(date);
-  const _selecte = new Date(date);
-  const current2 = {
-    y: _current.getFullYear(),
-    d: _current.getDate(),
-    m: _current.getMonth() + 1
-  };
-  const selecte = {
-    y: _selecte.getFullYear(),
-    d: _selecte.getDate(),
-    m: _selecte.getMonth() + 1
-  };
-  const countWorkDays = 4;
-  const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
-  useEffect(() => {
-    const windowHeight = window.innerHeight;
-    if (field.current !== null) {
-      const inputPosition = field.current.getBoundingClientRect();
-      const calendarSize = field.current.offsetHeight;
-      if (windowHeight < inputPosition.y + calendarSize) {
-        field.current.style.top = -calendarSize + "px";
-      } else {
-        field.current.style.top = "65px";
-      }
-      field.current.style.opacity = "1";
-    }
-  }, [month]);
-  const countPrevDays = (e) => {
-    let dayOfWeek = e.getDay();
-    if (dayOfWeek === 0) dayOfWeek = 7;
-    return dayOfWeek - 1;
-  };
-  const currentMonthIndex = month.m - 1;
-  const currentMonthFull = new Date(month.y, currentMonthIndex);
-  const days = [];
-  const prevDays = () => {
-    const prevMonth = new Date(currentMonthFull);
-    prevMonth.setDate(prevMonth.getDate() - 1);
-    const lastDayPrevMohth = prevMonth.getDate();
-    const prevList = [];
-    for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
-      prevList.push(lastDayPrevMohth - i);
-    }
-    prevList.reverse();
-    return prevList;
-  };
-  const prevDaysArray = prevDays();
-  while (currentMonthFull.getMonth() === currentMonthIndex) {
-    days.push(currentMonthFull.getDate());
-    currentMonthFull.setDate(currentMonthFull.getDate() + 1);
-  }
-  const nextDays = () => {
-    const totalViewDays = 42;
-    const daysCount = totalViewDays - (prevDaysArray.length + days.length);
-    const nextList = [];
-    for (let i = 1; i <= daysCount; i++) {
-      nextList.push(i);
-    }
-    return nextList;
-  };
-  const nextDaysArray = nextDays();
-  const update = (m2, y) => {
-    y = m2 > 12 ? y + 1 : m2 < 1 ? y - 1 : y;
-    m2 = m2 > 12 ? 1 : m2 < 1 ? 12 : m2;
-    return { y, m: m2 };
-  };
-  const onExit = () => {
-    setActive(false);
-  };
-  const next = () => {
-    setMonth(update(month.m + 1, month.y));
-  };
-  const prev2 = () => {
-    setMonth(update(month.m - 1, month.y));
-  };
-  const isBefore = (activeDate) => {
-    if (before) {
-      const beforeDate = before.getTime();
-      if (beforeDate > activeDate) return true;
-    }
-    return false;
-  };
-  const send = (searchDate) => {
-    if (isBefore(
-      (/* @__PURE__ */ new Date(
-        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
-      )).getTime()
-    ))
-      return;
-    onChangeValue(
-      /* @__PURE__ */ new Date(
-        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
-      )
-    );
-    onExit();
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
-    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowLeft16px",
-          onClick: prev2,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: cls["d"], children: [
-        formating.Month(month.m).name,
-        "’",
-        month.y.toString().slice(-2)
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowRight16px",
-          onClick: next,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
-      week.map((i, s) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
-          children: i
-        },
-        `v${s}`
-      )),
-      prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
-      days.map((i, s) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: isBefore(
-            (/* @__PURE__ */ new Date(
-              `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
-            )).getTime()
-          ) ? cls["m"] : cls["a"],
-          children: i !== 0 ? /* @__PURE__ */ jsx(
-            "b",
-            {
-              className: current2.y === month.y && current2.m === month.m && current2.d === i ? cls["current"] : "",
-              onClick: () => send(i),
-              children: i
-            }
-          ) : /* @__PURE__ */ jsx("p", {})
-        },
-        s
-      )),
-      nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
-    ] })
-  ] }) });
-}
-export {
-  DatePickerModal as D,
-  cls as c
-};

package/dist/assets/DatePickerModal.css

@@ -1 +0,0 @@
-._input_1ndkx_2{padding-right:var(--space-3xl)}._date-wrapper_1ndkx_6{position:relative;width:100%}._date-wrapper_1ndkx_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_1ndkx_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_1ndkx_21{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1ndkx_21._active_1ndkx_27{border-bottom:1px solid var(--citrine-100)}._input-wrapper_1ndkx_31{flex:1}._button-wrapper_1ndkx_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1ndkx_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1ndkx_52{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1ndkx_58{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1ndkx_58 ._h_1ndkx_81{display:flex;width:100%;color:var(--black-100)}._calendar-block_1ndkx_58 ._b_1ndkx_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1ndkx_58 ._d_1ndkx_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_1ndkx_58 ._m_1ndkx_100,._calendar-block_1ndkx_58 ._a_1ndkx_27,._calendar-block_1ndkx_58 ._prev_1ndkx_102{width:48px;height:48px;overflow:hidden}._calendar-block_1ndkx_58 ._m_1ndkx_100{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1ndkx_58 ._m_1ndkx_100 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1ndkx_58 ._orange_1ndkx_118{color:var(--citrine-100)}._calendar-block_1ndkx_58 ._a_1ndkx_27{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:hover{background:var(--black-10)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1ndkx_58 ._current_1ndkx_143{background:var(--sapphire-10);border-radius:var(--control-radius-s)}