@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RenderEnvironmentContext","_Mixins","_keyListener","_ThemeContext","_utils","_CommonWrapper","_rootNode","_createPropsGetter","_ThemeFactory","_getVisualStateDataAttributes","_Link2","_LinkIcon","_excluded","_class","_Link","LINK_DEFAULT_COMPONENT","LinkDataTids","exports","root","Link","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","isExternalLink","globalObject","undefined","renderMain","_this$cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose2","default","arrow","createElement","className","styles","isFocused","leftIconElement","LinkIcon","position","rightIconElement","hasBothIcons","getUseStyles","danger","success","grayed","getUseLineFocusStyles","lineFocus","lineFocusDanger","lineFocusSuccess","lineFocusGrayed","rootProps","_extends2","cx","resetButton","emotion","focus","useGrayedFocus","button","buttonOpened","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","getVisualStateDataAttributes","children","requestAnimationFrame","keyListener","isTabPressed","setState","event","_this$props2","preventDefault","stopPropagation","_inheritsLoose2","_proto","prototype","componentDidMount","KeyListener","render","_this2","RenderEnvironmentContext","Consumer","_ref2","getStyles","ThemeContext","ThemeFactory","create","CommonWrapper","rootNodeRef","setRootNode","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport type { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\nimport { KeyListener } from '../../lib/events/keyListener';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { getStyles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkInnerProps extends CommonProps {\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Добавляет иконку слева. */\n  icon?: React.ReactElement;\n\n  /** Добавляет иконку справа. */\n  rightIcon?: React.ReactElement;\n\n  /** Задает тему ссылки. */\n  use?: 'default' | 'success' | 'danger' | 'grayed';\n\n  /** @ignore */\n  _button?: boolean;\n\n  /** @ignore */\n  _buttonOpened?: boolean;\n\n  /** Задает HTML-атрибут `tabindex`. */\n  tabIndex?: number;\n\n  /** Переводит кнопку в состояние загрузки. */\n  loading?: boolean;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n\n  /** Задает состояние фокуса.\n   * @ignore */\n  focused?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = PolymorphicPropsWithoutRef<\n  LinkInnerProps,\n  C\n>;\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n  root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> extends React.Component<\n  LinkProps<C>,\n  LinkState\n> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n  public static displayName = 'Link';\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    component: LINK_DEFAULT_COMPONENT,\n  };\n\n  private getProps = createPropsGetter(Link.defaultProps);\n\n  public state: LinkState = {\n    focusedByTab: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private cx!: Emotion['cx'];\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n  }\n\n  public render(): JSX.Element {\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.emotion = emotion;\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n                    {this.renderMain}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.Consumer>\n    );\n  }\n\n  private getTabIndex = ({\n    nonInteractive,\n    tabIndex = 0,\n  }: {\n    nonInteractive: boolean | undefined;\n    tabIndex: number | undefined;\n  }) => {\n    return nonInteractive ? -1 : tabIndex;\n  };\n\n  private getRel = () => {\n    if (isAnchorProps(this.props)) {\n      const { rel, href } = this.props;\n      if (!rel && href) {\n        return `noopener${isExternalLink(href, this.globalObject) ? ' noreferrer' : ''}`;\n      }\n      return rel;\n    }\n\n    return undefined;\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      component: Root,\n      focused = false,\n      error,\n      warning,\n      tabIndex,\n      theme,\n      ...rest\n    } = props;\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={this.styles.arrow()} />;\n    }\n\n    const isFocused = !disabled && (this.state.focusedByTab || focused);\n\n    const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n    const rightIconElement = rightIcon && (\n      <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n    );\n    const nonInteractive = disabled || loading;\n    const getUseStyles = () => {\n      switch (use) {\n        case 'default':\n          return this.styles.default(this.theme);\n        case 'danger':\n          return this.styles.danger(this.theme);\n        case 'success':\n          return this.styles.success(this.theme);\n        case 'grayed':\n          return this.styles.grayed(this.theme);\n      }\n    };\n    const getUseLineFocusStyles = () => {\n      switch (use) {\n        case 'default':\n          return this.styles.lineFocus(this.theme);\n        case 'danger':\n          return this.styles.lineFocusDanger(this.theme);\n        case 'success':\n          return this.styles.lineFocusSuccess(this.theme);\n        case 'grayed':\n          return this.styles.lineFocusGrayed(this.theme);\n      }\n    };\n    const rootProps = {\n      ...rest,\n      className: this.cx({\n        [this.styles.root(this.theme)]: true,\n        [resetButton(this.emotion)]: Root === 'button',\n        [this.styles.focus(this.theme)]: isFocused,\n        [this.styles.disabled(this.theme)]: disabled || loading,\n        [getUseStyles()]: true,\n        [this.styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [this.styles.button(this.theme)]: !!_button,\n        [this.styles.buttonOpened(this.theme)]: !!_buttonOpened,\n        [this.styles.warning(this.theme)]: warning,\n        [this.styles.error(this.theme)]: error,\n        [getUseLineFocusStyles()]: isFocused,\n      }),\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n      rel: this.getRel(),\n    };\n\n    return (\n      <Root data-tid={LinkDataTids.root} {...rootProps} {...getVisualStateDataAttributes({ disabled })}>\n        {leftIconElement}\n        {this.props.children}\n        {rightIconElement}\n        {arrow}\n      </Root>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleClick = (event: React.MouseEvent) => {\n    const { onClick, disabled, loading } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n  return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Mixins","_keyListener","_ThemeContext","_utils","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_ThemeFactory","_getVisualStateDataAttributes","_Link2","_LinkIcon","_excluded","_class","_Link","LINK_DEFAULT_COMPONENT","LinkDataTids","exports","root","Link","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","isExternalLink","undefined","renderMain","_cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose2","default","arrow","createElement","className","styles","isFocused","leftIconElement","LinkIcon","position","rightIconElement","hasBothIcons","getUseStyles","danger","success","grayed","getUseLineFocusStyles","lineFocus","lineFocusDanger","lineFocusSuccess","lineFocusGrayed","rootProps","_extends2","cx","resetButton","focus","useGrayedFocus","button","buttonOpened","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","getVisualStateDataAttributes","children","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","_this$props2","preventDefault","stopPropagation","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","ThemeFactory","create","CommonWrapper","rootNodeRef","setRootNode","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\nimport { keyListener } from '../../lib/events/keyListener';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkInnerProps extends CommonProps {\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Добавляет иконку слева. */\n  icon?: React.ReactElement;\n\n  /** Добавляет иконку справа. */\n  rightIcon?: React.ReactElement;\n\n  /** Задает тему ссылки. */\n  use?: 'default' | 'success' | 'danger' | 'grayed';\n\n  /** @ignore */\n  _button?: boolean;\n\n  /** @ignore */\n  _buttonOpened?: boolean;\n\n  /** Задает HTML-атрибут `tabindex`. */\n  tabIndex?: number;\n\n  /** Переводит кнопку в состояние загрузки. */\n  loading?: boolean;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n\n  /** Задает состояние фокуса.\n   * @ignore */\n  focused?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = PolymorphicPropsWithoutRef<\n  LinkInnerProps,\n  C\n>;\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n  root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> extends React.Component<\n  LinkProps<C>,\n  LinkState\n> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n  public static displayName = 'Link';\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    component: LINK_DEFAULT_COMPONENT,\n  };\n\n  private getProps = createPropsGetter(Link.defaultProps);\n\n  public state: LinkState = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getTabIndex = ({\n    nonInteractive,\n    tabIndex = 0,\n  }: {\n    nonInteractive: boolean | undefined;\n    tabIndex: number | undefined;\n  }) => {\n    return nonInteractive ? -1 : tabIndex;\n  };\n\n  private getRel = () => {\n    if (isAnchorProps(this.props)) {\n      const { rel, href } = this.props;\n      if (!rel && href) {\n        return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n      }\n      return rel;\n    }\n\n    return undefined;\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      component: Root,\n      focused = false,\n      error,\n      warning,\n      tabIndex,\n      theme,\n      ...rest\n    } = props;\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\n    }\n\n    const isFocused = !disabled && (this.state.focusedByTab || focused);\n\n    const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n    const rightIconElement = rightIcon && (\n      <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n    );\n    const nonInteractive = disabled || loading;\n    const getUseStyles = () => {\n      switch (use) {\n        case 'default':\n          return styles.default(this.theme);\n        case 'danger':\n          return styles.danger(this.theme);\n        case 'success':\n          return styles.success(this.theme);\n        case 'grayed':\n          return styles.grayed(this.theme);\n      }\n    };\n    const getUseLineFocusStyles = () => {\n      switch (use) {\n        case 'default':\n          return styles.lineFocus(this.theme);\n        case 'danger':\n          return styles.lineFocusDanger(this.theme);\n        case 'success':\n          return styles.lineFocusSuccess(this.theme);\n        case 'grayed':\n          return styles.lineFocusGrayed(this.theme);\n      }\n    };\n    const rootProps = {\n      ...rest,\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [resetButton()]: Root === 'button',\n        [styles.focus(this.theme)]: isFocused,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [getUseStyles()]: true,\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n        [styles.warning(this.theme)]: warning,\n        [styles.error(this.theme)]: error,\n        [getUseLineFocusStyles()]: isFocused,\n      }),\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n      rel: this.getRel(),\n    };\n\n    return (\n      <Root data-tid={LinkDataTids.root} {...rootProps} {...getVisualStateDataAttributes({ disabled })}>\n        {leftIconElement}\n        {this.props.children}\n        {rightIconElement}\n        {arrow}\n      </Root>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleClick = (event: React.MouseEvent) => {\n    const { onClick, disabled, loading } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n  return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Link/Link.md

@@ -0,0 +1,182 @@
+### Базовый пример
+
+```jsx harmony
+<Link href="https://kontur.ru" target="_blank">Обычная ссылка</Link>
+```
+
+### Корневой элемент
+Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. Cсылка принимает все пропы переданного в `component` компонента.
+Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+
+<Link component='button'>Кнопка, но выглядит как ссылка</Link>
+```
+
+### Проп `component`
+С помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
+
+```jsx static
+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>
+```
+
+### Стили и disabled
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={15}>
+  <Link>Обычная ссылка</Link>
+  <Link use="success">Успешная ссылка</Link>
+  <Link use="danger">Опасная ссылка</Link>
+  <Link use="grayed">Работающая ссылка серого цвета</Link>
+  <Link disabled>Отключенная ссылка</Link>
+</Gapped>;
+```
+
+### Иконка
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
+
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
+```
+
+### Ссылки, ведущие на внешние ресурсы
+
+_Примечание_:
+
+Если в контрол `Link` передана ссылка, ведущая на внешний ресурс, контрол `Link` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Link>
+  <Link target="_blank" href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Link>
+</Gapped>
+```
+
+### Состояние загрузки
+
+**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+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={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
+    <Link loading={isLoading}>Без иконки</Link>
+  </Gapped>
+</Gapped>
+```
+
+### Кастомное действие при нажатии
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
+```
+
+### Проп `theme`
+
+```jsx harmony
+import { Link, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link theme={{linkColor: '#C00000'}}>Ok</Link>
+  <Link>Ok</Link>
+</Gapped>
+```
+
+
+### Кастомизация ссылки
+
+```jsx harmony
+import { Toast, Button } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  linkTextUnderlineOffset: '1px'
+}
+
+const underlineOnHoverStyles = {
+  linkTextDecorationColor: '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) => {
+    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('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
+  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
+</table>
+```

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

@@ -1,3 +1,2 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-export declare const linkDisabledMixin: (emotion: Emotion) => string;
-export declare const linkUseColorsMixin: (mainColor: string, hoverColor: string, activeColor: string, emotion: Emotion) => string;
+export declare const linkDisabledMixin: () => string;
+export declare const linkUseColorsMixin: (mainColor: string, hoverColor: string, activeColor: string) => string;

package/cjs/components/Link/Link.mixins.js

@@ -1,22 +1,20 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.linkUseColorsMixin = exports.linkDisabledMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _templateObject, _templateObject2;
-
-var linkDisabledMixin = exports.linkDisabledMixin = function linkDisabledMixin(emotion) {
-  return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    box-shadow: none;\n    cursor: default;\n  "])));
+"use strict";exports.__esModule = true;exports.linkUseColorsMixin = exports.linkDisabledMixin = void 0;var linkDisabledMixin = exports.linkDisabledMixin = function linkDisabledMixin() {
+  return "\n    box-shadow: none;\n    cursor: default;\n  ";
 
 
 
 };
 
-var linkUseColorsMixin = exports.linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor, emotion) {
-  return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "])),
-  mainColor,
+var linkUseColorsMixin = exports.linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor) {
+  return "\n    color: " +
+  mainColor + ";\n\n    &:hover {\n      color: " +
 
 
-  hoverColor,
+  hoverColor + ";\n    }\n\n    &:active {\n      color: " +
 
 
 
-  activeColor);
+  activeColor + ";\n    }\n  ";
 
 
 };

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

@@ -1 +1 @@
-{"version":3,"names":["linkDisabledMixin","exports","emotion","css","_templateObject","_taggedTemplateLiteralLoose2","default","linkUseColorsMixin","mainColor","hoverColor","activeColor","_templateObject2"],"sources":["Link.mixins.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nexport const linkDisabledMixin = (emotion: Emotion) => {\n  return emotion.css`\n    box-shadow: none;\n    cursor: default;\n  `;\n};\n\nexport const linkUseColorsMixin = (mainColor: string, hoverColor: string, activeColor: string, emotion: Emotion) => {\n  return emotion.css`\n    color: ${mainColor};\n\n    &:hover {\n      color: ${hoverColor};\n    }\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n};\n"],"mappings":";;AAEO,IAAMA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAIE,OAAgB,EAAK;EACrD,OAAOA,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,OAAAC,4BAAA,CAAAC,OAAA;;;;AAIpB,CAAC;;AAEM,IAAMC,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAG,SAArBA,kBAAkBA,CAAIC,SAAiB,EAAEC,UAAkB,EAAEC,WAAmB,EAAER,OAAgB,EAAK;EAClH,OAAOA,OAAO,CAACC,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,OAAAN,4BAAA,CAAAC,OAAA;EACPE,SAAS;;;EAGPC,UAAU;;;;EAIVC,WAAW;;;AAG1B,CAAC","ignoreList":[]}
+{"version":3,"names":["linkDisabledMixin","exports","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"sources":["Link.mixins.ts"],"sourcesContent":["export const linkDisabledMixin = () => {\n  return `\n    box-shadow: none;\n    cursor: default;\n  `;\n};\n\nexport const linkUseColorsMixin = (mainColor: string, hoverColor: string, activeColor: string) => {\n  return `\n    color: ${mainColor};\n\n    &:hover {\n      color: ${hoverColor};\n    }\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n};\n"],"mappings":"uGAAO,IAAMA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;EACrC;;;;AAIF,CAAC;;AAEM,IAAME,kBAAkB,GAAAD,OAAA,CAAAC,kBAAA,GAAG,SAArBA,kBAAkBA,CAAIC,SAAiB,EAAEC,UAAkB,EAAEC,WAAmB,EAAK;EAChG;EACWF,SAAS;;;EAGPC,UAAU;;;;EAIVC,WAAW;;;AAG1B,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     lineFocus(t: Theme): string;
     lineFocusSuccess(t: Theme): string;

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

@@ -1,11 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
 var _Link = require("./Link.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
-var line = function line(emotion) {return emotion.keyframes(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n"])));};
+var line = (0, _Emotion.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n"])));
 
 
 
@@ -14,86 +12,85 @@ var line = function line(emotion) {return emotion.keyframes(_templateObject || (
 
 
 
-var oldLineText = function oldLineText(t, emotion) {
+var oldLineText = function oldLineText(t) {
   var delay = parseFloat(t.linkTextUnderlineOpacity) - 1;
-  return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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  "])),
-  line(emotion),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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  "])),
+  line,
 
   delay);
 
 
 };
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: pointer;\n        position: relative;\n\n        border-radius: 1px;\n        text-decoration: ", ";\n        text-decoration-style: ", ";\n        text-underline-offset: ", ";\n        text-decoration-thickness: ", ";\n        transition: text-decoration-color ", " ", ";\n        @supports (text-decoration-color: ", ") {\n          text-decoration-color: ", ";\n          &:hover {\n            text-decoration-color: currentColor;\n            text-decoration-style: ", ";\n          }\n        }\n        @supports not (text-decoration-color: ", ") {\n          ", ";\n          &:hover {\n            text-decoration-style: ", ";\n            animation: none !important;\n          }\n        }\n      "])),
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: pointer;\n      position: relative;\n\n      border-radius: 1px;\n      text-decoration: ", ";\n      text-decoration-style: ", ";\n      text-underline-offset: ", ";\n      text-decoration-thickness: ", ";\n      transition: text-decoration-color ", " ", ";\n      @supports (text-decoration-color: ", ") {\n        text-decoration-color: ", ";\n        &:hover {\n          text-decoration-color: currentColor;\n          text-decoration-style: ", ";\n        }\n      }\n      @supports not (text-decoration-color: ", ") {\n        ", ";\n        &:hover {\n          text-decoration-style: ", ";\n          animation: none !important;\n        }\n      }\n    "])),
 
 
 
 
-        t.linkTextDecoration,
-        t.linkTextDecorationStyle,
-        t.linkTextUnderlineOffset,
-        t.linkTextDecorationThickness,
-        t.transitionDuration, t.transitionTimingFunction,
-        t.linkTextDecorationColor,
-        t.linkTextDecorationColor,
+    t.linkTextDecoration,
+    t.linkTextDecorationStyle,
+    t.linkTextUnderlineOffset,
+    t.linkTextDecorationThickness,
+    t.transitionDuration, t.transitionTimingFunction,
+    t.linkTextDecorationColor,
+    t.linkTextDecorationColor,
 
 
-        t.linkHoverTextDecorationStyle,
+    t.linkHoverTextDecorationStyle,
 
 
-        t.linkTextDecorationColor,
-        oldLineText(t, emotion),
+    t.linkTextDecorationColor,
+    oldLineText(t),
 
-        t.linkHoverTextDecorationStyle);
+    t.linkHoverTextDecorationStyle);
 
 
 
 
-      },
-      lineFocus: function lineFocus(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.linkHoverColor);
+  },
+  lineFocus: function lineFocus(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.linkHoverColor);
 
-      },
+  },
 
-      lineFocusSuccess: function lineFocusSuccess(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", " !important;\n      "])),
-        t.linkSuccessHoverColor);
+  lineFocusSuccess: function lineFocusSuccess(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n    "])),
+    t.linkSuccessHoverColor);
 
-      },
+  },
 
-      lineFocusDanger: function lineFocusDanger(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", " !important;\n      "])),
-        t.linkDangerHoverColor);
+  lineFocusDanger: function lineFocusDanger(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n    "])),
+    t.linkDangerHoverColor);
 
-      },
+  },
 
-      lineFocusGrayed: function lineFocusGrayed(t) {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", " !important;\n      "])),
-        t.linkGrayedHoverColor);
+  lineFocusGrayed: function lineFocusGrayed(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", " !important;\n    "])),
+    t.linkGrayedHoverColor);
 
-      },
+  },
 
-      button: function button(t) {
-        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n        line-height: ", ";\n        padding-left: ", ";\n        padding-right: ", ";\n      "])),
+  button: function button(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])),
 
-        t.linkButtonLineHeight,
-        t.linkButtonPaddingX,
-        t.linkButtonPaddingX);
+    t.linkButtonLineHeight,
+    t.linkButtonPaddingX,
+    t.linkButtonPaddingX);
 
-      },
+  },
 
-      buttonOpened: function buttonOpened(t) {
-        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n      "])),
-        t.btnDefaultActiveBg);
+  buttonOpened: function buttonOpened(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.btnDefaultActiveBg);
 
-      },
+  },
 
-      arrow: function arrow() {
-        return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: 4px solid transparent;\n        border-bottom-width: 0;\n        border-top-color: #a0a0a0;\n        display: inline-block;\n        margin-bottom: 3px;\n        margin-left: 3px;\n        vertical-align: middle;\n      "])));
+  arrow: function arrow() {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
 
 
 
@@ -102,87 +99,87 @@ var getStyles = exports.getStyles = function getStyles(emotion) {return (
 
 
 
-      },
+  },
 
-      default: function _default(t) {
-        return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Link.linkUseColorsMixin)(t.linkColor, t.linkHoverColor, t.linkActiveColor, emotion));
+  default: function _default(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkColor, t.linkHoverColor, t.linkActiveColor));
 
-      },
+  },
 
-      success: function success(t) {
-        return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Link.linkUseColorsMixin)(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor, emotion));
+  success: function success(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor));
 
-      },
+  },
 
-      danger: function danger(t) {
-        return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Link.linkUseColorsMixin)(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor, emotion));
+  danger: function danger(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor));
 
-      },
+  },
 
-      grayed: function grayed(t) {
-        return emotion.css(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Link.linkUseColorsMixin)(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor, emotion));
+  grayed: function grayed(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor));
 
-      },
+  },
 
-      useGrayedFocus: function useGrayedFocus(t) {
-        return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.linkDisabledColor);
+  useGrayedFocus: function useGrayedFocus(t) {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.linkDisabledColor);
 
-      },
+  },
 
-      focus: function focus(t) {
-        return emotion.css(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        text-decoration: ", ";\n        outline: ", ";\n      "])),
-        t.linkHoverTextDecoration,
-        t.linkFocusOutline);
+  focus: function focus(t) {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: ", ";\n      outline: ", ";\n    "])),
+    t.linkHoverTextDecoration,
+    t.linkFocusOutline);
 
-      },
+  },
 
-      disabled: function disabled(t) {
-        return emotion.css(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n\n        color: ", " !important; // override root color\n\n        &:hover {\n          color: ", ";\n          text-decoration-color: ", ";\n        }\n      "])),
-        (0, _Link.linkDisabledMixin)(emotion),
+  disabled: function disabled(t) {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n        text-decoration-color: ", ";\n      }\n    "])),
+    (0, _Link.linkDisabledMixin)(),
 
-        t.linkDisabledColor,
+    t.linkDisabledColor,
 
 
-        t.linkDisabledColor,
-        t.linkTextDecorationColor);
+    t.linkDisabledColor,
+    t.linkTextDecorationColor);
 
 
-      },
+  },
 
-      icon: function icon() {
-        return emotion.css(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n      "])));
+  icon: function icon() {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
 
-      },
+  },
 
-      iconLeft: function iconLeft(t) {
-        return emotion.css(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-right: ", ";\n      "])),
-        t.linkIconMarginRight);
+  iconLeft: function iconLeft(t) {
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n    "])),
+    t.linkIconMarginRight);
 
-      },
+  },
 
-      iconRight: function iconRight(t) {
-        return emotion.css(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-left: ", ";\n      "])),
-        t.linkIconMarginLeft);
+  iconRight: function iconRight(t) {
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n    "])),
+    t.linkIconMarginLeft);
 
-      },
+  },
 
-      warning: function warning(t) {
-        return emotion.css(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      "])),
-        t.btnWarningSecondary,
-        t.btnWarningSecondary);
+  warning: function warning(t) {
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    "])),
+    t.btnWarningSecondary,
+    t.btnWarningSecondary);
 
-      },
+  },
 
-      error: function error(t) {
-        return emotion.css(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      "])),
-        t.btnErrorSecondary,
-        t.btnErrorSecondary);
+  error: function error(t) {
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    "])),
+    t.btnErrorSecondary,
+    t.btnErrorSecondary);
 
-      }
-    }));};
+  }
+});