@megafon/ui-core 6.2.1 → 7.0.0

package/dist/es/components/TextField/TextField.css

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TextField.less';
+import './TextField.scss';
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -12,7 +12,7 @@ export declare const MinTextareaHeight: {
     readonly ONE_ROW: 24;
     readonly THREE_ROWS: number;
 };
-declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
+type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
 interface IMaskSelection {
     start: number;
     end: number;
@@ -21,7 +21,7 @@ export interface IMaskState {
     value: string;
     selection: IMaskSelection;
 }
-export declare type TextFieldProps = {
+export type TextFieldProps = {
     /** Включить режим textarea. Fixed - это alias для textarea=true. */
     textarea?: boolean | 'fixed' | 'flexible';
     /** Лейбл */