@chaibuilder/sdk 3.2.8 → 4.0.0-beta.2

package/dist/web-blocks.js

@@ -1,10 +1,11 @@
-import { registerChaiBlockSchema as p, StylesProp as u, registerChaiBlock as d, getRegisteredChaiBlock as U, stylesProp as L, closestBlockProp as Z } from "@chaibuilder/runtime";
+import { isEmpty as w, get as k, map as R, isNull as U, omit as M, pick as H } from "lodash-es";
 import { jsx as i, jsxs as h, Fragment as N } from "react/jsx-runtime";
+import { r as p, S as u, s as L } from "./index-Dxfyt4d4.js";
 import { c as _, g as I } from "./common-functions-D2lMFR6K.js";
 import * as b from "react";
 import { createElement as x } from "react";
-import { ButtonIcon as M, CodeIcon as H, FrameIcon as $, SketchLogoIcon as q, LayoutIcon as G, RowsIcon as j, DividerHorizontalIcon as W, CheckboxIcon as O, FileTextIcon as Y, InputIcon as D, LetterCaseToggleIcon as Q, RadiobuttonIcon as J, DropdownMenuIcon as X, HeadingIcon as K, TableIcon as ee, BorderTopIcon as te, BorderAllIcon as oe, ViewHorizontalIcon as le, DragHandleHorizontalIcon as re, ImageIcon as ne, Link1Icon as ie, ColumnsIcon as ae, TextIcon as se, CursorTextIcon as ce, SpaceBetweenVerticallyIcon as de, VideoIcon as pe, ChevronLeftIcon as ue, ChevronRightIcon as me, LoopIcon as V } from "@radix-ui/react-icons";
-import { isEmpty as w, get as k, map as R, isNull as ye, omit as z, pick as F } from "lodash-es";
+import { ButtonIcon as $, CodeIcon as j, FrameIcon as D, SketchLogoIcon as Z, RowsIcon as V, LayoutIcon as q, DividerHorizontalIcon as G, CheckboxIcon as W, FileTextIcon as O, InputIcon as z, LetterCaseToggleIcon as Y, RadiobuttonIcon as Q, DropdownMenuIcon as J, HeadingIcon as X, TableIcon as K, BorderTopIcon as ee, BorderAllIcon as te, ViewHorizontalIcon as oe, DragHandleHorizontalIcon as le, ImageIcon as re, Link1Icon as ne, ColumnsIcon as ie, TextIcon as ae, CursorTextIcon as se, SpaceBetweenVerticallyIcon as ce, VideoIcon as de, ChevronLeftIcon as pe, ChevronRightIcon as ue, LoopIcon as F } from "@radix-ui/react-icons";
+import { r as d, e as me, c as ye } from "./core-yvI6kCyw.js";
 const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div", { className: _("pointer-events-none flex h-20 flex-col items-center justify-center p-2", e), children: /* @__PURE__ */ i("div", { className: "h-full w-full rounded bg-gray-200 p-2 dark:bg-gray-800", children: /* @__PURE__ */ i("div", { className: "flex h-full w-full items-center justify-center outline-dashed outline-1 -outline-offset-1 outline-gray-400 duration-300 dark:outline-gray-700" }) }) }) : null, ge = (e) => {
   const { blockProps: o, inBuilder: t, backgroundImage: l, children: r, tag: n = "div", styles: a } = e;
   let s = r;
@@ -80,7 +81,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a button element in HTML",
   label: "Button",
   category: "core",
-  icon: M,
+  icon: $,
   group: "basic",
   ...p({
     properties: {
@@ -149,7 +150,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a div or section elements in HTML",
   label: "Custom HTML",
   category: "core",
-  icon: H,
+  icon: j,
   group: "advanced",
   ...p({
     properties: {
@@ -170,7 +171,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a script element in HTML",
   label: "Custom Script",
   category: "core",
-  icon: H,
+  icon: j,
   hidden: !0,
   group: "advanced",
   ...p({
@@ -204,7 +205,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "GlobalBlock",
   description: "A global block component",
   label: "Global Block",
-  icon: $,
+  icon: D,
   category: "core",
   group: "basic",
   hidden: !0,
@@ -240,7 +241,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   label: "web_blocks.icon",
   category: "core",
   description: "Icon block is used to display an icon/svg.",
-  icon: q,
+  icon: Z,
   group: "media",
   ...p({
     properties: {
@@ -283,7 +284,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "PartialBlock",
   description: "A partial block component. Partial blocks are global blocks that can be used in multiple pages.",
   label: "Partial Block",
-  icon: $,
+  icon: D,
   category: "core",
   group: "basic",
   hidden: !0,
@@ -354,7 +355,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   label: "Column",
   group: "basic",
   category: "core",
-  icon: G,
+  icon: q,
   wrapper: !0,
   hidden: !0,
   canDelete: () => !0,
@@ -393,7 +394,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A row component",
   label: "Row",
   group: "basic",
-  icon: j,
+  icon: V,
   hidden: !0,
   blocks: () => [
     { _type: "Row", _id: "row", styles: "#styles:,p-1" },
@@ -428,7 +429,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A horizontal line component",
   label: "Divider",
   category: "core",
-  icon: W,
+  icon: G,
   group: "basic",
   ...p({
     properties: {
@@ -477,7 +478,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Checkbox",
   label: "web_blocks.checkbox",
   category: "core",
-  icon: O,
+  icon: W,
   group: "form",
   ...p({
     properties: {
@@ -541,7 +542,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Form",
   label: "Form",
   category: "core",
-  icon: Y,
+  icon: O,
   group: "form",
   blocks: () => [
     { _type: "Form", _id: "form", styles: "#styles:p-1 space-y-2," },
@@ -595,7 +596,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "FormButton",
   label: "Submit Button",
   category: "core",
-  icon: M,
+  icon: $,
   group: "form",
   ...p({
     properties: {
@@ -743,7 +744,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Input",
   label: "web_blocks.input",
   category: "core",
-  icon: D,
+  icon: z,
   group: "form",
   ...p({
     properties: {
@@ -864,7 +865,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Label",
   label: "Label",
   category: "core",
-  icon: Q,
+  icon: Y,
   group: "form",
   ...p({
     properties: {
@@ -899,7 +900,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Radio",
   label: "web_blocks.radio",
   category: "core",
-  icon: J,
+  icon: Q,
   group: "form",
   ...p({
     properties: {
@@ -983,7 +984,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Select",
   label: "web_blocks.select",
   category: "core",
-  icon: X,
+  icon: J,
   group: "form",
   ...p({
     properties: {
@@ -1080,7 +1081,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "TextArea",
   label: "web_blocks.textarea",
   category: "core",
-  icon: D,
+  icon: z,
   group: "form",
   ...p({
     properties: {
@@ -1139,7 +1140,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A heading component similar to h1, h2, h3, h4, h5, h6 elements in HTML",
   label: "Heading",
   category: "core",
-  icon: K,
+  icon: X,
   group: "typography",
   ...p({
     properties: {
@@ -1205,7 +1206,7 @@ d(rt, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: ee,
+  icon: K,
   ...p({
     properties: {
       styles: u("")
@@ -1219,7 +1220,7 @@ d(nt, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: te,
+  icon: ee,
   ...p({
     properties: {
       styles: u("")
@@ -1233,7 +1234,7 @@ d(it, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: oe,
+  icon: te,
   ...p({
     properties: {
       styles: u("")
@@ -1247,7 +1248,7 @@ d(at, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: le,
+  icon: oe,
   ...p({
     properties: {
       styles: u("")
@@ -1261,7 +1262,7 @@ d(st, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: re,
+  icon: le,
   ...p({
     properties: {
       styles: u(""),
@@ -1342,7 +1343,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A image component",
   label: "Image",
   category: "core",
-  icon: ne,
+  icon: re,
   group: "media",
   ...p({
     properties: {
@@ -1426,7 +1427,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A link component",
   label: "Link",
   category: "core",
-  icon: ie,
+  icon: ne,
   group: "basic",
   ...p({
     properties: {
@@ -1469,7 +1470,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "List",
   description: "A list component",
   label: "List",
-  icon: j,
+  icon: V,
   category: "core",
   group: "basic",
   ...p({
@@ -1513,7 +1514,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "ListItem",
   description: "A list item component",
   label: "List Item",
-  icon: ae,
+  icon: ie,
   category: "core",
   group: "basic",
   ...p({
@@ -1535,7 +1536,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   canBeNested: (e) => e === "List" || e === "Repeater"
 }, ht = (e) => {
   const { blockProps: o, styles: t, content: l } = e;
-  if (!ye(e.children)) return b.createElement("p", { ...t, ...o }, e.children);
+  if (!U(e.children)) return b.createElement("p", { ...t, ...o }, e.children);
   const r = T(t, "rte");
   return b.createElement("div", {
     ...r,
@@ -1547,7 +1548,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A paragraph component",
   label: "Paragraph",
   category: "core",
-  icon: se,
+  icon: ae,
   group: "typography",
   ...p({
     properties: {
@@ -1572,7 +1573,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   label: "Rich Text",
   hidden: !0,
   category: "core",
-  icon: ce,
+  icon: se,
   group: "typography",
   ...p({
     properties: {
@@ -1621,7 +1622,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   category: "core",
   group: "typography",
   blocks: () => [{ _id: "a", _type: "Text", _name: "Text", content: "" }],
-  icon: de,
+  icon: ce,
   ...p({
     properties: {
       styles: u("text-black"),
@@ -1686,8 +1687,8 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   return null;
 }, Bt = (e) => {
   const { url: o, blockProps: t, styles: l, controls: r, videoSource: n, inBuilder: a, title: s } = e, c = Lt(o, r);
-  return /* @__PURE__ */ h("div", { ...z(l, "className"), className: "relative w-full overflow-hidden", style: { paddingBottom: "56.25%" }, children: [
-    !c && a ? /* @__PURE__ */ i("div", { className: "absolute flex h-full w-full items-center justify-center bg-gray-300 text-center", children: w(o) ? `Provided ${n} video link in settings Video URL.` : `Provided ${n} video link is invalid.` }) : /* @__PURE__ */ i("iframe", { width: "100%", src: c, title: s || "Video player", ...F(l, "className") }),
+  return /* @__PURE__ */ h("div", { ...M(l, "className"), className: "relative w-full overflow-hidden", style: { paddingBottom: "56.25%" }, children: [
+    !c && a ? /* @__PURE__ */ i("div", { className: "absolute flex h-full w-full items-center justify-center bg-gray-300 text-center", children: w(o) ? `Provided ${n} video link in settings Video URL.` : `Provided ${n} video link is invalid.` }) : /* @__PURE__ */ i("iframe", { width: "100%", src: c, title: s || "Video player", ...H(l, "className") }),
     a && /* @__PURE__ */ i("div", { ...t, className: "absolute top-0 h-full w-full" })
   ] });
 }, St = (e) => {
@@ -1728,7 +1729,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "Video",
   label: "Video",
   category: "core",
-  icon: pe,
+  icon: de,
   group: "media",
   ...p({
     properties: {
@@ -1815,14 +1816,14 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   }),
   i18nProps: ["url", "title"]
 }, Tt = (e) => {
-  const { paginationStyles: o } = e, t = U("Pagination");
-  return /* @__PURE__ */ i("div", { ...o, children: t ? b.createElement(t.component, { ...z(e, ["paginationStyles"]), blockProps: {} }) : /* @__PURE__ */ h(N, { children: [
+  const { paginationStyles: o } = e, t = me("Pagination");
+  return /* @__PURE__ */ i("div", { ...o, children: t ? b.createElement(t.component, { ...M(e, ["paginationStyles"]), blockProps: {} }) : /* @__PURE__ */ h(N, { children: [
     /* @__PURE__ */ i(
       "button",
       {
         className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",
         disabled: !0,
-        children: /* @__PURE__ */ i(ue, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ i(pe, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-blue-500 bg-blue-500 font-medium text-white", children: "1" }),
@@ -1830,7 +1831,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "3" }),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "4" }),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "5" }),
-    /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50", children: /* @__PURE__ */ i(me, { className: "h-4 w-4" }) })
+    /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50", children: /* @__PURE__ */ i(ue, { className: "h-4 w-4" }) })
   ] }) });
 }, Rt = (e) => {
   const { children: o, tag: t, styles: l, blockProps: r, $loading: n } = e, { pagination: a, inBuilder: s } = e;
@@ -1850,7 +1851,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
     a && /* @__PURE__ */ i(
       Tt,
       {
-        ...F(e, [
+        ...H(e, [
           "limit",
           "totalItems",
           "paginationStrategy",
@@ -1865,7 +1866,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
 }, At = {
   type: "Repeater",
   label: "Repeater",
-  icon: V,
+  icon: F,
   group: "basic",
   description: "Repeater block is used to display a list of items based on data binding in repeaterItems",
   dataProviderMode: "live",
@@ -1983,13 +1984,13 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
 }, Mt = {
   type: "RepeaterItem",
   label: "Repeater Item",
-  icon: V,
+  icon: F,
   hidden: !0,
   group: "basic",
   ...p({
     properties: {
       styles: L(""),
-      parentTag: Z("Repeater", "tag")
+      parentTag: ye("Repeater", "tag")
     }
   }),
   canAcceptBlock: (e) => e !== "RepeaterItem",
@@ -2012,9 +2013,9 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   canDelete: () => !1,
   canMove: () => !1,
   canDuplicate: () => !1
-}, Zt = () => {
+}, qt = () => {
   d(ge, be), d(Me, He), d(fe, he), d(et, tt), d(ht, kt), d(vt, Ct), d(xt, wt), d(ut, mt), d(yt, gt), d(bt, ft), d(Pe, Le), d(dt, pt), d(Nt, _t), d(ke, xe), d(we, ve), d(It, Pt), d(De, Ve), d(ze, Fe), d(Ze, qe), d($e, je), d(Oe, Ye), d(Qe, Je), d(Xe, Ke), d(Ge, We), d(ot, lt), d(Ae, Ee), d(Ce, Ie), d(Be, Se), d(Te, Re), d(Ne, _e), d(Rt, At), d(Et, Mt), d(Ht, $t);
 };
 export {
-  Zt as loadWebBlocks
+  qt as loadWebBlocks
 };

package/dist/web-preview-DXE4Jnf5.js

@@ -0,0 +1,73 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as d, createElement as m } from "react";
+import { B as s } from "./index-S8ibZk9Q.js";
+import { useAtom as h } from "jotai";
+import { map as p } from "lodash-es";
+import { Smartphone as w, Tablet as f, Laptop as u, LaptopMinimal as x } from "lucide-react";
+import { p as v, T as _ } from "./index-BDnwJqMw.js";
+const b = [
+  {
+    title: "mobile_xs_title",
+    content: "mobile_xs_content",
+    icon: /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
+    width: 400
+  },
+  {
+    title: "tablet_md_title",
+    content: "tablet_md_content",
+    icon: /* @__PURE__ */ e(f, { className: "h-4 w-4" }),
+    width: 800
+  },
+  {
+    title: "desktop_xl_title",
+    content: "desktop_xl_content",
+    icon: /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
+    width: 1200
+  },
+  {
+    title: "large_desktop_2xl_title",
+    content: "large_desktop_2xl_content",
+    icon: /* @__PURE__ */ e(x, { className: "h-4 w-4" }),
+    width: 1600
+  }
+], g = ({ currentWidth: t, width: r, icon: l, setIframeWidth: o }) => /* @__PURE__ */ e(
+  s,
+  {
+    className: "px-3 py-3",
+    onClick: () => o(r),
+    variant: r === t ? "default" : "ghost",
+    children: l
+  }
+), j = () => {
+  const [t, r] = d(1200), l = (i) => r(i), [o, a] = h(v);
+  if (!o) return null;
+  const c = () => {
+    a("");
+  };
+  return /* @__PURE__ */ n("div", { className: "absolute inset-0 z-[999999] flex h-screen w-screen flex-col overflow-hidden bg-gray-100", children: [
+    /* @__PURE__ */ n("div", { className: "flex h-[50px] items-center justify-center border-b border-gray-200 px-4 shadow-sm", children: [
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-center rounded-md border border-gray-300", children: p(b, (i) => /* @__PURE__ */ m(g, { ...i, setIframeWidth: l, key: i.title, currentWidth: t })) }),
+      " ",
+      /* @__PURE__ */ e(_, { content: "Exit Preview", delayDuration: 0, children: /* @__PURE__ */ e(s, { variant: "destructive", size: "sm", onClick: c, children: /* @__PURE__ */ e("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M2 3C2 2.44772 2.44772 2 3 2H12C12.5523 2 13 2.44772 13 3V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3ZM12 3H3V12H12V3Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          "clip-rule": "evenodd"
+        }
+      ) }) }) })
+    ] }),
+    /* @__PURE__ */ e(
+      "iframe",
+      {
+        style: { width: `${t}px`, transition: "width 0.3s ease-in-out" },
+        className: "no-scrollbar mx-auto h-full overflow-y-auto border bg-white",
+        src: o
+      }
+    )
+  ] });
+};
+export {
+  j as default
+};

package/dist/web-preview-YzKxyXft.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("./index-CnSjWE1P.cjs"),h=require("jotai"),x=require("lodash-es"),n=require("lucide-react"),c=require("./index-CbwxUFy_.cjs"),m=[{title:"mobile_xs_title",content:"mobile_xs_content",icon:e.jsx(n.Smartphone,{className:"h-4 w-4"}),width:400},{title:"tablet_md_title",content:"tablet_md_content",icon:e.jsx(n.Tablet,{className:"h-4 w-4"}),width:800},{title:"desktop_xl_title",content:"desktop_xl_content",icon:e.jsx(n.Laptop,{className:"h-4 w-4"}),width:1200},{title:"large_desktop_2xl_title",content:"large_desktop_2xl_content",icon:e.jsx(n.LaptopMinimal,{className:"h-4 w-4"}),width:1600}],w=({currentWidth:t,width:s,icon:o,setIframeWidth:r})=>e.jsx(a.Button,{className:"px-3 py-3",onClick:()=>r(s),variant:s===t?"default":"ghost",children:o}),p=()=>{const[t,s]=l.useState(1200),o=i=>s(i),[r,d]=h.useAtom(c.previewUrlAtom);if(!r)return null;const u=()=>{d("")};return e.jsxs("div",{className:"absolute inset-0 z-[999999] flex h-screen w-screen flex-col overflow-hidden bg-gray-100",children:[e.jsxs("div",{className:"flex h-[50px] items-center justify-center border-b border-gray-200 px-4 shadow-sm",children:[e.jsx("div",{className:"flex items-center justify-center rounded-md border border-gray-300",children:x.map(m,i=>l.createElement(w,{...i,setIframeWidth:o,key:i.title,currentWidth:t}))})," ",e.jsx(c.Tooltip,{content:"Exit Preview",delayDuration:0,children:e.jsx(a.Button,{variant:"destructive",size:"sm",onClick:u,children:e.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M2 3C2 2.44772 2.44772 2 3 2H12C12.5523 2 13 2.44772 13 3V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3ZM12 3H3V12H12V3Z",fill:"currentColor",fillRule:"evenodd","clip-rule":"evenodd"})})})})]}),e.jsx("iframe",{style:{width:`${t}px`,transition:"width 0.3s ease-in-out"},className:"no-scrollbar mx-auto h-full overflow-y-auto border bg-white",src:r})]})};exports.default=p;