import { Box, Button, IconButton, Tooltip, } from '@wix/design-system';
import React, { forwardRef } from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
const _ResponsiveButton = forwardRef((props, ref) => {
    const { dataHook, as, icon, children, state, shouldShrink: shouldShrinkProp = true, ...rest } = props;
    const { sizes, toolbar: { button }, } = usePatternsTheme();
    const { toolbar: { responsive }, } = useToolbarCollectionContext();
    const { responsiveDisabled } = responsive;
    const shouldShrink = responsiveDisabled
        ? shouldShrinkProp
        : state._shouldShrink;
    return shouldShrink ? (React.createElement(Tooltip, { content: children, dataHook: dataHook ? `${dataHook}-tooltip` : undefined },
        React.createElement(Box, { direction: "vertical", minWidth: "30px" },
            React.createElement(IconButton, { ref: ref, ...rest, dataHook: dataHook, size: sizes.small, priority: "secondary" }, icon)))) : (React.createElement("div", { style: { display: 'contents' } },
        React.createElement(Button, { ref: ref, as: as, ...rest, dataHook: dataHook, size: sizes.small, priority: "secondary", prefixIcon: icon, suffixIcon: button.suffix }, children)));
});
export const ResponsiveButton = observer(_ResponsiveButton);
//# sourceMappingURL=ResponsiveButton.js.map