import { a as __rest, _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { forwardRef } from 'react';
import colors from '../theme/colors.js';
import { m as makeStyles } from '../makeStyles-c9a99c7a.js';
import { a as createStyles } from '../createStyles-16423e9e.js';
import { b as _extends, z as alpha, d as _objectWithoutProperties, P as PropTypes } from '../defaultTheme-49a26576.js';
import { c as clsx } from '../clsx.m-6243b874.js';
import { a as withStyles } from '../withStyles-99aeb25b.js';
import { c as capitalize } from '../capitalize-5d3e9aac.js';
import { B as ButtonBase } from '../ButtonBase-11d3cdb5.js';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import 'react-dom';
import '../useForkRef-4ff8cc89.js';
import '../useEventCallback-8817ed1c.js';
import '../deprecatedPropType-0232df1e.js';
import '../useIsFocusVisible-c048447c.js';
import '../TransitionGroupContext-2ba64e99.js';
import '../refType-5cc24a92.js';
import '../elementTypeAcceptingRef-7677eeee.js';

var styles = function styles(theme) {
  return {
    /* Styles applied to the root element. */
    root: _extends({}, theme.typography.button, {
      boxSizing: 'border-box',
      minWidth: 64,
      padding: '6px 16px',
      borderRadius: theme.shape.borderRadius,
      color: theme.palette.text.primary,
      transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
        duration: theme.transitions.duration.short
      }),
      '&:hover': {
        textDecoration: 'none',
        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        },
        '&$disabled': {
          backgroundColor: 'transparent'
        }
      },
      '&$disabled': {
        color: theme.palette.action.disabled
      }
    }),

    /* Styles applied to the span element that wraps the children. */
    label: {
      width: '100%',
      // Ensure the correct width for iOS Safari
      display: 'inherit',
      alignItems: 'inherit',
      justifyContent: 'inherit'
    },

    /* Styles applied to the root element if `variant="text"`. */
    text: {
      padding: '6px 8px'
    },

    /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
    textPrimary: {
      color: theme.palette.primary.main,
      '&:hover': {
        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        }
      }
    },

    /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
    textSecondary: {
      color: theme.palette.secondary.main,
      '&:hover': {
        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        }
      }
    },

    /* Styles applied to the root element if `variant="outlined"`. */
    outlined: {
      padding: '5px 15px',
      border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
      '&$disabled': {
        border: "1px solid ".concat(theme.palette.action.disabledBackground)
      }
    },

    /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
    outlinedPrimary: {
      color: theme.palette.primary.main,
      border: "1px solid ".concat(alpha(theme.palette.primary.main, 0.5)),
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary.main),
        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        }
      }
    },

    /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
    outlinedSecondary: {
      color: theme.palette.secondary.main,
      border: "1px solid ".concat(alpha(theme.palette.secondary.main, 0.5)),
      '&:hover': {
        border: "1px solid ".concat(theme.palette.secondary.main),
        backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        }
      },
      '&$disabled': {
        border: "1px solid ".concat(theme.palette.action.disabled)
      }
    },

    /* Styles applied to the root element if `variant="contained"`. */
    contained: {
      color: theme.palette.getContrastText(theme.palette.grey[300]),
      backgroundColor: theme.palette.grey[300],
      boxShadow: theme.shadows[2],
      '&:hover': {
        backgroundColor: theme.palette.grey.A100,
        boxShadow: theme.shadows[4],
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          boxShadow: theme.shadows[2],
          backgroundColor: theme.palette.grey[300]
        },
        '&$disabled': {
          backgroundColor: theme.palette.action.disabledBackground
        }
      },
      '&$focusVisible': {
        boxShadow: theme.shadows[6]
      },
      '&:active': {
        boxShadow: theme.shadows[8]
      },
      '&$disabled': {
        color: theme.palette.action.disabled,
        boxShadow: theme.shadows[0],
        backgroundColor: theme.palette.action.disabledBackground
      }
    },

    /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
    containedPrimary: {
      color: theme.palette.primary.contrastText,
      backgroundColor: theme.palette.primary.main,
      '&:hover': {
        backgroundColor: theme.palette.primary.dark,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: theme.palette.primary.main
        }
      }
    },

    /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
    containedSecondary: {
      color: theme.palette.secondary.contrastText,
      backgroundColor: theme.palette.secondary.main,
      '&:hover': {
        backgroundColor: theme.palette.secondary.dark,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: theme.palette.secondary.main
        }
      }
    },

    /* Styles applied to the root element if `disableElevation={true}`. */
    disableElevation: {
      boxShadow: 'none',
      '&:hover': {
        boxShadow: 'none'
      },
      '&$focusVisible': {
        boxShadow: 'none'
      },
      '&:active': {
        boxShadow: 'none'
      },
      '&$disabled': {
        boxShadow: 'none'
      }
    },

    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
    focusVisible: {},

    /* Pseudo-class applied to the root element if `disabled={true}`. */
    disabled: {},

    /* Styles applied to the root element if `color="inherit"`. */
    colorInherit: {
      color: 'inherit',
      borderColor: 'currentColor'
    },

    /* Styles applied to the root element if `size="small"` and `variant="text"`. */
    textSizeSmall: {
      padding: '4px 5px',
      fontSize: theme.typography.pxToRem(13)
    },

    /* Styles applied to the root element if `size="large"` and `variant="text"`. */
    textSizeLarge: {
      padding: '8px 11px',
      fontSize: theme.typography.pxToRem(15)
    },

    /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
    outlinedSizeSmall: {
      padding: '3px 9px',
      fontSize: theme.typography.pxToRem(13)
    },

    /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
    outlinedSizeLarge: {
      padding: '7px 21px',
      fontSize: theme.typography.pxToRem(15)
    },

    /* Styles applied to the root element if `size="small"` and `variant="contained"`. */
    containedSizeSmall: {
      padding: '4px 10px',
      fontSize: theme.typography.pxToRem(13)
    },

    /* Styles applied to the root element if `size="large"` and `variant="contained"`. */
    containedSizeLarge: {
      padding: '8px 22px',
      fontSize: theme.typography.pxToRem(15)
    },

    /* Styles applied to the root element if `size="small"`. */
    sizeSmall: {},

    /* Styles applied to the root element if `size="large"`. */
    sizeLarge: {},

    /* Styles applied to the root element if `fullWidth={true}`. */
    fullWidth: {
      width: '100%'
    },

    /* Styles applied to the startIcon element if supplied. */
    startIcon: {
      display: 'inherit',
      marginRight: 8,
      marginLeft: -4,
      '&$iconSizeSmall': {
        marginLeft: -2
      }
    },

    /* Styles applied to the endIcon element if supplied. */
    endIcon: {
      display: 'inherit',
      marginRight: -4,
      marginLeft: 8,
      '&$iconSizeSmall': {
        marginRight: -2
      }
    },

    /* Styles applied to the icon element if supplied and `size="small"`. */
    iconSizeSmall: {
      '& > *:first-child': {
        fontSize: 18
      }
    },

    /* Styles applied to the icon element if supplied and `size="medium"`. */
    iconSizeMedium: {
      '& > *:first-child': {
        fontSize: 20
      }
    },

    /* Styles applied to the icon element if supplied and `size="large"`. */
    iconSizeLarge: {
      '& > *:first-child': {
        fontSize: 22
      }
    }
  };
};
var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
  var children = props.children,
      classes = props.classes,
      className = props.className,
      _props$color = props.color,
      color = _props$color === void 0 ? 'default' : _props$color,
      _props$component = props.component,
      component = _props$component === void 0 ? 'button' : _props$component,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      _props$disableElevati = props.disableElevation,
      disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
      _props$disableFocusRi = props.disableFocusRipple,
      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
      endIconProp = props.endIcon,
      focusVisibleClassName = props.focusVisibleClassName,
      _props$fullWidth = props.fullWidth,
      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
      _props$size = props.size,
      size = _props$size === void 0 ? 'medium' : _props$size,
      startIconProp = props.startIcon,
      _props$type = props.type,
      type = _props$type === void 0 ? 'button' : _props$type,
      _props$variant = props.variant,
      variant = _props$variant === void 0 ? 'text' : _props$variant,
      other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);

  var startIcon = startIconProp && /*#__PURE__*/React.createElement("span", {
    className: clsx(classes.startIcon, classes["iconSize".concat(capitalize(size))])
  }, startIconProp);
  var endIcon = endIconProp && /*#__PURE__*/React.createElement("span", {
    className: clsx(classes.endIcon, classes["iconSize".concat(capitalize(size))])
  }, endIconProp);
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
    className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes["".concat(variant).concat(capitalize(color))], size !== 'medium' && [classes["".concat(variant, "Size").concat(capitalize(size))], classes["size".concat(capitalize(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
    component: component,
    disabled: disabled,
    focusRipple: !disableFocusRipple,
    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
    ref: ref,
    type: type
  }, other), /*#__PURE__*/React.createElement("span", {
    className: classes.label
  }, startIcon, children, endIcon));
});
process.env.NODE_ENV !== "production" ? Button$1.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // |     To update them edit the d.ts file and run "yarn proptypes"     |
  // ----------------------------------------------------------------------

  /**
   * The content of the button.
   */
  children: PropTypes.node,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),

  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: PropTypes
  /* @typescript-to-proptypes-ignore */
  .elementType,

  /**
   * If `true`, the button will be disabled.
   */
  disabled: PropTypes.bool,

  /**
   * If `true`, no elevation is used.
   */
  disableElevation: PropTypes.bool,

  /**
   * If `true`, the  keyboard focus ripple will be disabled.
   */
  disableFocusRipple: PropTypes.bool,

  /**
   * If `true`, the ripple effect will be disabled.
   *
   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
   * to highlight the element by applying separate styles with the `focusVisibleClassName`.
   */
  disableRipple: PropTypes.bool,

  /**
   * Element placed after the children.
   */
  endIcon: PropTypes.node,

  /**
   * @ignore
   */
  focusVisibleClassName: PropTypes.string,

  /**
   * If `true`, the button will take up the full width of its container.
   */
  fullWidth: PropTypes.bool,

  /**
   * The URL to link to when the button is clicked.
   * If defined, an `a` element will be used as the root node.
   */
  href: PropTypes.string,

  /**
   * The size of the button.
   * `small` is equivalent to the dense button styling.
   */
  size: PropTypes.oneOf(['large', 'medium', 'small']),

  /**
   * Element placed before the children.
   */
  startIcon: PropTypes.node,

  /**
   * @ignore
   */
  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),

  /**
   * The variant to use.
   */
  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
} : void 0;
var MuiButton = withStyles(styles, {
  name: 'MuiButton'
})(Button$1);

var colorMap = {
    initial: {
        primary: colors.button.primary,
        primaryAlt: colors.button.primaryAlt,
        secondary: colors.button.secondary,
        secondaryAlt: colors.button.secondaryAlt,
        disabled: colors.button.disabled
    },
    action: {
        primary: colors.button.primaryActive,
        primaryAlt: colors.button.primaryAltActive,
        secondary: colors.button.secondaryActive,
        secondaryAlt: colors.button.secondaryAltActive,
        disabled: colors.button.disabled
    },
    inverse: {
        primary: colors.text.primary,
        primaryAlt: colors.text.inversePrimary,
        secondary: colors.text.inversePrimary,
        secondaryAlt: colors.text.inversePrimary,
        disabled: colors.text.secondary
    }
};
var getFontSize = function (_a) {
    var size = _a.size, theme = _a.theme;
    if (size === "small")
        return theme.typography.fontSizeM;
    if (size === "large")
        return theme.typography.fontSizeXl3;
    return theme.typography.fontSizeLg;
};
var getLineHeight = function (_a) {
    var size = _a.size, theme = _a.theme;
    if (size === "small")
        return theme.typography.lineHeightMl;
    if (size === "large")
        return theme.typography.lineHeightXl2;
    return theme.typography.lineHeightLg;
};
var getPadding = function (_a) {
    var size = _a.size, theme = _a.theme, onlyIcon = _a.onlyIcon;
    if (size === "small")
        return theme.spacing(1, onlyIcon ? 1 : 3);
    if (size === "large")
        return theme.spacing(2, onlyIcon ? 2 : 7);
    return theme.spacing(1.3, onlyIcon ? 1.3 : 4);
};
var useStyles = makeStyles(function (theme) {
    return createStyles({
        root: function (props) { return ({
            position: "relative",
            textTransform: "none",
            fontSize: getFontSize({ size: props.size, theme: theme }),
            lineHeight: getLineHeight({ size: props.size, theme: theme }),
            borderRadius: props.size === "large" ? theme.borders.radius.large : theme.borders.radius.primary,
            padding: getPadding({ size: props.size, theme: theme, onlyIcon: props.onlyIcon }),
            justifyContent: props.align === "left" ? "flex-start" : props.align === "right" ? "flex-end" : "center",
            transition: theme.transitions.create(["box-shadow", "transform", "background", "color", "border"]),
            "&.MuiButton-contained": {
                color: colorMap.inverse[props.color],
                backgroundColor: colorMap.initial[props.color],
                "&:active, &:hover, &:focus": {
                    color: colorMap.inverse[props.color],
                    backgroundColor: colorMap.action[props.color]
                }
            },
            "&.MuiButton-outlined": {
                borderColor: theme.palette.gray[450],
                "&:active, &:hover, &:focus": {
                    borderColor: theme.palette.gray[500]
                }
            },
            "&.MuiButton-text": {
                color: colorMap.initial[props.color],
                "&:active, &:hover, &:focus": {
                    color: colorMap.action[props.color]
                }
            },
            "&:active, &:hover, &:focus": {
                outline: "none"
            },
            "&.MuiButton-fullWidth": {
                paddingRight: props.size === "small" ? theme.spacing(4) : theme.spacing(8),
                "& .MuiButton-endIcon": {
                    position: props.onlyIcon ? "static" : "absolute",
                    right: theme.spacing(3),
                    top: "50%",
                    transform: props.onlyIcon ? "none" : "translate(0, -50%)"
                }
            },
            "& .MuiButton-startIcon > *:first-child, & .MuiButton-endIcon > *:first-child": {
                height: props.size === "small" ? theme.spacing(2.5) : props.size === "large" ? theme.spacing(3) : theme.spacing(2.5)
            },
            "& .MuiButton-startIcon": {
                marginLeft: props.onlyIcon ? 0 : -theme.spacing(0.5),
                marginRight: props.onlyIcon ? 0 : theme.spacing(1)
            },
            "& .MuiButton-endIcon": {
                marginLeft: props.onlyIcon ? 0 : theme.spacing(1),
                marginRight: props.onlyIcon ? 0 : -theme.spacing(0.5)
            },
            "& .icon svg path": {
                fill: "currentColor !important"
            }
        }); },
        underline: {
            padding: "0 !important",
            color: theme.palette.button.secondary + " !important",
            "&:after": {
                content: "''",
                position: "absolute",
                left: 0,
                right: 0,
                bottom: -1,
                width: "100%",
                margin: "auto",
                borderBottom: "3px solid " + theme.palette.primary.light,
                transition: theme.transitions.create(["width"])
            },
            "&:active, &:hover, &:focus": {
                "&:after": {
                    width: 0
                }
            }
        }
    });
});
var Button = forwardRef(function (_a, ref) {
    var _b;
    var value = _a.value, _c = _a.align, align = _c === void 0 ? "center" : _c; _a.placeholder; var _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.variant, variant = _e === void 0 ? "contained" : _e, _f = _a.size, size = _f === void 0 ? "medium" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["value", "align", "placeholder", "color", "variant", "size", "disabled", "startIcon", "endIcon", "onClick"]);
    var onlyIcon = Boolean(!props.children) && ((_b = Boolean(startIcon)) !== null && _b !== void 0 ? _b : Boolean(endIcon));
    var classes = useStyles({ size: size, color: color, align: align, variant: variant, onlyIcon: onlyIcon });
    return (jsx(MuiButton, __assign({ value: value, className: classes.root + " " + (variant === "underline" ? classes.underline : ""), variant: variant !== "underline" ? variant : undefined, disabled: disabled, onClick: onClick, startIcon: startIcon, endIcon: endIcon, ref: ref, disableRipple: true }, props), void 0));
});

export { Button as default };
