@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.11](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.10...@skbkontur/react-ui@5.0.11) (2025-03-03)
+
+
+### Bug Fixes
+
+* **Combobox:** use ComboBoxMenuDataTids in Menu ([#3601](https://github.com/skbkontur/retail-ui/issues/3601)) ([ae8afea](https://github.com/skbkontur/retail-ui/commit/ae8afea4684cfbfa7d03c0abe273a0f062943524))
+* **PasswordInput:**  prevent Input root data-tid override ([#3598](https://github.com/skbkontur/retail-ui/issues/3598)) ([61b2e83](https://github.com/skbkontur/retail-ui/commit/61b2e8303acc4446872e73f7a87f177b55a0fc37))
+
+
+
+
+
+## [5.0.10](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.9...@skbkontur/react-ui@5.0.10) (2025-01-30)
+
+
+### Bug Fixes
+
+* **GlobalLoader:** render in StrictMode ([#3582](https://github.com/skbkontur/retail-ui/issues/3582)) ([0d83d91](https://github.com/skbkontur/retail-ui/commit/0d83d91b6dbc02f37a89fcc6ef1fb5a970f179aa))
+
+
+
+
+
+## [5.0.9](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.8...@skbkontur/react-ui@5.0.9) (2025-01-24)
+
+**Note:** Version bump only for package @skbkontur/react-ui
+
+
+
+
+
+## [5.0.8](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.7...@skbkontur/react-ui@5.0.8) (2025-01-17)
+
+
+### Bug Fixes
+
+* show mobile view on all mobile devices ([#3583](https://github.com/skbkontur/retail-ui/issues/3583)) ([9e64e9e](https://github.com/skbkontur/retail-ui/commit/9e64e9ef1e2ef122f123520703a3935841ea70ec))
+
+
+
+
+
+## [5.0.7](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.6...@skbkontur/react-ui@5.0.7) (2025-01-16)
+
+
+### Bug Fixes
+
+* **Input:** crash on focus after page translation ([#3572](https://github.com/skbkontur/retail-ui/issues/3572)) ([0093e57](https://github.com/skbkontur/retail-ui/commit/0093e57a0c0ad63d385068d418801fc7a4e18007))
+* **Link:** issue with same colors for different uses ([#3585](https://github.com/skbkontur/retail-ui/issues/3585)) ([2413253](https://github.com/skbkontur/retail-ui/commit/2413253fdf4ae21985f341c8bad5069741ea3e11))
+
+
+
+
+
 ## [5.0.6](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.5...@skbkontur/react-ui@5.0.6) (2024-12-23)
 
 

package/cjs/components/Autocomplete/Autocomplete.styles.js

@@ -1,15 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";exports.__esModule = true;exports.styles = void 0;var _Emotion = require("../../lib/theming/Emotion");function _EMOTION_STRINGIFIED_CSS_ERROR__() {return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";}
 
 
 var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      width: ", ";\n    "])),
+    return /*#__PURE__*/(0, _Emotion.css)("display:inline-block;width:",
 
-    t.inputWidth);
+    t.inputWidth, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:root;"));
 
   },
   noPortal: function noPortal() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+    return /*#__PURE__*/(0, _Emotion.css)(process.env.NODE_ENV === "production" ? { name: "bjn8wh", styles: "position:relative" } : { name: "pw9o4h-noPortal", styles: "position:relative;label:noPortal;", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
 
 
   }

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","inputWidth","noPortal"],"sources":["Autocomplete.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputWidth};\n    `;\n  },\n  noPortal() {\n    return css`\n      position: relative;\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAP,eAAA,KAAAA,eAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAACI,UAAU;;EAEzB,CAAC;EACDC,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOJ,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_EMOTION_STRINGIFIED_CSS_ERROR__","styles","exports","memoizeStyle","root","t","css","inputWidth","process","env","NODE_ENV","noPortal","name","toString"],"sources":["Autocomplete.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputWidth};\n    `;\n  },\n  noPortal() {\n    return css`\n      position: relative;\n    `;\n  },\n});\n"],"mappings":"+DAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,SAAAC,iCAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,wBAAOC,YAAG;;IAECD,CAAC,CAACE,UAAU,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAEzB,CAAC;EACDC,QAAQ,WAAAA,SAAA,EAAG;IACT,wBAAOL,YAAG,EAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAE,IAAA,YAAAX,MAAA,4BAAAW,IAAA,qBAAAX,MAAA,uCAAAY,QAAA,EAAAb,gCAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Autocomplete/__creevey__/Autocomplete.creevey.mts

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const commonTests = () => {
+  test('focus and type text', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElement = context.webdriver.findElement({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const mobileHintsTests = () => {
+  test('noInputValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'noInputValue');
+  });
+
+  test('nothingWasFound', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('abc')
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'nothingWasFound');
+  });
+
+  test('updateValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('one')
+      .perform();
+    await delay(200);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'updateValue');
+  });
+};
+
+const sizeTests = () => {
+  test('focus and type text small', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text medium', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text large', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[2]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const menuPosTests = () => {
+  test('focus and type text menu top', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+  test('focus and type text menu bottom', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+kind('Autocomplete', () => {
+  story('Simple', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focused', async (context) => {
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).perform();
+      await delay(1000);
+      await context.matchImage(await autocompleteElement.takeScreenshot());
+    });
+
+    commonTests();
+  });
+
+  story('WithRenderItem', () => {
+    commonTests();
+  });
+
+  story('WithBigRenderItemWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedMenuSize', () => {
+    commonTests();
+  });
+
+  story('WithPercentageWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedWidth', () => {
+    commonTests();
+  });
+
+  story('WithZeroWidth', () => {
+    commonTests();
+  });
+
+  story('MobileHints', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileHintsEN', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileWithTitle', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
+        flaky: {
+          in: ['firefox2022'],
+          tests: ['opened top with portal', 'opened bottom with portal'],
+        },
+      },
+    });
+
+    test('opened top with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+
+    test('opened bottom with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .click(autocompleteElement)
+        .sendKeys('o')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+  });
+
+  story('Size', () => {
+    sizeTests();
+  });
+
+  story('WithDisabledPortal', () => {
+    commonTests();
+    menuPosTests();
+  });
+
+  story('MenuPos', () => {
+    menuPosTests();
+  });
+});

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

@@ -1,6 +1,6 @@
-"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");
+"use strict";exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = void 0;var _Emotion = require("../../lib/theming/Emotion");
 
-var _Button = require("./Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _Button = require("./Button.styles");
 
 var getBtnPadding = function getBtnPadding(paddingY, paddingX) {
   return paddingY + " " + paddingX + " " + paddingY;
@@ -15,16 +15,16 @@ borderColor,
 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    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
-  hasGradient ? "initial" : btnBackground,
-  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
-  color,
-  borderWidth, borderColor,
+  return /*#__PURE__*/(0, _Emotion.css)("background-color:",
+  hasGradient ? "initial" : btnBackground, ";background-image:",
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", ";color:",
+  color, ";box-shadow:0 0 0 ",
+  borderWidth, " ", borderColor, ";:enabled:hover,:enabled{.",
 
 
 
-  _Button.globalClasses.arrow,
-  color);
+  _Button.globalClasses.arrow, " svg{color:",
+  color, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonUseMixin;"));
 
 
 
@@ -39,11 +39,11 @@ borderColor,
 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    color: ", ";\n  "])),
-  hasGradient ? "initial" : btnBackground,
-  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
-  borderWidth, borderColor,
-  color);
+  return /*#__PURE__*/(0, _Emotion.css)("background-color:",
+  hasGradient ? "initial" : btnBackground, ";background-image:",
+  hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", ";box-shadow:0 0 0 ",
+  borderWidth, " ", borderColor, ";color:",
+  color, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonHoverMixin;"));
 
 };
 
@@ -53,32 +53,32 @@ btnShadow,
 borderColor,
 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      .", " {\n        box-shadow: ", ";\n      }\n    }\n  "])),
+  return /*#__PURE__*/(0, _Emotion.css)("&,&:hover{background-image:none!important;background-color:",
 
 
 
-  btnBackground,
-  borderWidth, borderColor,
+  btnBackground, "!important;box-shadow:0 0 0 ",
+  borderWidth, " ", borderColor, "!important;.",
 
-  _Button.globalClasses.innerShadow,
-  btnShadow);
+  _Button.globalClasses.innerShadow, "{box-shadow:",
+  btnShadow, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonActiveMixin;"));
 
 
 
 };
 
 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,
+  return /*#__PURE__*/(0, _Emotion.css)("font-size:",
+  fontSize, ";box-sizing:border-box;padding:",
 
-  getBtnPadding(paddingY, paddingX),
-  lineHeight);
+  getBtnPadding(paddingY, paddingX), ";line-height:",
+  lineHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonSizeMixin;"));
 
 };
 
 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));
+  return /*#__PURE__*/(0, _Emotion.css)("padding:",
+  getBtnPadding(paddingY, paddingX), ";line-height:normal;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonSizeMixinIE11;"));
 
 
 };

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["_Emotion","require","_Button","getBtnPadding","paddingY","paddingX","buttonUseMixin","exports","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderWidth","hasGradient","css","globalClasses","arrow","process","env","NODE_ENV","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":"sLAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA;;AAEA,IAAME,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,wBAAOK,YAAG;EACYD,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EAC/FC,KAAK;EACME,WAAW,OAAID,WAAW;;;;EAIzCI,qBAAa,CAACC,KAAK;EACXN,KAAK,WAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;;AAItB,CAAC;;AAEM,IAAMC,gBAAgB,GAAAd,OAAA,CAAAc,gBAAA,GAAG,SAAnBA,gBAAgBA;AAC3Bb,aAAqB;AACrBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,KAAa;AACbC,WAAmB;AACnBC,WAAmB;AAChB;EACH,IAAMC,WAAW,GAAGL,kBAAkB,KAAKC,gBAAgB;EAC3D,wBAAOK,YAAG;EACYD,WAAW,eAAeN,aAAa;EACvCM,WAAW,wBAAsBL,kBAAkB,UAAKC,gBAAgB,eAAY;EACpFG,WAAW,OAAID,WAAW;EACrCD,KAAK,SAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAElB,CAAC;;AAEM,IAAME,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAG,SAApBA,iBAAiBA;AAC5Bd,aAAqB;AACrBe,SAAiB;AACjBX,WAAmB;AACnBC,WAAmB;AAChB;EACH,wBAAOE,YAAG;;;;EAIcP,aAAa;EACbK,WAAW,OAAID,WAAW;;EAE3CI,qBAAa,CAACQ,WAAW;EACZD,SAAS,WAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;;AAI/B,CAAC;;AAEM,IAAMK,eAAe,GAAAlB,OAAA,CAAAkB,eAAA,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEtB,QAAgB,EAAED,QAAgB,EAAK;EAC3G,wBAAOW,YAAG;EACKW,QAAQ;;EAEVvB,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC;EAC7BsB,UAAU,SAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAE7B,CAAC;;AAEM,IAAMQ,mBAAmB,GAAArB,OAAA,CAAAqB,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIvB,QAAgB,EAAED,QAAgB,EAAK;EACzE,wBAAOW,YAAG;EACGZ,aAAa,CAACC,QAAQ,EAAEC,QAAQ,CAAC,4BAAAa,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;AAGhD,CAAC","ignoreList":[]}