import { jsx as _jsx } from "react/jsx-runtime";
import { ThemeProvider } from "styled-components";
import equilibriumTheme from "../theme/equilibrium.theme";
import Input from "./input";
import { CrossIcon } from "./cross-icon";
import T from "../typography";
export default {
    component: Input,
    title: "New/Input",
    decorators: [
        (Story) => (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsx(Story, {}) })),
    ],
};
const Template = (args) => _jsx(Input, { ...args });
export const Default = Template.bind({});
Default.args = {
    width: "170px",
};
export const TrailingCross = Template.bind({});
TrailingCross.args = {
    width: "170px",
    trailingIcon: _jsx(CrossIcon, { onClick: () => console.log("cross clicked") }),
};
export const Labeled = Template.bind({});
Labeled.args = {
    width: "170px",
    label: _jsx(T.T12, { children: "Amount" }),
};
export const Errored = Template.bind({});
Errored.args = {
    width: "170px",
    helper: _jsx(T.E12, { children: "Not enough balance" }),
};
//# sourceMappingURL=input.stories.js.map