'use client';
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react");const ChildrenDroppable=({className:e,styles:t})=>{let{t:r}=core.useI18nStore(),[s,n]=React.useState(!1),[p,g]=React.useState(!1),l=React.useRef(null),i=core.useEditorMode();React.useEffect(()=>{let e=new ResizeObserver(()=>{let e=l.current?l.current?.offsetWidth:0;e<160?g(!0):g(!1)});return l.current&&e.observe(l.current),()=>{e?.disconnect()}},[]);let o=()=>{n(!0)},u=()=>{n(!1)},c=()=>{let e=`<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.83301 7.83331V3.83331H9.16634V7.83331H13.1663V9.16665H9.16634V13.1666H7.83301V9.16665H3.83301V7.83331H7.83301Z" fill="#9E9E9E"/>
    </svg>
    `;return s&&(e=`<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.95 4.45C8.95 4.20147 8.74853 4 8.5 4C8.25147 4 8.05 4.20147 8.05 4.45V8.05H4.45C4.20147 8.05 4 8.25147 4 8.5C4 8.74853 4.20147 8.95 4.45 8.95H8.05V12.55C8.05 12.7985 8.25147 13 8.5 13C8.74853 13 8.95 12.7985 8.95 12.55V8.95H12.55C12.7985 8.95 13 8.74853 13 8.5C13 8.25147 12.7985 8.05 12.55 8.05H8.95V4.45Z" fill="#212121"/>
      </svg>`),e};return"edit"!==i?null:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[t&&jsxRuntime.jsx("style",{children:t}),jsxRuntime.jsx("div",{ref:l,"data-slot":"children",className:core.cls(e,"gp-flex gp-h-full gp-w-full gp-items-center gp-rounded-[3px] gp-border gp-border-dashed gp-border-[#9e9e9e] after:!gp-content-none",s?"gp-cursor-pointer":""),onMouseEnter:o,onMouseLeave:u,children:jsxRuntime.jsxs("div",{className:`gp-border-box gp-bg-gray gp-flex gp-max-h-8 gp-items-center gp-justify-center gp-gap-2 gp-overflow-hidden gp-whitespace-nowrap gp-rounded-lg gp-px-4 gp-py-2 gp-text-xs gp-font-medium
          ${s?"gp-cursor-pointer gp-bg-[#E2E2E2] gp-text-[#212121]":"gp-text-[#9E9E9E]"}`,style:{flexFlow:"gp-row gp-wrap"},children:[jsxRuntime.jsx("div",{className:"gp-flex gp-h-4 gp-w-4 gp-items-center gp-justify-center",dangerouslySetInnerHTML:{__html:c()}}),!p&&jsxRuntime.jsx("div",{children:r("Drop element here")})]})})]})};exports.default=ChildrenDroppable;
