seat-editor 1.6.21 → 1.6.22

package/dist/features/board-v2/{index.js → index.jsx}

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v2";
@@ -692,15 +691,21 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
     };
     const renderMiniMap = () => {
-        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                        background: "#f5f5f5",
-                        display: "block",
-                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
-                        // onClick={handleSelectComponent}
-                        // onMouseDown={handleMouseDown}
-                        // onMouseUp={handleMouseUp}
-                        // onBlur={handleUnSelectComponent}
-                        selectedComponent: selectedComponent }) }) }) }));
+        return (<MiniMap width={250} height={250}>
+        <div className="w-full h-full">
+          <svg id="workspace" width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+                background: "#f5f5f5",
+                display: "block",
+            }}>
+            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
+        // onClick={handleSelectComponent}
+        // onMouseDown={handleMouseDown}
+        // onMouseUp={handleMouseUp}
+        // onBlur={handleUnSelectComponent}
+        selectedComponent={selectedComponent}/>
+          </svg>
+        </div>
+      </MiniMap>);
     };
     const handelZoomIn = () => {
         var _a;
@@ -743,33 +748,87 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
-    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
-                                    width: "100%",
-                                    height: "100%",
-                                    overflow: "hidden",
-                                }, contentStyle: {
-                                    width: "100%",
-                                    height: "100%",
-                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
-                                    // onMouseEnter={handleMouseEnter}
-                                    // onMouseUp={handleEnd}
-                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, onClick: (e) => {
-                                        e.stopPropagation();
-                                        handleMouseClick(e);
-                                    }, 
-                                    // onMouseLeave={handleMouseLeave}
-                                    xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                                        background: backgroundColor,
-                                        display: "block",
-                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
-                                        touchAction: "none",
-                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
-                                                cursor: getCursorStyle(),
-                                            }, 
-                                            // onClick={handleSelectComponent}
-                                            onMouseDown: handleMouseDown, 
-                                            // onMouseUp={handleMouseUp}
-                                            // onBlur={handleUnSelectComponent}
-                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
+    return (<>
+      <ModalPreview>
+        <LayerView statusKey="status"/>
+      </ModalPreview>
+      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
+        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
+          <div className="flex gap-2">
+            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
+            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
+          </div>
+        </div>
+        <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
+     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding>
+          {scale > 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
+              {renderMiniMap()}
+            </div>)}
+          <TransformComponent wrapperStyle={{
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+        }} contentStyle={{
+            width: "100%",
+            height: "100%",
+        }}>
+            <svg id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen" onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} 
+    // onMouseEnter={handleMouseEnter}
+    // onMouseUp={handleEnd}
+    onTouchMove={handleMouseMove} onTouchEnd={handleMouseUp} onClick={(e) => {
+            e.stopPropagation();
+            handleMouseClick(e);
+        }} 
+    // onMouseLeave={handleMouseLeave}
+    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            background: backgroundColor,
+            display: "block",
+            cursor: activeTool === "ruler" ? "crosshair" : "auto",
+            touchAction: "none",
+        }}>
+              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
+            cursor: getCursorStyle(),
+        }} 
+    // onClick={handleSelectComponent}
+    onMouseDown={handleMouseDown} 
+    // onMouseUp={handleMouseUp}
+    // onBlur={handleUnSelectComponent}
+    selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
+              {activeTool === "ruler" && (<>
+                  <g id="horizontal-ruler">
+                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
+                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
+                            <text x={i * 50} y="15">
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                  <g id="vertical-ruler">
+                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
+                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
+                            <text x="15" y={i * 50}>
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                </>)}
+              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
+                  {/* Vertical lines */}
+                  {Array.from({ length: widthBoard / 10 }, (_, i) => (<line key={`v-${i}`} x1={i * 10} y1={0} x2={i * 10} y2={heightBoard}/>))}
+
+                  {/* Horizontal lines */}
+                  {Array.from({ length: heightBoard / 10 }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10} x2={widthBoard} y2={i * 10}/>))}
+                </g>)}
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
 };
 export default BoardTemplate;

package/dist/features/navbar/index.d.ts

@@ -1,2 +1,2 @@
-declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: () => import("react").JSX.Element;
 export default Navbar;

package/dist/features/navbar/index.jsx

@@ -0,0 +1,5 @@
+"use client";
+const Navbar = () => {
+    return <div>Navbar</div>;
+};
+export default Navbar;

package/dist/features/package/index.d.ts

@@ -27,5 +27,5 @@ export interface TableEditorProps {
         extraComponent: boolean;
     };
 }
-declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/{index.js → index.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import Board from "../board-v2";
 import SideTool from "../side-tool";
@@ -95,10 +94,21 @@ const TableEditor = (props) => {
             dispatch({ type: "board/setFlagChange", payload: true });
         }
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx("div", { className: "w-full h-full flex relative", style: {
-                        display: !viewOnly ? "none" : "flex",
-                    }, children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "w-full h-full flex relative", style: {
-                        display: viewOnly ? "none" : "flex",
-                    }, children: [_jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { onSelectComponent: props.onSelectComponent, viewOnly: viewOnly }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] })] }) }));
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <div className="w-full h-full flex relative" style={{
+            display: !viewOnly ? "none" : "flex",
+        }}>
+          <LayerView statusKey="status"/>
+        </div>
+        <div className="w-full h-full flex relative" style={{
+            display: viewOnly ? "none" : "flex",
+        }}>
+          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
+          <Board onSelectComponent={props.onSelectComponent} viewOnly={viewOnly}/>
+          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
+        </div>
+      </div>
+    </>);
 };
 export default TableEditor;

package/dist/features/panel/index.d.ts

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/{index.js → index.jsx}

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Drawer, Input } from "antd";
@@ -99,16 +98,16 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (_jsx(SelectToolForm, { action: action, responseMapping: responseMapping }));
+                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
             case "square":
             case "circle":
-                return _jsx(SquareToolForm, {});
+                return <SquareToolForm />;
             case "table-seat-circle":
-                return _jsx(SeatCircle, {});
+                return <SeatCircle />;
             case "image-table":
-                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, responseMapping: responseMapping }));
+                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
             case "background":
-                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, responseMapping: responseMapping }));
+                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
             default:
                 return null;
         }
@@ -121,10 +120,19 @@ const ControlPanels = (props) => {
         });
     };
     // if(!show) return null
-    return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", styles: {
+    return (<Drawer open={show} onClose={handleClose} title="Panel" styles={{
             body: {
                 paddingBottom: 0,
             },
-        }, children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+        }}>
+      <div className="bg-white h-full max-h-screen w-full p-2">
+        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
+          <Form.Item name="id" hidden>
+            <Input />
+          </Form.Item>
+          {renderFormPanel()}
+        </Form>
+      </div>
+    </Drawer>);
 };
 export default ControlPanels;

package/dist/features/panel/select-tool.d.ts

@@ -2,5 +2,5 @@ declare const SelectToolForm: ({ title, action, responseMapping }: {
     title?: string;
     action: any;
     responseMapping: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/{select-tool.js → select-tool.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppSelector } from "../../hooks/use-redux";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
@@ -23,26 +22,39 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 .replace(/-/g, " ")
                 .replace(/\b\w/g, (char) => char.toUpperCase());
         };
-        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
+        return (<div className="flex flex-col">
+        <h1 className="heading-s">{title}</h1>
+        <div className="flex flex-col gap-2 mt-5">
+          {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
+              <span className="font-bold">
+                {variableFormatToString(shape)}:
+              </span>{" "}
+              {count}
+            </div>))}
+        </div>
+      </div>);
     };
     const renderComponent = () => {
         switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
             case "square":
             case "circle":
-                return _jsx(SquareToolForm, {});
+                return <SquareToolForm />;
             case "table-seat-circle":
-                return _jsx(SeatCircle, {});
+                return <SeatCircle />;
             case "image-table":
             case "background":
-                return (_jsx(UploadTool, { action: action, responseMapping: responseMapping, name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape, defaultValue: selectedComponent, type: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
+                return (<UploadTool action={action} responseMapping={responseMapping} name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
                         ? "background"
-                        : "component" }));
+                        : "component"}/>);
             case "text":
-                return _jsx(TextTool, {});
+                return <TextTool />;
             default:
                 return null;
         }
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
+    return (<div className="flex flex-col gap-2">
+      <SummaryComponents />
+      {renderComponent()}
+    </div>);
 };
 export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
+declare const SquareToolForm: () => import("react").JSX.Element;
 export default SquareToolForm;

package/dist/features/panel/{square-circle-tool.js → square-circle-tool.jsx}

@@ -1,8 +1,10 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const SquareToolForm = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+    return (<>
+      <SectionShape />
+      <SectionLabel />
+    </>);
 };
 export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +1,2 @@
-declare const SeatCircle: () => import("react/jsx-runtime").JSX.Element;
+declare const SeatCircle: () => import("react").JSX.Element;
 export default SeatCircle;

package/dist/features/panel/table-seat-circle.jsx

@@ -0,0 +1,31 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatCircle = () => {
+    return (<>
+      <div className="py-2">
+        <h1 className="heading-s"> Round table</h1>
+        <Flex>
+          <Form.Item name="seatCount" label="Seat Count" className="w-full">
+            <InputNumber />
+          </Form.Item>
+          <Form.Item name="openSpace" label="Open Space" className="w-full">
+            <InputNumber max={1} min={0} step={0.1}/>
+          </Form.Item>
+          
+        </Flex>
+        <Flex gap={2}>
+          <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+          </Form.Item>
+          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+          </Form.Item>
+        </Flex>
+        <SectionShape />
+        <SectionLabel />
+      </div>
+    </>);
+};
+export default SeatCircle;

package/dist/features/panel/text-tool.d.ts

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react/jsx-runtime").JSX.Element;
+declare const TextTool: () => import("react").JSX.Element;
 export default TextTool;

package/dist/features/panel/text-tool.jsx

@@ -0,0 +1,26 @@
+"use client";
+import { ColorPicker, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (<div className="py-2">
+        <Form.Item label="Name" name="shape" className="w-full hidden">
+          <Input defaultValue={"text"}/>
+        </Form.Item>
+      
+      <Form.Item name="text" label="Text">
+        <Input />
+      </Form.Item>
+      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+      </Form.Item>
+      <Form.Item name={"x"} label="X">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item name={"y"} label="Y">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item name={"fontSize"} label="Size">
+        <InputNumber suffix="px"/>
+      </Form.Item>
+    </div>);
+};
+export default TextTool;

package/dist/features/panel/upload-tool.d.ts

@@ -10,5 +10,5 @@ interface UploadToolProps {
     };
     defaultValue?: any;
 }
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/panel/{upload-tool.js → upload-tool.jsx}

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Upload, Image, Button } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
@@ -125,6 +124,29 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (_jsxs(_Fragment, { children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsxs(Dragger, Object.assign({}, propsUpload, { action: "", children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] }))), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+    return (<>
+      {defaultSrc ? (<>
+          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
+            <Image src={defaultSrc}/>
+          </div>
+          <Button type="primary" onClick={handleDelete}>
+            Edit
+          </Button>
+        </>) : (<Dragger {...propsUpload} action={""}>
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p className="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibited from
+            uploading company data or other banned files.
+          </p>
+        </Dragger>)}
+
+      <SectionShape />
+      <SectionLabel />
+    </>);
 };
 export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -4,5 +4,5 @@ declare const SideTool: ({ dragOnly, deleteAutorized, }: {
         component: boolean;
         extraComponent: boolean;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SideTool;