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

package/cjs/components/Button/Button.md

@@ -0,0 +1,261 @@
+### Базовый пример
+По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button onClick={alert} name="report">Создать отчёт</Button>;
+```
+
+### Корневой компонент
+Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
+```
+
+### Различные стили
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+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
+};
+
+<Gapped vertical>
+  <Gapped>
+    <Button use="default">Default</Button>
+    <Button use="primary">Primary</Button>
+    <Button use="success">Success</Button>
+    <Button use="danger">Danger</Button>
+    <Button use="pay">Pay</Button>
+    <Button use="text">Text</Button>
+    <Button use="backless">Backless</Button>
+    <Button use="link">Link</Button>
+  </Gapped>
+  <Gapped style={bgStyle}>
+    <Button use="default">Default</Button>
+    <Button use="primary">Primary</Button>
+    <Button use="success">Success</Button>
+    <Button use="danger">Danger</Button>
+    <Button use="pay">Pay</Button>
+    <Button use="text">Text</Button>
+    <Button use="backless">Backless</Button>
+    <Button use="link">Link</Button>
+  </Gapped>
+</Gapped>
+```
+
+### Иконка
+В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
+
+<Gapped gap={5}>
+  <Button icon={<XIcon16Regular />}>Закрыть</Button>
+  <Button icon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>Закрыть</Button>
+  <Button rightIcon={<XIcon16Regular />}>Закрыть</Button>
+</Gapped>
+```
+
+### Размер
+
+```jsx harmony
+<div
+  style={{
+    display: "flex",
+    alignItems: "end",
+    gap: '10px',
+  }}
+>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
+</div>
+```
+
+### Ширина
+
+```jsx harmony
+<Button width={40}>Закрыть</Button>
+```
+
+### Состояние валидации
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+<Gapped gap={5}>
+  <Button warning>Закрыть</Button>
+  <Button error>Закрыть</Button>
+</Gapped>
+```
+
+### Стрелка
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+
+<Gapped gap={5}>
+  <Button arrow="left" size="medium">
+    Назад
+  </Button>
+  <Button arrow size="medium">
+    Далее
+  </Button>
+</Gapped>
+```
+
+### Состояние загрузки
+
+**Поведение:**
+Кнопка на время нахождения в состоянии загрузки отключается.
+Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+import { MinusCircleIcon16Light } from '@skbkontur/icons/MinusCircleIcon16Light';
+
+const [loading, setLoading] = React.useState(false);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const handleLoadingStart = () => {
+  delay(2000)()
+    .then(() => {
+      setLoading(false);
+    })
+};
+
+const handleClick = () => {
+  setLoading(true);
+  handleLoadingStart();
+};
+
+<Gapped>
+  <Button width={150} onClick={handleClick} loading={loading}>
+    Удалить
+  </Button>
+  <Button icon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
+  </Button>
+  <Button rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
+  </Button>
+  <Button icon={<MinusCircleIcon16Light />} rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
+  </Button>
+</Gapped>
+
+```
+
+### Проп темы
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button theme={{textColorDefault: '#C00000'}}>Ok</Button>
+  <Button use="link" theme={{linkColor: '#C00000'}}>Ok</Button>
+  <Button>Ok</Button>
+</Gapped>
+```
+
+### Кастомизация кнопки-ссылки
+
+```jsx harmony
+import { Toast } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  btnLinkTextUnderlineOffset: '1px',
+}
+
+const underlineOnHoverStyles = {
+  btnLinkTextDecorationColor: 'transparent',
+}
+
+const differentColorStyles = {
+  btnLinkColor: 'blue',
+  btnLinkHoverColor: 'blue',
+  btnLinkActiveColor: '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}><Button use={'link'} theme={styles}>Button-link</Button></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>
+```
+
+### Узкая Кнопка
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button narrow>
+  Создать отчет
+</Button>
+```
+
+### Состояния валидации
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={5}>
+  <Button warning>
+    Warning
+  </Button>
+  <Button error>
+    Error
+  </Button>
+</Gapped>
+```

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string, emotion: Emotion) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string, emotion: Emotion) => string;
-export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string, emotion: Emotion) => string;
-export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, emotion: Emotion) => string;
-export declare const buttonSizeMixinIE11: (paddingX: string, paddingY: string, emotion: Emotion) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;
+export declare const buttonSizeMixinIE11: (paddingX: string, paddingY: string) => string;

package/cjs/components/Button/Button.mixins.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 var _Button = require("./Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -12,11 +12,10 @@ btnBackgroundStart,
 btnBackgroundEnd,
 color,
 borderColor,
-borderWidth,
-emotion)
+borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n\n    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
+  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    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   color,
@@ -37,11 +36,10 @@ btnBackgroundStart,
 btnBackgroundEnd,
 color,
 borderColor,
-borderWidth,
-emotion)
+borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n    color: ", ";\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", ";\n    color: ", ";\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   borderWidth, borderColor,
@@ -53,10 +51,9 @@ var buttonActiveMixin = exports.buttonActiveMixin = function buttonActiveMixin(
 btnBackground,
 btnShadow,
 borderColor,
-borderWidth,
-emotion)
+borderWidth)
 {
-  return 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      .", " {\n        box-shadow: ", ";\n      }\n    }\n  "])),
+  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      .", " {\n        box-shadow: ", ";\n      }\n    }\n  "])),
 
 
 
@@ -70,14 +67,8 @@ emotion)
 
 };
 
-var buttonSizeMixin = exports.buttonSizeMixin = function buttonSizeMixin(
-fontSize,
-lineHeight,
-paddingX,
-paddingY,
-emotion)
-{
-  return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])),
+var buttonSizeMixin = exports.buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
+  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])),
   fontSize,
 
   getBtnPadding(paddingY, paddingX),
@@ -85,8 +76,8 @@ emotion)
 
 };
 
-var buttonSizeMixinIE11 = exports.buttonSizeMixinIE11 = function buttonSizeMixinIE11(paddingX, paddingY, emotion) {
-  return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", ";\n    line-height: normal;\n  "])),
+var buttonSizeMixinIE11 = exports.buttonSizeMixinIE11 = function buttonSizeMixinIE11(paddingX, paddingY) {
+  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", ";\n    line-height: normal;\n  "])),
   getBtnPadding(paddingY, paddingX));
 
 

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

@@ -1 +1 @@
-{"version":3,"names":["_Button","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getBtnPadding","paddingY","paddingX","buttonUseMixin","exports","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderWidth","emotion","hasGradient","css","_taggedTemplateLiteralLoose2","default","globalClasses","arrow","buttonHoverMixin","buttonActiveMixin","btnShadow","innerShadow","buttonSizeMixin","fontSize","lineHeight","buttonSizeMixinIE11"],"sources":["Button.mixins.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (paddingY: string, paddingX: string): string => {\n  return `${paddingY} ${paddingX} ${paddingY}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n  emotion: Emotion,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return emotion.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};\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderWidth: string,\n  emotion: Emotion,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return emotion.css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor};\n    color: ${color};\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderWidth: string,\n  emotion: Emotion,\n) => {\n  return emotion.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} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  emotion: Emotion,\n) => {\n  return emotion.css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (paddingX: string, paddingY: string, emotion: Emotion) => {\n  return emotion.css`\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: normal;\n  `;\n};\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA,oBAAgD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEhD,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAEC,QAAgB,EAAa;EACpE,OAAUD,QAAQ,SAAIC,QAAQ,SAAID,QAAQ;AAC5C,CAAC;;AAEM,IAAME,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA;AACzBE,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AACnBC,OAAgB;AACb;EACH,IAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOI,OAAO,CAACE,GAAG,CAAAlB,eAAA,KAAAA,eAAA,OAAAmB,4BAAA,CAAAC,OAAA;EACIH,WAAW,eAAeP,aAAa;EACvCO,WAAW,wBAAsBN,kBAAkB,UAAKC,gBAAgB,eAAY;EAC/FC,KAAK;EACME,WAAW,EAAID,WAAW;;;;EAIzCO,qBAAa,CAACC,KAAK;EACXT,KAAK;;;;AAItB,CAAC;;AAEM,IAAMU,gBAAgB,GAAAd,OAAA,CAAAc,gBAAA,GAAG,SAAnBA,gBAAgBA;AAC3Bb,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AACnBC,OAAgB;AACb;EACH,IAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAAgB;EAC3D,OAAOI,OAAO,CAACE,GAAG,CAAAjB,gBAAA,KAAAA,gBAAA,OAAAkB,4BAAA,CAAAC,OAAA;EACIH,WAAW,eAAeP,aAAa;EACvCO,WAAW,wBAAsBN,kBAAkB,UAAKC,gBAAgB,eAAY;EACpFG,WAAW,EAAID,WAAW;EACrCD,KAAK;;AAElB,CAAC;;AAEM,IAAMW,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAG,SAApBA,iBAAiBA;AAC5Bd,aAAqB;AACrBe,SAAiB;AACjBX,WAAmB;AACnBC,WAAmB;AACnBC,OAAgB;AACb;EACH,OAAOA,OAAO,CAACE,GAAG,CAAAhB,gBAAA,KAAAA,gBAAA,OAAAiB,4BAAA,CAAAC,OAAA;;;;EAIMV,aAAa;EACbK,WAAW,EAAID,WAAW;;EAE3CO,qBAAa,CAACK,WAAW;EACZD,SAAS;;;;AAI/B,CAAC;;AAEM,IAAME,eAAe,GAAAlB,OAAA,CAAAkB,eAAA,GAAG,SAAlBA,eAAeA;AAC1BC,QAAgB;AAChBC,UAAkB;AAClBtB,QAAgB;AAChBD,QAAgB;AAChBU,OAAgB;AACb;EACH,OAAOA,OAAO,CAACE,GAAG,CAAAf,gBAAA,KAAAA,gBAAA,OAAAgB,4BAAA,CAAAC,OAAA;EACHQ,QAAQ;;EAEVvB,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;EAC7BsB,UAAU;;AAE7B,CAAC;;AAEM,IAAMC,mBAAmB,GAAArB,OAAA,CAAAqB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIvB,QAAgB,EAAED,QAAgB,EAAEU,OAAgB,EAAK;EAC3F,OAAOA,OAAO,CAACE,GAAG,CAAAd,gBAAA,KAAAA,gBAAA,OAAAe,4BAAA,CAAAC,OAAA;EACLf,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;;;AAGhD,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Button","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getBtnPadding","paddingY","paddingX","buttonUseMixin","exports","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderWidth","hasGradient","css","_taggedTemplateLiteralLoose2","default","globalClasses","arrow","buttonHoverMixin","buttonActiveMixin","btnShadow","innerShadow","buttonSizeMixin","fontSize","lineHeight","buttonSizeMixinIE11"],"sources":["Button.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (paddingY: string, paddingX: string): string => {\n  return `${paddingY} ${paddingX} ${paddingY}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: 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};\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: 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};\n    color: ${color};\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: 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} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (paddingX: string, paddingY: string) => {\n  return css`\n    padding: ${getBtnPadding(paddingY, paddingX)};\n    line-height: normal;\n  `;\n};\n"],"mappings":"2YAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,oBAAgD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEhD,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAEC,QAAgB,EAAa;EACpE,OAAUD,QAAQ,SAAIC,QAAQ,SAAID,QAAQ;AAC5C,CAAC;;AAEM,IAAME,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA;AACzBE,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGL,kBAAkB,KAAKC,gBAAgB;EAC3D,WAAOK,YAAG,EAAAjB,eAAA,KAAAA,eAAA,OAAAkB,4BAAA,CAAAC,OAAA;EACYH,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EAC/FC,KAAK;EACME,WAAW,EAAID,WAAW;;;;EAIzCM,qBAAa,CAACC,KAAK;EACXR,KAAK;;;;AAItB,CAAC;;AAEM,IAAMS,gBAAgB,GAAAb,OAAA,CAAAa,gBAAA,GAAG,SAAnBA,gBAAgBA;AAC3BZ,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGL,kBAAkB,KAAKC,gBAAgB;EAC3D,WAAOK,YAAG,EAAAhB,gBAAA,KAAAA,gBAAA,OAAAiB,4BAAA,CAAAC,OAAA;EACYH,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EACpFG,WAAW,EAAID,WAAW;EACrCD,KAAK;;AAElB,CAAC;;AAEM,IAAMU,iBAAiB,GAAAd,OAAA,CAAAc,iBAAA,GAAG,SAApBA,iBAAiBA;AAC5Bb,aAAqB;AACrBc,SAAiB;AACjBV,WAAmB;AACnBC,WAAmB;AAChB;EACH,WAAOE,YAAG,EAAAf,gBAAA,KAAAA,gBAAA,OAAAgB,4BAAA,CAAAC,OAAA;;;;EAIcT,aAAa;EACbK,WAAW,EAAID,WAAW;;EAE3CM,qBAAa,CAACK,WAAW;EACZD,SAAS;;;;AAI/B,CAAC;;AAEM,IAAME,eAAe,GAAAjB,OAAA,CAAAiB,eAAA,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,UAAkB,EAAErB,QAAgB,EAAED,QAAgB,EAAK;EAC3G,WAAOW,YAAG,EAAAd,gBAAA,KAAAA,gBAAA,OAAAe,4BAAA,CAAAC,OAAA;EACKQ,QAAQ;;EAEVtB,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;EAC7BqB,UAAU;;AAE7B,CAAC;;AAEM,IAAMC,mBAAmB,GAAApB,OAAA,CAAAoB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAItB,QAAgB,EAAED,QAAgB,EAAK;EACzE,WAAOW,YAAG,EAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;EACGd,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;;;AAGhD,CAAC","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     root: string;
@@ -8,7 +7,7 @@ export declare const globalClasses: {
     innerShadow: string;
     disabled: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     withArrowIconRightSmall(t: Theme): string;
     withArrowIconRightMedium(t: Theme): string;
@@ -81,7 +80,7 @@ export declare const getStyles: (emotion: Emotion) => {
     loading(): string;
     visibilityHidden(): string;
 };
-export declare const getActiveStyles: (emotion: Emotion) => {
+export declare const activeStyles: {
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;