@chaibuilder/sdk 0.1.0

package/dist/SidePanels-f48777bb.js

@@ -0,0 +1,144 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import { PlusIcon as w, StackIcon as C, Half2Icon as z } from "@radix-ui/react-icons";
+import i, { lazy as c, useState as x, Suspense as r } from "react";
+import { useAtom as u } from "jotai";
+import { each as P, get as A } from "lodash";
+import { u as f, B as o, S as h } from "./useBuilderProp-81a14920.js";
+import { a as B, b as T } from "./index-cdd49c4c.js";
+import "react-i18next";
+import { c as S } from "./utils-ac68b2c8.js";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "i18next";
+import "flagged";
+import "react-dnd";
+import "@minoru/react-dnd-treeview";
+import "react-hotkeys-hook";
+import "flat-to-nested";
+import "./Class-e6b07b79.js";
+import "redux-undo";
+import "@react-hookz/web";
+import "chaibuilder-blocks";
+import "./CONTROLS-442caee5.js";
+import "clsx";
+import "tailwind-merge";
+const b = c(() => import("./Layers-6f1c162e.js")), E = c(() => import("./BrandingOptions-055cf22a.js")), I = c(() => import("./ImagesPanel-815d5e6f.js"));
+let j = null;
+const re = () => {
+  const m = f("sideBarComponents.top", []), g = f("sideBarComponents.bottom", []), [a, v] = u(B), [y, d] = x(a), [t, N] = x(null), p = {
+    layers: b,
+    "branding-options": E,
+    images: I
+  };
+  P(m, ({ name: s, panel: n }) => {
+    p[s] = n;
+  });
+  const l = (s) => {
+    clearTimeout(j), a !== "layers" && s === "layers" ? j = setTimeout(() => d("layers"), 500) : d(s), v(s);
+  }, [, k] = u(T);
+  return /* @__PURE__ */ e.jsxs("div", { className: "relative flex", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "z-[100] flex h-full w-fit flex-col items-center justify-between border-b border-r border-border bg-background pt-2", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "relative z-[100] flex w-14  flex-col items-center space-y-2", children: [
+        /* @__PURE__ */ e.jsx(
+          o,
+          {
+            onClick: () => k(!0),
+            size: "sm",
+            variant: a === "add-blocks" ? "default" : "outline",
+            children: /* @__PURE__ */ e.jsx(w, { className: "text-xl" })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          o,
+          {
+            onClick: () => l("layers"),
+            size: "sm",
+            variant: a === "layers" ? "default" : "outline",
+            children: /* @__PURE__ */ e.jsx(C, { className: "text-xl" })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          o,
+          {
+            onClick: () => l("branding-options"),
+            size: "sm",
+            variant: a === "branding-options" ? "default" : "outline",
+            children: /* @__PURE__ */ e.jsx(z, { className: "w-4 max-w-[40px] text-xs" })
+          }
+        ),
+        i.Children.toArray(
+          m.map(({ name: s, icon: n }) => /* @__PURE__ */ e.jsx(r, { fallback: /* @__PURE__ */ e.jsx(h, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(
+            o,
+            {
+              onClick: () => l(s),
+              size: "sm",
+              className: "w-10",
+              variant: a === s ? "default" : "outline",
+              children: /* @__PURE__ */ e.jsx(n, {})
+            }
+          ) }))
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center space-y-2", children: i.Children.toArray(
+        g.map((s) => /* @__PURE__ */ e.jsx(r, { fallback: /* @__PURE__ */ e.jsx(h, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(s, {}) }))
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        onClick: () => {
+          l("layers");
+        },
+        className: "absolute inset-0 right-0 z-50 w-screen bg-black/20" + (a === "layers" ? " hidden" : "")
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: `fixed left-14 z-[50] h-full w-96 border-r bg-background duration-500 ease-in-out ${a !== "layers" ? "translate-x-0" : "-translate-x-full"}`,
+        children: /* @__PURE__ */ e.jsx(
+          r,
+          {
+            fallback: /* @__PURE__ */ e.jsxs("div", { className: "flex animate-pulse flex-col gap-y-2 bg-white p-4", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "h-6 w-1/2 bg-gray-300" }),
+              /* @__PURE__ */ e.jsx("div", { className: "h-16 w-full bg-gray-200" }),
+              /* @__PURE__ */ e.jsx("div", { className: "h-16 w-full bg-gray-200" })
+            ] }),
+            children: /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                className: S("relative h-full max-h-[93%] bg-background p-1", a === "layers" ? "" : "z-[100]"),
+                onMouseEnter: () => {
+                  t && clearTimeout(t);
+                },
+                onMouseLeave: () => {
+                  const s = setTimeout(() => {
+                    t && (l("layers"), clearTimeout(t));
+                  }, 1e3);
+                  N(s);
+                },
+                children: i.createElement(A(p, y, () => /* @__PURE__ */ e.jsx("div", {})))
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "h-full w-60 border-r p-1", children: /* @__PURE__ */ e.jsx(
+      r,
+      {
+        fallback: /* @__PURE__ */ e.jsxs("div", { className: "flex animate-pulse flex-col gap-y-2 p-4", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "h-6 w-1/2 bg-gray-300" }),
+          /* @__PURE__ */ e.jsx("div", { className: "h-16 w-full bg-gray-200" }),
+          /* @__PURE__ */ e.jsx("div", { className: "h-16 w-full bg-gray-200" })
+        ] }),
+        children: i.createElement(b)
+      }
+    ) })
+  ] });
+};
+export {
+  re as default
+};

package/dist/SidePanels-f79dbace.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),o=require("@radix-ui/react-icons"),s=require("react"),m=require("jotai"),d=require("lodash"),i=require("./useBuilderProp-5e57d0c8.cjs"),j=require("./index-aea5c557.cjs");require("react-i18next");const g=require("./utils-3c452dd0.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("i18next");require("flagged");require("react-dnd");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-0801d193.cjs");require("redux-undo");require("@react-hookz/web");require("chaibuilder-blocks");require("./CONTROLS-031e1de3.cjs");require("clsx");require("tailwind-merge");const p=s.lazy(()=>Promise.resolve().then(()=>require("./Layers-3aa6aae7.cjs"))),y=s.lazy(()=>Promise.resolve().then(()=>require("./BrandingOptions-c25f6370.cjs"))),q=s.lazy(()=>Promise.resolve().then(()=>require("./ImagesPanel-160aa664.cjs")));let h=null;const N=()=>{const u=i.useBuilderProp("sideBarComponents.top",[]),f=i.useBuilderProp("sideBarComponents.bottom",[]),[r,b]=m.useAtom(j.activePanelAtom),[E,x]=s.useState(r),[n,v]=s.useState(null),c={layers:p,"branding-options":y,images:q};d.each(u,({name:t,panel:a})=>{c[t]=a});const l=t=>{clearTimeout(h),r!=="layers"&&t==="layers"?h=setTimeout(()=>x("layers"),500):x(t),b(t)},[,R]=m.useAtom(j.addBlocksModalAtom);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex",children:[e.jsxRuntimeExports.jsxs("div",{className:"z-[100] flex h-full w-fit flex-col items-center justify-between border-b border-r border-border bg-background pt-2",children:[e.jsxRuntimeExports.jsxs("div",{className:"relative z-[100] flex w-14  flex-col items-center space-y-2",children:[e.jsxRuntimeExports.jsx(i.Button,{onClick:()=>R(!0),size:"sm",variant:r==="add-blocks"?"default":"outline",children:e.jsxRuntimeExports.jsx(o.PlusIcon,{className:"text-xl"})}),e.jsxRuntimeExports.jsx(i.Button,{onClick:()=>l("layers"),size:"sm",variant:r==="layers"?"default":"outline",children:e.jsxRuntimeExports.jsx(o.StackIcon,{className:"text-xl"})}),e.jsxRuntimeExports.jsx(i.Button,{onClick:()=>l("branding-options"),size:"sm",variant:r==="branding-options"?"default":"outline",children:e.jsxRuntimeExports.jsx(o.Half2Icon,{className:"w-4 max-w-[40px] text-xs"})}),s.Children.toArray(u.map(({name:t,icon:a})=>e.jsxRuntimeExports.jsx(s.Suspense,{fallback:e.jsxRuntimeExports.jsx(i.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(i.Button,{onClick:()=>l(t),size:"sm",className:"w-10",variant:r===t?"default":"outline",children:e.jsxRuntimeExports.jsx(a,{})})})))]}),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center space-y-2",children:s.Children.toArray(f.map(t=>e.jsxRuntimeExports.jsx(s.Suspense,{fallback:e.jsxRuntimeExports.jsx(i.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))})]}),e.jsxRuntimeExports.jsx("div",{onClick:()=>{l("layers")},className:"absolute inset-0 right-0 z-50 w-screen bg-black/20"+(r==="layers"?" hidden":"")}),e.jsxRuntimeExports.jsx("div",{className:`fixed left-14 z-[50] h-full w-96 border-r bg-background duration-500 ease-in-out ${r!=="layers"?"translate-x-0":"-translate-x-full"}`,children:e.jsxRuntimeExports.jsx(s.Suspense,{fallback:e.jsxRuntimeExports.jsxs("div",{className:"flex animate-pulse flex-col gap-y-2 bg-white p-4",children:[e.jsxRuntimeExports.jsx("div",{className:"h-6 w-1/2 bg-gray-300"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"})]}),children:e.jsxRuntimeExports.jsx("div",{className:g.cn("relative h-full max-h-[93%] bg-background p-1",r==="layers"?"":"z-[100]"),onMouseEnter:()=>{n&&clearTimeout(n)},onMouseLeave:()=>{const t=setTimeout(()=>{n&&(l("layers"),clearTimeout(n))},1e3);v(t)},children:s.createElement(d.get(c,E,()=>e.jsxRuntimeExports.jsx("div",{})))})})}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-60 border-r p-1",children:e.jsxRuntimeExports.jsx(s.Suspense,{fallback:e.jsxRuntimeExports.jsxs("div",{className:"flex animate-pulse flex-col gap-y-2 p-4",children:[e.jsxRuntimeExports.jsx("div",{className:"h-6 w-1/2 bg-gray-300"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"}),e.jsxRuntimeExports.jsx("div",{className:"h-16 w-full bg-gray-200"})]}),children:s.createElement(p)})})]})};exports.default=N;

package/dist/Topbar-64729901.js

@@ -0,0 +1,105 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import i, { useMemo as m, Suspense as o } from "react";
+import { FontFamilyIcon as p } from "@radix-ui/react-icons";
+import { S as x, c as d, b as h, d as u, a as g, e as j, f as t } from "./select-7fddd7c3.js";
+import { u as l, d as f, e as v, f as S, S as c } from "./useBuilderProp-81a14920.js";
+import { S as b } from "./separator-a80d065b.js";
+import { T as N } from "./toggle-00c9d11e.js";
+import { u as C } from "./index-cdd49c4c.js";
+import { useTranslation as w } from "react-i18next";
+import "@radix-ui/react-select";
+import "./utils-ac68b2c8.js";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "jotai";
+import "lodash";
+import "@radix-ui/react-separator";
+import "@radix-ui/react-toggle";
+import "i18next";
+import "flagged";
+import "react-dnd";
+import "@minoru/react-dnd-treeview";
+import "react-hotkeys-hook";
+import "flat-to-nested";
+import "./Class-e6b07b79.js";
+import "redux-undo";
+import "@react-hookz/web";
+import "chaibuilder-blocks";
+import "./CONTROLS-442caee5.js";
+const y = () => l("languages", ["en"]), A = () => y().length === 1 ? null : /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ e.jsxs(x, { children: [
+  /* @__PURE__ */ e.jsx(d, { className: "w-[150px] border-0", children: /* @__PURE__ */ e.jsx(
+    h,
+    {
+      placeholder: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
+        /* @__PURE__ */ e.jsx(p, { className: "h-4 w-4" }),
+        " English(US)"
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ e.jsx(u, { children: /* @__PURE__ */ e.jsxs(g, { children: [
+    /* @__PURE__ */ e.jsx(j, { children: "Fruits" }),
+    /* @__PURE__ */ e.jsx(t, { value: "apple", children: "Apple" }),
+    /* @__PURE__ */ e.jsx(t, { value: "banana", children: "Banana" }),
+    /* @__PURE__ */ e.jsx(t, { value: "blueberry", children: "Blueberry" }),
+    /* @__PURE__ */ e.jsx(t, { value: "grapes", children: "Grapes" }),
+    /* @__PURE__ */ e.jsx(t, { value: "pineapple", children: "Pineapple" })
+  ] }) })
+] }) }), T = () => {
+  const { savePage: a, syncState: s } = C(), { t: n } = w(), r = m(() => {
+    switch (s) {
+      case "SAVING":
+        return "animate-pulse bg-gray-500 text-gray-900";
+      case "SAVED":
+        return "bg-green-500 text-white hover:bg-green-600 hover:text-white";
+      default:
+        return "bg-gray-200 text-gray-500 hover:bg-gray-100";
+    }
+  }, [s]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ e.jsxs(f, { children: [
+    /* @__PURE__ */ e.jsx(v, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      N,
+      {
+        onClick: () => a(),
+        className: `flex h-auto w-20 items-center gap-x-1 rounded-full p-1 px-2 ${r}`,
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ e.jsx("svg", { fill: "currentColor", width: "16", height: "16", viewBox: "0 0 0.32 0.32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M.274.086a.02.02 0 0 1 0 .028l-.12.12a.02.02 0 0 1-.028 0l-.06-.06A.02.02 0 0 1 .094.146L.14.192.246.086a.02.02 0 0 1 .028 0Z"
+            }
+          ) }),
+          s === "SAVING" ? "Saving..." : s === "SAVED" ? n("Saved") : "Save"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(S, { children: /* @__PURE__ */ e.jsx("p", { children: s === "SAVING" ? "Saving..." : s === "SAVED" ? "Saved" : "Save changes" }) })
+  ] }) });
+}, ne = () => {
+  const a = l("topBarComponents.left", []), s = l("topBarComponents.center", []), n = l("topBarComponents.right", []);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2 font-bold", children: i.Children.toArray(
+      a.map((r) => /* @__PURE__ */ e.jsx(o, { fallback: /* @__PURE__ */ e.jsx(c, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(r, {}) }))
+    ) }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: i.Children.toArray(
+      s.map((r) => /* @__PURE__ */ e.jsx(o, { fallback: /* @__PURE__ */ e.jsx(c, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(r, {}) }))
+    ) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ e.jsx(A, {}),
+      /* @__PURE__ */ e.jsx(b, { orientation: "vertical" }),
+      /* @__PURE__ */ e.jsx(T, {}),
+      i.Children.toArray(
+        n.map((r) => /* @__PURE__ */ e.jsx(o, { fallback: /* @__PURE__ */ e.jsx(c, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(r, {}) }))
+      )
+    ] })
+  ] });
+};
+export {
+  ne as default
+};

package/dist/Topbar-bff765dc.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),i=require("react"),o=require("@radix-ui/react-icons"),s=require("./select-0e32300c.cjs"),r=require("./useBuilderProp-5e57d0c8.cjs"),u=require("./separator-a597dba7.cjs"),a=require("./toggle-b90fed97.cjs"),c=require("./index-aea5c557.cjs"),p=require("react-i18next");require("@radix-ui/react-select");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("jotai");require("lodash");require("@radix-ui/react-separator");require("@radix-ui/react-toggle");require("i18next");require("flagged");require("react-dnd");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-0801d193.cjs");require("redux-undo");require("@react-hookz/web");require("chaibuilder-blocks");require("./CONTROLS-031e1de3.cjs");const m=()=>r.useBuilderProp("languages",["en"]),j=()=>m().length===1?null:e.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:e.jsxRuntimeExports.jsxs(s.Select,{children:[e.jsxRuntimeExports.jsx(s.SelectTrigger,{className:"w-[150px] border-0",children:e.jsxRuntimeExports.jsx(s.SelectValue,{placeholder:e.jsxRuntimeExports.jsxs("span",{className:"flex items-center",children:[e.jsxRuntimeExports.jsx(o.FontFamilyIcon,{className:"h-4 w-4"})," English(US)"]})})}),e.jsxRuntimeExports.jsx(s.SelectContent,{children:e.jsxRuntimeExports.jsxs(s.SelectGroup,{children:[e.jsxRuntimeExports.jsx(s.SelectLabel,{children:"Fruits"}),e.jsxRuntimeExports.jsx(s.SelectItem,{value:"apple",children:"Apple"}),e.jsxRuntimeExports.jsx(s.SelectItem,{value:"banana",children:"Banana"}),e.jsxRuntimeExports.jsx(s.SelectItem,{value:"blueberry",children:"Blueberry"}),e.jsxRuntimeExports.jsx(s.SelectItem,{value:"grapes",children:"Grapes"}),e.jsxRuntimeExports.jsx(s.SelectItem,{value:"pineapple",children:"Pineapple"})]})})]})}),d=()=>{const{savePage:x,syncState:t}=c.useSavePage(),{t:l}=p.useTranslation(),n=i.useMemo(()=>{switch(t){case"SAVING":return"animate-pulse bg-gray-500 text-gray-900";case"SAVED":return"bg-green-500 text-white hover:bg-green-600 hover:text-white";default:return"bg-gray-200 text-gray-500 hover:bg-gray-100"}},[t]);return e.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:e.jsxRuntimeExports.jsxs(r.Tooltip,{children:[e.jsxRuntimeExports.jsx(r.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(a.Toggle,{onClick:()=>x(),className:`flex h-auto w-20 items-center gap-x-1 rounded-full p-1 px-2 ${n}`,size:"sm",variant:"outline",children:[e.jsxRuntimeExports.jsx("svg",{fill:"currentColor",width:"16",height:"16",viewBox:"0 0 0.32 0.32",xmlns:"http://www.w3.org/2000/svg",children:e.jsxRuntimeExports.jsx("path",{fillRule:"evenodd",d:"M.274.086a.02.02 0 0 1 0 .028l-.12.12a.02.02 0 0 1-.028 0l-.06-.06A.02.02 0 0 1 .094.146L.14.192.246.086a.02.02 0 0 1 .028 0Z"})}),t==="SAVING"?"Saving...":t==="SAVED"?l("Saved"):"Save"]})}),e.jsxRuntimeExports.jsx(r.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:t==="SAVING"?"Saving...":t==="SAVED"?"Saved":"Save changes"})})]})})},h=()=>{const x=r.useBuilderProp("topBarComponents.left",[]),t=r.useBuilderProp("topBarComponents.center",[]),l=r.useBuilderProp("topBarComponents.right",[]);return e.jsxRuntimeExports.jsxs("div",{className:"flex h-14 items-center justify-between px-2",children:[e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2 font-bold",children:i.Children.toArray(x.map(n=>e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(r.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(n,{})})))})}),e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:i.Children.toArray(t.map(n=>e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(r.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(n,{})})))}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxRuntimeExports.jsx(j,{}),e.jsxRuntimeExports.jsx(u.Separator,{orientation:"vertical"}),e.jsxRuntimeExports.jsx(d,{}),i.Children.toArray(l.map(n=>e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(r.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(n,{})})))]})]})};exports.default=h;

package/dist/UnsplashImages-04fffeed.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),a=require("react"),p=require("lodash"),I=require("@radix-ui/react-icons"),w=require("unsplash-js"),P=require("./useBuilderProp-5e57d0c8.cjs"),A=require("./link-43d13383.cjs"),k=require("./scroll-area-088530b9.cjs"),h=require("./popover-7cb9079b.cjs"),t=require("./select-0e32300c.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("jotai");require("react-icons-picker");require("react-dom");require("./dialog-170eaad9.cjs");require("@radix-ui/react-dialog");require("./ImagesPanel-160aa664.cjs");require("./tabs-860e37aa.cjs");require("@radix-ui/react-tabs");require("react-quill");require("react-i18next");require("@radix-ui/react-scroll-area");require("@radix-ui/react-popover");require("@radix-ui/react-select");const T="phfFCfD_A95ICxvwEYsFxsgHD-1veFwGA4Cu8qxvcec",_=w.createApi({accessKey:T}),E=async u=>new Promise((d,i)=>{_.search.getPhotos(u).then(m=>{d(m)}).catch(m=>i(m))}),z=({isModalView:u,onSelect:d})=>{const[i,m]=a.useState(""),[o,j]=a.useState([]),[g,f]=a.useState(0),[l,N]=a.useState(),[c,b]=a.useState(),[C,R]=a.useState(0),v=async s=>{let n=g+1;s&&(s.preventDefault(),n=1),f(n);const x={query:i,page:n};l&&(x.orientation=l),c&&(x.color=c),E(x).then(r=>{var q,S,y;j(n===1?((q=r==null?void 0:r.response)==null?void 0:q.results)||[]:[...o,...((S=r==null?void 0:r.response)==null?void 0:S.results)||[]]),R((y=r==null?void 0:r.response)==null?void 0:y.total_pages)}).catch(()=>{})};return a.useEffect(()=>{if(!p.isEmpty(i)){const s={query:i,page:1};l&&(s.orientation=l),c&&(s.color=c),f(1),E(s).then(n=>{var x,r;j(((x=n==null?void 0:n.response)==null?void 0:x.results)||[]),R((r=n==null?void 0:n.response)==null?void 0:r.total_pages)}).catch(()=>{})}},[l,c,i]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("form",{className:"flex items-center rounded-md border bg-gray-100 p-px",onSubmit:v,children:[e.jsxRuntimeExports.jsx(A.Input,{type:"text",name:"query",className:"input",placeholder:'Try "dog" or "apple"',value:i,onChange:s=>m(s.target.value)}),e.jsxRuntimeExports.jsxs(h.Popover,{children:[e.jsxRuntimeExports.jsx(h.PopoverTrigger,{asChild:!0,className:"h-full w-10 cursor-pointer p-2.5 hover:bg-slate-200",children:e.jsxRuntimeExports.jsx(I.MixerHorizontalIcon,{})}),e.jsxRuntimeExports.jsx(h.PopoverContent,{side:u?"bottom":"right",className:"z-[9999] flex w-max items-center justify-center",children:e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsx("div",{className:"py-1 text-sm font-medium",children:"Orientation"}),e.jsxRuntimeExports.jsxs(t.Select,{defaultValue:l,onValueChange:s=>N(s),children:[e.jsxRuntimeExports.jsx(t.SelectTrigger,{className:"h-auto w-40 p-1 px-3",children:e.jsxRuntimeExports.jsx(t.SelectValue,{placeholder:"Select"})}),e.jsxRuntimeExports.jsxs(t.SelectContent,{className:"z-[9999]",children:[e.jsxRuntimeExports.jsx(t.SelectItem,{value:"",children:"All"}),e.jsxRuntimeExports.jsx(t.SelectItem,{value:"landscape",children:"Landscape"}),e.jsxRuntimeExports.jsx(t.SelectItem,{value:"portrait",children:"Portrait"}),e.jsxRuntimeExports.jsx(t.SelectItem,{value:"squarish",children:"Square"})]})]}),e.jsxRuntimeExports.jsx("div",{className:"pb-1 pt-2 text-sm font-medium",children:"Color"}),e.jsxRuntimeExports.jsxs(t.Select,{defaultValue:c,onValueChange:s=>b(s),children:[e.jsxRuntimeExports.jsx(t.SelectTrigger,{className:"h-auto w-40 p-1 px-3",children:e.jsxRuntimeExports.jsx(t.SelectValue,{placeholder:"Select"})}),e.jsxRuntimeExports.jsxs(t.SelectContent,{className:"z-[9999]",children:[e.jsxRuntimeExports.jsx(t.SelectItem,{value:"",children:"All"}),["black_and_white","black","white","yellow","orange","red","purple","magenta","green","teal","blue"].map(s=>e.jsxRuntimeExports.jsx(t.SelectItem,{value:s,children:p.startCase(s)},s))]})]})]})})]})]}),e.jsxRuntimeExports.jsxs(k.ScrollArea,{className:`h-full ${u&&!p.isEmpty(o)?"-mx-2 flex flex-wrap px-2":"-mx-2 flex flex-col pb-8 pt-2"}`,children:[p.isEmpty(o)&&e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center justify-center py-6",children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:"No Data"}),e.jsxRuntimeExports.jsx("div",{className:"text-sm text-gray-500",children:"Enter query and press enter"})]}),u?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:o.map(s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>d(s.urls.regular),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:s.alt_description,src:s.urls.small})})},s.id))}):o.map(s=>e.jsxRuntimeExports.jsx("div",{className:"w-full px-2 py-1",children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:s.alt_description,src:s.urls.small})})},s.id)),!p.isEmpty(o)&&g<C&&e.jsxRuntimeExports.jsx(P.Button,{size:"sm",variant:"link",className:"w-full",onClick:()=>v(void 0),children:"Load More"})]})]})};exports.default=z;exports.fetchImage=E;

package/dist/UnsplashImages-315ce7a8.js

@@ -0,0 +1,160 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import { useState as c, useEffect as _ } from "react";
+import { isEmpty as h, startCase as k } from "lodash";
+import { MixerHorizontalIcon as z } from "@radix-ui/react-icons";
+import { createApi as D } from "unsplash-js";
+import { B as F } from "./useBuilderProp-81a14920.js";
+import { I as T } from "./link-8594fd8f.js";
+import { S as V } from "./scroll-area-9f64a082.js";
+import { P as B, a as H, b as K } from "./popover-f7addcf4.js";
+import { S as C, c as S, b as w, d as P, f as m } from "./select-7fddd7c3.js";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "./utils-ac68b2c8.js";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "jotai";
+import "react-icons-picker";
+import "react-dom";
+import "./dialog-3d4e82ed.js";
+import "@radix-ui/react-dialog";
+import "./ImagesPanel-815d5e6f.js";
+import "./tabs-85caa1e8.js";
+import "@radix-ui/react-tabs";
+import "react-quill";
+import "react-i18next";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-select";
+const L = "phfFCfD_A95ICxvwEYsFxsgHD-1veFwGA4Cu8qxvcec", O = D({ accessKey: L }), I = async (p) => new Promise((x, r) => {
+  O.search.getPhotos(p).then((d) => {
+    x(d);
+  }).catch((d) => r(d));
+}), ve = ({ isModalView: p, onSelect: x }) => {
+  const [r, d] = c(""), [o, f] = c([]), [u, g] = c(0), [l, A] = c(), [i, E] = c(), [q, j] = c(0), v = async (s) => {
+    let t = u + 1;
+    s && (s.preventDefault(), t = 1), g(t);
+    const n = { query: r, page: t };
+    l && (n.orientation = l), i && (n.color = i), I(n).then((a) => {
+      var N, y, b;
+      f(t === 1 ? ((N = a == null ? void 0 : a.response) == null ? void 0 : N.results) || [] : [...o, ...((y = a == null ? void 0 : a.response) == null ? void 0 : y.results) || []]), j((b = a == null ? void 0 : a.response) == null ? void 0 : b.total_pages);
+    }).catch(() => {
+    });
+  };
+  return _(() => {
+    if (!h(r)) {
+      const s = { query: r, page: 1 };
+      l && (s.orientation = l), i && (s.color = i), g(1), I(s).then((t) => {
+        var n, a;
+        f(((n = t == null ? void 0 : t.response) == null ? void 0 : n.results) || []), j((a = t == null ? void 0 : t.response) == null ? void 0 : a.total_pages);
+      }).catch(() => {
+      });
+    }
+  }, [l, i, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("form", { className: "flex items-center rounded-md border bg-gray-100 p-px", onSubmit: v, children: [
+      /* @__PURE__ */ e.jsx(
+        T,
+        {
+          type: "text",
+          name: "query",
+          className: "input",
+          placeholder: 'Try "dog" or "apple"',
+          value: r,
+          onChange: (s) => d(s.target.value)
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(B, { children: [
+        /* @__PURE__ */ e.jsx(H, { asChild: !0, className: "h-full w-10 cursor-pointer p-2.5 hover:bg-slate-200", children: /* @__PURE__ */ e.jsx(z, {}) }),
+        /* @__PURE__ */ e.jsx(
+          K,
+          {
+            side: p ? "bottom" : "right",
+            className: "z-[9999] flex w-max items-center justify-center",
+            children: /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("div", { className: "py-1 text-sm font-medium", children: "Orientation" }),
+              /* @__PURE__ */ e.jsxs(C, { defaultValue: l, onValueChange: (s) => A(s), children: [
+                /* @__PURE__ */ e.jsx(S, { className: "h-auto w-40 p-1 px-3", children: /* @__PURE__ */ e.jsx(w, { placeholder: "Select" }) }),
+                /* @__PURE__ */ e.jsxs(P, { className: "z-[9999]", children: [
+                  /* @__PURE__ */ e.jsx(m, { value: "", children: "All" }),
+                  /* @__PURE__ */ e.jsx(m, { value: "landscape", children: "Landscape" }),
+                  /* @__PURE__ */ e.jsx(m, { value: "portrait", children: "Portrait" }),
+                  /* @__PURE__ */ e.jsx(m, { value: "squarish", children: "Square" })
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsx("div", { className: "pb-1 pt-2 text-sm font-medium", children: "Color" }),
+              /* @__PURE__ */ e.jsxs(C, { defaultValue: i, onValueChange: (s) => E(s), children: [
+                /* @__PURE__ */ e.jsx(S, { className: "h-auto w-40 p-1 px-3", children: /* @__PURE__ */ e.jsx(w, { placeholder: "Select" }) }),
+                /* @__PURE__ */ e.jsxs(P, { className: "z-[9999]", children: [
+                  /* @__PURE__ */ e.jsx(m, { value: "", children: "All" }),
+                  [
+                    "black_and_white",
+                    "black",
+                    "white",
+                    "yellow",
+                    "orange",
+                    "red",
+                    "purple",
+                    "magenta",
+                    "green",
+                    "teal",
+                    "blue"
+                  ].map((s) => /* @__PURE__ */ e.jsx(m, { value: s, children: k(s) }, s))
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs(
+      V,
+      {
+        className: `h-full ${p && !h(o) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
+        children: [
+          h(o) && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "font-medium", children: "No Data" }),
+            /* @__PURE__ */ e.jsx("div", { className: "text-sm text-gray-500", children: "Enter query and press enter" })
+          ] }),
+          p ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: o.map((s) => (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: "my-1 flex",
+                onClick: () => x(s.urls.regular),
+                children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+                  "img",
+                  {
+                    className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+                    alt: s.alt_description,
+                    src: s.urls.small
+                  }
+                ) })
+              },
+              s.id
+            )
+          )) }) : o.map((s) => (
+            // TODO: Drag and Drop Image to Canvas from Here use `pic.urls.[small, regular, full]` for image quality
+            /* @__PURE__ */ e.jsx("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+              "img",
+              {
+                className: "h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+                alt: s.alt_description,
+                src: s.urls.small
+              }
+            ) }) }, s.id)
+          )),
+          !h(o) && u < q && /* @__PURE__ */ e.jsx(F, { size: "sm", variant: "link", className: "w-full", onClick: () => v(void 0), children: "Load More" })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ve as default,
+  I as fetchImage
+};

package/dist/UploadImages-43c16a2d.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),t=require("react"),a=require("lodash"),m=require("@radix-ui/react-icons"),E=require("jotai"),q=require("./scroll-area-088530b9.cjs");require("react-i18next");const b=require("./useBuilderProp-5e57d0c8.cjs");require("@radix-ui/react-scroll-area");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");const I=E.atom([]),w=({isModalView:r,onSelect:u})=>{const R=b.useBuilderProp("uploadMediaCallback",()=>""),x=b.useBuilderProp("fetchMediaCallback",()=>[]),[l,n]=E.useAtom(I),[o,p]=t.useState(!1),[j,f]=t.useState(!1),[c,d]=t.useState(),[h,v]=t.useState("");t.useEffect(()=>{(async()=>{f(!0);const s=await x();n(s||[]),f(!1)})()},[x,n]);const y=s=>{var i,g;s&&((g=(i=s==null?void 0:s.target)==null?void 0:i.files)==null?void 0:g.length)>0&&d(s.target.files[0])},N=async()=>{p(!0);try{const s=await R(c),i=await x();n(i),u(s),d(void 0)}catch(s){n([]),v((s==null?void 0:s.message)||"Something went wrong.")}p(!1)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[c?e.jsxRuntimeExports.jsxs("div",{className:"relative flex w-full flex-col items-center justify-center rounded-md border bg-slate-50 p-2 px-1",children:[e.jsxRuntimeExports.jsx("img",{src:URL.createObjectURL(c),alt:"",className:"h-auto w-full max-w-sm rounded-md"}),h&&e.jsxRuntimeExports.jsx("div",{className:"w-full pt-2 text-center text-sm text-red-500",children:h}),e.jsxRuntimeExports.jsxs("div",{className:"flex w-full items-center justify-center gap-2 pt-2",children:[e.jsxRuntimeExports.jsxs("button",{type:"button",onClick:N,disabled:o,className:"flex items-center rounded-full bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 hover:text-white",children:[o?e.jsxRuntimeExports.jsx(m.GearIcon,{className:"animate-spin"}):e.jsxRuntimeExports.jsx(m.UploadIcon,{className:"animate-bounce"}),"  ",o?"Uploading...":"Upload"]}),!o&&e.jsxRuntimeExports.jsxs("button",{type:"button",className:"flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm hover:bg-gray-200",onClick:()=>d(void 0),children:[e.jsxRuntimeExports.jsx(m.Cross1Icon,{}),"  Cancel"]})]})]}):e.jsxRuntimeExports.jsxs("label",{htmlFor:r?"upload-in-modal":"upload-in-panel",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-blue-900 bg-gray-200 py-8 hover:bg-blue-50",children:[e.jsxRuntimeExports.jsx("div",{className:"text-3xl",children:"+"}),e.jsxRuntimeExports.jsx("div",{children:"Click to choose file"})]}),e.jsxRuntimeExports.jsx("input",{type:"file",id:r?"upload-in-modal":"upload-in-panel",hidden:!0,onChange:y})]}),e.jsxRuntimeExports.jsxs(q.ScrollArea,{className:`-mx-2 flex h-full flex-col pb-8 pt-2 ${r?"px-2":""} pt-2`,children:[a.isEmpty(l)&&j&&e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center justify-center py-6",children:e.jsxRuntimeExports.jsx("div",{className:"animate-pulse font-medium",children:"Fetching..."})}),a.isEmpty(l)&&!j&&e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center justify-center py-6",children:e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:"No Images"})}),r?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:a.map(l,s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>u(s.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:s.name,src:s.url})})},s.id))}):a.map(l,s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"px-2 py-1",onClick:()=>u(s.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:s.name,src:s.url})})},s.id))]})]})};exports.default=w;

package/dist/UploadImages-f317eef0.js

@@ -0,0 +1,107 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import { useState as i, useEffect as w } from "react";
+import { isEmpty as g, map as b } from "lodash";
+import { GearIcon as C, UploadIcon as U, Cross1Icon as k } from "@radix-ui/react-icons";
+import { atom as F, useAtom as E } from "jotai";
+import { S as A } from "./scroll-area-9f64a082.js";
+import "react-i18next";
+import { u as j } from "./useBuilderProp-81a14920.js";
+import "@radix-ui/react-scroll-area";
+import "./utils-ac68b2c8.js";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+const R = F([]), W = ({ isModalView: t, onSelect: n }) => {
+  const v = j("uploadMediaCallback", () => ""), d = j("fetchMediaCallback", () => []), [l, a] = E(R), [r, u] = i(!1), [p, x] = i(!1), [c, m] = i(), [f, y] = i("");
+  w(() => {
+    (async () => {
+      x(!0);
+      const s = await d();
+      a(s || []), x(!1);
+    })();
+  }, [d, a]);
+  const N = (s) => {
+    var o, h;
+    s && ((h = (o = s == null ? void 0 : s.target) == null ? void 0 : o.files) == null ? void 0 : h.length) > 0 && m(s.target.files[0]);
+  }, I = async () => {
+    u(!0);
+    try {
+      const s = await v(c), o = await d();
+      a(o), n(s), m(void 0);
+    } catch (s) {
+      a([]), y((s == null ? void 0 : s.message) || "Something went wrong.");
+    }
+    u(!1);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    c ? /* @__PURE__ */ e.jsxs("div", { className: "relative flex w-full flex-col items-center justify-center rounded-md border bg-slate-50 p-2 px-1", children: [
+      /* @__PURE__ */ e.jsx("img", { src: URL.createObjectURL(c), alt: "", className: "h-auto w-full max-w-sm rounded-md" }),
+      f && /* @__PURE__ */ e.jsx("div", { className: "w-full pt-2 text-center text-sm text-red-500", children: f }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex w-full items-center justify-center gap-2 pt-2", children: [
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: I,
+            disabled: r,
+            className: "flex items-center rounded-full bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 hover:text-white",
+            children: [
+              r ? /* @__PURE__ */ e.jsx(C, { className: "animate-spin" }) : /* @__PURE__ */ e.jsx(U, { className: "animate-bounce" }),
+              "  ",
+              r ? "Uploading..." : "Upload"
+            ]
+          }
+        ),
+        !r && /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm hover:bg-gray-200",
+            onClick: () => m(void 0),
+            children: [
+              /* @__PURE__ */ e.jsx(k, {}),
+              "  Cancel"
+            ]
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ e.jsxs("label", { htmlFor: t ? "upload-in-modal" : "upload-in-panel", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-blue-900 bg-gray-200 py-8 hover:bg-blue-50", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "text-3xl", children: "+" }),
+        /* @__PURE__ */ e.jsx("div", { children: "Click to choose file" })
+      ] }),
+      /* @__PURE__ */ e.jsx("input", { type: "file", id: t ? "upload-in-modal" : "upload-in-panel", hidden: !0, onChange: N })
+    ] }),
+    /* @__PURE__ */ e.jsxs(A, { className: `-mx-2 flex h-full flex-col pb-8 pt-2 ${t ? "px-2" : ""} pt-2`, children: [
+      g(l) && p && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e.jsx("div", { className: "animate-pulse font-medium", children: "Fetching..." }) }),
+      g(l) && !p && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e.jsx("div", { className: "font-medium", children: "No Images" }) }),
+      t ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: b(l, (s) => (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "my-1 flex", onClick: () => n(s.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+            alt: s.name,
+            src: s.url
+          }
+        ) }) }, s.id)
+      )) }) : b(l, (s) => (
+        // TODO: Drag and Drop Image to Canvas from Here use `pic.url` for image quality
+        /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "px-2 py-1", onClick: () => n(s.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            className: "h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+            alt: s.name,
+            src: s.url
+          }
+        ) }) }, s.id)
+      ))
+    ] })
+  ] });
+};
+export {
+  W as default
+};

package/dist/_commonjsHelpers-5a53b418.cjs

@@ -0,0 +1 @@
+"use strict";function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}exports.getDefaultExportFromCjs=e;

package/dist/_commonjsHelpers-d4512b9c.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};

package/dist/accordion-0afd8143.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("./jsx-runtime-5c3ac4f7.cjs"),u=require("react"),x=require("@radix-ui/react-accordion"),p=require("@radix-ui/react-icons"),c=require("./utils-3c452dd0.cjs");function a(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const i=a(u),o=a(x),f=o.Root,d=i.forwardRef(({className:e,...n},t)=>s.jsxRuntimeExports.jsx(o.Item,{ref:t,className:c.cn("border-b",e),...n}));d.displayName="AccordionItem";const m=i.forwardRef(({className:e,children:n,...t},r)=>s.jsxRuntimeExports.jsx(o.Header,{className:"flex",children:s.jsxRuntimeExports.jsxs(o.Trigger,{ref:r,className:c.cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",e),...t,children:[n,s.jsxRuntimeExports.jsx(p.ChevronDownIcon,{className:"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"})]})}));m.displayName=o.Trigger.displayName;const l=i.forwardRef(({className:e,children:n,...t},r)=>s.jsxRuntimeExports.jsx(o.Content,{ref:r,className:c.cn("text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",e),...t,children:s.jsxRuntimeExports.jsx("div",{className:"pb-4 pt-0",children:n})}));l.displayName=o.Content.displayName;exports.Accordion=f;exports.AccordionContent=l;exports.AccordionItem=d;exports.AccordionTrigger=m;

package/dist/accordion-c0176dc5.js

@@ -0,0 +1,42 @@
+import { j as a } from "./jsx-runtime-944c88e2.js";
+import * as n from "react";
+import * as e from "@radix-ui/react-accordion";
+import { ChevronDownIcon as c } from "@radix-ui/react-icons";
+import { c as i } from "./utils-ac68b2c8.js";
+const N = e.Root, m = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a.jsx(e.Item, { ref: r, className: i("border-b", o), ...t }));
+m.displayName = "AccordionItem";
+const d = n.forwardRef(({ className: o, children: t, ...r }, s) => /* @__PURE__ */ a.jsx(e.Header, { className: "flex", children: /* @__PURE__ */ a.jsxs(
+  e.Trigger,
+  {
+    ref: s,
+    className: i(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      o
+    ),
+    ...r,
+    children: [
+      t,
+      /* @__PURE__ */ a.jsx(c, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+    ]
+  }
+) }));
+d.displayName = e.Trigger.displayName;
+const l = n.forwardRef(({ className: o, children: t, ...r }, s) => /* @__PURE__ */ a.jsx(
+  e.Content,
+  {
+    ref: s,
+    className: i(
+      "text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      o
+    ),
+    ...r,
+    children: /* @__PURE__ */ a.jsx("div", { className: "pb-4 pt-0", children: t })
+  }
+));
+l.displayName = e.Content.displayName;
+export {
+  N as A,
+  m as a,
+  d as b,
+  l as c
+};