import * as __WEBPACK_EXTERNAL_MODULE__Form_mjs__ from "./Form.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__ from "./FormProvider.mjs";
import * as __WEBPACK_EXTERNAL_MODULE_yup__ from "yup";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__formFieldExamples_mjs__ from "./formFieldExamples.mjs";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form__ from "react-hook-form";
import * as __WEBPACK_EXTERNAL_MODULE_react_icons_md__ from "react-icons/md";
import * as __WEBPACK_EXTERNAL_MODULE__FormField_FormField_mjs__ from "../FormField/FormField.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__ from "@chakra-ui/icons";
import * as __WEBPACK_EXTERNAL_MODULE__storybook_test__ from "@storybook/test";
const meta = {
    title: 'Components/Form',
    component: __WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=23-331&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
/* ESM default export */ const Form_stories_rslib_entry_ = meta;
const FormWithProvider = ({ ...args })=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__["default"], null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], {
        ...args,
        onValid: (values)=>console.log('onValid values: ', values),
        onInvalid: (values)=>console.warn('onInvalid values: ', values)
    }));
const FormFieldExamples = {
    args: {
        onValid: (values)=>console.log('onValid values: ', values),
        onInvalid: (values)=>console.warn('onInvalid values: ', values),
        fields: __WEBPACK_EXTERNAL_MODULE__formFieldExamples_mjs__.formFieldExamples,
        button: {
            label: 'confirm_create_cluster_deployment',
            text: 'Next'
        },
        developerView: true
    },
    render: (args)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], args),
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=85-2398&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
const someFields = [
    {
        name: 'name',
        fieldType: 'text',
        label: 'Name',
        defaultValue: 'Initial name',
        placeholder: 'Name',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide a name')
    },
    {
        name: 'someField',
        fieldType: 'hidden',
        label: 'Hidden',
        placeholder: 'This should not be visible',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string()
    },
    {
        name: 'description',
        fieldType: 'textarea',
        label: 'Description',
        defaultValue: 'Initial description',
        placeholder: 'Description',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide a description')
    },
    {
        name: 'someNumber',
        fieldType: 'number',
        label: 'Number',
        defaultValue: 12345,
        placeholder: '12345',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.number().required('Provide a number'),
        help: 'Some help text'
    },
    {
        name: 'deploymentType',
        fieldType: 'toggle',
        label: 'Deployment type',
        defaultValue: 'true',
        placeholder: 'Deployment type',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide BYOC/FMC deployment type')
    },
    {
        name: 'maxThroughput',
        fieldType: 'radio',
        label: 'Throughput',
        placeholder: 'Max throughput',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide max throughput'),
        defaultValue: '1',
        options: [
            {
                value: '1',
                label: 'Option 1'
            },
            {
                value: '2',
                label: 'Option 2',
                disabled: true
            },
            {
                value: '3',
                label: 'Option 3',
                invalid: true
            },
            {
                value: '4',
                label: 'Option 4',
                invalid: true,
                disabled: true
            }
        ]
    },
    {
        name: 'region',
        fieldType: 'select',
        label: 'Region',
        placeholder: 'Select region',
        defaultValue: [
            {
                label: 'us-east-1',
                value: 'us-east-1'
            },
            {
                label: 'us-east-2',
                value: 'us-east-2'
            }
        ],
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.array(__WEBPACK_EXTERNAL_MODULE_yup__.object({
            label: __WEBPACK_EXTERNAL_MODULE_yup__.string(),
            value: __WEBPACK_EXTERNAL_MODULE_yup__.string()
        })).required('Provide a list of regions'),
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    },
                    {
                        label: 'us-east-2',
                        value: 'us-east-2'
                    }
                ]
            }
        ],
        isMulti: true
    },
    {
        name: 'slider',
        fieldType: 'slider',
        label: 'Some slider',
        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide value for a slider'),
        marks: [
            {
                label: 'Tier 1',
                value: 1
            },
            {
                label: '3',
                value: 3
            },
            {
                label: '5',
                value: 5
            }
        ],
        step: 2,
        tooltip: 'some tooltip',
        help: 'help text',
        footerDescription: 'footer description',
        description: 'description',
        sliderTooltip: {
            hasArrow: true,
            label: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
                py: 4
            }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
                as: "h1",
                fontSize: "sm"
            }, "Tier 1"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
                spacing: 1,
                color: "gray",
                fontWeight: "normal"
            }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "20 MBps max read"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "60 MBps max write"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "1,000 partitions"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "20,000 clients")))
        }
    }
];
const DefaultWithDeveloperView = {
    args: {
        fields: someFields,
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isDisabled: false
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args)
};
const DefaultDisabled = {
    args: {
        fields: someFields,
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isDisabled: true,
        onInvalidFormValidation: (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.fn)()
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args)
};
const DefaultFetching = {
    args: {
        fields: someFields,
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isFetching: true,
        onInvalidFormValidation: (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.fn)()
    },
    render: (args)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__["default"], null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], {
            ...args,
            onValid: (values)=>console.log('onValid values: ', values),
            onInvalid: (values)=>console.warn('onInvalid values: ', values)
        }))
};
const DisabledWithTimeout = {
    args: {
        fields: someFields,
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true
    },
    render: (args)=>{
        const [isDisabled, setIsDisabled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTimeout)(()=>setIsDisabled(true), 5000);
        (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTimeout)(()=>setIsDisabled(false), 10000);
        (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTimeout)(()=>setIsDisabled(true), 15000);
        return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__["default"], null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], {
            ...args,
            onValid: (values)=>console.log('onValid values: ', values),
            onInvalid: (values)=>console.warn('onInvalid values: ', values),
            isDisabled: isDisabled
        }));
    }
};
const FormWithFieldDescription = {
    args: {
        fields: [
            {
                name: 'maxThroughput',
                fieldType: 'radio',
                description: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Alert, null, "Some scary description"),
                label: 'Throughput',
                placeholder: 'Max throughput',
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide max throughput'),
                options: [
                    {
                        value: '1',
                        label: 'Option 1'
                    },
                    {
                        value: '2',
                        label: 'Option 2',
                        disabled: true
                    },
                    {
                        value: '3',
                        label: 'Option 3',
                        invalid: true
                    },
                    {
                        value: '4',
                        label: 'Option 4',
                        invalid: true,
                        disabled: true
                    }
                ]
            }
        ],
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isDisabled: false
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args)
};
const NonRequiredField = {
    args: {
        fields: [
            {
                name: 'someField',
                fieldType: 'text',
                label: 'Some label',
                placeholder: 'Enter some field',
                isRequired: false,
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string()
            }
        ],
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isDisabled: false
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args)
};
const FormWithTooltip = {
    args: {
        fields: [
            {
                name: 'someField',
                fieldType: 'text',
                description: 'Some description text',
                help: 'Some help text',
                tooltip: 'Form tooltip',
                label: 'Some label',
                placeholder: 'Enter some field',
                isRequired: false,
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string()
            },
            {
                name: 'switchField',
                fieldType: 'toggle',
                description: 'Some description text #2',
                help: 'Some help text #2',
                tooltip: 'Form tooltip #2',
                label: 'Some other label',
                isRequired: false,
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string()
            }
        ],
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true,
        isDisabled: false
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args),
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=91-5121&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
const FormWithControlledSelect = ()=>{
    /**
   * @description Refs allow controlling the Select dropdown and synchronize the component state as well as visual indication and form state (optional)
   * The events from `react-select` library can be dispatched by invoking `innerRef?.current?.setValue(someValue, 'select-option')`
   * In case of a default value being constant, it's not necessary to use a ref.
   * The refs are useful if there are any conditions which have to be subscribed to in order to modify the default value for another field.
   */ const innerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const selectOptions = [
        {
            label: 'Europe',
            options: [
                {
                    label: 'eu-central-1',
                    value: 'eu-central-1'
                }
            ]
        },
        {
            label: 'US',
            options: [
                {
                    label: 'us-east-1',
                    value: 'us-east-1'
                },
                {
                    label: 'us-east-2',
                    value: 'us-east-2'
                }
            ]
        }
    ];
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__["default"], null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], {
        onValid: (values)=>console.log('onValid values: ', values),
        onInvalid: (values)=>console.warn('onInvalid values: ', values),
        fields: [
            {
                name: 'radiocard',
                fieldType: 'radio',
                label: 'Radio cards',
                description: 'Field description text',
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Select a provider'),
                defaultValue: 'AWS',
                isAttached: false,
                options: [
                    'AWS',
                    'GCP',
                    'Azure'
                ].map((provider)=>({
                        value: provider,
                        label: provider
                    }))
            },
            {
                name: 'region',
                fieldType: 'select',
                label: 'Region',
                placeholder: 'Select region',
                innerRef,
                defaultValue: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    },
                    {
                        label: 'us-east-2',
                        value: 'us-east-2'
                    }
                ],
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.array(__WEBPACK_EXTERNAL_MODULE_yup__.object({
                    label: __WEBPACK_EXTERNAL_MODULE_yup__.string(),
                    value: __WEBPACK_EXTERNAL_MODULE_yup__.string()
                })).required('Provide a list of regions'),
                options: selectOptions,
                isMulti: true
            }
        ],
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        developerView: true
    })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, {
        mt: 8
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        onClick: ()=>innerRef.current?.clearValue()
    }, "Clear"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        onClick: ()=>innerRef.current?.setValue(selectOptions[0].options[0], 'select-option')
    }, "Select #1")));
};
const FormWithAction = ()=>{
    const innerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const selectOptions = [
        {
            label: 'Europe',
            options: [
                {
                    label: 'eu-central-1',
                    value: 'eu-central-1'
                }
            ]
        },
        {
            label: 'US',
            options: [
                {
                    label: 'us-east-1',
                    value: 'us-east-1'
                },
                {
                    label: 'us-east-2',
                    value: 'us-east-2'
                }
            ]
        }
    ];
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormProvider_mjs__["default"], null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], {
        onValid: (values)=>console.log('onValid values: ', values),
        onInvalid: (values)=>console.warn('onInvalid values: ', values),
        fields: [
            {
                name: 'radiocard',
                fieldType: 'radio',
                label: 'Radio cards',
                description: 'Field description text',
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Select a provider'),
                defaultValue: 'AWS',
                isAttached: false,
                options: [
                    'AWS',
                    'GCP',
                    'Azure'
                ].map((provider)=>({
                        value: provider,
                        label: provider
                    }))
            },
            {
                name: 'region',
                fieldType: 'select',
                label: 'Region',
                placeholder: 'Select region',
                innerRef,
                defaultValue: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    },
                    {
                        label: 'us-east-2',
                        value: 'us-east-2'
                    }
                ],
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.array(__WEBPACK_EXTERNAL_MODULE_yup__.object({
                    label: __WEBPACK_EXTERNAL_MODULE_yup__.string(),
                    value: __WEBPACK_EXTERNAL_MODULE_yup__.string()
                })).required('Provide a list of regions'),
                options: selectOptions,
                isMulti: true
            }
        ],
        button: {
            label: 'confirm_some_form',
            text: 'Create'
        },
        actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
            "aria-label": "reset-regions-button",
            "data-testid": "reset-regions-button",
            variant: "outline",
            onClick: ()=>innerRef.current?.clearValue()
        }, "Reset regions"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
            "aria-label": "another-button",
            "data-testid": "another-button",
            variant: "secondary"
        }, "Another button")),
        developerView: true
    })));
};
const RadioGroupExamples = {
    args: {
        onValid: (values)=>console.log('onValid values: ', values),
        onInvalid: (values)=>console.warn('onInvalid values: ', values),
        fields: __WEBPACK_EXTERNAL_MODULE__formFieldExamples_mjs__.radioGroupExamples,
        button: {
            label: 'some_submit_button',
            text: 'Next'
        },
        developerView: true
    },
    render: (args)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], args),
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=70-2917&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
const CustomSubmit = {
    args: {
        fields: [],
        button: {
            label: 'some_submit_button',
            text: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
                as: "h4",
                fontWeight: "light",
                p: 2
            }, "Sign up with email"),
            variant: 'outline',
            colorScheme: 'blue',
            spanFullWidth: true
        }
    },
    render: (args)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Form_mjs__["default"], args)
};
const CustomProviderTagsSection = ({ form, setValidationContext })=>{
    const { register, control, formState, getValues } = form;
    const { isOpen, getButtonProps, onToggle } = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useDisclosure)();
    const [tagFieldsCount, setTagFieldsCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
    const { fields, append, remove } = (0, __WEBPACK_EXTERNAL_MODULE_react_hook_form__.useFieldArray)({
        control,
        name: 'customProviderTags'
    });
    // cast errors into our field type
    const errors = formState.errors;
    console.log({
        errors
    });
    const { customProviderTags } = getValues();
    const addField = ()=>{
        append({
            tagKey: '',
            tagValue: ''
        });
        setTagFieldsCount((count)=>count + 1);
    };
    const removeField = (index)=>{
        remove(void 0 !== index ? index : void 0);
        // update field count
        setTagFieldsCount((count)=>void 0 !== index ? count - 1 : 0);
    };
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        console.log({
            customProviderTags
        });
        // if we have form values on load, set the count
        if (customProviderTags && customProviderTags.length) setTagFieldsCount(customProviderTags.length);
    }, []);
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        setValidationContext?.((context)=>({
                ...context,
                showAdvancedSettings: isOpen && tagFieldsCount >= 1
            }));
    }, [
        isOpen,
        tagFieldsCount
    ]);
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        variant: "link",
        fontWeight: "400",
        ...getButtonProps(),
        onClick: ()=>{
            setTimeout(()=>{
                onToggle();
            }, 10);
        },
        paddingInlineStart: 0,
        "data-testid": "advanced-options-toggle-button"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.HStack, {
        spacing: 1
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Custom Form Fields"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Icon, {
        as: __WEBPACK_EXTERNAL_MODULE_react_icons_md__.MdKeyboardArrowRight,
        boxSize: 6,
        __css: {
            // Mirror the Accordion behavior
            transform: isOpen ? 'rotate(90deg)' : void 0,
            transition: 'transform 0.2s',
            transformOrigin: 'center'
        }
    })))), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Collapse, {
        in: isOpen,
        animateOpacity: true
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        mb: 4
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormField_FormField_mjs__["default"], {
        label: 'Custom Field Label',
        isInvalid: !!formState.errors.customField,
        errorText: formState.errors.customField?.message,
        showRequiredIndicator: false
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
        placeholder: "CustomField placeholder",
        type: "text",
        ...register('customField')
    }))), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, null, "AWS Tags"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "These will be applied to all AWS resources associated with this cluster, and can be used for any auditing or ownership queries. Enter up to 5; they are case-sensitive and cannot be edited later. Learn more here.")), fields.map((field, index)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__FormField_FormField_mjs__["default"], {
            key: field.id,
            description: 'Description...',
            label: 'Firstname',
            isInvalid: !!errors.customProviderTags?.[index]?.tagKey,
            errorText: errors.customProviderTags?.[index]?.tagKey?.message,
            showRequiredIndicator: false
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Flex, {
            gap: 2
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            flex: "2"
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            placeholder: "Another input (nested placeholder)",
            type: "text",
            autoComplete: "new-password",
            ...register(`customProviderTags.${index}.tagKey`)
        })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            flex: "2"
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            placeholder: "Another input (nested placeholder)",
            type: "text",
            autoComplete: "new-password",
            ...register(`customProviderTags.${index}.tagValue`)
        })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
            variant: "icon",
            size: "xs",
            onClick: ()=>removeField(index)
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__.DeleteIcon, null)))))), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        variant: "outline",
        onClick: addField,
        isDisabled: tagFieldsCount >= 5
    }, "Add tag")));
};
const CustomFormComponents = {
    args: {
        developerView: true,
        button: {
            label: 'Submit',
            text: 'Submit'
        },
        fields: [
            {
                name: 'text',
                fieldType: 'text',
                label: 'Text',
                placeholder: 'Enter your text',
                schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required(),
                defaultValue: 'hello world'
            },
            {
                fieldType: 'custom',
                name: 'Custom Provider Tags',
                label: 'Custom provider tags go here...',
                component: CustomProviderTagsSection,
                fields: [
                    {
                        fieldType: 'repeater',
                        label: 'customProviderTags',
                        name: 'customProviderTags',
                        schema: __WEBPACK_EXTERNAL_MODULE_yup__.array().of(__WEBPACK_EXTERNAL_MODULE_yup__.object({
                            tagKey: __WEBPACK_EXTERNAL_MODULE_yup__.string().trim().when('$showAdvancedSettings', ([showAdvancedSettings], schema)=>{
                                console.log('$showAdvancedSettings', showAdvancedSettings, schema);
                                return showAdvancedSettings ? schema.required() : schema;
                            }),
                            tagValue: __WEBPACK_EXTERNAL_MODULE_yup__.string().trim().when('$showAdvancedSettings', ([showAdvancedSettings], schema)=>showAdvancedSettings ? schema.required() : schema)
                        }))
                    },
                    {
                        fieldType: 'text',
                        label: 'customField',
                        name: 'customField',
                        schema: __WEBPACK_EXTERNAL_MODULE_yup__.string().required('Provide a custom value')
                    }
                ]
            }
        ]
    },
    render: (args)=>/*#__PURE__*/ React.createElement(FormWithProvider, args)
};
export { CustomFormComponents, CustomSubmit, DefaultDisabled, DefaultFetching, DefaultWithDeveloperView, DisabledWithTimeout, FormFieldExamples, FormWithAction, FormWithControlledSelect, FormWithFieldDescription, FormWithTooltip, NonRequiredField, RadioGroupExamples, Form_stories_rslib_entry_ as default };
