import {useEffect, useState} from "@wordpress/element";
import {notifications} from "@mantine/notifications";
import {
    IconAlertTriangle,
    IconCheck, IconChevronDown, IconCloudUpload,
    IconSpace,
    IconSpacingHorizontal,
    IconSpacingVertical, IconTrash,
    IconUpload,
    IconX
} from "@tabler/icons-react";
import {
    Accordion, ActionIcon,
    Box,
    Button,
    ColorInput, Divider,
    Flex, Grid,
    Group, Image,
    NumberInput,
    rem,
    ScrollArea, Select, SimpleGrid, Skeleton,
    Stack, Switch,
    Tabs,
    Text, TextInput, useMantineTheme
} from "@mantine/core";

import {Dropzone, MIME_TYPES} from "@mantine/dropzone";
import {modals} from "@mantine/modals";
import {isNotEmpty, useForm} from "@mantine/form";
import {useViewportSize} from "@mantine/hooks";
import {useDispatch, useSelector} from "react-redux";
import {
    updateCopySelectedComponentProperty,
    updateCopySelectedComponentStyles
} from "../../../features/selectedComponent/selectedComponentSlice";
import {updateComponent} from "../../../features/pageComponents/componentsSlice";
import {
    addBannerSlide, deleteBannerSlide,
    fetchCategories,
    fetchTags, updateBannerSlide
} from "../../../features/selectedComponent/selectedComponentThunks";

const ComponentCustomization = () => {
    const theme = useMantineTheme();
    const {height, width} = useViewportSize();
    const [bannerImage, setBannerImage] = useState([]);


    const dispatch = useDispatch();
    const {copySelectedComponent, categories, tags} = useSelector((state) => state.selectedComponent);

    const [selectGroup, setSelectGroup] = useState(() => copySelectedComponent?.customize_properties.hasOwnProperty('categories') ? 'Categories' : (copySelectedComponent?.customize_properties.hasOwnProperty('tags') ? 'Tags' : 'Categories' ));


    const form = useForm({
        initialValues: {
            component_id: '',
            name: '',
            category: '',
            image: '',
            button_text: '',
            button_color: '',
        },

        validate: {
            name: isNotEmpty('Required!'),
            category: isNotEmpty('Required!'),
            image: isNotEmpty('Required!'),
        },
    });




    const bannerImagePreview = bannerImage?.map((file, index) => {
        const imageUrl = URL.createObjectURL(file);
        return <Image fit="cover" w={`90%`} h={`100%`} key={index} src={imageUrl} onLoad={() => URL.revokeObjectURL(imageUrl)} />;
    });

    const handleStyleChange = (styleGroup, key, value) => dispatch(updateCopySelectedComponentStyles({styleGroup, key, value}));
    const handlePropertyChange = (data) => dispatch(updateCopySelectedComponentProperty(data));



    const handleSelectCategory = ({item, checked}) => {

        if(checked) {

            let property = {
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    category_slugs: [...copySelectedComponent?.customize_properties.category_slugs, item.slug]
                }
            }


            if(categories?.length > 0 && categories.length === property?.customize_properties?.category_slugs?.length){
                property.customize_properties.all_category = true;
            }

            let items = [...copySelectedComponent?.items, item];

            handlePropertyChange(property)
            handlePropertyChange({items})

        } else {
            let category_slugs = copySelectedComponent?.customize_properties.category_slugs.filter(slug => slug !== item.slug);
            let items = copySelectedComponent?.items.filter(i => i.slug !== item.slug);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    category_slugs: category_slugs,
                    all_category: false
                }
            })

            handlePropertyChange({items})
        }


    }

    const handleSelectProductCategory = ({item, checked}) => {

        if(checked) {
            if (copySelectedComponent?.customize_properties.tags) {
                const {tags, ...rest} = copySelectedComponent?.customize_properties; // remove categories from customize_properties


                handlePropertyChange({
                    customize_properties: {
                        ...rest,
                        categories: [{label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]
                    }
                })

            } else {

                handlePropertyChange({
                    customize_properties: {
                        ...copySelectedComponent.customize_properties,
                        categories: [...copySelectedComponent?.customize_properties.categories, {label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]

                    }
                })
            }

        } else {
            let categories = copySelectedComponent?.customize_properties.categories.filter(category => category.slug !== item.slug);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent.customize_properties,
                    categories

                }
            })
        }
    }

    const handleSelectProductTag = ({item, checked}) => {
        if(checked) {
            if (copySelectedComponent?.customize_properties?.categories) {
                const {categories, ...rest} = copySelectedComponent?.customize_properties; // remove categories from customize_properties

                handlePropertyChange({
                    customize_properties: {
                        ...rest,
                        tags: [{label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]
                    }
                })

            } else {

                handlePropertyChange({
                    customize_properties: {
                        ...copySelectedComponent.customize_properties,
                        tags: [...copySelectedComponent.customize_properties.tags, {label: item.name, slug: item.slug, limit: 1, order: 'ASC' }]


                    }
                })
            }

        } else {

            let tags = copySelectedComponent?.customize_properties.categories.filter(tag => tag.slug !== item.slug);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent.customize_properties,
                    tags

                }
            })
        }

    }

    const handleProductLimitChange = ({item, limit}) => {

        limit = limit > parseInt(item.item_count) ? parseInt(item.item_count) : limit;


        if (copySelectedComponent?.customize_properties.hasOwnProperty('categories')){
            let categories = copySelectedComponent?.customize_properties?.categories?.map(category => category.slug === item.slug ? {...category, limit: limit} : category);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    categories
                }
            })
        }

        if (copySelectedComponent?.customize_properties.hasOwnProperty('tags')){
            let tags = copySelectedComponent?.customize_properties?.tags?.map(tag => tag.slug === item.slug ? {...tag, limit: limit} : tag);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    tags
                }
            })
        }
    }

    const handleProductSortChange = ({item, order}) => {

        if (copySelectedComponent?.customize_properties.hasOwnProperty('categories')){
            let categories = copySelectedComponent?.customize_properties?.categories?.map(category => category.slug === item.slug ? {...category, order: order} : category);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    categories
                }
            })
        }

        if (copySelectedComponent?.customize_properties.hasOwnProperty('tags')){
            let tags = copySelectedComponent?.customize_properties?.tags?.map(tag => tag.slug === item.slug ? {...tag, order: order} : tag);

            handlePropertyChange({
                customize_properties: {
                    ...copySelectedComponent?.customize_properties,
                    tags
                }
            })
        }

    }

    const handleAddBannerSlide = () => {
        const notificationId = notifications.show({
            color: theme.primaryColor + '.2',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });

        form.values.component_id = copySelectedComponent?.id


        dispatch(addBannerSlide(form.values))
            .unwrap()
            .then((res) => {
                notifications.update({
                    id: notificationId,
                    color: theme.primaryColor,
                    title:'Saved!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
                form.reset();
                setBannerImage([]);
            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }


    const handleRemoveBannerSlide = (params) => {

        modals.openConfirmModal({
            title: 'Are you sure?',
            centered: true,
            children: "",
            labels: { confirm: 'Yes', cancel: "No" },
            confirmProps: { color: theme.primaryColor },
            withCloseButton: false,
            overlayProps: {
                blur: 1,
            },
            closeOnClickOutside: false,
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                dispatch(deleteBannerSlide(params))
                    .unwrap()
                    .then(() => {
                        notifications.show({
                            color: theme.primaryColor,
                            title: 'Deleted!',
                            icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                            loading: false,
                            autoClose: 5000,
                            withCloseButton: true,
                        });
                    })
                    .catch(function (err) {
                        console.log(err);
                        notifications.show({
                            color: 'var(--mantine-color-red-9)',
                            title: err.message,
                            icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                            loading: false,
                            autoClose: 5000,
                            withCloseButton: true,
                        });
                    });
            },
        });
    }


    const handleUpdateBannerSlide = (payload) => {
        dispatch(updateBannerSlide(payload))
            .unwrap()
            .then(res => {
                notifications.show({
                    color: theme.primaryColor,
                    title: 'Updated!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            })
            .catch(function (err) {
                console.log(err);
                notifications.show({
                    color: 'var(--mantine-color-red-9)',
                    title: err.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            });
    }


    useEffect(() => {
        dispatch(updateComponent(copySelectedComponent))
    }, [copySelectedComponent, dispatch]);

    useEffect(() => {
        if(
            "Woo_BannerCategory" === copySelectedComponent.properties.class_type ||
            "Woo_Category" === copySelectedComponent.properties.class_type ||
            "Woo_CategoryProduct" === copySelectedComponent.properties.class_type
        ){
            if('Categories' === selectGroup){
                dispatch(fetchCategories())
            }
            if('Tags' === selectGroup){
                dispatch(fetchTags())
            }
        }


    }, [selectGroup]);

    return (
        <Box pt="sm" pos="relative">
            <Tabs
                variant="pills"
                defaultValue="properties"
                // px="sm"
                // pb="sm"
            >
                <Tabs.List grow bg={`gray.1`}>
                    <Tabs.Tab value="properties">Properties</Tabs.Tab>
                    <Tabs.Tab value="options">Options</Tabs.Tab>
                    <Tabs.Tab value="action">Action</Tabs.Tab>
                </Tabs.List>
                <ScrollArea h={height- 190} scrollbarSize={3}>
                    <Tabs.Panel value="properties">
                        <Accordion
                            mt={`sm`}
                            chevronPosition="right"
                            variant="contained"
                            mb={`sm`}
                            defaultValue="General"
                            styles={{
                                content: {
                                    paddingLeft: 0,
                                    paddingRight: 0,
                                    paddingBottom: 0,
                                }
                            }}
                        >
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.general_decoration?.group_label || 'General'}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.general_decoration?.group_label || 'General'}</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                mb={5}
                                                p={5}

                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={14}>Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    {
                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'margin_x', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                w={35 + item}
                                                                h={36}
                                                                radius={4}
                                                                p={0}
                                                            >
                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                <Text fz={12} px={index}>{item}</Text>
                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                            </Button>

                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}
                                                mb={5}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={14}>Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >

                                                    {
                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'margin_y', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                radius={4}
                                                                p={0}
                                                                h={40 + item}
                                                                w={31}
                                                            >
                                                                <Flex
                                                                    direction="column"
                                                                    gap={0}
                                                                >
                                                                    <IconSpace size={12}/>
                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                </Flex>
                                                            </Button>

                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}
                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                        <Text fz={14}>Horizontal</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >
                                                    {
                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'padding_x', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                w={35 + item}
                                                                h={36}
                                                                radius={4}
                                                                p={0}
                                                            >
                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                <Text fz={12} px={index}>{item}</Text>
                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                            </Button>
                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={`md`}
                                                p={5}

                                            >
                                                <Group>
                                                    <Flex
                                                        align="center"
                                                        justify="flex-start"
                                                        color="gray"
                                                        gap="xs"
                                                    >
                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                        <Text fz={14}>Vertical</Text>
                                                    </Flex>
                                                </Group>
                                                <Flex
                                                    align="center"
                                                    justify="space-between"
                                                    gap={12}
                                                >

                                                    {
                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'padding_y', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-dark-9)"
                                                                radius={4}
                                                                p={0}
                                                                h={40 + item}
                                                                w={31}
                                                            >
                                                                <Flex
                                                                    direction="column"
                                                                    gap={0}
                                                                >
                                                                    <IconSpace size={12}/>
                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                </Flex>
                                                            </Button>
                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                        </Box>
                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                color="gray"
                                                gap={5}
                                                p={5}
                                            >
                                                <Text fz={14}>Width</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    gap={5}
                                                >
                                                    {
                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'border_width', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                type="button"
                                                                variant="outline"
                                                                color="var(--mantine-color-gray-4)"
                                                                p={4}
                                                                w={67}
                                                                h={27}
                                                            >
                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.general_decoration?.border_color} h={item} w={48}></Box>}
                                                            </Button>
                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                gap={`md`}
                                                p={5}
                                            >
                                                <Text fz={14}>Color</Text>

                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: copySelectedComponent?.customize_styles?.general_decoration?.border_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => handleStyleChange('general_decoration', 'border_color', value)}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                            <Flex
                                                p={5}
                                                align="center"
                                                justify="space-between"
                                            >
                                                <Text fz={14}>Radius</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    gap={5}
                                                >
                                                    {
                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                            <Button
                                                                key={item}
                                                                onClick={() => handleStyleChange('general_decoration', 'border_radius', item.toString())}
                                                                style={copySelectedComponent?.customize_styles?.general_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                type="button"
                                                                variant="outline"
                                                                color={`gray.4`}
                                                                p={4}
                                                                w={56}
                                                                h={27}
                                                                radius={item}
                                                            >
                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                            </Button>
                                                        ))
                                                    }
                                                </Flex>

                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                p={5}
                                            >
                                                <Text fz={14}>Shadow</Text>
                                                <Flex
                                                    align="center"
                                                    justify="flex-end"
                                                    color="gray"
                                                    gap={`md`}
                                                >
                                                    {
                                                        [0, 5, 10, 15].map((item, index) => (

                                                            <Box
                                                                key={item}
                                                                h={46}
                                                                w={46}
                                                                p={5}
                                                                style={{
                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.general_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                    borderRadius: 4
                                                                }}>
                                                                <ActionIcon
                                                                    onClick={() => handleStyleChange('general_decoration', 'shadow_blur_radius', item.toString())}
                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                    variant="white" radius={2} aria-label="Icon"
                                                                    w={`100%`}
                                                                    h={`100%`}
                                                                >
                                                                </ActionIcon>
                                                            </Box>
                                                        ))
                                                    }
                                                </Flex>
                                            </Flex>
                                        </Box>

                                        <Box
                                            style={{
                                                boxShadow: 'var(--mantine-shadow-md)'
                                            }}
                                            mb={5}
                                        >
                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                            <Flex
                                                align="center"
                                                justify="space-between"
                                                p={5}
                                            >
                                                <Text fz={14}>Color</Text>
                                                <ColorInput
                                                    styles={{
                                                        wrapper: {
                                                            padding: 5,
                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                            borderRadius: "var(--mantine-radius-sm)"
                                                        },
                                                        input: {
                                                            backgroundColor: copySelectedComponent?.customize_styles?.general_decoration?.background_color,
                                                            height: 36,
                                                            width: 36,
                                                            color: "transparent",
                                                        },
                                                    }}
                                                    variant="unstyled"
                                                    disallowInput
                                                    leftSection={` `}
                                                    leftSectionWidth={0}
                                                    rightSection={` `}
                                                    rightSectionWidth={0}
                                                    defaultValue=""
                                                    value=""
                                                    onChangeEnd={(value) => handleStyleChange('general_decoration', 'background_color', value)}
                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                />
                                            </Flex>
                                        </Box>
                                    </ScrollArea>
                                </Accordion.Panel>
                            </Accordion.Item>
                            <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`Items`}>
                                <Accordion.Control>
                                    <Group wrap="nowrap">
                                        <Text fw={700}>Items</Text>
                                    </Group>
                                </Accordion.Control>
                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                    <Stack gap={`xs`}>
                                        <Accordion
                                            chevronPosition="right"
                                            variant="contained"
                                            styles={{
                                                content: {
                                                    paddingLeft: 0,
                                                    paddingRight: 0
                                                },
                                                label: {
                                                    paddingTop: 5,
                                                    paddingBottom: 5
                                                },
                                                item: {
                                                    border: 'none'
                                                }
                                            }}
                                        >
                                            { copySelectedComponent?.customize_styles?.box_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.box_decoration?.group_label || 'Box'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.box_decoration?.group_label || 'Box'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'border_width', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-gray-4)"
                                                                                p={4}
                                                                                w={67}
                                                                                h={27}
                                                                            >
                                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.box_decoration?.border_color} h={item} w={48}></Box>}
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.box_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('box_decoration', 'border_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('box_decoration', 'border_radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.box_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 5, 10, 15].map((item, index) => (

                                                                            <Box
                                                                                key={item}
                                                                                h={46}
                                                                                w={46}
                                                                                p={5}
                                                                                style={{
                                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.box_decoration?.shadow_blur_radius == item ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                                    borderRadius: 4
                                                                                }}>
                                                                                <ActionIcon
                                                                                    onClick={() => handleStyleChange('box_decoration', 'shadow_blur_radius', item.toString())}
                                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                    variant="white" radius={2} aria-label="Icon"
                                                                                    w={`100%`}
                                                                                    h={`100%`}
                                                                                >
                                                                                </ActionIcon>
                                                                            </Box>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.box_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('box_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.body_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.body_decoration?.group_label || 'Body'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.body_decoration?.group_label || 'Body'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'border_width', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-gray-4)"
                                                                                p={4}
                                                                                w={67}
                                                                                h={27}
                                                                            >
                                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.body_decoration?.border_color} h={item} w={48}></Box>}
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.body_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('body_decoration', 'border_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('body_decoration', 'border_radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.body_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 5, 10, 15].map((item, index) => (

                                                                            <Box
                                                                                key={item}
                                                                                h={46}
                                                                                w={46}
                                                                                p={5}
                                                                                style={{
                                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.body_decoration?.shadow_blur_radius == item ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                                    borderRadius: 4
                                                                                }}>
                                                                                <ActionIcon
                                                                                    onClick={() => handleStyleChange('body_decoration', 'shadow_blur_radius', item.toString())}
                                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                    variant="white" radius={2} aria-label="Icon"
                                                                                    w={`100%`}
                                                                                    h={`100%`}
                                                                                >
                                                                                </ActionIcon>
                                                                            </Box>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.body_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('body_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.selected_option_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.selected_option_decoration?.group_label || 'Selected Option'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.selected_option_decoration?.group_label || 'Selected Option'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'border_width', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-gray-4)"
                                                                                p={4}
                                                                                w={67}
                                                                                h={27}
                                                                            >
                                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.selected_option_decoration?.border_color} h={item} w={48}></Box>}
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.selected_option_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('selected_option_decoration', 'border_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('selected_option_decoration', 'border_radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.selected_option_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 5, 10, 15].map((item, index) => (

                                                                            <Box
                                                                                key={item}
                                                                                h={46}
                                                                                w={46}
                                                                                p={5}
                                                                                style={{
                                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.selected_option_decoration?.shadow_blur_radius == item ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                                    borderRadius: 4
                                                                                }}>
                                                                                <ActionIcon
                                                                                    onClick={() => handleStyleChange('selected_option_decoration', 'shadow_blur_radius', item.toString())}
                                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                    variant="white" radius={2} aria-label="Icon"
                                                                                    w={`100%`}
                                                                                    h={`100%`}
                                                                                >
                                                                                </ActionIcon>
                                                                            </Box>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.selected_option_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('selected_option_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.un_selected_option_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.group_label || 'Un Selected Option'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.un_selected_option_decoration?.group_label || 'Un Selected Option'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'border_width', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-gray-4)"
                                                                                p={4}
                                                                                w={67}
                                                                                h={27}
                                                                            >
                                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.border_color} h={item} w={48}></Box>}
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.un_selected_option_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('un_selected_option_decoration', 'border_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('un_selected_option_decoration', 'border_radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.un_selected_option_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 5, 10, 15].map((item, index) => (

                                                                            <Box
                                                                                key={item}
                                                                                h={46}
                                                                                w={46}
                                                                                p={5}
                                                                                style={{
                                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.un_selected_option_decoration?.shadow_blur_radius == item ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                                    borderRadius: 4
                                                                                }}>
                                                                                <ActionIcon
                                                                                    onClick={() => handleStyleChange('un_selected_option_decoration', 'shadow_blur_radius', item.toString())}
                                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                    variant="white" radius={2} aria-label="Icon"
                                                                                    w={`100%`}
                                                                                    h={`100%`}
                                                                                >
                                                                                </ActionIcon>
                                                                            </Box>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.un_selected_option_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('un_selected_option_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.image_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.image_decoration?.group_label || 'Image'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.image_decoration?.group_label || 'Image'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Radius</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('image_decoration', 'radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.image_decoration?.radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.text_decoration?.group_label || 'Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.text_decoration?.group_label || 'Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('text_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.text_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('text_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.text_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>
                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('text_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.text_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('text_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.text_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_brand_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_brand_text_decoration?.group_label || 'Product Brand Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_brand_text_decoration?.group_label || 'Product Brand Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_brand_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_brand_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_brand_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_brand_text_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_label_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_label_text_decoration?.group_label || 'Product Label Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_label_text_decoration?.group_label || 'Product Label Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_label_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_label_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_label_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_label_text_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_price_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_price_text_decoration?.group_label || 'Product Price Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_price_text_decoration?.group_label || 'Product Price Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_price_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_price_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_rating_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_rating_text_decoration?.group_label || 'Product Rating Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_rating_text_decoration?.group_label || 'Product Rating Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)' }} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_rating_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_rating_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_rating_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_rating_text_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_category_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_category_text_decoration?.group_label || 'Product Category Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_category_text_decoration?.group_label || 'Product Category Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_category_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_category_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.product_discount_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.product_discount_text_decoration?.group_label || 'Product Discount Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.product_discount_text_decoration?.group_label || 'Product Discount Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_discount_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_discount_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.product_discount_text_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('product_discount_text_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.name_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.name_text_decoration?.group_label || 'Name Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.name_text_decoration?.group_label || 'Name Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.name_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('name_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.selected_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.selected_text_decoration?.group_label || 'Selected Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.selected_text_decoration?.group_label || 'Selected Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.selected_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('selected_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.un_selected_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.un_selected_text_decoration?.group_label || 'Un Selected Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.un_selected_text_decoration?.group_label || 'Un Selected Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>

                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.un_selected_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('un_selected_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.icon_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.icon_decoration?.group_label || 'Icon'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.icon_decoration?.group_label || 'Icon'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>


                                                        <Box style={{ boxShadow: 'var(--mantine-shadow-md)'}} mb={5}>
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.icon_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('icon_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.primary_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.primary_text_decoration?.group_label || 'Primary Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.primary_text_decoration?.group_label || 'Primary Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.primary_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('primary_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.secondary_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.secondary_text_decoration?.group_label || 'Secondary Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.secondary_text_decoration?.group_label || 'Secondary Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.secondary_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('secondary_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.author_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.author_text_decoration?.group_label || 'Author Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.author_text_decoration?.group_label || 'Author Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.author_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('author_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.button_decoration?.group_label || 'Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.button_decoration?.group_label || 'Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.button_text_decoration?.group_label || 'Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.button_text_decoration?.group_label || 'Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.approve_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.approve_button_decoration?.group_label || 'Approve Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.approve_button_decoration?.group_label || 'Approve Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.approve_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.approve_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('approve_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('approve_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.approve_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.approve_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('approve_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.approve_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('approve_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.approve_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.approve_button_text_decoration?.group_label || 'Approve Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.approve_button_text_decoration?.group_label || 'Approve Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.approve_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('approve_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.submit_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.submit_button_decoration?.group_label || 'Submit Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.submit_button_decoration?.group_label || 'Submit Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.submit_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.submit_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('submit_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('submit_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.submit_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.submit_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('submit_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.submit_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('submit_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.submit_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.submit_button_text_decoration?.group_label || 'Submit Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.submit_button_text_decoration?.group_label || 'Submit Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.submit_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('submit_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.disable_submit_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.group_label || 'Disable Submit Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.group_label || 'Disable Submit Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('disable_submit_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('disable_submit_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('disable_submit_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.disable_submit_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('disable_submit_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.disable_submit_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.disable_submit_button_text_decoration?.group_label || 'Disable Submit Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.disable_submit_button_text_decoration?.group_label || 'Disable Submit Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.disable_submit_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('disable_submit_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.avatar_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.avatar_decoration?.group_label || 'Avatar'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.avatar_decoration?.group_label || 'Avatar'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Radius</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('avatar_decoration', 'radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.avatar_decoration?.radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.decline_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.decline_button_decoration?.group_label || 'Decline Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.decline_button_decoration?.group_label || 'Decline Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.decline_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.decline_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('decline_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('decline_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.decline_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.decline_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('decline_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.decline_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('decline_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.decline_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.decline_button_text_decoration?.group_label || 'Decline Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.decline_button_text_decoration?.group_label || 'Decline Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.decline_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('decline_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.search_list_view_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.search_list_view_decoration?.group_label || 'Search List View'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.search_list_view_decoration?.group_label || 'Search List View'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >

                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'margin_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'margin_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingHorizontal size={24} stroke={1}/>
                                                                        <Text fz={14}>Horizontal</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'padding_x', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                w={35 + item}
                                                                                h={36}
                                                                                radius={4}
                                                                                p={0}
                                                                            >
                                                                                <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                <Text fz={12} px={index}>{item}</Text>
                                                                                <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                color="gray"
                                                                p={5}
                                                            >
                                                                <Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-start"
                                                                        color="gray"
                                                                        gap="xs"
                                                                    >
                                                                        <IconSpacingVertical size={24} stroke={1}/>
                                                                        <Text fz={14}>Vertical</Text>
                                                                    </Flex>
                                                                </Group>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 4, 8, 16, 24].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'padding_y', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-dark-9)"
                                                                                radius={4}
                                                                                p={0}
                                                                                h={40 + item}
                                                                                w={31}
                                                                            >
                                                                                <Flex
                                                                                    direction="column"
                                                                                    gap={0}
                                                                                >
                                                                                    <IconSpace size={12}/>
                                                                                    <Text fz={12} py={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                </Flex>
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>

                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Width</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 1, 2, 3, 4].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'border_width', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color="var(--mantine-color-gray-4)"
                                                                                p={4}
                                                                                w={67}
                                                                                h={27}
                                                                            >
                                                                                {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.search_list_view_decoration?.border_color} h={item} w={48}></Box>}
                                                                            </Button>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.search_list_view_decoration?.border_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('search_list_view_decoration', 'border_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Radius</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray.4"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 10, 20, 30, 40].map((item, index) => (

                                                                            <Button
                                                                                key={item}
                                                                                onClick={() => handleStyleChange('search_list_view_decoration', 'border_radius', item.toString())}
                                                                                style={copySelectedComponent?.customize_styles?.search_list_view_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                type="button"
                                                                                variant="outline"
                                                                                color={`gray.4`}
                                                                                p={4}
                                                                                w={56}
                                                                                h={27}
                                                                                radius={item}
                                                                            >
                                                                                <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                            </Button>

                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="flex-end"
                                                                    color="gray"
                                                                    gap={5}
                                                                >
                                                                    {
                                                                        [0, 5, 10, 15].map((item, index) => (

                                                                            <Box
                                                                                key={item}
                                                                                h={46}
                                                                                w={46}
                                                                                p={5}
                                                                                style={{
                                                                                    border: `1px solid ${copySelectedComponent?.customize_styles?.search_list_view_decoration?.shadow_blur_radius == item ? "var(--mantine-color-orange-6)" : "var(--mantine-color-gray-2)"}`,
                                                                                    borderRadius: 4
                                                                                }}>
                                                                                <ActionIcon
                                                                                    onClick={() => handleStyleChange('search_list_view_decoration', 'shadow_blur_radius', item.toString())}
                                                                                    style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                    variant="white" radius={2} aria-label="Icon"
                                                                                    w={`100%`}
                                                                                    h={`100%`}
                                                                                >
                                                                                </ActionIcon>
                                                                            </Box>
                                                                        ))
                                                                    }
                                                                </Flex>
                                                            </Flex>
                                                        </Box>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>

                                                                <ColorInput
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.search_list_view_decoration?.background_color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('search_list_view_decoration', 'background_color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.link_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.link_button_decoration?.group_label || 'Link Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.link_button_decoration?.group_label || 'Link Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.link_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.link_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('link_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('link_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.link_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.link_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('link_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.link_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('link_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.link_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.link_button_text_decoration?.group_label || 'Link Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.link_button_text_decoration?.group_label || 'Link Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.link_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('link_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.primary_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.primary_button_decoration?.group_label || 'Primary Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.primary_button_decoration?.group_label || 'Primary Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.primary_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.primary_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('primary_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('primary_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.primary_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.primary_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('primary_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.primary_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('primary_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.primary_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.primary_button_text_decoration?.group_label || 'Primary Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.primary_button_text_decoration?.group_label || 'Primary Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.primary_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('primary_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.secondary_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.secondary_button_decoration?.group_label || 'Secondary Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.secondary_button_decoration?.group_label || 'Secondary Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.secondary_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.secondary_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('secondary_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('secondary_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.secondary_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.secondary_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('secondary_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.secondary_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('secondary_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.secondary_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.secondary_button_text_decoration?.group_label || 'Secondary Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.secondary_button_text_decoration?.group_label || 'Secondary Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.secondary_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('secondary_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.text_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.text_button_decoration?.group_label || 'Text Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.text_button_decoration?.group_label || 'Text Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.text_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.text_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('text_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('text_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.text_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.text_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('text_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.text_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('text_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.text_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.text_button_text_decoration?.group_label || 'Text Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.text_button_text_decoration?.group_label || 'Text Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.text_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('text_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.view_more_button_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.view_more_button_decoration?.group_label || 'View More Button'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.view_more_button_decoration?.group_label || 'View More Button'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.view_more_button_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.view_more_button_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('view_more_button_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('view_more_button_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.view_more_button_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.view_more_button_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('view_more_button_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.view_more_button_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('view_more_button_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}


                                            { copySelectedComponent?.customize_styles?.view_more_button_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.view_more_button_text_decoration?.group_label || 'View More Button Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.view_more_button_text_decoration?.group_label || 'View More Button Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.view_more_button_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('view_more_button_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.hint_text_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.hint_text_decoration?.group_label || 'Hint Text'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700} p={0}>{copySelectedComponent?.customize_styles?.hint_text_decoration?.group_label || 'Hint Text'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <Box
                                                            style={{
                                                                boxShadow: 'var(--mantine-shadow-md)'
                                                            }}
                                                            mb={5}
                                                        >
                                                            <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                            <Flex
                                                                align="center"
                                                                justify="space-between"
                                                                p={5}
                                                            >
                                                                <Text fz={14}>Color</Text>
                                                                <ColorInput
                                                                    // format="hexa"
                                                                    styles={{
                                                                        wrapper: {
                                                                            padding: 5,
                                                                            border: "var(--mantine-color-gray-2) 1px solid",
                                                                            borderRadius: "var(--mantine-radius-sm)"
                                                                        },
                                                                        input: {
                                                                            backgroundColor: copySelectedComponent?.customize_styles?.hint_text_decoration?.color,
                                                                            height: 36,
                                                                            width: 36,
                                                                            color: "transparent",
                                                                        },
                                                                    }}
                                                                    variant="unstyled"
                                                                    disallowInput
                                                                    leftSection={` `}
                                                                    leftSectionWidth={0}
                                                                    rightSection={` `}
                                                                    rightSectionWidth={0}
                                                                    defaultValue=""
                                                                    value=""
                                                                    onChangeEnd={(value) => handleStyleChange('hint_text_decoration', 'color', value)}
                                                                    swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                />
                                                            </Flex>
                                                        </Box>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                            { copySelectedComponent?.customize_styles?.textbox_licon_decoration && (
                                                <Accordion.Item mb={10} style={{borderRadius: 'var(--mantine-radius-sm)'}} value={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.group_label || 'Textbox Licon'}>
                                                    <Accordion.Control bg={theme.primaryColor + '.0'}>
                                                        <Text fw={700}>{copySelectedComponent?.customize_styles?.textbox_licon_decoration?.group_label || 'Textbox Licon'}</Text>
                                                    </Accordion.Control>
                                                    <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                        <ScrollArea h={height- 380} scrollbarSize={3} type="auto">
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Margin</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    mb={5}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'margin_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.margin_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                    mb={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'margin_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.margin_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>

                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Padding</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingHorizontal size={24} stroke={1}/>
                                                                            <Text fz={14}>Horizontal</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >
                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'padding_x', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.padding_x == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    w={35 + item}
                                                                                    h={36}
                                                                                    radius={4}
                                                                                    p={0}
                                                                                >
                                                                                    <IconSpace style={{transform: "rotate(270deg)"}} size={12}/>
                                                                                    <Text fz={12} px={index}>{item}</Text>
                                                                                    <IconSpace style={{transform: "rotate(90deg)"}} size={12}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={`md`}
                                                                    p={5}

                                                                >
                                                                    <Group>
                                                                        <Flex
                                                                            align="center"
                                                                            justify="flex-start"
                                                                            color="gray"
                                                                            gap="xs"
                                                                        >
                                                                            <IconSpacingVertical size={24} stroke={1}/>
                                                                            <Text fz={14}>Vertical</Text>
                                                                        </Flex>
                                                                    </Group>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="space-between"
                                                                        gap={12}
                                                                    >

                                                                        {
                                                                            [0, 4, 8, 16, 24].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'padding_y', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.padding_y == item ? {border: `${theme.primaryColor} 1px solid`} : {border: "var(--mantine-color-gray-4) 1px solid"}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-dark-9)"
                                                                                    radius={4}
                                                                                    p={0}
                                                                                    h={40 + item}
                                                                                    w={31}
                                                                                >
                                                                                    <Flex
                                                                                        direction="column"
                                                                                        gap={0}
                                                                                    >
                                                                                        <IconSpace size={12}/>
                                                                                        <Text fz={12} py={index}>{item}</Text>
                                                                                        <IconSpace style={{transform: "rotate(180deg)"}} size={12}/>

                                                                                    </Flex>
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Border</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    color="gray"
                                                                    gap={5}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Width</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 1, 2, 3, 4].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'border_width', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.border_width == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color="var(--mantine-color-gray-4)"
                                                                                    p={4}
                                                                                    w={67}
                                                                                    h={27}
                                                                                >
                                                                                    {0 === item && <Text c="dark.9" fz={12}>No Border</Text>}
                                                                                    {0 !== item && <Box bg={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.border_color} h={item} w={48}></Box>}
                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    gap={`md`}
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>

                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.textbox_licon_decoration?.border_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('textbox_licon_decoration', 'border_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                                <Flex
                                                                    p={5}
                                                                    align="center"
                                                                    justify="space-between"
                                                                >
                                                                    <Text fz={14}>Radius</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        gap={5}
                                                                    >
                                                                        {
                                                                            [0, 10, 20, 30, 40].map((item, index) => (

                                                                                <Button
                                                                                    key={item}
                                                                                    onClick={() => handleStyleChange('textbox_licon_decoration', 'border_radius', item.toString())}
                                                                                    style={copySelectedComponent?.customize_styles?.textbox_licon_decoration?.border_radius == item ? {border: `${theme.primaryColor} 1px solid`} : {}}
                                                                                    type="button"
                                                                                    variant="outline"
                                                                                    color={`gray.4`}
                                                                                    p={4}
                                                                                    w={56}
                                                                                    h={27}
                                                                                    radius={item}
                                                                                >
                                                                                    <Skeleton height={`70%`} width={70} radius={2} animate={false}/>

                                                                                </Button>
                                                                            ))
                                                                        }
                                                                    </Flex>

                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Shadow</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Shadow</Text>
                                                                    <Flex
                                                                        align="center"
                                                                        justify="flex-end"
                                                                        color="gray"
                                                                        gap={`md`}
                                                                    >
                                                                        {
                                                                            [0, 5, 10, 15].map((item, index) => (

                                                                                <Box
                                                                                    key={item}
                                                                                    h={46}
                                                                                    w={46}
                                                                                    p={5}
                                                                                    style={{
                                                                                        border: `1px solid ${copySelectedComponent?.customize_styles?.textbox_licon_decoration?.shadow_blur_radius == item ? theme.primaryColor : "var(--mantine-color-gray-2)"}`,
                                                                                        borderRadius: 4
                                                                                    }}>
                                                                                    <ActionIcon
                                                                                        onClick={() => handleStyleChange('textbox_licon_decoration', 'shadow_blur_radius', item.toString())}
                                                                                        style={{boxShadow: `var(--mantine-color-gray-4) 0px 4px ${0 === item ? 4 : item}px 0px`}}
                                                                                        variant="white" radius={2} aria-label="Icon"
                                                                                        w={`100%`}
                                                                                        h={`100%`}
                                                                                    >
                                                                                    </ActionIcon>
                                                                                </Box>
                                                                            ))
                                                                        }
                                                                    </Flex>
                                                                </Flex>
                                                            </Box>

                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Background</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.textbox_licon_decoration?.background_color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('textbox_licon_decoration', 'background_color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                            <Box
                                                                style={{
                                                                    boxShadow: 'var(--mantine-shadow-md)'
                                                                }}
                                                                mb={5}
                                                            >
                                                                <Text bg="gray.0" mb={5} p={5} style={{ borderBottom: '1px solid #FFDDB3'}}>Color</Text>
                                                                <Flex
                                                                    align="center"
                                                                    justify="space-between"
                                                                    p={5}
                                                                >
                                                                    <Text fz={14}>Color</Text>
                                                                    <ColorInput
                                                                        styles={{
                                                                            wrapper: {
                                                                                padding: 5,
                                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                                borderRadius: "var(--mantine-radius-sm)"
                                                                            },
                                                                            input: {
                                                                                backgroundColor: copySelectedComponent?.customize_styles?.textbox_licon_decoration?.color,
                                                                                height: 36,
                                                                                width: 36,
                                                                                color: "transparent",
                                                                            },
                                                                        }}
                                                                        variant="unstyled"
                                                                        disallowInput
                                                                        leftSection={` `}
                                                                        leftSectionWidth={0}
                                                                        rightSection={` `}
                                                                        rightSectionWidth={0}
                                                                        defaultValue=""
                                                                        value=""
                                                                        onChangeEnd={(value) => handleStyleChange('textbox_licon_decoration', 'color', value)}
                                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                                    />
                                                                </Flex>
                                                            </Box>
                                                        </ScrollArea>
                                                    </Accordion.Panel>
                                                </Accordion.Item>
                                            )}

                                        </Accordion>
                                    </Stack>
                                </Accordion.Panel>
                            </Accordion.Item>
                        </Accordion>
                    </Tabs.Panel>
                    <Tabs.Panel value="options">
                        <Stack gap={`xs`} mt={10}>
                            <TextInput
                                label="Label"
                                placeholder=""
                                w={`99%`}
                                value={copySelectedComponent?.customize_properties.label || ''}
                                onChange={(event) => handlePropertyChange({
                                    customize_properties: {
                                        ...copySelectedComponent?.customize_properties,
                                        label: event.currentTarget.value
                                    }
                                })}

                            />

                            {
                                "Woo_BannerCategory" === copySelectedComponent?.properties?.class_type && (
                                    <Stack gap={`xs`} mt={10}>
                                        <Box component="form" onSubmit={form.onSubmit(handleAddBannerSlide)}>
                                            <TextInput
                                                label="Add Banner Name"
                                                placeholder="Add Banner Name"
                                                w={`99%`}
                                                {...form.getInputProps('name')}

                                            />

                                            <Flex
                                                gap={0}
                                                direction="column"
                                                wrap="nowrap"
                                            >
                                                <Text fz="sm">Upload Image</Text>
                                                <Dropzone
                                                    onDrop={(file) => {
                                                        setBannerImage(file)
                                                        // setLogo(file)
                                                        form.setValues({image: file[0]})
                                                    }}
                                                    onReject={(file) => {
                                                        notifications.show({
                                                            title: 'Invalid file',
                                                            // message: 'File size should not exceed 5mb',
                                                            color: 'var(--mantine-color-red-9)',
                                                            autoClose: 5000,
                                                            icon: <IconAlertTriangle style={{width: rem(18), height: rem(18)}}/>
                                                        })
                                                    }}
                                                    maxSize={5 * 1024 ** 2}
                                                    accept={[MIME_TYPES.png]}
                                                    style={{border: '2px dashed var(--mantine-color-orange-4)'}}
                                                >
                                                    <Stack gap="sm" align="center" mih={80} style={{pointerEvents: 'none'}}>
                                                        <Dropzone.Accept>
                                                            <IconUpload
                                                                style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)'}}
                                                                stroke={1.5}
                                                            />
                                                        </Dropzone.Accept>
                                                        <Dropzone.Reject>
                                                            <IconX
                                                                style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)'}}
                                                                stroke={1.5}
                                                            />
                                                        </Dropzone.Reject>
                                                        <Dropzone.Idle>
                                                            {bannerImagePreview.length > 0 && bannerImagePreview}
                                                            {/*{bannerImage.length === 0 && settingsData.app_splash_screen && <Image fit="cover" w={`90%`} h={`100%`} src={settingsData.app_splash_screen} />}*/}
                                                            {bannerImagePreview.length === 0 && <IconCloudUpload style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)'}} stroke={1.5} />}

                                                        </Dropzone.Idle>

                                                        <Text size="xl" inline>Drag Image or <Text span c={theme.primaryColor + '.4'}>Upload</Text></Text>
                                                    </Stack>
                                                </Dropzone>
                                            </Flex>

                                            <Select
                                                label="Dropdown (Category or Tag)"
                                                placeholder="Category"
                                                data={categories?.map(category => ({ value: category.slug, label: category.name }))}
                                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                rightSectionPointerEvents="none"
                                                onChange={value => form.setValues({category: value})}
                                                nothingFoundMessage="Nothing found..."
                                                maxDropdownHeight={200}
                                                w={`99%`}
                                                styles={{
                                                    input: {
                                                        backgroundColor: 'transparent'
                                                    }
                                                }}


                                            />

                                            <Flex
                                                justify="space-between"
                                                align="center"
                                                gap="md"
                                            >
                                                <TextInput
                                                    label="Button Text"
                                                    placeholder="Button text"
                                                    w={`100%`}
                                                    {...form.getInputProps('button_text')}

                                                />

                                                <Group gap={0}>
                                                    <Text fz="var(--mantine-font-size-sm)">Button Color</Text>
                                                    <ColorInput
                                                        styles={{
                                                            wrapper: {
                                                                padding: 5,
                                                                border: "var(--mantine-color-gray-2) 1px solid",
                                                                borderRadius: "var(--mantine-radius-sm)",
                                                                // width: 50,
                                                            },
                                                            input: {
                                                                backgroundColor: form.values.button_color,
                                                                height: 36,
                                                                width: 36,
                                                                color: "transparent",
                                                            },
                                                        }}
                                                        variant="unstyled"
                                                        disallowInput
                                                        leftSection={` `}
                                                        leftSectionWidth={0}
                                                        rightSection={` `}
                                                        rightSectionWidth={0}
                                                        defaultValue=""
                                                        value=""
                                                        onChangeEnd={(value) => form.setValues({button_color: value})}
                                                        {...form.getInputProps('button_color')}

                                                        swatches={['#383838', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
                                                    />
                                                </Group>
                                            </Flex>
                                            <Button type="submit" size="xs" fullWidth>Add</Button>

                                            {/*<Group justify="flex-end" gap="xs" mt="xs">
                                                <Button type="submit" size="xs" fullWidth>Add</Button>
                                            </Group>*/}
                                        </Box>

                                        <Divider size="sm"/>

                                        {copySelectedComponent?.customize_properties?.items?.map((item, index) => (
                                            <Box key={index} p={5} mt={5} style={{ border: "1px solid var(--mantine-color-gray-4)"}}>
                                                <Stack>
                                                    <TextInput
                                                        label="Name"
                                                        placeholder="Name"
                                                        w={`99%`}
                                                        value={item.name}
                                                        onChange={(event) => handlePropertyChange({
                                                            customize_properties: {
                                                                ...copySelectedComponent?.customize_properties,
                                                                items: copySelectedComponent?.customize_properties?.items.map((slide) => slide.id === item.id ? {...slide, name: event.currentTarget.value} : slide)
                                                            }
                                                        })}

                                                    />

                                                    <Image src={item?.image} fit="contain"/>
                                                    <Select
                                                        label="Dropdown (Category or Tag)"
                                                        placeholder="Category"
                                                        data={categories?.map(category => ({ value: category.slug, label: category.name }))}
                                                        value={item.category}
                                                        onChange={(value) => handlePropertyChange({
                                                            customize_properties: {
                                                                ...copySelectedComponent?.customize_properties,
                                                                items: copySelectedComponent?.customize_properties?.items.map((slide) => slide.id === item.id ? {...slide, category: value} : slide)
                                                            }
                                                        })}
                                                        rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                        allowDeselect={false}
                                                        nothingFoundMessage="Nothing found..."
                                                        maxDropdownHeight={200}
                                                        w={`99%`}

                                                        styles={{
                                                            input: {
                                                                backgroundColor: 'transparent',
                                                            }
                                                        }}

                                                    />
                                                    <Flex
                                                        justify="space-between"
                                                        align="center"
                                                        gap="md"
                                                    >
                                                        <ActionIcon size="xs" variant="subtle" onClick={() => handleRemoveBannerSlide({component_id: copySelectedComponent?.id, slide_id: item?.id})}>
                                                            <IconTrash/>
                                                        </ActionIcon>
                                                        <Button size="xs" onClick={() => handleUpdateBannerSlide({component_id: copySelectedComponent?.id, slide: item})}>Update</Button>
                                                    </Flex>
                                                </Stack>
                                            </Box>
                                        ))}
                                    </Stack>
                                )
                            }

                            {
                                "Woo_Category" === copySelectedComponent?.properties?.class_type && (

                                    <Stack mt="xs" gap={0}>
                                        <Flex justify="space-between" align="center">
                                            <Text fz="sm" fw={500}>Categories</Text>
                                            <Switch
                                                onChange={(event) => {
                                                    if(event.currentTarget.checked) {

                                                        handlePropertyChange({
                                                            customize_properties: {
                                                                ...copySelectedComponent?.customize_properties,
                                                                category_slugs: categories?.map(category => category.slug),
                                                                all_category: true
                                                            }
                                                        })

                                                        handlePropertyChange({
                                                            items: [
                                                                ...categories,
                                                            ]
                                                        })

                                                    } else {

                                                        handlePropertyChange({
                                                            customize_properties: {
                                                                ...copySelectedComponent?.customize_properties,
                                                                category_slugs: [],
                                                                all_category: false
                                                            }
                                                        })
                                                        handlePropertyChange({items: []})

                                                    }
                                                }}
                                                checked={copySelectedComponent?.customize_properties?.all_category}
                                                size="xs"
                                                label={<Text lineClamp={1}>All</Text>}
                                                radius="sm"
                                                styles={{
                                                    track: {
                                                        marginTop: '4px'
                                                    }
                                                }}
                                            />
                                        </Flex>
                                        <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                                            {
                                                categories?.map((category, index) => (
                                                    <Switch
                                                        onChange={(event) => handleSelectCategory({item: category, checked: event.currentTarget.checked})}
                                                        checked={copySelectedComponent?.customize_properties?.category_slugs?.indexOf(category.slug) > -1}
                                                        size="xs"
                                                        label={<Text lineClamp={1}>{category?.name}</Text>}
                                                        radius="sm"
                                                        styles={{
                                                            track: {
                                                                marginTop: '4px'
                                                            }
                                                        }}
                                                    />
                                                ))
                                            }

                                        </SimpleGrid>
                                    </Stack>

                                )
                            }

                            {
                                "Woo_CategoryProduct" === copySelectedComponent?.properties?.class_type && (
                                    <Stack mt="xs" gap="xs">
                                        <Select
                                            label="Categories or Tags"
                                            placeholder="Select"
                                            data={['Categories', 'Tags']}
                                            allowDeselect={false}
                                            defaultValue={selectGroup}
                                            onChange={(value) => setSelectGroup(value)}
                                            rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                            nothingFoundMessage="Nothing found..."
                                            maxDropdownHeight={200}
                                            w={`99%`}
                                            styles={{
                                                input: {
                                                    backgroundColor: 'transparent'
                                                }
                                            }}
                                        />

                                        {
                                            'Categories' === selectGroup &&
                                            <Accordion chevronPosition="right" variant="contained">
                                                {
                                                    categories?.map((item, index) => (
                                                        <Accordion.Item key={index} mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={item?.name}>
                                                            <Flex align="center" justify="space-between" ml="xs">
                                                                <Switch
                                                                    onChange={(event) => handleSelectProductCategory({item, checked: event.currentTarget.checked})}
                                                                    checked={ copySelectedComponent?.customize_properties?.categories?.some(category => category.slug === item.slug) }
                                                                    size="xs"
                                                                    radius="sm"
                                                                />
                                                                <Accordion.Control>
                                                                    <Text lineClamp={1}>{item?.name}</Text>
                                                                </Accordion.Control>
                                                            </Flex>

                                                            <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                                <Grid gutter="xs">
                                                                    <Grid.Col span={6}>
                                                                        <Stack>
                                                                            <NumberInput
                                                                                disabled={!copySelectedComponent?.customize_properties?.categories?.some(category => category.slug === item.slug)}
                                                                                label="Limit"
                                                                                onChange={(value) => handleProductLimitChange({item, limit: value})}
                                                                                allowDecimal={false}
                                                                                allowNegative={false}
                                                                                min={1}
                                                                                max={parseInt(item?.item_count)}
                                                                                value={ copySelectedComponent?.customize_properties?.categories?.find(category => category.slug === item.slug)?.limit }
                                                                            />
                                                                        </Stack>
                                                                    </Grid.Col>
                                                                    <Grid.Col span={6}>
                                                                        <Stack>
                                                                            <Select
                                                                                disabled={!copySelectedComponent?.customize_properties?.categories?.some(category => category.slug === item.slug)}
                                                                                label="Sort"
                                                                                data={[
                                                                                    { label: 'Latest', value: 'DESC' },
                                                                                    { label: 'Oldest', value: 'ASC' }
                                                                                ]}
                                                                                onChange={(value) => handleProductSortChange({item, order: value})}
                                                                                value={ copySelectedComponent?.customize_properties?.categories?.find(category => category.slug === item.slug)?.order }
                                                                                rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                                                nothingFoundMessage="Nothing found..."
                                                                                maxDropdownHeight={200}
                                                                                styles={{
                                                                                    input: {
                                                                                        backgroundColor: 'transparent'
                                                                                    }
                                                                                }}
                                                                            />
                                                                        </Stack>
                                                                    </Grid.Col>
                                                                </Grid>
                                                            </Accordion.Panel>
                                                        </Accordion.Item>

                                                    ))
                                                }

                                            </Accordion>
                                        }
                                        {
                                            'Tags' === selectGroup && (
                                                <Accordion chevronPosition="right" variant="contained">
                                                    {
                                                        tags?.map((item, index) => (
                                                            <Accordion.Item key={index} mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={item?.name}>
                                                                <Flex align="center" justify="space-between" ml="xs">
                                                                    <Switch
                                                                        onChange={(event) => handleSelectProductTag({item, checked: event.currentTarget.checked})}
                                                                        checked={ copySelectedComponent?.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                        size="xs"
                                                                        radius="sm"
                                                                    />
                                                                    <Accordion.Control>
                                                                        <Text lineClamp={1}>{item?.name}</Text>
                                                                    </Accordion.Control>
                                                                </Flex>

                                                                <Accordion.Panel style={{backgroundColor: 'white'}}>
                                                                    <Grid gutter="xs">
                                                                        <Grid.Col span={6}>
                                                                            <Stack>
                                                                                <NumberInput
                                                                                    disabled={!copySelectedComponent?.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                                    label="Limit"
                                                                                    onChange={(value) => handleProductLimitChange({item, limit: value})}
                                                                                    min={1}
                                                                                    allowDecimal={false}
                                                                                    allowNegative={false}
                                                                                    max={parseInt(item?.item_count)}
                                                                                    value={ copySelectedComponent?.customize_properties?.tags?.find(tag => tag.slug === item.slug)?.limit }
                                                                                />
                                                                            </Stack>
                                                                        </Grid.Col>
                                                                        <Grid.Col span={6}>
                                                                            <Stack>
                                                                                <Select
                                                                                    disabled={!copySelectedComponent?.customize_properties?.tags?.some(tag => tag.slug === item.slug)}
                                                                                    label="Sort"
                                                                                    data={[
                                                                                        {label: 'Latest', value: 'DESC'},
                                                                                        { label: 'Oldest', value: 'ASC' }
                                                                                    ]}
                                                                                    onChange={(value) => handleProductSortChange({item, order: value})}
                                                                                    value={ copySelectedComponent?.customize_properties?.tags?.find(tag => tag.slug === item.slug)?.order }
                                                                                    rightSection={<IconChevronDown style={{ width: rem(16), height: rem(16) }}/>}
                                                                                    nothingFoundMessage="Nothing found..."
                                                                                    maxDropdownHeight={200}
                                                                                    styles={{
                                                                                        input: {
                                                                                            backgroundColor: 'transparent'
                                                                                        }
                                                                                    }}
                                                                                />
                                                                            </Stack>
                                                                        </Grid.Col>
                                                                    </Grid>
                                                                </Accordion.Panel>
                                                            </Accordion.Item>

                                                        ))
                                                    }

                                                </Accordion>
                                            )
                                        }
                                    </Stack>
                                )
                            }
                        </Stack>

                    </Tabs.Panel>
                </ScrollArea>
            </Tabs>
        </Box>
    )
}

export default ComponentCustomization;