@kiwicom/orbit-components/es/Button/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { ICON_SIZES } from "../Icon/consts";
import { TYPE_OPTIONS, SIZE_OPTIONS, TOKENS } from "./consts";
import Loading, { StyledSpinner } from "../Loading";
import { getSize } from "../Icon";

const getSizeToken = name => ({
  theme,
  size
}) => {
  const tokens = {
    [TOKENS.heightButton]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.heightButtonLarge,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.heightButtonNormal,
      [SIZE_OPTIONS.SMALL]: theme.orbit.heightButtonSmall
    },
    [TOKENS.loadingWidth]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.widthIconMedium,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.widthIconMedium,
      [SIZE_OPTIONS.SMALL]: theme.orbit.widthIconSmall
    },
    [TOKENS.loadingHeight]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.heightIconMedium,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.heightIconMedium,
      [SIZE_OPTIONS.SMALL]: theme.orbit.heightIconSmall
    },
    [TOKENS.fontSizeButton]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeButtonLarge,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeButtonNormal,
      [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeButtonSmall
    },
    [TOKENS.paddingButton]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.paddingButtonLarge,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingButtonNormal,
      [SIZE_OPTIONS.SMALL]: theme.orbit.paddingButtonSmall
    },
    [TOKENS.paddingButtonWithIcon]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.paddingButtonLargeWithIcon,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingButtonNormalWithIcon,
      [SIZE_OPTIONS.SMALL]: theme.orbit.paddingButtonSmallWithIcon
    },
    [TOKENS.marginRightIcon]: {
      [SIZE_OPTIONS.LARGE]: theme.orbit.marginButtonIconLarge,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.marginButtonIconNormal,
      [SIZE_OPTIONS.SMALL]: theme.orbit.marginButtonIconSmall
    }
  };
  return tokens[name][size];
};

const getTypeToken = name => ({
  theme,
  type
}) => {
  const tokens = {
    [TOKENS.backgroundButton]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimary,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebook,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogle,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token backgroundButtonWhite

    },
    [TOKENS.backgroundButtonHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoHover,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessHover,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningHover,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookHover,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleHover,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhiteHover // TODO: token backgroundButtonWhiteHover

    },
    [TOKENS.backgroundButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhiteActive // TODO: token backgroundButtonWhiteActive

    },
    [TOKENS.backgroundButtonBordered]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.WHITE]: "transparent" // TODO: token backgroundButtonWhiteBordered

    },
    [TOKENS.backgroundButtonBorderedHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.WHITE]: "rgba(255, 255, 255, 0.2)" // TODO: token backgroundButtonWhiteBorderedHover

    },
    [TOKENS.backgroundButtonBorderedActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBorderedActive,
      [TYPE_OPTIONS.WHITE]: "rgba(255, 255, 255, 0.25)" // TODO: token backgroundButtonWhiteBorderedActive

    },
    [TOKENS.colorTextButton]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimary,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondary,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebook,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogle,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkNormal // TODO: token colorTextButtonWhite

    },
    [TOKENS.colorTextButtonBordered]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBordered,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBordered,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBordered,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBordered,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBordered,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBordered,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBordered,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBordered,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token colorTextButtonWhiteBordered

    },
    [TOKENS.colorTextButtonHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoHover,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessHover,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningHover,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalHover,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookHover,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleHover,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkNormalHover // TODO: token colorTextButtonWhiteHover

    },
    [TOKENS.colorTextButtonBorderedHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedHover,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedHover,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedHover,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedHover,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedHover,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedHover,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token colorTextButtonWhiteBorderedHover

    },
    [TOKENS.colorTextButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkNormalActive // TODO: token colorTextButtonWhiteActive

    },
    [TOKENS.colorTextButtonBorderedActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token colorTextButtonWhiteBorderedActive

    },
    [TOKENS.borderColorButton]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBordered,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBordered,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBordered,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBordered,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBordered,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBordered,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBordered,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBordered,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token borderColorButtonWhiteBordered

    },
    [TOKENS.borderColorButtonHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedHover,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedHover,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedHover,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedHover,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedHover,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedHover,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token borderColorButtonWhiteBorderedHover

    },
    [TOKENS.borderColorButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite // TODO: token borderColorButtonWhiteBorderedActive

    }
  };
  return tokens[name][type];
};

const IconContainer = styled(({
  className,
  children
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "Button__IconContainer",
  componentId: "sc-1brqp3f-0"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:", ";color:", ";transition:background ", " ease-in-out,box-shadow ", " ease-in-out;> *{width:", ";height:", ";}"], ({
  onlyIcon
}) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon), ({
  bordered
}) => bordered ? getTypeToken(TOKENS.colorTextButtonBordered) : getTypeToken(TOKENS.colorTextButton), ({
  theme
}) => theme.orbit.durationFast, ({
  theme
}) => theme.orbit.durationFast, ({
  sizeIcon
}) => getSize(sizeIcon), ({
  sizeIcon
}) => getSize(sizeIcon));
IconContainer.defaultProps = {
  theme: defaultTokens
};
const IconContainerRight = styled(IconContainer).withConfig({
  displayName: "Button__IconContainerRight",
  componentId: "sc-1brqp3f-1"
})(["margin-right:0;margin-left:", ";"], ({
  onlyIcon
}) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon));
IconContainerRight.defaultProps = {
  theme: defaultTokens
};
export const StyledButton = styled((_ref) => {
  let {
    theme,
    component,
    circled,
    external,
    type,
    icon,
    iconLeft,
    iconRight,
    sizeIcon,
    width,
    bordered,
    loading,
    onlyIcon,
    block,
    style,
    dataTest,
    submit
  } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "component", "circled", "external", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "bordered", "loading", "onlyIcon", "block", "style", "dataTest", "submit"]);

  const isButtonWithHref = component === "button" && props.href;
  const Component = isButtonWithHref ? "a" : component;
  const buttonType = submit ? "submit" : "button";
  return React.createElement(Component, _extends({
    "data-test": dataTest,
    type: !isButtonWithHref ? buttonType : undefined
  }, props), props.children);
}).withConfig({
  displayName: "Button__StyledButton",
  componentId: "sc-1brqp3f-2"
})(["position:relative;display:", ";justify-content:center;align-items:center;box-sizing:border-box;appearance:none;text-decoration:none;width:", ";flex:", ";height:", ";background:", ";color:", " !important;border:0;border-radius:", ";padding:0;padding-right:", ";padding-left:", ";font-weight:", "!important;font-size:", ";cursor:", ";transition:all 0.15s ease-in-out !important;outline:0;opacity:", ";pointer-events:", ";box-shadow:", ";&:hover{background:", ";box-shadow:", ";color:", "!important;", "{color:", ";}}&:active{", ";background:", ";box-shadow:", ";color:", "!important;& ", "{color:", ";}}&:enabled:focus{box-shadow:", " ", ";}", "{width:", ";height:", ";}"], ({
  href,
  component
}) => href || component === "a" ? "inline-flex" : "flex", ({
  block,
  width,
  onlyIcon
}) => block ? "100%" : width && `${width}px` || onlyIcon && getSizeToken(TOKENS.heightButton) || "auto", ({
  block
}) => block ? "1 1 100%" : "0 0 auto", getSizeToken(TOKENS.heightButton), ({
  bordered
}) => bordered ? getTypeToken(TOKENS.backgroundButtonBordered) : getTypeToken(TOKENS.backgroundButton), ({
  bordered
}) => bordered ? getTypeToken(TOKENS.colorTextButtonBordered) : getTypeToken(TOKENS.colorTextButton), ({
  theme,
  circled
}) => circled ? getSizeToken(TOKENS.heightButton) : theme.orbit.borderRadiusNormal, ({
  onlyIcon,
  iconRight
}) => onlyIcon && "0" || (iconRight ? getSizeToken(TOKENS.paddingButtonWithIcon) : getSizeToken(TOKENS.paddingButton)), ({
  onlyIcon,
  icon,
  iconLeft
}) => onlyIcon && "0" || (iconLeft || icon ? getSizeToken(TOKENS.paddingButtonWithIcon) : getSizeToken(TOKENS.paddingButton)), ({
  theme
}) => theme.orbit.fontWeightBold, getSizeToken(TOKENS.fontSizeButton), ({
  disabled
}) => disabled ? "default" : "pointer", ({
  disabled,
  theme
}) => disabled && theme.orbit.opacityButtonDisabled, ({
  disabled
}) => disabled && "none", ({
  bordered,
  theme,
  type
}) => bordered && `inset 0 0 0 1px ${getTypeToken(TOKENS.borderColorButton)({
  theme,
  type
})}`, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.backgroundButtonBorderedHover) : getTypeToken(TOKENS.backgroundButtonHover)), ({
  disabled,
  bordered,
  theme,
  type
}) => !disabled && bordered && `inset 0 0 0 1px ${getTypeToken(TOKENS.borderColorButtonHover)({
  theme,
  type
})}`, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.colorTextButtonBorderedHover) : getTypeToken(TOKENS.colorTextButtonHover)), IconContainer, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.colorTextButtonBorderedHover) : getTypeToken(TOKENS.colorTextButtonHover)), ({
  disabled,
  theme
}) => !disabled && `transform: scale(${theme.orbit.modifierScaleButtonActive})`, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.backgroundButtonBorderedActive) : getTypeToken(TOKENS.backgroundButtonActive)), ({
  disabled,
  bordered,
  theme,
  type
}) => !disabled && bordered && `inset 0 0 0 1px ${getTypeToken(TOKENS.borderColorButtonActive)({
  theme,
  type
})}`, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.colorTextButtonBorderedActive) : getTypeToken(TOKENS.colorTextButtonActive)), IconContainer, ({
  disabled,
  bordered
}) => !disabled && (bordered ? getTypeToken(TOKENS.colorTextButtonBorderedActive) : getTypeToken(TOKENS.colorTextButtonActive)), ({
  bordered,
  theme,
  type
}) => bordered && `inset 0 0 0 1px ${getTypeToken(TOKENS.borderColorButton)({
  theme,
  type
})},`, ({
  theme
}) => theme.orbit.boxShadowButtonFocus, StyledSpinner, getSizeToken(TOKENS.loadingWidth), getSizeToken(TOKENS.loadingHeight));
StyledButton.defaultProps = {
  theme: defaultTokens
};
const StyledButtonContent = styled.div.withConfig({
  displayName: "Button__StyledButtonContent",
  componentId: "sc-1brqp3f-3"
})(["visibility:", ";height:100%;display:flex;justify-content:center;align-items:center;"], ({
  loading
}) => loading && "hidden");
StyledButtonContent.defaultProps = {
  theme: defaultTokens
};

const Button = props => {
  const {
    component = "button",
    children,
    bordered,
    disabled,
    href,
    size = SIZE_OPTIONS.NORMAL,
    icon,
    iconRight,
    external,
    type = TYPE_OPTIONS.PRIMARY,
    block,
    loading = false,
    width = 0
  } = props;
  const iconLeft = props.iconLeft || icon;
  const sizeIcon = size === ICON_SIZES.SMALL ? ICON_SIZES.SMALL : ICON_SIZES.MEDIUM;
  const onlyIcon = iconLeft && !children;
  const isDisabled = loading || disabled;
  return React.createElement(StyledButton, _extends({
    bordered: bordered,
    block: block,
    component: component,
    disabled: isDisabled,
    loading: loading,
    onlyIcon: onlyIcon,
    size: size,
    sizeIcon: sizeIcon,
    target: href && external ? "_blank" : undefined,
    type: type,
    width: width
  }, props), loading && React.createElement(Loading, {
    type: "buttonLoader"
  }), React.createElement(StyledButtonContent, {
    loading: loading
  }, iconLeft && React.createElement(IconContainer, {
    bordered: bordered,
    onlyIcon: onlyIcon,
    size: size,
    sizeIcon: sizeIcon,
    type: type
  }, iconLeft), children, iconRight && React.createElement(IconContainerRight, {
    bordered: bordered,
    onlyIcon: onlyIcon,
    size: size,
    sizeIcon: sizeIcon,
    type: type
  }, iconRight)));
};

export default Button;