@gem-sdk/pages 2.0.0-dev.884 → 2.0.0-staging.118

package/dist/esm/components/builder/Header.js

@@ -0,0 +1,184 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
+import Devices from './SwitchView.js';
+
+const defaultMargin = {
+    desktop: '16px',
+    tablet: '16px',
+    mobile: '16px'
+};
+const HEADER_ON_COLOR = '#E2E2E2';
+const HEADER_OFF_COLOR = '#F4F4F4';
+const sizeCheck = {
+    desktop: '24px',
+    tablet: '36px',
+    mobile: '36px'
+};
+const Header = (props)=>{
+    const { pageType, isOriginTemplate, openPageSetting } = props;
+    const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    usePageStore((s)=>s.sidebarMode);
+    const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
+    const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Devices, {}),
+            /*#__PURE__*/ jsx("div", {
+                className: cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
+                children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsx("div", {
+                    className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
+                    style: {
+                        maxWidth: `var(--g-ct-w, 1200px)`,
+                        ...makeStyleResponsive('ml', defaultMargin),
+                        ...makeStyleResponsive('mr', defaultMargin)
+                    },
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "tablet:gp-items-center gp-flex gp-py-3",
+                        children: [
+                            /*#__PURE__*/ jsxs("svg", {
+                                style: {
+                                    ...makeStyleResponsive('w', sizeCheck),
+                                    ...makeStyleResponsive('h', sizeCheck)
+                                },
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: [
+                                    /*#__PURE__*/ jsx("path", {
+                                        d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
+                                        fill: "#197BBD"
+                                    }),
+                                    /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
+                                        fill: "#197BBD"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "gp-ml-4",
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "gp-text-sm",
+                                        children: "Order #1001"
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "You’ve paid for your order."
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "gp-text-sm",
+                                                children: "View order confirmation"
+                                            }),
+                                            /*#__PURE__*/ jsx("svg", {
+                                                width: "12",
+                                                height: "13",
+                                                viewBox: "0 0 12 13",
+                                                fill: "none",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
+                                                    fill: "#197BBD"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }) : /*#__PURE__*/ jsxs("div", {
+                    className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
+                    style: {
+                        maxWidth: `var(--g-ct-w)`,
+                        ...makeStyleResponsive('ml', defaultMargin),
+                        ...makeStyleResponsive('mr', defaultMargin)
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs("svg", {
+                            width: "60",
+                            height: "8",
+                            viewBox: "0 0 60 8",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
+                                    fill: "#9E9E9E"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
+                                    fill: headerColor
+                                })
+                            ]
+                        }),
+                        !(isOriginTemplate || pageType === 'STATIC') && /*#__PURE__*/ jsx("button", {
+                            className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
+                            onClick: openPageSetting,
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: /*#__PURE__*/ jsxs("svg", {
+                                            width: "14",
+                                            height: "14",
+                                            viewBox: "0 0 14 14",
+                                            fill: "none",
+                                            xmlns: "http://www.w3.org/2000/svg",
+                                            children: [
+                                                /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
+                                                    fill: "#212121"
+                                                }),
+                                                /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
+                                                    fill: "#212121"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: "Header"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("svg", {
+                            width: "80",
+                            height: "8",
+                            viewBox: "0 0 80 8",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
+                                    fill: headerColor
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
+                                    fill: headerColor
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
+                                    fill: headerColor
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { Header as default };

package/dist/esm/components/builder/PopupManager.js

@@ -1 +1,60 @@
-import{jsx as e}from"react/jsx-runtime";import{useBuilderPreviewStore as t,useModalStore as i,cls as p}from"@gem-sdk/core";import{memo as n,useMemo as a,useCallback as o,useEffect as r}from"react";let isDialog=e=>!!e&&e?.tag==="Dialog"&&"component"===e.type,PopupManager=()=>{let n=t(e=>e.state),l=i(e=>e.setModalActive),g=i(e=>e.activeId),s=a(()=>n.ROOT.childrens?.map(e=>n?.[e]).filter(isDialog),[n]),d=o(e=>{let t=e.detail;l(t?.modalId)},[l]);return r(()=>(window.addEventListener("set-active-modal",d),()=>{window.removeEventListener("set-active-modal",d)}),[d]),e("div",{className:"gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",children:s?.map(t=>{let i=t?.advanced?.d;return e("div",{className:p("gp-pointer-events-auto gp-w-full gp-shrink gp-cursor-pointer gp-select-none gp-items-center gp-justify-center gp-whitespace-nowrap gp-py-2 gp-text-white [writing-mode:vertical-lr]",{"gp-bg-blue-500":g===t.uid,"gp-bg-blue-700":g!==t.uid}),role:"button","aria-hidden":"true",onClick:()=>l(t?.uid),style:{"--d":i?.desktop?"inline-flex":"none","--d-tablet":i?.tablet?"inline-flex":"none","--d-mobile":i?.mobile?"inline-flex":"none"},children:e("span",{className:"gp-text-ellipsis gp-whitespace-nowrap",children:t?.settings?.name||"Popup Name"})},t?.uid)})})};var PopupManager$1=n(PopupManager);export{PopupManager$1 as default};
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useBuilderPreviewStore, useModalStore, useInteraction, cls } from '@gem-sdk/core';
+import { memo, useMemo, useCallback, useEffect } from 'react';
+
+const isDialog = (item)=>!!item && item?.tag === 'Dialog' && item.type === 'component';
+const PopupManager = ()=>{
+    const state = useBuilderPreviewStore((s)=>s.state);
+    const setModalActive = useModalStore((s)=>s.setModalActive);
+    const activeModalId = useModalStore((s)=>s.activeId);
+    const { isInteractionMode } = useInteraction();
+    const popups = useMemo(()=>{
+        return state.ROOT.childrens?.map((id)=>{
+            return state?.[id];
+        }).filter(isDialog);
+    }, [
+        state
+    ]);
+    const onSetActiveModal = useCallback((e)=>{
+        const detail = e.detail;
+        setModalActive(detail?.modalId);
+    }, [
+        setModalActive
+    ]);
+    useEffect(()=>{
+        window.addEventListener('set-active-modal', onSetActiveModal);
+        return ()=>{
+            window.removeEventListener('set-active-modal', onSetActiveModal);
+        };
+    }, [
+        onSetActiveModal
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
+        children: popups?.map((item)=>{
+            const display = item?.advanced?.d;
+            return /*#__PURE__*/ jsx("div", {
+                className: cls('gp-w-full gp-shrink gp-cursor-pointer gp-select-none gp-items-center gp-justify-center gp-whitespace-nowrap gp-py-2 gp-text-white [writing-mode:vertical-lr]', {
+                    'gp-bg-blue-500': activeModalId === item.uid,
+                    'gp-bg-blue-700': activeModalId !== item.uid
+                }, isInteractionMode ? 'gp-pointer-events-none' : 'gp-pointer-events-auto'),
+                role: "button",
+                "aria-hidden": "true",
+                onClick: ()=>setModalActive(item?.uid, true),
+                style: {
+                    '--d': display?.desktop ? 'inline-flex' : 'none',
+                    '--d-tablet': display?.tablet ? 'inline-flex' : 'none',
+                    '--d-mobile': display?.mobile ? 'inline-flex' : 'none'
+                },
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "gp-text-ellipsis gp-whitespace-nowrap",
+                    children: item?.settings?.name || 'Popup Name'
+                })
+            }, item?.uid);
+        })
+    });
+};
+var PopupManager$1 = /*#__PURE__*/ memo(PopupManager);
+
+export { PopupManager$1 as default };

package/dist/esm/components/builder/SwitchView.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { devices } from './const.js';
+
+const Devices = ()=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const initialDeviceState = {
+        width: 0,
+        name: '',
+        activeId: null
+    };
+    const [deviceState, setDeviceState] = useState(initialDeviceState);
+    const [isShowSwitchView, setIsShowSwitchView] = useState(false);
+    const updateDeviceState = useCallback((updates)=>{
+        setDeviceState((prevState)=>({
+                ...prevState,
+                ...updates
+            }));
+    }, [
+        setDeviceState
+    ]);
+    useEffect(()=>{
+        if (!deviceState) {
+            const activeDevice = devices[0];
+            if (activeDevice) {
+                updateDeviceState({
+                    width: activeDevice.width,
+                    name: activeDevice.name,
+                    activeId: activeDevice.id
+                });
+            }
+            setIsShowSwitchView(false);
+        } else {
+            setIsShowSwitchView(deviceState.width > 0 && deviceState.width <= 1024);
+        }
+    }, [
+        deviceState,
+        updateDeviceState
+    ]);
+    const onHandleClick = (id)=>{
+        const activeDevice = devices.find((v)=>v.id === id);
+        if (activeDevice) {
+            updateDeviceState({
+                width: activeDevice.width,
+                name: activeDevice.name,
+                activeId: activeDevice.id
+            });
+            emitChangeDevice(activeDevice.id);
+        }
+        setIsOpen(!isOpen);
+    };
+    const emitChangeDevice = (id)=>{
+        const event = new CustomEvent('editor:change-device', {
+            bubbles: true,
+            detail: {
+                id
+            }
+        });
+        window.dispatchEvent(event);
+    };
+    const switchViewRef = useRef(null);
+    const onClickOutside = (event)=>{
+        if (switchViewRef.current && !switchViewRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    const getDisplayName = (width)=>{
+        const activeDevice = devices.find((v)=>v.width === width);
+        if (activeDevice) return activeDevice.name;
+        let displayName = 'Desktop';
+        if (width <= 768) return displayName = 'Mobile';
+        if (width <= 1024) return displayName = 'Tablet';
+        return displayName;
+    };
+    const onResizePreviewScreen = useCallback((e)=>{
+        const detail = e.detail;
+        if (!detail) return;
+        updateDeviceState({
+            width: detail.width,
+            name: getDisplayName(detail.width),
+            activeId: null
+        });
+    }, [
+        updateDeviceState
+    ]);
+    useEffect(()=>{
+        window.addEventListener('mousedown', onClickOutside);
+        window.addEventListener('editor:resize-preview-screen', onResizePreviewScreen);
+        return ()=>{
+            window.removeEventListener('mousedown', onClickOutside);
+            window.removeEventListener('editor:resize-preview-screen', onResizePreviewScreen);
+        };
+    }, [
+        onResizePreviewScreen
+    ]);
+    const isActiveDevice = (device)=>{
+        return device.id === deviceState.activeId || deviceState.name === device.name;
+    };
+    const handleToggleDropdown = ()=>setIsOpen(!isOpen);
+    if (isShowSwitchView) return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: switchViewRef,
+            className: `gp-switch-view gp-font-sans gp-flex gp-h-[40px] gp-absolute gp-top-[2px] gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-gap-2 gp-items-center gp-justify-center gp-cursor-pointer ${isOpen ? 'gp-z-50' : 'gp-z-1'}`,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `gp-flex gp-gap-1 gp-py-1 gp-px-2 gp-transform -gp-translate-y-[2px] gp-border-[1px] gp-justify-between gp-items-center gp-min-w-[194px] gp-bg-[#F4F4F4] hover:gp-bg-[#E2E2E2] gp-rounded-md gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121] ${isOpen ? 'gp-border-[#3C67FF]' : 'gp-border-transparent'}`,
+                    onClick: (e)=>{
+                        e.preventDefault();
+                        handleToggleDropdown();
+                    },
+                    role: "presentation",
+                    children: [
+                        /*#__PURE__*/ jsxs("span", {
+                            children: [
+                                deviceState.name,
+                                " (",
+                                deviceState.width,
+                                "px)"
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: /*#__PURE__*/ jsx("svg", {
+                                width: "9",
+                                height: "5",
+                                viewBox: "0 0 9 5",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: /*#__PURE__*/ jsx("path", {
+                                    fillRule: "evenodd",
+                                    clipRule: "evenodd",
+                                    d: "M1.07564 0.775834C1.30995 0.541519 1.68985 0.541519 1.92417 0.775834L4.6999 3.55157L7.47564 0.775834C7.70995 0.541519 8.08985 0.541519 8.32417 0.775834C8.55848 1.01015 8.55848 1.39005 8.32417 1.62436L5.12417 4.82436C4.88985 5.05868 4.50995 5.05868 4.27564 4.82436L1.07564 1.62436C0.841324 1.39005 0.841324 1.01015 1.07564 0.775834Z",
+                                    fill: "#212121"
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: `gp-absolute gp-top-9 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
+                    children: devices.map((device)=>/*#__PURE__*/ jsx("div", {
+                            className: "gp-p-2 hover:gp-bg-[#3E3E3E] gp-rounded-md",
+                            onClick: (e)=>{
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onHandleClick(device.id);
+                            },
+                            role: "presentation",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: 'gp-flex gp-gap-2 gp-w-full gp-text-left gp-justify-space-between gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-regular gp-text-[#212121]"',
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "gp-min-w-[16px]",
+                                        children: isActiveDevice(device) && /*#__PURE__*/ jsx("svg", {
+                                            width: "16",
+                                            height: "17",
+                                            viewBox: "0 0 16 17",
+                                            fill: "none",
+                                            xmlns: "http://www.w3.org/2000/svg",
+                                            children: /*#__PURE__*/ jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M12.6348 4.89265C12.792 5.07861 12.7878 5.37537 12.6255 5.55547L6.71176 12.118C6.55312 12.294 6.30118 12.294 6.14255 12.118L3.87448 9.60098C3.71219 9.42088 3.70805 9.12412 3.86523 8.93815C4.02241 8.75219 4.2814 8.74744 4.4437 8.92755L6.42716 11.1287L12.0563 4.88203C12.2186 4.70192 12.4776 4.70668 12.6348 4.89265Z",
+                                                fill: "#00C853"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: device.name
+                                    })
+                                ]
+                            })
+                        }, device.id))
+                })
+            ]
+        })
+    });
+    return null;
+};
+
+export { Devices as default };