@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/esm/product/setting/ProductVariants.js

@@ -1,1400 +0,0 @@
-import { rectangleListPresetConfig } from './swatches-style-config/rectangle-list.js';
-import { colorPresetConfig } from './swatches-style-config/color.js';
-import { imagePresetConfig } from './swatches-style-config/image.js';
-import { imageShopifyPresetConfig } from './swatches-style-config/image-shopify.js';
-import { dropdownPresetConfig } from './swatches-style-config/dropdown.js';
-
-const config = {
-    tag: 'ProductVariants',
-    label: 'Product Variants & Swatches',
-    icon: `
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33301 9.16663C1.33301 8.89048 1.55687 8.66663 1.83301 8.66663H14.833C15.1091 8.66663 15.333 8.89048 15.333 9.16663V17.7105C15.333 17.9866 15.1091 18.2105 14.833 18.2105H1.83301C1.55687 18.2105 1.33301 17.9866 1.33301 17.7105V9.16663ZM3.66634 15.8245H12.9997V11.0526H3.66634V15.8245ZM18.833 9.16663C18.833 8.89048 19.0569 8.66663 19.333 8.66663H32.333C32.6091 8.66663 32.833 8.89048 32.833 9.16663V17.7105C32.833 17.9866 32.6091 18.2105 32.333 18.2105H19.333C19.0569 18.2105 18.833 17.9866 18.833 17.7105V9.16663ZM21.1663 15.8245H30.4997V11.0526H21.1663V15.8245ZM7.16634 30.8333C7.16634 31.1094 7.3902 31.3333 7.66634 31.3333H20.6663C20.9425 31.3333 21.1663 31.1094 21.1663 30.8333V22.2894C21.1663 22.0133 20.9425 21.7894 20.6663 21.7894H7.66634C7.3902 21.7894 7.16634 22.0133 7.16634 22.2894V30.8333ZM9.49967 24.1754H18.833V28.9473H9.49967V24.1754ZM25.1663 31.3333C24.8902 31.3333 24.6663 31.1094 24.6663 30.8333V22.2894C24.6663 22.0133 24.8902 21.7894 25.1663 21.7894H38.1663C38.4425 21.7894 38.6663 22.0133 38.6663 22.2894V30.8333C38.6663 31.1094 38.4425 31.3333 38.1663 31.3333H25.1663ZM26.9997 28.9473H36.333V24.1754H26.9997V28.9473Z" fill="currentColor"/>
-  </svg>
-  `,
-    settings: [
-        {
-            id: 'setting',
-            controls: [
-                {
-                    id: 'variantsOption',
-                    type: 'group',
-                    label: 'Variants Options',
-                    controls: [
-                        {
-                            id: 'optionType',
-                            label: 'Option Label',
-                            type: 'segment',
-                            default: 'singleOption',
-                            options: [
-                                {
-                                    label: 'Separate',
-                                    value: 'singleOption'
-                                },
-                                {
-                                    label: 'Combine',
-                                    value: 'groupOption'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'label',
-                            label: 'Option Label',
-                            type: 'toggle',
-                            default: true
-                        },
-                        {
-                            id: 'optionAlign',
-                            label: 'Alignment',
-                            type: 'segment',
-                            devices: {
-                                desktop: {
-                                    default: 'left'
-                                }
-                            },
-                            options: [
-                                {
-                                    label: 'Left',
-                                    value: 'left',
-                                    type: 'align'
-                                },
-                                {
-                                    label: 'Center',
-                                    value: 'center',
-                                    type: 'align'
-                                },
-                                {
-                                    label: 'Right',
-                                    value: 'right',
-                                    type: 'align'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'price',
-                            label: 'Option Price',
-                            type: 'toggle',
-                            hide: true,
-                            default: true
-                        },
-                        {
-                            id: 'showAsSwatches',
-                            label: 'Use Option Swatches',
-                            type: 'swatchesLink',
-                            hide: true,
-                            default: true,
-                            hyperlinkInfo: {
-                                beforeText: 'Go to ',
-                                hyperlinkText: 'Manage Swatches',
-                                afterText: ' to configure options display as swatches',
-                                modal: 'manage_swatches'
-                            }
-                        },
-                        {
-                            id: 'combineFullWidth',
-                            label: 'Full Width',
-                            type: 'toggle',
-                            devices: {
-                                desktop: {
-                                    default: true
-                                }
-                            }
-                        },
-                        {
-                            id: 'combineWidth',
-                            type: 'input:unit',
-                            label: 'Width',
-                            placeholder: 'Auto',
-                            min: 0,
-                            units: [
-                                'px',
-                                '%'
-                            ],
-                            hide: true,
-                            devices: {
-                                desktop: {
-                                    default: '100%'
-                                }
-                            }
-                        },
-                        {
-                            id: 'combineHeight',
-                            type: 'input:unit',
-                            label: 'Height',
-                            placeholder: 'Auto',
-                            min: 0,
-                            units: [
-                                'px'
-                            ],
-                            default: '45px'
-                        },
-                        {
-                            id: 'variantPresets',
-                            label: 'Use Option Swatches',
-                            type: 'variant:presets',
-                            default: [
-                                {
-                                    optionName: 'base',
-                                    optionType: 'rectangle_list',
-                                    presets: {
-                                        ...colorPresetConfig,
-                                        ...rectangleListPresetConfig,
-                                        ...imagePresetConfig,
-                                        ...imageShopifyPresetConfig,
-                                        ...dropdownPresetConfig
-                                    }
-                                }
-                            ],
-                            hyperlinkInfo: {
-                                modal: 'manage_swatches'
-                            }
-                        },
-                        {
-                            id: 'soldOutStyle',
-                            type: 'select',
-                            default: 'line',
-                            options: [
-                                {
-                                    label: 'None',
-                                    value: 'none'
-                                },
-                                {
-                                    label: 'Unclickable',
-                                    value: 'disable'
-                                },
-                                {
-                                    label: 'Cross-out',
-                                    value: 'line',
-                                    icon: `sold-out-mark-line`
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'options',
-                    type: 'group',
-                    label: 'Options',
-                    controls: [
-                        {
-                            id: 'layout',
-                            label: 'Layout',
-                            type: 'layout-segment',
-                            iconViewBox: '0 0 66 45',
-                            enableItemBackground: true,
-                            devices: {
-                                desktop: {
-                                    default: 'vertical'
-                                }
-                            },
-                            options: [
-                                {
-                                    label: 'Horizontal',
-                                    value: 'horizontal',
-                                    type: 'arrange'
-                                },
-                                {
-                                    label: 'Vertical',
-                                    value: 'vertical',
-                                    type: 'arrange'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'column',
-                            label: 'Column',
-                            type: 'select',
-                            devices: {
-                                desktop: {
-                                    default: 1
-                                }
-                            },
-                            options: [
-                                {
-                                    label: '1 column',
-                                    value: 1
-                                },
-                                {
-                                    label: '2 columns',
-                                    value: 2
-                                },
-                                {
-                                    label: '3 columns',
-                                    value: 3
-                                },
-                                {
-                                    label: '4 columns',
-                                    value: 4
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'variantDisplay',
-                    type: 'group',
-                    label: 'Variant Display',
-                    controls: [
-                        {
-                            id: 'hasPreSelected',
-                            type: 'toggle',
-                            label: 'hasPreSelected',
-                            default: true
-                        },
-                        {
-                            id: 'selectVariantDefault',
-                            type: 'select-variant',
-                            label: 'Select Default Variant',
-                            hide: true
-                        }
-                    ]
-                },
-                {
-                    id: 'blankText',
-                    label: 'Blank Option Text',
-                    type: 'input',
-                    hide: true,
-                    default: 'Please select an option'
-                },
-                {
-                    id: 'hasOnlyDefaultVariant',
-                    label: 'Blank Option Text',
-                    type: 'variant:default',
-                    hide: true,
-                    default: false
-                }
-            ]
-        },
-        {
-            id: 'style',
-            controls: [
-                {
-                    id: 'dimension',
-                    type: 'group',
-                    label: 'Variants Dimension',
-                    controls: [
-                        {
-                            id: 'fullWidth',
-                            label: 'Full Width',
-                            type: 'toggle',
-                            devices: {
-                                desktop: {
-                                    default: true
-                                }
-                            }
-                        },
-                        {
-                            id: 'width',
-                            type: 'input:unit',
-                            label: 'Width',
-                            min: 0,
-                            units: [
-                                'px',
-                                '%'
-                            ],
-                            hide: true,
-                            devices: {
-                                desktop: {
-                                    default: '100%'
-                                }
-                            }
-                        },
-                        {
-                            id: 'optionSpacing',
-                            label: 'Option Spacing',
-                            type: 'input:unit',
-                            units: [
-                                'px'
-                            ],
-                            placeholder: 'Auto',
-                            default: '30px'
-                        },
-                        {
-                            id: 'labelGap',
-                            label: 'Gap',
-                            type: 'input:unit-spacing',
-                            units: [
-                                'px'
-                            ],
-                            default: '8px'
-                        }
-                    ]
-                },
-                {
-                    id: 'swatchDimension',
-                    type: 'group',
-                    label: 'Swatch Dimension',
-                    controls: [
-                        {
-                            id: 'swatchAutoWidth',
-                            label: 'Auto Width',
-                            type: 'toggle',
-                            devices: {
-                                desktop: {
-                                    default: true
-                                }
-                            }
-                        },
-                        {
-                            id: 'swatchWidth',
-                            type: 'input:unit',
-                            label: 'Width',
-                            placeholder: 'Auto Width',
-                            min: 0,
-                            units: [
-                                'px',
-                                '%'
-                            ],
-                            hide: true,
-                            devices: {
-                                desktop: {
-                                    default: '80px'
-                                }
-                            }
-                        },
-                        {
-                            id: 'swatchHeight',
-                            type: 'input:unit',
-                            label: 'Height',
-                            placeholder: 'Auto Height',
-                            min: 0,
-                            units: [
-                                'px'
-                            ],
-                            devices: {
-                                desktop: {
-                                    default: '45px'
-                                }
-                            }
-                        },
-                        {
-                            id: 'swatchSpacing',
-                            label: 'Swatch Spacing',
-                            type: 'input:unit-spacing',
-                            units: [
-                                'px'
-                            ],
-                            placeholder: 'Auto',
-                            default: 'var(--g-s-m)'
-                        },
-                        {
-                            id: 'marginBottom',
-                            label: 'Margin Bottom',
-                            type: 'input:unit-spacing',
-                            units: [
-                                'px'
-                            ],
-                            devices: {
-                                desktop: {
-                                    default: 'var(--g-s-xl)'
-                                },
-                                mobile: {
-                                    default: 'var(--g-s-xl)'
-                                }
-                            }
-                        }
-                    ]
-                },
-                {
-                    id: 'align',
-                    label: 'Align',
-                    type: 'segment',
-                    options: [
-                        {
-                            label: 'Left',
-                            value: 'left',
-                            type: 'align'
-                        },
-                        {
-                            label: 'Center',
-                            value: 'center',
-                            type: 'align'
-                        },
-                        {
-                            label: 'Right',
-                            value: 'right',
-                            type: 'align'
-                        }
-                    ],
-                    devices: {
-                        desktop: {
-                            default: 'left'
-                        }
-                    }
-                },
-                {
-                    id: 'labelGroup',
-                    type: 'group',
-                    label: 'Label',
-                    controls: [
-                        {
-                            id: 'labelTypo',
-                            type: 'typography-v2',
-                            label: 'Typography',
-                            default: {
-                                type: 'paragraph-2',
-                                attrs: {
-                                    color: 'text-1',
-                                    bold: true
-                                }
-                            },
-                            ignoreReRender: true
-                        },
-                        {
-                            id: 'labelColor',
-                            type: 'colorpicker',
-                            label: 'Text Color',
-                            default: 'text-2'
-                        }
-                    ]
-                },
-                {
-                    id: 'labelGroup',
-                    type: 'group',
-                    label: 'Option Value',
-                    controls: [
-                        {
-                            id: 'optionTypo',
-                            type: 'typography-v2',
-                            label: 'Typography',
-                            default: {
-                                type: 'paragraph-2'
-                            },
-                            hiddenSetting: {
-                                color: true
-                            },
-                            ignoreReRender: true
-                        }
-                    ]
-                },
-                {
-                    id: 'behavior-state',
-                    type: 'behavior-state',
-                    label: 'Option Value',
-                    controls: [
-                        {
-                            id: 'optionBgColor',
-                            type: 'colorpicker',
-                            label: 'Background Color',
-                            default: {
-                                normal: 'bg-3',
-                                hover: 'bg-3',
-                                active: 'bg-3'
-                            },
-                            state: {
-                                active: true,
-                                hover: true,
-                                normal: true
-                            }
-                        },
-                        {
-                            id: 'optionTextColor',
-                            type: 'colorpicker',
-                            label: 'Text Color',
-                            default: {
-                                normal: 'text-2',
-                                hover: 'text-2',
-                                active: 'text-2'
-                            },
-                            state: {
-                                active: true,
-                                hover: true,
-                                normal: true
-                            }
-                        },
-                        {
-                            id: 'optionBorder',
-                            type: 'border',
-                            label: 'Border',
-                            default: {
-                                normal: {
-                                    borderType: 'style-2',
-                                    border: 'solid',
-                                    color: 'line-2',
-                                    isCustom: false,
-                                    width: '1px 1px 1px 1px',
-                                    borderWidth: '1px'
-                                },
-                                active: {
-                                    borderType: 'style-3',
-                                    border: 'solid',
-                                    color: 'line-3',
-                                    isCustom: false,
-                                    width: '2px 2px 2px 2px',
-                                    borderWidth: '2px'
-                                },
-                                hover: {
-                                    borderType: 'style-3',
-                                    border: 'solid',
-                                    color: 'line-3',
-                                    isCustom: false,
-                                    width: '1px 1px 1px 1px',
-                                    borderWidth: '1px'
-                                }
-                            },
-                            state: {
-                                active: true,
-                                hover: true,
-                                normal: true
-                            }
-                        },
-                        {
-                            id: 'optionRounded',
-                            type: 'radius-preset',
-                            label: 'Border Radius',
-                            default: {
-                                normal: {
-                                    btrr: '0px',
-                                    bblr: '0px',
-                                    bbrr: '0px',
-                                    btlr: '0px',
-                                    radiusType: 'custom'
-                                },
-                                hover: {
-                                    btrr: '0px',
-                                    bblr: '0px',
-                                    bbrr: '0px',
-                                    btlr: '0px',
-                                    radiusType: 'custom'
-                                },
-                                active: {
-                                    btrr: '0px',
-                                    bblr: '0px',
-                                    bbrr: '0px',
-                                    btlr: '0px',
-                                    radiusType: 'custom'
-                                }
-                            },
-                            state: {
-                                active: true,
-                                hover: true,
-                                normal: true
-                            }
-                        },
-                        {
-                            id: 'optionHasShadow',
-                            type: 'toggle',
-                            label: 'Shadow Enable',
-                            default: {
-                                normal: false,
-                                hover: false,
-                                active: false
-                            },
-                            state: {
-                                normal: true,
-                                hover: true,
-                                active: true
-                            }
-                        },
-                        {
-                            id: 'optionShadow',
-                            type: 'boxShadow',
-                            label: 'Shadow',
-                            hideOnState: {
-                                normal: true,
-                                hover: true,
-                                active: true
-                            },
-                            default: {
-                                normal: {
-                                    type: 'shadow-1',
-                                    distance: '4px',
-                                    blur: '12px',
-                                    spread: '0px',
-                                    color: 'rgba(0, 0, 0, 0.20)',
-                                    angle: 90
-                                },
-                                hover: {
-                                    type: 'shadow-1',
-                                    distance: '4px',
-                                    blur: '12px',
-                                    spread: '0px',
-                                    color: 'rgba(0, 0, 0, 0.20)',
-                                    angle: 90
-                                },
-                                active: {
-                                    type: 'shadow-1',
-                                    distance: '4px',
-                                    blur: '12px',
-                                    spread: '0px',
-                                    color: 'rgba(0, 0, 0, 0.20)',
-                                    angle: 90
-                                }
-                            },
-                            state: {
-                                normal: true,
-                                hover: true,
-                                active: true
-                            }
-                        }
-                    ]
-                },
-                {
-                    id: 'dropdownItemWidth',
-                    type: 'segment',
-                    label: 'Dropdown Width',
-                    devices: {
-                        desktop: {
-                            default: 'fill'
-                        },
-                        mobile: {
-                            default: 'fill'
-                        },
-                        tablet: {
-                            default: 'fill'
-                        }
-                    },
-                    options: [
-                        {
-                            label: 'Fill',
-                            value: 'fill'
-                        },
-                        {
-                            label: 'Fixed',
-                            value: 'fixed'
-                        }
-                    ]
-                },
-                {
-                    id: 'fixedDropdownWidth',
-                    type: 'input:unit',
-                    label: 'Fixed Width',
-                    units: [
-                        'px',
-                        '%'
-                    ],
-                    devices: {
-                        desktop: {
-                            default: '240px'
-                        },
-                        mobile: {
-                            default: '240px'
-                        },
-                        tablet: {
-                            default: '240px'
-                        }
-                    }
-                },
-                {
-                    id: 'swatchItemWidth',
-                    type: 'segment',
-                    label: 'Swatch Width',
-                    devices: {
-                        desktop: {
-                            default: 'auto'
-                        }
-                    },
-                    options: [
-                        {
-                            label: 'Fill',
-                            value: 'auto'
-                        },
-                        {
-                            label: 'Fixed',
-                            value: 'fixed'
-                        }
-                    ]
-                },
-                {
-                    id: 'fixedDropdownWidth',
-                    type: 'input:unit',
-                    label: 'Fixed Width',
-                    units: [
-                        'px',
-                        '%'
-                    ],
-                    devices: {
-                        desktop: {
-                            default: '240px'
-                        }
-                    }
-                }
-            ]
-        }
-    ],
-    ui: [
-        {
-            type: 'group',
-            label: {
-                en: 'Variants settings'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Type'
-                    },
-                    setting: {
-                        id: 'optionType'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Options price'
-                    },
-                    setting: {
-                        id: 'price'
-                    },
-                    condition: "optionType == 'groupOption'"
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Sold out style'
-                    },
-                    setting: {
-                        id: 'soldOutStyle'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'control',
-            condition: 'false',
-            layout: 'vertical',
-            label: {
-                en: 'Variant style'
-            },
-            setting: {
-                id: 'showAsSwatches'
-            }
-        },
-        {
-            type: 'control',
-            condition: "optionType == 'singleOption'",
-            layout: 'vertical',
-            label: {
-                en: 'Variant style'
-            },
-            setting: {
-                id: 'variantPresets'
-            }
-        },
-        {
-            type: 'group',
-            condition: "optionType === 'groupOption'",
-            layout: 'vertical',
-            label: {
-                en: 'Variant style'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: ''
-                    },
-                    setting: {
-                        id: 'hasOnlyDefaultVariant'
-                    },
-                    layout: 'vertical',
-                    condition: 'hasOnlyDefaultVariant === true'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Width'
-                    },
-                    setting: {
-                        id: 'combineWidth'
-                    },
-                    condition: 'hasOnlyDefaultVariant === false'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Height'
-                    },
-                    setting: {
-                        id: 'combineHeight'
-                    },
-                    condition: 'hasOnlyDefaultVariant === false'
-                },
-                {
-                    type: 'tab',
-                    label: {
-                        en: 'States'
-                    },
-                    isMoreSetting: true,
-                    condition: 'hasOnlyDefaultVariant === false',
-                    controls: [
-                        {
-                            type: 'group',
-                            label: {
-                                en: 'Normal'
-                            },
-                            controls: [
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Background color'
-                                    },
-                                    setting: {
-                                        id: 'optionBgColor',
-                                        state: 'normal'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Text color'
-                                    },
-                                    setting: {
-                                        id: 'optionTextColor',
-                                        state: 'normal'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    options: {
-                                        labelPosition: 'start'
-                                    },
-                                    label: {
-                                        en: 'Border'
-                                    },
-                                    setting: {
-                                        id: 'optionBorder',
-                                        state: 'normal'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Corner'
-                                    },
-                                    setting: {
-                                        id: 'optionRounded',
-                                        state: 'normal'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Shadow'
-                                    },
-                                    setting: {
-                                        id: 'optionHasShadow',
-                                        state: 'normal'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: ''
-                                    },
-                                    condition: 'optionHasShadow.normal === true',
-                                    layout: 'vertical',
-                                    setting: {
-                                        id: 'optionShadow',
-                                        state: 'normal'
-                                    }
-                                }
-                            ]
-                        },
-                        {
-                            type: 'group',
-                            label: {
-                                en: 'Hover'
-                            },
-                            controls: [
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Background color'
-                                    },
-                                    setting: {
-                                        id: 'optionBgColor',
-                                        state: 'hover'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Text color'
-                                    },
-                                    setting: {
-                                        id: 'optionTextColor',
-                                        state: 'hover'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    options: {
-                                        labelPosition: 'start'
-                                    },
-                                    label: {
-                                        en: 'Border'
-                                    },
-                                    setting: {
-                                        id: 'optionBorder',
-                                        state: 'hover'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Corner'
-                                    },
-                                    setting: {
-                                        id: 'optionRounded',
-                                        state: 'hover'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Shadow'
-                                    },
-                                    setting: {
-                                        id: 'optionHasShadow',
-                                        state: 'hover'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: ''
-                                    },
-                                    condition: 'optionHasShadow.hover === true',
-                                    layout: 'vertical',
-                                    setting: {
-                                        id: 'optionShadow',
-                                        state: 'hover'
-                                    }
-                                }
-                            ]
-                        },
-                        {
-                            type: 'group',
-                            label: {
-                                en: 'Active'
-                            },
-                            controls: [
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Background color'
-                                    },
-                                    setting: {
-                                        id: 'optionBgColor',
-                                        state: 'active'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Text color'
-                                    },
-                                    setting: {
-                                        id: 'optionTextColor',
-                                        state: 'active'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    options: {
-                                        labelPosition: 'start'
-                                    },
-                                    label: {
-                                        en: 'Border'
-                                    },
-                                    setting: {
-                                        id: 'optionBorder',
-                                        state: 'active'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Corner'
-                                    },
-                                    setting: {
-                                        id: 'optionRounded',
-                                        state: 'active'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: 'Shadow'
-                                    },
-                                    setting: {
-                                        id: 'optionHasShadow',
-                                        state: 'active'
-                                    }
-                                },
-                                {
-                                    type: 'control',
-                                    label: {
-                                        en: ''
-                                    },
-                                    layout: 'vertical',
-                                    condition: 'optionHasShadow.active === true',
-                                    setting: {
-                                        id: 'optionShadow',
-                                        state: 'active'
-                                    }
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: ''
-            },
-            condition: "optionType !== 'groupOption'",
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Title'
-                    },
-                    setting: {
-                        id: 'label'
-                    },
-                    options: {
-                        label: 'large',
-                        styleControl: {
-                            width: 'auto'
-                        }
-                    }
-                },
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'labelTypo'
-                    },
-                    layout: 'vertical'
-                },
-                {
-                    type: 'control',
-                    condition: 'label == true',
-                    setting: {
-                        id: 'labelTypography'
-                    },
-                    layout: 'vertical'
-                },
-                {
-                    type: 'control',
-                    condition: 'label == true',
-                    label: {
-                        en: 'Arrangement'
-                    },
-                    setting: {
-                        id: 'layout'
-                    }
-                },
-                {
-                    type: 'control',
-                    condition: 'label == true',
-                    label: {
-                        en: 'Gap'
-                    },
-                    setting: {
-                        id: 'labelGap'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Option value text'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'optionTypography'
-                    },
-                    layout: 'vertical'
-                },
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'optionTypo'
-                    },
-                    layout: 'vertical'
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: ''
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Pre-selected option'
-                    },
-                    setting: {
-                        id: 'hasPreSelected'
-                    },
-                    options: {
-                        label: 'large',
-                        styleControl: {
-                            width: 'auto'
-                        }
-                    }
-                },
-                {
-                    type: 'control',
-                    condition: 'hasPreSelected == true',
-                    layout: 'vertical',
-                    setting: {
-                        id: 'selectVariantDefault'
-                    },
-                    options: {
-                        styleControl: {
-                            'max-width': '100%'
-                        }
-                    }
-                },
-                {
-                    type: 'control',
-                    condition: 'hasPreSelected == false',
-                    label: {
-                        en: 'Blank option text'
-                    },
-                    setting: {
-                        id: 'blankText'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Size'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Full width'
-                    },
-                    setting: {
-                        id: 'fullWidth'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Width'
-                    },
-                    condition: 'fullWidth == false',
-                    setting: {
-                        id: 'width'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Spacing'
-                    },
-                    setting: {
-                        id: 'marginBottom'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Align'
-            },
-            setting: {
-                id: 'align'
-            },
-            options: {
-                label: 'large'
-            }
-        }
-    ],
-    editorConfigs: {
-        placeholder: {
-            flowTag: [
-                'Product'
-            ]
-        }
-    },
-    presets: [
-        {
-            id: 'product-swatches',
-            name: {
-                en: 'Product Swatches'
-            },
-            icon: {
-                desktop: `
-          <svg width="96" height="42" viewBox="0 0 96 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M7.08159 6.5H6.20091C6.14882 6.24669 6.05768 6.02415 5.92747 5.83239C5.79963 5.64062 5.64338 5.47964 5.45872 5.34943C5.27643 5.21686 5.07401 5.11742 4.85147 5.05114C4.62894 4.98485 4.39693 4.9517 4.15545 4.9517C3.71511 4.9517 3.3162 5.06297 2.95872 5.28551C2.6036 5.50805 2.3207 5.83594 2.11 6.26918C1.90166 6.70241 1.7975 7.2339 1.7975 7.86364C1.7975 8.49337 1.90166 9.02486 2.11 9.4581C2.3207 9.89134 2.6036 10.2192 2.95872 10.4418C3.3162 10.6643 3.71511 10.7756 4.15545 10.7756C4.39693 10.7756 4.62894 10.7424 4.85147 10.6761C5.07401 10.6098 5.27643 10.5116 5.45872 10.3814C5.64338 10.2488 5.79963 10.0866 5.92747 9.89489C6.05768 9.70076 6.14882 9.47822 6.20091 9.22727H7.08159C7.0153 9.59896 6.89456 9.93158 6.71937 10.2251C6.54418 10.5187 6.32638 10.7685 6.06596 10.9744C5.80555 11.178 5.51317 11.3331 5.18883 11.4396C4.86686 11.5462 4.5224 11.5994 4.15545 11.5994C3.53519 11.5994 2.98358 11.4479 2.50062 11.1449C2.01767 10.8419 1.6377 10.411 1.36071 9.85227C1.08372 9.29356 0.945224 8.63068 0.945224 7.86364C0.945224 7.09659 1.08372 6.43371 1.36071 5.875C1.6377 5.31629 2.01767 4.88542 2.50062 4.58239C2.98358 4.27936 3.53519 4.12784 4.15545 4.12784C4.5224 4.12784 4.86686 4.18111 5.18883 4.28764C5.51317 4.39418 5.80555 4.55043 6.06596 4.75639C6.32638 4.95999 6.54418 5.20857 6.71937 5.50213C6.89456 5.79332 7.0153 6.12595 7.08159 6.5ZM10.607 11.6136C10.1146 11.6136 9.6825 11.4964 9.31081 11.2621C8.9415 11.0277 8.65267 10.6998 8.44434 10.2784C8.23837 9.85701 8.13539 9.36458 8.13539 8.80114C8.13539 8.23295 8.23837 7.73698 8.44434 7.31321C8.65267 6.88944 8.9415 6.56037 9.31081 6.32599C9.6825 6.09162 10.1146 5.97443 10.607 5.97443C11.0994 5.97443 11.5303 6.09162 11.8996 6.32599C12.2713 6.56037 12.5601 6.88944 12.7661 7.31321C12.9744 7.73698 13.0786 8.23295 13.0786 8.80114C13.0786 9.36458 12.9744 9.85701 12.7661 10.2784C12.5601 10.6998 12.2713 11.0277 11.8996 11.2621C11.5303 11.4964 11.0994 11.6136 10.607 11.6136ZM10.607 10.8608C10.981 10.8608 11.2888 10.7649 11.5303 10.5732C11.7718 10.3814 11.9505 10.1293 12.0665 9.81676C12.1825 9.50426 12.2405 9.16572 12.2405 8.80114C12.2405 8.43655 12.1825 8.09683 12.0665 7.78196C11.9505 7.46709 11.7718 7.21259 11.5303 7.01847C11.2888 6.82434 10.981 6.72727 10.607 6.72727C10.2329 6.72727 9.92516 6.82434 9.68368 7.01847C9.44221 7.21259 9.26346 7.46709 9.14746 7.78196C9.03146 8.09683 8.97346 8.43655 8.97346 8.80114C8.97346 9.16572 9.03146 9.50426 9.14746 9.81676C9.26346 10.1293 9.44221 10.3814 9.68368 10.5732C9.92516 10.7649 10.2329 10.8608 10.607 10.8608ZM15.1959 4.22727V11.5H14.3579V4.22727H15.1959ZM18.9468 11.6136C18.4544 11.6136 18.0223 11.4964 17.6507 11.2621C17.2813 11.0277 16.9925 10.6998 16.7842 10.2784C16.5782 9.85701 16.4752 9.36458 16.4752 8.80114C16.4752 8.23295 16.5782 7.73698 16.7842 7.31321C16.9925 6.88944 17.2813 6.56037 17.6507 6.32599C18.0223 6.09162 18.4544 5.97443 18.9468 5.97443C19.4392 5.97443 19.8701 6.09162 20.2394 6.32599C20.6111 6.56037 20.8999 6.88944 21.1059 7.31321C21.3142 7.73698 21.4184 8.23295 21.4184 8.80114C21.4184 9.36458 21.3142 9.85701 21.1059 10.2784C20.8999 10.6998 20.6111 11.0277 20.2394 11.2621C19.8701 11.4964 19.4392 11.6136 18.9468 11.6136ZM18.9468 10.8608C19.3209 10.8608 19.6286 10.7649 19.8701 10.5732C20.1116 10.3814 20.2903 10.1293 20.4063 9.81676C20.5223 9.50426 20.5803 9.16572 20.5803 8.80114C20.5803 8.43655 20.5223 8.09683 20.4063 7.78196C20.2903 7.46709 20.1116 7.21259 19.8701 7.01847C19.6286 6.82434 19.3209 6.72727 18.9468 6.72727C18.5728 6.72727 18.265 6.82434 18.0235 7.01847C17.782 7.21259 17.6033 7.46709 17.4873 7.78196C17.3713 8.09683 17.3133 8.43655 17.3133 8.80114C17.3133 9.16572 17.3713 9.50426 17.4873 9.81676C17.6033 10.1293 17.782 10.3814 18.0235 10.5732C18.265 10.7649 18.5728 10.8608 18.9468 10.8608ZM22.6977 11.5V6.04545H23.5074V6.86932H23.5642C23.6636 6.59943 23.8435 6.38045 24.104 6.21236C24.3644 6.04427 24.6579 5.96023 24.9846 5.96023C25.0462 5.96023 25.1231 5.96141 25.2155 5.96378C25.3078 5.96615 25.3776 5.9697 25.425 5.97443V6.8267C25.3966 6.8196 25.3315 6.80895 25.2297 6.79474C25.1302 6.77817 25.0249 6.76989 24.9136 6.76989C24.6485 6.76989 24.4117 6.82552 24.2034 6.93679C23.9974 7.04569 23.8341 7.19721 23.7133 7.39134C23.595 7.5831 23.5358 7.80208 23.5358 8.0483V11.5H22.6977Z" fill="#D6D6D6"/>
-          <g clip-path="url(#clip0_9753_94241)">
-          <rect x="0.5" y="21" width="20" height="20" rx="10" fill="#252525" stroke="#757575"/>
-          </g>
-          <rect x="25" y="20.5" width="21" height="21" rx="10.5" fill="#5B5B5B"/>
-          <rect x="25" y="20.5" width="21" height="21" rx="10.5" fill="#494949"/>
-          <rect x="50" y="20.5" width="21" height="21" rx="10.5" fill="#5B5B5B"/>
-          <rect x="75" y="20.5" width="21" height="21" rx="10.5" fill="#D6D6D6"/>
-          <defs>
-          <clipPath id="clip0_9753_94241">
-          <rect width="21" height="21" fill="white" transform="translate(0 20.5)"/>
-          </clipPath>
-          </defs>
-          </svg>
-        `
-            },
-            components: [
-                {
-                    tag: 'ProductVariants',
-                    settings: {
-                        showAsSwatches: true
-                    },
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        }
-                    }
-                }
-            ]
-        },
-        {
-            id: 'product-variant',
-            name: {
-                en: 'Product Variants'
-            },
-            icon: {
-                desktop: `
-          <svg width="96" height="40" viewBox="0 0 96 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4.94585 5.54545C4.90323 5.18561 4.73041 4.90625 4.42738 4.70739C4.12435 4.50852 3.75266 4.40909 3.31232 4.40909C2.99035 4.40909 2.70863 4.46117 2.46715 4.56534C2.22804 4.66951 2.04102 4.81274 1.90607 4.99503C1.7735 5.17732 1.70721 5.38447 1.70721 5.61648C1.70721 5.81061 1.75337 5.97751 1.8457 6.11719C1.9404 6.2545 2.06114 6.36932 2.20792 6.46165C2.3547 6.55161 2.50858 6.62618 2.66957 6.68537C2.83055 6.74219 2.97852 6.78835 3.11346 6.82386L3.8521 7.02273C4.04149 7.07244 4.25219 7.1411 4.4842 7.22869C4.71857 7.31629 4.94229 7.43584 5.15536 7.58736C5.3708 7.73651 5.54835 7.92827 5.68803 8.16264C5.82771 8.39702 5.89755 8.68466 5.89755 9.02557C5.89755 9.41856 5.79457 9.77367 5.5886 10.0909C5.385 10.4081 5.08671 10.6603 4.69371 10.8473C4.30309 11.0343 3.82842 11.1278 3.26971 11.1278C2.74888 11.1278 2.29788 11.0438 1.91673 10.8757C1.53794 10.7076 1.23964 10.4732 1.02184 10.1726C0.806404 9.87192 0.684482 9.52273 0.656072 9.125H1.56516C1.58884 9.39962 1.68117 9.62689 1.84215 9.80682C2.0055 9.98437 2.21147 10.117 2.46005 10.2045C2.711 10.2898 2.98088 10.3324 3.26971 10.3324C3.60588 10.3324 3.90773 10.2779 4.17525 10.169C4.44277 10.0578 4.65465 9.90388 4.8109 9.70739C4.96715 9.50852 5.04528 9.27652 5.04528 9.01136C5.04528 8.76989 4.97781 8.57339 4.84286 8.42188C4.70792 8.27036 4.53036 8.14725 4.31019 8.05256C4.09002 7.95786 3.8521 7.875 3.59641 7.80398L2.70153 7.5483C2.13335 7.38494 1.68353 7.15175 1.3521 6.84872C1.02066 6.54569 0.854936 6.14915 0.854936 5.65909C0.854936 5.25189 0.965021 4.89678 1.18519 4.59375C1.40773 4.28835 1.70603 4.05161 2.08008 3.88352C2.4565 3.71307 2.87672 3.62784 3.34073 3.62784C3.80948 3.62784 4.22615 3.71188 4.59073 3.87997C4.95532 4.04569 5.24414 4.27296 5.45721 4.56179C5.67264 4.85062 5.78628 5.1785 5.79812 5.54545H4.94585ZM7.23189 11V5.54545H8.06996V11H7.23189ZM7.65803 4.63636C7.49467 4.63636 7.35381 4.58073 7.23544 4.46946C7.11944 4.35819 7.06143 4.22443 7.06143 4.06818C7.06143 3.91193 7.11944 3.77817 7.23544 3.6669C7.35381 3.55563 7.49467 3.5 7.65803 3.5C7.82138 3.5 7.96106 3.55563 8.07706 3.6669C8.19543 3.77817 8.25462 3.91193 8.25462 4.06818C8.25462 4.22443 8.19543 4.35819 8.07706 4.46946C7.96106 4.58073 7.82138 4.63636 7.65803 4.63636ZM9.44869 11V10.3608L12.5453 6.38352V6.3267H9.54812V5.54545H13.6248V6.21307L10.6135 10.1619V10.2188H13.7243V11H9.44869ZM17.1458 11.1136C16.6202 11.1136 16.1668 10.9976 15.7857 10.7656C15.4069 10.5312 15.1145 10.2045 14.9086 9.78551C14.705 9.36411 14.6032 8.87405 14.6032 8.31534C14.6032 7.75663 14.705 7.2642 14.9086 6.83807C15.1145 6.40956 15.401 6.07576 15.7679 5.83665C16.1373 5.59517 16.5681 5.47443 17.0605 5.47443C17.3446 5.47443 17.6252 5.52178 17.9022 5.61648C18.1792 5.71117 18.4313 5.86506 18.6586 6.07812C18.8858 6.28883 19.0669 6.56818 19.2019 6.91619C19.3368 7.2642 19.4043 7.69271 19.4043 8.2017V8.55682H15.1998V7.83239H18.552C18.552 7.52462 18.4905 7.25 18.3674 7.00852C18.2466 6.76705 18.0738 6.57647 17.8489 6.43679C17.6264 6.29711 17.3636 6.22727 17.0605 6.22727C16.7267 6.22727 16.4379 6.31013 16.1941 6.47585C15.9526 6.6392 15.7667 6.85227 15.6365 7.11506C15.5063 7.37784 15.4412 7.65956 15.4412 7.96023V8.44318C15.4412 8.85511 15.5123 9.20431 15.6543 9.49077C15.7987 9.77486 15.9988 9.99148 16.2544 10.1406C16.5101 10.2874 16.8072 10.3608 17.1458 10.3608C17.3659 10.3608 17.5648 10.33 17.7424 10.2685C17.9223 10.2045 18.0774 10.1098 18.2076 9.98438C18.3378 9.85653 18.4384 9.69792 18.5094 9.50852L19.3191 9.7358C19.2338 10.0104 19.0906 10.2519 18.8894 10.4602C18.6882 10.6662 18.4396 10.8272 18.1436 10.9432C17.8477 11.0568 17.5151 11.1136 17.1458 11.1136Z" fill="#D6D6D6"/>
-          <path d="M13.1695 28.0455C13.1269 27.6856 12.954 27.4062 12.651 27.2074C12.348 27.0085 11.9763 26.9091 11.536 26.9091C11.214 26.9091 10.9323 26.9612 10.6908 27.0653C10.4517 27.1695 10.2646 27.3127 10.1297 27.495C9.99713 27.6773 9.93084 27.8845 9.93084 28.1165C9.93084 28.3106 9.97701 28.4775 10.0693 28.6172C10.164 28.7545 10.2848 28.8693 10.4316 28.9616C10.5783 29.0516 10.7322 29.1262 10.8932 29.1854C11.0542 29.2422 11.2021 29.2884 11.3371 29.3239L12.0757 29.5227C12.2651 29.5724 12.4758 29.6411 12.7078 29.7287C12.9422 29.8163 13.1659 29.9358 13.379 30.0874C13.5944 30.2365 13.772 30.4283 13.9117 30.6626C14.0513 30.897 14.1212 31.1847 14.1212 31.5256C14.1212 31.9186 14.0182 32.2737 13.8122 32.5909C13.6086 32.9081 13.3103 33.1603 12.9173 33.3473C12.5267 33.5343 12.0521 33.6278 11.4933 33.6278C10.9725 33.6278 10.5215 33.5438 10.1404 33.3757C9.76157 33.2076 9.46328 32.9732 9.24547 32.6726C9.03004 32.3719 8.90811 32.0227 8.87971 31.625H9.7888C9.81247 31.8996 9.9048 32.1269 10.0658 32.3068C10.2291 32.4844 10.4351 32.617 10.6837 32.7045C10.9346 32.7898 11.2045 32.8324 11.4933 32.8324C11.8295 32.8324 12.1314 32.7779 12.3989 32.669C12.6664 32.5578 12.8783 32.4039 13.0345 32.2074C13.1908 32.0085 13.2689 31.7765 13.2689 31.5114C13.2689 31.2699 13.2014 31.0734 13.0665 30.9219C12.9316 30.7704 12.754 30.6473 12.5338 30.5526C12.3137 30.4579 12.0757 30.375 11.82 30.304L10.9252 30.0483C10.357 29.8849 9.90717 29.6518 9.57573 29.3487C9.24429 29.0457 9.07857 28.6491 9.07857 28.1591C9.07857 27.7519 9.18865 27.3968 9.40882 27.0938C9.63136 26.7884 9.92966 26.5516 10.3037 26.3835C10.6801 26.2131 11.1003 26.1278 11.5644 26.1278C12.0331 26.1278 12.4498 26.2119 12.8144 26.38C13.1789 26.5457 13.4678 26.773 13.6808 27.0618C13.8963 27.3506 14.0099 27.6785 14.0218 28.0455H13.1695Z" fill="#AAABAC"/>
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M86.1928 30.9268C86.0863 31.0244 85.9137 31.0244 85.8072 30.9268L83.0799 28.4268C82.9734 28.3291 82.9734 28.1709 83.0799 28.0732C83.1864 27.9756 83.3591 27.9756 83.4656 28.0732L86 30.3964L88.5344 28.0732C88.6409 27.9756 88.8136 27.9756 88.9201 28.0732C89.0266 28.1709 89.0266 28.3291 88.9201 28.4268L86.1928 30.9268Z" fill="#AAABAC"/>
-          <rect x="0.5" y="19.5" width="95" height="20" rx="2.5" stroke="#5B5B5B"/>
-          </svg>
-        `
-            },
-            components: [
-                {
-                    tag: 'ProductVariants',
-                    settings: {
-                        variantPresets: [
-                            {
-                                optionName: 'base',
-                                optionType: 'dropdown',
-                                presets: {
-                                    dropdown: {
-                                        fullWidth: {
-                                            desktop: false,
-                                            tablet: false,
-                                            mobile: false
-                                        },
-                                        width: {
-                                            desktop: '100%',
-                                            tablet: '100%',
-                                            mobile: '100%'
-                                        },
-                                        height: '45px'
-                                    },
-                                    color: {
-                                        width: {
-                                            desktop: '45px',
-                                            tablet: '45px',
-                                            mobile: '45px'
-                                        },
-                                        height: '45px',
-                                        spacing: '16px',
-                                        optionRounded: {
-                                            normal: {
-                                                btrr: '999999px',
-                                                bblr: '999999px',
-                                                bbrr: '999999px',
-                                                btlr: '999999px',
-                                                radiusType: 'custom'
-                                            },
-                                            hover: {
-                                                btrr: '999999px',
-                                                bblr: '999999px',
-                                                bbrr: '999999px',
-                                                btlr: '999999px',
-                                                radiusType: 'custom'
-                                            },
-                                            active: {
-                                                btrr: '999999px',
-                                                bblr: '999999px',
-                                                bbrr: '999999px',
-                                                btlr: '999999px',
-                                                radiusType: 'custom'
-                                            }
-                                        }
-                                    },
-                                    rectangle_list: {
-                                        width: {
-                                            desktop: ''
-                                        },
-                                        height: '45px',
-                                        spacing: '16px'
-                                    },
-                                    image: {
-                                        width: {
-                                            desktop: '64px',
-                                            tablet: '64px',
-                                            mobile: '64px'
-                                        },
-                                        height: '64px',
-                                        spacing: '16px',
-                                        optionBgColor: {
-                                            normal: 'bg-3',
-                                            hover: 'bg-3',
-                                            active: 'bg-3'
-                                        }
-                                    },
-                                    image_shopify: {
-                                        width: {
-                                            desktop: '64px',
-                                            tablet: '64px',
-                                            mobile: '64px'
-                                        },
-                                        height: '64px',
-                                        spacing: '16px',
-                                        optionBgColor: {
-                                            normal: 'bg-3',
-                                            hover: 'bg-3',
-                                            active: 'bg-3'
-                                        }
-                                    }
-                                }
-                            }
-                        ]
-                    },
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        }
-                    }
-                }
-            ]
-        }
-    ],
-    locales: {
-        editor: {
-            en: {
-                please_select: 'Please select an option'
-            }
-        }
-    }
-};
-
-export { config as default };