@gem-sdk/core 1.42.0 → 1.42.3-dev.63

package/dist/esm/components/ai-generator/components/PickProduct.js

@@ -0,0 +1,216 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { SearchIcon } from '../icons/SearchIcon.js';
+import { useListProductQuery } from '../../../hooks/shop/use-products-query.js';
+import classNames from 'classnames';
+import 'zustand';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import { useProductQuery } from '../../../hooks/shop/use-product-query.js';
+import 'vanilla-lazyload';
+import '../../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import '../../../helpers/convert.js';
+
+const PickProduct = (props)=>{
+    const LIMIT_PRODUCTS = 8;
+    const [productVariables, setProductVariables] = useState(!props.productId ? {
+        first: LIMIT_PRODUCTS
+    } : undefined);
+    const { data: productList, isLoading: isLoadingGetProducts, isValidating: isValidatingGetProducts, size: productsSize, setSize: setProductsSize } = useListProductQuery(productVariables, {
+        revalidateFirstPage: false
+    });
+    const { data: sectionProduct } = useProductQuery(props.productId);
+    const [activeProduct, setActiveProduct] = useState();
+    const [isShowChooseProduct, setIsShowChooseProduct] = useState(false);
+    const debounceSearch = useRef(null);
+    const debounceScroll = useRef(null);
+    const toggleChooseProduct = ()=>{
+        if (props.productId) return;
+        setIsShowChooseProduct(!isShowChooseProduct);
+    };
+    const chooseProduct = (product)=>{
+        setActiveProduct(product);
+        setIsShowChooseProduct(false);
+    };
+    const searchProduct = (e)=>{
+        debounceSearch.current && clearTimeout(debounceSearch.current);
+        debounceSearch.current = setTimeout(()=>{
+            const searchValue = e.target.value ?? '';
+            if (searchValue) {
+                setProductVariables({
+                    first: LIMIT_PRODUCTS,
+                    where: {
+                        titleContainsFold: searchValue
+                    }
+                });
+                return;
+            }
+            setProductVariables({
+                first: LIMIT_PRODUCTS
+            });
+        }, 200);
+    };
+    const handleOpenProductElementSettings = ()=>{
+        props.openProductSetting();
+    };
+    const handleLoadMore = (e)=>{
+        const target = e.target;
+        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
+            debounceScroll.current && clearTimeout(debounceScroll.current);
+            debounceScroll.current = setTimeout(()=>{
+                setProductsSize(productsSize + 1);
+            }, 50);
+        }
+    };
+    const products = useMemo(()=>{
+        return productList?.reduce((acc, curr)=>{
+            return [
+                ...acc,
+                ...curr.products?.edges ?? []
+            ];
+        }, []) ?? [];
+    }, [
+        productList
+    ]);
+    useEffect(()=>{
+        if (products.length && !activeProduct && !props.productId) {
+            const firstProduct = products[0]?.node;
+            if (!firstProduct) return;
+            setActiveProduct({
+                id: firstProduct?.id,
+                name: firstProduct?.title,
+                image: firstProduct.featuredImage?.src
+            });
+        }
+    }, [
+        products,
+        activeProduct,
+        props.productId
+    ]);
+    useEffect(()=>{
+        if (activeProduct && activeProduct.name) {
+            props.changeProductName(activeProduct.name);
+        }
+    }, [
+        activeProduct,
+        props
+    ]);
+    useEffect(()=>{
+        if (sectionProduct) {
+            setActiveProduct({
+                id: sectionProduct.id,
+                name: sectionProduct.title,
+                image: sectionProduct.featuredImage?.src
+            });
+        }
+    }, [
+        sectionProduct
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gp-flex gp-flex-col gp-gap-2",
+        children: [
+            /*#__PURE__*/ jsx("p", {
+                className: "gp-py-2 gp-text-xs",
+                children: "Product"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "gp-relative",
+                children: [
+                    !isLoadingGetProducts || activeProduct ? /*#__PURE__*/ jsxs("button", {
+                        className: classNames({
+                            'gp-cursor-default': props.productId
+                        }, 'gp-flex gp-gap-2 gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs'),
+                        onClick: toggleChooseProduct,
+                        children: [
+                            /*#__PURE__*/ jsx("img", {
+                                className: "gp-rounded-lg gp-w-10 gp-h-10",
+                                src: activeProduct?.image,
+                                alt: "product_image"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "gp-truncate gp-max-w-[210px]",
+                                children: activeProduct?.name
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "gp-text-xs",
+                            children: "Getting products..."
+                        })
+                    }),
+                    props.productId && /*#__PURE__*/ jsx("div", {
+                        className: "gp-mt-2 gp-text-xs",
+                        children: /*#__PURE__*/ jsxs("p", {
+                            children: [
+                                "You can manage it in",
+                                ' ',
+                                /*#__PURE__*/ jsx("button", {
+                                    className: "gp-text-[#8AA4FF] gp-cursor-pointer hover:gp-underline",
+                                    onClick: handleOpenProductElementSettings,
+                                    children: "Product element"
+                                })
+                            ]
+                        })
+                    }),
+                    isShowChooseProduct && /*#__PURE__*/ jsxs("div", {
+                        className: "gp-absolute gp-w-full gp-top-16 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "gp-flex gp-items-center gp-gap-2 gp-p-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(SearchIcon, {}),
+                                    /*#__PURE__*/ jsx("input", {
+                                        className: "gp-bg-transparent gp-w-full focus-visible:!gp-outline-none gp-text-xs",
+                                        placeholder: "Search product...",
+                                        onChange: searchProduct
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "gp-max-h-[168px] gp-overflow-auto scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl",
+                                onScroll: handleLoadMore,
+                                children: [
+                                    products?.map((item)=>{
+                                        return /*#__PURE__*/ jsxs("button", {
+                                            className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-2 gp-items-center",
+                                            onClick: ()=>{
+                                                chooseProduct({
+                                                    id: item.node?.id,
+                                                    name: item.node?.title,
+                                                    image: item.node?.featuredImage?.src
+                                                });
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsx("img", {
+                                                    className: "gp-rounded-lg gp-w-10 gp-h-10",
+                                                    src: item.node?.featuredImage?.src,
+                                                    alt: "product_image"
+                                                }),
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "gp-truncate gp-max-w-[210px] gp-text-xs",
+                                                    children: item.node?.title
+                                                })
+                                            ]
+                                        }, item.node?.id);
+                                    }),
+                                    isLoadingGetProducts || isValidatingGetProducts && /*#__PURE__*/ jsx("div", {
+                                        className: "gp-p-2",
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: "gp-text-xs",
+                                            children: "Getting products..."
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { PickProduct };

package/dist/esm/components/ai-generator/components/ToneAndVoice.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { DropdownIcon, TickIcon } from '../icons/DropdownIcon.js';
+import classNames from 'classnames';
+
+const ToneAndVoice = (props)=>{
+    const listToneAndVoice = [
+        'Persuasive',
+        'Friendly',
+        'Professional',
+        'Casual'
+    ];
+    const [tone, setTone] = useState(listToneAndVoice[0]);
+    const [isShow, setIsShow] = useState(false);
+    const toggle = ()=>{
+        setIsShow(!isShow);
+    };
+    const setValue = (value)=>{
+        setTone(value);
+        setIsShow(false);
+    };
+    useEffect(()=>{
+        tone && props.changeToneAndVoice(tone);
+    }, [
+        tone,
+        props
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "gp-flex gp-flex-col gp-gap-2",
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    className: "gp-py-2 gp-text-xs",
+                    children: "Tone and Voice"
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "gp-relative",
+                    children: [
+                        /*#__PURE__*/ jsxs("button", {
+                            className: "gp-flex gp-justify-between gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs",
+                            onClick: toggle,
+                            children: [
+                                tone,
+                                /*#__PURE__*/ jsx(DropdownIcon, {})
+                            ]
+                        }),
+                        isShow ? /*#__PURE__*/ jsx("div", {
+                            className: "gp-absolute gp-w-full gp-top-10 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
+                            children: listToneAndVoice.map((item)=>{
+                                return /*#__PURE__*/ jsxs("button", {
+                                    className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-3 gp-items-center",
+                                    onClick: ()=>setValue(item),
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: classNames({
+                                                'gp-invisible': tone !== item
+                                            }),
+                                            children: /*#__PURE__*/ jsx(TickIcon, {})
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "gp-text-xs",
+                                            children: item
+                                        })
+                                    ]
+                                }, item);
+                            })
+                        }) : null
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { ToneAndVoice };

package/dist/esm/components/ai-generator/hooks/useCheckingProductInside.js

@@ -0,0 +1,45 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const useCheckingProductInside = (genTool, options)=>{
+    const [productElement, setProductElement] = useState({});
+    const checkSectionHasProduct = useCallback(()=>{
+        if (!genTool.current) {
+            setProductElement({
+                productId: '',
+                uid: ''
+            });
+            return;
+        }
+        const sectionEl = genTool.current?.closest('[data-component-tag="Section"]');
+        const productEl = sectionEl?.querySelector('[data-product-id]:not([data-product-id=""])');
+        const productId = productEl?.getAttribute('data-product-id');
+        const productElUid = productEl?.getAttribute('data-uid');
+        const productListOutSideProduct = productEl?.closest('[data-component-tag="ProductList"]');
+        if (productListOutSideProduct || !productId) {
+            setProductElement({
+                productId: '',
+                uid: ''
+            });
+            return;
+        }
+        setProductElement({
+            productId: productId ? 'gid://shopify/Product/' + productId : '',
+            uid: productElUid ?? ''
+        });
+    }, [
+        genTool
+    ]);
+    useEffect(()=>{
+        if (!options?.isEnabled) return;
+        checkSectionHasProduct();
+    }, [
+        options?.isEnabled,
+        checkSectionHasProduct
+    ]);
+    return {
+        productElement,
+        checkSectionHasProduct
+    };
+};
+
+export { useCheckingProductInside };

package/dist/esm/components/ai-generator/hooks/useFlipPopup.js

@@ -0,0 +1,108 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const useFlipPopup = (isShowPopup, dom)=>{
+    const { genTool, genPopup, genPopupHeader, genButtonWrapper } = dom;
+    const [popupPositionY, setPopupPositionY] = useState('top');
+    const [popupPositionX, setPopupPositionX] = useState('left');
+    const [bodyMaxHeight, setBodyMaxHeight] = useState(null);
+    const [isValidating, setIsValidating] = useState(true);
+    const calculateMaxHeight = useCallback((currentPopupPositionY)=>{
+        const parentOverflow = genTool.current?.closest("[class~='gp-overflow-hidden']");
+        if (!parentOverflow || !genTool.current) {
+            return {
+                positionY: currentPopupPositionY,
+                maxHeight: null
+            };
+        }
+        const parentOverflowPos = parentOverflow.getBoundingClientRect();
+        const genToolPos = genTool.current.getBoundingClientRect();
+        const genToolHeaderHeight = genPopupHeader.current?.getBoundingClientRect().height || 0;
+        const genButtonHeight = genButtonWrapper.current?.getBoundingClientRect().height || 0;
+        const DISTANCE = 8;
+        const maxHeightForPositionTop = Math.max(parentOverflowPos.bottom - genToolPos.bottom - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
+        const maxHeightForPositionBottom = Math.max(genToolPos.top - parentOverflowPos.top - genToolHeaderHeight - genButtonHeight - DISTANCE, 0);
+        if (maxHeightForPositionBottom > maxHeightForPositionTop) {
+            return {
+                positionY: 'bottom',
+                maxHeight: maxHeightForPositionBottom
+            };
+        }
+        return {
+            positionY: 'top',
+            maxHeight: maxHeightForPositionTop
+        };
+    }, [
+        genTool,
+        genPopupHeader,
+        genButtonWrapper
+    ]);
+    const handleChangePopupPositionY = useCallback((posY)=>{
+        const { positionY: calcPosY, maxHeight } = calculateMaxHeight(posY);
+        setPopupPositionY(calcPosY);
+        setBodyMaxHeight(maxHeight);
+    }, [
+        calculateMaxHeight
+    ]);
+    const calculatePopupPositionY = useCallback(()=>{
+        if (!genTool.current || !genPopup.current) return;
+        const viewHeight = window.innerHeight;
+        const scrollHeight = document.documentElement.scrollHeight;
+        const scrollTop = document.documentElement.scrollTop;
+        const toolPos = genTool.current?.getBoundingClientRect();
+        const genPopupHeight = genPopup.current?.getBoundingClientRect().height;
+        const MIN_DISTANCE = 50;
+        if (scrollTop + toolPos.top + genPopupHeight >= scrollHeight - MIN_DISTANCE) {
+            handleChangePopupPositionY('bottom');
+            return;
+        }
+        if (toolPos.bottom + genPopupHeight > viewHeight) {
+            if (toolPos.top - genPopupHeight < 0) {
+                handleChangePopupPositionY('top');
+                return;
+            }
+            handleChangePopupPositionY('bottom');
+            return;
+        }
+        handleChangePopupPositionY('top');
+    }, [
+        genPopup,
+        genTool,
+        handleChangePopupPositionY
+    ]);
+    const calculatePopupPositionX = useCallback(()=>{
+        if (!genTool.current || !genPopup.current) return;
+        const viewWidth = window.innerWidth;
+        const toolPos = genTool.current?.getBoundingClientRect();
+        const genPopupWidth = genPopup.current?.getBoundingClientRect().width;
+        if (toolPos.left + genPopupWidth > viewWidth) {
+            setPopupPositionX('right');
+            return;
+        }
+        setPopupPositionX('left');
+    }, [
+        genPopup,
+        genTool
+    ]);
+    useEffect(()=>{
+        if (!isShowPopup) {
+            setIsValidating(true);
+            return;
+        }
+        setIsValidating(true);
+        calculatePopupPositionY();
+        calculatePopupPositionX();
+        setIsValidating(false);
+    }, [
+        isShowPopup,
+        calculatePopupPositionX,
+        calculatePopupPositionY
+    ]);
+    return {
+        isValidating,
+        bodyMaxHeight,
+        popupPositionY,
+        popupPositionX
+    };
+};
+
+export { useFlipPopup };

package/dist/esm/components/ai-generator/hooks/useGettingGenerateRequest.js

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+const useGettingGenerateRequest = ()=>{
+    const [prompt, setPrompt] = useState('');
+    const [productName, setProductName] = useState('');
+    const [tone, setTone] = useState('');
+    const changePrompt = (value)=>{
+        const limit = 200;
+        setPrompt(value.slice(0, limit));
+    };
+    const changeProductName = (value)=>{
+        setProductName(value);
+    };
+    const changeTone = (value)=>{
+        setTone(value);
+    };
+    const getRequestBody = ()=>{
+        return {
+            prompt,
+            productName,
+            tone
+        };
+    };
+    return {
+        prompt,
+        changePrompt,
+        productName,
+        changeProductName,
+        tone,
+        changeTone,
+        getRequestBody
+    };
+};
+
+export { useGettingGenerateRequest };

package/dist/esm/components/ai-generator/hooks/useListenEventGenerate.js

@@ -0,0 +1,61 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const useListenEventGenerate = (componentInfo)=>{
+    const { uid: componentUid, tag: componentTag } = componentInfo;
+    const [isGenerating, setIsGenerating] = useState(false);
+    const onGenerate = (body)=>{
+        const eventCreate = new CustomEvent('editor:toolbar:ai-generate-content', {
+            bubbles: true,
+            detail: {
+                componentUid: componentUid,
+                componentTag: componentTag,
+                genRequest: body
+            }
+        });
+        window.dispatchEvent(eventCreate);
+        setIsGenerating(true);
+        onNotifyStatus('loading');
+    };
+    const onNotifyStatus = (status)=>{
+        const eventNotifyStatus = new CustomEvent('editor:ai-generate-content-status', {
+            bubbles: true,
+            detail: {
+                status: status,
+                generatingUid: componentUid
+            }
+        });
+        window.dispatchEvent(eventNotifyStatus);
+    };
+    const onGenerateContentStatus = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.generatingUid === componentUid && detail.status === 'success') {
+            setIsGenerating(false);
+        }
+    }, [
+        componentUid
+    ]);
+    const onOpenProductElementSettings = (productElementUid)=>{
+        const eventCreate = new CustomEvent('editor:toolbar:open-product-element', {
+            bubbles: true,
+            detail: {
+                productElementUid: productElementUid
+            }
+        });
+        window.dispatchEvent(eventCreate);
+    };
+    useEffect(()=>{
+        window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        return ()=>{
+            window.removeEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        };
+    }, [
+        onGenerateContentStatus
+    ]);
+    return {
+        isGenerating,
+        onGenerate,
+        onOpenProductElementSettings
+    };
+};
+
+export { useListenEventGenerate };

package/dist/esm/components/ai-generator/icons/AIIcon.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AIIcon = ()=>{
+    const getRandomId = ()=>{
+        return Math.random().toString(36).substring(7);
+    };
+    const linearGradientId = getRandomId();
+    return /*#__PURE__*/ jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M11.6363 2.67137C11.5886 2.52361 11.3795 2.52361 11.3318 2.67137L11.1133 3.34797C11.0352 3.58971 10.8469 3.78 10.606 3.86067L9.93715 4.08465C9.79156 4.1334 9.79156 4.33933 9.93715 4.38809L10.606 4.61207C10.8469 4.69273 11.0352 4.88302 11.1133 5.12477L11.3318 5.80137C11.3795 5.94913 11.5886 5.94913 11.6363 5.80137L11.8549 5.12477C11.933 4.88302 12.1212 4.69273 12.3621 4.61207L13.031 4.38809C13.1766 4.33933 13.1766 4.1334 13.031 4.08465L12.3621 3.86067C12.1212 3.78 11.933 3.58971 11.8549 3.34797L11.6363 2.67137Z",
+                fill: `url(#${linearGradientId}_0)`
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7.61245 3.30705C7.54086 3.08541 7.22728 3.08541 7.15569 3.30705L6.39541 5.6608C6.16115 6.38604 5.59636 6.9569 4.87367 7.19891L2.56369 7.97242C2.3453 8.04555 2.34531 8.35445 2.5637 8.42758L4.87367 9.2011C5.59636 9.4431 6.16115 10.014 6.39541 10.7392L7.15569 13.093C7.22728 13.3146 7.54086 13.3146 7.61245 13.093L8.37273 10.7392C8.60699 10.014 9.17178 9.4431 9.89447 9.2011L12.2044 8.42758C12.4228 8.35445 12.4228 8.04555 12.2044 7.97242L9.89447 7.1989C9.17178 6.9569 8.60699 6.38604 8.37273 5.6608L7.61245 3.30705Z",
+                fill: `url(#${linearGradientId}_1)`
+            }),
+            /*#__PURE__*/ jsxs("defs", {
+                children: [
+                    /*#__PURE__*/ jsxs("linearGradient", {
+                        id: `${linearGradientId}_0`,
+                        x1: "15.3433",
+                        y1: "2.56054",
+                        x2: "4.24885",
+                        y2: "1.00838",
+                        gradientUnits: "userSpaceOnUse",
+                        children: [
+                            /*#__PURE__*/ jsx("stop", {
+                                stopColor: "#D8E1FF"
+                            }),
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "1",
+                                stopColor: "#C8ACFF"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("linearGradient", {
+                        id: `${linearGradientId}_1`,
+                        x1: "15.3433",
+                        y1: "2.56054",
+                        x2: "4.24885",
+                        y2: "1.00838",
+                        gradientUnits: "userSpaceOnUse",
+                        children: [
+                            /*#__PURE__*/ jsx("stop", {
+                                stopColor: "#D8E1FF"
+                            }),
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "1",
+                                stopColor: "#C8ACFF"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { AIIcon };

package/dist/esm/components/ai-generator/icons/CloseIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+
+const CloseIcon = ()=>{
+    return /*#__PURE__*/ jsx("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M11.1755 12.0243C11.4099 12.2586 11.7898 12.2586 12.0241 12.0243C12.2584 11.79 12.2584 11.4101 12.0241 11.1757L8.84833 8L12.0241 4.82427C12.2584 4.58995 12.2584 4.21005 12.0241 3.97574C11.7898 3.74142 11.4099 3.74142 11.1755 3.97574L7.9998 7.15148L4.82407 3.97574C4.58975 3.74142 4.20986 3.74142 3.97554 3.97574C3.74123 4.21005 3.74123 4.58995 3.97554 4.82427L7.15128 8L3.97554 11.1757C3.74123 11.4101 3.74123 11.79 3.97554 12.0243C4.20986 12.2586 4.58975 12.2586 4.82407 12.0243L7.9998 8.84853L11.1755 12.0243Z",
+            fill: "#F9F9F9"
+        })
+    });
+};
+
+export { CloseIcon };

package/dist/esm/components/ai-generator/icons/DropdownIcon.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+
+const DropdownIcon = ()=>{
+    return /*#__PURE__*/ jsx("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M5.13313 7.62204C5.31064 7.45932 5.59845 7.45932 5.77596 7.62204L10 11.4941L14.224 7.62204C14.4016 7.45932 14.6894 7.45932 14.8669 7.62204C15.0444 7.78476 15.0444 8.04858 14.8669 8.21129L10.3214 12.378C10.1439 12.5407 9.8561 12.5407 9.67859 12.378L5.13313 8.21129C4.95562 8.04858 4.95562 7.78476 5.13313 7.62204Z",
+            fill: "#F9F9F9"
+        })
+    });
+};
+const TickIcon = ()=>{
+    return /*#__PURE__*/ jsx("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M15.8415 5.1766C16.0528 5.41207 16.0528 5.79383 15.8415 6.0293L7.95016 14.8234C7.84869 14.9365 7.71107 15 7.56757 15C7.42408 15 7.28645 14.9365 7.18499 14.8234L4.15846 11.4505C3.94717 11.215 3.94718 10.8333 4.15848 10.5978C4.36978 10.3623 4.71236 10.3623 4.92365 10.5978L7.56759 13.5443L15.0764 5.1766C15.2877 4.94113 15.6302 4.94113 15.8415 5.1766Z",
+            fill: "#00C853"
+        })
+    });
+};
+
+export { DropdownIcon, TickIcon };