@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

package/cjs/components/Clickable/Clickable.md

@@ -0,0 +1,210 @@
+По умолчанию `<Clickable>` рендерится в виде кнопки с тегом `<button>`.
+
+<br/>
+<br/>
+
+Это можно изменить при помощи пропов `as` и `view`:
+
+— `as ('button' | 'a')` — изменяет корневой тег, а также при отсутствии `view` задаёт внешний вид;
+
+— `view ('button' | 'link')` — изменяет внешний вид контрола.
+```jsx harmony
+import { Gapped, Clickable, clickableStyles } from '@skbkontur/react-ui';
+import { XIcon } from '@skbkontur/icons/icons/XIcon';
+
+const bgStyle = {
+  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
+  backgroundSize: `16px 16px`,
+  backgroundPosition: `-8px -8px`,
+  padding: 16
+};
+
+<>
+  <p>Ссылки</p>
+  <Gapped gap={15}>
+    <Clickable as="a" href="/">Default</Clickable>
+    <Clickable as="a" use="success" href="/">Success</Clickable>
+    <Clickable as="a" use="danger" href="/">Danger</Clickable>
+    <Clickable as="a" use="grayed" href="/">Grayed</Clickable>
+    <Clickable as="a" isError href="/">Error</Clickable>
+    <Clickable as="a" isDisabled href="/">Disabled</Clickable>
+  </Gapped>
+
+  <p>Кнопки</p>
+  <Gapped vertical>
+    <Gapped>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+    <Gapped style={bgStyle}>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+  </Gapped>
+
+  <p>Гибриды</p>
+  <Gapped>
+    <Clickable as="a" view="button" href="/" >Ссылка, но выглядит как кнопка</Clickable>
+    <Clickable as="button" view="link">Кнопка, но выглядит как ссылка</Clickable>
+    <Clickable
+      as="button"
+      view="custom"
+    >
+      <div
+        style={{
+          background: '#3498db',
+          color: 'white',
+          padding: '10px 7.5px',
+          borderRadius: '5px'
+        }}
+      >Кастомный элемент с тегом кнопки и базовыми возможностями Clickable</div>
+    </Clickable>
+  </Gapped>
+</>
+```
+
+Вы можете использовать любой тег в качестве основы для `<Clickable>` (с помощью `as`), но в таком случае вам придётся самостоятельно реализовывать доступность контрола. Поэтому мы рекомендуем использовать только `a` и `button`, если у вас нет весомой причины для использования другого тега.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="div" view="button">
+    Это div, но он выглядит как кнопка
+  </Clickable>
+  <Clickable as="div" view="link">
+    Это span, но он выглядит как ссылка
+  </Clickable>
+</Gapped>
+```
+
+В чём польза от кастомного вида (`view="custom"`) по сравнению с оборачиванием в нативную кнопку или ссылку?
+
+Мы уже сбросили все мещающие стили, сделали компонент доступным для пользователей с ограниченными возможностями, а также позаботились о таких приятных мелочах как: корректная обработка отключенного состояния, `data-tid` на корне и обработка `rel` на основе значения из `href`.
+```jsx harmony
+<Clickable
+  style={{
+    display: 'inline-block',
+    align: 'center',
+    background: '#151515',
+    color: 'white',
+    boxShadow: '-12px 12px 0 0 #ED6742',
+    padding: '20px 10px',
+    borderRadius: '15px',
+    margin: '30px',
+  }}
+  as="a"
+  href="https://kontur.ru/"
+  view="custom"
+  >
+  <div style={{ fontSize: '20px' }}>Контур</div>
+  <div style={{ fontSize: '25px', fontWeight: '500' }}>Экосистема для бизнеса</div>
+</Clickable>
+```
+
+У `<Clickable>` могут быть иконки сразу с обеих сторон, наличие/отсутствие иконок также влияет на отображение в состоянии загрузки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped gap={20} vertical>
+  <Clickable use={isLoading ? 'danger' : 'success'} onClick={() => setIsLoading(!isLoading)}>
+    {isLoading ? 'Остановить загрузку!!!' : 'Начать загрузку!'}
+  </Clickable>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/">
+      Без иконки
+    </Clickable>
+  </Gapped>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading}>
+      Без иконки
+    </Clickable>
+  </Gapped>
+</Gapped>
+```
+
+`<Clickable>` в виде кнопки может быть в одном из трёх размеров: `small`, `medium` или `large`.
+```jsx harmony
+<div style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Clickable size="small">Маленькая</Clickable>
+  <Clickable size="medium">Средняя</Clickable>
+  <Clickable size="large">Большая</Clickable>
+</div>
+```
+
+`Clickable` в виде кнопки может превращаться в кнопки-ссылки, размер стрелок меняется в зависимости от размера кнопки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable arrow="left">Стрелка влево</Clickable>
+  <Clickable arrow="right">Стрелка вправо</Clickable>
+</Gapped>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `<Clickable>` передана ссылка, ведущая на внешний ресурс, то `<Clickable>` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="a" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Clickable>
+  <Clickable as="a" target="_blank" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Clickable>
+</Gapped>
+```

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

@@ -0,0 +1,11 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+export interface GetStylesBase extends Pick<ClickableProps, 'use'> {
+    theme: Theme;
+}
+export declare const clickableGlobalClasses: {
+    text: string;
+};
+export declare const generalStyles: {
+    root(t: Theme): string;
+};

package/cjs/components/Clickable/Clickable.styles.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.generalStyles = exports.clickableGlobalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+
+
+
+
+
+
+var clickableGlobalClasses = (0, _Emotion.prefix)('clickable')({
+  text: 'text' });exports.clickableGlobalClasses = clickableGlobalClasses;
+
+
+var generalStyles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ", ";\n      }\n    "])),
+
+
+
+
+
+
+
+
+
+
+
+    t.borderColorFocus);
+
+
+  } });exports.generalStyles = generalStyles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.styles.ts"],"names":["clickableGlobalClasses","text","generalStyles","root","t","css","borderColorFocus"],"mappings":";AACA,oD;;;;;;;;AAQO,IAAMA,sBAAsB,GAAG,qBAAO,WAAP,EAAoB;AACxDC,EAAAA,IAAI,EAAE,MADkD,EAApB,CAA/B,C;;;AAIA,IAAMC,aAAa,GAAG,2BAAa;AACxCC,EAAAA,IADwC,gBACnCC,CADmC,EACzB;AACb,eAAOC,YAAP;;;;;;;;;;;;AAYkCD,IAAAA,CAAC,CAACE,gBAZpC;;;AAeD,GAjBuC,EAAb,CAAtB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\n\nexport interface GetStylesBase extends Pick<ClickableProps, 'use'> {\n  theme: Theme;\n}\n\nexport const clickableGlobalClasses = prefix('clickable')({\n  text: 'text',\n});\n\nexport const generalStyles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ${t.borderColorFocus};\n      }\n    `;\n  },\n});\n"]}

package/cjs/components/Clickable/ClickableButton.d.ts

@@ -0,0 +1,5 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonProps extends Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'> {
+    isFocused?: boolean;
+}
+export declare const ClickableButton: ({ leftIcon, rightIcon, isDisabled, isLoading, isFocused, size, isWarning, isError, arrow, children, }: ClickableButtonProps) => JSX.Element;

package/cjs/components/Clickable/ClickableButton.js

@@ -0,0 +1,43 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ClickableButton = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _ClickableButtonArrow = require("./ClickableButtonArrow");
+var _ClickableButtonCaption = require("./ClickableButtonCaption");
+var _ClickableButtonOutline = require("./ClickableButtonOutline");
+
+
+
+
+
+
+
+
+
+var ClickableButton = function ClickableButton(_ref)
+
+
+
+
+
+
+
+
+
+
+{var leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,isDisabled = _ref.isDisabled,isLoading = _ref.isLoading,isFocused = _ref.isFocused,size = _ref.size,isWarning = _ref.isWarning,isError = _ref.isError,arrow = _ref.arrow,children = _ref.children;
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonOutline.ClickableButtonOutline, { isFocused: isFocused, isDisabled: isDisabled, isWarning: isWarning, isError: isError }),
+    arrow && /*#__PURE__*/_react.default.createElement(_ClickableButtonArrow.ClickableButtonArrow, { arrow: arrow, size: size }), /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonCaption.ClickableButtonCaption, {
+      leftIcon: leftIcon,
+      rightIcon: rightIcon,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      size: size },
+
+    children)));
+
+
+
+};exports.ClickableButton = ClickableButton;

package/cjs/components/Clickable/ClickableButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.tsx"],"names":["ClickableButton","leftIcon","rightIcon","isDisabled","isLoading","isFocused","size","isWarning","isError","arrow","children"],"mappings":"6JAAA;;;AAGA;AACA;AACA;;;;;;;;;;AAUO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB;;;;;;;;;;;AAWH,KAV1BC,QAU0B,QAV1BA,QAU0B,CAT1BC,SAS0B,QAT1BA,SAS0B,CAR1BC,UAQ0B,QAR1BA,UAQ0B,CAP1BC,SAO0B,QAP1BA,SAO0B,CAN1BC,SAM0B,QAN1BA,SAM0B,CAL1BC,IAK0B,QAL1BA,IAK0B,CAJ1BC,SAI0B,QAJ1BA,SAI0B,CAH1BC,OAG0B,QAH1BA,OAG0B,CAF1BC,KAE0B,QAF1BA,KAE0B,CAD1BC,QAC0B,QAD1BA,QAC0B;AAC1B;AACE;AACE,iCAAC,8CAAD,IAAwB,SAAS,EAAEL,SAAnC,EAA8C,UAAU,EAAEF,UAA1D,EAAsE,SAAS,EAAEI,SAAjF,EAA4F,OAAO,EAAEC,OAArG,GADF;AAEGC,IAAAA,KAAK,iBAAI,6BAAC,0CAAD,IAAsB,KAAK,EAAEA,KAA7B,EAAoC,IAAI,EAAEH,IAA1C,GAFZ;AAGE,iCAAC,8CAAD;AACE,MAAA,QAAQ,EAAEL,QADZ;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,SAAS,EAAEC,SAJb;AAKE,MAAA,IAAI,EAAEE,IALR;;AAOGI,IAAAA,QAPH,CAHF,CADF;;;;AAeD,CA3BM,C","sourcesContent":["import React from 'react';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonArrow } from './ClickableButtonArrow';\nimport { ClickableButtonCaption } from './ClickableButtonCaption';\nimport { ClickableButtonOutline } from './ClickableButtonOutline';\n\nexport interface ClickableButtonProps\n  extends Pick<\n    ClickableProps,\n    'leftIcon' | 'rightIcon' | 'isDisabled' | 'isLoading' | 'size' | 'arrow' | 'children' | 'isWarning' | 'isError'\n  > {\n  isFocused?: boolean;\n}\n\nexport const ClickableButton = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  isFocused,\n  size,\n  isWarning,\n  isError,\n  arrow,\n  children,\n}: ClickableButtonProps) => {\n  return (\n    <>\n      <ClickableButtonOutline isFocused={isFocused} isDisabled={isDisabled} isWarning={isWarning} isError={isError} />\n      {arrow && <ClickableButtonArrow arrow={arrow} size={size} />}\n      <ClickableButtonCaption\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        size={size}\n      >\n        {children}\n      </ClickableButtonCaption>\n    </>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButton.mixins.d.ts

@@ -0,0 +1,30 @@
+export declare const buttonUseMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    color: string;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonHoverMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth, }: {
+    btnBackground: string;
+    btnBackgroundStart?: string | undefined;
+    btnBackgroundEnd?: string | undefined;
+    borderColor: string;
+    borderBottomColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonActiveMixin: ({ btnBackground, borderColor, borderTopColor, borderWidth, }: {
+    btnBackground: string;
+    borderColor: string;
+    borderTopColor?: string | undefined;
+    borderWidth: string;
+}) => string;
+export declare const buttonSizeMixin: ({ fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation, }: {
+    fontSize: string;
+    lineHeight: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamilyCompensation: string;
+}) => string;

package/cjs/components/Clickable/ClickableButton.mixins.js

@@ -0,0 +1,134 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _ClickableButton = require("./ClickableButton.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var getButtonPadding = function getButtonPadding(_ref)
+
+
+
+
+
+
+
+
+
+
+
+{var fontSize = _ref.fontSize,paddingY = _ref.paddingY,paddingX = _ref.paddingX,fontFamilyCompensation = _ref.fontFamilyCompensation,_ref$additionalOffset = _ref.additionalOffset,additionalOffset = _ref$additionalOffset === void 0 ? 0 : _ref$additionalOffset;
+  var paddingTop = paddingY;
+  var paddingBottom = paddingY;
+  var offset = parseInt(fontFamilyCompensation) || 0;
+
+  var shiftUp = function shiftUp(top, bottom, offset) {
+    return [(0, _DimensionFunctions.shift)(top, "" + -offset), (0, _DimensionFunctions.shift)(bottom, "" + offset)];
+  };
+
+  if (fontSize === '16px' && offset) {var _shiftUp =
+    shiftUp(paddingTop, paddingBottom, offset);paddingTop = _shiftUp[0];paddingBottom = _shiftUp[1];
+  }
+  if (additionalOffset && offset) {var _shiftUp2 =
+    shiftUp(paddingTop, paddingBottom, additionalOffset);paddingTop = _shiftUp2[0];paddingBottom = _shiftUp2[1];
+  }
+
+  return paddingTop + " " + paddingX + " " + paddingBottom;
+};
+
+var buttonUseMixin = function buttonUseMixin(_ref2)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var btnBackground = _ref2.btnBackground,btnBackgroundStart = _ref2.btnBackgroundStart,btnBackgroundEnd = _ref2.btnBackgroundEnd,color = _ref2.color,borderColor = _ref2.borderColor,borderBottomColor = _ref2.borderBottomColor,borderWidth = _ref2.borderWidth;
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    &[aria-disabled='false'],\n    :hover {\n      .", " svg,\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
+  hasGradient ? "initial" : btnBackground,
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
+  color,
+  borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
+
+
+
+  _ClickableButton.buttonGlobalClasses.icon,
+  _ClickableButton.buttonGlobalClasses.arrow,
+  color);
+
+
+
+};exports.buttonUseMixin = buttonUseMixin;
+
+var buttonHoverMixin = function buttonHoverMixin(_ref3)
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var btnBackground = _ref3.btnBackground,btnBackgroundStart = _ref3.btnBackgroundStart,btnBackgroundEnd = _ref3.btnBackgroundEnd,borderColor = _ref3.borderColor,borderBottomColor = _ref3.borderBottomColor,borderWidth = _ref3.borderWidth;
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n  "])),
+  hasGradient ? "initial" : btnBackground,
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
+  borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "");
+
+};exports.buttonHoverMixin = buttonHoverMixin;
+
+var buttonActiveMixin = function buttonActiveMixin(_ref4)
+
+
+
+
+
+
+
+
+
+{var btnBackground = _ref4.btnBackground,borderColor = _ref4.borderColor,borderTopColor = _ref4.borderTopColor,borderWidth = _ref4.borderWidth;
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", "", " !important; // override :hover styles\n    }\n  "])),
+
+
+
+  btnBackground,
+  borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "");
+
+
+};exports.buttonActiveMixin = buttonActiveMixin;
+
+var buttonSizeMixin = function buttonSizeMixin(_ref5)
+
+
+
+
+
+
+
+
+
+
+
+{var fontSize = _ref5.fontSize,lineHeight = _ref5.lineHeight,paddingX = _ref5.paddingX,paddingY = _ref5.paddingY,fontFamilyCompensation = _ref5.fontFamilyCompensation;
+  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])),
+  fontSize,
+
+  getButtonPadding({ fontSize: fontSize, paddingY: paddingY, paddingX: paddingX, fontFamilyCompensation: fontFamilyCompensation }),
+  lineHeight);
+
+};exports.buttonSizeMixin = buttonSizeMixin;

package/cjs/components/Clickable/ClickableButton.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.mixins.ts"],"names":["getButtonPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","buttonGlobalClasses","icon","arrow","buttonHoverMixin","buttonActiveMixin","borderTopColor","buttonSizeMixin","lineHeight"],"mappings":"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","sourcesContent":["import { shift } from '../../lib/styles/DimensionFunctions';\nimport { css } from '../../lib/theming/Emotion';\n\nimport { buttonGlobalClasses } from './ClickableButton.styles';\n\nconst getButtonPadding = ({\n  fontSize,\n  paddingY,\n  paddingX,\n  fontFamilyCompensation,\n  additionalOffset = 0,\n}: {\n  fontSize: string;\n  paddingY: string;\n  paddingX: string;\n  fontFamilyCompensation: string;\n  additionalOffset?: number;\n}): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = ({\n  btnBackground,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  color,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: {\n  btnBackground: string;\n  btnBackgroundStart?: string;\n  btnBackgroundEnd?: string;\n  color: string;\n  borderColor: string;\n  borderBottomColor?: string;\n  borderWidth: string;\n}) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    &[aria-disabled='false'],\n    :hover {\n      .${buttonGlobalClasses.icon} svg,\n      .${buttonGlobalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = ({\n  btnBackground,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: {\n  btnBackground: string;\n  btnBackgroundStart?: string;\n  btnBackgroundEnd?: string;\n  borderColor: string;\n  borderBottomColor?: string;\n  borderWidth: string;\n}) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n  `;\n};\n\nexport const buttonActiveMixin = ({\n  btnBackground,\n  borderColor,\n  borderTopColor,\n  borderWidth,\n}: {\n  btnBackground: string;\n  borderColor: string;\n  borderTopColor?: string;\n  borderWidth: string;\n}) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``} !important; // override :hover styles\n    }\n  `;\n};\n\nexport const buttonSizeMixin = ({\n  fontSize,\n  lineHeight,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: {\n  fontSize: string;\n  lineHeight: string;\n  paddingX: string;\n  paddingY: string;\n  fontFamilyCompensation: string;\n}) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getButtonPadding({ fontSize, paddingY, paddingX, fontFamilyCompensation })};\n    line-height: ${lineHeight};\n  `;\n};\n"]}

package/cjs/components/Clickable/ClickableButton.styles.d.ts

@@ -0,0 +1,63 @@
+import { Theme } from '../../lib/theming/Theme';
+import { GetStylesBase } from './Clickable.styles';
+import { ClickableProps } from './Clickable';
+export declare const buttonGlobalClasses: {
+    arrow: string;
+    icon: string;
+};
+export declare const buttonStyles: {
+    buttonRoot(t: Theme): string;
+    buttonDefault(t: Theme): string;
+    buttonPrimary(t: Theme): string;
+    buttonSuccess(t: Theme): string;
+    buttonDanger(t: Theme): string;
+    buttonPay(t: Theme): string;
+    buttonText(t: Theme): string;
+    buttonBackless(t: Theme): string;
+    buttonBorderless(): string;
+    buttonSizeSmall(t: Theme): string;
+    buttonSizeMedium(t: Theme): string;
+    buttonSizeLarge(t: Theme): string;
+    buttonSizeSmallWithLeftIcon(t: Theme): string;
+    buttonSizeSmallWithRightIcon(t: Theme): string;
+    buttonSizeSmallWithIconWithoutText(t: Theme): string;
+    buttonSizeMediumWithLeftIcon(t: Theme): string;
+    buttonSizeMediumWithRightIcon(t: Theme): string;
+    buttonSizeMediumWithIconWithoutText(t: Theme): string;
+    buttonSizeLargeWithLeftIcon(t: Theme): string;
+    buttonSizeLargeWithRightIcon(t: Theme): string;
+    buttonSizeLargeWithIconWithoutText(t: Theme): string;
+    buttonNarrow(): string;
+    buttonDisabled(t: Theme): string;
+    buttonDisabledWithoutOutline(t: Theme): string;
+    buttonFocus(t: Theme): string;
+    buttonWithArrowIconRightSmall(t: Theme): string;
+    buttonWithArrowIconRightMedium(t: Theme): string;
+    buttonWithArrowIconRightLarge(t: Theme): string;
+    buttonWithArrowIconLeftSmall(t: Theme): string;
+    buttonWithArrowIconLeftMedium(t: Theme): string;
+    buttonWithArrowIconLeftLarge(t: Theme): string;
+};
+export declare const buttonActiveStyles: {
+    buttonDefault(t: Theme): string;
+    buttonPrimary(t: Theme): string;
+    buttonSuccess(t: Theme): string;
+    buttonDanger(t: Theme): string;
+    buttonPay(t: Theme): string;
+    buttonLink(t: Theme): string;
+    buttonText(t: Theme): string;
+    buttonBackless(t: Theme): string;
+};
+interface GetButtonSizeArgs extends Pick<ClickableProps, 'size' | 'leftIcon' | 'rightIcon' | 'children'> {
+    theme: Theme;
+}
+export declare const getButtonSize: ({ size, leftIcon, rightIcon, children, theme }: GetButtonSizeArgs) => {
+    [x: string]: boolean;
+};
+interface GetButtonStylesArgs extends GetStylesBase, Pick<ClickableProps, 'arrow' | 'size' | 'isNarrow' | 'isDisabled' | 'isLoading' | 'isBorderless' | 'isActive'> {
+    buttonSize: Record<string, boolean>;
+    isFocused: boolean;
+    isNotInteractive: boolean;
+}
+export declare const getButtonStyles: ({ use, buttonSize, theme, arrow, size, isNarrow, isBorderless, isFocused, isActive, isNotInteractive, }: GetButtonStylesArgs) => string;
+export {};