import { Box, Button, IconButton, Tooltip, } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
function _ResponsiveButton(props) {
    const { dataHook, as, icon, children, state, shouldShrink: shouldShrinkProp = true, ...rest } = props;
    const { sizes, toolbar: { button }, } = usePatternsTheme();
    const { toolbar: { responsive }, } = useToolbarCollectionContext();
    const { _nextToShrink, responsiveDisabled } = responsive;
    const shouldShrink = responsiveDisabled
        ? shouldShrinkProp
        : _nextToShrink._count >= state._count && state._shouldShrink;
    return shouldShrink ? (React.createElement(Tooltip, { content: children, dataHook: dataHook ? `${dataHook}-tooltip` : undefined },
        React.createElement(Box, { direction: "vertical", minWidth: "30px" },
            React.createElement(IconButton, { ...rest, dataHook: dataHook, size: sizes.small, priority: "secondary" }, icon)))) : (React.createElement(Button, { 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