@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-9cd4422b72

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","additionalOffset","paddingTop","paddingBottom","shiftUp","top","bottom","offset","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","arrowBackgroundStart","arrowBackgroundEnd","shadow","shadowArrow","shadowArrowLeft","color","border","selectorChecked","selectorArrow","selectorArrowLeft","css","buttonHoverMixin","btnShadow","arrowShadow","arrowLeftShadow","btnBorder","buttonActiveMixin","arrowBackground","arrowLeftBackground","selectorActive","buttonSizeMixin","height","heightShift","lineHeight","selectorLink","selectorFallback","buttonArrowMixin","left","right","size","transform","buttonLoadingArrowMixin","leftArrowTop","background","delay","btn_loading_arrow"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\n\r\nconst getBtnPadding = (fontSize: string, paddingY: string, paddingX: string, additionalOffset = 0): string => {\r\n  let paddingTop = paddingY;\r\n  let paddingBottom = paddingY;\r\n\r\n  const shiftUp = (top: string, bottom: string, offset: number) => {\r\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\r\n  };\r\n\r\n  if (fontSize === '16px') {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, 1);\r\n  }\r\n  if (additionalOffset) {\r\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\r\n  }\r\n\r\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\r\n};\r\n\r\nexport const buttonUseMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  shadow: string,\r\n  shadowArrow: string,\r\n  shadowArrowLeft: string,\r\n  color: string,\r\n  border: string,\r\n  selectorChecked: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n      ? btnBackground\r\n      : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n    color: ${color};\r\n    box-shadow: ${shadow};\r\n    border: ${border};\r\n\r\n    &:not(${selectorChecked}) ${selectorArrow} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrow};\r\n    }\r\n\r\n    &:not(${selectorChecked}) ${selectorArrowLeft} {\r\n      background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n        ? arrowBackgroundStart\r\n        : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n      box-shadow: ${shadowArrowLeft};\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonHoverMixin = (\r\n  btnBackground: string,\r\n  btnBackgroundStart: string,\r\n  btnBackgroundEnd: string,\r\n  arrowBackgroundStart: string,\r\n  arrowBackgroundEnd: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  btnBorder: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:hover {\r\n      background: ${btnBackgroundStart === btnBackgroundEnd && btnBackground\r\n        ? btnBackground\r\n        : `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})`};\r\n      box-shadow: ${btnShadow};\r\n      border-color: ${btnBorder};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to bottom right, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowBackgroundStart === arrowBackgroundEnd\r\n          ? arrowBackgroundStart\r\n          : `linear-gradient(to top left, ${arrowBackgroundStart}, ${arrowBackgroundEnd})`};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonActiveMixin = (\r\n  btnBackground: string,\r\n  arrowBackground: string,\r\n  arrowLeftBackground: string,\r\n  btnShadow: string,\r\n  arrowShadow: string,\r\n  arrowLeftShadow: string,\r\n  selectorActive: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    &:active,\r\n    &${selectorActive} {\r\n      background: ${btnBackground};\r\n      box-shadow: ${btnShadow};\r\n\r\n      ${selectorArrow} {\r\n        background: ${arrowBackground};\r\n        box-shadow: ${arrowShadow};\r\n      }\r\n\r\n      ${selectorArrowLeft} {\r\n        background: ${arrowLeftBackground};\r\n        box-shadow: ${arrowLeftShadow};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonSizeMixin = (\r\n  fontSize: string,\r\n  height: string, // todo: remove, in IE broke screenshots without height\r\n  heightShift: string, // todo: remove, in IE broke screenshots without height\r\n  lineHeight: string,\r\n  paddingX: string,\r\n  paddingY: string,\r\n  selectorLink: string,\r\n  selectorFallback: string,\r\n) => {\r\n  return css`\r\n    font-size: ${fontSize} !important;\r\n\r\n    &:not(${selectorLink}) {\r\n      box-sizing: border-box;\r\n      height: ${shift(height, heightShift)};\r\n      padding: ${getBtnPadding(fontSize, paddingY, paddingX)};\r\n      line-height: ${lineHeight};\r\n\r\n      &${selectorFallback} {\r\n        padding: ${getBtnPadding(fontSize, paddingY, paddingX, 1)};\r\n      }\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonArrowMixin = (\r\n  top: string,\r\n  left: string,\r\n  right: string,\r\n  size: string,\r\n  transform: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow} {\r\n      top: ${top};\r\n      right: ${right};\r\n      height: ${size};\r\n      width: ${size};\r\n      transform: ${transform};\r\n      overflow: hidden;\r\n    }\r\n\r\n    ${selectorArrowLeft} {\r\n      left: ${left};\r\n      transform: rotate(232deg) skewX(25deg) skewY(8deg) !important;\r\n    }\r\n  `;\r\n};\r\n\r\nexport const buttonLoadingArrowMixin = (\r\n  top: string,\r\n  leftArrowTop: string,\r\n  left: string,\r\n  height: string,\r\n  background: string,\r\n  delay: string,\r\n  btn_loading_arrow: string,\r\n  selectorArrow: string,\r\n  selectorArrowLeft: string,\r\n) => {\r\n  return css`\r\n    ${selectorArrow}::before {\r\n      content: '';\r\n      display: block;\r\n      position: absolute;\r\n      top: ${top};\r\n      left: -207px;\r\n      right: -72px;\r\n      height: ${height};\r\n      background: ${background};\r\n      background-size: 41px 100%;\r\n      opacity: 0.2;\r\n      transform: translateX(50px) rotate(-44.3deg);\r\n      animation: ${btn_loading_arrow} 1s linear infinite;\r\n    }\r\n\r\n    ${selectorArrowLeft}::before {\r\n      top: ${leftArrowTop};\r\n      left: ${left};\r\n      animation-direction: reverse;\r\n      transform: translateX(42px) rotate(-44.3deg);\r\n      animation-delay: ${delay};\r\n    }\r\n  `;\r\n};\r\n"]}
+{"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","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/cjs/components/Button/Button.styles.d.ts

@@ -1,41 +1,102 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeSmall(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeMedium(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeLarge(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeSmallLoading(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeMediumLoading(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    sizeLargeLoading(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    fallback(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    validationRoot(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    arrowWarning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    arrowError(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    arrowLeft(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    default(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    primary(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    success(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    danger(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    pay(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    checked(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    active(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+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;
+    link: string;
+    disabled: string;
+};
+export declare const styles: {
+    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;
+    outlineLink(): string;
+    outlineLinkWarning(t: Theme): string;
+    outlineLinkError(t: Theme): string;
+    sizeSmall(t: Theme): string;
+    sizeSmallIE11(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    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;
-    wrap(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    captionLink(): string;
+    captionTranslated(): string;
+    captionDisabled(): string;
+    wrap(t: Theme): string;
+    wrapSmall(t: Theme): string;
+    wrapMedium(t: Theme): string;
+    wrapLarge(t: Theme): string;
     narrow(): string;
     noPadding(): string;
     noRightPadding(): string;
-    wrapLink(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    wrapLink(): string;
     wrapArrow(): string;
     wrapArrowLeft(): string;
-    arrow(): string;
-    icon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    iconSmall(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    iconMedium(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    iconLarge(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    borderless(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    borderless(): string;
+    borderless2022(): string;
+    backlessDisabled2022(t: Theme): string;
+    textDisabled2022(): string;
     loading(): string;
+    visibilityHidden(): string;
+    disableTextSelect(): string;
+};
+export declare const activeStyles: {
+    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;
 };