@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/cjs/components/Kebab/__stories__/Kebab.items.js

@@ -0,0 +1,51 @@
+"use strict";exports.__esModule = true;exports.manyItemsList = exports.defaultItemsList = void 0;var defaultItemsList = [
+{
+  text: 'First',
+  action: 'First' },
+
+{
+  text: 'Second',
+  action: 'Second' },
+
+{
+  text: 'Uno',
+  action: 'Uno' }];exports.defaultItemsList = defaultItemsList;
+
+
+
+var manyItemsList = [
+{
+  text: 'Edit',
+  action: 'Edit' },
+
+{
+  text: 'Remove',
+  action: 'Remove' },
+
+{
+  text: 'Communicate',
+  action: 'Communicate' },
+
+{
+  text: 'Grade',
+  action: 'Grade' },
+
+{
+  text: 'Dispatch',
+  action: 'Dispatch' },
+
+{
+  text: 'Disable',
+  action: 'Disable' },
+
+{
+  text: 'Rate',
+  action: 'Rate' },
+
+{
+  text: 'Collaborate',
+  action: 'Collaborate' },
+
+{
+  text: 'Contribute',
+  action: 'Contribute' }];exports.manyItemsList = manyItemsList;

package/cjs/components/Kebab/__stories__/Kebab.items.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Kebab.items.tsx"],"names":["defaultItemsList","text","action","manyItemsList"],"mappings":"iGAAO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAD8B;;AAK9B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL8B;;AAS9B;AACED,EAAAA,IAAI,EAAE,KADR;AAEEC,EAAAA,MAAM,EAAE,KAFV,EAT8B,CAAzB,C;;;;AAeA,IAAMC,aAAa,GAAG;AAC3B;AACEF,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAD2B;;AAK3B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL2B;;AAS3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EAT2B;;AAa3B;AACED,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAb2B;;AAiB3B;AACED,EAAAA,IAAI,EAAE,UADR;AAEEC,EAAAA,MAAM,EAAE,UAFV,EAjB2B;;AAqB3B;AACED,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,MAAM,EAAE,SAFV,EArB2B;;AAyB3B;AACED,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAzB2B;;AA6B3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EA7B2B;;AAiC3B;AACED,EAAAA,IAAI,EAAE,YADR;AAEEC,EAAAA,MAAM,EAAE,YAFV,EAjC2B,CAAtB,C","sourcesContent":["export const defaultItemsList = [\n  {\n    text: 'First',\n    action: 'First',\n  },\n  {\n    text: 'Second',\n    action: 'Second',\n  },\n  {\n    text: 'Uno',\n    action: 'Uno',\n  },\n];\n\nexport const manyItemsList = [\n  {\n    text: 'Edit',\n    action: 'Edit',\n  },\n  {\n    text: 'Remove',\n    action: 'Remove',\n  },\n  {\n    text: 'Communicate',\n    action: 'Communicate',\n  },\n  {\n    text: 'Grade',\n    action: 'Grade',\n  },\n  {\n    text: 'Dispatch',\n    action: 'Dispatch',\n  },\n  {\n    text: 'Disable',\n    action: 'Disable',\n  },\n  {\n    text: 'Rate',\n    action: 'Rate',\n  },\n  {\n    text: 'Collaborate',\n    action: 'Collaborate',\n  },\n  {\n    text: 'Contribute',\n    action: 'Contribute',\n  },\n];\n"]}

package/cjs/components/Kebab/index.d.ts

@@ -0,0 +1 @@
+export * from './Kebab';

package/cjs/components/Kebab/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _Kebab = require("./Kebab");Object.keys(_Kebab).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Kebab[key]) return;exports[key] = _Kebab[key];});

package/cjs/components/Kebab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Kebab';\n"]}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Override } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
+    /**
+     * Отключенное состояние.
+     */
+    disabled?: boolean;
+    /**
+     * HTML-атрибут `href`.
+     */
+    href?: string;
+    /**
+     * Добавляет ссылке иконку.
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Тема ссылки.
+     */
+    use?: 'default' | 'success' | 'danger' | 'grayed';
+    /**
+     * @ignore
+     */
+    _button?: boolean;
+    /**
+     * @ignore
+     */
+    _buttonOpened?: boolean;
+    /**
+     * HTML-атрибут `tabindex`.
+     */
+    tabIndex?: number;
+    /**
+     * Переводит ссылку в состояние загрузки.
+     */
+    loading?: boolean;
+    /**
+     * HTML-событие `onclick`.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}> {
+}
+export interface LinkState {
+    focusedByTab: boolean;
+}
+/**
+ * Элемент ссылки из HTML.
+ */
+export declare class Link extends React.Component<LinkProps, LinkState> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        use: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        href: string;
+        use: string;
+    };
+    state: {
+        focusedByTab: boolean;
+    };
+    private theme;
+    render(): JSX.Element;
+    private renderMain;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+}

package/cjs/components/Link/Link.js

@@ -0,0 +1,176 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Link = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+
+var _keyListener = require("../../lib/events/keyListener");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _utils = require("../../lib/utils");
+var _Spinner = require("../Spinner");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _Link = require("./Link.styles");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Элемент ссылки из HTML.
+ */var
+Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Link, _React$Component);function Link() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    state = {
+      focusedByTab: false };_this.
+
+
+    theme = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+    renderMain = function (props) {var _cx;var
+      disabled = props.disabled,href = props.href,icon = props.icon,use = props.use,loading = props.loading,_button = props._button,_buttonOpened = props._buttonOpened,relOrigin = props.rel,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel"]);
+
+      var iconElement = null;
+      if (icon) {
+        iconElement = /*#__PURE__*/
+        _react.default.createElement("span", { className: _Link.styles.icon(_this.theme) }, loading ? /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, inline: true }) : icon);
+
+      }
+
+      var arrow = null;
+      if (_button) {
+        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _Link.styles.arrow() });
+      }
+
+      var rel = relOrigin;
+      if (typeof rel === 'undefined' && href) {
+        rel = "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
+      }
+
+      var focused = !disabled && _this.state.focusedByTab;
+
+      var linkProps = {
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Link.styles.root(_this.theme)] = true, _cx[
+        _Link.styles.button(_this.theme)] = !!_button, _cx[
+        _Link.styles.buttonOpened()] = !!_buttonOpened, _cx[
+        _Link.styles.useDefault(_this.theme)] = use === 'default', _cx[
+        _Link.styles.useSuccess(_this.theme)] = use === 'success', _cx[
+        _Link.styles.useDanger(_this.theme)] = use === 'danger', _cx[
+        _Link.styles.useGrayed(_this.theme)] = use === 'grayed', _cx[
+        _Link.styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _cx[
+        _Link.styles.focus(_this.theme)] = focused, _cx[
+        _Link.styles.disabled(_this.theme)] = !!disabled || !!loading, _cx)),
+
+        href: href,
+        rel: rel,
+        onClick: _this._handleClick,
+        onFocus: _this._handleFocus,
+        onBlur: _this._handleBlur,
+        tabIndex: disabled || loading ? -1 : _this.props.tabIndex };
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement("a", (0, _extends2.default)({}, rest, linkProps),
+        iconElement,
+        _this.props.children,
+        arrow));
+
+
+    };_this.
+
+    _handleFocus = function (event) {
+      if (!_this.props.disabled) {
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
+            _this.setState({ focusedByTab: true });
+          }
+        });
+      }
+    };_this.
+
+    _handleBlur = function () {
+      _this.setState({ focusedByTab: false });
+    };_this.
+
+    _handleClick = function (event) {var _this$props =
+      _this.props,href = _this$props.href,onClick = _this$props.onClick,disabled = _this$props.disabled,loading = _this$props.loading;
+      if (!href) {
+        event.preventDefault();
+      }
+      if (onClick && !disabled && !loading) {
+        onClick(event);
+      }
+    };return _this;}var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, _this2.renderMain);});};return Link;}(_react.default.Component);exports.Link = Link;Link.__KONTUR_REACT_UI__ = 'Link';Link.propTypes = { disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), use: _propTypes.default.oneOf(['default', 'success', 'danger', 'grayed']) };Link.defaultProps = { href: '', use: 'default' };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Link.tsx"],"names":["Link","state","focusedByTab","theme","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","styles","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","keyListener","isTabPressed","setState","preventDefault","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Link.styles';\n\nexport interface LinkProps\n  extends CommonProps,\n    Override<\n      React.AnchorHTMLAttributes<HTMLAnchorElement>,\n      {\n        /**\n         * Отключенное состояние.\n         */\n        disabled?: boolean;\n        /**\n         * HTML-атрибут `href`.\n         */\n        href?: string;\n        /**\n         * Добавляет ссылке иконку.\n         */\n        icon?: React.ReactElement<any>;\n        /**\n         * Тема ссылки.\n         */\n        use?: 'default' | 'success' | 'danger' | 'grayed';\n        /**\n         * @ignore\n         */\n        _button?: boolean;\n        /**\n         * @ignore\n         */\n        _buttonOpened?: boolean;\n        /**\n         * HTML-атрибут `tabindex`.\n         */\n        tabIndex?: number;\n        /**\n         * Переводит ссылку в состояние загрузки.\n         */\n        loading?: boolean;\n        /**\n         * HTML-событие `onclick`.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n      }\n    > {}\n\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\n/**\n * Элемент ссылки из HTML.\n */\nexport class Link extends React.Component<LinkProps, LinkState> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n\n  public static propTypes = {\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n  };\n\n  public static defaultProps = {\n    href: '',\n    use: 'default',\n  };\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<LinkProps>) => {\n    const { disabled, href, icon, use, loading, _button, _buttonOpened, rel: relOrigin, ...rest } = props;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <span className={styles.icon(this.theme)}>{loading ? <Spinner caption={null} dimmed inline /> : icon}</span>\n      );\n    }\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\n    }\n\n    let rel = relOrigin;\n    if (typeof rel === 'undefined' && href) {\n      rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n    }\n\n    const focused = !disabled && this.state.focusedByTab;\n\n    const linkProps = {\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened()]: !!_buttonOpened,\n        [styles.useDefault(this.theme)]: use === 'default',\n        [styles.useSuccess(this.theme)]: use === 'success',\n        [styles.useDanger(this.theme)]: use === 'danger',\n        [styles.useGrayed(this.theme)]: use === 'grayed',\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.focus(this.theme)]: focused,\n        [styles.disabled(this.theme)]: !!disabled || !!loading,\n      }),\n      href,\n      rel,\n      onClick: this._handleClick,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      tabIndex: disabled || loading ? -1 : this.props.tabIndex,\n    };\n\n    return (\n      <a {...rest} {...linkProps}>\n        {iconElement}\n        {this.props.children}\n        {arrow}\n      </a>\n    );\n  };\n\n  private _handleFocus = (event: React.FocusEvent<HTMLAnchorElement>) => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      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<HTMLAnchorElement>) => {\n    const { href, onClick, disabled, loading } = this.props;\n    if (!href) {\n      event.preventDefault();\n    }\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n"]}

package/cjs/components/Link/Link.md

@@ -0,0 +1,77 @@
+Базовый пример ссылки.
+
+```jsx harmony
+<Link>Обычная ссылка</Link>
+```
+
+Ссылка может иметь различные стили, а также быть отключенной.
+
+```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 OkIcon from '@skbkontur/react-icons/Ok';
+
+<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `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 OkIcon from '@skbkontur/react-icons/Ok';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped vertical gap={15}>
+  <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
+  <Gapped gap={20}>
+    <Link loading={isLoading} icon={<OkIcon/>}>С иконкой</Link>
+    <Link loading={isLoading}>Без иконки</Link>
+  </Gapped>
+</Gapped>
+```
+
+Ссылка может иметь кастомное действие при нажатии.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
+```

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

@@ -0,0 +1,3 @@
+export declare const linkMixin: (hoverTextDecoration: string) => string;
+export declare const linkDisabledMixin: () => string;
+export declare const linkUseColorsMixin: (mainColor: string, hoverColor: string, activeColor: string) => string;

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

@@ -0,0 +1,38 @@
+"use strict";exports.__esModule = true;exports.linkUseColorsMixin = exports.linkDisabledMixin = exports.linkMixin = void 0;var linkMixin = function linkMixin(hoverTextDecoration) {
+  return "\n    border-radius: 1px;\n    outline: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: " +
+
+
+
+
+
+  hoverTextDecoration + ";\n    }\n  ";
+
+
+};exports.linkMixin = linkMixin;
+
+var linkDisabledMixin = function linkDisabledMixin() {
+  return "\n    box-shadow: none;\n    cursor: default;\n    pointer-events: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  ";
+
+
+
+
+
+
+
+
+
+};exports.linkDisabledMixin = linkDisabledMixin;
+
+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  ";
+
+
+};exports.linkUseColorsMixin = linkUseColorsMixin;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"2HAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM,C;;AAYA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;;AAUD,CAXM,C;;AAaA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM,C","sourcesContent":["export const linkMixin = (hoverTextDecoration: string) => {\n  return `\n    border-radius: 1px;\n    outline: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: ${hoverTextDecoration};\n    }\n  `;\n};\n\nexport const linkDisabledMixin = () => {\n  return `\n    box-shadow: none;\n    cursor: default;\n    pointer-events: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\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"]}

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

@@ -0,0 +1,15 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    button(t: Theme): string;
+    buttonOpened(): string;
+    arrow(): string;
+    useDefault(t: Theme): string;
+    useSuccess(t: Theme): string;
+    useDanger(t: Theme): string;
+    useGrayed(t: Theme): string;
+    useGrayedFocus(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    icon(t: Theme): string;
+};

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

@@ -0,0 +1,94 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+
+
+var _Link = require("./Link.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: relative;\n    "])),
+    (0, _Link.linkMixin)(t.linkHoverTextDecoration));
+
+
+  },
+
+  button: function button(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])),
+
+    t.linkButtonLineHeight,
+    t.linkButtonPaddingX,
+    t.linkButtonPaddingX);
+
+  },
+
+  buttonOpened: function buttonOpened() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: #e1e1e1;\n    "])));
+
+
+  },
+
+  arrow: function arrow() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
+
+
+
+
+
+
+
+
+  },
+
+  useDefault: function useDefault(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkColor, t.linkHoverColor, t.linkActiveColor));
+
+  },
+
+  useSuccess: function useSuccess(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor));
+
+  },
+
+  useDanger: function useDanger(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor));
+
+  },
+
+  useGrayed: function useGrayed(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Link.linkUseColorsMixin)(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor));
+
+  },
+
+  useGrayedFocus: function useGrayedFocus(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.linkDisabledColor);
+
+  },
+
+  focus: function focus(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: ", ";\n    "])),
+    t.linkHoverTextDecoration);
+
+  },
+
+  disabled: function disabled(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])),
+    (0, _Link.linkDisabledMixin)(),
+
+    t.linkDisabledColor,
+
+
+    t.linkDisabledColor);
+
+
+  },
+
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      margin-right: ", ";\n    "])),
+
+    t.linkIconMarginRight);
+
+  } });exports.styles = styles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Link.styles.ts"],"names":["styles","root","t","css","linkHoverTextDecoration","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","arrow","useDefault","linkColor","linkHoverColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","useGrayed","linkDisabledColor","useGrayedFocus","focus","disabled","icon","linkIconMarginRight"],"mappings":"4QAAA;;;AAGA,qC;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACI,yBAAUD,CAAC,CAACE,uBAAZ,CADJ;;;AAID,GANgC;;AAQjCC,EAAAA,MARiC,kBAQ1BH,CAR0B,EAQhB;AACf,eAAOC,YAAP;;AAEiBD,IAAAA,CAAC,CAACI,oBAFnB;AAGkBJ,IAAAA,CAAC,CAACK,kBAHpB;AAImBL,IAAAA,CAAC,CAACK,kBAJrB;;AAMD,GAfgC;;AAiBjCC,EAAAA,YAjBiC,0BAiBlB;AACb,eAAOL,YAAP;;;AAGD,GArBgC;;AAuBjCM,EAAAA,KAvBiC,mBAuBzB;AACN,eAAON,YAAP;;;;;;;;;AASD,GAjCgC;;AAmCjCO,EAAAA,UAnCiC,sBAmCtBR,CAnCsB,EAmCZ;AACnB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACS,SAArB,EAAgCT,CAAC,CAACU,cAAlC,EAAkDV,CAAC,CAACW,eAApD,CADJ;;AAGD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBZ,CAzCsB,EAyCZ;AACnB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACa,gBAArB,EAAuCb,CAAC,CAACc,qBAAzC,EAAgEd,CAAC,CAACe,sBAAlE,CADJ;;AAGD,GA7CgC;;AA+CjCC,EAAAA,SA/CiC,qBA+CvBhB,CA/CuB,EA+Cb;AAClB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACiB,eAArB,EAAsCjB,CAAC,CAACkB,oBAAxC,EAA8DlB,CAAC,CAACmB,qBAAhE,CADJ;;AAGD,GAnDgC;;AAqDjCC,EAAAA,SArDiC,qBAqDvBpB,CArDuB,EAqDb;AAClB,eAAOC,YAAP;AACI,kCAAmBD,CAAC,CAACqB,iBAArB,EAAwCrB,CAAC,CAACqB,iBAA1C,EAA6DrB,CAAC,CAACqB,iBAA/D,CADJ;;AAGD,GAzDgC;;AA2DjCC,EAAAA,cA3DiC,0BA2DlBtB,CA3DkB,EA2DR;AACvB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACqB,iBADb;;AAGD,GA/DgC;;AAiEjCE,EAAAA,KAjEiC,iBAiE3BvB,CAjE2B,EAiEjB;AACd,eAAOC,YAAP;AACqBD,IAAAA,CAAC,CAACE,uBADvB;;AAGD,GArEgC;;AAuEjCsB,EAAAA,QAvEiC,oBAuExBxB,CAvEwB,EAuEd;AACjB,eAAOC,YAAP;AACI,kCADJ;;AAGWD,IAAAA,CAAC,CAACqB,iBAHb;;;AAMarB,IAAAA,CAAC,CAACqB,iBANf;;;AASD,GAjFgC;;AAmFjCI,EAAAA,IAnFiC,gBAmF5BzB,CAnF4B,EAmFlB;AACb,eAAOC,YAAP;;AAEkBD,IAAAA,CAAC,CAAC0B,mBAFpB;;AAID,GAxFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\n    `;\n  },\n\n  button(t: Theme) {\n    return css`\n      display: inline-block;\n      line-height: ${t.linkButtonLineHeight};\n      padding-left: ${t.linkButtonPaddingX};\n      padding-right: ${t.linkButtonPaddingX};\n    `;\n  },\n\n  buttonOpened() {\n    return css`\n      background: #e1e1e1;\n    `;\n  },\n\n  arrow() {\n    return css`\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    `;\n  },\n\n  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor)};\n    `;\n  },\n\n  useGrayedFocus(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor};\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      display: inline-block;\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n});\n"]}

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

@@ -0,0 +1 @@
+export * from './Link';

package/cjs/components/Link/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _Link = require("./Link");Object.keys(_Link).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Link[key]) return;exports[key] = _Link[key];});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Link';\n"]}