@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/components/Link/Link.d.ts

@@ -1,17 +1,12 @@
 import React, { AriaAttributes } from 'react';
-import PropTypes from 'prop-types';
-import { Override } from '../../typings/utility-types';
+import { PolymorphicPropsWithoutRef } from '../../typings/react-ref';
 import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface LinkProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
+interface LinkInnerProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onBlur' | 'onFocus'> {
     /**
      * Отключенное состояние.
      */
     disabled?: boolean;
-    /**
-     * HTML-атрибут `href`.
-     */
-    href?: string;
     /**
      * Добавляет ссылке иконку слева.
      */
@@ -58,35 +53,41 @@ export interface LinkProps extends Pick<AriaAttributes, 'aria-label'>, CommonPro
      * @ignore
      */
     focused?: boolean;
-}> {
+    /**
+     * Состояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    warning?: boolean;
 }
+declare const LINK_DEFAULT_ELEMENT = "a";
+export declare type LinkProps<C extends React.ElementType = typeof LINK_DEFAULT_ELEMENT> = PolymorphicPropsWithoutRef<LinkInnerProps, C>;
 export interface LinkState {
     focusedByTab: boolean;
 }
 export declare const LinkDataTids: {
     readonly root: "Link__root";
 };
-declare type DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;
 /**
  * Элемент ссылки из HTML.
  */
-export declare class Link extends React.Component<LinkProps, LinkState> {
+export declare class Link<C extends React.ElementType = typeof LINK_DEFAULT_ELEMENT> extends React.Component<LinkProps<C>, LinkState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
-    static propTypes: {
-        disabled: PropTypes.Requireable<boolean>;
-        href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        use: PropTypes.Requireable<string>;
+    static defaultProps: {
+        use: string;
+        as: string;
     };
-    static defaultProps: DefaultProps;
     private getProps;
     state: LinkState;
     private theme;
-    private emotion;
     private setRootNode;
     private linkFocusOutline?;
     render(): JSX.Element;
+    private getTabIndex;
+    private getRel;
     private renderMain;
     private handleFocus;
     private handleBlur;

package/components/Link/Link.md

@@ -159,4 +159,25 @@ const renderExampleRow = (title, styles, index) => {
   {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
 </table>
 ```
+Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`.
 
+Cсылка принимает все пропы переданного в `component` компонента.
+
+Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+
+<Link component='button'>Кнопка, но выглядит как ссылка</Link>
+```
+
+Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+import { Link as RouterLink, BrowserRouter } from 'react-router-dom';
+
+<BrowserRouter>
+  <Link to='/dashboard' component={RouterLink}>react-router-dom link</Link>
+</BrowserRouter>
+```

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

@@ -1,104 +1,111 @@
 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, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+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, _templateObject29, _templateObject30, _templateObject31;
 
-import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
-import { linkDisabledMixin, linkMixin, linkUseColorsMixin, linkUseLineHovered } from "../Link.mixins";
+import { css, keyframes, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { linkMixin, linkDisabledMixin, 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"])));
 
-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 oldLineText = function oldLineText(t) {
   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);
+  return 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);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: relative;\n    "])), linkMixin(t.linkHoverTextDecoration));
+  },
+  lineRoot: function lineRoot() {
+    return 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 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 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 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));
+  },
+  lineTextIE11: function lineTextIE11(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), oldLineText(t));
+  },
+  lineFocus: function lineFocus(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  lineFocusSuccess: function lineFocusSuccess(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  lineFocusDanger: function lineFocusDanger(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  lineFocusGrayed: function lineFocusGrayed(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  button: function button(t) {
+    return 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 css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.btnDefaultActiveBg);
+  },
+  arrow: function arrow() {
+    return 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 css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      border-bottom-color: currentColor;\n      cursor: pointer;\n      position: relative;\n    "])));
+  },
+  useDefault: function useDefault(t) {
+    return 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 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 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 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 css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
+  },
+  focus: function focus(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.linkHoverTextDecoration);
+  },
+  focus2022: function focus2022(t) {
+    return 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 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 css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  icon: function icon() {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  },
+  iconLeft: function iconLeft(t) {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+  },
+  iconRight: function iconRight(t) {
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.linkIconMarginLeft);
+  },
+  outline: function outline(t) {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      position: absolute;\n      box-shadow: none;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      top: -2px;\n    "])), t.btnLinkBorderRadius);
+  },
+  outlineWarning: function outlineWarning(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), t.btnWarningSecondary);
+  },
+  outlineError: function outlineError(t) {
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), t.btnErrorSecondary);
+  }
+});

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["Link.styles.ts"],"names":["css","keyframes","memoizeStyle","prefix","linkMixin","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","globalClasses","textWrapper","text","line","oldLineText","t","delay","parseFloat","linkLineBorderBottomOpacity","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","outline","btnLinkBorderRadius","outlineWarning","btnWarningSecondary","outlineError","btnErrorSecondary"],"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      cursor: pointer;\n      position: relative;\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  outline(t: Theme) {\n    return css`\n      border-radius: ${t.btnLinkBorderRadius};\n      position: absolute;\n      box-shadow: none;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      top: -2px;\n    `;\n  },\n\n  outlineWarning(t: Theme) {\n    return css`\n      background-color: ${t.btnWarningSecondary};\n    `;\n  },\n\n  outlineError(t: Theme) {\n    return css`\n      background-color: ${t.btnErrorSecondary};\n    `;\n  },\n});\n"]}

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

@@ -1,10 +1,9 @@
-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 getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     lineRoot(): string;
     lineTextWrapper(t: Theme): string;
@@ -31,4 +30,7 @@ export declare const getStyles: (emotion: Emotion) => {
     icon(): string;
     iconLeft(t: Theme): string;
     iconRight(t: Theme): string;
+    outline(t: Theme): string;
+    outlineWarning(t: Theme): string;
+    outlineError(t: Theme): string;
 };

package/components/Link/LinkIcon/LinkIcon.js

@@ -1,18 +1,16 @@
-import React from 'react';
-import { useEmotion } from "../../../lib/theming/Emotion";
+import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { Spinner } from "../../Spinner";
-import { useTheme } from "../../../lib/theming/useTheme";
-import { getStyles } from "../Link.styles";
+import { styles } 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);
+  var theme = useContext(ThemeContext);
   return /*#__PURE__*/React.createElement("span", {
-    className: emotion.cx(styles.icon(), position === 'left' && styles.iconLeft(theme), position === 'right' && styles.iconRight(theme))
+    className: cx(styles.icon(), position === 'left' && styles.iconLeft(theme), position === 'right' && styles.iconRight(theme))
   }, loading && !hasBothIcons ? /*#__PURE__*/React.createElement(Spinner, {
     caption: null,
     dimmed: true,

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

@@ -1 +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"]}
+{"version":3,"sources":["LinkIcon.tsx"],"names":["React","useContext","cx","ThemeContext","Spinner","styles","LinkIcon","icon","loading","hasBothIcons","position","theme","iconLeft","iconRight"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,OAAT,QAAwB,YAAxB;;;AAGA,SAASC,MAAT,QAAuB,eAAvB;;;;;;;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,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACXG,MAAAA,MAAM,CAACE,IAAP,EADW;AAEXG,MAAAA,QAAQ,KAAK,MAAb,IAAuBL,MAAM,CAACO,QAAP,CAAgBD,KAAhB,CAFZ;AAGXD,MAAAA,QAAQ,KAAK,OAAb,IAAwBL,MAAM,CAACQ,SAAP,CAAiBF,KAAjB,CAHb,CADf;;;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,CAdM","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/components/Loader/Loader/Loader.js

@@ -9,17 +9,17 @@ 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 { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } 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 { ThemeConsumer } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../Loader.styles";
+import { styles } from "../Loader.styles";
 var types = ['mini', 'normal', 'big'];
 export var LoaderDataTids = {
   veil: 'Loader__Veil',
@@ -274,24 +274,20 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
   _proto.render = function render() {
     var _this2 = this;
 
-    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();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _this$emotion$cx;
+    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;
-    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -306,18 +302,17 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
       wrapperRef: this.childrenRef
     }, this.props.children), isLoaderActive && /*#__PURE__*/React.createElement(ZIndex, {
       wrapperRef: this.spinnerRef,
-      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.active(this.theme)] = isLoaderActive, _this$emotion$cx))
+      className: cx((_cx = {}, _cx[styles.active(this.theme)] = isLoaderActive, _cx))
     }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));
   };
 
   _proto.renderSpinner = function renderSpinner(type, caption, component) {
-    var _this$emotion$cx2,
+    var _cx2,
         _this3 = this;
 
-    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("span", {
       "data-tid": LoaderDataTids.spinner,
-      className: this.emotion.cx(styles.spinnerContainer(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _this$emotion$cx2)),
+      className: cx(styles.spinnerContainer(), (_cx2 = {}, _cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)),
       style: this.state.spinnerStyle
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.spinnerComponentWrapper(),