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

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

@@ -1,8 +1,6 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2;
-export var linkDisabledMixin = function linkDisabledMixin(emotion) {
-  return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    box-shadow: none;\n    cursor: default;\n  "])));
+export var linkDisabledMixin = function linkDisabledMixin() {
+  return "\n    box-shadow: none;\n    cursor: default;\n  ";
 };
-export var linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor, emotion) {
-  return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "])), mainColor, hoverColor, activeColor);
+export var linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor) {
+  return "\n    color: " + mainColor + ";\n\n    &:hover {\n      color: " + hoverColor + ";\n    }\n\n    &:active {\n      color: " + activeColor + ";\n    }\n  ";
 };

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

@@ -1 +1 @@
-{"version":3,"names":["linkDisabledMixin","emotion","css","_templateObject","_taggedTemplateLiteralLoose","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":";;AAEA,OAAO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,OAAgB,EAAK;EACrD,OAAOA,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;AAIpB,CAAC;;AAED,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,SAAiB,EAAEC,UAAkB,EAAEC,WAAmB,EAAEP,OAAgB,EAAK;EAClH,OAAOA,OAAO,CAACC,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;EACPE,SAAS;;;EAGPC,UAAU;;;;EAIVC,WAAW;;;AAG1B,CAAC","ignoreList":[]}
+{"version":3,"names":["linkDisabledMixin","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":"AAAA,OAAO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;EACrC;;;;AAIF,CAAC;;AAED,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,SAAiB,EAAEC,UAAkB,EAAEC,WAAmB,EAAK;EAChG;EACWF,SAAS;;;EAGPC,UAAU;;;;EAIVC,WAAW;;;AAG1B,CAAC","ignoreList":[]}

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

@@ -1,75 +1,71 @@
 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;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, keyframes, memoizeStyle } from "../../../lib/theming/Emotion";
 import { linkDisabledMixin, linkUseColorsMixin } from "../Link.mixins";
-var line = function line(emotion) {
-  return emotion.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n"])));
-};
-var oldLineText = function oldLineText(t, emotion) {
+var line = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n"])));
+var oldLineText = function oldLineText(t) {
   var delay = parseFloat(t.linkTextUnderlineOpacity) - 1;
-  return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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), delay);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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);
 };
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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.linkHoverTextDecorationStyle, t.linkTextDecorationColor, oldLineText(t, emotion), t.linkHoverTextDecorationStyle);
-    },
-    lineFocus: function lineFocus(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.linkHoverColor);
-    },
-    lineFocusSuccess: function lineFocusSuccess(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n      "])), t.linkSuccessHoverColor);
-    },
-    lineFocusDanger: function lineFocusDanger(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n      "])), t.linkDangerHoverColor);
-    },
-    lineFocusGrayed: function lineFocusGrayed(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        color: ", " !important;\n      "])), t.linkGrayedHoverColor);
-    },
-    button: function button(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.btnDefaultActiveBg);
-    },
-    arrow: function arrow() {
-      return emotion.css(_templateObject10 || (_templateObject10 = _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      "])));
-    },
-    "default": function _default(t) {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor, emotion));
-    },
-    success: function success(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor, emotion));
-    },
-    danger: function danger(t) {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor, emotion));
-    },
-    grayed: function grayed(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor, emotion));
-    },
-    useGrayedFocus: function useGrayedFocus(t) {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.linkDisabledColor);
-    },
-    focus: function focus(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        text-decoration: ", ";\n        outline: ", ";\n      "])), t.linkHoverTextDecoration, t.linkFocusOutline);
-    },
-    disabled: function disabled(t) {
-      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n\n        color: ", " !important; // override root color\n\n        &:hover {\n          color: ", ";\n          text-decoration-color: ", ";\n        }\n      "])), linkDisabledMixin(emotion), t.linkDisabledColor, t.linkDisabledColor, t.linkTextDecorationColor);
-    },
-    icon: function icon() {
-      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n      "])));
-    },
-    iconLeft: function iconLeft(t) {
-      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        margin-right: ", ";\n      "])), t.linkIconMarginRight);
-    },
-    iconRight: function iconRight(t) {
-      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        margin-left: ", ";\n      "])), t.linkIconMarginLeft);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      "])), t.btnWarningSecondary, t.btnWarningSecondary);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      "])), t.btnErrorSecondary, t.btnErrorSecondary);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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.linkHoverTextDecorationStyle, t.linkTextDecorationColor, oldLineText(t), t.linkHoverTextDecorationStyle);
+  },
+  lineFocus: function lineFocus(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkHoverColor);
+  },
+  lineFocusSuccess: function lineFocusSuccess(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n    "])), t.linkSuccessHoverColor);
+  },
+  lineFocusDanger: function lineFocusDanger(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n    "])), t.linkDangerHoverColor);
+  },
+  lineFocusGrayed: function lineFocusGrayed(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n    "])), t.linkGrayedHoverColor);
+  },
+  button: function button(t) {
+    return css(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.btnDefaultActiveBg);
+  },
+  arrow: function arrow() {
+    return css(_templateObject10 || (_templateObject10 = _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    "])));
+  },
+  "default": function _default(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor));
+  },
+  success: function success(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor));
+  },
+  danger: function danger(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor));
+  },
+  grayed: function grayed(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor));
+  },
+  useGrayedFocus: function useGrayedFocus(t) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
+  },
+  focus: function focus(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n      outline: ", ";\n    "])), t.linkHoverTextDecoration, t.linkFocusOutline);
+  },
+  disabled: function disabled(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n        text-decoration-color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor, t.linkTextDecorationColor);
+  },
+  icon: function icon() {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  },
+  iconLeft: function iconLeft(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+  },
+  iconRight: function iconRight(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.linkIconMarginLeft);
+  },
+  warning: function warning(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    "])), t.btnWarningSecondary, t.btnWarningSecondary);
+  },
+  error: function error(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    "])), t.btnErrorSecondary, t.btnErrorSecondary);
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","linkDisabledMixin","linkUseColorsMixin","line","emotion","keyframes","_templateObject","_taggedTemplateLiteralLoose","oldLineText","t","delay","parseFloat","linkTextUnderlineOpacity","css","_templateObject2","getStyles","root","_templateObject3","linkTextDecoration","linkTextDecorationStyle","linkTextUnderlineOffset","linkTextDecorationThickness","transitionDuration","transitionTimingFunction","linkTextDecorationColor","linkHoverTextDecorationStyle","lineFocus","_templateObject4","linkHoverColor","lineFocusSuccess","_templateObject5","linkSuccessHoverColor","lineFocusDanger","_templateObject6","linkDangerHoverColor","lineFocusGrayed","_templateObject7","linkGrayedHoverColor","button","_templateObject8","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","_templateObject9","btnDefaultActiveBg","arrow","_templateObject10","_default","_templateObject11","linkColor","linkActiveColor","success","_templateObject12","linkSuccessColor","linkSuccessActiveColor","danger","_templateObject13","linkDangerColor","linkDangerActiveColor","grayed","_templateObject14","linkGrayedColor","linkGrayedActiveColor","useGrayedFocus","_templateObject15","linkDisabledColor","focus","_templateObject16","linkHoverTextDecoration","linkFocusOutline","disabled","_templateObject17","icon","_templateObject18","iconLeft","_templateObject19","linkIconMarginRight","iconRight","_templateObject20","linkIconMarginLeft","warning","_templateObject21","btnWarningSecondary","error","_templateObject22","btnErrorSecondary"],"sources":["Link.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\n\nconst line = (emotion: Emotion) => emotion.keyframes`\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n`;\n\nconst oldLineText = function (t: Theme, emotion: Emotion) {\n  const delay = parseFloat(t.linkTextUnderlineOpacity) - 1;\n  return emotion.css`\n    animation: ${line(emotion)} 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        cursor: pointer;\n        position: relative;\n\n        border-radius: 1px;\n        text-decoration: ${t.linkTextDecoration};\n        text-decoration-style: ${t.linkTextDecorationStyle};\n        text-underline-offset: ${t.linkTextUnderlineOffset};\n        text-decoration-thickness: ${t.linkTextDecorationThickness};\n        transition: text-decoration-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        @supports (text-decoration-color: ${t.linkTextDecorationColor}) {\n          text-decoration-color: ${t.linkTextDecorationColor};\n          &:hover {\n            text-decoration-color: currentColor;\n            text-decoration-style: ${t.linkHoverTextDecorationStyle};\n          }\n        }\n        @supports not (text-decoration-color: ${t.linkTextDecorationColor}) {\n          ${oldLineText(t, emotion)};\n          &:hover {\n            text-decoration-style: ${t.linkHoverTextDecorationStyle};\n            animation: none !important;\n          }\n        }\n      `;\n    },\n    lineFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.linkHoverColor};\n      `;\n    },\n\n    lineFocusSuccess(t: Theme) {\n      return emotion.css`\n        color: ${t.linkSuccessHoverColor} !important;\n      `;\n    },\n\n    lineFocusDanger(t: Theme) {\n      return emotion.css`\n        color: ${t.linkDangerHoverColor} !important;\n      `;\n    },\n\n    lineFocusGrayed(t: Theme) {\n      return emotion.css`\n        color: ${t.linkGrayedHoverColor} !important;\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    default(t: Theme) {\n      return emotion.css`\n        ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor, emotion)};\n      `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n        ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor, emotion)};\n      `;\n    },\n\n    danger(t: Theme) {\n      return emotion.css`\n        ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor, emotion)};\n      `;\n    },\n\n    grayed(t: Theme) {\n      return emotion.css`\n        ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor, emotion)};\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        outline: ${t.linkFocusOutline};\n      `;\n    },\n\n    disabled(t: Theme) {\n      return emotion.css`\n        ${linkDisabledMixin(emotion)};\n\n        color: ${t.linkDisabledColor} !important; // override root color\n\n        &:hover {\n          color: ${t.linkDisabledColor};\n          text-decoration-color: ${t.linkTextDecorationColor};\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    warning(t: Theme) {\n      return emotion.css`\n        background-color: ${t.btnWarningSecondary};\n        box-shadow: 0 0 0 2px ${t.btnWarningSecondary};\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        background-color: ${t.btnErrorSecondary};\n        box-shadow: 0 0 0 2px ${t.btnErrorSecondary};\n      `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","keyframes","memoizeStyle","linkDisabledMixin","linkUseColorsMixin","line","_templateObject","_taggedTemplateLiteralLoose","oldLineText","t","delay","parseFloat","linkTextUnderlineOpacity","_templateObject2","styles","root","_templateObject3","linkTextDecoration","linkTextDecorationStyle","linkTextUnderlineOffset","linkTextDecorationThickness","transitionDuration","transitionTimingFunction","linkTextDecorationColor","linkHoverTextDecorationStyle","lineFocus","_templateObject4","linkHoverColor","lineFocusSuccess","_templateObject5","linkSuccessHoverColor","lineFocusDanger","_templateObject6","linkDangerHoverColor","lineFocusGrayed","_templateObject7","linkGrayedHoverColor","button","_templateObject8","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","_templateObject9","btnDefaultActiveBg","arrow","_templateObject10","_default","_templateObject11","linkColor","linkActiveColor","success","_templateObject12","linkSuccessColor","linkSuccessActiveColor","danger","_templateObject13","linkDangerColor","linkDangerActiveColor","grayed","_templateObject14","linkGrayedColor","linkGrayedActiveColor","useGrayedFocus","_templateObject15","linkDisabledColor","focus","_templateObject16","linkHoverTextDecoration","linkFocusOutline","disabled","_templateObject17","icon","_templateObject18","iconLeft","_templateObject19","linkIconMarginRight","iconRight","_templateObject20","linkIconMarginLeft","warning","_templateObject21","btnWarningSecondary","error","_templateObject22","btnErrorSecondary"],"sources":["Link.styles.ts"],"sourcesContent":["import { css, keyframes, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\n\nconst line = keyframes`\n  0% {\n    text-decoration-color: inherit;\n  }\n  100% {\n    text-decoration-color: transparent;\n  }\n`;\n\nconst oldLineText = function (t: Theme) {\n  const delay = parseFloat(t.linkTextUnderlineOpacity) - 1;\n  return css`\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      cursor: pointer;\n      position: relative;\n\n      border-radius: 1px;\n      text-decoration: ${t.linkTextDecoration};\n      text-decoration-style: ${t.linkTextDecorationStyle};\n      text-underline-offset: ${t.linkTextUnderlineOffset};\n      text-decoration-thickness: ${t.linkTextDecorationThickness};\n      transition: text-decoration-color ${t.transitionDuration} ${t.transitionTimingFunction};\n      @supports (text-decoration-color: ${t.linkTextDecorationColor}) {\n        text-decoration-color: ${t.linkTextDecorationColor};\n        &:hover {\n          text-decoration-color: currentColor;\n          text-decoration-style: ${t.linkHoverTextDecorationStyle};\n        }\n      }\n      @supports not (text-decoration-color: ${t.linkTextDecorationColor}) {\n        ${oldLineText(t)};\n        &:hover {\n          text-decoration-style: ${t.linkHoverTextDecorationStyle};\n          animation: none !important;\n        }\n      }\n    `;\n  },\n  lineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n    `;\n  },\n\n  lineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n    `;\n  },\n\n  lineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n    `;\n  },\n\n  lineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\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  default(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n    `;\n  },\n\n  danger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n    `;\n  },\n\n  grayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\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      outline: ${t.linkFocusOutline};\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        text-decoration-color: ${t.linkTextDecorationColor};\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  warning(t: Theme) {\n    return css`\n      background-color: ${t.btnWarningSecondary};\n      box-shadow: 0 0 0 2px ${t.btnWarningSecondary};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background-color: ${t.btnErrorSecondary};\n      box-shadow: 0 0 0 2px ${t.btnErrorSecondary};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,17 +1,14 @@
 import React, { useContext } from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { Spinner } from "../../Spinner";
-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 = useContext(ThemeContext);
-  var emotion = useEmotion();
-  var cx = emotion.cx;
-  var styles = getStyles(emotion);
   return /*#__PURE__*/(
     React.createElement("span", {
       className: cx(styles.icon(), position === 'left' && styles.iconLeft(theme), position === 'right' && styles.iconRight(theme))

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEmotion","ThemeContext","Spinner","getStyles","LinkIcon","_ref","icon","loading","hasBothIcons","position","theme","emotion","cx","styles","createElement","className","iconLeft","iconRight","caption","dimmed","inline"],"sources":["LinkIcon.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\n\nimport type { 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 = useContext(ThemeContext);\n  const emotion = useEmotion();\n  const { cx } = emotion;\n  const styles = getStyles(emotion);\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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,UAAU,QAAQ,4CAA4C;AACvE,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,OAAO,QAAQ,YAAY;;;AAGpC,SAASC,SAAS,QAAQ,eAAe;;;;;;;AAOzC,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiE,KAA3DC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO,CAAEC,YAAY,GAAAH,IAAA,CAAZG,YAAY,CAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EAC9D,IAAMC,KAAK,GAAGX,UAAU,CAACE,YAAY,CAAC;EACtC,IAAMU,OAAO,GAAGX,UAAU,CAAC,CAAC;EAC5B,IAAQY,EAAE,GAAKD,OAAO,CAAdC,EAAE;EACV,IAAMC,MAAM,GAAGV,SAAS,CAACQ,OAAO,CAAC;;EAEjC;IACEb,KAAA,CAAAgB,aAAA;MACEC,SAAS,EAAEH,EAAE;QACXC,MAAM,CAACP,IAAI,CAAC,CAAC;QACbG,QAAQ,KAAK,MAAM,IAAII,MAAM,CAACG,QAAQ,CAACN,KAAK,CAAC;QAC7CD,QAAQ,KAAK,OAAO,IAAII,MAAM,CAACI,SAAS,CAACP,KAAK;MAChD,CAAE;;IAEDH,OAAO,IAAI,CAACC,YAAY,gBAAGV,KAAA,CAAAgB,aAAA,CAACZ,OAAO,IAACgB,OAAO,EAAE,IAAK,EAACC,MAAM,QAACC,MAAM,QAAE,CAAC,GAAGd;IACnE,CAAC;;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useContext","cx","ThemeContext","Spinner","styles","LinkIcon","_ref","icon","loading","hasBothIcons","position","theme","createElement","className","iconLeft","iconRight","caption","dimmed","inline"],"sources":["LinkIcon.tsx"],"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 type { 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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,OAAO,QAAQ,YAAY;;;AAGpC,SAASC,MAAM,QAAQ,eAAe;;;;;;;AAOtC,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiE,KAA3DC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO,CAAEC,YAAY,GAAAH,IAAA,CAAZG,YAAY,CAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EAC9D,IAAMC,KAAK,GAAGX,UAAU,CAACE,YAAY,CAAC;;EAEtC;IACEH,KAAA,CAAAa,aAAA;MACEC,SAAS,EAAEZ,EAAE;QACXG,MAAM,CAACG,IAAI,CAAC,CAAC;QACbG,QAAQ,KAAK,MAAM,IAAIN,MAAM,CAACU,QAAQ,CAACH,KAAK,CAAC;QAC7CD,QAAQ,KAAK,OAAO,IAAIN,MAAM,CAACW,SAAS,CAACJ,KAAK;MAChD,CAAE;;IAEDH,OAAO,IAAI,CAACC,YAAY,gBAAGV,KAAA,CAAAa,aAAA,CAACT,OAAO,IAACa,OAAO,EAAE,IAAK,EAACC,MAAM,QAACC,MAAM,QAAE,CAAC,GAAGX;IACnE,CAAC;;AAEX,CAAC","ignoreList":[]}