@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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

@@ -2,6 +2,7 @@ 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";
 
@@ -35,35 +36,23 @@ var getBtnPadding = function getBtnPadding(fontSize, paddingY, paddingX, fontFam
   return paddingTop + " " + paddingX + " " + paddingBottom;
 };
 
-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 buttonUseMixin = function buttonUseMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, 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        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(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 buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, color, borderColor, borderBottomColor, borderWidth) {
+  var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+  return 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(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 buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, 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 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 buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
+  return 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(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 buttonSizeMixinIE11 = function buttonSizeMixinIE11(fontSize, paddingX, paddingY, fontFamilyCompensation) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    padding: ", ";\n    line-height: normal;\n  "])), getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1));
 };
-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);
-  };
+export var arrowOutlineMixin = function arrowOutlineMixin(insetWidth, outlineColor, outlineWidth, 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);
 };

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

@@ -1 +1 @@
-{"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":"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","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"]}
+{"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","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: 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  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    .${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  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    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n    color: ${color};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: 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      .${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: 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: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\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"]}

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

@@ -1,7 +1,6 @@
-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;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;