@megafon/ui-core 9.0.0-alpha.9 → 9.1.0

package/dist/lib/components/TextField/TextField.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:focus,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:hover,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field_resized{border-color:var(--content)}.mfui-9-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-text-field__field_textarea,.mfui-9-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-9-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-text-field__field_no-icon{padding-right:16px}.mfui-9-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:8px;width:12px}.mfui-9-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-text-field__resizer:active svg,.mfui-9-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-9-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-9-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::placeholder{opacity:1}.mfui-9-text-field__field::-webkit-scrollbar{width:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-9-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-text-field__field_textarea~.mfui-9-text-field__label{top:16px}.mfui-9-text-field__field:-webkit-autofill~.mfui-9-text-field__label,.mfui-9-text-field__field:focus~.mfui-9-text-field__label,.mfui-9-text-field__field:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:focus~.mfui-9-text-field__label,.mfui-9-text-field__field_textarea:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-9-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-9-text-field__field-bottom-wrapper_filled{margin-top:8px}.mfui-9-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-9-text-field__notice-text_active{height:100%;opacity:1}.mfui-9-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-9-text-field__icon-box_custom-handler,.mfui-9-text-field__icon-box_error,.mfui-9-text-field__icon-box_password,.mfui-9-text-field__icon_clear{cursor:pointer}.mfui-9-text-field__icon,.mfui-9-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-9-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-text-field__icon_clear:hover{fill:var(--content)}.mfui-9-text-field__require-mark{color:var(--fury)}.mfui-9-text-field__counter{margin-left:auto}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--brandGreen)}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--brandGreen)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--content);cursor:default}.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important}.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__counter_error,.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-9-text-field_theme_white .mfui-9-text-field__icon{fill:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__counter,.mfui-9-text-field_theme_white .mfui-9-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:active svg,.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field{border-color:var(--base)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--stcWhite20);border-color:var(--stcWhite20);color:var(--stcWhite)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__label{color:var(--stcWhite50)}.mfui-9-text-field_icon .mfui-9-text-field__field{padding-right:55px}.mfui-9-text-field_password .mfui-9-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-9-text-field input::-ms-clear,.mfui-9-text-field input::-ms-reveal{display:none}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-text-field{color:var(--content);font-family:inherit;font-size:15px;line-height:24px}.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:focus,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field:hover,.mfui-9-text-field:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field .mfui-9-text-field__field_resized{border-color:var(--content)}.mfui-9-text-field__field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:var(--content);display:block;font-family:inherit;font-size:15px;line-height:24px;margin:0;opacity:1;outline:none;padding:25px 56px 9px 16px;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-text-field__field_textarea,.mfui-9-text-field__field_type_flexible{-webkit-box-sizing:content-box;box-sizing:content-box;overflow-x:hidden;overflow-y:auto;padding-top:28px;resize:none}.mfui-9-text-field__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-9-text-field__field_no-icon{padding-right:16px}.mfui-9-text-field__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:8px;width:12px}.mfui-9-text-field__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-9-text-field__resizer:active svg,.mfui-9-text-field__resizer:hover svg{stroke:var(--spbSky3)}.mfui-9-text-field__field::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-text-field__field:focus::-webkit-input-placeholder{opacity:1}.mfui-9-text-field__field:focus:-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::-moz-placeholder{opacity:1}.mfui-9-text-field__field:focus::-ms-input-placeholder{opacity:1}.mfui-9-text-field__field:focus::placeholder{opacity:1}.mfui-9-text-field__field::-webkit-scrollbar{width:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-9-text-field__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;left:16px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:18px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-text-field__field_textarea{scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-text-field__field_textarea~.mfui-9-text-field__label{top:16px}.mfui-9-text-field__field:-webkit-autofill~.mfui-9-text-field__label,.mfui-9-text-field__field:focus~.mfui-9-text-field__label,.mfui-9-text-field__field:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-75%);transform:scale(.8) translate(-11%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-text-field__field_textarea:not(:-moz-placeholder-shown)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:not(:-ms-input-placeholder)~.mfui-9-text-field__label{transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field_textarea:focus~.mfui-9-text-field__label,.mfui-9-text-field__field_textarea:not(:placeholder-shown)~.mfui-9-text-field__label{-webkit-transform:scale(.8) translate(-11%,-50%);transform:scale(.8) translate(-11%,-50%)}.mfui-9-text-field__field-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative}.mfui-9-text-field__field-bottom-wrapper{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;margin-top:0;overflow:hidden}.mfui-9-text-field__field-bottom-wrapper_filled{margin-top:4px}.mfui-9-text-field__notice-text{height:0;opacity:0;-webkit-transition:height,opacity;transition:height,opacity;-webkit-transition-duration:.3s;transition-duration:.3s}.mfui-9-text-field__notice-text_active{height:100%;opacity:1}.mfui-9-text-field__icon-box{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;top:0;z-index:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;padding-right:16px;text-align:center;fill:var(--content)}.mfui-9-text-field__icon-box_custom-handler,.mfui-9-text-field__icon-box_error,.mfui-9-text-field__icon-box_password,.mfui-9-text-field__icon_clear{cursor:pointer}.mfui-9-text-field__icon,.mfui-9-text-field__icon-box svg{display:block;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-9-text-field__icon_clear{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-text-field__icon_clear:hover{fill:var(--content)}.mfui-9-text-field__require-mark{color:var(--fury)}.mfui-9-text-field__counter{margin-left:auto}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--brandGreen)}.mfui-9-text-field_valid:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--brandGreen)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__field{border-color:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon{fill:var(--fury)}.mfui-9-text-field_error:not(.mfui-9-text-field_disabled) .mfui-9-text-field__icon_clear:hover{fill:var(--fury80)}.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--spbSky0);border-color:var(--spbSky2);color:var(--content);cursor:default}.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important;fill:var(--spbSky3)}.mfui-9-text-field_disabled .mfui-9-text-field__icon{fill:var(--spbSky3)}.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__counter_error,.mfui-9-text-field_theme_default.mfui-9-text-field_error .mfui-9-text-field__field-bottom-wrapper{color:var(--fury)}.mfui-9-text-field_theme_white .mfui-9-text-field__icon{fill:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__counter,.mfui-9-text-field_theme_white .mfui-9-text-field__field-bottom-wrapper{color:var(--stcWhite)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb{background-color:rgba(51,51,51,.2)}.mfui-9-text-field_theme_white .mfui-9-text-field__field::-webkit-scrollbar-thumb:hover{background-color:rgba(51,51,51,.5)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer svg{stroke:var(--stcWhite20)}.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:active svg,.mfui-9-text-field_theme_white .mfui-9-text-field__resizer:hover svg{stroke:var(--stcWhite50)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field{border-color:var(--base)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-moz-placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:-ms-input-placeholder){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):not(:placeholder-shown){border-color:var(--spbSky2)}.mfui-9-text-field_theme_white:not(.mfui-9-text-field_disabled):not(.mfui-9-text-field_error):not(.mfui-9-text-field_valid) .mfui-9-text-field__field:not(:focus):hover{border-color:var(--stcBlack)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__field{background-color:var(--stcWhite20);border-color:transparent;color:var(--stcWhite)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__label{color:var(--stcWhite50)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__icon{fill:var(--stcWhite50)}.mfui-9-text-field_theme_white.mfui-9-text-field_disabled .mfui-9-text-field__icon-box{cursor:default!important;fill:var(--stcWhite50)}.mfui-9-text-field_icon .mfui-9-text-field__field{padding-right:55px}.mfui-9-text-field_password .mfui-9-text-field__field{font:small-caption;font-size:19px;line-height:24px}.mfui-9-text-field input::-ms-clear,.mfui-9-text-field input::-ms-reveal{display:none}

package/dist/lib/components/TextField/TextField.d.ts

@@ -68,7 +68,7 @@ export type TextFieldProps = {
     customIcon?: JSX.Element;
     /** Маска для поля. Не работает с textarea=true. */
     /** Дополнительную информацию можно найти на https://github.com/sanniassin/react-input-mask */
-    mask?: string;
+    mask?: string | Array<string | RegExp>;
     /** Разделение символов для маски. Не работает textarea=true */
     maskChar?: string;
     /** Дополнительный класс корневого элемента */
@@ -104,7 +104,7 @@ export type TextFieldProps = {
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */
-    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState) => void;
+    onBeforeMaskChange?: (value: string, newState: IMaskState, oldState: IMaskState, currentState: IMaskState) => void;
     /** Обработчик выхода из фокуса */
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик входа в фокус */

package/dist/lib/components/TextField/TextField.js

@@ -30,37 +30,43 @@ var Hide = function Hide(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5.82 17.45l-1.65 2.31L5.8 21l1.65-2.3a15.9 15.9 0 002.67 1.3l-.87 2.71 1.92.63.86-2.7a15.64 15.64 0 003 .48V24h2v-2.84a15.64 15.64 0 003-.48l.86 2.7 1.92-.63-.93-2.75a15.9 15.9 0 002.67-1.38L26.2 21l1.63-1.2-1.65-2.31a16.16 16.16 0 001.82-1.8l-1.51-1.35a13.8 13.8 0 01-21 0L4 15.69a16.15 16.15 0 001.82 1.76zM23 11.92l1-1.77a16 16 0 00-16 0l1 1.77a14 14 0 0114 0z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.036 7.588c.553-.55 1.45-.55 2.004 0a1.4 1.4 0 01-.001 1.99l-1.221 1.21c.464.367.907.771 1.324 1.213l2.306 2.441c.74.784.736 1.995-.01 2.774l-2.335 2.437c-3.536 3.69-8.827 4.73-13.353 3.123l-1.646 1.636c-.553.55-1.45.55-2.003 0a1.401 1.401 0 010-1.99L23.036 7.588zm-7.865 11.79c.268.054.545.084.83.084 2.339 0 4.235-1.884 4.235-4.208 0-.282-.03-.558-.083-.824l-4.982 4.949z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.832 12c3.113-3.295 7.619-4.511 11.76-3.65l-2.719 2.699c-2.238.065-4.04 1.855-4.105 4.079L7.06 19.806a12.697 12.697 0 01-.168-.172l-2.334-2.448a2.005 2.005 0 01-.007-2.771l2.28-2.414z"
   }));
 };
 var Show = function Show(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M26 11.69l1.73-2-1.49-1.34-1.82 2.15a15.67 15.67 0 00-2.59-1.34l1.1-2.8-1.86-.73-1.14 2.9A15.53 15.53 0 0017 8.07V5h-2v3.07a15.53 15.53 0 00-2.93.47l-1.14-2.9-1.86.73 1.1 2.8a15.67 15.67 0 00-2.59 1.33L5.76 8.35l-1.52 1.3 1.73 2A19.78 19.78 0 004 13.5L5.46 15A13.72 13.72 0 0116 10a13.55 13.55 0 0110.52 5L28 13.5a19.78 19.78 0 00-2-1.81z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.833 12.31c4.936-5.08 13.373-5.08 18.31 0l2.305 2.373a1.91 1.91 0 01-.01 2.698l-2.335 2.369c-4.933 5.007-13.287 4.999-18.209-.019l-2.335-2.38a1.91 1.91 0 01-.007-2.693l2.28-2.348zM16 10.45a5.55 5.55 0 100 11.101 5.55 5.55 0 000-11.101z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M20 16a4 4 0 10-4 4 4 4 0 004-4zm-6 0a2 2 0 112 2 2 2 0 01-2-2z"
+    d: "M18.824 13.273c0 .753-.633 1.364-1.412 1.364-.78 0-1.412-.611-1.412-1.364 0-.753.632-1.364 1.412-1.364.78 0 1.412.61 1.412 1.364z"
   }));
 };
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ClearIcon__st0",
-    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+    d: "M11.033 15.1l3.39 3.39 6.817-6.742c.578-.572 1.483-.595 2.02-.051.538.544.504 1.449-.075 2.021l-7.858 7.773c-.576.57-1.476.595-2.015.056L8.95 17.185c-.54-.541-.512-1.446.063-2.021.576-.576 1.48-.604 2.021-.063z"
   }));
 };
 var ResizeIcon = function ResizeIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 12,
-    height: 12
+    height: 12,
+    viewBox: "0 0 12 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M1 11L11 1M7 11l4-4"
   }));
@@ -317,8 +323,9 @@ var TextField = function TextField(_ref) {
   }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = (0, _react.useCallback)(function (_ref2) {
     var previousState = _ref2.previousState,
-      nextState = _ref2.nextState;
-    return onBeforeMaskChange === null || onBeforeMaskChange === void 0 ? void 0 : onBeforeMaskChange(nextState.enteredString, nextState, previousState);
+      nextState = _ref2.nextState,
+      currentState = _ref2.currentState;
+    return onBeforeMaskChange === null || onBeforeMaskChange === void 0 ? void 0 : onBeforeMaskChange(nextState.enteredString, nextState, previousState, currentState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var commonParams = (0, _extends2["default"])((0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {

package/dist/lib/components/Tile/Tile.d.ts

@@ -26,6 +26,8 @@ export declare const ShadowLevel: {
 };
 type ShadowLevelType = (typeof ShadowLevel)[keyof typeof ShadowLevel];
 export interface ITileProps {
+    /** Индекс для навигации через tab */
+    tabIndex?: number;
     /** Ссылка */
     href?: string;
     /** Атрибут для открытия ссылки */

package/dist/lib/components/Tile/Tile.js

@@ -34,7 +34,8 @@ var ShadowLevel = exports.ShadowLevel = {
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-tile');
 var Tile = function Tile(_ref) {
-  var href = _ref.href,
+  var tabIndex = _ref.tabIndex,
+    href = _ref.href,
     children = _ref.children,
     className = _ref.className,
     _ref$theme = _ref.theme,
@@ -66,6 +67,7 @@ var Tile = function Tile(_ref) {
       pointer: isPointer,
       interactive: isInteractive
     }, className),
+    tabIndex: tabIndex,
     onClick: handleClick
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), href && /*#__PURE__*/React.createElement("a", {
     href: href,

package/dist/lib/components/Tooltip/Tooltip.js

@@ -21,13 +21,14 @@ var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+    d: "M10.084 5.282a1 1 0 011.414.022l3.61 3.726c.522.54.523 1.4 0 1.94l-3.61 3.726a1 1 0 01-1.436-1.392l2.225-2.297H5.5a1 1 0 010-2h6.8l-2.239-2.31a1 1 0 01.023-1.415z"
   }));
 };
 var ArrowWithContour = function ArrowWithContour(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
-    height: 12
+    height: 12,
+    viewBox: "0 0 32 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -41,7 +42,8 @@ var ArrowWithContour = function ArrowWithContour(props) {
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 42,
-    height: 12
+    height: 12,
+    viewBox: "0 0 42 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/dist/lib/components/UploadForm/UploadField/UploadField.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;position:relative;width:100%}.mfui-9-upload-field__input{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(100%)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;position:relative;width:100%}.mfui-9-upload-field__input{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0);clip-path:inset(100%)}.mfui-9-upload-field__error-text{color:var(--fury);font-size:12px;line-height:18px;margin-top:4px}

package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts

@@ -5,6 +5,8 @@ export interface IUploadDropField {
     className?: string;
     /** Обязательность поля */
     required?: boolean;
+    /** Ошибка обязательности заполнения поля */
+    requiredError?: string | null;
     /** Заблокированное состояние */
     disabled?: boolean;
     /** Действие при выборе файла */
@@ -18,6 +20,7 @@ export interface IUploadDropField {
         root?: Record<string, string>;
         input?: Record<string, string>;
         dropArea?: Record<string, string>;
+        errorText?: Record<string, string>;
     };
 }
 declare const UploadField: React.FC<IUploadDropField>;

package/dist/lib/components/UploadForm/UploadField/UploadField.js

@@ -24,6 +24,7 @@ var UploadField = function UploadField(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     accept = _ref.accept,
+    requiredError = _ref.requiredError,
     onChange = _ref.onChange,
     description = _ref.description,
     dataAttrs = _ref.dataAttrs;
@@ -43,7 +44,9 @@ var UploadField = function UploadField(_ref) {
     inputRef.current.click();
   }, []);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn([className])
+    className: cn({
+      error: !!requiredError
+    }, [className])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
     className: cn('input')
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
@@ -54,6 +57,7 @@ var UploadField = function UploadField(_ref) {
     onChange: handleInputChange,
     disabled: disabled
   })), /*#__PURE__*/React.createElement(_UploadFieldDropArea["default"], {
+    isRequiredError: !!requiredError,
     description: description,
     required: required,
     disabled: disabled,
@@ -62,6 +66,8 @@ var UploadField = function UploadField(_ref) {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropArea
     }
-  }));
+  }), !!requiredError && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('error-text')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.errorText)), requiredError));
 };
 var _default = exports["default"] = UploadField;

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:16px;padding:12px 32px 20px;width:100%}.mfui-9-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-9-upload-field-drop-area__content{text-align:center}.mfui-9-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-9-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-9-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-9-upload-field-drop-area__select-button:focus,.mfui-9-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-9-upload-field-drop-area__mark{color:var(--fury)}.mfui-9-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-9-upload-field-drop-area_dragging *{pointer-events:none}.mfui-9-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__mark{color:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:24px;padding:12px 32px 20px;width:100%}.mfui-9-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-9-upload-field-drop-area__content{text-align:center}.mfui-9-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-9-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-9-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-9-upload-field-drop-area__select-button:focus,.mfui-9-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-9-upload-field-drop-area__mark{color:var(--fury)}.mfui-9-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-9-upload-field-drop-area_dragging *{pointer-events:none}.mfui-9-upload-field-drop-area_error:not(.mfui-9-upload-field-drop-area_dragging){border-color:var(--fury)}.mfui-9-upload-field-drop-area_error:not(.mfui-9-upload-field-drop-area_dragging) .mfui-9-upload-field-drop-area__upload-icon{fill:var(--fury)}.mfui-9-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-9-upload-field-drop-area_disabled .mfui-9-upload-field-drop-area__mark{color:var(--spbSky3)}

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts

@@ -5,6 +5,8 @@ export interface IUploadFieldDropArea {
     description?: string | string[];
     /** Обязательность поля */
     required: boolean;
+    /** Ошибка обязательности заполнения поля */
+    isRequiredError: boolean;
     /** Заблокированное состояние */
     disabled: boolean;
     /** Обработчик события 'drop' */

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js

@@ -20,7 +20,11 @@ var CloudUpload = function CloudUpload(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 40 40"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19 36V22l-2.38 3.9-1.71-1L19 18h1.88l4.14 6.85-1.71 1L21 22v14zM8.21 32H14v-2H8.21A4.27 4.27 0 014 25.6a4.27 4.27 0 014.21-4.4h2.07V18a9.94 9.94 0 019.66-10 9.94 9.94 0 019.66 10v1h1a5.49 5.49 0 010 11H26v2h4.6a7.49 7.49 0 001-14.91A11.94 11.94 0 0019.94 6 11.94 11.94 0 008.27 18v1.16h-.06A6.27 6.27 0 002 25.6 6.27 6.27 0 008.21 32z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.28 24.394a.93.93 0 011.424 0l2.822 3.337c.526.622.094 1.59-.712 1.59h-.947v2.44c0 1.06-.84 1.92-1.876 1.92-1.037 0-1.88-.86-1.88-1.92v-2.44h-.942a.933.933 0 01-.89-.655c-.003-.01-.01-.02-.013-.03a1.01 1.01 0 01-.038-.235.955.955 0 01.228-.67l2.823-3.337z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19.011 8.68c3.733 0 6.898 2.484 8.013 5.926.47-.094.956-.144 1.454-.144 4.154 0 7.522 3.436 7.522 7.677 0 4.24-3.368 7.678-7.522 7.678-.86 0-1.719.004-2.578.01-.293 0-.483-.322-.396-.601a2.876 2.876 0 00-.554-2.752l-2.821-3.336a2.784 2.784 0 00-4.052-.235l-.22.233-2.824 3.337a2.873 2.873 0 00-.552 2.756c.088.279-.1.6-.393.6H9.344v-.018C6.367 29.653 4 27.141 4 24.061c0-3.18 2.526-5.758 5.642-5.758.337 0 .667.03.989.088a8.959 8.959 0 01-.063-1.058c0-4.779 3.78-8.652 8.443-8.652z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-upload-field-drop-area');
@@ -28,6 +32,8 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
   var description = _ref.description,
     required = _ref.required,
     disabled = _ref.disabled,
+    _ref$isRequiredError = _ref.isRequiredError,
+    isRequiredError = _ref$isRequiredError === void 0 ? false : _ref$isRequiredError,
     onDrop = _ref.onDrop,
     onSelectButtonClick = _ref.onSelectButtonClick,
     dataAttrs = _ref.dataAttrs;
@@ -57,7 +63,8 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       disabled: disabled,
-      dragging: isDragging
+      dragging: isDragging,
+      error: isRequiredError
     }),
     ref: dropAreaRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(CloudUpload, {

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:16px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-9-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-9-upload-file-item__cancel-icon-box svg,.mfui-9-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-9-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-9-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-9-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-9-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-9-upload-file-item__icon{height:100%;width:100%}.mfui-9-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-9-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-9-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-9-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-9-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-9-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-9-upload-file-item__service-message{color:var(--content)}.mfui-9-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-9-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-9-upload-file-item_error{border-color:var(--fury20)}.mfui-9-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__error-message,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__service-message{color:var(--spbSky3)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__download-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__file-icon-box{opacity:.4}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:24px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-9-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:12px;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-9-upload-file-item__cancel-icon-box svg,.mfui-9-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-9-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-9-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-9-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-9-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-9-upload-file-item__icon{height:100%;width:100%}.mfui-9-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-9-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-9-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-9-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-9-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-9-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-9-upload-file-item__service-message{color:var(--content)}.mfui-9-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-9-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-9-upload-file-item_error{border-color:var(--fury20)}.mfui-9-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__error-message,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__service-message{color:var(--spbSky3)}.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__cancel-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__download-icon-box,.mfui-9-upload-file-item_disabled .mfui-9-upload-file-item__file-icon-box{opacity:.4}

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js

@@ -19,17 +19,16 @@ var DownloadIcon = function DownloadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
+    d: "M26.4 14.507a1.6 1.6 0 011.601 1.6c0 1.5-.318 2.984-.93 4.363a11.295 11.295 0 01-2.625 3.67 12.08 12.08 0 01-3.888 2.427 12.67 12.67 0 01-9.115 0 12.083 12.083 0 01-3.888-2.427 11.295 11.295 0 01-2.625-3.67A10.75 10.75 0 014 16.107a1.6 1.6 0 113.2 0c0 1.048.22 2.09.653 3.065a8.097 8.097 0 001.884 2.63 8.881 8.881 0 002.86 1.78 9.453 9.453 0 003.403.631 9.45 9.45 0 003.402-.63 8.883 8.883 0 002.86-1.782 8.096 8.096 0 001.883-2.629 7.55 7.55 0 00.655-3.065 1.6 1.6 0 011.6-1.6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
+    d: "M16 6.418a1.6 1.6 0 011.6 1.6v5.813l2.062-2.085a1.6 1.6 0 012.275 2.25l-4.231 4.278-.183.167a2.4 2.4 0 01-3.047 0l-.183-.167-4.23-4.278a1.6 1.6 0 112.275-2.25L14.4 13.83V8.018a1.6 1.6 0 011.6-1.6z"
   }));
 };
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "CancelIcon__st0",
-    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+    d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
   }));
 };
 var MAX_PROGRESS = 100;

package/dist/lib/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js

@@ -15,6 +15,7 @@ var AttachIcon = function AttachIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M25.538 8.297c-.944-.997-2.2-1.547-3.535-1.547-1.336 0-2.591.55-3.536 1.547l-7.881 8.325c-1.17 1.236-1.17 3.246 0 4.482a2.891 2.891 0 004.242 0l5.19-5.482c.39-.413.39-1.082 0-1.494a.963.963 0 00-1.414 0l-5.19 5.482a.964.964 0 01-1.414 0 1.1 1.1 0 010-1.494l7.881-8.325a2.902 2.902 0 012.122-.928c.8 0 1.554.33 2.12.928 1.17 1.236 1.17 3.246 0 4.481l-8.588 9.072c-1.95 2.06-5.121 2.06-7.07 0A5.4 5.4 0 017 19.61a5.4 5.4 0 011.464-3.735l8.589-9.072c.39-.412.39-1.081 0-1.494a.963.963 0 00-1.414 0L7.05 14.382C5.728 15.778 5 17.635 5 19.61c0 1.975.728 3.832 2.05 5.228C8.415 26.28 10.207 27 12 27c1.792 0 3.585-.72 4.95-2.162l8.588-9.072c1.95-2.06 1.95-5.41 0-7.469z",
@@ -25,6 +26,7 @@ var ExcelIcon = function ExcelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M8 3a1 1 0 011-1h10v7H8V3z",
@@ -94,6 +96,7 @@ var ImageIcon = function ImageIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M5.21 2.058h21.578c1.74 0 3.154 1.508 3.154 3.366V26.58c0 1.855-1.414 3.362-3.154 3.362H5.21c-1.74 0-3.152-1.507-3.152-3.362V5.424c0-1.858 1.413-3.366 3.152-3.366zm6.7 5.181c-1.681 0-3.045 1.28-3.045 3.074 0 1.795 1.364 2.946 3.046 2.946 1.682 0 3.046-1.151 3.046-2.946 0-1.794-1.364-3.074-3.046-3.074zM6.2 26.832h19.165c.841 0 1.216-.65.836-1.45L21.758 15.13c-.378-.801-1.527-.713-2.038 0l-5.615 6.374c-.511.713-1.21.634-2.03.223l-2.811-1.493c-.408-.28-1.171-.544-1.654.191L5.55 25.5c-.481.736-.191 1.332.65 1.332z",
@@ -104,6 +107,7 @@ var PdfIcon = function PdfIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("circle", {
     cx: 16,
@@ -121,6 +125,7 @@ var PowerIcon = function PowerIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("circle", {
     cx: 17,
@@ -183,6 +188,7 @@ var WordIcon = function WordIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 32,
     height: 32,
+    viewBox: "0 0 32 32",
     fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M8 3a1 1 0 011-1h20a1 1 0 011 1v6H8V3z",

package/dist/lib/hooks/useResolution.js

@@ -7,25 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var RESOLUTIONS;
 (function (RESOLUTIONS) {
-  RESOLUTIONS[RESOLUTIONS["MOBILE_XS_END"] = 359] = "MOBILE_XS_END";
-  RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 767] = "MOBILE_END";
+  RESOLUTIONS[RESOLUTIONS["MOBILE_XS_END"] = 360] = "MOBILE_XS_END";
+  RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 768] = "MOBILE_END";
 })(RESOLUTIONS || (RESOLUTIONS = {}));
 var _RESOLUTIONS = RESOLUTIONS,
   MOBILE_END = _RESOLUTIONS.MOBILE_END,
   MOBILE_XS_END = _RESOLUTIONS.MOBILE_XS_END;
-var MEDIA_QUERIES = {
-  MAX_WIDTH_MOBILE_XS_END: "(max-width: ".concat(MOBILE_XS_END, "px)"),
-  MAX_WIDTH_MOBILE_END: "(max-width: ".concat(MOBILE_END, "px)")
-};
-var MAX_WIDTH_MOBILE_XS_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_XS_END,
-  MAX_WIDTH_MOBILE_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_END;
 var isScreenWidthAtMost = function isScreenWidthAtMost(maxWidth) {
-  return typeof window !== 'undefined' ? window.innerWidth <= maxWidth : false;
+  return typeof window !== 'undefined' ? window.innerWidth < maxWidth : false;
 };
 function useResolution() {
   var _React$useState = React.useState(isScreenWidthAtMost(MOBILE_END)),
@@ -36,23 +31,20 @@ function useResolution() {
     _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     isMobileExtraSmall = _React$useState4[0],
     setIsMobileExtraSmall = _React$useState4[1];
-  var handleMediaChange = function handleMediaChange(updateStateFn) {
-    return function (e) {
-      return updateStateFn(e.matches);
-    };
-  };
-  var handleMaxWidthMobileEnd = handleMediaChange(setIsMobile);
-  var handleMaxWidthMobileExtraSmall = handleMediaChange(setIsMobileExtraSmall);
+  var handleResize = React.useMemo(function () {
+    return (0, _lodash["default"])(function () {
+      var width = window.innerWidth;
+      setIsMobile(width < MOBILE_END);
+      setIsMobileExtraSmall(width < MOBILE_XS_END);
+    }, 100);
+  }, []);
   React.useEffect(function () {
-    var mobileExtraSmallQuery = window.matchMedia(MAX_WIDTH_MOBILE_XS_END);
-    var mobileQuery = window.matchMedia(MAX_WIDTH_MOBILE_END);
-    mobileExtraSmallQuery.addEventListener('change', handleMaxWidthMobileExtraSmall);
-    mobileQuery.addEventListener('change', handleMaxWidthMobileEnd);
+    window.addEventListener('resize', handleResize);
     return function () {
-      mobileExtraSmallQuery.removeEventListener('change', handleMaxWidthMobileExtraSmall);
-      mobileQuery.removeEventListener('change', handleMaxWidthMobileEnd);
+      window.removeEventListener('resize', handleResize);
+      handleResize.cancel();
     };
-  }, [handleMaxWidthMobileEnd, handleMaxWidthMobileExtraSmall]);
+  }, [handleResize]);
   return {
     isMobile: isMobile,
     isMobileExtraSmall: isMobileExtraSmall

package/dist/lib/index.d.ts

@@ -57,6 +57,7 @@ export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Row } from './components/Row/Row';
 export { default as ScrollBar } from './components/ScrollBar/ScrollBar';
 export { default as Search } from './components/Search/Search';
+export { default as SectionAccordionGroup } from './components/SectionAccordionGroup/SectionAccordionGroup';
 export { default as Select } from './components/Select/Select';
 export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
@@ -68,6 +69,8 @@ export { default as slidesSettings } from './components/Banner/slidesSettings';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as StatusBadge } from './components/Badges/StatusBadge/StatusBadge';
+export { default as Stepper } from './components/Stepper/Stepper';
+export { default as StepperItem } from './components/Stepper/StepperItem';
 export { default as Switcher } from './components/Switcher/Switcher';
 export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';

package/dist/lib/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "Search", {
     return _Search["default"];
   }
 });
+Object.defineProperty(exports, "SectionAccordionGroup", {
+  enumerable: true,
+  get: function get() {
+    return _SectionAccordionGroup["default"];
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
@@ -399,6 +405,18 @@ Object.defineProperty(exports, "StatusBadge", {
     return _StatusBadge["default"];
   }
 });
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper["default"];
+  }
+});
+Object.defineProperty(exports, "StepperItem", {
+  enumerable: true,
+  get: function get() {
+    return _StepperItem["default"];
+  }
+});
 Object.defineProperty(exports, "Switcher", {
   enumerable: true,
   get: function get() {
@@ -590,6 +608,7 @@ var _RadioButton = _interopRequireDefault(require("./components/RadioButton/Radi
 var _Row = _interopRequireDefault(require("./components/Row/Row"));
 var _ScrollBar = _interopRequireDefault(require("./components/ScrollBar/ScrollBar"));
 var _Search = _interopRequireDefault(require("./components/Search/Search"));
+var _SectionAccordionGroup = _interopRequireDefault(require("./components/SectionAccordionGroup/SectionAccordionGroup"));
 var _Select = _interopRequireDefault(require("./components/Select/Select"));
 var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
 var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
@@ -601,6 +620,8 @@ var _slidesSettings = _interopRequireDefault(require("./components/Banner/slides
 var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));
 var _SnackbarTimer = _interopRequireDefault(require("./components/Snackbar/SnackbarTimer/SnackbarTimer"));
 var _StatusBadge = _interopRequireDefault(require("./components/Badges/StatusBadge/StatusBadge"));
+var _Stepper = _interopRequireDefault(require("./components/Stepper/Stepper"));
+var _StepperItem = _interopRequireDefault(require("./components/Stepper/StepperItem"));
 var _Switcher = _interopRequireDefault(require("./components/Switcher/Switcher"));
 var _Tab = _interopRequireDefault(require("./components/Tabs/Tab"));
 var _Tabs = _interopRequireDefault(require("./components/Tabs/Tabs"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "9.0.0-alpha.9",
+    "version": "9.1.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^4.0.0-alpha.3",
+        "@megafon/ui-icons": "^4.0.0",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -89,7 +89,7 @@
         "@datepicker-react/hooks": "^2.7.0",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
-        "@megafon/ui-helpers": "^5.0.0-alpha.1",
+        "@megafon/ui-helpers": "^5.0.0",
         "@mona-health/react-input-mask": "^3.0.3",
         "@popperjs/core": "^2.11.8",
         "core-js": "^3.6.4",
@@ -102,7 +102,7 @@
         "react-transition-group": "^4.4.5",
         "simplebar": "^6.2.6",
         "simplebar-react": "^3.2.5",
-        "swiper": "^11.1.1"
+        "swiper": "^12.1.2"
     },
-    "gitHead": "2a1e7af00b2047b8514fa07a89293cf51ad64e73"
+    "gitHead": "ec5702576bd66b78721a47df7b50619083f9fb1d"
 }

package/styles/base.scss

@@ -155,3 +155,57 @@ h5 {
         text-decoration: underline;
     }
 }
+@mixin focus($offset: 2px) {
+    &:focus-visible {
+        @include focus-outline-styles($offset);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
+@mixin focus-outline-styles($offset: 2px) {
+    outline-offset: $offset;
+
+    animation: focus-outline-shrink 0.3s linear forwards;
+
+    @keyframes focus-outline-shrink {
+        from {
+            outline: 0 solid var(--137C);
+        }
+
+        to {
+            outline: 4px solid var(--137C);
+        }
+    }
+}
+@mixin focus-without-animation($offset: 2px) {
+    outline: 4px solid var(--137C);
+    outline-offset: $offset;
+}
+@mixin resetDefaultButtonStyles {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    text-decoration: none;
+
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+
+    appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &:disabled {
+        color: inherit;
+
+        cursor: auto;
+    }
+}