@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"+ZAAA;AACA;;AAEA,yC;;AAEA,IAAMA,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,CAAC,+BAAMG,GAAN,OAAc,CAACH,MAAf,CAAD,EAA2B,+BAAMI,MAAN,OAAiBJ,MAAjB,CAA3B,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;;AAyBO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,kBAF4B;AAG5BC,gBAH4B;AAI5BC,KAJ4B;AAK5BC,WAL4B;AAM5BC,iBAN4B;AAO5BC,WAP4B;AAQzB;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOM,YAAP;AACsBD,EAAAA,WAAW,eAAeP,aADhD;AAEsBO,EAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAFjC;AAGWC,EAAAA,KAHX;AAIsBG,EAAAA,WAJtB,EAIqCF,WAJrC,EAImDC,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KAJpE;;AAMKI,wBAAcC,WANnB;AAOkBJ,EAAAA,WAPlB,EAOuCF,WAPvC;;;AAUD,CApBM,C;;AAsBA,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC9BX,aAD8B;AAE9BC,kBAF8B;AAG9BC,gBAH8B;AAI9BE,WAJ8B;AAK9BC,iBAL8B;AAM9BC,WAN8B;AAO3B;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOM,YAAP;;AAEwBD,EAAAA,WAAW,eAAeP,aAFlD;AAGwBO,EAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAHnC;AAIwBI,EAAAA,WAJxB,EAIuCF,WAJvC,EAIqDC,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KAJtE;;AAMOI,wBAAcC,WANrB;AAOoBJ,EAAAA,WAPpB,EAOuCF,WAPvC;;;;AAWD,CApBM,C;;AAsBA,IAAMQ,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BZ,aAD+B;AAE/Ba,SAF+B;AAG/BT,WAH+B;AAI/BU,cAJ+B;AAK/BR,WAL+B;AAM/BS,YAN+B;AAO5B;AACH,aAAOP,YAAP;;AAEsBR,EAAAA,aAFtB;AAGsBM,EAAAA,WAHtB,EAGqCF,WAHrC,EAGmDU,cAAc,aAAWR,WAAX,aAA8BQ,cAA9B,KAHjE;;AAKKL,wBAAcO,WALnB;AAMkBH,EAAAA,SANlB;;;AASKJ,wBAAcC,WATnB;AAUkBJ,EAAAA,WAVlB,EAUqCF,WAVrC;;AAYQK,wBAAcQ,cAZtB;AAa0BF,EAAAA,YAb1B;;;;AAiBD,CAzBM,C;;AA2BA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB;AAC7B/B,QAD6B;AAE7BgC,UAF6B;AAG7B9B,QAH6B;AAI7BD,QAJ6B;AAK7BE,sBAL6B;AAM1B;AACH,aAAOkB,YAAP;AACerB,EAAAA,QADf;;AAGaD,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,CAH1B;AAIiB6B,EAAAA,UAJjB;;AAMD,CAbM,C;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AACjCjC,QADiC;AAEjCE,QAFiC;AAGjCD,QAHiC;AAIjCE,sBAJiC;AAK9B;AACH,aAAOkB,YAAP;AACatB,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,EAAuD,CAAvD,CAD1B;;;AAID,CAVM,C;;AAYA,IAAM+B,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BC,UAD+B;AAE/BC,YAF+B;AAG/BC,YAH+B;AAI/BC,UAJ+B;AAK5B;AACH,aAAOjB,YAAP;AACKC,wBAAcC,WADnB;AAEQD,wBAAcQ,cAFtB;AAG2BK,EAAAA,UAH3B,EAGyCA,UAHzC,EAG2DG,UAH3D,EAG0ED,YAH1E,EAGgGD,YAHhG;;;AAMQd,wBAAciB,iBANtB;AAO2BJ,EAAAA,UAP3B,EAO0CA,UAP1C,EAO4DG,UAP5D,EAO2ED,YAP3E,EAOiGD,YAPjG;;;;;;AAaaD,EAAAA,UAbb;AAceA,EAAAA,UAdf;AAecA,EAAAA,UAfd;;AAiBQb,wBAAciB,iBAjBtB;AAkBgBJ,EAAAA,UAlBhB;;;;AAsBD,CA5BM,C","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};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    &:hover {\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};\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    background-image: none;\n    background-color: ${btnBackground};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\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\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"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","emotion","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","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"]}

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

@@ -1,13 +1,24 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
+    root: string;
     arrowHelper: string;
     arrowHelperTop: string;
     arrowHelperBottom: string;
+    arrow: string;
     caption: string;
+    text: string;
     innerShadow: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
+    withArrowIconRightSmall(t: Theme): string;
+    withArrowIconRightMedium(t: Theme): string;
+    withArrowIconRightLarge(t: Theme): string;
+    withArrowIconLeftSmall(t: Theme): string;
+    withArrowIconLeftMedium(t: Theme): string;
+    withArrowIconLeftLarge(t: Theme): string;
+    simulatedPress(): string;
     outline(): string;
     outlineWarning(t: Theme): string;
     outlineError(t: Theme): string;
@@ -20,24 +31,42 @@ export declare const styles: {
     sizeMediumIE11(t: Theme): string;
     sizeLarge(t: Theme): string;
     sizeLargeIE11(t: Theme): string;
+    sizeSmallWithIcon(t: Theme): string;
+    sizeMediumWithIcon(t: Theme): string;
+    sizeLargeWithIcon(t: Theme): string;
+    sizeSmallWithIconWithoutText(t: Theme): string;
+    sizeMediumWithIconWithoutText(t: Theme): string;
+    sizeLargeWithIconWithoutText(t: Theme): string;
     link(t: Theme): string;
+    linkLineHeight(): string;
+    linkLineHeightSafariFallback(): string;
     linkFocus(t: Theme): string;
     linkDisabled(t: Theme): string;
     focus(t: Theme): string;
     disabled(t: Theme): string;
+    disabledWithoutOutline(t: Theme): string;
     arrowWarning(t: Theme): string;
     arrowError(t: Theme): string;
     arrowFocus(t: Theme): string;
     arrow(): string;
     arrowLeft(): string;
+    arrowIconRoot(): string;
+    arrowIconRootSmall(t: Theme): string;
+    arrowIconRootMedium(t: Theme): string;
+    arrowIconRootLarge(t: Theme): string;
+    arrowIconLeft(): string;
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;
     danger(t: Theme): string;
     pay(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
     checked(t: Theme): string;
+    checked2022(t: Theme): string;
     checkedFocused(t: Theme): string;
     checkedDisabled(t: Theme): string;
+    checkedDisabled2022(t: Theme): string;
     caption(): string;
     captionLink(): string;
     captionTranslated(): string;
@@ -49,24 +78,23 @@ export declare const styles: {
     narrow(): string;
     noPadding(): string;
     noRightPadding(): string;
-    iconNoRightPadding(): string;
-    iconLink(t: Theme): string;
     wrapLink(): string;
     wrapArrow(): string;
     wrapArrowLeft(): string;
-    icon(): string;
-    iconSmall(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconLarge(t: Theme): string;
     borderless(): string;
+    borderless2022(): string;
+    backlessDisabled2022(t: Theme): string;
+    textDisabled2022(): string;
     loading(): string;
     visibilityHidden(): string;
 };
-export declare const activeStyles: {
+export declare const getActiveStyles: (emotion: Emotion) => {
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;
     danger(t: Theme): string;
     pay(t: Theme): string;
     link(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
 };