import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { ThemeProvider } from "styled-components";
import equilibriumTheme from "../theme/equilibrium.theme";
import equilibriumV2Theme from "../theme/equilibrium-v2.theme";
import genshiroTheme from "../theme/genshiro.theme";
import Button from "./button";
const Container = styled.div `
  display: flex;
  flex-direction: column;

  button {
    margin-bottom: 12px
  }
`;
export default {
    component: Button,
    title: "New/Button",
};
export const Equilibrium = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsxs(Container, { children: [_jsx(Button, { label: "Default" }), _jsx(Button, { label: "Custom height", height: "40px" }), _jsx(Button, { label: "Custom width", width: "250px" }), _jsx(Button, { label: "Default", pending: true }), _jsx(Button, { label: "Disabled", disabled: true }), _jsx(Button, { label: "disabled pending", disabled: true, pending: true }), _jsx(Button, { label: "Outline", outline: true }), _jsx(Button, { label: "Outline Disabled", outline: true, disabled: true }), _jsx(Button, { label: "Outline pending", outline: true, pending: true }), _jsx(Button, { label: "Outline disabled pending", outline: true, disabled: true, pending: true })] }) }));
};
export const EquilibriumV2 = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumV2Theme, children: _jsxs(Container, { children: [_jsx(Button, { label: "Custom width", width: "250px" }), _jsx(Button, { label: "Action", size: "xs" }), _jsx(Button, { label: "Action", size: "sm", disabled: true }), _jsx(Button, { label: "Action", size: "md", pending: true }), _jsx(Button, { label: "Action", size: "lg", disabled: true, pending: true }), _jsx(Button, { label: "Texted", variant: "text", size: "xs" }), _jsx(Button, { label: "Texted", variant: "text", size: "sm", disabled: true }), _jsx(Button, { label: "Texted", variant: "text", size: "md", pending: true }), _jsx(Button, { label: "Texted", variant: "text", size: "lg", disabled: true, pending: true }), _jsx(Button, { label: "Outline", variant: "secondary", size: "xs", pending: true }), _jsx(Button, { label: "Outline", variant: "secondary", size: "sm", disabled: true, pending: true }), _jsx(Button, { label: "Outline", variant: "secondary", size: "md" }), _jsx(Button, { label: "Outline", variant: "secondary", size: "lg" })] }) }));
};
export const Genshiro = () => {
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsxs(Container, { children: [_jsx(Button, { label: "Default" }), _jsx(Button, { label: "Custom height", height: "40px" }), _jsx(Button, { label: "Custom width", width: "250px" }), _jsx(Button, { label: "Default", pending: true }), _jsx(Button, { label: "Disabled", disabled: true }), _jsx(Button, { label: "Disabled Pending", disabled: true, pending: true }), "Texted", _jsx(Button, { label: "Texted", texted: true }), _jsx(Button, { label: "Texted", texted: true, disabled: true }), _jsx(Button, { label: "Texted", texted: true, pending: true }), _jsx(Button, { label: "Texted", texted: true, disabled: true, pending: true }), "Outline", _jsx(Button, { label: "Outline", outline: true }), _jsx(Button, { label: "Outline", outline: true, disabled: true }), _jsx(Button, { label: "Outline", outline: true, pending: true }), _jsx(Button, { label: "Outline", outline: true, disabled: true, pending: true })] }) }));
};
//# sourceMappingURL=button.stories.js.map