import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { useConsolidatedRef } from '../../hooks';
export const StyledBareButton = styled.button `
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  color: inherit;

  @media (forced-colors: none) {
    outline: none;
  }

  & + & {
    margin-inline-start: ${props => props.theme.base.spacing};
  }
`;
StyledBareButton.defaultProps = defaultThemeProp;
const BareButton = forwardRef(function BareButton({ type = 'button', disabled = false, href, ...restProps }, ref) {
    const mouseDownEvent = useRef();
    const buttonRef = useConsolidatedRef(ref);
    useEffect(() => {
        return () => {
            mouseDownEvent.current = undefined;
        };
    }, []);
    const handleMouseDown = (e) => {
        restProps.onMouseDown?.(e);
        e.persist();
        mouseDownEvent.current = e;
    };
    const handleMouseUp = (e) => {
        const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;
        mouseDownEvent.current = undefined;
        if (shouldFocus && buttonRef.current !== document.activeElement) {
            buttonRef.current?.focus();
        }
        return restProps.onMouseUp?.(e);
    };
    if (href) {
        return (_jsx(StyledBareButton, { as: 'a', ref: buttonRef, href: href, disabled, ...restProps, onMouseDown: handleMouseDown, onMouseDownCapture: handleMouseUp }));
    }
    return (_jsx(StyledBareButton, { ref: buttonRef, type: type, disabled: disabled, ...restProps, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }));
});
export default BareButton;
//# sourceMappingURL=BareButton.js.map