@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -2,17 +2,14 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import { css } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import { globalClasses } from "../Button.styles";
 
-var getBtnPadding = function getBtnPadding(_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 getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, additionalOffset) {
+  if (additionalOffset === void 0) {
+    additionalOffset = 0;
+  }
+
   var paddingTop = paddingY;
   var paddingBottom = paddingY;
   var offset = parseInt(fontFamilyCompensation) || 0;
@@ -38,66 +35,35 @@ var getBtnPadding = function getBtnPadding(_ref) {
   return paddingTop + " " + paddingX + " " + paddingBottom;
 };
 
-export 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 css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n\n    :enabled:hover,\n    :enabled {\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 : "", globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.icon, globalClasses.arrow, color);
+export var buttonUseMixin = function buttonUseMixin(emotion) {
+  return function (btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+    var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\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, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrow, color);
+  };
 };
-export 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
+export var buttonHoverMixin = function buttonHoverMixin(emotion) {
+  return function (btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+    var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n    color: ", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", color, globalClasses.arrowHelper, borderWidth, borderColor);
+  };
 };
-export var buttonActiveMixin = function buttonActiveMixin(_ref4) {
-  var btnBackground = _ref4.btnBackground,
-      btnShadow = _ref4.btnShadow,
-      borderColor = _ref4.borderColor,
-      borderTopColor = _ref4.borderTopColor,
-      borderWidth = _ref4.borderWidth,
-      arrowBgImage = _ref4.arrowBgImage;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
+export var buttonActiveMixin = function buttonActiveMixin(emotion) {
+  return function (btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage) {
+    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
+  };
 };
-export var buttonSizeMixin = function buttonSizeMixin(_ref5) {
-  var fontSize = _ref5.fontSize,
-      lineHeight = _ref5.lineHeight,
-      paddingX = _ref5.paddingX,
-      paddingY = _ref5.paddingY,
-      fontFamilyCompensation = _ref5.fontFamilyCompensation;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding({
-    fontSize: fontSize,
-    paddingY: paddingY,
-    paddingX: paddingX,
-    fontFamilyCompensation: fontFamilyCompensation
-  }), lineHeight);
+export var buttonSizeMixin = function buttonSizeMixin(emotion) {
+  return function (fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
+    return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation), lineHeight);
+  };
 };
-export var buttonSizeMixinIE11 = function buttonSizeMixinIE11(_ref6) {
-  var fontSize = _ref6.fontSize,
-      paddingX = _ref6.paddingX,
-      paddingY = _ref6.paddingY,
-      fontFamilyCompensation = _ref6.fontFamilyCompensation;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding({
-    fontSize: fontSize,
-    paddingY: paddingY,
-    paddingX: paddingX,
-    fontFamilyCompensation: fontFamilyCompensation,
-    additionalOffset: 1
-  }));
+export var buttonSizeMixinIE11 = function buttonSizeMixinIE11(emotion) {
+  return function (fontSize, paddingX, paddingY, fontFamilyCompensation) {
+    return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
+  };
 };
-export var arrowOutlineMixin = function arrowOutlineMixin(_ref7) {
-  var insetWidth = _ref7.insetWidth,
-      outlineColor = _ref7.outlineColor,
-      outlineWidth = _ref7.outlineWidth,
-      insetColor = _ref7.insetColor;
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    .", " {\n      &.", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &.", ":before {\n        bottom: ", ";\n      }\n    }\n  "])), globalClasses.arrowHelper, globalClasses.arrowHelperTop, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, globalClasses.arrowHelperBottom, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, insetWidth, insetWidth, insetWidth, globalClasses.arrowHelperBottom, insetWidth);
+export var arrowOutlineMixin = function arrowOutlineMixin(emotion) {
+  return function (insetWidth, outlineColor, outlineWidth, insetColor) {
+    return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    .", " {\n      &.", " {\n        box-shadow: inset -", " ", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      &.", " {\n        box-shadow: inset -", " -", " 0 0 ", ", ", " 0 0 0 ", " !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ", ";\n        right: ", ";\n        left: ", ";\n      }\n      &.", ":before {\n        bottom: ", ";\n      }\n    }\n  "])), globalClasses.arrowHelper, globalClasses.arrowHelperTop, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, globalClasses.arrowHelperBottom, insetWidth, insetWidth, insetColor, outlineWidth, outlineColor, insetWidth, insetWidth, insetWidth, globalClasses.arrowHelperBottom, insetWidth);
+  };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","icon","arrow","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = ({\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}: Record<string, string>) => {\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    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.icon} svg,\n      .${globalClasses.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}: Record<string, string>) => {\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    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonActiveMixin = ({\n  btnBackground,\n  btnShadow,\n  borderColor,\n  borderTopColor,\n  borderWidth,\n  arrowBgImage,\n}: Record<string, string>) => {\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      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n        &.${globalClasses.arrowHelperTop} {\n          background-image: ${arrowBgImage};\n        }\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = ({\n  fontSize,\n  lineHeight,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: Record<string, string>) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding({ fontSize, paddingY, paddingX, fontFamilyCompensation })};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = ({\n  fontSize,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: Record<string, string>) => {\n  return css`\n    padding: ${getBtnPadding({ fontSize, paddingY, paddingX, fontFamilyCompensation, additionalOffset: 1 })};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = ({ insetWidth, outlineColor, outlineWidth, insetColor }: Record<string, string>) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","emotion","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","arrowHelper","arrow","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":";;AAEA,SAASA,KAAT,QAAsB,qCAAtB;;AAEA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AACpBC,QADoB;AAEpBC,QAFoB;AAGpBC,QAHoB;AAIpBC,sBAJoB;AAKpBC,gBALoB;AAMT,KADXA,gBACW,cADXA,gBACW,GADQ,CACR;AACX,MAAIC,UAAU,GAAGJ,QAAjB;AACA,MAAIK,aAAa,GAAGL,QAApB;AACA,MAAMM,MAAM,GAAGC,QAAQ,CAACL,sBAAD,CAAR,IAAoC,CAAnD;;AAEA,MAAMM,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD,EAAcC,MAAd,EAA8BJ,MAA9B,EAAiD;AAC/D,WAAO,CAACV,KAAK,CAACa,GAAD,OAAS,CAACH,MAAV,CAAN,EAA2BV,KAAK,CAACc,MAAD,OAAYJ,MAAZ,CAAhC,CAAP;AACD,GAFD;;AAIA,MAAIP,QAAQ,KAAK,MAAb,IAAuBO,MAA3B,EAAmC;AACHE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BC,MAA5B,CADJ,CAChCF,UADgC,eACpBC,aADoB;AAElC;AACD,MAAIF,gBAAgB,IAAIG,MAAxB,EAAgC;AACAE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BF,gBAA5B,CADP,CAC7BC,UAD6B,gBACjBC,aADiB;AAE/B;;AAED,SAAUD,UAAV,SAAwBH,QAAxB,SAAoCI,aAApC;AACD,CAvBD;;AAyBA,OAAO,IAAMM,cAAc;AACzB,SADWA,cACX,CAACC,OAAD;AACA;AACEC,IAAAA,aADF;AAEEC,IAAAA,kBAFF;AAGEC,IAAAA,gBAHF;AAIEC,IAAAA,KAJF;AAKEC,IAAAA,WALF;AAMEC,IAAAA,iBANF;AAOEC,IAAAA,WAPF;AAQK;AACH,UAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOH,OAAO,CAACS,GAAf;AACoBD,MAAAA,WAAW,eAAeP,aAD9C;AAEoBO,MAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAF/B;AAGSC,MAAAA,KAHT;AAIoBG,MAAAA,WAJpB,EAImCF,WAJnC;AAKEC,MAAAA,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KALnB;;;AAQGrB,MAAAA,aAAa,CAACyB,WARjB;AASgBH,MAAAA,WAThB,EASqCF,WATrC;;;;;AAcKpB,MAAAA,aAAa,CAAC0B,KAdnB;AAeaP,MAAAA,KAfb;;;;AAmBD,KA9BD,GADK;;AAiCP,OAAO,IAAMQ,gBAAgB;AAC3B,SADWA,gBACX,CAACZ,OAAD;AACA;AACEC,IAAAA,aADF;AAEEC,IAAAA,kBAFF;AAGEC,IAAAA,gBAHF;AAIEC,IAAAA,KAJF;AAKEC,IAAAA,WALF;AAMEC,IAAAA,iBANF;AAOEC,IAAAA,WAPF;AAQK;AACH,UAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOH,OAAO,CAACS,GAAf;AACoBD,MAAAA,WAAW,eAAeP,aAD9C;AAEoBO,MAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAF/B;AAGoBI,MAAAA,WAHpB,EAGmCF,WAHnC;AAIEC,MAAAA,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KAJnB;;AAMSF,MAAAA,KANT;;AAQGnB,MAAAA,aAAa,CAACyB,WARjB;AASgBH,MAAAA,WAThB,EASmCF,WATnC;;;AAYD,KAvBD,GADK;;AA0BP,OAAO,IAAMQ,iBAAiB;AAC5B,SADWA,iBACX,CAACb,OAAD;AACA;AACEC,IAAAA,aADF;AAEEa,IAAAA,SAFF;AAGET,IAAAA,WAHF;AAIEU,IAAAA,cAJF;AAKER,IAAAA,WALF;AAMES,IAAAA,YANF;AAOK;AACH,aAAOhB,OAAO,CAACS,GAAf;;;;AAIsBR,MAAAA,aAJtB;AAKsBM,MAAAA,WALtB,EAKqCF,WALrC;AAMEU,MAAAA,cAAc,aAAWR,WAAX,aAA8BQ,cAA9B,KANhB;;;AASK9B,MAAAA,aAAa,CAACgC,WATnB;AAUkBH,MAAAA,SAVlB;;;AAaK7B,MAAAA,aAAa,CAACyB,WAbnB;AAckBH,MAAAA,WAdlB,EAcqCF,WAdrC;;AAgBQpB,MAAAA,aAAa,CAACiC,cAhBtB;AAiB0BF,MAAAA,YAjB1B;;;;;AAsBD,KA/BD,GADK;;AAkCP,OAAO,IAAMG,eAAe;AAC1B,SADWA,eACX,CAACnB,OAAD;AACA,cAACb,QAAD,EAAmBiC,UAAnB,EAAuC/B,QAAvC,EAAyDD,QAAzD,EAA2EE,sBAA3E,EAA8G;AAC5G,aAAOU,OAAO,CAACS,GAAf;AACatB,MAAAA,QADb;;AAGWD,MAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,CAHxB;AAIe8B,MAAAA,UAJf;;AAMD,KARD,GADK;;AAWP,OAAO,IAAMC,mBAAmB;AAC9B,SADWA,mBACX,CAACrB,OAAD,UAAsB,UAACb,QAAD,EAAmBE,QAAnB,EAAqCD,QAArC,EAAuDE,sBAAvD,EAA0F;AAC9G,WAAOU,OAAO,CAACS,GAAf;AACWvB,IAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,EAAuD,CAAvD,CADxB;;;AAID,GALD,EADK;;AAQP,OAAO,IAAMgC,iBAAiB;AAC5B,SADWA,iBACX,CAACtB,OAAD,UAAsB,UAACuB,UAAD,EAAqBC,YAArB,EAA2CC,YAA3C,EAAiEC,UAAjE,EAAwF;AAC5G,WAAO1B,OAAO,CAACS,GAAf;AACGxB,IAAAA,aAAa,CAACyB,WADjB;AAEMzB,IAAAA,aAAa,CAACiC,cAFpB;AAGyBK,IAAAA,UAHzB,EAGuCA,UAHvC,EAGyDG,UAHzD,EAGwED,YAHxE,EAG8FD,YAH9F;;;AAMMvC,IAAAA,aAAa,CAAC0C,iBANpB;AAOyBJ,IAAAA,UAPzB,EAOwCA,UAPxC,EAO0DG,UAP1D,EAOyED,YAPzE,EAO+FD,YAP/F;;;;;;AAaWD,IAAAA,UAbX;AAcaA,IAAAA,UAdb;AAeYA,IAAAA,UAfZ;;AAiBMtC,IAAAA,aAAa,CAAC0C,iBAjBpB;AAkBcJ,IAAAA,UAlBd;;;;AAsBD,GAvBD,EADK","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\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  (emotion: Emotion) =>\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 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      borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``\n    };\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n  };\n\nexport const buttonHoverMixin =\n  (emotion: Emotion) =>\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 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      borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``\n    };\n    color: ${color};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n  };\n\nexport const buttonActiveMixin =\n  (emotion: Emotion) =>\n  (\n    btnBackground: string,\n    btnShadow: string,\n    borderColor: string,\n    borderTopColor: string,\n    borderWidth: string,\n    arrowBgImage: string,\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}${\n      borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``\n    } !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n        &.${globalClasses.arrowHelperTop} {\n          background-image: ${arrowBgImage};\n        }\n      }\n    }\n  `;\n  };\n\nexport const buttonSizeMixin =\n  (emotion: Emotion) =>\n  (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => {\n    return emotion.css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n  };\n\nexport const buttonSizeMixinIE11 =\n  (emotion: Emotion) => (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => {\n    return emotion.css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n  };\n\nexport const arrowOutlineMixin =\n  (emotion: Emotion) => (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => {\n    return emotion.css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n  };\n"]}

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

@@ -1,6 +1,7 @@
-export declare const buttonUseMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth, }: Record<string, string>) => string;
-export declare const buttonHoverMixin: ({ btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth, }: Record<string, string>) => string;
-export declare const buttonActiveMixin: ({ btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage, }: Record<string, string>) => string;
-export declare const buttonSizeMixin: ({ fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation, }: Record<string, string>) => string;
-export declare const buttonSizeMixinIE11: ({ fontSize, paddingX, paddingY, fontFamilyCompensation, }: Record<string, string>) => string;
-export declare const arrowOutlineMixin: ({ insetWidth, outlineColor, outlineWidth, insetColor }: Record<string, string>) => string;
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const buttonUseMixin: (emotion: Emotion) => (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (emotion: Emotion) => (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (emotion: Emotion) => (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (emotion: Emotion) => (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (emotion: Emotion) => (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (emotion: Emotion) => (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;