import { h } from "@stencil/core";
export class DgaButtonUsage {
    constructor() {
        this.variant = 'neutral';
    }
    render() {
        return (h("div", { key: '9ded42032455f7194925be9d2868b3b7558536e4' }, h("h1", { key: '922605934223427b29456051afbfa4a217608875' }, "Button Example"), h("div", { key: '0d1e9cb8c9f212f2203de554125f202e929e1c9c', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'fec9db9d6dabadf4f6136233ea3cec943a5df36b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-button", { key: 'a3e9ccdc481d077d3e366240bad6563233a304b0', label: "Click me", variant: "primary-brand", sx: {
                '&': {
                    fontSize: '18px',
                    fontWeight: 'bold',
                },
                '.dga-btn': {
                    backgroundColor: { xs: 'red', sm: 'blue', md: 'green' },
                    // backgroundColor: 'yellow',
                    color: { xs: 'black', sm: 'yellow', md: 'white' },
                },
                '.dga-btn:hover': {
                    backgroundColor: 'blue',
                },
            } }), h("dga-button", { key: 'eb8faf882f5fde0150ad3915ab5c269949a98787', label: "Brown Button", variant: "primary-neutral" }), h("dga-button", { key: 'efc252d3821ca41438c82a44a20bc69d3f88e929', label: "Button", variant: "des-transparent" }), h("dga-button", { key: '6d18c3ce46e9623ea4bbf58d2d2f722cd8b0a0d7', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconType: "source-code", leadIconProps: { variant: 'stroke', type: 'standard' } }), h("dga-button", { key: '904e65fa054b8add4cc9f833b8e2b0e5da0015ec',
            // className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100"
            label: "See live preview", size: "lg", variant: "secondary-outline", trailIcon: true, trailIconType: "link-square-01", trailIconProps: {
                variant: 'stroke',
                type: 'standard',
            } })), h("div", { key: 'f247b1893fce5247d27b552bfef4a3545495da5a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
    static get is() { return "dga-button-usage"; }
    static get states() {
        return {
            "variant": {}
        };
    }
}
