@chaibuilder/sdk 2.0.0-beta.12 → 2.0.0-beta.13

package/dist/web-blocks.js

@@ -1,18 +1,18 @@
 import { registerChaiBlockSchema as p, StylesProp as c, registerChaiBlock as u } from "@chaibuilder/runtime";
 import { j as r } from "./jsx-runtime-Sp0orL4X.js";
 import * as y from "react";
-import { c as L, G as E, g as w } from "./iconBase-Ief2hJUZ.js";
+import { c as I, G as E, g as w } from "./iconBase-Ief2hJUZ.js";
 import { ButtonIcon as C, CodeIcon as T, HeadingIcon as $, TextIcon as N, CursorTextIcon as H, Link1Icon as z, ImageIcon as j, RowsIcon as R, ColumnsIcon as A, SketchLogoIcon as D, VideoIcon as q, DividerHorizontalIcon as F, MoonIcon as G, SpaceBetweenVerticallyIcon as V, InputIcon as S, RadiobuttonIcon as O, DropdownMenuIcon as U, CheckboxIcon as W, LetterCaseToggleIcon as X } from "@radix-ui/react-icons";
-import { isNull as Y, isEmpty as b, get as v, pick as Z, omit as J, map as I } from "lodash-es";
+import { isNull as Y, isEmpty as b, get as v, pick as Z, omit as J, map as L } from "lodash-es";
 import { GlobeIcon as K, GroupIcon as Q } from "lucide-react";
 import "clsx";
 import "tailwind-merge";
-const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("div", { className: L("pointer-events-none flex h-20 flex-col items-center justify-center p-2", e), children: /* @__PURE__ */ r.jsx("div", { className: "h-full w-full rounded bg-gray-200 p-2 dark:bg-gray-800", children: /* @__PURE__ */ r.jsx("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, x = ee, te = (e) => {
-  const { blockProps: o, inBuilder: t, backgroundImage: n, children: l, tag: s = "div", styles: i } = e;
+const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("div", { className: I("pointer-events-none flex h-20 flex-col items-center justify-center p-2", e), children: /* @__PURE__ */ r.jsx("div", { className: "h-full w-full rounded bg-gray-200 p-2 dark:bg-gray-800", children: /* @__PURE__ */ r.jsx("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, x = ee, te = (e) => {
+  const { blockProps: o, inBuilder: t, backgroundImage: n, children: l, tag: i = "div", styles: s } = e;
   let a = l;
   l || (a = /* @__PURE__ */ r.jsx(x, { inBuilder: t }));
   let d = {};
-  return n && (d = { backgroundImage: `url(${n})` }), y.createElement(s, { ...o, ...i, style: d }, a);
+  return n && (d = { backgroundImage: `url(${n})` }), y.createElement(i, { ...o, ...s, style: d }, a);
 }, oe = {
   type: "Box",
   label: "Box",
@@ -55,7 +55,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   }),
   canAcceptBlock: () => !0
 }, le = (e) => {
-  const { blockProps: o, iconSize: t, icon: n, content: l, styles: s, children: i, iconPos: a } = e, d = n, g = i || /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+  const { blockProps: o, iconSize: t, icon: n, content: l, styles: i, children: s, iconPos: a } = e, d = n, g = s || /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
     /* @__PURE__ */ r.jsx("span", { "data-ai-key": "content", children: l }),
     d && /* @__PURE__ */ r.jsx(
       "div",
@@ -70,7 +70,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
     "button",
     {
       ...o,
-      ...s,
+      ...i,
       type: "button"
     },
     g
@@ -123,7 +123,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
     ...t,
     dangerouslySetInnerHTML: { __html: n }
   });
-}, se = {
+}, ie = {
   type: "CustomHTML",
   label: "web_blocks.custom_html",
   category: "core",
@@ -139,7 +139,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
       }
     }
   })
-}, ie = (e) => {
+}, se = (e) => {
   const { blockProps: o, styles: t, backgroundImage: n } = e;
   let l = {};
   return n && (l = { backgroundImage: `url(${n})` }), y.createElement("div", { ...o, ...t, style: l });
@@ -160,8 +160,8 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
     }
   })
 }, ce = (e) => {
-  const { blockProps: o, styles: t, content: n, level: l = "h1", children: s = null } = e;
-  return s ? y.createElement(l, { ...t, ...o }, s) : y.createElement(l, {
+  const { blockProps: o, styles: t, content: n, level: l = "h1", children: i = null } = e;
+  return i ? y.createElement(l, { ...t, ...o }, i) : y.createElement(l, {
     ...t,
     ...o,
     dangerouslySetInnerHTML: { __html: n }
@@ -222,8 +222,8 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   aiProps: ["content"],
   canAcceptBlock: (e) => e === "Span" || e === "Link" || e === "Text"
 }, ge = (e) => {
-  const { blockProps: o, styles: t, content: n, children: l = null, tag: s } = e;
-  return l ? y.createElement("span", { ...t, ...o }, l) : y.createElement(s || "span", {
+  const { blockProps: o, styles: t, content: n, children: l = null, tag: i } = e;
+  return l ? y.createElement("span", { ...t, ...o }, l) : y.createElement(i || "span", {
     ...t,
     ...o,
     dangerouslySetInnerHTML: { __html: n || "" }
@@ -270,16 +270,16 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   aiProps: ["content"],
   i18nProps: ["content"]
 }, fe = (e) => {
-  const { blockProps: o, link: t, children: n, styles: l, inBuilder: s, content: i } = e;
+  const { blockProps: o, link: t, children: n, styles: l, inBuilder: i, content: s } = e;
   let a = {};
-  return !n && b(i) && (a = { minHeight: "50px", display: "flex", alignItems: "center", justifyContent: "center" }), s ? n ? /* @__PURE__ */ r.jsx("span", { ...o, style: a, ...l, children: n }) : y.createElement(
+  return !n && b(s) && (a = { minHeight: "50px", display: "flex", alignItems: "center", justifyContent: "center" }), i ? n ? /* @__PURE__ */ r.jsx("span", { ...o, style: a, ...l, children: n }) : y.createElement(
     "span",
     {
       ...o,
       ...l,
       style: a
     },
-    i
+    s
   ) : n ? /* @__PURE__ */ r.jsx("a", { href: (t == null ? void 0 : t.href) || "#/", target: t == null ? void 0 : t.target, ...o, ...l, children: n }) : y.createElement(
     "a",
     {
@@ -288,7 +288,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
       href: (t == null ? void 0 : t.href) || "#",
       target: (t == null ? void 0 : t.target) || "_self"
     },
-    i
+    s
   );
 }, be = {
   type: "Link",
@@ -328,24 +328,24 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   canAcceptBlock: (e) => e !== "Link"
 }, M = (e, ...o) => ({
   ...e,
-  className: L(e.className, ...o)
+  className: I(e.className, ...o)
 }), ke = (e) => {
-  const { blockProps: o, children: t, styles: n, inBuilder: l, content: s, href: i } = e, { hrefType: a, autoplay: d, maxWidth: g, backdropColor: h, galleryName: f } = e, m = M(n, "cb-lightbox");
-  if (!t && b(n == null ? void 0 : n.className) && b(s))
+  const { blockProps: o, children: t, styles: n, inBuilder: l, content: i, href: s } = e, { hrefType: a, autoplay: d, maxWidth: g, backdropColor: h, galleryName: f } = e, m = M(n, "cb-lightbox");
+  if (!t && b(n == null ? void 0 : n.className) && b(i))
     return /* @__PURE__ */ r.jsx(x, { inBuilder: l });
   if (l)
     return t ? /* @__PURE__ */ r.jsx("span", { ...o, ...m, children: t }) : y.createElement("span", {
       ...o,
       ...m,
-      dangerouslySetInnerHTML: { __html: s }
+      dangerouslySetInnerHTML: { __html: i }
     });
   const k = {};
-  return k["data-vbtype"] = a, d && (k["data-autoplay"] = "true"), g && (k["data-maxwidth"] = g + "px"), h && (k["data-overlay"] = h), f && (k["data-gall"] = f), t ? /* @__PURE__ */ r.jsx("a", { ...k, href: i || "#/", ...o, ...m, children: t }) : y.createElement("a", {
+  return k["data-vbtype"] = a, d && (k["data-autoplay"] = "true"), g && (k["data-maxwidth"] = g + "px"), h && (k["data-overlay"] = h), f && (k["data-gall"] = f), t ? /* @__PURE__ */ r.jsx("a", { ...k, href: s || "#/", ...o, ...m, children: t }) : y.createElement("a", {
     ...o,
     ...m,
     ...k,
-    href: i || "#",
-    dangerouslySetInnerHTML: { __html: s }
+    href: s || "#",
+    dangerouslySetInnerHTML: { __html: i }
   });
 }, xe = {
   type: "LightBoxLink",
@@ -422,9 +422,9 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   aiProps: ["content"],
   canAcceptBlock: (e) => e !== "Link" && e !== "LightBoxLink"
 }, we = (e) => {
-  const { blockProps: o, children: t, listType: n, styles: l, tag: s, inBuilder: i } = e, a = L(v(l, "className", ""), n);
-  return !t && b(l == null ? void 0 : l.className) ? /* @__PURE__ */ r.jsx(x, { inBuilder: i }) : y.createElement(
-    s || (n === "list-decimal" ? "ol" : "ul"),
+  const { blockProps: o, children: t, listType: n, styles: l, tag: i, inBuilder: s } = e, a = I(v(l, "className", ""), n);
+  return !t && b(l == null ? void 0 : l.className) ? /* @__PURE__ */ r.jsx(x, { inBuilder: s }) : y.createElement(
+    i || (n === "list-decimal" ? "ol" : "ul"),
     { ...o, ...l, className: a },
     t
   );
@@ -474,14 +474,14 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
       content: "Item 3"
     }
   ]
-}, Le = (e) => {
-  const { blockProps: o, content: t, styles: n, children: l, tag: s } = e;
-  return l ? y.createElement(s || "li", { ...n, ...o }, l) : y.createElement(s || "li", {
+}, Ie = (e) => {
+  const { blockProps: o, content: t, styles: n, children: l, tag: i } = e;
+  return l ? y.createElement(i || "li", { ...n, ...o }, l) : y.createElement(i || "li", {
     ...n,
     ...o,
     dangerouslySetInnerHTML: { __html: t }
   });
-}, Ie = {
+}, Le = {
   type: "ListItem",
   label: "List Item",
   icon: A,
@@ -505,9 +505,9 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   canAcceptBlock: (e) => e !== "ListItem",
   canBeNested: (e) => e === "List"
 }, _e = (e) => {
-  const { blockProps: o, icon: t, styles: n, width: l, inBuilder: s, height: i } = e, a = M(n, L(l ? `w-[${l}px]` : "", i ? `h-[${i}px]` : ""));
+  const { blockProps: o, icon: t, styles: n, width: l, inBuilder: i, height: s } = e, a = M(n, I(l ? `w-[${l}px]` : "", s ? `h-[${s}px]` : ""));
   if (b(t))
-    return /* @__PURE__ */ r.jsx(x, { inBuilder: s, className: "h-8 w-14" });
+    return /* @__PURE__ */ r.jsx(x, { inBuilder: i, className: "h-8 w-14" });
   const d = t.replace(/<svg /g, '<svg class="w-[inherit] h-[inherit]" ');
   return y.createElement("span", {
     ...o,
@@ -542,15 +542,15 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
     }
   })
 }, Pe = (e) => {
-  const { blockProps: o, image: t, styles: n, alt: l, height: s, width: i, lazyLoading: a } = e;
+  const { blockProps: o, image: t, styles: n, alt: l, height: i, width: s, lazyLoading: a } = e;
   return b(t) ? /* @__PURE__ */ r.jsx(x, { className: "h-36" }) : y.createElement("img", {
     ...o,
     ...n,
     src: t,
     alt: l,
     loading: a ? "lazy" : "eager",
-    height: s,
-    width: i
+    height: i,
+    width: s
   });
 }, Ce = {
   type: "Image",
@@ -565,38 +565,48 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
         type: "string",
         title: "Image",
         default: "https://fakeimg.pl/400x200?text=Choose&font=bebas",
-        ui: {
-          "ui:widget": "image"
-        }
+        ui: { "ui:widget": "image" }
       },
       alt: {
         type: "string",
         title: "Alt text",
         default: "",
-        ui: {
-          "ui:placeholder": "Enter Here"
-        }
+        ui: { "ui:placeholder": "Enter  alt text" }
+      },
+      lazyLoading: {
+        type: "boolean",
+        title: "Lazy Load",
+        default: !0
+      },
+      width: {
+        type: "number",
+        title: "Width",
+        default: "",
+        ui: { "ui:placeholder": "Enter width" }
       },
       height: {
         type: "number",
         title: "Height",
         default: "",
-        ui: {
-          "ui:placeholder": "Enter Here"
-        }
+        ui: { "ui:placeholder": "Enter height" }
       },
-      width: {
+      mobileImage: {
+        type: "string",
+        title: "Mobile Image",
+        default: "",
+        ui: { "ui:widget": "image" }
+      },
+      mobileWidth: {
         type: "number",
-        title: "Width",
+        title: "Mobile Width",
         default: "",
-        ui: {
-          "ui:placeholder": "Enter Here"
-        }
+        ui: { "ui:placeholder": "Enter width" }
       },
-      lazyLoading: {
-        type: "boolean",
-        title: "Lazy Load",
-        default: !0
+      mobileHeight: {
+        type: "number",
+        title: "Mobile Height",
+        default: "",
+        ui: { "ui:placeholder": "Enter height" }
       }
     }
   }),
@@ -617,14 +627,14 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
   }
   return null;
 }, Se = y.memo((e) => {
-  const { blockProps: o, inBuilder: t, styles: n, url: l, controls: s } = e, i = v(s, "autoPlay", !1), a = v(s, "controls", !1), d = i || v(s, "muted", !0), g = v(s, "loop", !1);
+  const { blockProps: o, inBuilder: t, styles: n, url: l, controls: i } = e, s = v(i, "autoPlay", !1), a = v(i, "controls", !1), d = s || v(i, "muted", !0), g = v(i, "loop", !1);
   if (b(l))
     return /* @__PURE__ */ r.jsx(x, { inBuilder: t, className: "h-36" });
   let h = je(l), f = null;
   if (h) {
     if (!b(h)) {
       const m = [];
-      m.push(`autoplay=${i ? 1 : 0}`), m.push(`controls=${s ? 1 : 0}`), m.push(`mute=${d ? 1 : 0}&muted=${d ? 1 : 0}`), m.push(`loop=${g ? 1 : 0}`), h = `${h}?${m.join("&")}`;
+      m.push(`autoplay=${s ? 1 : 0}`), m.push(`controls=${i ? 1 : 0}`), m.push(`mute=${d ? 1 : 0}&muted=${d ? 1 : 0}`), m.push(`loop=${g ? 1 : 0}`), h = `${h}?${m.join("&")}`;
     }
     f = y.createElement("iframe", {
       ...o,
@@ -641,7 +651,7 @@ const ee = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ r.jsx("d
       src: l,
       controls: a,
       muted: d,
-      autoPlay: t ? !1 : i,
+      autoPlay: t ? !1 : s,
       loop: g
     });
   return /* @__PURE__ */ r.jsx("div", { ...Z(n, ["className"]), children: /* @__PURE__ */ r.jsxs("div", { className: "relative w-full overflow-hidden", style: { paddingBottom: "56.25%" }, children: [
@@ -717,7 +727,7 @@ function $e(e) {
 }
 const Ne = (e) => {
   const { scripts: o, inBuilder: t, blockProps: n } = e;
-  return t ? /* @__PURE__ */ r.jsx("div", { ...n, children: /* @__PURE__ */ r.jsx("div", { className: L("pointer-events-none flex flex-col items-center justify-center p-2", ""), children: /* @__PURE__ */ r.jsx("div", { className: "h-full w-full rounded bg-gray-200 p-1 dark:bg-gray-800", children: /* @__PURE__ */ r.jsx("p", { className: "text-left text-xs text-gray-400", children: "Scripts will be only executed in preview and live mode. Place your script at the bottom of the" }) }) }) }) : /* @__PURE__ */ r.jsx("div", { dangerouslySetInnerHTML: { __html: o } });
+  return t ? /* @__PURE__ */ r.jsx("div", { ...n, children: /* @__PURE__ */ r.jsx("div", { className: I("pointer-events-none flex flex-col items-center justify-center p-2", ""), children: /* @__PURE__ */ r.jsx("div", { className: "h-full w-full rounded bg-gray-200 p-1 dark:bg-gray-800", children: /* @__PURE__ */ r.jsx("p", { className: "text-left text-xs text-gray-400", children: "Scripts will be only executed in preview and live mode. Place your script at the bottom of the" }) }) }) }) : /* @__PURE__ */ r.jsx("div", { dangerouslySetInnerHTML: { __html: o } });
 }, He = {
   type: "CustomScript",
   label: "web_blocks.custom_script",
@@ -844,9 +854,9 @@ const Ne = (e) => {
   aiProps: ["content"],
   i18nProps: ["content"]
 }, Ge = (e) => {
-  const { blockProps: o, backgroundImage: t, children: n, styles: l, tag: s } = e;
-  let i = {};
-  return t && (i = { backgroundImage: `url(${t})` }), y.createElement(s || "div", { ...o, ...l, style: i }, n);
+  const { blockProps: o, backgroundImage: t, children: n, styles: l, tag: i } = e;
+  let s = {};
+  return t && (s = { backgroundImage: `url(${t})` }), y.createElement(i || "div", { ...o, ...l, style: s }, n);
 }, Ve = {
   type: "Body",
   label: "Body",
@@ -911,7 +921,7 @@ const Ne = (e) => {
   canMove: () => !1,
   canDuplicate: () => !1
 }, We = (e) => {
-  const { children: o, blockProps: t, errorMessage: n, successMessage: l, action: s, styles: i } = e;
+  const { children: o, blockProps: t, errorMessage: n, successMessage: l, action: i, styles: s } = e;
   let a = o;
   o || (a = /* @__PURE__ */ r.jsx(x, {}));
   const d = {
@@ -928,9 +938,9 @@ const Ne = (e) => {
       "data-error": n,
       "data-success": l,
       method: "post",
-      action: s,
+      action: i,
       ...t,
-      ...i,
+      ...s,
       children: [
         /* @__PURE__ */ r.jsx("div", { ...g }),
         a
@@ -969,7 +979,7 @@ const Ne = (e) => {
   aiProps: ["errorMessage", "successMessage"],
   canAcceptBlock: () => !0
 }, Ye = (e) => {
-  const { blockProps: o, inBuilder: t, label: n, styles: l, inputStyles: s, icon: i, iconSize: a, iconPos: d } = e, g = w(), h = {
+  const { blockProps: o, inBuilder: t, label: n, styles: l, inputStyles: i, icon: s, iconSize: a, iconPos: d } = e, g = w(), h = {
     "x-bind:disabled": "formLoading"
   };
   return /* @__PURE__ */ r.jsxs(
@@ -977,18 +987,18 @@ const Ne = (e) => {
     {
       id: g,
       ...h,
-      ...s,
+      ...i,
       ...l,
       ...o || {},
       type: t ? "button" : "submit",
       children: [
         n,
-        i && /* @__PURE__ */ r.jsx(
+        s && /* @__PURE__ */ r.jsx(
           "div",
           {
             style: { width: a + "px" },
             className: d + " " + (d === "order-first" ? "mr-2" : "ml-2") || "",
-            dangerouslySetInnerHTML: { __html: i }
+            dangerouslySetInnerHTML: { __html: s }
           }
         )
       ]
@@ -1035,14 +1045,14 @@ const Ne = (e) => {
   i18nProps: ["label"],
   aiProps: ["label"]
 }, Je = (e) => {
-  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: s, inputStyles: i, showLabel: a, required: d, inputType: g } = e, h = w();
-  return a ? /* @__PURE__ */ r.jsxs("div", { ...s, ...o, children: [
+  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: i, inputStyles: s, showLabel: a, required: d, inputType: g } = e, h = w();
+  return a ? /* @__PURE__ */ r.jsxs("div", { ...i, ...o, children: [
     a && /* @__PURE__ */ r.jsx("label", { htmlFor: h, children: n }),
     /* @__PURE__ */ r.jsx(
       "input",
       {
         name: t,
-        ...i,
+        ...s,
         id: h,
         type: g,
         placeholder: l,
@@ -1055,8 +1065,8 @@ const Ne = (e) => {
       id: h,
       name: t,
       ...o,
-      ...i,
       ...s,
+      ...i,
       type: g,
       placeholder: l,
       required: d
@@ -1118,19 +1128,19 @@ const Ne = (e) => {
   aiProps: ["label", "placeholder"],
   i18nProps: ["label", "placeholder"]
 }, Qe = (e) => {
-  const { blockProps: o, fieldName: t, label: n, styles: l, inputStyles: s, required: i, checked: a, showLabel: d = !0 } = e, g = w();
+  const { blockProps: o, fieldName: t, label: n, styles: l, inputStyles: i, required: s, checked: a, showLabel: d = !0 } = e, g = w();
   return d ? /* @__PURE__ */ r.jsxs("div", { ...l, ...o, children: [
-    /* @__PURE__ */ r.jsx("input", { ...s, name: t, id: g, type: "radio", required: i, defaultChecked: a }),
+    /* @__PURE__ */ r.jsx("input", { ...i, name: t, id: g, type: "radio", required: s, defaultChecked: a }),
     n && /* @__PURE__ */ r.jsx("label", { htmlFor: g, children: n })
   ] }) : /* @__PURE__ */ r.jsx(
     "input",
     {
       id: g,
       ...o,
-      ...s,
+      ...i,
       ...l,
       type: "radio",
-      required: i,
+      required: s,
       checked: a,
       name: t
     }
@@ -1170,16 +1180,16 @@ const Ne = (e) => {
   aiProps: ["label"],
   i18nProps: ["label"]
 }, tt = (e) => {
-  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: s, inputStyles: i, required: a, showLabel: d, _multiple: g, options: h } = e, f = w();
-  return d ? /* @__PURE__ */ r.jsxs("div", { ...s, ...o, children: [
+  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: i, inputStyles: s, required: a, showLabel: d, _multiple: g, options: h } = e, f = w();
+  return d ? /* @__PURE__ */ r.jsxs("div", { ...i, ...o, children: [
     d && /* @__PURE__ */ r.jsx("label", { htmlFor: f, children: n }),
-    /* @__PURE__ */ r.jsxs("select", { ...i, id: f, required: a, multiple: g, name: t, children: [
+    /* @__PURE__ */ r.jsxs("select", { ...s, id: f, required: a, multiple: g, name: t, children: [
       /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, selected: !0, hidden: !0, children: l }),
-      I(h, (m) => /* @__PURE__ */ r.jsx("option", { value: m.value, dangerouslySetInnerHTML: { __html: m.label } }, m.value))
+      L(h, (m) => /* @__PURE__ */ r.jsx("option", { value: m.value, dangerouslySetInnerHTML: { __html: m.label } }, m.value))
     ] })
-  ] }) : /* @__PURE__ */ r.jsxs("select", { id: f, ...s, ...o, required: a, multiple: g, name: t, children: [
+  ] }) : /* @__PURE__ */ r.jsxs("select", { id: f, ...i, ...o, required: a, multiple: g, name: t, children: [
     /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, selected: !0, hidden: !0, children: l }),
-    I(h, (m) => /* @__PURE__ */ r.jsx("option", { value: m.value, dangerouslySetInnerHTML: { __html: m.label } }, m.value))
+    L(h, (m) => /* @__PURE__ */ r.jsx("option", { value: m.value, dangerouslySetInnerHTML: { __html: m.label } }, m.value))
   ] });
 }, ot = {
   type: "Select",
@@ -1241,18 +1251,18 @@ const Ne = (e) => {
   aiProps: ["label", "placeholder"],
   i18nProps: ["label", "placeholder"]
 }, lt = (e) => {
-  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: s, inputStyles: i, _rows: a, showLabel: d } = e, g = w();
-  return d ? /* @__PURE__ */ r.jsxs("div", { ...s, ...o, children: [
+  const { blockProps: o, fieldName: t, label: n, placeholder: l, styles: i, inputStyles: s, _rows: a, showLabel: d } = e, g = w();
+  return d ? /* @__PURE__ */ r.jsxs("div", { ...i, ...o, children: [
     d && /* @__PURE__ */ r.jsx("label", { htmlFor: g, children: n }),
-    /* @__PURE__ */ r.jsx("textarea", { name: t, ...i, id: g, placeholder: l, rows: a })
+    /* @__PURE__ */ r.jsx("textarea", { name: t, ...s, id: g, placeholder: l, rows: a })
   ] }) : /* @__PURE__ */ r.jsx(
     "textarea",
     {
       id: g,
       name: t,
       ...o,
-      ...i,
       ...s,
+      ...i,
       placeholder: l,
       rows: a
     }
@@ -1293,16 +1303,16 @@ const Ne = (e) => {
   aiProps: ["label", "placeholder"],
   i18nProps: ["label", "placeholder"]
 }, rt = (e) => {
-  const { blockProps: o, fieldName: t, label: n, styles: l, inputStyles: s, required: i, checked: a, showLabel: d = !0 } = e, g = w();
+  const { blockProps: o, fieldName: t, label: n, styles: l, inputStyles: i, required: s, checked: a, showLabel: d = !0 } = e, g = w();
   return d ? /* @__PURE__ */ r.jsxs("div", { ...l, ...o, children: [
     /* @__PURE__ */ r.jsx(
       "input",
       {
-        ...s,
+        ...i,
         name: t,
         id: g,
         type: "checkbox",
-        required: i,
+        required: s,
         defaultChecked: a
       }
     ),
@@ -1312,14 +1322,14 @@ const Ne = (e) => {
     {
       id: g,
       ...o,
-      ...s,
+      ...i,
       ...l,
       type: "checkbox",
-      required: i,
+      required: s,
       name: t
     }
   );
-}, st = {
+}, it = {
   type: "Checkbox",
   label: "web_blocks.checkbox",
   category: "core",
@@ -1353,10 +1363,10 @@ const Ne = (e) => {
   }),
   aiProps: ["label"],
   i18nProps: ["label"]
-}, it = (e) => {
-  const { blockProps: o, content: t, styles: n, children: l } = e, s = { ...n, ...o };
-  return l ? y.createElement("label", s, l) : y.createElement("label", {
-    ...s,
+}, st = (e) => {
+  const { blockProps: o, content: t, styles: n, children: l } = e, i = { ...n, ...o };
+  return l ? y.createElement("label", i, l) : y.createElement("label", {
+    ...i,
     dangerouslySetInnerHTML: { __html: t }
   });
 }, at = {
@@ -1376,7 +1386,7 @@ const Ne = (e) => {
     }
   })
 }, ft = () => {
-  u(te, oe), u(ie, ae), u(le, ne), u(ce, de), u(ue, pe), u(ge, ye), u(me, he), u(fe, be), u(ke, xe), u(we, ve), u(Le, Ie), u(_e, Be), u(Pe, Ce), u(Se, Me), u(re, se), u(Ne, He), u(qe, Fe), u(We, Xe), u(Ye, Ze), u(Je, Ke), u(rt, st), u(Qe, et), u(tt, ot), u(lt, nt), u(it, at), u(Oe, Ue), u(Ge, Ve), u(Ee, Te), u(ze, Re), u(Ae, De);
+  u(te, oe), u(se, ae), u(le, ne), u(ce, de), u(ue, pe), u(ge, ye), u(me, he), u(fe, be), u(ke, xe), u(we, ve), u(Ie, Le), u(_e, Be), u(Pe, Ce), u(Se, Me), u(re, ie), u(Ne, He), u(qe, Fe), u(We, Xe), u(Ye, Ze), u(Je, Ke), u(rt, it), u(Qe, et), u(tt, ot), u(lt, nt), u(st, at), u(Oe, Ue), u(Ge, Ve), u(Ee, Te), u(ze, Re), u(Ae, De);
 };
 export {
   ft as loadWebBlocks

package/package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.13",
   "type": "module",
   "repository": {
     "type": "git",