import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__FormField_mjs__ from "./FormField.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__Inputs_Select_Select_mjs__ from "../Inputs/Select/Select.mjs";
const meta = {
    title: 'Components/FormField',
    component: __WEBPACK_EXTERNAL_MODULE__FormField_mjs__["default"],
    argTypes: {
        label: {
            control: {
                type: 'text'
            }
        },
        helpText: {
            control: {
                type: 'text'
            }
        },
        errorText: {
            control: {
                type: 'text'
            }
        },
        isInvalid: {
            control: {
                type: 'boolean'
            }
        }
    },
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=42-2782&mode=design'
        }
    }
};
/* ESM default export */ const FormField_stories_rslib_entry_ = meta;
const Default = {
    args: {
        label: 'Text input',
        helpText: '',
        errorText: '',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            "data-testid": "input",
            name: "text",
            type: "text",
            placeholder: "Enter text"
        })
    }
};
const LabelAsReactElement = {
    args: {
        label: /*#__PURE__*/ React.createElement(React.Fragment, null, "Text ", /*#__PURE__*/ React.createElement("em", null, "input"), " with ", /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Link, {
            href: "#"
        }, "link")),
        helpText: '',
        errorText: '',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            "data-testid": "input",
            name: "text",
            type: "text",
            placeholder: "Enter text"
        })
    }
};
const Required = {
    args: {
        label: 'Text input',
        isRequired: true,
        helpText: '',
        errorText: '',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            "data-testid": "input",
            name: "text",
            type: "text",
            placeholder: "Enter text"
        })
    }
};
const FormFieldAsSwitch = {
    args: {
        label: 'Switch input',
        isRequired: true,
        description: 'Description',
        helpText: 'Help text',
        tooltip: 'Tooltip',
        errorText: '',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Switch, {
            "data-testid": "switch",
            defaultChecked: true
        })
    }
};
const HelpText = {
    args: {
        label: 'Text input',
        helpText: 'Help text',
        errorText: 'Text entered incorrectly',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        }),
        description: /*#__PURE__*/ React.createElement(React.Fragment, null, "This is a field description, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore, labore et dolore. ", /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Link, null, "Learn more"))
    }
};
const Description = {
    args: {
        label: 'Text input',
        errorText: 'Text entered incorrectly',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        }),
        description: /*#__PURE__*/ React.createElement(React.Fragment, null, "This is a field description, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore, labore et dolore. ", /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Link, null, "Learn more"))
    }
};
const FooterDescription = {
    args: {
        label: 'Text input',
        errorText: 'Text entered incorrectly',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        }),
        description: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Main description"),
        footerDescription: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Footer description")
    }
};
const Invalid = {
    args: {
        label: 'Text input',
        helpText: 'Help text',
        errorText: 'Text entered incorrectly',
        isInvalid: true,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        })
    }
};
const SelectExample = {
    args: {
        label: 'Select input',
        helpText: 'Help text',
        errorText: 'Red is an invalid option',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Inputs_Select_Select_mjs__["default"], {
            name: "select",
            placeholder: "Choose an option",
            options: [
                {
                    value: 'red',
                    label: 'Red'
                },
                {
                    value: 'blue',
                    label: 'Blue'
                },
                {
                    value: 'green',
                    label: 'Green'
                },
                {
                    value: 'yellow',
                    label: 'Yellow'
                },
                {
                    value: 'orange',
                    label: 'Orange'
                }
            ]
        })
    }
};
const MultiInputSingleOutput = {
    args: {
        label: 'Multiple input with single output value',
        helpText: 'Help text',
        errorText: 'Red is an invalid option',
        isInvalid: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.HStack, {
            maxW: "400"
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            "data-testid": "input-1",
            name: "text1",
            type: "text",
            placeholder: "Enter text 1"
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            "data-testid": "input-2",
            name: "text2",
            type: "text",
            placeholder: "Enter text 2"
        }))
    }
};
export { Default, Description, FooterDescription, FormFieldAsSwitch, HelpText, Invalid, LabelAsReactElement, MultiInputSingleOutput, Required, SelectExample, FormField_stories_rslib_entry_ as default };
