@chaibuilder/sdk 0.1.1 → 0.1.3

package/dist/AddBlocks-0916e841.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),n=require("react"),s=require("lodash"),b=require("jotai"),w=require("./accordion-0afd8143.cjs"),q=require("./scroll-area-088530b9.cjs"),k=require("./tabs-860e37aa.cjs"),y=require("./useBuilderProp-5e57d0c8.cjs"),v=require("react-dnd"),C=require("@radix-ui/react-icons"),l=require("./index-ebd86d7f.cjs");require("react-i18next");const T=require("@chaibuilder/blocks"),I=require("lucide-react"),L=require("./utils-3c452dd0.cjs"),f=require("./textarea-a338ede6.cjs"),P=require("./label-167415e5.cjs"),S=require("./html-to-json-9c9961da.cjs");require("@radix-ui/react-accordion");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("i18next");require("flagged");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-7d6aadbc.cjs");require("redux-undo");require("@react-hookz/web");require("./CONTROLS-031e1de3.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-label");require("himalaya");const M=({block:t})=>{const{type:r,icon:o,label:c}=t,{addCoreBlock:x,addPredefinedBlock:m}=l.useAddBlock(),[p]=l.useSelectedBlockIds(),[,u]=b.useAtom(l.activePanelAtom),[,i]=b.useAtom(l.addBlocksModalAtom),E=()=>{s.has(t,"blocks")?m(T.syncBlocksWithDefaults(t.blocks),s.first(p)):x(t,s.first(p)),i(!1),u("layers")},[,g,j]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}));return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+(c||r).replace(/ /g,"+")}),e.jsxRuntimeExports.jsxs(y.Tooltip,{children:[e.jsxRuntimeExports.jsx(y.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:E,type:"button",ref:g,className:"cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[n.createElement(o||C.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:c||r})]})}),e.jsxRuntimeExports.jsx(y.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:c||r})})]})]})},F=({block:t,closePopover:r})=>{var j;const[o,c]=n.useState(!1),x=y.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:m,addPredefinedBlock:p}=l.useAddBlock(),[u]=l.useSelectedBlockIds(),[,i,E]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}),[t]),g=n.useCallback(async R=>{if(R.stopPropagation(),s.has(t,"component")){m(t,s.first(u)),r();return}c(!0);const a=await x(t);s.isEmpty(a)||p(T.syncBlocksWithDefaults(a),s.first(u)),r()},[t]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:E,src:"https://placehold.co/100x30/000000/FFF?text="+((j=t.name||t.label)==null?void 0:j.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:i,onClick:o?()=>{}:g,className:"relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[o&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(I.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),t.preview?e.jsxRuntimeExports.jsx("img",{src:t.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:t.name}):e.jsxRuntimeExports.jsx("div",{className:"flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200",children:e.jsxRuntimeExports.jsx("p",{className:"max-w-xs text-center text-sm text-gray-700",children:t.name})})]})]})},H=()=>{const{data:t,isLoading:r}=l.useUILibraryBlocks(),o=T.useChaiBlocks(),c=s.filter(s.values(o),{category:"custom"}),x=s.groupBy(c,"group"),m=s.groupBy(t,"group"),[p,u]=n.useState(null),i=n.useMemo(()=>s.mergeWith(x,m,(a,h)=>{if(s.isArray(a)&&s.isArray(h))return[...a,...h]}),[x,m]),[,E]=b.useAtom(l.addBlocksModalAtom),[g,j]=n.useState("Navbar"),R=s.get(i,g,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("ul",{className:"sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2",children:r?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("li",{className:"h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"})]}):n.Children.toArray(s.map(i,(a,h)=>e.jsxRuntimeExports.jsx("li",{onMouseOut:()=>{clearTimeout(p),u(null)},onMouseEnter:()=>{const B=setTimeout(()=>{j(h)},300);u(B)},onClick:()=>j(h),className:L.cn("-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",g===h?"bg-blue-500 text-white":" text-gray-700 hover:bg-foreground/10"),children:h})))}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-8",children:n.Children.toArray(R.map(a=>e.jsxRuntimeExports.jsx(F,{block:a,closePopover:()=>E(!1)})))})]})},D=()=>{const[t,r]=n.useState(""),{addPredefinedBlock:o}=l.useAddBlock(),[c]=l.useSelectedBlockIds(),[,x]=b.useAtom(l.addBlockOffCanvasAtom),[,m]=b.useAtom(l.activePanelAtom),[,p]=b.useAtom(l.addBlocksModalAtom),u=()=>{const i=S.getBlocksFromHTML(t);o([...i],s.first(c)||null),r(""),x(!1),m("layers"),p(!1)};return e.jsxRuntimeExports.jsxs(f.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsxs(f.CardHeader,{className:"p-3",children:[e.jsxRuntimeExports.jsx(f.CardTitle,{children:"Import HTML"}),e.jsxRuntimeExports.jsx(f.CardDescription,{children:"Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported."})]}),e.jsxRuntimeExports.jsx(f.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(P.Label,{htmlFor:"current",className:"text-sm",children:"Enter HTML Code:"}),e.jsxRuntimeExports.jsx(f.Textarea,{autoFocus:!0,tabIndex:1,ref:i=>i&&i.focus(),defaultValue:t,onChange:i=>r(i.target.value),rows:12,placeholder:`<div>
+    <h1>Enter code here</h1>
+</div>`,className:"resize-none overflow-x-auto whitespace-pre font-mono font-normal"})]})}),e.jsxRuntimeExports.jsxs(f.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(y.Button,{disabled:t.trim()==="",onClick:()=>u(),size:"sm",className:"w-full",children:"Import"}),e.jsxRuntimeExports.jsxs(f.Alert,{variant:"default",className:"mt-2 p-1 text-blue-400",children:[e.jsxRuntimeExports.jsx(C.ExclamationTriangleIcon,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx(f.AlertTitle,{className:"text-sm leading-4",children:"Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page."})]})]})]})},O=D,N=["ListItem","TableHead","TableBody","TableRow","TableCell","Column"],U=(t,r)=>{if(!t)return!s.includes(N,r);const o=t._type;return o==="List"?r==="ListItem":o==="Table"?r==="TableHead"||r==="TableBody":o==="TableHead"||o==="TableBody"?r==="TableRow":o==="TableRow"?r==="TableCell":o==="Row"?r==="Column":!s.includes(N,r)},z=()=>{const[t,r]=n.useState("core"),[o,c]=n.useState("basic"),x=T.useChaiBlocks(),[,m]=b.useAtom(l.showPredefinedBlockCategoryAtom),[,p]=b.useAtom(l.addBlocksModalAtom),[u]=l.useSelectedBlockIds(),i=l.useAllBlocks(),E=s.find(i,{_id:s.first(u)}),{data:g,isLoading:j}=l.useUILibraryBlocks(),R=s.groupBy(s.filter(x,d=>U(E,d.type)),"category"),a=s.uniq(s.map(R.core,"group"));n.useEffect(()=>{!s.includes(a,o)&&!s.isEmpty(a)&&!s.isEmpty(o)&&c(s.first(a))},[a,o]);const h=d=>c(A=>A===d?"":d),B=!j&&!s.isEmpty(g);return e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col overflow-hidden",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-2 flex justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsxs("h1",{className:"flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row",children:["Add block",e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:t==="html"?"(Enter or paste your own HTML code)":"(Drag & drop into tree view or click to add)"})]}),e.jsxRuntimeExports.jsxs("button",{onClick:()=>p(!1),className:"flex h-max items-center gap-x-1 rounded-full border p-px text-xs text-gray-800 hover:bg-gray-100 md:p-2",children:[e.jsxRuntimeExports.jsx(C.Cross1Icon,{width:12})," Close"]})]}),e.jsxRuntimeExports.jsx(k.Tabs,{onValueChange:d=>{m(""),r(d)},value:t,className:"h-max",children:e.jsxRuntimeExports.jsxs(k.TabsList,{className:"grid w-full "+(B?"grid-cols-3":"grid-cols-2"),children:[e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"core",children:"Core"}),B?e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"ui-blocks",children:"UI Blocks"}):null,e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"html",children:"Import"})]})}),t==="core"&&e.jsxRuntimeExports.jsx(q.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx(w.Accordion,{type:"single",value:o,className:"w-full px-3",children:n.Children.toArray(s.map(a,d=>s.reject(s.filter(s.values(R.core),{group:d}),{hidden:!0}).length?e.jsxRuntimeExports.jsxs(w.AccordionItem,{value:d,className:"border-border",children:[e.jsxRuntimeExports.jsx(w.AccordionTrigger,{onClick:()=>h(d),className:"py-2 capitalize",children:d}),e.jsxRuntimeExports.jsx(w.AccordionContent,{children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-4 gap-2",children:n.Children.toArray(s.reject(s.filter(s.values(R.core),{group:d}),{hidden:!0}).map(A=>e.jsxRuntimeExports.jsx(M,{block:A})))})})]}):null))})}),t==="ui-blocks"&&e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(y.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(H,{})}),t==="html"&&e.jsxRuntimeExports.jsx(O,{})]})};exports.default=z;

package/dist/AddBlocks-c195f577.js

@@ -0,0 +1,258 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import B, { createElement as G, useState as j, useMemo as K, useCallback as V, useEffect as q, Suspense as W } from "react";
+import { has as S, first as b, filter as w, values as A, groupBy as I, mergeWith as Q, isArray as H, get as $, map as L, isEmpty as k, find as J, uniq as X, includes as P, reject as M } from "lodash";
+import { useAtom as h } from "jotai";
+import { A as Y, a as Z, b as ee, c as se } from "./accordion-c0176dc5.js";
+import { S as re } from "./scroll-area-9f64a082.js";
+import { T as oe, a as te, b as N } from "./tabs-85caa1e8.js";
+import { d as le, e as ae, f as ce, u as ne, B as ie, S as de } from "./useBuilderProp-81a14920.js";
+import { useDrag as R, DragPreviewImage as _ } from "react-dnd";
+import { BoxIcon as me, ExclamationTriangleIcon as ue, Cross1Icon as pe } from "@radix-ui/react-icons";
+import { Q as F, h as T, a as O, b as C, T as U, U as xe, V as he, y as fe } from "./index-390f7bef.js";
+import "react-i18next";
+import { syncBlocksWithDefaults as z, useChaiBlocks as D } from "@chaibuilder/blocks";
+import { Loader as ge } from "lucide-react";
+import { c as be } from "./utils-ac68b2c8.js";
+import { C as je, c as ye, e as we, f as ke, g as Be, T as Te, d as Ce, A as ve, a as Ne } from "./textarea-0750bcd2.js";
+import { L as Ae } from "./label-e770a087.js";
+import { g as Ie } from "./html-to-json-9304dbda.js";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "i18next";
+import "flagged";
+import "@minoru/react-dnd-treeview";
+import "react-hotkeys-hook";
+import "flat-to-nested";
+import "./Class-e34b2337.js";
+import "redux-undo";
+import "@react-hookz/web";
+import "./CONTROLS-442caee5.js";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-label";
+import "himalaya";
+const Le = ({ block: s }) => {
+  const { type: r, icon: o, label: a } = s, { addCoreBlock: i, addPredefinedBlock: d } = F(), [m] = T(), [, n] = h(O), [, t] = h(C), f = () => {
+    S(s, "blocks") ? d(z(s.blocks), b(m)) : i(s, b(m)), t(!1), n("layers");
+  }, [, x, u] = R(() => ({
+    type: "CHAI_BLOCK",
+    item: s
+  }));
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      _,
+      {
+        connect: u,
+        src: "https://placehold.co/100x30/000000/FFF?text=" + (a || r).replace(/ /g, "+")
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(le, { children: [
+      /* @__PURE__ */ e.jsx(ae, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          onClick: f,
+          type: "button",
+          ref: x,
+          className: "cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",
+          children: [
+            G(o || me, { className: "w-4 h-4 mx-auto" }),
+            /* @__PURE__ */ e.jsx("p", { className: "truncate text-xs", children: a || r })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(ce, { children: /* @__PURE__ */ e.jsx("p", { children: a || r }) })
+    ] })
+  ] });
+}, Pe = ({ block: s, closePopover: r }) => {
+  var u;
+  const [o, a] = j(!1), i = ne("getExternalPredefinedBlock"), { addCoreBlock: d, addPredefinedBlock: m } = F(), [n] = T(), [, t, f] = R(
+    () => ({
+      type: "CHAI_BLOCK",
+      item: s
+    }),
+    [s]
+  ), x = V(
+    async (g) => {
+      if (g.stopPropagation(), S(s, "component")) {
+        d(s, b(n)), r();
+        return;
+      }
+      a(!0);
+      const l = await i(s);
+      k(l) || m(z(l), b(n)), r();
+    },
+    [s]
+  );
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      _,
+      {
+        connect: f,
+        src: "https://placehold.co/100x30/000000/FFF?text=" + ((u = s.name || s.label) == null ? void 0 : u.replace(" ", "+"))
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: t,
+        onClick: o ? () => {
+        } : x,
+        className: "relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",
+        children: [
+          o && /* @__PURE__ */ e.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70", children: [
+            /* @__PURE__ */ e.jsx(ge, { className: "animate-spin", size: 15, color: "white" }),
+            " ",
+            /* @__PURE__ */ e.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
+          ] }),
+          s.preview ? /* @__PURE__ */ e.jsx("img", { src: s.preview, className: "min-h-[50px] w-full rounded-md border border-gray-300", alt: s.name }) : /* @__PURE__ */ e.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200", children: /* @__PURE__ */ e.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: s.name }) })
+        ]
+      }
+    )
+  ] });
+}, Fe = () => {
+  const { data: s, isLoading: r } = U(), o = D(), a = w(A(o), { category: "custom" }), i = I(a, "group"), d = I(s, "group"), [m, n] = j(null), t = K(() => Q(i, d, (l, p) => {
+    if (H(l) && H(p))
+      return [...l, ...p];
+  }), [i, d]), [, f] = h(C), [x, u] = j("Navbar"), g = $(t, x, []);
+  return /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-full max-h-full overflow-hidden py-2", children: [
+    /* @__PURE__ */ e.jsx("ul", { className: "sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2", children: r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("li", { className: "h-8 w-full animate-pulse bg-gray-200" }),
+      /* @__PURE__ */ e.jsx("li", { className: "mt-2 h-8 w-full animate-pulse bg-gray-200" }),
+      /* @__PURE__ */ e.jsx("li", { className: "mt-2 h-8 w-full animate-pulse bg-gray-200" }),
+      /* @__PURE__ */ e.jsx("li", { className: "mt-2 h-8 w-full animate-pulse bg-gray-200" }),
+      /* @__PURE__ */ e.jsx("li", { className: "mt-2 h-8 w-full animate-pulse bg-gray-200" }),
+      /* @__PURE__ */ e.jsx("li", { className: "mt-2 h-8 w-full animate-pulse bg-gray-200" })
+    ] }) : B.Children.toArray(
+      L(t, (l, p) => /* @__PURE__ */ e.jsx(
+        "li",
+        {
+          onMouseOut: () => {
+            clearTimeout(m), n(null);
+          },
+          onMouseEnter: () => {
+            const y = setTimeout(() => {
+              u(p);
+            }, 300);
+            n(y);
+          },
+          onClick: () => u(p),
+          className: be(
+            "-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",
+            x === p ? "bg-blue-500 text-white" : " text-gray-700 hover:bg-foreground/10"
+          ),
+          children: p
+        }
+      ))
+    ) }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-full w-full space-y-2 overflow-y-auto px-8", children: B.Children.toArray(
+      g.map((l) => /* @__PURE__ */ e.jsx(Pe, { block: l, closePopover: () => f(!1) }))
+    ) })
+  ] });
+}, He = () => {
+  const [s, r] = j(""), { addPredefinedBlock: o } = F(), [a] = T(), [, i] = h(xe), [, d] = h(O), [, m] = h(C), n = () => {
+    const t = Ie(s);
+    o([...t], b(a) || null), r(""), i(!1), d("layers"), m(!1);
+  };
+  return /* @__PURE__ */ e.jsxs(je, { className: "border-border/0 p-0 shadow-none", children: [
+    /* @__PURE__ */ e.jsxs(ye, { className: "p-3", children: [
+      /* @__PURE__ */ e.jsx(we, { children: "Import HTML" }),
+      /* @__PURE__ */ e.jsx(ke, { children: "Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported." })
+    ] }),
+    /* @__PURE__ */ e.jsx(Be, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e.jsx(Ae, { htmlFor: "current", className: "text-sm", children: "Enter HTML Code:" }),
+      /* @__PURE__ */ e.jsx(
+        Te,
+        {
+          autoFocus: !0,
+          tabIndex: 1,
+          ref: (t) => t && t.focus(),
+          defaultValue: s,
+          onChange: (t) => r(t.target.value),
+          rows: 12,
+          placeholder: `<div>
+    <h1>Enter code here</h1>
+</div>`,
+          className: "resize-none overflow-x-auto whitespace-pre font-mono font-normal"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e.jsxs(Ce, { className: "flex flex-col justify-end p-3", children: [
+      /* @__PURE__ */ e.jsx(ie, { disabled: s.trim() === "", onClick: () => n(), size: "sm", className: "w-full", children: "Import" }),
+      /* @__PURE__ */ e.jsxs(ve, { variant: "default", className: "mt-2 p-1 text-blue-400", children: [
+        /* @__PURE__ */ e.jsx(ue, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e.jsx(Ne, { className: "text-sm leading-4", children: "Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page." })
+      ] })
+    ] })
+  ] });
+}, Me = He, E = ["ListItem", "TableHead", "TableBody", "TableRow", "TableCell", "Column"], Ee = (s, r) => {
+  if (!s)
+    return !P(E, r);
+  const o = s._type;
+  return o === "List" ? r === "ListItem" : o === "Table" ? r === "TableHead" || r === "TableBody" : o === "TableHead" || o === "TableBody" ? r === "TableRow" : o === "TableRow" ? r === "TableCell" : o === "Row" ? r === "Column" : !P(E, r);
+}, ys = () => {
+  const [s, r] = j("core"), [o, a] = j("basic"), i = D(), [, d] = h(he), [, m] = h(C), [n] = T(), t = fe(), f = J(t, { _id: b(n) }), { data: x, isLoading: u } = U(), g = I(
+    w(i, (c) => Ee(f, c.type)),
+    "category"
+  ), l = X(L(g.core, "group"));
+  q(() => {
+    !P(l, o) && !k(l) && !k(o) && a(b(l));
+  }, [l, o]);
+  const p = (c) => a((v) => v === c ? "" : c), y = !u && !k(x);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "mb-2 flex justify-between rounded-md bg-background/30 p-1", children: [
+      /* @__PURE__ */ e.jsxs("h1", { className: "flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row", children: [
+        "Add block",
+        /* @__PURE__ */ e.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: s === "html" ? "(Enter or paste your own HTML code)" : "(Drag & drop into tree view or click to add)" })
+      ] }),
+      /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          onClick: () => m(!1),
+          className: "flex h-max items-center gap-x-1 rounded-full border p-px text-xs text-gray-800 hover:bg-gray-100 md:p-2",
+          children: [
+            /* @__PURE__ */ e.jsx(pe, { width: 12 }),
+            " Close"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      oe,
+      {
+        onValueChange: (c) => {
+          d(""), r(c);
+        },
+        value: s,
+        className: "h-max",
+        children: /* @__PURE__ */ e.jsxs(te, { className: "grid w-full " + (y ? "grid-cols-3" : "grid-cols-2"), children: [
+          /* @__PURE__ */ e.jsx(N, { value: "core", children: "Core" }),
+          y ? /* @__PURE__ */ e.jsx(N, { value: "ui-blocks", children: "UI Blocks" }) : null,
+          /* @__PURE__ */ e.jsx(N, { value: "html", children: "Import" })
+        ] })
+      }
+    ),
+    s === "core" && /* @__PURE__ */ e.jsx(re, { className: "-mx-1.5 h-full", children: /* @__PURE__ */ e.jsx(Y, { type: "single", value: o, className: "w-full px-3", children: B.Children.toArray(
+      L(
+        l,
+        (c) => M(w(A(g.core), { group: c }), {
+          hidden: !0
+        }).length ? /* @__PURE__ */ e.jsxs(Z, { value: c, className: "border-border", children: [
+          /* @__PURE__ */ e.jsx(ee, { onClick: () => p(c), className: "py-2 capitalize", children: c }),
+          /* @__PURE__ */ e.jsx(se, { children: /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-4 gap-2", children: B.Children.toArray(
+            M(w(A(g.core), { group: c }), { hidden: !0 }).map((v) => /* @__PURE__ */ e.jsx(Le, { block: v }))
+          ) }) })
+        ] }) : null
+      )
+    ) }) }),
+    s === "ui-blocks" && /* @__PURE__ */ e.jsx(W, { fallback: /* @__PURE__ */ e.jsx(de, { className: "h-32 w-full" }), children: /* @__PURE__ */ e.jsx(Fe, {}) }),
+    s === "html" && /* @__PURE__ */ e.jsx(Me, {})
+  ] });
+};
+export {
+  ys as default
+};

package/dist/{BrandingOptions-77957074.cjs → BrandingOptions-742992b6.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-5c3ac4f7.cjs"),C=require("react"),q=require("@rjsf/validator-ajv8"),B=require("@rjsf/core"),_=require("./index-506fb888.cjs");require("react-i18next");const j=require("./useBuilderProp-5e57d0c8.cjs"),e=require("@chaibuilder/blocks");require("i18next");require("flagged");require("react-dnd");require("lodash");require("@minoru/react-dnd-treeview");require("jotai");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-0801d193.cjs");require("redux-undo");require("@react-hookz/web");require("./CONTROLS-031e1de3.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-icons");require("@radix-ui/react-toast");function R(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(a,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return a.default=t,Object.freeze(a)}const c=R(C),v=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],P=()=>{const t=j.useBuilderProp("onSaveBrandingOptions",async()=>{}),[a,i]=_.useBrandingOptions(),r=c.useRef(a);c.useEffect(()=>()=>t(r.current),[r]);const p=({formData:l},u)=>{u&&(i(l),r.current=l)},{_bodyFont:g,_headingFont:b,_primaryColor:f,_bodyTextDarkColor:m,_bodyTextLightColor:y,_bodyBgDarkColor:x,_secondaryColor:S,_bodyBgLightColor:h,_roundedCorners:O}=a,s={_headingFont:e.SelectOption({title:"Heading font",default:b,options:v}),_bodyFont:e.SelectOption({title:"Body font",default:g,options:v}),_roundedCorners:e.Numeric({title:"Rounded Corner",default:parseInt(O||5,10)}),_primaryColor:e.Color({title:"Primary",default:f}),_secondaryColor:e.Color({title:"Secondary",default:S}),_bodyBgLightColor:e.Color({title:"Body Background (Light)",default:h}),_bodyBgDarkColor:e.Color({title:"Body Background (Dark)",default:x}),_bodyTextLightColor:e.Color({title:"Body Text (Light)",default:m}),_bodyTextDarkColor:e.Color({title:"Body Text (Dark)",default:y})},n={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const u=s[l];return n.properties||(n.properties={}),n.properties[l]=u.schema,d[l]=u.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(B,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:n,formData:a,validator:q,onChange:p})})]})};exports.default=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-5c3ac4f7.cjs"),C=require("react"),q=require("@rjsf/validator-ajv8"),B=require("@rjsf/core"),j=require("./index-ebd86d7f.cjs");require("react-i18next");const R=require("./useBuilderProp-5e57d0c8.cjs"),e=require("@chaibuilder/blocks");require("i18next");require("flagged");require("react-dnd");require("lodash");require("@minoru/react-dnd-treeview");require("jotai");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-7d6aadbc.cjs");require("redux-undo");require("@react-hookz/web");require("@radix-ui/react-icons");require("./CONTROLS-031e1de3.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");function P(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(a,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return a.default=t,Object.freeze(a)}const c=P(C),v=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],k=()=>{const t=R.useBuilderProp("onSaveBrandingOptions",async()=>{}),[a,i]=j.useBrandingOptions(),r=c.useRef(a);c.useEffect(()=>()=>t(r.current),[r]);const p=({formData:l},u)=>{u&&(i(l),r.current=l)},{bodyFont:g,headingFont:b,primaryColor:f,bodyTextDarkColor:m,bodyTextLightColor:y,bodyBgDarkColor:x,secondaryColor:S,bodyBgLightColor:h,roundedCorners:O}=a,s={headingFont:e.SelectOption({title:"Heading font",default:b,options:v}),bodyFont:e.SelectOption({title:"Body font",default:g,options:v}),roundedCorners:e.Numeric({title:"Rounded Corner",default:parseInt(O||5,10)}),primaryColor:e.Color({title:"Primary",default:f}),secondaryColor:e.Color({title:"Secondary",default:S}),bodyBgLightColor:e.Color({title:"Body Background (Light)",default:h}),bodyBgDarkColor:e.Color({title:"Body Background (Dark)",default:x}),bodyTextLightColor:e.Color({title:"Body Text (Light)",default:m}),bodyTextDarkColor:e.Color({title:"Body Text (Dark)",default:y})},n={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const u=s[l];return n.properties||(n.properties={}),n.properties[l]=u.schema,d[l]=u.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(B,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:n,formData:a,validator:q,onChange:p})})]})};exports.default=k;

package/dist/{BrandingOptions-86dc389a.js → BrandingOptions-766c19c6.js}

@@ -1,11 +1,11 @@
 import { j as a } from "./jsx-runtime-944c88e2.js";
 import * as s from "react";
 import B from "@rjsf/validator-ajv8";
-import _ from "@rjsf/core";
-import { w as k } from "./index-32d7b6e5.js";
+import k from "@rjsf/core";
+import { w as N } from "./index-390f7bef.js";
 import "react-i18next";
-import { u as N } from "./useBuilderProp-81a14920.js";
-import { SelectOption as p, Numeric as D, Color as e } from "@chaibuilder/blocks";
+import { u as D } from "./useBuilderProp-81a14920.js";
+import { SelectOption as p, Numeric as P, Color as e } from "@chaibuilder/blocks";
 import "i18next";
 import "flagged";
 import "react-dnd";
@@ -17,14 +17,14 @@ import "clsx";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e6b07b79.js";
+import "./Class-e34b2337.js";
 import "redux-undo";
 import "@react-hookz/web";
+import "@radix-ui/react-icons";
 import "./CONTROLS-442caee5.js";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
-import "@radix-ui/react-icons";
 import "@radix-ui/react-toast";
 const d = [
   { title: "Roboto", value: "Roboto" },
@@ -77,51 +77,51 @@ const d = [
   { title: "Ovo", value: "Ovo" },
   { title: "Suranna", value: "Suranna" }
 ], at = () => {
-  const v = N("onSaveBrandingOptions", async () => {
-  }), [l, m] = k(), r = s.useRef(l);
+  const v = D("onSaveBrandingOptions", async () => {
+  }), [l, m] = N(), r = s.useRef(l);
   s.useEffect(() => () => v(r.current), [r]);
   const c = ({ formData: t }, i) => {
     i && (m(t), r.current = t);
   }, {
-    _bodyFont: f,
-    _headingFont: g,
-    _primaryColor: y,
-    _bodyTextDarkColor: h,
-    _bodyTextLightColor: b,
-    _bodyBgDarkColor: S,
-    _secondaryColor: x,
-    _bodyBgLightColor: C,
-    _roundedCorners: O
+    bodyFont: f,
+    headingFont: g,
+    primaryColor: y,
+    bodyTextDarkColor: h,
+    bodyTextLightColor: b,
+    bodyBgDarkColor: S,
+    secondaryColor: x,
+    bodyBgLightColor: C,
+    roundedCorners: O
   } = l, n = {
-    _headingFont: p({
+    headingFont: p({
       title: "Heading font",
       default: g,
       options: d
     }),
-    _bodyFont: p({
+    bodyFont: p({
       title: "Body font",
       default: f,
       options: d
     }),
-    _roundedCorners: D({
+    roundedCorners: P({
       title: "Rounded Corner",
       default: parseInt(O || 5, 10)
     }),
-    _primaryColor: e({ title: "Primary", default: y }),
-    _secondaryColor: e({ title: "Secondary", default: x }),
-    _bodyBgLightColor: e({
+    primaryColor: e({ title: "Primary", default: y }),
+    secondaryColor: e({ title: "Secondary", default: x }),
+    bodyBgLightColor: e({
       title: "Body Background (Light)",
       default: C
     }),
-    _bodyBgDarkColor: e({
+    bodyBgDarkColor: e({
       title: "Body Background (Dark)",
       default: S
     }),
-    _bodyTextLightColor: e({
+    bodyTextLightColor: e({
       title: "Body Text (Light)",
       default: h
     }),
-    _bodyTextDarkColor: e({
+    bodyTextDarkColor: e({
       title: "Body Text (Dark)",
       default: b
     })
@@ -136,7 +136,7 @@ const d = [
   }), /* @__PURE__ */ a.jsxs("div", { className: "flex h-full select-none flex-col", children: [
     /* @__PURE__ */ a.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ a.jsx("h1", { className: "px-1 font-semibold", children: "Branding Options" }) }),
     /* @__PURE__ */ a.jsx("div", { className: "-mx-2", children: /* @__PURE__ */ a.jsx(
-      _,
+      k,
       {
         idSeparator: ".",
         autoComplete: "off",

package/dist/{CanvasArea-29d479f2.js → CanvasArea-25800a3e.js}

@@ -6,11 +6,12 @@ import G, { createElement as gt, useCallback as Q, useState as H, useEffect as F
 import { map as ie, includes as Me, toUpper as ye, round as St, isEmpty as ee, first as ce, get as $, memoize as Tt, find as jt, filter as Ze, isString as Je } from "lodash";
 import { ResetIcon as De, DotsVerticalIcon as Ct, MobileIcon as Be, LaptopIcon as kt, DesktopIcon as _t, EraserIcon as Rt, ZoomInIcon as At, ArrowUpIcon as Pt, CopyIcon as It, TrashIcon as Ot, DragHandleDots2Icon as Mt } from "@radix-ui/react-icons";
 import { B as le, u as Qe, S as et } from "./useBuilderProp-81a14920.js";
-import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as nt, l as rt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-32d7b6e5.js";
+import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as nt, l as rt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-390f7bef.js";
 import { useTranslation as it } from "react-i18next";
 import { S as se } from "./separator-a80d065b.js";
-import { S as Jt, D as Qt, k as en, l as tn, p as nn, q as rn, n as on, H as sn, i as an, j as cn, A as ln, a as dn, b as un, c as fn, e as pn, f as hn, d as mn, h as yn, g as vn } from "./dropdown-menu-d912a52e.js";
-import { L as gn } from "./label-e770a087.js";
+import { S as Jt, D as Qt, c as en, d as tn, h as nn, i as rn, f as on, H as sn, a as an, b as cn } from "./dropdown-menu-ae3ed09b.js";
+import { L as ln } from "./label-e770a087.js";
+import { A as dn, a as un, b as fn, c as pn, e as hn, f as mn, d as yn, h as vn, g as gn } from "./alert-dialog-ee98f47e.js";
 import { useAtom as te } from "jotai";
 import { flip as xn } from "@floating-ui/dom";
 import { useFloating as bn, shift as wn } from "@floating-ui/react-dom";
@@ -34,14 +35,14 @@ import "flagged";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e6b07b79.js";
+import "./Class-e34b2337.js";
 import "redux-undo";
 import "@radix-ui/react-separator";
 import "@radix-ui/react-switch";
-import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-hover-card";
 import "@radix-ui/react-dropdown-menu";
 import "@radix-ui/react-label";
+import "@radix-ui/react-alert-dialog";
 const Rn = () => {
   const { undoCount: e, redoCount: n, undo: r, redo: i } = ke();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
@@ -52,7 +53,7 @@ const Rn = () => {
 function An() {
   const [e, n] = tt(), { t: r } = it();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ t.jsx(gn, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
+    /* @__PURE__ */ t.jsx(ln, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
     /* @__PURE__ */ t.jsxs(
       Jt,
       {
@@ -197,19 +198,19 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
   const [e] = Bt(), { createSnapshot: n } = ke(), [, r] = X(), [, i] = Z(), d = Q(() => {
     e([]), r([]), i([]), n();
   }, [e, n]);
-  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(ln, { children: [
-    /* @__PURE__ */ t.jsx(dn, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(dn, { children: [
+    /* @__PURE__ */ t.jsx(un, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
       /* @__PURE__ */ t.jsx(Rt, {}),
       " Clear"
     ] }) }),
-    /* @__PURE__ */ t.jsxs(un, { className: "border-border", children: [
-      /* @__PURE__ */ t.jsxs(fn, { children: [
-        /* @__PURE__ */ t.jsx(pn, { children: "Clear whole canvas?" }),
-        /* @__PURE__ */ t.jsx(hn, { children: "Are you sure you want to clear the whole canvas?" })
+    /* @__PURE__ */ t.jsxs(fn, { className: "border-border", children: [
+      /* @__PURE__ */ t.jsxs(pn, { children: [
+        /* @__PURE__ */ t.jsx(hn, { children: "Clear whole canvas?" }),
+        /* @__PURE__ */ t.jsx(mn, { children: "Are you sure you want to clear the whole canvas?" })
       ] }),
-      /* @__PURE__ */ t.jsxs(mn, { children: [
-        /* @__PURE__ */ t.jsx(yn, { children: "Cancel" }),
-        /* @__PURE__ */ t.jsx(vn, { onClick: d, children: "Yes" })
+      /* @__PURE__ */ t.jsxs(yn, { children: [
+        /* @__PURE__ */ t.jsx(vn, { children: "Cancel" }),
+        /* @__PURE__ */ t.jsx(gn, { onClick: d, children: "Yes" })
       ] })
     ] })
   ] }) });
@@ -965,7 +966,7 @@ const L = /* @__PURE__ */ _n(zn);
 let ut, ft;
 typeof document < "u" && (ut = document);
 typeof window < "u" && (ft = window);
-const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: Hn, Consumer: Xr } = pt;
+const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: Hn, Consumer: Zr } = pt;
 class ht extends Xe {
   componentDidMount() {
     this.props.contentDidMount();
@@ -1423,7 +1424,7 @@ const or = () => {
       )
     }
   );
-}, ir = wt(() => import("./AddBlocks-e047b93d.js")), Zr = () => {
+}, ir = wt(() => import("./AddBlocks-c195f577.js")), Jr = () => {
   const e = Qe("mode", ve.STATIC), [n, r] = te(Xt), i = {
     [ve.STATIC]: /* @__PURE__ */ t.jsx(ar, {}),
     [ve.FRAMEWORK]: null
@@ -1451,5 +1452,5 @@ const or = () => {
   ] });
 };
 export {
-  Zr as default
+  Jr as default
 };