@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/components/Link/Link.styles.js

@@ -1,18 +1,140 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
-var _Link = require("./Link.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _Link = require("./Link.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+
+var globalClasses = (0, _Emotion.prefix)('link')({
+  textWrapper: 'textWrapper',
+  text: 'text' });exports.globalClasses = globalClasses;
+
+
+var line = (0, _Emotion.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n"])));
+
+
+
+
+
+
+
+
+var oldLineText = function oldLineText(t) {
+  var delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-bottom-style: ", ";\n    border-bottom-width: ", ";\n    animation: ", " 1s linear !important; // override creevey\n    animation-play-state: paused !important;\n    animation-delay: ", "s !important;\n    animation-fill-mode: forwards !important;\n  "])),
+  t.linkLineBorderBottomStyle,
+  t.linkLineBorderBottomWidth,
+  line,
+
+  delay);
+
+
+};
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: relative;\n    "])),
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: relative;\n    "])),
     (0, _Link.linkMixin)(t.linkHoverTextDecoration));
 
 
+  },
+
+  lineRoot: function lineRoot() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .", " {\n        border-bottom-color: currentColor !important;\n      }\n    "])),
+
+
+
+    globalClasses.text);
+
+
+
+  },
+
+  lineTextWrapper: function lineTextWrapper(t) {
+    // При hover'е подчеркивание из прозрачного переходит в currentColor.
+    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)
+    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.
+
+    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.
+    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      @supports (border-bottom-color: ", ") {\n        transition: border-bottom-color ", " ", ";\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: transparent;\n      }\n    "])),
+    t.linkLineBorderBottomColor,
+    t.transitionDuration, t.transitionTimingFunction,
+    t.linkLineBorderBottomStyle,
+    t.linkLineBorderBottomWidth);
+
+
+
+  },
+
+  lineTextWrapperFocused: function lineTextWrapperFocused(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-color: currentColor;\n        border-bottom-style: ", ";\n      }\n    "])),
+    t.linkLineBorderBottomColor,
+
+    t.linkLineHoverBorderBottomStyle);
+
+
+  },
+
+  lineText: function lineText(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: ", ";\n      }\n      @supports not (border-bottom-color: ", ") {\n        ", ";\n      }\n    "])),
+    t.linkLineBorderBottomColor,
+    t.linkLineBorderBottomStyle,
+    t.linkLineBorderBottomWidth,
+    t.linkLineBorderBottomColor,
+
+    t.linkLineBorderBottomColor,
+    oldLineText(t));
+
+
+  },
+
+  lineTextIE11: function lineTextIE11(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    oldLineText(t));
+
+  },
+
+  lineFocus: function lineFocus(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n\n      .", " {\n        ", "\n      }\n    "])),
+    t.linkHoverColor,
+
+    globalClasses.text,
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
+  },
+
+  lineFocusSuccess: function lineFocusSuccess(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])),
+    t.linkSuccessHoverColor,
+
+    globalClasses.text,
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
+  },
+
+  lineFocusDanger: function lineFocusDanger(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])),
+    t.linkDangerHoverColor,
+
+    globalClasses.text,
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
+  },
+
+  lineFocusGrayed: function lineFocusGrayed(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])),
+    t.linkGrayedHoverColor,
+
+    globalClasses.text,
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
   },
 
   button: function button(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])),
 
     t.linkButtonLineHeight,
     t.linkButtonPaddingX,
@@ -21,13 +143,13 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   buttonOpened: function buttonOpened(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
     t.btnDefaultActiveBg);
 
   },
 
   arrow: function arrow() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
 
 
 
@@ -36,46 +158,89 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
+  },
+
+  useRoot: function useRoot() {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom-color: currentColor;\n    "])));
+
+
   },
 
   useDefault: function useDefault(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Link.linkUseColorsMixin)(t.linkColor, t.linkHoverColor, t.linkActiveColor));
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkColor, t.linkHoverColor, t.linkActiveColor),
+    globalClasses.text,
+
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
 
   },
 
   useSuccess: function useSuccess(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Link.linkUseColorsMixin)(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor));
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor),
+    globalClasses.text,
+
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
 
   },
 
   useDanger: function useDanger(t) {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Link.linkUseColorsMixin)(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor));
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor),
+    globalClasses.text,
+
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
 
   },
 
   useGrayed: function useGrayed(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Link.linkUseColorsMixin)(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor));
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor),
+    globalClasses.text,
+
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
 
   },
 
   useGrayedFocus: function useGrayedFocus(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
     t.linkDisabledColor);
 
   },
 
   focus: function focus(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: ", ";\n    "])),
     t.linkHoverTextDecoration);
 
+  },
+
+  focus2022: function focus2022(t) {
+    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n      outline: ", ";\n\n      .", " {\n        &,\n        &:hover {\n          ", "\n        }\n      }\n\n      .", " {\n        border-bottom-style: none;\n      }\n    "])),
+    t.linkFocusOutline,
+
+    globalClasses.text,
+
+
+    (0, _Link.linkUseLineHovered)('none'),
+
+
+
+    globalClasses.textWrapper);
+
+
+
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])),
     (0, _Link.linkDisabledMixin)(),
 
     t.linkDisabledColor,
@@ -86,9 +251,28 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  icon: function icon(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      margin-right: ", ";\n    "])),
+  disabledDark22Theme: function disabledDark22Theme(t) {
+    return (0, _Emotion.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteralLoose2.default)(["\n      .", " {\n        ", "\n      }\n    "])),
+    globalClasses.text,
+    (0, _Link.linkUseLineHovered)(t.linkLineHoverBorderBottomStyle));
+
+
+  },
+
+  icon: function icon() {
+    return (0, _Emotion.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
+
+  },
+
+  iconLeft: function iconLeft(t) {
+    return (0, _Emotion.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n    "])),
     t.linkIconMarginRight);
 
+  },
+
+  iconRight: function iconRight(t) {
+    return (0, _Emotion.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n    "])),
+    t.linkIconMarginLeft);
+
   } });exports.styles = styles;

package/cjs/components/Link/Link.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.styles.ts"],"names":["styles","root","t","css","linkHoverTextDecoration","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","btnDefaultActiveBg","arrow","useDefault","linkColor","linkHoverColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","useGrayed","linkDisabledColor","useGrayedFocus","focus","disabled","icon","linkIconMarginRight"],"mappings":"4QAAA;;;AAGA,qC;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACI,yBAAUD,CAAC,CAACE,uBAAZ,CADJ;;;AAID,GANgC;;AAQjCC,EAAAA,MARiC,kBAQ1BH,CAR0B,EAQhB;AACf,eAAOC,YAAP;;AAEiBD,IAAAA,CAAC,CAACI,oBAFnB;AAGkBJ,IAAAA,CAAC,CAACK,kBAHpB;AAImBL,IAAAA,CAAC,CAACK,kBAJrB;;AAMD,GAfgC;;AAiBjCC,EAAAA,YAjBiC,wBAiBpBN,CAjBoB,EAiBV;AACrB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACO,kBADlB;;AAGD,GArBgC;;AAuBjCC,EAAAA,KAvBiC,mBAuBzB;AACN,eAAOP,YAAP;;;;;;;;;AASD,GAjCgC;;AAmCjCQ,EAAAA,UAnCiC,sBAmCtBT,CAnCsB,EAmCZ;AACnB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACU,SAArB,EAAgCV,CAAC,CAACW,cAAlC,EAAkDX,CAAC,CAACY,eAApD,CADJ;;AAGD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBb,CAzCsB,EAyCZ;AACnB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACc,gBAArB,EAAuCd,CAAC,CAACe,qBAAzC,EAAgEf,CAAC,CAACgB,sBAAlE,CADJ;;AAGD,GA7CgC;;AA+CjCC,EAAAA,SA/CiC,qBA+CvBjB,CA/CuB,EA+Cb;AAClB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACkB,eAArB,EAAsClB,CAAC,CAACmB,oBAAxC,EAA8DnB,CAAC,CAACoB,qBAAhE,CADJ;;AAGD,GAnDgC;;AAqDjCC,EAAAA,SArDiC,qBAqDvBrB,CArDuB,EAqDb;AAClB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACsB,iBAArB,EAAwCtB,CAAC,CAACsB,iBAA1C,EAA6DtB,CAAC,CAACsB,iBAA/D,CADJ;;AAGD,GAzDgC;;AA2DjCC,EAAAA,cA3DiC,0BA2DlBvB,CA3DkB,EA2DR;AACvB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACsB,iBADb;;AAGD,GA/DgC;;AAiEjCE,EAAAA,KAjEiC,iBAiE3BxB,CAjE2B,EAiEjB;AACd,eAAOC,YAAP;AACqBD,IAAAA,CAAC,CAACE,uBADvB;;AAGD,GArEgC;;AAuEjCuB,EAAAA,QAvEiC,oBAuExBzB,CAvEwB,EAuEd;AACjB,eAAOC,YAAP;AACI,kCADJ;;AAGWD,IAAAA,CAAC,CAACsB,iBAHb;;;AAMatB,IAAAA,CAAC,CAACsB,iBANf;;;AASD,GAjFgC;;AAmFjCI,EAAAA,IAnFiC,gBAmF5B1B,CAnF4B,EAmFlB;AACb,eAAOC,YAAP;;AAEkBD,IAAAA,CAAC,CAAC2B,mBAFpB;;AAID,GAxFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\n    `;\n  },\n\n  button(t: Theme) {\n    return css`\n      display: inline-block;\n      line-height: ${t.linkButtonLineHeight};\n      padding-left: ${t.linkButtonPaddingX};\n      padding-right: ${t.linkButtonPaddingX};\n    `;\n  },\n\n  buttonOpened(t: Theme) {\n    return css`\n      background: ${t.btnDefaultActiveBg};\n    `;\n  },\n\n  arrow() {\n    return css`\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    `;\n  },\n\n  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor)};\n    `;\n  },\n\n  useGrayedFocus(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor};\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      display: inline-block;\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Link.styles.ts"],"names":["globalClasses","textWrapper","text","line","keyframes","oldLineText","t","delay","parseFloat","linkLineBorderBottomOpacity","css","linkLineBorderBottomStyle","linkLineBorderBottomWidth","styles","root","linkHoverTextDecoration","lineRoot","lineTextWrapper","linkLineBorderBottomColor","transitionDuration","transitionTimingFunction","lineTextWrapperFocused","linkLineHoverBorderBottomStyle","lineText","lineTextIE11","lineFocus","linkHoverColor","lineFocusSuccess","linkSuccessHoverColor","lineFocusDanger","linkDangerHoverColor","lineFocusGrayed","linkGrayedHoverColor","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","btnDefaultActiveBg","arrow","useRoot","useDefault","linkColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerActiveColor","useGrayed","linkGrayedColor","linkGrayedActiveColor","useGrayedFocus","linkDisabledColor","focus","focus2022","linkFocusOutline","disabled","disabledDark22Theme","icon","iconLeft","linkIconMarginRight","iconRight","linkIconMarginLeft"],"mappings":"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","sourcesContent":["import { css, keyframes, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins';\n\nexport const globalClasses = prefix('link')({\n  textWrapper: 'textWrapper',\n  text: 'text',\n});\n\nconst line = keyframes`\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n`;\n\nconst oldLineText = function (t: Theme) {\n  const delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;\n  return css`\n    border-bottom-style: ${t.linkLineBorderBottomStyle};\n    border-bottom-width: ${t.linkLineBorderBottomWidth};\n    animation: ${line} 1s linear !important; // override creevey\n    animation-play-state: paused !important;\n    animation-delay: ${delay}s !important;\n    animation-fill-mode: forwards !important;\n  `;\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\n    `;\n  },\n\n  lineRoot() {\n    return css`\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .${globalClasses.text} {\n        border-bottom-color: currentColor !important;\n      }\n    `;\n  },\n\n  lineTextWrapper(t: Theme) {\n    // При hover'е подчеркивание из прозрачного переходит в currentColor.\n    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)\n    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.\n\n    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.\n    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        transition: border-bottom-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  lineTextWrapperFocused(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-color: currentColor;\n        border-bottom-style: ${t.linkLineHoverBorderBottomStyle};\n      }\n    `;\n  },\n\n  lineText(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: ${t.linkLineBorderBottomColor};\n      }\n      @supports not (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        ${oldLineText(t)};\n      }\n    `;\n  },\n\n  lineTextIE11(t: Theme) {\n    return css`\n      ${oldLineText(t)};\n    `;\n  },\n\n  lineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\n\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  button(t: Theme) {\n    return css`\n      display: inline-block;\n      line-height: ${t.linkButtonLineHeight};\n      padding-left: ${t.linkButtonPaddingX};\n      padding-right: ${t.linkButtonPaddingX};\n    `;\n  },\n\n  buttonOpened(t: Theme) {\n    return css`\n      background: ${t.btnDefaultActiveBg};\n    `;\n  },\n\n  arrow() {\n    return css`\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    `;\n  },\n\n  useRoot() {\n    return css`\n      border-bottom-color: currentColor;\n    `;\n  },\n\n  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayedFocus(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  focus2022(t: Theme) {\n    return css`\n      outline: ${t.linkFocusOutline};\n\n      .${globalClasses.text} {\n        &,\n        &:hover {\n          ${linkUseLineHovered('none')}\n        }\n      }\n\n      .${globalClasses.textWrapper} {\n        border-bottom-style: none;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor} !important; // override root color\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  disabledDark22Theme(t: Theme) {\n    return css`\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  icon() {\n    return css`\n      display: inline-block;\n    `;\n  },\n\n  iconLeft(t: Theme) {\n    return css`\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n\n  iconRight(t: Theme) {\n    return css`\n      margin-left: ${t.linkIconMarginLeft};\n    `;\n  },\n});\n"]}

package/cjs/components/Link/LinkIcon.d.ts

@@ -0,0 +1,6 @@
+import { LinkProps } from './Link';
+export interface LinkIconProps extends Pick<LinkProps, 'icon' | 'loading'> {
+    position?: 'left' | 'right';
+    hasBothIcons?: boolean;
+}
+export declare const LinkIcon: ({ icon, loading, hasBothIcons, position }: LinkIconProps) => JSX.Element;

package/cjs/components/Link/LinkIcon.js

@@ -0,0 +1,29 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.LinkIcon = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Spinner = require("../Spinner");
+
+
+var _Link = require("./Link.styles");
+
+
+
+
+
+
+var LinkIcon = function LinkIcon(_ref) {var icon = _ref.icon,loading = _ref.loading,hasBothIcons = _ref.hasBothIcons,position = _ref.position;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("span", {
+      className: (0, _Emotion.cx)(
+      _Link.styles.icon(),
+      position === 'left' && _Link.styles.iconLeft(theme),
+      position === 'right' && _Link.styles.iconRight(theme)) },
+
+
+    loading && !hasBothIcons ? /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, inline: true }) : icon));
+
+
+};exports.LinkIcon = LinkIcon;

package/cjs/components/Link/LinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LinkIcon.tsx"],"names":["LinkIcon","icon","loading","hasBothIcons","position","theme","ThemeContext","styles","iconLeft","iconRight"],"mappings":"gKAAA;;AAEA;AACA;AACA;;;AAGA;;;;;;;AAOO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAA8D,KAA3DC,IAA2D,QAA3DA,IAA2D,CAArDC,OAAqD,QAArDA,OAAqD,CAA5CC,YAA4C,QAA5CA,YAA4C,CAA9BC,QAA8B,QAA9BA,QAA8B;AACpF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACTC,mBAAON,IAAP,EADS;AAETG,MAAAA,QAAQ,KAAK,MAAb,IAAuBG,aAAOC,QAAP,CAAgBH,KAAhB,CAFd;AAGTD,MAAAA,QAAQ,KAAK,OAAb,IAAwBG,aAAOE,SAAP,CAAiBJ,KAAjB,CAHf,CADb;;;AAOGH,IAAAA,OAAO,IAAI,CAACC,YAAZ,gBAA2B,6BAAC,gBAAD,IAAS,OAAO,EAAE,IAAlB,EAAwB,MAAM,MAA9B,EAA+B,MAAM,MAArC,GAA3B,GAAsEF,IAPzE,CADF;;;AAWD,CAdM,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\n\nimport { LinkProps } from './Link';\nimport { styles } from './Link.styles';\n\nexport interface LinkIconProps extends Pick<LinkProps, 'icon' | 'loading'> {\n  position?: 'left' | 'right';\n  hasBothIcons?: boolean;\n}\n\nexport const LinkIcon = ({ icon, loading, hasBothIcons, position }: LinkIconProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <span\n      className={cx(\n        styles.icon(),\n        position === 'left' && styles.iconLeft(theme),\n        position === 'right' && styles.iconRight(theme),\n      )}\n    >\n      {loading && !hasBothIcons ? <Spinner caption={null} dimmed inline /> : icon}\n    </span>\n  );\n};\n"]}

package/cjs/components/Loader/Loader.d.ts

@@ -1,44 +1,63 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { AnyObject } from '../../lib/utils';
 import { SpinnerProps } from '../Spinner';
 import { CommonProps } from '../../internal/CommonWrapper';
+declare const types: readonly ["mini", "normal", "big"];
+export declare type LoaderType = typeof types[number];
 export interface LoaderProps extends CommonProps {
     children?: React.ReactNode;
     /**
      * Флаг переключения состояния лоадера
      * @default false
      */
-    active: boolean;
+    active?: boolean;
+    /**
+     * Подпись под спиннером
+     */
     caption?: SpinnerProps['caption'];
     /**
      * Компонент заменяющий спиннер.
      */
     component?: React.ReactNode;
-    className?: string;
-    type?: 'mini' | 'normal' | 'big';
+    /**
+     * Размер спиннера и текста
+     *
+     * @default normal
+     */
+    type?: LoaderType;
     /**
      * Время в миллисекундах для показа вуали без спиннера.
      * @default 300
      */
-    delayBeforeSpinnerShow: number;
+    delayBeforeSpinnerShow?: number;
     /**
      * Минимальное время в миллисекундах для показа спиннера
      * @default 1000
      */
-    minimalDelayBeforeSpinnerHide: number;
+    minimalDelayBeforeSpinnerHide?: number;
 }
 export interface LoaderState {
     isStickySpinner: boolean;
     isSpinnerVisible: boolean;
     isLoaderActive: boolean;
-    spinnerStyle?: object;
+    spinnerStyle?: AnyObject;
 }
+export declare const LoaderDataTids: {
+    readonly veil: "Loader__Veil";
+    readonly spinner: "Loader__Spinner";
+};
+declare type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
 /**
- * DRAFT - лоадер-контейнер
+ * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+ *
+ * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
  */
 export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<LoaderProps>;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
     static propTypes: {
         /**
          * показываем лоадер или нет
@@ -59,10 +78,8 @@ export declare class Loader extends React.Component<LoaderProps, LoaderState> {
          * Тип спиннера: mini, normal, big
          *
          * @default  normal
-         *
-         * Spinner.types - все доступные типы
          */
-        type: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<"big" | "normal" | "mini">;
         /**
          * Время в миллисекундах для показа вуали без спиннера.
          * @default 300
@@ -98,3 +115,4 @@ export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     private makeObservable;
     private makeUnobservable;
 }
+export {};

package/cjs/components/Loader/Loader.js

@@ -1,6 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Loader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.LoaderDataTids = exports.Loader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _Spinner = require("../Spinner");
@@ -15,8 +17,19 @@ var _taskWithDelayAndMinimalDuration = require("../../lib/taskWithDelayAndMinima
 var _tabbableHelpers = require("../../lib/dom/tabbableHelpers");
 var _rootNode = require("../../lib/rootNode");
 var _getDOMRect2 = require("../../lib/dom/getDOMRect");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Loader = require("./Loader.styles");var _class, _class2, _temp;
+
+var types = ['mini', 'normal', 'big'];
+
+
+
+
+
+
+
 
-var _Loader = require("./Loader.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 
 
@@ -45,6 +58,16 @@ var _Loader = require("./Loader.styles");var _class, _class2, _temp;function _ge
 
 
 
+
+
+
+
+
+
+
+var LoaderDataTids = {
+  veil: 'Loader__Veil',
+  spinner: 'Loader__Spinner' };exports.LoaderDataTids = LoaderDataTids;
 
 
 
@@ -52,7 +75,9 @@ var _Loader = require("./Loader.styles");var _class, _class2, _temp;function _ge
 
 
 /**
- * DRAFT - лоадер-контейнер
+ * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+ *
+ * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
  */var
 
 Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Loader, _React$Component);
@@ -112,10 +137,12 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+
 
 
   function Loader(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.
+    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Loader.defaultProps);_this.
+
 
 
 
@@ -271,7 +298,7 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
     checkSpinnerPosition = function () {
-      if (!_this.spinnerContainerNode) {
+      if (!_this.spinnerContainerNode || !(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
         return;
       }
 
@@ -284,8 +311,8 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
       (0, _getDOMRect2.getDOMRect)(_this.spinnerContainerNode),containerTop = _getDOMRect.top,containerRight = _getDOMRect.right,containerBottom = _getDOMRect.bottom,containerLeft = _getDOMRect.left,containerHeight = _getDOMRect.height,containerWidth = _getDOMRect.width;
 
-      var windowHeight = window.innerHeight;
-      var windowWidth = window.innerWidth;
+      var windowHeight = _globalObject.globalObject.innerHeight;
+      var windowWidth = _globalObject.globalObject.innerWidth;
 
       // Если контейнер не больше высоты и не шире окна,
       // то просто выравниваем по центру
@@ -363,10 +390,10 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       });
     };_this.
 
-    enableChildrenFocus = function () {
+    enableChildrenFocus = function () {var _globalObject$documen, _globalObject$documen2;
       _this.makeUnobservable();
       // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers
-      Array.from(document.querySelectorAll('[origin-tabindex]')).forEach(function (el) {var _el$getAttribute;
+      Array.from((_globalObject$documen = (_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.querySelectorAll('[origin-tabindex]')) != null ? _globalObject$documen : []).forEach(function (el) {var _el$getAttribute;
         el.setAttribute('tabindex', (_el$getAttribute = el.getAttribute('origin-tabindex')) != null ? _el$getAttribute : '0');
         el.removeAttribute('origin-tabindex');
       });
@@ -374,14 +401,14 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
     makeObservable = function () {
       var target = _this.childrenContainerNode;
-      if (!target) {
+      if (!target || !_globalObject.globalObject.MutationObserver) {
         return;
       }
       var config = {
         childList: true,
         subtree: true };
 
-      var observer = new MutationObserver(_this.disableChildrenFocus);
+      var observer = new _globalObject.globalObject.MutationObserver(_this.disableChildrenFocus);
       observer.observe(target, config);
       _this.childrenObserver = observer;
     };_this.
@@ -389,7 +416,7 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
     makeUnobservable = function () {var _this$childrenObserve;
       (_this$childrenObserve = _this.childrenObserver) == null ? void 0 : _this$childrenObserve.disconnect();
       _this.childrenObserver = null;
-    };_this.spinnerContainerNode = null;_this.childrenContainerNode = null;_this.childrenObserver = null;_this.spinnerNode = null;_this.state = { isStickySpinner: false, isSpinnerVisible: false, isLoaderActive: false };_this.spinnerTask = new _taskWithDelayAndMinimalDuration.TaskWithDelayAndMinimalDuration({ delayBeforeTaskStart: _this.props.delayBeforeSpinnerShow, durationOfTask: _this.props.minimalDelayBeforeSpinnerHide, taskStartCallback: function taskStartCallback() {return _this.setState({ isSpinnerVisible: true });}, taskStopCallback: function taskStopCallback() {return _this.setState({ isSpinnerVisible: false });} });return _this;}var _proto = Loader.prototype;_proto.componentDidMount = function componentDidMount() {this.checkSpinnerPosition();this.props.active && this.spinnerTask.start();this.layoutEvents = LayoutEvents.addListener((0, _lodash.default)(this.checkSpinnerPosition, 10));if (this.props.active) {this.disableChildrenFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var _this$props = this.props,component = _this$props.component,active = _this$props.active,delayBeforeSpinnerShow = _this$props.delayBeforeSpinnerShow,minimalDelayBeforeSpinnerHide = _this$props.minimalDelayBeforeSpinnerHide;var isLoaderActive = this.state.isLoaderActive;if (active && !prevProps.active || prevProps.component !== component) {this.checkSpinnerPosition();}if (delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow || minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide) {this.spinnerTask.update({ delayBeforeTaskStart: delayBeforeSpinnerShow, durationOfTask: minimalDelayBeforeSpinnerHide });}if (active !== prevProps.active) {active ? this.spinnerTask.start() : this.spinnerTask.stop();}if (isLoaderActive !== prevState.isLoaderActive) {if (isLoaderActive) {this.disableChildrenFocus();} else {this.enableChildrenFocus();}}};_proto.componentWillUnmount = function componentWillUnmount() {this.makeUnobservable();if (this.layoutEvents) {this.layoutEvents.remove();}this.spinnerTask.clearTask();};Loader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (props.active && !state.isLoaderActive) {return { isLoaderActive: true };}if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {return { isLoaderActive: false };}return state;};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx;var _this$props2 = this.props,type = _this$props2.type,caption = _this$props2.caption,component = _this$props2.component;var isLoaderActive = this.state.isLoaderActive;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.loader(), "data-tid": isLoaderActive ? 'Loader__Veil' : '' }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Loader', applyZIndex: isLoaderActive, coverChildren: isLoaderActive, style: { height: '100%' }, wrapperRef: this.childrenRef }, this.props.children), isLoaderActive && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: this.spinnerRef, priority: 'Loader', className: (0, _Emotion.cx)((_cx = {}, _cx[_Loader.styles.active(this.theme)] = isLoaderActive, _cx)) }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));};_proto.renderSpinner = function renderSpinner(type, caption, component) {var _cx2,_this3 = this;return /*#__PURE__*/_react.default.createElement("span", { "data-tid": 'Loader__Spinner', className: (0, _Emotion.cx)(_Loader.styles.spinnerContainer(), (_cx2 = {}, _cx2[_Loader.styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)), style: this.state.spinnerStyle }, /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.spinnerComponentWrapper(), ref: function ref(element) {_this3.spinnerNode = element;} }, component !== undefined ? component : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: type, caption: caption })));};return Loader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.defaultProps = { type: _Spinner.Spinner.Types.normal, active: false, delayBeforeSpinnerShow: _currentEnvironment.isTestEnv ? 0 : 300, minimalDelayBeforeSpinnerHide: _currentEnvironment.isTestEnv ? 0 : 1000 }, _class2.propTypes = { /**
+    };_this.spinnerContainerNode = null;_this.childrenContainerNode = null;_this.childrenObserver = null;_this.spinnerNode = null;_this.state = { isStickySpinner: false, isSpinnerVisible: false, isLoaderActive: false };_this.spinnerTask = new _taskWithDelayAndMinimalDuration.TaskWithDelayAndMinimalDuration({ delayBeforeTaskStart: _this.getProps().delayBeforeSpinnerShow, durationOfTask: _this.getProps().minimalDelayBeforeSpinnerHide, taskStartCallback: function taskStartCallback() {return _this.setState({ isSpinnerVisible: true });}, taskStopCallback: function taskStopCallback() {return _this.setState({ isSpinnerVisible: false });} });return _this;}var _proto = Loader.prototype;_proto.componentDidMount = function componentDidMount() {var active = this.getProps().active;this.checkSpinnerPosition();active && this.spinnerTask.start();this.layoutEvents = LayoutEvents.addListener((0, _lodash.default)(this.checkSpinnerPosition, 10));if (active) {this.disableChildrenFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var component = this.props.component;var _this$getProps = this.getProps(),active = _this$getProps.active,delayBeforeSpinnerShow = _this$getProps.delayBeforeSpinnerShow,minimalDelayBeforeSpinnerHide = _this$getProps.minimalDelayBeforeSpinnerHide;var isLoaderActive = this.state.isLoaderActive;if (active && !prevProps.active || prevProps.component !== component) {this.checkSpinnerPosition();}if (delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow || minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide) {this.spinnerTask.update({ delayBeforeTaskStart: delayBeforeSpinnerShow, durationOfTask: minimalDelayBeforeSpinnerHide });}if (active !== prevProps.active) {active ? this.spinnerTask.start() : this.spinnerTask.stop();}if (isLoaderActive !== prevState.isLoaderActive) {if (isLoaderActive) {this.disableChildrenFocus();} else {this.enableChildrenFocus();}}};_proto.componentWillUnmount = function componentWillUnmount() {this.makeUnobservable();if (this.layoutEvents) {this.layoutEvents.remove();}this.spinnerTask.clearTask();};Loader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (props.active && !state.isLoaderActive) {return { isLoaderActive: true };}if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {return { isLoaderActive: false };}return state;};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,caption = _this$props.caption,component = _this$props.component;var type = this.getProps().type;var isLoaderActive = this.state.isLoaderActive;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.loader(), "data-tid": isLoaderActive ? LoaderDataTids.veil : '' }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { applyZIndex: isLoaderActive, coverChildren: isLoaderActive, style: { height: '100%' }, wrapperRef: this.childrenRef }, this.props.children), isLoaderActive && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: this.spinnerRef, className: (0, _Emotion.cx)((_cx = {}, _cx[_Loader.styles.active(this.theme)] = isLoaderActive, _cx)) }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));};_proto.renderSpinner = function renderSpinner(type, caption, component) {var _cx2,_this3 = this;return /*#__PURE__*/_react.default.createElement("span", { "data-tid": LoaderDataTids.spinner, className: (0, _Emotion.cx)(_Loader.styles.spinnerContainer(), (_cx2 = {}, _cx2[_Loader.styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)), style: this.state.spinnerStyle }, /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.spinnerComponentWrapper(), ref: function ref(element) {_this3.spinnerNode = element;} }, component !== undefined ? component : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: type, caption: caption })));};return Loader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.displayName = 'Loader', _class2.defaultProps = { type: 'normal', active: false, delayBeforeSpinnerShow: _currentEnvironment.isTestEnv ? 0 : 300, minimalDelayBeforeSpinnerHide: _currentEnvironment.isTestEnv ? 0 : 1000 }, _class2.propTypes = { /**
    * показываем лоадер или нет
    */active: _propTypes.default.bool, /**
    * Текст рядом с лоадером.
@@ -401,9 +428,7 @@ Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
    * Тип спиннера: mini, normal, big
    *
    * @default  normal
-   *
-   * Spinner.types - все доступные типы
-   */type: _propTypes.default.oneOf(Object.keys(_Spinner.Spinner.Types)), /**
+   */type: _propTypes.default.oneOf(types), /**
    * Время в миллисекундах для показа вуали без спиннера.
    * @default 300
    */delayBeforeSpinnerShow: _propTypes.default.number, /**