@chaibuilder/sdk 1.3.0-beta.9 → 1.3.1

package/dist/CodeEditor-BI8eEY6g.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@monaco-editor/react"),j=require("./context-menu-CYk-Ms8j.cjs"),g=require("react-i18next"),l=require("react"),c=require("./index-CSuRg8Z3.cjs"),v=require("@radix-ui/react-icons"),y=require("@react-hookz/web"),d=o=>{const n=document.createElement("div");return n.innerHTML=o,n.innerHTML};function T(){const{t:o}=g.useTranslation(),[n,u]=l.useState(!1),[r,m]=l.useState(""),[t,i]=c.useCodeEditor(),[a]=c.useSelectedBlockIds(),x=c.useUpdateBlocksProps(),f=c.useUpdateBlocksPropsRealtime(),h=y.useThrottledCallback(s=>{const k=d(s);f([t.blockId],{[t.blockProp]:k})},[],300),b=l.useCallback(()=>{if(n){const s=d(r);x([t.blockId],{[t.blockProp]:s})}},[n,r]);l.useEffect(()=>{a.includes(t==null?void 0:t.blockId)||(b(),i(null))},[a]);const p=()=>{i(null)};return e.jsxs("div",{className:"h-full rounded-t-lg border-t-4 border-black bg-black text-white",children:[e.jsx("button",{onClick:p,className:"fixed inset-0 z-[100000] cursor-default bg-gray-400/20"}),e.jsxs("div",{className:"relative z-[100001] h-full w-full flex-col gap-y-1",children:[e.jsxs("div",{className:"-mt-1 flex items-center justify-between px-2 py-2",children:[e.jsxs("h3",{className:"space-x-3 text-sm font-semibold",children:[e.jsx("span",{children:o("HTML Code Editor |")}),e.jsx("span",{className:"text-xs text-gray-400",children:o("Scripts will be only executed in preview and live mode.")})]}),e.jsx("div",{className:"flex gap-x-2",children:e.jsx(j.Button,{onClick:()=>i(null),size:"sm",variant:"destructive",className:"h-6 w-fit",children:e.jsx(v.Cross2Icon,{})})})]}),e.jsx(C,{onMount:s=>{s.setValue(t.initialCode)},onChange:s=>{u(!0),m(s),h(s)},height:"100%",defaultLanguage:"html",theme:"vs-dark",defaultValue:"",options:{minimap:{enabled:!1}}})]})]})}exports.default=T;

package/dist/CodeEditor-BrJVMJ2i.js

@@ -0,0 +1,75 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import C from "@monaco-editor/react";
+import { B as x } from "./context-menu-BtcwqA6V.js";
+import { useTranslation as v } from "react-i18next";
+import { useState as r, useCallback as g, useEffect as y } from "react";
+import { u as N, a as T, b as w, c as B } from "./index-CtaCbdYK.js";
+import { Cross2Icon as E } from "@radix-ui/react-icons";
+import { useThrottledCallback as I } from "@react-hookz/web";
+const d = (l) => {
+  const o = document.createElement("div");
+  return o.innerHTML = l, o.innerHTML;
+};
+function U() {
+  const { t: l } = v(), [o, m] = r(!1), [i, u] = r(""), [e, n] = N(), [c] = T(), f = w(), p = B(), h = I(
+    (t) => {
+      const k = d(t);
+      p([e.blockId], { [e.blockProp]: k });
+    },
+    [],
+    300
+  ), b = g(() => {
+    if (o) {
+      const t = d(i);
+      f([e.blockId], { [e.blockProp]: t });
+    }
+  }, [o, i]);
+  return y(() => {
+    c.includes(e == null ? void 0 : e.blockId) || (b(), n(null));
+  }, [c]), /* @__PURE__ */ a("div", { className: "h-full rounded-t-lg border-t-4 border-black bg-black text-white", children: [
+    /* @__PURE__ */ s("button", { onClick: () => {
+      n(null);
+    }, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ a("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ a("div", { className: "-mt-1 flex items-center justify-between px-2 py-2", children: [
+        /* @__PURE__ */ a("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ s("span", { children: l("HTML Code Editor |") }),
+          /* @__PURE__ */ s("span", { className: "text-xs text-gray-400", children: l("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "flex gap-x-2", children: /* @__PURE__ */ s(
+          x,
+          {
+            onClick: () => n(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ s(E, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ s(
+        C,
+        {
+          onMount: (t) => {
+            t.setValue(e.initialCode);
+          },
+          onChange: (t) => {
+            m(!0), u(t), h(t);
+          },
+          height: "100%",
+          defaultLanguage: "html",
+          theme: "vs-dark",
+          defaultValue: "",
+          options: {
+            minimap: {
+              enabled: !1
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  U as default
+};

package/dist/Topbar-CCRb_HhA.js

@@ -0,0 +1,113 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import m, { useMemo as S, Suspense as d } from "react";
+import { B as x, a6 as y, a7 as k, a8 as A, a9 as D, aq as u, al as f } from "./context-menu-BtcwqA6V.js";
+import { e as P, F as B, d as o, f as L, g as M, L as h, h as v, i as E } from "./index-CtaCbdYK.js";
+import { useTranslation as b } from "react-i18next";
+import { c as w } from "./iconBase-DHfFLkem.js";
+import { EyeOpenIcon as I, ChevronDownIcon as G } from "@radix-ui/react-icons";
+import { forEach as V, uniq as F, get as p, isEmpty as N, map as j } from "lodash-es";
+import "@chaibuilder/runtime";
+const z = () => {
+  const { savePage: s, saveState: a } = P(), { t: r } = b(), l = /* @__PURE__ */ n(
+    x,
+    {
+      disabled: a === "SAVING",
+      onClick: (t) => {
+        t.preventDefault(), s();
+      },
+      className: w(
+        "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+        // UNSAVED sate
+        "bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",
+        {
+          "animate-pulse bg-gray-300 text-gray-900": a === "SAVING",
+          "bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white": a === "SAVED"
+        }
+      ),
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ e(B, { className: "text-sm text-white" }),
+        /* @__PURE__ */ e("span", { className: "text-sm", children: r(a === "SAVING" ? "Saving" : a === "SAVED" ? "Saved" : "Unsaved") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e("div", { className: "flex items-center", children: l });
+}, T = function() {
+  const a = o("previewComponent"), [, r] = L(), { t: l } = b();
+  return a ? /* @__PURE__ */ n(
+    x,
+    {
+      onClick: (t) => {
+        t.preventDefault(), r(!0);
+      },
+      className: "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ e(I, { className: "text-xs" }),
+        /* @__PURE__ */ e("span", { className: "text-sm", children: l("Preview") })
+      ]
+    }
+  ) : null;
+}, q = () => {
+  const { fallbackLang: s, languages: a, selectedLang: r, setSelectedLang: l } = M(), t = (r == null ? void 0 : r.length) > 0 ? r : s, C = S(() => {
+    const i = [];
+    return V(F([s, ...a]), (c) => {
+      const g = p(h, c);
+      g && i.push({ key: c, value: g, default: c === s });
+    }), i;
+  }, [s, a]);
+  return N(a) && t === "en" ? null : N(a) && t !== "en" ? /* @__PURE__ */ n("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
+    /* @__PURE__ */ e(v, { className: "h-4 w-4" }),
+    p(h, t)
+  ] }) : /* @__PURE__ */ n(y, { children: [
+    /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ n(x, { size: "sm", variant: "outline", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ e(v, { className: "h-4 w-4" }),
+      /* @__PURE__ */ n("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ n("div", { children: [
+          " ",
+          p(h, t)
+        ] }),
+        /* @__PURE__ */ e(G, { className: "h-4 w-4" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(A, { className: "border-border", children: j(C, (i) => /* @__PURE__ */ n(
+      D,
+      {
+        className: w(
+          "flex cursor-pointer items-center text-sm",
+          i.key === t && "!bg-blue-500 text-white hover:!text-white"
+        ),
+        onClick: () => l(i.key),
+        children: [
+          /* @__PURE__ */ e("div", { children: i.value }),
+          i.key === s ? /* @__PURE__ */ e(E, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
+        ]
+      }
+    )) })
+  ] });
+}, X = () => {
+  const s = o("topBarComponents.left", []), a = o("topBarComponents.center", []), r = o("topBarComponents.right", []), l = o("editable", !0);
+  return /* @__PURE__ */ n("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e("div", { className: "flex items-center space-x-2 font-bold", children: m.Children.toArray(
+      s.map((t) => /* @__PURE__ */ e(d, { fallback: /* @__PURE__ */ e(u, { className: "h-10" }), children: /* @__PURE__ */ e(t, {}) }))
+    ) }) }),
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: m.Children.toArray(
+      a.map((t) => /* @__PURE__ */ e(d, { fallback: /* @__PURE__ */ e(u, { className: "h-10" }), children: /* @__PURE__ */ e(t, {}) }))
+    ) }),
+    /* @__PURE__ */ n("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ e(q, {}),
+      /* @__PURE__ */ e(f, { orientation: "vertical" }),
+      /* @__PURE__ */ e(T, {}),
+      /* @__PURE__ */ e(f, { orientation: "vertical" }),
+      l ? /* @__PURE__ */ e(z, {}) : null,
+      m.Children.toArray(
+        r.map((t) => /* @__PURE__ */ e(d, { fallback: /* @__PURE__ */ e(u, { className: "h-10" }), children: /* @__PURE__ */ e(t, {}) }))
+      )
+    ] })
+  ] });
+};
+export {
+  X as default
+};

package/dist/Topbar-DQs0MY-0.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),a=require("./context-menu-CYk-Ms8j.cjs"),s=require("./index-CSuRg8Z3.cjs"),m=require("react-i18next"),h=require("./iconBase-Cn2BsTrq.cjs"),p=require("@radix-ui/react-icons"),c=require("lodash-es");require("@chaibuilder/runtime");const j=()=>{const{savePage:l,saveState:n}=s.useSavePage(),{t:r}=m.useTranslation(),i=e.jsxs(a.Button,{disabled:n==="SAVING",onClick:t=>{t.preventDefault(),l()},className:h.cn("flex h-auto w-fit items-center gap-x-2 p-1 px-2","bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",{"animate-pulse bg-gray-300 text-gray-900":n==="SAVING","bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white":n==="SAVED"}),size:"sm",variant:"outline",children:[e.jsx(s.FaCheck,{className:"text-sm text-white"}),e.jsx("span",{className:"text-sm",children:r(n==="SAVING"?"Saving":n==="SAVED"?"Saved":"Unsaved")})]});return e.jsx("div",{className:"flex items-center",children:i})},v=function(){const n=s.useBuilderProp("previewComponent"),[,r]=s.usePreviewMode(),{t:i}=m.useTranslation();return n?e.jsxs(a.Button,{onClick:t=>{t.preventDefault(),r(!0)},className:"flex h-auto w-fit items-center gap-x-2 p-1 px-2",size:"sm",variant:"outline",children:[e.jsx(p.EyeOpenIcon,{className:"text-xs"}),e.jsx("span",{className:"text-sm",children:i("Preview")})]}):null},f=()=>{const{fallbackLang:l,languages:n,selectedLang:r,setSelectedLang:i}=s.useLanguages(),t=(r==null?void 0:r.length)>0?r:l,g=x.useMemo(()=>{const o=[];return c.forEach(c.uniq([l,...n]),u=>{const d=c.get(s.LANGUAGES,u);d&&o.push({key:u,value:d,default:u===l})}),o},[l,n]);return c.isEmpty(n)&&t==="en"?null:c.isEmpty(n)&&t!=="en"?e.jsxs("div",{className:"flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600",children:[e.jsx(s.FaLanguage,{className:"h-4 w-4"}),c.get(s.LANGUAGES,t)]}):e.jsxs(a.DropdownMenu,{children:[e.jsx(a.DropdownMenuTrigger,{asChild:!0,children:e.jsxs(a.Button,{size:"sm",variant:"outline",className:"flex items-center gap-x-1 text-blue-500 hover:text-blue-600",children:[e.jsx(s.FaLanguage,{className:"h-4 w-4"}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("div",{children:[" ",c.get(s.LANGUAGES,t)]}),e.jsx(p.ChevronDownIcon,{className:"h-4 w-4"})]})]})}),e.jsx(a.DropdownMenuContent,{className:"border-border",children:c.map(g,o=>e.jsxs(a.DropdownMenuItem,{className:h.cn("flex cursor-pointer items-center text-sm",o.key===t&&"!bg-blue-500 text-white hover:!text-white"),onClick:()=>i(o.key),children:[e.jsx("div",{children:o.value}),o.key===l?e.jsx(s.FaStar,{className:"ml-2 h-4 w-4 text-yellow-400"}):null]}))})]})},N=()=>{const l=s.useBuilderProp("topBarComponents.left",[]),n=s.useBuilderProp("topBarComponents.center",[]),r=s.useBuilderProp("topBarComponents.right",[]),i=s.useBuilderProp("editable",!0);return e.jsxs("div",{className:"flex h-14 items-center justify-between px-2",children:[e.jsx("div",{className:"flex items-center space-x-2",children:e.jsx("div",{className:"flex items-center space-x-2 font-bold",children:x.Children.toArray(l.map(t=>e.jsx(x.Suspense,{fallback:e.jsx(a.Skeleton,{className:"h-10"}),children:e.jsx(t,{})})))})}),e.jsx("div",{className:"flex items-center space-x-2",children:x.Children.toArray(n.map(t=>e.jsx(x.Suspense,{fallback:e.jsx(a.Skeleton,{className:"h-10"}),children:e.jsx(t,{})})))}),e.jsxs("div",{className:"flex items-center space-x-1",children:[e.jsx(f,{}),e.jsx(a.Separator,{orientation:"vertical"}),e.jsx(v,{}),e.jsx(a.Separator,{orientation:"vertical"}),i?e.jsx(j,{}):null,x.Children.toArray(r.map(t=>e.jsx(x.Suspense,{fallback:e.jsx(a.Skeleton,{className:"h-10"}),children:e.jsx(t,{})})))]})]})};exports.default=N;

package/dist/UnsplashImages-BIlJnzbQ.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),h=require("lodash-es"),_=require("unsplash-js"),v=require("./context-menu-CYk-Ms8j.cjs"),T=require("react-i18next"),b=require("./index-CSuRg8Z3.cjs"),B=require("@react-hookz/web"),L=require("lucide-react"),y=async(x,g)=>new Promise((n,l)=>{_.createApi({accessKey:g}).search.getPhotos(x).then(o=>{n(o)}).catch(o=>l(o))}),D=({isModalView:x,onSelect:g})=>{const n=b.useBuilderProp("unsplashAccessKey",""),[l,f]=r.useState([]),[o,j]=r.useState(0),[c,C]=r.useState(),[i,P]=r.useState(),[E,N]=r.useState(0),[p,I]=B.useDebouncedState("",1e3),[m,d]=r.useState(!1),{t:q}=T.useTranslation(),A=async a=>{if(h.isEmpty(p))return;let t=o+1;d(!0),j(t);const u={query:p,page:t};c&&(u.orientation=c),i&&(u.color=i),y(u,n).then(s=>{var S,w,k;f(t===1?((S=s==null?void 0:s.response)==null?void 0:S.results)||[]:[...l,...((w=s==null?void 0:s.response)==null?void 0:w.results)||[]]),N((k=s==null?void 0:s.response)==null?void 0:k.total_pages),d(!1)}).catch(()=>{d(!1)})};return r.useEffect(()=>{if(!h.isEmpty(p)&&n){d(!0);const a={query:p,page:1};c&&(a.orientation=c),i&&(a.color=i),j(1),y(a,n).then(t=>{var u,s;f(((u=t==null?void 0:t.response)==null?void 0:u.results)||[]),N((s=t==null?void 0:t.response)==null?void 0:s.total_pages),d(!1)}).catch(()=>{d(!1)})}},[c,i,p,n]),h.isEmpty(n)?e.jsx("div",{className:"flex h-full flex-col items-center justify-center",children:e.jsxs("p",{className:"max-w-3xl text-center text-gray-500",children:["To enable Unsplash, kindly provide your",e.jsx("a",{href:"https://unsplash.com/documentation#public-authentication",className:"px-1 underline hover:text-blue-400",target:"_blank",rel:"noopener noreferrer",children:"Unsplash Access Key"})]})}):e.jsxs(e.Fragment,{children:[e.jsxs("form",{className:"flex items-center gap-x-2 rounded-md border border-border bg-background p-px",children:[e.jsx(v.Input,{type:"text",name:"query",className:"text-foreground",placeholder:'Try "dog" or "apple"',onChange:a=>I(a.target.value)}),e.jsx("div",{children:e.jsx(b.ChaiSelect,{className:"w-40",placeholder:q("Orientation"),options:[{value:"",label:"All"},{value:"landscape",label:"Landscape"},{value:"portrait",label:"Portrait"},{value:"squarish",label:"Square"}],defaultValue:c,onValueChange:a=>C(a)})}),e.jsx("div",{children:e.jsx(b.ChaiSelect,{placeholder:q("Color"),options:[{value:"",label:"All"},{value:"black_and_white",label:"Black and White"},{value:"black",label:"Black"},{value:"white",label:"White"},{value:"night",label:"Night"},{value:"warm",label:"Warm"},{value:"cool",label:"Cool"},{value:"sepia",label:"Sepia"}],defaultValue:i,onValueChange:a=>P(a)})})]}),e.jsxs(v.ScrollArea,{className:`h-full ${x&&!h.isEmpty(l)?"-mx-2 flex flex-wrap px-2":"-mx-2 flex flex-col pb-8 pt-2"}`,children:[h.isEmpty(l)&&!m&&e.jsxs("div",{className:"flex flex-col items-center justify-center py-6",children:[e.jsx("div",{className:"font-medium",children:"No Data"}),e.jsx("div",{className:"text-sm text-gray-500",children:"Enter query and press enter"})]}),x?e.jsx("div",{className:"h-full columns-5 py-2",children:l.map(a=>e.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>g(a.urls.regular),children:e.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:a.alt_description,src:a.urls.small})})},a.id))}):l.map(a=>e.jsx("div",{className:"w-full px-2 py-1",children:e.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsx("img",{className:"h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:a.alt_description,src:a.urls.small})})},a.id)),m&&e.jsxs("div",{className:"flex items-center justify-center py-8",children:[e.jsx(L.Loader,{className:"h-6 w-6 animate-spin"}),"  Loading..."]}),!h.isEmpty(l)&&o<E&&!m&&e.jsx(v.Button,{size:"sm",variant:"link",className:"w-full",onClick:()=>A(),disabled:m,children:m?"":"Load More"})]})]})};exports.default=D;exports.fetchImage=y;

package/dist/UnsplashImages-BSurydyD.js

@@ -0,0 +1,189 @@
+import { jsx as a, jsxs as m, Fragment as B } from "react/jsx-runtime";
+import { useState as p, useEffect as L } from "react";
+import { isEmpty as h } from "lodash-es";
+import { createApi as T } from "unsplash-js";
+import { I as D, S as E, B as F } from "./context-menu-BtcwqA6V.js";
+import { useTranslation as K } from "react-i18next";
+import { d as U, C as P } from "./index-CtaCbdYK.js";
+import { useDebouncedState as V } from "@react-hookz/web";
+import { Loader as W } from "lucide-react";
+const A = async (g, b) => new Promise((t, o) => {
+  T({ accessKey: b }).search.getPhotos(g).then((n) => {
+    t(n);
+  }).catch((n) => o(n));
+}), X = ({ isModalView: g, onSelect: b }) => {
+  const t = U("unsplashAccessKey", ""), [o, v] = p([]), [n, x] = p(0), [r, I] = p(), [i, S] = p(), [_, y] = p(0), [u, q] = V("", 1e3), [f, c] = p(!1), { t: N } = K(), j = async (e) => {
+    if (h(u)) return;
+    let s = n + 1;
+    c(!0), x(s);
+    const d = { query: u, page: s };
+    r && (d.orientation = r), i && (d.color = i), A(d, t).then((l) => {
+      var w, k, C;
+      v(s === 1 ? ((w = l == null ? void 0 : l.response) == null ? void 0 : w.results) || [] : [...o, ...((k = l == null ? void 0 : l.response) == null ? void 0 : k.results) || []]), y((C = l == null ? void 0 : l.response) == null ? void 0 : C.total_pages), c(!1);
+    }).catch(() => {
+      c(!1);
+    });
+  };
+  return L(() => {
+    if (!h(u) && t) {
+      c(!0);
+      const e = { query: u, page: 1 };
+      r && (e.orientation = r), i && (e.color = i), x(1), A(e, t).then((s) => {
+        var d, l;
+        v(((d = s == null ? void 0 : s.response) == null ? void 0 : d.results) || []), y((l = s == null ? void 0 : s.response) == null ? void 0 : l.total_pages), c(!1);
+      }).catch(() => {
+        c(!1);
+      });
+    }
+  }, [r, i, u, t]), h(t) ? /* @__PURE__ */ a("div", { className: "flex h-full flex-col items-center justify-center", children: /* @__PURE__ */ m("p", { className: "max-w-3xl text-center text-gray-500", children: [
+    "To enable Unsplash, kindly provide your",
+    /* @__PURE__ */ a(
+      "a",
+      {
+        href: "https://unsplash.com/documentation#public-authentication",
+        className: "px-1 underline hover:text-blue-400",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "Unsplash Access Key"
+      }
+    )
+  ] }) }) : /* @__PURE__ */ m(B, { children: [
+    /* @__PURE__ */ m("form", { className: "flex items-center gap-x-2 rounded-md border border-border bg-background p-px", children: [
+      /* @__PURE__ */ a(
+        D,
+        {
+          type: "text",
+          name: "query",
+          className: "text-foreground",
+          placeholder: 'Try "dog" or "apple"',
+          onChange: (e) => q(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+        P,
+        {
+          className: "w-40",
+          placeholder: N("Orientation"),
+          options: [
+            {
+              value: "",
+              label: "All"
+            },
+            {
+              value: "landscape",
+              label: "Landscape"
+            },
+            {
+              value: "portrait",
+              label: "Portrait"
+            },
+            {
+              value: "squarish",
+              label: "Square"
+            }
+          ],
+          defaultValue: r,
+          onValueChange: (e) => I(e)
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+        P,
+        {
+          placeholder: N("Color"),
+          options: [
+            {
+              value: "",
+              label: "All"
+            },
+            {
+              value: "black_and_white",
+              label: "Black and White"
+            },
+            {
+              value: "black",
+              label: "Black"
+            },
+            {
+              value: "white",
+              label: "White"
+            },
+            {
+              value: "night",
+              label: "Night"
+            },
+            {
+              value: "warm",
+              label: "Warm"
+            },
+            {
+              value: "cool",
+              label: "Cool"
+            },
+            {
+              value: "sepia",
+              label: "Sepia"
+            }
+          ],
+          defaultValue: i,
+          onValueChange: (e) => S(e)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ m(
+      E,
+      {
+        className: `h-full ${g && !h(o) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
+        children: [
+          h(o) && !f && /* @__PURE__ */ m("div", { className: "flex flex-col items-center justify-center py-6", children: [
+            /* @__PURE__ */ a("div", { className: "font-medium", children: "No Data" }),
+            /* @__PURE__ */ a("div", { className: "text-sm text-gray-500", children: "Enter query and press enter" })
+          ] }),
+          g ? /* @__PURE__ */ a("div", { className: "h-full columns-5 py-2", children: o.map((e) => /* @__PURE__ */ a(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              className: "my-1 flex",
+              onClick: () => b(e.urls.regular),
+              children: /* @__PURE__ */ a("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ a(
+                "img",
+                {
+                  className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+                  alt: e.alt_description,
+                  src: e.urls.small
+                }
+              ) })
+            },
+            e.id
+          )) }) : o.map((e) => /* @__PURE__ */ a("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ a("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ a(
+            "img",
+            {
+              className: "h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+              alt: e.alt_description,
+              src: e.urls.small
+            }
+          ) }) }, e.id)),
+          f && /* @__PURE__ */ m("div", { className: "flex items-center justify-center py-8", children: [
+            /* @__PURE__ */ a(W, { className: "h-6 w-6 animate-spin" }),
+            "  Loading..."
+          ] }),
+          !h(o) && n < _ && !f && /* @__PURE__ */ a(
+            F,
+            {
+              size: "sm",
+              variant: "link",
+              className: "w-full",
+              onClick: () => j(),
+              disabled: f,
+              children: f ? "" : "Load More"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  X as default,
+  A as fetchImage
+};

package/dist/UploadImages-DEG1VGlW.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),i=require("lodash-es"),N=require("jotai"),S=require("./context-menu-CYk-Ms8j.cjs"),q=require("react-i18next"),b=require("./index-CSuRg8Z3.cjs"),y=require("lucide-react"),F=N.atom([]),U=({isModalView:r,onSelect:c})=>{const{t}=q.useTranslation(),x=b.useBuilderProp("uploadMediaCallback"),d=b.useBuilderProp("fetchMediaCallback"),[n,m]=N.useAtom(F),[v,h]=l.useState(!1),[f,p]=l.useState(!1),[,I]=l.useState(),[g,u]=l.useState("");l.useEffect(()=>{(async()=>{if(!d)return;p(!0);const s=await d();m(s||[]),p(!1)})()},[]);const w=s=>{var a,o;if(u(""),s&&((o=(a=s==null?void 0:s.target)==null?void 0:a.files)==null?void 0:o.length)>0){const j=s.target.files[0];j.type.startsWith("image")?k(j):u(t("Please select an image"))}},k=async s=>{if(x){h(!0);try{const{url:a}=await x(s);c(a),I(void 0);const o=await d();m(o)}catch(a){m([]),u((a==null?void 0:a.message)||"Something went wrong.")}h(!1)}};return e.jsxs("div",{children:[e.jsxs("label",{htmlFor:r?"upload-in-modal":"upload-in-panel",children:[e.jsx("div",{className:"flex flex-col items-center rounded-lg",children:e.jsxs("label",{htmlFor:"image-upload",className:"flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",children:[e.jsxs("div",{className:"flex flex-col items-center justify-center pb-6 pt-5",children:[e.jsx(y.Upload,{className:"mb-3 h-10 w-10 text-gray-400"}),e.jsx("p",{className:"mb-2 text-sm text-gray-500 dark:text-gray-400",children:e.jsx("span",{className:"font-semibold",children:t("Click to upload")})}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:t("SVG, PNG, JPG or GIF (Max. 2mb)")})]}),v?e.jsxs("div",{className:"flex h-full w-full items-center justify-center",children:[e.jsx(y.Loader,{className:"h-6 w-6 animate-spin"}),e.jsx("span",{className:"ml-2 text-sm text-gray-500",children:t("Uploading...")})]}):null,g&&e.jsx("p",{className:"pb-2 text-xs text-red-500",children:g||t("Something went wrong")})]})}),e.jsx("input",{type:"file",id:"image-upload",accept:"image/*",hidden:!0,onChange:w})]}),e.jsxs(S.ScrollArea,{className:`-mx-2 flex h-full flex-col pb-8 pt-2 ${r?"px-2":""} pt-2`,children:[i.isEmpty(n)&&f&&e.jsx("div",{className:"flex flex-col items-center justify-center py-6",children:e.jsx("div",{className:"animate-pulse font-medium",children:t("Fetching...")})}),i.isEmpty(n)&&!f&&e.jsxs("div",{className:"flex h-full flex-col items-center justify-center text-center",children:[e.jsx("div",{className:"mb-4 h-12 rounded-full p-6"}),e.jsx("h3",{className:"mb-2 text-sm font-semibold",children:t("No images found")}),e.jsx("p",{className:"mb-4 max-w-sm text-muted-foreground",children:t("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.")})]}),r?e.jsx("div",{className:"h-full columns-5 py-2",children:i.map(n,s=>e.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>c(s.url),children:e.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children: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.thumbUrl})})},s.id))}):i.map(n,s=>e.jsx("div",{role:"button",tabIndex:0,className:"px-2 py-1",onClick:()=>c(s.url),children:e.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children: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))]})]})};exports.default=U;

package/dist/UploadImages-DL1PBDM7.js

@@ -0,0 +1,101 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as i, useEffect as F } from "react";
+import { isEmpty as N, map as y } from "lodash-es";
+import { atom as U, useAtom as C } from "jotai";
+import { S } from "./context-menu-BtcwqA6V.js";
+import { useTranslation as G } from "react-i18next";
+import { d as v } from "./index-CtaCbdYK.js";
+import { Upload as P, Loader as A } from "lucide-react";
+const E = U([]), z = ({ isModalView: r, onSelect: d }) => {
+  const { t: a } = G(), f = v("uploadMediaCallback"), c = v("fetchMediaCallback"), [o, m] = C(E), [w, p] = i(!1), [h, g] = i(!1), [, I] = i(), [x, u] = i("");
+  F(() => {
+    (async () => {
+      if (!c) return;
+      g(!0);
+      const t = await c();
+      m(t || []), g(!1);
+    })();
+  }, []);
+  const k = (t) => {
+    var l, n;
+    if (u(""), t && ((n = (l = t == null ? void 0 : t.target) == null ? void 0 : l.files) == null ? void 0 : n.length) > 0) {
+      const b = t.target.files[0];
+      b.type.startsWith("image") ? j(b) : u(a("Please select an image"));
+    }
+  }, j = async (t) => {
+    if (f) {
+      p(!0);
+      try {
+        const { url: l } = await f(t);
+        d(l), I(void 0);
+        const n = await c();
+        m(n);
+      } catch (l) {
+        m([]), u((l == null ? void 0 : l.message) || "Something went wrong.");
+      }
+      p(!1);
+    }
+  };
+  return /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ s("label", { htmlFor: r ? "upload-in-modal" : "upload-in-panel", children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col items-center rounded-lg", children: /* @__PURE__ */ s(
+        "label",
+        {
+          htmlFor: "image-upload",
+          className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center pb-6 pt-5", children: [
+              /* @__PURE__ */ e(P, { className: "mb-3 h-10 w-10 text-gray-400" }),
+              /* @__PURE__ */ e("p", { className: "mb-2 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ e("span", { className: "font-semibold", children: a("Click to upload") }) }),
+              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: a("SVG, PNG, JPG or GIF (Max. 2mb)") })
+            ] }),
+            w ? /* @__PURE__ */ s("div", { className: "flex h-full w-full items-center justify-center", children: [
+              /* @__PURE__ */ e(A, { className: "h-6 w-6 animate-spin" }),
+              /* @__PURE__ */ e("span", { className: "ml-2 text-sm text-gray-500", children: a("Uploading...") })
+            ] }) : null,
+            x && /* @__PURE__ */ e("p", { className: "pb-2 text-xs text-red-500", children: x || a("Something went wrong") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "file",
+          id: "image-upload",
+          accept: "image/*",
+          hidden: !0,
+          onChange: k
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s(S, { className: `-mx-2 flex h-full flex-col pb-8 pt-2 ${r ? "px-2" : ""} pt-2`, children: [
+      N(o) && h && /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e("div", { className: "animate-pulse font-medium", children: a("Fetching...") }) }),
+      N(o) && !h && /* @__PURE__ */ s("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+        /* @__PURE__ */ e("div", { className: "mb-4 h-12 rounded-full p-6" }),
+        /* @__PURE__ */ e("h3", { className: "mb-2 text-sm font-semibold", children: a("No images found") }),
+        /* @__PURE__ */ e("p", { className: "mb-4 max-w-sm text-muted-foreground", children: a("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.") })
+      ] }),
+      r ? /* @__PURE__ */ e("div", { className: "h-full columns-5 py-2", children: y(o, (t) => /* @__PURE__ */ e("div", { role: "button", tabIndex: 0, className: "my-1 flex", onClick: () => d(t.url), children: /* @__PURE__ */ e("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e(
+        "img",
+        {
+          className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+          alt: t.name,
+          src: t.thumbUrl
+        }
+      ) }) }, t.id)) }) : y(o, (t) => (
+        // TODO: Drag and Drop Image to Canvas from Here use `pic.url` for image quality
+        /* @__PURE__ */ e("div", { role: "button", tabIndex: 0, className: "px-2 py-1", onClick: () => d(t.url), children: /* @__PURE__ */ e("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e(
+          "img",
+          {
+            className: "h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+            alt: t.name,
+            src: t.url
+          }
+        ) }) }, t.id)
+      ))
+    ] })
+  ] });
+};
+export {
+  z as default
+};