@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

package/cjs/components/Clickable/ClickableButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.styles.ts"],"names":["buttonGlobalClasses","arrow","icon","buttonStyles","buttonRoot","t","css","transitionDuration","transitionTimingFunction","btnBorderColorTransition","btnBackgroundClip","btnIconHoverColor","btnIconDisabledColor","btnIconColor","buttonDefault","btnBackground","btnDefaultBg","btnBackgroundStart","btnDefaultBgStart","btnBackgroundEnd","btnDefaultBgEnd","color","btnDefaultTextColor","borderColor","btnDefaultBorderColor","borderBottomColor","btnDefaultBorderBottomColor","borderWidth","btnBorderWidth","btnDefaultHoverBg","btnDefaultHoverBgStart","btnDefaultHoverBgEnd","btnDefaultHoverBorderColor","btnDefaultHoverBorderBottomColor","buttonActiveStyles","buttonPrimary","btnPrimaryBg","btnPrimaryBgStart","btnPrimaryBgEnd","btnPrimaryTextColor","btnPrimaryBorderColor","btnPrimaryBorderBottomColor","btnPrimaryHoverBg","btnPrimaryHoverBgStart","btnPrimaryHoverBgEnd","btnPrimaryHoverBorderColor","btnPrimaryHoverBorderBottomColor","buttonSuccess","btnSuccessBg","btnSuccessBgStart","btnSuccessBgEnd","btnSuccessTextColor","btnSuccessBorderColor","btnSuccessBorderBottomColor","btnSuccessHoverBg","btnSuccessHoverBgStart","btnSuccessHoverBgEnd","btnSuccessHoverBorderColor","btnSuccessHoverBorderBottomColor","buttonDanger","btnDangerBg","btnDangerBgStart","btnDangerBgEnd","btnDangerTextColor","btnDangerBorderColor","btnDangerBorderBottomColor","btnDangerHoverBg","btnDangerHoverBgStart","btnDangerHoverBgEnd","btnDangerHoverBorderColor","btnDangerHoverBorderBottomColor","buttonPay","btnPayBg","btnPayBgStart","btnPayBgEnd","btnPayTextColor","btnPayBorderColor","btnPayBorderBottomColor","btnPayHoverBg","btnPayHoverBgStart","btnPayHoverBgEnd","btnPayHoverBorderColor","btnPayHoverBorderBottomColor","buttonText","btnTextBg","btnTextTextColor","btnTextBorderColor","btnTextHoverBg","btnTextHoverBorderColor","buttonBackless","btnBacklessBg","btnBacklessTextColor","btnBacklessBorderColor","btnBacklessHoverBg","btnBacklessHoverBorderColor","buttonBorderless","buttonSizeSmall","btnBorderRadiusSmall","fontSize","btnFontSizeSmall","lineHeight","btnLineHeightSmall","paddingX","btnPaddingXSmall","paddingY","btnPaddingYSmall","fontFamilyCompensation","fontFamilyCompensationBaseline","buttonSizeMedium","btnBorderRadiusMedium","btnFontSizeMedium","btnLineHeightMedium","btnPaddingXMedium","btnPaddingYMedium","buttonSizeLarge","btnBorderRadiusLarge","btnFontSizeLarge","btnLineHeightLarge","btnPaddingXLarge","btnPaddingYLarge","buttonSizeSmallWithLeftIcon","btnWithIconPaddingLeftSmall","buttonSizeSmallWithRightIcon","btnWithIconPaddingRightSmall","buttonSizeSmallWithIconWithoutText","buttonSizeMediumWithLeftIcon","btnWithIconPaddingLeftMedium","buttonSizeMediumWithRightIcon","btnWithIconPaddingRightMedium","buttonSizeMediumWithIconWithoutText","buttonSizeLargeWithLeftIcon","btnWithIconPaddingLeftLarge","buttonSizeLargeWithRightIcon","btnWithIconPaddingRightLarge","buttonSizeLargeWithIconWithoutText","buttonNarrow","buttonDisabled","btnDisabledBorderColor","btnDisabledBg","btnDisabledTextColor","buttonDisabledWithoutOutline","buttonFocus","btnInsetWidth","btnOutlineColorFocus","btnFocusShadowWidth","btnBorderColorFocus","buttonWithArrowIconRightSmall","btnIconSizeSmall","buttonWithArrowIconRightMedium","btnIconSizeMedium","buttonWithArrowIconRightLarge","btnIconSizeLarge","buttonWithArrowIconLeftSmall","buttonWithArrowIconLeftMedium","buttonWithArrowIconLeftLarge","btnDefaultActiveBg","btnDefaultActiveBorderColor","borderTopColor","btnDefaultActiveBorderTopColor","btnPrimaryActiveBg","btnPrimaryActiveBorderColor","btnPrimaryActiveBorderTopColor","btnSuccessActiveBg","btnSuccessActiveBorderColor","btnSuccessActiveBorderTopColor","btnDangerActiveBg","btnDangerActiveBorderColor","btnDangerActiveBorderTopColor","btnPayActiveBg","btnPayActiveBorderColor","btnPayActiveBorderTopColor","buttonLink","btnLinkActiveColor","btnTextActiveBg","btnBacklessActiveBg","getButtonSize","size","leftIcon","rightIcon","children","theme","hasIconAndNoContent","getButtonStyles","use","buttonSize","isNarrow","isBorderless","isFocused","isActive","isNotInteractive","active","isUseStateWithoutOutlineInDisabledState","includes","undefined"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, cx, memoizeStyle, prefix } from '../../lib/theming/Emotion';\n\nimport { GetStylesBase } from './Clickable.styles';\nimport { ClickableProps } from './Clickable';\nimport { buttonActiveMixin, buttonHoverMixin, buttonSizeMixin, buttonUseMixin } from './ClickableButton.mixins';\n\nexport const buttonGlobalClasses = prefix('clickable-button')({\n  arrow: 'arrow',\n  icon: 'icon',\n});\n\nexport const buttonStyles = memoizeStyle({\n  buttonRoot(t: Theme) {\n    return css`\n      transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction}\n        ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''};\n\n      background-clip: ${t.btnBackgroundClip};\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      display: inline-block;\n      position: relative;\n      text-align: center;\n      width: 100%;\n\n      &::-moz-focus-inner {\n        border: 0;\n        padding: 0;\n      }\n      &::after {\n        content: '';\n        display: inline-block;\n        vertical-align: baseline;\n        width: 0;\n      }\n\n      &:hover svg {\n        color: ${t.btnIconHoverColor};\n      }\n      &[aria-disabled='true'] svg {\n        color: ${t.btnIconDisabledColor};\n      }\n      & svg {\n        color: ${t.btnIconColor};\n      }\n    `;\n  },\n\n  buttonDefault(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnDefaultBg,\n        btnBackgroundStart: t.btnDefaultBgStart,\n        btnBackgroundEnd: t.btnDefaultBgEnd,\n        color: t.btnDefaultTextColor,\n        borderColor: t.btnDefaultBorderColor,\n        borderBottomColor: t.btnDefaultBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnDefaultHoverBg,\n          btnBackgroundStart: t.btnDefaultHoverBgStart,\n          btnBackgroundEnd: t.btnDefaultHoverBgEnd,\n          borderColor: t.btnDefaultHoverBorderColor,\n          borderBottomColor: t.btnDefaultHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonDefault(t)};\n      }\n    `;\n  },\n  buttonPrimary(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnPrimaryBg,\n        btnBackgroundStart: t.btnPrimaryBgStart,\n        btnBackgroundEnd: t.btnPrimaryBgEnd,\n        color: t.btnPrimaryTextColor,\n        borderColor: t.btnPrimaryBorderColor,\n        borderBottomColor: t.btnPrimaryBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnPrimaryHoverBg,\n          btnBackgroundStart: t.btnPrimaryHoverBgStart,\n          btnBackgroundEnd: t.btnPrimaryHoverBgEnd,\n          borderColor: t.btnPrimaryHoverBorderColor,\n          borderBottomColor: t.btnPrimaryHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonPrimary(t)}\n      }\n    `;\n  },\n  buttonSuccess(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnSuccessBg,\n        btnBackgroundStart: t.btnSuccessBgStart,\n        btnBackgroundEnd: t.btnSuccessBgEnd,\n        color: t.btnSuccessTextColor,\n        borderColor: t.btnSuccessBorderColor,\n        borderBottomColor: t.btnSuccessBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnSuccessHoverBg,\n          btnBackgroundStart: t.btnSuccessHoverBgStart,\n          btnBackgroundEnd: t.btnSuccessHoverBgEnd,\n          borderColor: t.btnSuccessHoverBorderColor,\n          borderBottomColor: t.btnSuccessHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonSuccess(t)}\n      }\n    `;\n  },\n  buttonDanger(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnDangerBg,\n        btnBackgroundStart: t.btnDangerBgStart,\n        btnBackgroundEnd: t.btnDangerBgEnd,\n        color: t.btnDangerTextColor,\n        borderColor: t.btnDangerBorderColor,\n        borderBottomColor: t.btnDangerBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnDangerHoverBg,\n          btnBackgroundStart: t.btnDangerHoverBgStart,\n          btnBackgroundEnd: t.btnDangerHoverBgEnd,\n          borderColor: t.btnDangerHoverBorderColor,\n          borderBottomColor: t.btnDangerHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonDanger(t)}\n      }\n    `;\n  },\n  buttonPay(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnPayBg,\n        btnBackgroundStart: t.btnPayBgStart,\n        btnBackgroundEnd: t.btnPayBgEnd,\n        color: t.btnPayTextColor,\n        borderColor: t.btnPayBorderColor,\n        borderBottomColor: t.btnPayBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnPayHoverBg,\n          btnBackgroundStart: t.btnPayHoverBgStart,\n          btnBackgroundEnd: t.btnPayHoverBgEnd,\n          borderColor: t.btnPayHoverBorderColor,\n          borderBottomColor: t.btnPayHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonPay(t)}\n      }\n    `;\n  },\n  buttonText(t: Theme) {\n    return css`\n      &,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ${buttonUseMixin({\n        btnBackground: t.btnTextBg,\n        color: t.btnTextTextColor,\n        borderColor: t.btnTextBorderColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnTextHoverBg,\n          borderColor: t.btnTextHoverBorderColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonText(t)}\n      }\n    `;\n  },\n  buttonBackless(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnBacklessBg,\n        color: t.btnBacklessTextColor,\n        borderColor: t.btnBacklessBorderColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      color: ${t.btnDefaultTextColor};\n      background: transparent;\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnBacklessHoverBg,\n          borderColor: t.btnBacklessHoverBorderColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonBackless(t)}\n      }\n    `;\n  },\n  buttonBorderless() {\n    return css`\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    `;\n  },\n\n  buttonSizeSmall(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusSmall};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeSmall,\n        lineHeight: t.btnLineHeightSmall,\n        paddingX: t.btnPaddingXSmall,\n        paddingY: t.btnPaddingYSmall,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n  buttonSizeMedium(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusMedium};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeMedium,\n        lineHeight: t.btnLineHeightMedium,\n        paddingX: t.btnPaddingXMedium,\n        paddingY: t.btnPaddingYMedium,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n  buttonSizeLarge(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusLarge};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeLarge,\n        lineHeight: t.btnLineHeightLarge,\n        paddingX: t.btnPaddingXLarge,\n        paddingY: t.btnPaddingYLarge,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n\n  buttonSizeSmallWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftSmall};\n    `;\n  },\n  buttonSizeSmallWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightSmall};\n    `;\n  },\n  buttonSizeSmallWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftSmall};\n      padding-right: ${t.btnWithIconPaddingRightSmall};\n    `;\n  },\n\n  buttonSizeMediumWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftMedium};\n    `;\n  },\n  buttonSizeMediumWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightMedium};\n    `;\n  },\n  buttonSizeMediumWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftMedium};\n      padding-right: ${t.btnWithIconPaddingRightMedium};\n    `;\n  },\n\n  buttonSizeLargeWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftLarge};\n    `;\n  },\n  buttonSizeLargeWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightLarge};\n    `;\n  },\n  buttonSizeLargeWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftLarge};\n      padding-right: ${t.btnWithIconPaddingRightLarge};\n    `;\n  },\n\n  buttonNarrow() {\n    return css`\n      padding-left: 5px;\n      padding-right: 5px;\n    `;\n  },\n\n  buttonDisabled(t: Theme) {\n    return css`\n      cursor: default;\n      pointer-events: none;\n\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor};\n\n      background-image: none;\n      background-color: ${t.btnDisabledBg};\n      color: ${t.btnDisabledTextColor};\n    `;\n  },\n  buttonDisabledWithoutOutline(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBg};\n    `;\n  },\n\n  buttonFocus(t: Theme) {\n    return css`\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover,\n      &:active,\n      &:active:hover {\n        box-shadow: inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus},\n          0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; // override root:hover style\n      }\n    `;\n  },\n\n  buttonWithArrowIconRightSmall(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall});\n    `;\n  },\n  buttonWithArrowIconRightMedium(t: Theme) {\n    return css`\n      padding-right: calc(\n        ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium}\n      );\n    `;\n  },\n  buttonWithArrowIconRightLarge(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge});\n    `;\n  },\n\n  buttonWithArrowIconLeftSmall(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall});\n    `;\n  },\n  buttonWithArrowIconLeftMedium(t: Theme) {\n    return css`\n      padding-left: calc(\n        ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium}\n      );\n    `;\n  },\n  buttonWithArrowIconLeftLarge(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge});\n    `;\n  },\n});\n\nexport const buttonActiveStyles = memoizeStyle({\n  buttonDefault(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnDefaultActiveBg,\n          borderColor: t.btnDefaultActiveBorderColor,\n          borderTopColor: t.btnDefaultActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonPrimary(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnPrimaryActiveBg,\n          borderColor: t.btnPrimaryActiveBorderColor,\n          borderTopColor: t.btnPrimaryActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonSuccess(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnSuccessActiveBg,\n          borderColor: t.btnSuccessActiveBorderColor,\n          borderTopColor: t.btnSuccessActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonDanger(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnDangerActiveBg,\n          borderColor: t.btnDangerActiveBorderColor,\n          borderTopColor: t.btnDangerActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonPay(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnPayActiveBg,\n          borderColor: t.btnPayActiveBorderColor,\n          borderTopColor: t.btnPayActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonLink(t: Theme) {\n    return css`\n      & {\n        color: ${t.btnLinkActiveColor};\n      }\n    `;\n  },\n  buttonText(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnTextActiveBg,\n          borderColor: t.btnTextActiveBg,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonBackless(t: Theme) {\n    return css`\n      &,\n      &:hover {\n        background: ${t.btnBacklessActiveBg};\n      }\n    `;\n  },\n});\n\ninterface GetButtonSizeArgs extends Pick<ClickableProps, 'size' | 'leftIcon' | 'rightIcon' | 'children'> {\n  theme: Theme;\n}\n\nexport const getButtonSize = ({ size, leftIcon, rightIcon, children, theme }: GetButtonSizeArgs) => {\n  const hasIconAndNoContent = (!!leftIcon || !!rightIcon) && !children;\n\n  if (size === 'large') {\n    return {\n      [buttonStyles.buttonSizeLarge(theme)]: true,\n      [buttonStyles.buttonSizeLargeWithLeftIcon(theme)]: !!leftIcon,\n      [buttonStyles.buttonSizeLargeWithRightIcon(theme)]: !!rightIcon,\n      [buttonStyles.buttonSizeLargeWithIconWithoutText(theme)]: hasIconAndNoContent,\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      [buttonStyles.buttonSizeMedium(theme)]: true,\n      [buttonStyles.buttonSizeMediumWithLeftIcon(theme)]: !!leftIcon,\n      [buttonStyles.buttonSizeMediumWithRightIcon(theme)]: !!rightIcon,\n      [buttonStyles.buttonSizeMediumWithIconWithoutText(theme)]: hasIconAndNoContent,\n    };\n  }\n\n  return {\n    [buttonStyles.buttonSizeSmall(theme)]: true,\n    [buttonStyles.buttonSizeSmallWithLeftIcon(theme)]: !!leftIcon,\n    [buttonStyles.buttonSizeSmallWithRightIcon(theme)]: !!rightIcon,\n    [buttonStyles.buttonSizeSmallWithIconWithoutText(theme)]: hasIconAndNoContent,\n  };\n};\n\ninterface GetButtonStylesArgs\n  extends GetStylesBase,\n    Pick<ClickableProps, 'arrow' | 'size' | 'isNarrow' | 'isDisabled' | 'isLoading' | 'isBorderless' | 'isActive'> {\n  buttonSize: Record<string, boolean>;\n  isFocused: boolean;\n  isNotInteractive: boolean;\n}\n\nexport const getButtonStyles = ({\n  use,\n  buttonSize,\n  theme,\n  arrow,\n  size,\n  isNarrow,\n  isBorderless,\n  isFocused,\n  isActive,\n  isNotInteractive,\n}: GetButtonStylesArgs) => {\n  const active = !isNotInteractive && isActive;\n  const isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use ?? '');\n\n  return cx({\n    // root\n    [buttonStyles.buttonRoot(theme)]: true,\n    // use\n    [buttonStyles.buttonDefault(theme)]: use === 'default' || use === undefined,\n    [buttonStyles.buttonPrimary(theme)]: use === 'primary',\n    [buttonStyles.buttonSuccess(theme)]: use === 'success',\n    [buttonStyles.buttonDanger(theme)]: use === 'danger',\n    [buttonStyles.buttonPay(theme)]: use === 'pay',\n    [buttonStyles.buttonText(theme)]: use === 'text',\n    [buttonStyles.buttonBackless(theme)]: use === 'backless',\n    // active\n    [buttonActiveStyles.buttonDefault(theme)]: (use === 'default' || use === undefined) && active,\n    [buttonActiveStyles.buttonPrimary(theme)]: use === 'primary' && active,\n    [buttonActiveStyles.buttonSuccess(theme)]: use === 'success' && active,\n    [buttonActiveStyles.buttonDanger(theme)]: use === 'danger' && active,\n    [buttonActiveStyles.buttonPay(theme)]: use === 'pay' && active,\n    [buttonActiveStyles.buttonText(theme)]: use === 'text' && active,\n    [buttonActiveStyles.buttonBackless(theme)]: use === 'backless' && active,\n    // focused\n    [buttonStyles.buttonFocus(theme)]: isFocused,\n    // size\n    ...buttonSize,\n    // narrow\n    [buttonStyles.buttonNarrow()]: isNarrow,\n    // arrow\n    [buttonStyles.buttonWithArrowIconRightSmall(theme)]: arrow === 'right' && size === 'small',\n    [buttonStyles.buttonWithArrowIconRightMedium(theme)]: arrow === 'right' && size === 'medium',\n    [buttonStyles.buttonWithArrowIconRightLarge(theme)]: arrow === 'right' && size === 'large',\n    [buttonStyles.buttonWithArrowIconLeftSmall(theme)]: arrow === 'left' && size === 'small',\n    [buttonStyles.buttonWithArrowIconLeftMedium(theme)]: arrow === 'left' && size === 'medium',\n    [buttonStyles.buttonWithArrowIconLeftLarge(theme)]: arrow === 'left' && size === 'large',\n    // disabled\n    [buttonStyles.buttonDisabled(theme)]: isNotInteractive,\n    [buttonStyles.buttonDisabledWithoutOutline(theme)]: isUseStateWithoutOutlineInDisabledState && isNotInteractive,\n    // borderless\n    [buttonStyles.buttonBorderless()]: isBorderless && (!isFocused || isNotInteractive),\n  });\n};\n"]}

package/cjs/components/Clickable/ClickableButtonArrow.d.ts

@@ -0,0 +1,4 @@
+import { ClickableProps } from './Clickable';
+declare type ClickableButtonArrowProps = Pick<ClickableProps, 'use' | 'size' | 'arrow'>;
+export declare const ClickableButtonArrow: ({ arrow, size }: ClickableButtonArrowProps) => JSX.Element;
+export {};

package/cjs/components/Clickable/ClickableButtonArrow.js

@@ -0,0 +1,32 @@
+"use strict";exports.__esModule = true;exports.ClickableButtonArrow = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _ArrowRightIcon = require("./ArrowRightIcon");
+var _ArrowLeftIcon = require("./ArrowLeftIcon");
+
+var _ClickableButton = require("./ClickableButton.styles");
+var _ClickableButtonArrow = require("./ClickableButtonArrow.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+var ClickableButtonArrow = function ClickableButtonArrow(_ref) {var _cx;var arrow = _ref.arrow,size = _ref.size;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", {
+      className: (0, _Emotion.cx)((_cx = {}, _cx[
+      _ClickableButton.buttonGlobalClasses.arrow] = true, _cx[
+      _ClickableButtonArrow.buttonArrowStyles.buttonArrowIconRoot()] = true, _cx[
+      _ClickableButtonArrow.buttonArrowStyles.buttonArrowIconRootSmall(theme)] = size === 'small', _cx[
+      _ClickableButtonArrow.buttonArrowStyles.buttonArrowIconRootMedium(theme)] = size === 'medium', _cx[
+      _ClickableButtonArrow.buttonArrowStyles.buttonArrowIconRootLarge(theme)] = size === 'large', _cx[
+      _ClickableButtonArrow.buttonArrowStyles.buttonArrowIconLeft()] = arrow === 'left', _cx)) },
+
+
+    arrow === 'left' && /*#__PURE__*/_react.default.createElement(_ArrowLeftIcon.ArrowLeftIcon, { size: size }),
+    arrow === 'right' && /*#__PURE__*/_react.default.createElement(_ArrowRightIcon.ArrowRightIcon, { size: size })));
+
+
+};exports.ClickableButtonArrow = ClickableButtonArrow;

package/cjs/components/Clickable/ClickableButtonArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonArrow.tsx"],"names":["ClickableButtonArrow","arrow","size","theme","ThemeContext","buttonGlobalClasses","buttonArrowStyles","buttonArrowIconRoot","buttonArrowIconRootSmall","buttonArrowIconRootMedium","buttonArrowIconRootLarge","buttonArrowIconLeft"],"mappings":"6EAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,qE;;;;AAIO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAgD,aAA7CC,KAA6C,QAA7CA,KAA6C,CAAtCC,IAAsC,QAAtCA,IAAsC;AAClF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRC,2CAAoBJ,KADZ,IACoB,IADpB;AAERK,8CAAkBC,mBAAlB,EAFQ,IAEkC,IAFlC;AAGRD,8CAAkBE,wBAAlB,CAA2CL,KAA3C,CAHQ,IAG4CD,IAAI,KAAK,OAHrD;AAIRI,8CAAkBG,yBAAlB,CAA4CN,KAA5C,CAJQ,IAI6CD,IAAI,KAAK,QAJtD;AAKRI,8CAAkBI,wBAAlB,CAA2CP,KAA3C,CALQ,IAK4CD,IAAI,KAAK,OALrD;AAMRI,8CAAkBK,mBAAlB,EANQ,IAMkCV,KAAK,KAAK,MAN5C,OADb;;;AAUGA,IAAAA,KAAK,KAAK,MAAV,iBAAoB,6BAAC,4BAAD,IAAe,IAAI,EAAEC,IAArB,GAVvB;AAWGD,IAAAA,KAAK,KAAK,OAAV,iBAAqB,6BAAC,8BAAD,IAAgB,IAAI,EAAEC,IAAtB,GAXxB,CADF;;;AAeD,CAlBM,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ArrowRightIcon } from './ArrowRightIcon';\nimport { ArrowLeftIcon } from './ArrowLeftIcon';\nimport { ClickableProps } from './Clickable';\nimport { buttonGlobalClasses } from './ClickableButton.styles';\nimport { buttonArrowStyles } from './ClickableButtonArrow.styles';\n\ntype ClickableButtonArrowProps = Pick<ClickableProps, 'use' | 'size' | 'arrow'>;\n\nexport const ClickableButtonArrow = ({ arrow, size }: ClickableButtonArrowProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <div\n      className={cx({\n        [buttonGlobalClasses.arrow]: true,\n        [buttonArrowStyles.buttonArrowIconRoot()]: true,\n        [buttonArrowStyles.buttonArrowIconRootSmall(theme)]: size === 'small',\n        [buttonArrowStyles.buttonArrowIconRootMedium(theme)]: size === 'medium',\n        [buttonArrowStyles.buttonArrowIconRootLarge(theme)]: size === 'large',\n        [buttonArrowStyles.buttonArrowIconLeft()]: arrow === 'left',\n      })}\n    >\n      {arrow === 'left' && <ArrowLeftIcon size={size} />}\n      {arrow === 'right' && <ArrowRightIcon size={size} />}\n    </div>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButtonArrow.styles.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonArrowStyles: {
+    buttonArrowIconRoot(): string;
+    buttonArrowIconRootSmall(t: Theme): string;
+    buttonArrowIconRootMedium(t: Theme): string;
+    buttonArrowIconRootLarge(t: Theme): string;
+    buttonArrowIconLeft(): string;
+};

package/cjs/components/Clickable/ClickableButtonArrow.styles.js

@@ -0,0 +1,40 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonArrowStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var buttonArrowStyles = (0, _Emotion.memoizeStyle)({
+  buttonArrowIconRoot: function buttonArrowIconRoot() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      height: 100%;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: content-box;\n    "])));
+
+
+
+
+
+
+
+
+
+  },
+  buttonArrowIconRootSmall: function buttonArrowIconRootSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])),
+    t.btnWithIconPaddingLeftSmall, t.btnWithIconPaddingLeftSmall,
+    t.btnIconSizeSmall);
+
+  },
+  buttonArrowIconRootMedium: function buttonArrowIconRootMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])),
+    t.btnWithIconPaddingLeftMedium, t.btnWithIconPaddingLeftMedium,
+    t.btnIconSizeMedium);
+
+  },
+  buttonArrowIconRootLarge: function buttonArrowIconRootLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])),
+    t.btnWithIconPaddingLeftLarge, t.btnWithIconPaddingLeftLarge,
+    t.btnIconSizeLarge);
+
+  },
+
+  buttonArrowIconLeft: function buttonArrowIconLeft() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n    "])));
+
+
+  } });exports.buttonArrowStyles = buttonArrowStyles;

package/cjs/components/Clickable/ClickableButtonArrow.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonArrow.styles.ts"],"names":["buttonArrowStyles","buttonArrowIconRoot","css","buttonArrowIconRootSmall","t","btnWithIconPaddingLeftSmall","btnIconSizeSmall","buttonArrowIconRootMedium","btnWithIconPaddingLeftMedium","btnIconSizeMedium","buttonArrowIconRootLarge","btnWithIconPaddingLeftLarge","btnIconSizeLarge","buttonArrowIconLeft"],"mappings":";AACA,oD;;AAEO,IAAMA,iBAAiB,GAAG,2BAAa;AAC5CC,EAAAA,mBAD4C,iCACtB;AACpB,eAAOC,YAAP;;;;;;;;;;AAUD,GAZ2C;AAa5CC,EAAAA,wBAb4C,oCAanBC,CAbmB,EAaT;AACjC,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACC,2BADjB,EACkDD,CAAC,CAACC,2BADpD;AAEWD,IAAAA,CAAC,CAACE,gBAFb;;AAID,GAlB2C;AAmB5CC,EAAAA,yBAnB4C,qCAmBlBH,CAnBkB,EAmBR;AAClC,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACI,4BADjB,EACmDJ,CAAC,CAACI,4BADrD;AAEWJ,IAAAA,CAAC,CAACK,iBAFb;;AAID,GAxB2C;AAyB5CC,EAAAA,wBAzB4C,oCAyBnBN,CAzBmB,EAyBT;AACjC,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACO,2BADjB,EACkDP,CAAC,CAACO,2BADpD;AAEWP,IAAAA,CAAC,CAACQ,gBAFb;;AAID,GA9B2C;;AAgC5CC,EAAAA,mBAhC4C,iCAgCtB;AACpB,eAAOX,YAAP;;;AAGD,GApC2C,EAAb,CAA1B,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonArrowStyles = memoizeStyle({\n  buttonArrowIconRoot() {\n    return css`\n      position: absolute;\n      height: 100%;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: content-box;\n    `;\n  },\n  buttonArrowIconRootSmall(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftSmall} 0 ${t.btnWithIconPaddingLeftSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n  buttonArrowIconRootMedium(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftMedium} 0 ${t.btnWithIconPaddingLeftMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n  buttonArrowIconRootLarge(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftLarge} 0 ${t.btnWithIconPaddingLeftLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  buttonArrowIconLeft() {\n    return css`\n      left: 0;\n    `;\n  },\n});\n"]}

package/cjs/components/Clickable/ClickableButtonCaption.d.ts

@@ -0,0 +1,2 @@
+import { ClickableProps } from './Clickable';
+export declare const ClickableButtonCaption: ({ leftIcon, rightIcon, isDisabled, isLoading, size, children, }: ClickableProps) => JSX.Element;

package/cjs/components/Clickable/ClickableButtonCaption.js

@@ -0,0 +1,57 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ClickableButtonCaption = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+
+
+var _ClickableButtonIcon = require("./ClickableButtonIcon");
+var _ClickableButtonLoadingIcon = require("./ClickableButtonLoadingIcon");
+var _ClickableButtonCaption = require("./ClickableButtonCaption.styles");
+var _Clickable = require("./Clickable.styles");
+
+var ClickableButtonCaption = function ClickableButtonCaption(_ref)
+
+
+
+
+
+
+{var _cx, _cx2;var leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,isDisabled = _ref.isDisabled,isLoading = _ref.isLoading,size = _ref.size,children = _ref.children;
+  var isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", {
+      className: (0, _Emotion.cx)((_cx = {}, _cx[
+      _ClickableButtonCaption.buttonCaptionStyles.buttonCaption()] = true, _cx[
+      _ClickableButtonCaption.buttonCaptionStyles.buttonCaptionDisabled()] = isDisabled, _cx)) },
+
+
+    isLoadingWithoutIcons && /*#__PURE__*/_react.default.createElement(_ClickableButtonLoadingIcon.ClickableButtonLoadingIcon, { size: size }),
+    leftIcon && /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonIcon.ClickableButtonIcon, { size: size, isLoading: isLoading, position: "left", icon: leftIcon },
+    children), /*#__PURE__*/
+
+
+    _react.default.createElement("span", {
+      "data-tid": "test",
+      "aria-live": "assertive",
+      className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+      _Clickable.clickableGlobalClasses.text] = true, _cx2[
+      _ClickableButtonCaption.buttonCaptionStyles.buttonVisibilityHidden()] = isLoadingWithoutIcons, _cx2)) },
+
+
+    children),
+
+    rightIcon && /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonIcon.ClickableButtonIcon, {
+      size: size,
+      isLoading: isLoading,
+      position: "right",
+      icon: rightIcon,
+      hasBothIcons: !!leftIcon && !!rightIcon },
+
+    children)));
+
+
+
+
+};exports.ClickableButtonCaption = ClickableButtonCaption;

package/cjs/components/Clickable/ClickableButtonCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.tsx"],"names":["ClickableButtonCaption","leftIcon","rightIcon","isDisabled","isLoading","size","children","isLoadingWithoutIcons","buttonCaptionStyles","buttonCaption","buttonCaptionDisabled","clickableGlobalClasses","text","buttonVisibilityHidden"],"mappings":"oKAAA;;AAEA;;;AAGA;AACA;AACA;AACA;;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB;;;;;;;AAOhB,mBANpBC,QAMoB,QANpBA,QAMoB,CALpBC,SAKoB,QALpBA,SAKoB,CAJpBC,UAIoB,QAJpBA,UAIoB,CAHpBC,SAGoB,QAHpBA,SAGoB,CAFpBC,IAEoB,QAFpBA,IAEoB,CADpBC,QACoB,QADpBA,QACoB;AACpB,MAAMC,qBAAqB,GAAG,CAACN,QAAD,IAAa,CAACC,SAAd,IAA2BE,SAAzD;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRI,kDAAoBC,aAApB,EADQ,IAC8B,IAD9B;AAERD,kDAAoBE,qBAApB,EAFQ,IAEsCP,UAFtC,OADb;;;AAMGI,IAAAA,qBAAqB,iBAAI,6BAAC,sDAAD,IAA4B,IAAI,EAAEF,IAAlC,GAN5B;AAOGJ,IAAAA,QAAQ;AACP,iCAAC,wCAAD,IAAqB,IAAI,EAAEI,IAA3B,EAAiC,SAAS,EAAED,SAA5C,EAAuD,QAAQ,EAAC,MAAhE,EAAuE,IAAI,EAAEH,QAA7E;AACGK,IAAAA,QADH,CARJ;;;AAYE;AACE,kBAAS,MADX;AAEE,mBAAU,WAFZ;AAGE,MAAA,SAAS,EAAE;AACRK,wCAAuBC,IADf,IACsB,IADtB;AAERJ,kDAAoBK,sBAApB,EAFQ,IAEuCN,qBAFvC,QAHb;;;AAQGD,IAAAA,QARH,CAZF;;AAsBGJ,IAAAA,SAAS;AACR,iCAAC,wCAAD;AACE,MAAA,IAAI,EAAEG,IADR;AAEE,MAAA,SAAS,EAAED,SAFb;AAGE,MAAA,QAAQ,EAAC,OAHX;AAIE,MAAA,IAAI,EAAEF,SAJR;AAKE,MAAA,YAAY,EAAE,CAAC,CAACD,QAAF,IAAc,CAAC,CAACC,SALhC;;AAOGI,IAAAA,QAPH,CAvBJ,CADF;;;;;AAoCD,CA9CM,C","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIcon } from './ClickableButtonIcon';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonCaptionStyles } from './ClickableButtonCaption.styles';\nimport { clickableGlobalClasses } from './Clickable.styles';\n\nexport const ClickableButtonCaption = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  size,\n  children,\n}: ClickableProps) => {\n  const isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;\n\n  return (\n    <div\n      className={cx({\n        [buttonCaptionStyles.buttonCaption()]: true,\n        [buttonCaptionStyles.buttonCaptionDisabled()]: isDisabled,\n      })}\n    >\n      {isLoadingWithoutIcons && <ClickableButtonLoadingIcon size={size} />}\n      {leftIcon && (\n        <ClickableButtonIcon size={size} isLoading={isLoading} position=\"left\" icon={leftIcon}>\n          {children}\n        </ClickableButtonIcon>\n      )}\n      <span\n        data-tid=\"test\"\n        aria-live=\"assertive\"\n        className={cx({\n          [clickableGlobalClasses.text]: true,\n          [buttonCaptionStyles.buttonVisibilityHidden()]: isLoadingWithoutIcons,\n        })}\n      >\n        {children}\n      </span>\n      {rightIcon && (\n        <ClickableButtonIcon\n          size={size}\n          isLoading={isLoading}\n          position=\"right\"\n          icon={rightIcon}\n          hasBothIcons={!!leftIcon && !!rightIcon}\n        >\n          {children}\n        </ClickableButtonIcon>\n      )}\n    </div>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButtonCaption.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const buttonCaptionStyles: {
+    buttonCaption(): string;
+    buttonCaptionDisabled(): string;
+    buttonVisibilityHidden(): string;
+};

package/cjs/components/Clickable/ClickableButtonCaption.styles.js

@@ -0,0 +1,23 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonCaptionStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
+
+var buttonCaptionStyles = (0, _Emotion.memoizeStyle)({
+  buttonCaption: function buttonCaption() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
+
+
+
+
+
+
+  },
+  buttonCaptionDisabled: function buttonCaptionDisabled() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transform: none !important; // override root:active style\n    "])));
+
+
+  },
+
+  buttonVisibilityHidden: function buttonVisibilityHidden() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      visibility: hidden;\n    "])));
+
+
+  } });exports.buttonCaptionStyles = buttonCaptionStyles;

package/cjs/components/Clickable/ClickableButtonCaption.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.styles.ts"],"names":["buttonCaptionStyles","buttonCaption","css","buttonCaptionDisabled","buttonVisibilityHidden"],"mappings":"yRAAA,oD;;AAEO,IAAMA,mBAAmB,GAAG,2BAAa;AAC9CC,EAAAA,aAD8C,2BAC9B;AACd,eAAOC,YAAP;;;;;;;AAOD,GAT6C;AAU9CC,EAAAA,qBAV8C,mCAUtB;AACtB,eAAOD,YAAP;;;AAGD,GAd6C;;AAgB9CE,EAAAA,sBAhB8C,oCAgBrB;AACvB,eAAOF,YAAP;;;AAGD,GApB6C,EAAb,CAA5B,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonCaptionStyles = memoizeStyle({\n  buttonCaption() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    `;\n  },\n  buttonCaptionDisabled() {\n    return css`\n      transform: none !important; // override root:active style\n    `;\n  },\n\n  buttonVisibilityHidden() {\n    return css`\n      visibility: hidden;\n    `;\n  },\n});\n"]}

package/cjs/components/Clickable/ClickableButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {
+    icon: ClickableProps['leftIcon'];
+    position: 'right' | 'left';
+    hasBothIcons?: boolean;
+}
+export declare const ClickableButtonIcon: ({ icon, position, children, isLoading, hasBothIcons, size, }: ClickableButtonIconProps) => JSX.Element;

package/cjs/components/Clickable/ClickableButtonIcon.js

@@ -0,0 +1,64 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ClickableButtonIcon = void 0;var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
+
+
+var _utils = require("../../lib/utils");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+
+var _ClickableButtonIcon = require("./ClickableButtonIcon.styles");
+var _ClickableButtonLoadingIcon = require("./ClickableButtonLoadingIcon");
+var _ClickableButton = require("./ClickableButton.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+
+
+
+
+var getButtonIconSizes = function getButtonIconSizes(theme) {
+  return {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge) };
+
+};
+
+var getIcon = function getIcon(icon, size, theme) {
+  if (icon && /*#__PURE__*/_react.default.isValidElement(icon) && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;
+    var sizes = getButtonIconSizes(theme);
+    return /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size] });
+  }
+
+  return icon;
+};
+
+var ClickableButtonIcon = function ClickableButtonIcon(_ref)
+
+
+
+
+
+
+{var _extends2, _extends3;var icon = _ref.icon,position = _ref.position,children = _ref.children,_ref$isLoading = _ref.isLoading,isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,_ref$hasBothIcons = _ref.hasBothIcons,hasBothIcons = _ref$hasBothIcons === void 0 ? false : _ref$hasBothIcons,_ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var hasNoChildren = !children;
+
+  return /*#__PURE__*/(
+    _react.default.createElement("span", {
+      className: (0, _Emotion.cx)((0, _extends4.default)((_extends2 = {}, _extends2[
+      _ClickableButton.buttonGlobalClasses.icon] = true, _extends2[
+      _ClickableButtonIcon.buttonIconStyles.icon()] = true, _extends2),
+      (0, _ClickableButtonIcon.getButtonIconSizeClassName)(size, position, theme), (_extends3 = {}, _extends3[
+      _ClickableButtonIcon.buttonIconStyles.iconNoMargin()] = hasNoChildren, _extends3))) },
+
+
+    isLoading && !hasBothIcons ? /*#__PURE__*/
+    _react.default.createElement(_ClickableButtonLoadingIcon.ClickableButtonLoadingIcon, { isCentered: false, size: size }) :
+
+    getIcon(icon, size, theme)));
+
+
+
+};exports.ClickableButtonIcon = ClickableButtonIcon;

package/cjs/components/Clickable/ClickableButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.tsx"],"names":["getButtonIconSizes","theme","small","parseInt","btnIconSizeSmall","medium","btnIconSizeMedium","large","btnIconSizeLarge","getIcon","icon","size","React","isValidElement","sizes","cloneElement","props","ClickableButtonIcon","position","children","isLoading","hasBothIcons","ThemeContext","hasNoChildren","buttonGlobalClasses","buttonIconStyles","iconNoMargin"],"mappings":"mPAAA;;;AAGA;AACA;AACA;;;;AAIA;AACA;AACA,2D;;;;;;;;AAQA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAA4C;AACrE,SAAO;AACLC,IAAAA,KAAK,EAAEC,QAAQ,CAACF,KAAK,CAACG,gBAAP,CADV;AAELC,IAAAA,MAAM,EAAEF,QAAQ,CAACF,KAAK,CAACK,iBAAP,CAFX;AAGLC,IAAAA,KAAK,EAAEJ,QAAQ,CAACF,KAAK,CAACO,gBAAP,CAHV,EAAP;;AAKD,CAND;;AAQA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAwBC,IAAxB,EAAwCV,KAAxC,EAAyD;AACvE,MAAIS,IAAI,iBAAIE,eAAMC,cAAN,CAAqBH,IAArB,CAAR,IAAsC,yBAAaA,IAAb,CAA1C,EAA8D;AAC5D,QAAMI,KAAK,GAAGd,kBAAkB,CAACC,KAAD,CAAhC;AACA,wBAAOW,eAAMG,YAAN,CAAmBL,IAAnB,EAAyB,EAAEC,IAAI,sBAAED,IAAI,CAACM,KAAL,CAAWL,IAAb,+BAAqBG,KAAK,CAACH,IAAD,CAAhC,EAAzB,CAAP;AACD;;AAED,SAAOD,IAAP;AACD,CAPD;;AASO,IAAMO,mBAAmB,GAAG,SAAtBA,mBAAsB;;;;;;;AAOH,8BAN9BP,IAM8B,QAN9BA,IAM8B,CAL9BQ,QAK8B,QAL9BA,QAK8B,CAJ9BC,QAI8B,QAJ9BA,QAI8B,uBAH9BC,SAG8B,CAH9BA,SAG8B,+BAHlB,KAGkB,2CAF9BC,YAE8B,CAF9BA,YAE8B,kCAFf,KAEe,sCAD9BV,IAC8B,CAD9BA,IAC8B,0BADvB,OACuB;AAC9B,MAAMV,KAAK,GAAG,uBAAWqB,0BAAX,CAAd;AACA,MAAMC,aAAa,GAAG,CAACJ,QAAvB;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRK,2CAAoBd,IADZ,IACmB,IADnB;AAERe,4CAAiBf,IAAjB,EAFQ,IAEkB,IAFlB;AAGN,2DAA2BC,IAA3B,EAAiCO,QAAjC,EAA2CjB,KAA3C,CAHM;AAIRwB,4CAAiBC,YAAjB,EAJQ,IAI0BH,aAJ1B,cADb;;;AAQGH,IAAAA,SAAS,IAAI,CAACC,YAAd;AACC,iCAAC,sDAAD,IAA4B,UAAU,EAAE,KAAxC,EAA+C,IAAI,EAAEV,IAArD,GADD;;AAGCF,IAAAA,OAAO,CAACC,IAAD,EAAOC,IAAP,EAAaV,KAAb,CAXX,CADF;;;;AAgBD,CA3BM,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { isKonturIcon } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { ClickableProps } from './Clickable';\nimport { buttonIconStyles, getButtonIconSizeClassName } from './ClickableButtonIcon.styles';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonGlobalClasses } from './ClickableButton.styles';\n\nexport interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {\n  icon: ClickableProps['leftIcon'];\n  position: 'right' | 'left';\n  hasBothIcons?: boolean;\n}\n\nconst getButtonIconSizes = (theme: Theme): Record<SizeProp, number> => {\n  return {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n};\n\nconst getIcon = (icon: React.ReactNode, size: SizeProp, theme: Theme) => {\n  if (icon && React.isValidElement(icon) && isKonturIcon(icon)) {\n    const sizes = getButtonIconSizes(theme);\n    return React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  return icon;\n};\n\nexport const ClickableButtonIcon = ({\n  icon,\n  position,\n  children,\n  isLoading = false,\n  hasBothIcons = false,\n  size = 'small',\n}: ClickableButtonIconProps) => {\n  const theme = useContext(ThemeContext);\n  const hasNoChildren = !children;\n\n  return (\n    <span\n      className={cx({\n        [buttonGlobalClasses.icon]: true,\n        [buttonIconStyles.icon()]: true,\n        ...getButtonIconSizeClassName(size, position, theme),\n        [buttonIconStyles.iconNoMargin()]: hasNoChildren,\n      })}\n    >\n      {isLoading && !hasBothIcons ? (\n        <ClickableButtonLoadingIcon isCentered={false} size={size} />\n      ) : (\n        getIcon(icon, size, theme)\n      )}\n    </span>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButtonIcon.styles.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+import { ClickableButtonIconProps } from './ClickableButtonIcon';
+export declare const buttonIconStyles: {
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconNoMargin(): string;
+};
+export declare const getButtonIconSizeClassName: (size: ClickableProps['size'], position: ClickableButtonIconProps['position'], theme: Theme) => {
+    [x: string]: boolean;
+};

package/cjs/components/Clickable/ClickableButtonIcon.styles.js

@@ -0,0 +1,108 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getButtonIconSizeClassName = exports.buttonIconStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _chars = require("../../lib/chars");
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+
+
+
+
+var buttonIconStyles = (0, _Emotion.memoizeStyle)({
+  icon: function icon() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '", "';\n      }\n    "])),
+
+
+
+
+    _chars.ZERO_WIDTH_SPACE_CSS);
+
+
+  },
+
+  iconSmall: function iconSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
+    t.btnIconSizeSmall);
+
+  },
+
+  iconSmallLeft: function iconSmallLeft(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n    "])),
+    t.btnIconGapSmall);
+
+  },
+
+  iconSmallRight: function iconSmallRight(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n    "])),
+    t.btnIconGapSmallRight);
+
+  },
+
+  iconMedium: function iconMedium(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
+    t.btnIconSizeMedium);
+
+  },
+
+  iconMediumLeft: function iconMediumLeft(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n    "])),
+    t.btnIconGapMediumRight);
+
+  },
+
+  iconMediumRight: function iconMediumRight(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n    "])),
+    t.btnIconGapMedium);
+
+  },
+
+  iconLarge: function iconLarge(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
+    t.btnIconSizeLarge);
+
+  },
+
+  iconLargeLeft: function iconLargeLeft(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n    "])),
+    t.btnIconGapLarge);
+
+  },
+
+  iconLargeRight: function iconLargeRight(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n    "])),
+    t.btnIconGapLargeRight);
+
+  },
+
+  iconNoMargin: function iconNoMargin() {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: 0;\n      margin-left: 0;\n    "])));
+
+
+
+  } });exports.buttonIconStyles = buttonIconStyles;
+
+
+var getButtonIconSizeClassName = function getButtonIconSizeClassName(
+size,
+position,
+theme)
+{var _ref3;
+  if (size === 'large') {var _ref;
+    return _ref = {}, _ref[
+    buttonIconStyles.iconLarge(theme)] = true, _ref[
+    buttonIconStyles.iconLargeLeft(theme)] = position === 'left', _ref[
+    buttonIconStyles.iconLargeRight(theme)] = position === 'right', _ref;
+
+  }
+
+  if (size === 'medium') {var _ref2;
+    return _ref2 = {}, _ref2[
+    buttonIconStyles.iconMedium(theme)] = true, _ref2[
+    buttonIconStyles.iconMediumLeft(theme)] = position === 'left', _ref2[
+    buttonIconStyles.iconMediumRight(theme)] = position === 'right', _ref2;
+
+  }
+
+  return _ref3 = {}, _ref3[
+  buttonIconStyles.iconSmall(theme)] = true, _ref3[
+  buttonIconStyles.iconSmallLeft(theme)] = position === 'left', _ref3[
+  buttonIconStyles.iconSmallRight(theme)] = position === 'right', _ref3;
+
+};exports.getButtonIconSizeClassName = getButtonIconSizeClassName;

package/cjs/components/Clickable/ClickableButtonIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.styles.ts"],"names":["buttonIconStyles","icon","css","ZERO_WIDTH_SPACE_CSS","iconSmall","t","btnIconSizeSmall","iconSmallLeft","btnIconGapSmall","iconSmallRight","btnIconGapSmallRight","iconMedium","btnIconSizeMedium","iconMediumLeft","btnIconGapMediumRight","iconMediumRight","btnIconGapMedium","iconLarge","btnIconSizeLarge","iconLargeLeft","btnIconGapLarge","iconLargeRight","btnIconGapLargeRight","iconNoMargin","getButtonIconSizeClassName","size","position","theme"],"mappings":"2TAAA;AACA,oD;;;;;;AAMO,IAAMA,gBAAgB,GAAG,2BAAa;AAC3CC,EAAAA,IAD2C,kBACpC;AACL,eAAOC,YAAP;;;;;AAKgBC,+BALhB;;;AAQD,GAV0C;;AAY3CC,EAAAA,SAZ2C,qBAYjCC,CAZiC,EAYvB;AAClB,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACC,gBADb;;AAGD,GAhB0C;;AAkB3CC,EAAAA,aAlB2C,yBAkB7BF,CAlB6B,EAkBnB;AACtB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACG,eADpB;;AAGD,GAtB0C;;AAwB3CC,EAAAA,cAxB2C,0BAwB5BJ,CAxB4B,EAwBlB;AACvB,eAAOH,YAAP;AACiBG,IAAAA,CAAC,CAACK,oBADnB;;AAGD,GA5B0C;;AA8B3CC,EAAAA,UA9B2C,sBA8BhCN,CA9BgC,EA8BtB;AACnB,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACO,iBADb;;AAGD,GAlC0C;;AAoC3CC,EAAAA,cApC2C,0BAoC5BR,CApC4B,EAoClB;AACvB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACS,qBADpB;;AAGD,GAxC0C;;AA0C3CC,EAAAA,eA1C2C,2BA0C3BV,CA1C2B,EA0CjB;AACxB,eAAOH,YAAP;AACiBG,IAAAA,CAAC,CAACW,gBADnB;;AAGD,GA9C0C;;AAgD3CC,EAAAA,SAhD2C,qBAgDjCZ,CAhDiC,EAgDvB;AAClB,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACa,gBADb;;AAGD,GApD0C;;AAsD3CC,EAAAA,aAtD2C,yBAsD7Bd,CAtD6B,EAsDnB;AACtB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACe,eADpB;;AAGD,GA1D0C;;AA4D3CC,EAAAA,cA5D2C,0BA4D5BhB,CA5D4B,EA4DlB;AACvB,eAAOH,YAAP;AACiBG,IAAAA,CAAC,CAACiB,oBADnB;;AAGD,GAhE0C;;AAkE3CC,EAAAA,YAlE2C,0BAkE5B;AACb,eAAOrB,YAAP;;;;AAID,GAvE0C,EAAb,CAAzB,C;;;AA0EA,IAAMsB,0BAA0B,GAAG,SAA7BA,0BAA6B;AACxCC,IADwC;AAExCC,QAFwC;AAGxCC,KAHwC;AAIrC;AACH,MAAIF,IAAI,KAAK,OAAb,EAAsB;AACpB;AACGzB,IAAAA,gBAAgB,CAACiB,SAAjB,CAA2BU,KAA3B,CADH,IACuC,IADvC;AAEG3B,IAAAA,gBAAgB,CAACmB,aAAjB,CAA+BQ,KAA/B,CAFH,IAE2CD,QAAQ,KAAK,MAFxD;AAGG1B,IAAAA,gBAAgB,CAACqB,cAAjB,CAAgCM,KAAhC,CAHH,IAG4CD,QAAQ,KAAK,OAHzD;;AAKD;;AAED,MAAID,IAAI,KAAK,QAAb,EAAuB;AACrB;AACGzB,IAAAA,gBAAgB,CAACW,UAAjB,CAA4BgB,KAA5B,CADH,IACwC,IADxC;AAEG3B,IAAAA,gBAAgB,CAACa,cAAjB,CAAgCc,KAAhC,CAFH,IAE4CD,QAAQ,KAAK,MAFzD;AAGG1B,IAAAA,gBAAgB,CAACe,eAAjB,CAAiCY,KAAjC,CAHH,IAG6CD,QAAQ,KAAK,OAH1D;;AAKD;;AAED;AACG1B,EAAAA,gBAAgB,CAACI,SAAjB,CAA2BuB,KAA3B,CADH,IACuC,IADvC;AAEG3B,EAAAA,gBAAgB,CAACO,aAAjB,CAA+BoB,KAA/B,CAFH,IAE2CD,QAAQ,KAAK,MAFxD;AAGG1B,EAAAA,gBAAgB,CAACS,cAAjB,CAAgCkB,KAAhC,CAHH,IAG4CD,QAAQ,KAAK,OAHzD;;AAKD,CA1BM,C","sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIconProps } from './ClickableButtonIcon';\n\nexport const buttonIconStyles = memoizeStyle({\n  icon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n\n  iconSmall(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  iconSmallLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapSmall};\n    `;\n  },\n\n  iconSmallRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapSmallRight};\n    `;\n  },\n\n  iconMedium(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  iconMediumLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapMediumRight};\n    `;\n  },\n\n  iconMediumRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapMedium};\n    `;\n  },\n\n  iconLarge(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  iconLargeLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapLarge};\n    `;\n  },\n\n  iconLargeRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapLargeRight};\n    `;\n  },\n\n  iconNoMargin() {\n    return css`\n      margin-right: 0;\n      margin-left: 0;\n    `;\n  },\n});\n\nexport const getButtonIconSizeClassName = (\n  size: ClickableProps['size'],\n  position: ClickableButtonIconProps['position'],\n  theme: Theme,\n) => {\n  if (size === 'large') {\n    return {\n      [buttonIconStyles.iconLarge(theme)]: true,\n      [buttonIconStyles.iconLargeLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconLargeRight(theme)]: position === 'right',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      [buttonIconStyles.iconMedium(theme)]: true,\n      [buttonIconStyles.iconMediumLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconMediumRight(theme)]: position === 'right',\n    };\n  }\n\n  return {\n    [buttonIconStyles.iconSmall(theme)]: true,\n    [buttonIconStyles.iconSmallLeft(theme)]: position === 'left',\n    [buttonIconStyles.iconSmallRight(theme)]: position === 'right',\n  };\n};\n"]}

package/cjs/components/Clickable/ClickableButtonLoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { ClickableProps } from './Clickable';
+interface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {
+    isCentered?: boolean;
+}
+export declare const ClickableButtonLoadingIcon: ({ size, isCentered }: ClickableButtonLoadingIconProps) => JSX.Element;
+export {};

package/cjs/components/Clickable/ClickableButtonLoadingIcon.js

@@ -0,0 +1,19 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ClickableButtonLoadingIcon = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _LoadingIcon = require("../../internal/icons2022/LoadingIcon");
+
+var _Clickable = require("./Clickable");
+var _ClickableButtonLoadingIcon = require("./ClickableButtonLoadingIcon.styles");
+
+
+
+
+
+var ClickableButtonLoadingIcon = function ClickableButtonLoadingIcon(_ref) {var _cx;var size = _ref.size,_ref$isCentered = _ref.isCentered,isCentered = _ref$isCentered === void 0 ? true : _ref$isCentered;
+  return /*#__PURE__*/(
+    _react.default.createElement("div", { "data-tid": _Clickable.ClickableDataTids.spinner, className: (0, _Emotion.cx)((_cx = {}, _cx[_ClickableButtonLoadingIcon.buttonLoadingIconStyles.buttonLoading()] = isCentered, _cx)) }, /*#__PURE__*/
+    _react.default.createElement(_LoadingIcon.LoadingIcon, { size: size })));
+
+
+};exports.ClickableButtonLoadingIcon = ClickableButtonLoadingIcon;

package/cjs/components/Clickable/ClickableButtonLoadingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.tsx"],"names":["ClickableButtonLoadingIcon","size","isCentered","ClickableDataTids","spinner","buttonLoadingIconStyles","buttonLoading"],"mappings":"wKAAA;;AAEA;AACA;;AAEA;AACA;;;;;;AAMO,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA6B,OAAkE,aAA/DC,IAA+D,QAA/DA,IAA+D,wBAAzDC,UAAyD,CAAzDA,UAAyD,gCAA5C,IAA4C;AAC1G;AACE,0CAAK,YAAUC,6BAAkBC,OAAjC,EAA0C,SAAS,EAAE,gCAAMC,oDAAwBC,aAAxB,EAAN,IAAgDJ,UAAhD,OAArD;AACE,iCAAC,wBAAD,IAAa,IAAI,EAAED,IAAnB,GADF,CADF;;;AAKD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon';\n\nimport { ClickableDataTids, ClickableProps } from './Clickable';\nimport { buttonLoadingIconStyles } from './ClickableButtonLoadingIcon.styles';\n\ninterface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {\n  isCentered?: boolean;\n}\n\nexport const ClickableButtonLoadingIcon = ({ size, isCentered = true }: ClickableButtonLoadingIconProps) => {\n  return (\n    <div data-tid={ClickableDataTids.spinner} className={cx({ [buttonLoadingIconStyles.buttonLoading()]: isCentered })}>\n      <LoadingIcon size={size} />\n    </div>\n  );\n};\n"]}

package/cjs/components/Clickable/ClickableButtonLoadingIcon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonLoadingIconStyles: {
+    buttonLoading(): string;
+};

package/cjs/components/Clickable/ClickableButtonLoadingIcon.styles.js

@@ -0,0 +1,17 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonLoadingIconStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var buttonLoadingIconStyles = (0, _Emotion.memoizeStyle)({
+  buttonLoading: function buttonLoading() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
+
+
+
+
+
+
+
+
+
+
+
+  } });exports.buttonLoadingIconStyles = buttonLoadingIconStyles;

package/cjs/components/Clickable/ClickableButtonLoadingIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.styles.ts"],"names":["buttonLoadingIconStyles","buttonLoading","css"],"mappings":"6RAAA,oD;;AAEO,IAAMA,uBAAuB,GAAG,2BAAa;AAClDC,EAAAA,aADkD,2BAClC;AACd,eAAOC,YAAP;;;;;;;;;;;;AAYD,GAdiD,EAAb,CAAhC,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonLoadingIconStyles = memoizeStyle({\n  buttonLoading() {\n    return css`\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    `;\n  },\n});\n"]}

package/cjs/components/Clickable/ClickableButtonOutline.d.ts

@@ -0,0 +1,4 @@
+import { ClickableButtonProps } from './ClickableButton';
+declare type ClickableButtonOutlineProps = Pick<ClickableButtonProps, 'isWarning' | 'isError' | 'isDisabled' | 'isLoading' | 'isFocused'>;
+export declare const ClickableButtonOutline: ({ isWarning, isError, isDisabled, isLoading, isFocused, }: ClickableButtonOutlineProps) => JSX.Element | null;
+export {};