import ButtonBase , { ButtonBaseProps } from "@material-ui/core/ButtonBase" ; import clsx from "clsx" ; import React from "react" ; import { makeStyles } from "../theme" ; const useStyles = makeStyles ( ( theme ) => ( { disabled : { "&$root" : { color : theme . palette . grey [ 500 ] } } , root : { "&:hover, &:focus-visible" : { background : theme . palette . saleor . active [ 5 ] } , "&:active" : { background : theme . palette . saleor . active [ 4 ] } , background : theme . palette . background . paper , borderRadius : 4 , color : theme . palette . primary . main , height : 48 , transition : theme . transitions . duration . shortest + "ms" , width : 48 } } ) , { name : "ExpandButton" } ) ; export const SquareButton = React . forwardRef ( ( { className , ... rest } , ref ) => { const classes = useStyles ( { } ) ; return ( < ButtonBase className = { clsx ( classes . root , className , { [ classes . disabled ] : rest . disabled } ) } disableRipple ref = { ref } { ... rest } />); } ) ; SquareButton . displayName = "SquareButton" ;