import React, { forwardRef } from "react";
import { cx } from "../../../utils";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { base, IconContainer, Loader, LoadWrap, StyledSpinner } from "./EmbeddedButton.styles";
import { classes } from "./EmbeddedButton.tokens";
export const embeddedButtonRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
        const { children, view, size, disabled, isLoading, loader, position = 'center', className, ...rest } = props;
        const isLoadingClass = isLoading ? classes.embeddedButtonLoading : undefined;
        return /*#__PURE__*/ React.createElement(Root, {
            type: "button",
            ref: ref,
            view: view,
            size: size,
            disabled: disabled,
            className: cx(isLoadingClass, className),
            ...rest
        }, /*#__PURE__*/ React.createElement(LoadWrap, {
            position: position,
            isLoading: isLoading
        }, /*#__PURE__*/ React.createElement(IconContainer, null, children)), isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
    });
export const embeddedButtonConfig = {
    name: 'EmbeddedButton',
    tag: 'button',
    layout: embeddedButtonRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'secondary',
        size: 'm'
    }
};
