@skbkontur/react-ui 0.0.0-942b5aade9 → 0.0.0-95a1dbe516

package/components/Link/Link.md

@@ -21,9 +21,14 @@ import { Gapped } from '@skbkontur/react-ui';
 Пример ссылки с иконкой.
 
 ```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
-<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
 ```
 
 Пример ссылок ведущих на внешние ресурсы.
@@ -49,20 +54,20 @@ import { Gapped } from '@skbkontur/react-ui';
 
 Ссылка в состоянии загрузки.
 
-**Поведение**:
-
-Если у ссылки есть иконка, она заменяется на спиннер.
+**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
 const [isLoading, setIsLoading] = React.useState(false);
 
 <Gapped vertical gap={15}>
   <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
   <Gapped gap={20}>
-    <Link loading={isLoading} icon={<OkIcon/>}>С иконкой</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
     <Link loading={isLoading}>Без иконки</Link>
   </Gapped>
 </Gapped>
@@ -86,3 +91,72 @@ import { Link, Gapped } from '@skbkontur/react-ui';
   <Link>Ok</Link>
 </Gapped>
 ```
+
+
+Пример кастомизации ссылки
+
+```jsx harmony
+import { Toast, Button } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  linkLineBorderBottomWidth: '0',
+  linkHoverTextDecoration: 'underline'
+}
+
+const underlineOnHoverStyles = {
+  linkLineBorderBottomColor: 'transparent',
+}
+
+const differentColorStyles = {
+  linkColor: 'blue',
+  linkHoverColor: 'blue',
+  linkActiveColor: 'blue',
+}
+
+const stringify = (styles) => {
+    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+}
+
+const copyStyles = (styles) => {
+  navigator.clipboard.writeText(stringify(styles));
+  Toast.push('Copied');
+}
+
+const tableStyle = {
+  borderCollapse: 'collapse',
+  width: '100%',
+};
+
+const tdStyle = {
+  border: '1px solid',
+  padding: '8px',
+};
+
+const renderExampleRow = (title, styles, index) => {
+    return (
+        <tr>
+          <td style={tdStyle}>{title}</td>
+          <td style={tdStyle}><Link theme={styles}>Link</Link></td>
+          <td style={tdStyle}>
+            <div style={{display: 'flex'}}>
+              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+            </div>
+          </td>
+        </tr>
+    )
+}
+
+<table style={tableStyle}>
+  <tr style={{textAlign: 'left'}}>
+    <th style={tdStyle}></th>
+    <th style={tdStyle}>Пример</th>
+    <th style={tdStyle}>Переменные темы</th>
+  </tr>
+  {renderExampleRow('Ссылка с подчеркиванием через text-decoration', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
+  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
+</table>
+```
+

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

@@ -1,73 +1,104 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+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;
 
-import { css, keyframes, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
-import { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from "../Link.mixins";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { linkDisabledMixin, linkMixin, linkUseColorsMixin, linkUseLineHovered } from "../Link.mixins";
 export var globalClasses = prefix('link')({
+  textWrapper: 'textWrapper',
   text: 'text'
 });
-var line = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n"])));
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: relative;\n    "])), linkMixin(t.linkHoverTextDecoration));
-  },
-  lineRoot: function lineRoot() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n    "])));
-  },
-  lineText: function lineText(t) {
-    var delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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);
-  },
-  lineFocus: function lineFocus(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  lineFocusSuccess: function lineFocusSuccess(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  lineFocusDanger: function lineFocusDanger(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  lineFocusGrayed: function lineFocusGrayed(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  button: function button(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.linkButtonLineHeight, t.linkButtonPaddingX, t.linkButtonPaddingX);
-  },
-  buttonOpened: function buttonOpened(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.btnDefaultActiveBg);
-  },
-  arrow: function arrow() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\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    "])));
-  },
-  useRoot: function useRoot() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      border-bottom-color: currentColor;\n    "])));
-  },
-  useDefault: function useDefault(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  useSuccess: function useSuccess(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  useDanger: function useDanger(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  useGrayed: function useGrayed(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  useGrayedFocus: function useGrayedFocus(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
-  },
-  focus: function focus(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.linkHoverTextDecoration);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
-  },
-  disabledDark22Theme: function disabledDark22Theme(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
-  },
-  icon: function icon(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
-  }
-});
+
+var oldLineText = function oldLineText(t, emotion) {
+  var line = emotion.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n"])));
+  var delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;
+  return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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);
+};
+
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n        position: relative;\n      "])), linkMixin(t.linkHoverTextDecoration));
+    },
+    lineRoot: function lineRoot() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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 emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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 emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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, emotion));
+    },
+    lineTextIE11: function lineTextIE11(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), oldLineText(t, emotion));
+    },
+    lineFocus: function lineFocus(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n\n        .", " {\n          ", "\n        }\n      "])), t.linkHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    lineFocusSuccess: function lineFocusSuccess(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n\n        .", " {\n          ", "\n        }\n      "])), t.linkSuccessHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    lineFocusDanger: function lineFocusDanger(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n\n        .", " {\n          ", "\n        }\n      "])), t.linkDangerHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    lineFocusGrayed: function lineFocusGrayed(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n\n        .", " {\n          ", "\n        }\n      "])), t.linkGrayedHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    button: function button(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        line-height: ", ";\n        padding-left: ", ";\n        padding-right: ", ";\n      "])), t.linkButtonLineHeight, t.linkButtonPaddingX, t.linkButtonPaddingX);
+    },
+    buttonOpened: function buttonOpened(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.btnDefaultActiveBg);
+    },
+    arrow: function arrow() {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\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      "])));
+    },
+    useRoot: function useRoot() {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        border-bottom-color: currentColor;\n      "])));
+    },
+    useDefault: function useDefault(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n        .", " {\n          :hover {\n            ", "\n          }\n        }\n      "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    useSuccess: function useSuccess(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        ", ";\n        .", " {\n          :hover {\n            ", "\n          }\n        }\n      "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    useDanger: function useDanger(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        ", ";\n        .", " {\n          :hover {\n            ", "\n          }\n        }\n      "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    useGrayed: function useGrayed(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        ", ";\n        .", " {\n          :hover {\n            ", "\n          }\n        }\n      "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    useGrayedFocus: function useGrayedFocus(t) {
+      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.linkDisabledColor);
+    },
+    focus: function focus(t) {
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        text-decoration: ", ";\n      "])), t.linkHoverTextDecoration);
+    },
+    focus2022: function focus2022(t) {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        outline: ", ";\n\n        .", " {\n          &,\n          &:hover {\n            ", "\n          }\n        }\n\n        .", " {\n          border-bottom-style: none;\n        }\n      "])), t.linkFocusOutline, globalClasses.text, linkUseLineHovered('none'), globalClasses.textWrapper);
+    },
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        ", ";\n\n        color: ", " !important; // override root color\n\n        &:hover {\n          color: ", ";\n        }\n      "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
+    },
+    disabledDark22Theme: function disabledDark22Theme(t) {
+      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        .", " {\n          ", "\n        }\n      "])), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    },
+    icon: function icon() {
+      return emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n      "])));
+    },
+    iconLeft: function iconLeft(t) {
+      return emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n        margin-right: ", ";\n      "])), t.linkIconMarginRight);
+    },
+    iconRight: function iconRight(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        margin-left: ", ";\n      "])), t.linkIconMarginLeft);
+    }
+  });
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.styles.ts"],"names":["css","keyframes","memoizeStyle","prefix","linkMixin","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","globalClasses","text","line","styles","root","t","linkHoverTextDecoration","lineRoot","lineText","delay","parseFloat","linkLineBorderBottomOpacity","linkLineBorderBottomStyle","linkLineBorderBottomWidth","lineFocus","linkHoverColor","linkLineHoverBorderBottomStyle","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","disabled","disabledDark22Theme","icon","linkIconMarginRight"],"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  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\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    `;\n  },\n\n  lineText(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\n  lineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\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  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  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(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":["memoizeStyle","prefix","linkDisabledMixin","linkMixin","linkUseColorsMixin","linkUseLineHovered","globalClasses","textWrapper","text","oldLineText","t","emotion","line","keyframes","delay","parseFloat","linkLineBorderBottomOpacity","css","linkLineBorderBottomStyle","linkLineBorderBottomWidth","getStyles","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 type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkDisabledMixin, linkMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins';\n\nexport const globalClasses = prefix('link')({\n  textWrapper: 'textWrapper',\n  text: 'text',\n});\n\nconst oldLineText = (t: Theme, emotion: Emotion) => {\n  const line = emotion.keyframes`\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n`;\n  const delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;\n  return emotion.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 getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${linkMixin(t.linkHoverTextDecoration)};\n        position: relative;\n      `;\n    },\n\n    lineRoot() {\n      return emotion.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 emotion.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 emotion.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 emotion.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, emotion)};\n        }\n      `;\n    },\n\n    lineTextIE11(t: Theme) {\n      return emotion.css`\n        ${oldLineText(t, emotion)};\n      `;\n    },\n\n    lineFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.linkHoverColor};\n\n        .${globalClasses.text} {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      `;\n    },\n\n    lineFocusSuccess(t: Theme) {\n      return emotion.css`\n        color: ${t.linkSuccessHoverColor} !important;\n\n        .${globalClasses.text} {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      `;\n    },\n\n    lineFocusDanger(t: Theme) {\n      return emotion.css`\n        color: ${t.linkDangerHoverColor} !important;\n\n        .${globalClasses.text} {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      `;\n    },\n\n    lineFocusGrayed(t: Theme) {\n      return emotion.css`\n        color: ${t.linkGrayedHoverColor} !important;\n\n        .${globalClasses.text} {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      `;\n    },\n\n    button(t: Theme) {\n      return emotion.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 emotion.css`\n        background: ${t.btnDefaultActiveBg};\n      `;\n    },\n\n    arrow() {\n      return emotion.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 emotion.css`\n        border-bottom-color: currentColor;\n      `;\n    },\n\n    useDefault(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n        color: ${t.linkDisabledColor};\n      `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n        text-decoration: ${t.linkHoverTextDecoration};\n      `;\n    },\n\n    focus2022(t: Theme) {\n      return emotion.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 emotion.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 emotion.css`\n        .${globalClasses.text} {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      `;\n    },\n\n    icon() {\n      return emotion.css`\n        display: inline-block;\n      `;\n    },\n\n    iconLeft(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.linkIconMarginRight};\n      `;\n    },\n\n    iconRight(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.linkIconMarginLeft};\n      `;\n    },\n  });\n"]}

package/components/Link/Link.styles.d.ts

@@ -1,11 +1,16 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
+    textWrapper: string;
     text: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
     lineRoot(): string;
+    lineTextWrapper(t: Theme): string;
+    lineTextWrapperFocused(t: Theme): string;
     lineText(t: Theme): string;
+    lineTextIE11(t: Theme): string;
     lineFocus(t: Theme): string;
     lineFocusSuccess(t: Theme): string;
     lineFocusDanger(t: Theme): string;
@@ -20,7 +25,10 @@ export declare const styles: {
     useGrayed(t: Theme): string;
     useGrayedFocus(t: Theme): string;
     focus(t: Theme): string;
+    focus2022(t: Theme): string;
     disabled(t: Theme): string;
     disabledDark22Theme(t: Theme): string;
-    icon(t: Theme): string;
+    icon(): string;
+    iconLeft(t: Theme): string;
+    iconRight(t: Theme): string;
 };

package/components/Link/LinkIcon/LinkIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { Spinner } from "../../Spinner";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../Link.styles";
+export var LinkIcon = function LinkIcon(_ref) {
+  var icon = _ref.icon,
+      loading = _ref.loading,
+      hasBothIcons = _ref.hasBothIcons,
+      position = _ref.position;
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement("span", {
+    className: emotion.cx(styles.icon(), position === 'left' && styles.iconLeft(theme), position === 'right' && styles.iconRight(theme))
+  }, loading && !hasBothIcons ? /*#__PURE__*/React.createElement(Spinner, {
+    caption: null,
+    dimmed: true,
+    inline: true
+  }) : icon);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["LinkIcon.tsx"],"names":["React","useEmotion","Spinner","useTheme","getStyles","LinkIcon","icon","loading","hasBothIcons","position","theme","emotion","styles","cx","iconLeft","iconRight"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,OAAT,QAAwB,YAAxB;AACA,SAASC,QAAT,QAAyB,4BAAzB;;;AAGA,SAASC,SAAT,QAA0B,eAA1B;;;;;;;AAOA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA8D,KAA3DC,IAA2D,QAA3DA,IAA2D,CAArDC,OAAqD,QAArDA,OAAqD,CAA5CC,YAA4C,QAA5CA,YAA4C,CAA9BC,QAA8B,QAA9BA,QAA8B;AACpF,MAAMC,KAAK,GAAGP,QAAQ,EAAtB;AACA,MAAMQ,OAAO,GAAGV,UAAU,EAA1B;AACA,MAAMW,MAAM,GAAGR,SAAS,CAACO,OAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAEA,OAAO,CAACE,EAAR;AACTD,MAAAA,MAAM,CAACN,IAAP,EADS;AAETG,MAAAA,QAAQ,KAAK,MAAb,IAAuBG,MAAM,CAACE,QAAP,CAAgBJ,KAAhB,CAFd;AAGTD,MAAAA,QAAQ,KAAK,OAAb,IAAwBG,MAAM,CAACG,SAAP,CAAiBL,KAAjB,CAHf,CADb;;;AAOGH,IAAAA,OAAO,IAAI,CAACC,YAAZ,gBAA2B,oBAAC,OAAD,IAAS,OAAO,EAAE,IAAlB,EAAwB,MAAM,MAA9B,EAA+B,MAAM,MAArC,GAA3B,GAAsEF,IAPzE,CADF;;;AAWD,CAhBM","sourcesContent":["import React from 'react';\n\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { Spinner } from '../Spinner';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { LinkProps } from './Link';\nimport { getStyles } 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 = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <span\n      className={emotion.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/components/Link/LinkIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Link/LinkIcon.js",
+  "module": "LinkIcon",
+  "types": "../LinkIcon.d.ts",
+  "sideEffects": false
+}

package/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/components/Loader/Loader/Loader.js

@@ -6,20 +6,20 @@ var _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Spinner } from "../../Spinner";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { TaskWithDelayAndMinimalDuration } from "../../../lib/taskWithDelayAndMinimalDuration";
 import { getTabbableElements } from "../../../lib/dom/tabbableHelpers";
 import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { globalThat, renderTarget } from "../../../lib/SSRSafe";
-import { styles } from "../Loader.styles";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Loader.styles";
 var types = ['mini', 'normal', 'big'];
 export var LoaderDataTids = {
   veil: 'Loader__Veil',
@@ -49,7 +49,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     };
 
     _this.checkSpinnerPosition = function () {
-      if (!_this.spinnerContainerNode) {
+      if (!_this.spinnerContainerNode || !isBrowser(globalObject)) {
         return;
       }
 
@@ -61,8 +61,8 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
           containerHeight = _getDOMRect.height,
           containerWidth = _getDOMRect.width;
 
-      var windowHeight = globalThat.innerHeight;
-      var windowWidth = globalThat.innerWidth; // Если контейнер не больше высоты и не шире окна,
+      var windowHeight = globalObject.innerHeight;
+      var windowWidth = globalObject.innerWidth; // Если контейнер не больше высоты и не шире окна,
       // то просто выравниваем по центру
 
       if (windowHeight >= containerHeight && windowWidth >= containerWidth) {
@@ -136,10 +136,12 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     };
 
     _this.enableChildrenFocus = function () {
+      var _globalObject$documen, _globalObject$documen2;
+
       _this.makeUnobservable(); // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers
 
 
-      Array.from(renderTarget.querySelectorAll('[origin-tabindex]')).forEach(function (el) {
+      Array.from((_globalObject$documen = (_globalObject$documen2 = 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');
@@ -150,7 +152,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     _this.makeObservable = function () {
       var target = _this.childrenContainerNode;
 
-      if (!target) {
+      if (!target || !globalObject.MutationObserver) {
         return;
       }
 
@@ -158,7 +160,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
         childList: true,
         subtree: true
       };
-      var observer = new MutationObserver(_this.disableChildrenFocus);
+      var observer = new globalObject.MutationObserver(_this.disableChildrenFocus);
       observer.observe(target, config);
       _this.childrenObserver = observer;
     };
@@ -272,20 +274,24 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx;
+    var _this$emotion$cx;
 
     var _this$props = this.props,
         caption = _this$props.caption,
         component = _this$props.component;
     var type = this.getProps().type;
     var isLoaderActive = this.state.isLoaderActive;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -300,17 +306,18 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
       wrapperRef: this.childrenRef
     }, this.props.children), isLoaderActive && /*#__PURE__*/React.createElement(ZIndex, {
       wrapperRef: this.spinnerRef,
-      className: cx((_cx = {}, _cx[styles.active(this.theme)] = isLoaderActive, _cx))
+      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.active(this.theme)] = isLoaderActive, _this$emotion$cx))
     }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));
   };
 
   _proto.renderSpinner = function renderSpinner(type, caption, component) {
-    var _cx2,
+    var _this$emotion$cx2,
         _this3 = this;
 
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("span", {
       "data-tid": LoaderDataTids.spinner,
-      className: cx(styles.spinnerContainer(), (_cx2 = {}, _cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)),
+      className: this.emotion.cx(styles.spinnerContainer(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _this$emotion$cx2)),
       style: this.state.spinnerStyle
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.spinnerComponentWrapper(),
@@ -324,7 +331,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
   };
 
   return Loader;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.displayName = 'Loader', _class2.defaultProps = {
   type: 'normal',
   active: false,
   delayBeforeSpinnerShow: isTestEnv ? 0 : 300,