mimir-ui-kit 1.9.1 → 1.10.1

package/README.md

@@ -18,14 +18,22 @@
    npm run build
    ```
 
+## Создание нового компонента
+
+```bash
+npm run create-component <ComponentName>
+```
+
 ## Поднятие версии для публикации на npm
 
 Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
 
 1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
-   ```bash
-   npm version patch
-   ```
+
+```bash
+npm version patch
+```
+
 2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
    ```bash
    npm version minor

package/dist/{NavigationButtons-cTsXB7GS.js → NavigationButtons-DuOoqaPo.js}

@@ -4885,13 +4885,13 @@ const NavigationButtons = memo(() => {
       {
         isIconButton: true,
         iconName: "ArrowLeft16px",
-        variant: "gray",
+        variant: "white",
         onClick: handlePrevSlide
       },
       {
         isIconButton: true,
         iconName: "ArrowRight16px",
-        variant: "gray",
+        variant: "white",
         onClick: handleNextSlide
       }
     ],

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_6nidf_2{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_6nidf_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_6nidf_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_6nidf_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_6nidf_2._clear_6nidf_42:focus{box-shadow:none}._button_6nidf_2 svg{color:currentcolor;fill:currentcolor}._button_6nidf_2 svg path{color:currentcolor;fill:currentcolor}._xs_6nidf_54{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_6nidf_62{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_6nidf_70{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_6nidf_78{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_6nidf_86{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_6nidf_95{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._default-button_6nidf_104._primary-sapphire_6nidf_104{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._primary-citrine_6nidf_113{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._secondary-asphalt_6nidf_122{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._secondary-gray_6nidf_131{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_6nidf_104._secondary-white_6nidf_140{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_6nidf_104._secondary-red_6nidf_149{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_6nidf_159{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_6nidf_159._black_6nidf_166{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_6nidf_159._gray_6nidf_175{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_6nidf_159._white_6nidf_184{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._full_6nidf_194{display:flex;justify-content:center;width:100%}._disabled_6nidf_200{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_6nidf_200:hover,._disabled_6nidf_200:active,._disabled_6nidf_200:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_6nidf_211{justify-content:center;min-width:var(--button-height);padding:0}
+._button_1wajr_2{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_1wajr_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_1wajr_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_1wajr_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_1wajr_2._clear_1wajr_41:focus{box-shadow:none}._button_1wajr_2 svg{color:currentcolor;fill:currentcolor}._button_1wajr_2 svg path{color:currentcolor;fill:currentcolor}._xs_1wajr_53{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_1wajr_61{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_1wajr_69{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_1wajr_77{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_1wajr_85{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_1wajr_94{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._default-button_1wajr_103{border-radius:var(--control-radius)}._default-button_1wajr_103._primary-sapphire_1wajr_106{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1wajr_103._primary-citrine_1wajr_115{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1wajr_103._secondary-asphalt_1wajr_124{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1wajr_103._secondary-gray_1wajr_133{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_1wajr_103._secondary-white_1wajr_142{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_1wajr_103._secondary-red_1wajr_151{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_1wajr_161{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_1wajr_161._black_1wajr_168{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_1wajr_161._gray_1wajr_177{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_1wajr_161._white_1wajr_186{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._full_1wajr_196{display:flex;justify-content:center;width:100%}._disabled_1wajr_202{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1wajr_202:hover,._disabled_1wajr_202:active,._disabled_1wajr_202:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_1wajr_213{justify-content:center;min-width:var(--button-height);padding:0}

package/dist/assets/Input.css

@@ -1 +1 @@
-._input-wrapper_16d1h_2{position:relative}._input-wrapper_16d1h_2 ._label_16d1h_5{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_16d1h_2 ._label_16d1h_5._active-label_16d1h_18{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_16d1h_2:hover ._label_16d1h_5,._input-wrapper_16d1h_2:focus-within ._label_16d1h_5{color:var(--label-color)}._input_16d1h_2{--button-border-radius-l: 8px;--button-border-radius-m: 6px;--button-border-radius-s: 6px;position:relative;display:block;width:100%;min-width:0;height:var(--input-height);padding-top:0;color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background:none;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:var(--input-padding);padding-right:var(--input-padding);font-feature-settings:"zero"}._input_16d1h_2:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_16d1h_2:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._s_16d1h_61{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--button-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs)}._m_16d1h_73{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--button-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs)}._l_16d1h_5{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--button-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s)}._default-gray_16d1h_97{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_16d1h_109{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_16d1h_109:hover{--label-color: var(--dark-text)}._success_16d1h_124{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_16d1h_124::-moz-placeholder{color:var(--input-color)}._success_16d1h_124::placeholder{color:var(--input-color)}._success_16d1h_124:hover::-moz-placeholder{color:var(--input-color)}._success_16d1h_124:hover::placeholder{color:var(--input-color)}._alarm_16d1h_142{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_16d1h_142::-moz-placeholder{color:var(--input-color)}._alarm_16d1h_142::placeholder{color:var(--input-color)}._alarm_16d1h_142:hover::-moz-placeholder{color:var(--input-color)}._alarm_16d1h_142:hover::placeholder{color:var(--input-color)}._error_16d1h_160{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_16d1h_160::-moz-placeholder{color:var(--input-color)}._error_16d1h_160::placeholder{color:var(--input-color)}._error_16d1h_160:hover::-moz-placeholder{color:var(--input-color)}._error_16d1h_160:hover::placeholder{color:var(--input-color)}._disabled_16d1h_178{--input-cursor: not-allowed;color:var(--light-text);background-color:var(--black-20)}._disabled_16d1h_178:hover,._disabled_16d1h_178:active,._disabled_16d1h_178:focus{color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_16d1h_178::-moz-placeholder{color:var(--light-text)}._disabled_16d1h_178::placeholder{color:var(--light-text)}._disabled_16d1h_178:hover::-moz-placeholder{color:var(--light-text)}._disabled_16d1h_178:hover::placeholder{color:var(--light-text)}._has-label_16d1h_196{padding-top:var(--input-padding-position)}
+._input-wrapper_1sn09_2{position:relative}._input-wrapper_1sn09_2 ._label_1sn09_5{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1sn09_2 ._label_1sn09_5._active-label_1sn09_18{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1sn09_2:hover ._label_1sn09_5,._input-wrapper_1sn09_2:focus-within ._label_1sn09_5{color:var(--label-color)}._input_1sn09_2{--button-border-radius-l: 8px;--button-border-radius-m: 6px;--button-border-radius-s: 6px;position:relative;display:block;width:100%;min-width:0;height:var(--input-height);padding-top:0;color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background:none;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:var(--input-padding);padding-right:var(--input-padding);font-feature-settings:"zero"}._input_1sn09_2:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_1sn09_2:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._s_1sn09_61{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--button-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs)}._m_1sn09_73{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--button-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs)}._l_1sn09_5{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--button-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s)}._default-gray_1sn09_97{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1sn09_109{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1sn09_109:hover{--label-color: var(--dark-text)}._success_1sn09_124{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_1sn09_124::-moz-placeholder{color:var(--input-color)}._success_1sn09_124::placeholder{color:var(--input-color)}._success_1sn09_124:hover::-moz-placeholder{color:var(--input-color)}._success_1sn09_124:hover::placeholder{color:var(--input-color)}._alarm_1sn09_142{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_1sn09_142::-moz-placeholder{color:var(--input-color)}._alarm_1sn09_142::placeholder{color:var(--input-color)}._alarm_1sn09_142:hover::-moz-placeholder{color:var(--input-color)}._alarm_1sn09_142:hover::placeholder{color:var(--input-color)}._error_1sn09_160{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_1sn09_160::-moz-placeholder{color:var(--input-color)}._error_1sn09_160::placeholder{color:var(--input-color)}._error_1sn09_160:hover::-moz-placeholder{color:var(--input-color)}._error_1sn09_160:hover::placeholder{color:var(--input-color)}._disabled_1sn09_178{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20)}._disabled_1sn09_178:hover,._disabled_1sn09_178:active,._disabled_1sn09_178:focus{--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_1sn09_178::-moz-placeholder{color:var(--light-text)}._disabled_1sn09_178::placeholder{color:var(--light-text)}._disabled_1sn09_178:hover::-moz-placeholder{color:var(--light-text)}._disabled_1sn09_178:hover::placeholder{color:var(--light-text)}._has-label_1sn09_198{padding-top:var(--input-padding-position)}

package/dist/assets/MergedButton.css

@@ -1 +1 @@
-._buttons_h653f_2{display:inline-flex}._button_h653f_2{height:var(--button-height-m);padding:0 var(--control-space-xs);border-radius:0}._button_h653f_2:first-child{border-top-left-radius:var(--control-radius);border-bottom-left-radius:var(--control-radius)}._button_h653f_2:last-child{border-top-right-radius:var(--control-radius);border-bottom-right-radius:var(--control-radius)}._button_h653f_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_h653f_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_h653f_2._gray_h653f_27{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._button_h653f_2._white_h653f_35{--button-bg-color: var(--white-normal);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._button_h653f_2._transparent_h653f_42{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._button_h653f_2._is-icon_h653f_51{width:var(--button-height-m);padding:0}._button_h653f_2:disabled{--button-cursor: not-allowed;color:var(--disabled-color);background-color:var(--black-5)}._button_h653f_2:disabled:hover,._button_h653f_2:disabled:active,._button_h653f_2:disabled:focus{color:var(--disabled-color);background-color:var(--black-5);box-shadow:none}
+._buttons_cnsdp_2{display:inline-flex}._merged-button_cnsdp_6{--button-height: var(--button-height-m);--button-space: var(--control-space-xs)}._merged-button_cnsdp_6:first-child{border-radius:0;border-top-left-radius:var(--control-radius);border-bottom-left-radius:var(--control-radius)}._merged-button_cnsdp_6:last-child{border-radius:0;border-top-right-radius:var(--control-radius);border-bottom-right-radius:var(--control-radius)}._merged-button_cnsdp_6:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._merged-button_cnsdp_6:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._merged-button_cnsdp_6._gray_cnsdp_28{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_cnsdp_6._white_cnsdp_36{--button-bg-color: var(--white-normal);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_cnsdp_6._transparent_cnsdp_43{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_cnsdp_6._is-icon_cnsdp_52{width:var(--button-height-m);padding:0}._merged-button_cnsdp_6:disabled{--button-cursor: not-allowed;color:var(--disabled-color);background-color:var(--black-5)}._merged-button_cnsdp_6:disabled:hover,._merged-button_cnsdp_6:disabled:active,._merged-button_cnsdp_6:disabled:focus{color:var(--disabled-color);background-color:var(--black-5);box-shadow:none}

package/dist/assets/Tag.css

@@ -0,0 +1 @@
+._container_1f2sk_2{display:flex;align-items:center;justify-content:center;color:var(--sapphire-normal);border:none;border:1px solid var(--sapphire-normal);border-top-left-radius:var(--control-radius-s);border-bottom-right-radius:var(--control-radius-s);transform:skew(-23.48deg)}._container_1f2sk_2:hover{color:var(--sapphire-hover);border-color:var(--sapphire-hover)}._container_1f2sk_2:active{color:var(--white);background-color:var(--sapphire-normal)}._container_1f2sk_2:focus{box-shadow:0 0 4px 0 var(--box-shadow-focus)}._container_1f2sk_2._disabled_1f2sk_24{color:var(--white);background-color:var(--disabled);border-color:var(--disabled)}._container_1f2sk_2 ._inner_1f2sk_29{display:inline-block;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--inter-font-family);line-height:var(--line-height-text-s1);transform:skew(23.48deg)}._container_1f2sk_2._M_1f2sk_37{height:40px;padding:0 15px}._container_1f2sk_2._S_1f2sk_41{height:32px;padding:0 11px}._container_1f2sk_2._S_1f2sk_41 ._inner_1f2sk_29{font-size:var(--size-text-m);line-height:16px}._container_1f2sk_2._XS_1f2sk_49{height:26px;padding:0 8px}._container_1f2sk_2._XS_1f2sk_49 ._inner_1f2sk_29{font-size:var(--size-text-s);line-height:20px}

package/dist/components/Button/Button.js

@@ -3,19 +3,19 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef } from "react";
 import { EButtonVariantDefault, EButtonForm } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import '../../assets/Button.css';const button = "_button_6nidf_2";
-const clear = "_clear_6nidf_42";
-const xs = "_xs_6nidf_54";
-const s = "_s_6nidf_62";
-const m = "_m_6nidf_70";
-const l = "_l_6nidf_78";
-const xl = "_xl_6nidf_86";
-const xxl = "_xxl_6nidf_95";
-const black = "_black_6nidf_166";
-const gray = "_gray_6nidf_175";
-const white = "_white_6nidf_184";
-const full = "_full_6nidf_194";
-const disabled = "_disabled_6nidf_200";
+import '../../assets/Button.css';const button = "_button_1wajr_2";
+const clear = "_clear_1wajr_41";
+const xs = "_xs_1wajr_53";
+const s = "_s_1wajr_61";
+const m = "_m_1wajr_69";
+const l = "_l_1wajr_77";
+const xl = "_xl_1wajr_85";
+const xxl = "_xxl_1wajr_94";
+const black = "_black_1wajr_168";
+const gray = "_gray_1wajr_177";
+const white = "_white_1wajr_186";
+const full = "_full_1wajr_196";
+const disabled = "_disabled_1wajr_202";
 const cls = {
   button,
   clear,
@@ -25,20 +25,20 @@ const cls = {
   l,
   xl,
   xxl,
-  "default-button": "_default-button_6nidf_104",
-  "primary-sapphire": "_primary-sapphire_6nidf_104",
-  "primary-citrine": "_primary-citrine_6nidf_113",
-  "secondary-asphalt": "_secondary-asphalt_6nidf_122",
-  "secondary-gray": "_secondary-gray_6nidf_131",
-  "secondary-white": "_secondary-white_6nidf_140",
-  "secondary-red": "_secondary-red_6nidf_149",
-  "round-button": "_round-button_6nidf_159",
+  "default-button": "_default-button_1wajr_103",
+  "primary-sapphire": "_primary-sapphire_1wajr_106",
+  "primary-citrine": "_primary-citrine_1wajr_115",
+  "secondary-asphalt": "_secondary-asphalt_1wajr_124",
+  "secondary-gray": "_secondary-gray_1wajr_133",
+  "secondary-white": "_secondary-white_1wajr_142",
+  "secondary-red": "_secondary-red_1wajr_151",
+  "round-button": "_round-button_1wajr_161",
   black,
   gray,
   white,
   full,
   disabled,
-  "icon-button": "_icon-button_6nidf_211"
+  "icon-button": "_icon-button_1wajr_213"
 };
 const Button = forwardRef(
   (props, ref) => {

package/dist/components/Input/Input.js

@@ -2,30 +2,30 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, forwardRef, useState, useEffect } from "react";
 import { EInputVariant } from "./constants.js";
-import '../../assets/Input.css';const label = "_label_16d1h_5";
-const input = "_input_16d1h_2";
-const s = "_s_16d1h_61";
-const m = "_m_16d1h_73";
-const l = "_l_16d1h_5";
-const success = "_success_16d1h_124";
-const alarm = "_alarm_16d1h_142";
-const error = "_error_16d1h_160";
-const disabled = "_disabled_16d1h_178";
+import '../../assets/Input.css';const label = "_label_1sn09_5";
+const input = "_input_1sn09_2";
+const s = "_s_1sn09_61";
+const m = "_m_1sn09_73";
+const l = "_l_1sn09_5";
+const success = "_success_1sn09_124";
+const alarm = "_alarm_1sn09_142";
+const error = "_error_1sn09_160";
+const disabled = "_disabled_1sn09_178";
 const cls = {
-  "input-wrapper": "_input-wrapper_16d1h_2",
+  "input-wrapper": "_input-wrapper_1sn09_2",
   label,
-  "active-label": "_active-label_16d1h_18",
+  "active-label": "_active-label_1sn09_18",
   input,
   s,
   m,
   l,
-  "default-gray": "_default-gray_16d1h_97",
-  "default-white": "_default-white_16d1h_109",
+  "default-gray": "_default-gray_1sn09_97",
+  "default-white": "_default-white_1sn09_109",
   success,
   alarm,
   error,
   disabled,
-  "has-label": "_has-label_16d1h_196"
+  "has-label": "_has-label_1sn09_198"
 };
 const Input = memo(
   forwardRef(
@@ -76,7 +76,8 @@ const Input = memo(
       const labelClassNames = classNames(
         cls.label,
         {
-          [cls["active-label"]]: isFocused || value
+          [cls["active-label"]]: isFocused || value,
+          [cls.disabled]: disabled2 || readonly
         },
         className,
         cls[size]

package/dist/components/MergedButton/MergedButton.js

@@ -3,38 +3,36 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo } from "react";
 import { EMergedButtonVariantRound } from "./constants.js";
 import { Button } from "../Button/Button.js";
-import '../../assets/MergedButton.css';const buttons = "_buttons_h653f_2";
-const button = "_button_h653f_2";
-const gray = "_gray_h653f_27";
-const white = "_white_h653f_35";
-const transparent = "_transparent_h653f_42";
+import '../../assets/MergedButton.css';const buttons = "_buttons_cnsdp_2";
+const gray = "_gray_cnsdp_28";
+const white = "_white_cnsdp_36";
+const transparent = "_transparent_cnsdp_43";
 const cls = {
   buttons,
-  button,
+  "merged-button": "_merged-button_cnsdp_6",
   gray,
   white,
   transparent,
-  "is-icon": "_is-icon_h653f_51"
+  "is-icon": "_is-icon_cnsdp_52"
 };
 const MergedButton = memo(({ buttons: buttons2 }) => {
   return /* @__PURE__ */ jsx("div", { className: cls.buttons, children: buttons2.map(
-    ({ variant = EMergedButtonVariantRound.White, disabled, ...button2 }, index) => {
+    ({ variant = EMergedButtonVariantRound.White, disabled, ...button }, index) => {
       const buttonProps = {
-        ...button2,
-        isIconButton: button2.isIconButton ?? false,
-        iconName: button2.isIconButton ? button2.iconName : void 0,
-        leftIcon: button2.isIconButton ? void 0 : button2.leftIcon,
-        rightIcon: button2.isIconButton ? void 0 : button2.rightIcon
+        ...button,
+        isIconButton: button.isIconButton ?? false,
+        iconName: button.isIconButton ? button.iconName : void 0,
+        leftIcon: button.isIconButton ? void 0 : button.leftIcon,
+        rightIcon: button.isIconButton ? void 0 : button.rightIcon
       };
       const className = classNames(
-        cls.button,
-        cls.clear,
+        cls["merged-button"],
         {
           [cls[variant]]: !disabled,
           [cls.disabled]: disabled,
-          [cls["is-icon"]]: button2.isIconButton
+          [cls["is-icon"]]: button.isIconButton
         },
-        button2.className
+        button.className
       );
       return /* @__PURE__ */ jsx(
         Button,

package/dist/components/Slider/NavigationButtons/NavigationButtons.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { N } from "../../../NavigationButtons-cTsXB7GS.js";
+import { N } from "../../../NavigationButtons-DuOoqaPo.js";
 import "../../MergedButton/MergedButton.js";
 export {
   N as NavigationButtons

package/dist/components/Slider/NavigationButtons/index.js

@@ -1,4 +1,4 @@
-import { N } from "../../../NavigationButtons-cTsXB7GS.js";
+import { N } from "../../../NavigationButtons-DuOoqaPo.js";
 export {
   N as NavigationButtons
 };

package/dist/components/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { useRef, useState, useCallback } from "react";
-import { g as getDocument, S as Swiper, N as NavigationButtons, a as SwiperSlide } from "../../NavigationButtons-cTsXB7GS.js";
+import { g as getDocument, S as Swiper, N as NavigationButtons, a as SwiperSlide } from "../../NavigationButtons-DuOoqaPo.js";
 import { ProgressBar } from "./ProgressBar/ProgressBar.js";
 import { AppImage } from "../Image/Image.js";
 import '../../assets/Slider.css';function Autoplay(_ref) {

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+
+export type TProps = {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к контентному элементу
+     */
+    innerClassName?: string;
+    /**
+     * Класс, применяемый к контентному элементу
+     */
+    size?: string;
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    children?: ReactNode;
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    disabled?: boolean;
+    /**
+     * Определяет какой тип элемента будет создан, по умолчанию - button
+     */
+    elementType?: 'button' | 'div';
+    /**
+     * Цвет фона, при outline и текста
+     */
+    backgroundColor?: string;
+    /**
+     * Цвет текста (если не outline)
+     */
+    color?: string;
+    /**
+     * Определяет должен быть тег в стилистике outline или нет
+     */
+    outline?: boolean;
+};
+export declare const Tag: import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef } from "react";
+import { ETagSize, ETagType } from "./constants.js";
+import '../../assets/Tag.css';const container = "_container_1f2sk_2";
+const disabled = "_disabled_1f2sk_24";
+const inner = "_inner_1f2sk_29";
+const M = "_M_1f2sk_37";
+const S = "_S_1f2sk_41";
+const XS = "_XS_1f2sk_49";
+const cls = {
+  container,
+  disabled,
+  inner,
+  M,
+  S,
+  XS
+};
+const Tag = forwardRef(
+  (props, ref) => {
+    const {
+      rootClassName,
+      innerClassName,
+      children,
+      size = ETagSize.M,
+      disabled: disabled2 = false,
+      elementType = ETagType.BUTTON,
+      backgroundColor = "",
+      color = "",
+      outline = false,
+      ...otherProps
+    } = props;
+    const Element = elementType === ETagType.BUTTON ? ETagType.BUTTON : ETagType.DIV;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        className: classNames(cls.container, cls[size], rootClassName, {
+          [cls.disabled]: disabled2
+        }),
+        ref,
+        style: {
+          backgroundColor: outline ? "transparent" : backgroundColor,
+          borderColor: backgroundColor,
+          color: outline ? backgroundColor : color
+        },
+        ...otherProps,
+        children: /* @__PURE__ */ jsx("span", { className: classNames(cls.inner, innerClassName), children })
+      }
+    );
+  }
+);
+export {
+  Tag
+};

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

@@ -0,0 +1,9 @@
+export declare enum ETagSize {
+    XS = "XS",
+    S = "S",
+    M = "M"
+}
+export declare enum ETagType {
+    DIV = "div",
+    BUTTON = "button"
+}

package/dist/components/Tag/constants.js

@@ -0,0 +1,15 @@
+var ETagSize = /* @__PURE__ */ ((ETagSize2) => {
+  ETagSize2["XS"] = "XS";
+  ETagSize2["S"] = "S";
+  ETagSize2["M"] = "M";
+  return ETagSize2;
+})(ETagSize || {});
+var ETagType = /* @__PURE__ */ ((ETagType2) => {
+  ETagType2["DIV"] = "div";
+  ETagType2["BUTTON"] = "button";
+  return ETagType2;
+})(ETagType || {});
+export {
+  ETagSize,
+  ETagType
+};

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

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export { ETagSize, ETagType } from './constants';

package/dist/components/Tag/index.js

@@ -0,0 +1,7 @@
+import { Tag } from "./Tag.js";
+import { ETagSize, ETagType } from "./constants.js";
+export {
+  ETagSize,
+  ETagType,
+  Tag
+};

package/dist/components/Tag/types.js

@@ -0,0 +1 @@
+

package/dist/components/index.d.ts

@@ -23,4 +23,5 @@ export { SelectSearch, ESelectSearchSize } from './SelectSearch';
 export type { TSelectSearchItem, TSelectSearchProps } from './SelectSearch';
 export { Switch } from './Switch';
 export type { TSwitchProps } from './Switch';
+export { Tag, ETagSize, ETagType } from './Tag';
 export { Timer } from './Timer';

package/dist/components/index.js

@@ -22,6 +22,8 @@ import { EVoteSize } from "./Vote/constants.js";
 import { SelectSearch } from "./SelectSearch/SelectSearch.js";
 import { ESelectSearchSize } from "./SelectSearch/constants.js";
 import { Switch } from "./Switch/Switch.js";
+import { Tag } from "./Tag/Tag.js";
+import { ETagSize, ETagType } from "./Tag/constants.js";
 import { Timer } from "./Timer/Timer.js";
 export {
   Button,
@@ -39,6 +41,8 @@ export {
   EStepsPrimaryColor,
   EStepsSecondaryColor,
   EStepsSize,
+  ETagSize,
+  ETagType,
   EVoteSize,
   AppImage as Image,
   Input,
@@ -52,6 +56,7 @@ export {
   Slider,
   Steps,
   Switch,
+  Tag,
   Timer,
   Vote,
   getMaskedInputPhoneValue,

package/dist/index.js

@@ -22,6 +22,8 @@ import { EVoteSize } from "./components/Vote/constants.js";
 import { SelectSearch } from "./components/SelectSearch/SelectSearch.js";
 import { ESelectSearchSize } from "./components/SelectSearch/constants.js";
 import { Switch } from "./components/Switch/Switch.js";
+import { Tag } from "./components/Tag/Tag.js";
+import { ETagSize, ETagType } from "./components/Tag/constants.js";
 import { Timer } from "./components/Timer/Timer.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
@@ -47,6 +49,8 @@ import './assets/index.css';export {
   EStepsPrimaryColor,
   EStepsSecondaryColor,
   EStepsSize,
+  ETagSize,
+  ETagType,
   EVoteSize,
   Icon,
   AppImage as Image,
@@ -61,6 +65,7 @@ import './assets/index.css';export {
   Slider,
   Steps,
   Switch,
+  Tag,
   Timer,
   Vote,
   formating,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.9.1",
+  "version": "1.10.1",
   "type": "module",
   "exports": {
     ".": {
@@ -42,7 +42,8 @@
     "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
     "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
     "icons": "svgr --expand-props start ./src/icons/svgs",
-    "prepare": "husky"
+    "prepare": "husky",
+    "create-component": "node createComponent.js"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -113,7 +114,7 @@
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
-      "eslint",
+      "eslint --ignore-path .eslintignore",
       "prettier --write"
     ],
     "**/*.{css,scss}": [