@simple-builder/react 1.0.3 → 1.0.4

package/dist/{builder-content-MNCJZTFS.mjs → builder-content-GELONUMY.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-LPIHSXYO.mjs';
-import { BuildContainer } from './chunk-FGQSJAOO.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-EQMVGJ6X.mjs';
+import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{builder-content-BOQEXOAK.js → builder-content-QNCUQJUB.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkGSOMMLCG_js = require('./chunk-GSOMMLCG.js');
-var chunkUZFAGH6G_js = require('./chunk-UZFAGH6G.js');
+var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -25,17 +25,17 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 var BuilderHeader = () => {
-  const { save } = chunkGSOMMLCG_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-grid sb-grid-cols-3 sb-gap-4 sb-items-center sb-p-2 sb-shadow-lg sb-sticky sb-inset-x-0 sb-top-0 sb-bg-background sb-z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-flex sb-gap-4 sb-items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkGSOMMLCG_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkXEMUNFCV_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-grid sb-grid-cols-3 sb-gap-4 sb-items-center sb-p-2 sb-shadow-lg sb-sticky sb-inset-x-0 sb-top-0 sb-bg-background sb-z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb-flex sb-gap-4 sb-items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkXEMUNFCV_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkGSOMMLCG_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkXEMUNFCV_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkGSOMMLCG_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkUZFAGH6G_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkXEMUNFCV_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkJ36K7WVK_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/chunk-BSE6WW6Q.mjs

@@ -0,0 +1,115 @@
+import * as React3 from 'react';
+import { createElement } from 'react';
+import NextImage from 'next/image';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// src/lib/builder.ts
+var builder = /* @__PURE__ */ (() => {
+  const components = [];
+  return {
+    register: (component, config) => {
+      if (components.find(({ name }) => name === config.name)) {
+        console.log(
+          `[simple-builder]: Component ${config.name} already registered.`
+        );
+        return;
+      }
+      components.push({
+        component,
+        ...config
+      });
+    },
+    getComponents: () => components,
+    getComponent: (name) => {
+      return components.find((c) => c.name === name);
+    },
+    bindComponent: ({ content, ...block }, edit) => {
+      const component = components.find(({ name }) => name === block.component);
+      if (!component) {
+        throw new Error(
+          `[simple-builder]: Component ${block.component} not found`
+        );
+      }
+      const Element = createElement(component.component, {
+        key: block.id,
+        builder: { id: block.id, content, edit },
+        ...block.props
+      });
+      return Element;
+    }
+  };
+})();
+var Image = (props) => {
+  if (typeof NextImage !== "undefined") {
+    return /* @__PURE__ */ React3.createElement(NextImage.default, { ...props });
+  }
+  return /* @__PURE__ */ React3.createElement("img", { ...props });
+};
+var twMerge = extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+var spacing = {
+  parse: (input) => {
+    const matches = input.match(/(\d+)/gm);
+    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+    switch (matches?.length) {
+      case 1:
+        return { top, right: top, bottom: top, left: top };
+      case 2:
+        return { top, bottom: top, left: right, right };
+      case 3:
+        return { top, right, left: right, bottom };
+      default:
+        return { top, right, bottom, left };
+    }
+  },
+  isIndipendent: (input) => {
+    const { top, right, bottom, left } = spacing.parse(input);
+    return top !== bottom || right !== left;
+  }
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, styles } = props;
+  const { container = true, background, ...rest } = styles || {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: cn("sb-relative", className),
+      style: { ...!src && { background }, ...rest }
+    },
+    src && /* @__PURE__ */ React3.createElement(
+      Image,
+      {
+        src,
+        alt: "",
+        fill: true,
+        className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
+      }
+    ),
+    container ? /* @__PURE__ */ React3.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
+  );
+};
+var BuildContainerInner = React3.lazy(
+  () => import('./build-container-client-Y55WZE6M.mjs')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
+  }
+  return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: /* @__PURE__ */ React3.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3.createElement(BuildContainerInner, { ...props }));
+};
+
+export { BuildContainer, DesignWrapper, Image, builder, cn, insertAt, spacing };

package/dist/{chunk-LPIHSXYO.mjs → chunk-EQMVGJ6X.mjs}

@@ -1,41 +1,8 @@
-import { builder } from './chunk-FGQSJAOO.mjs';
+import { cn, builder, insertAt } from './chunk-BSE6WW6Q.mjs';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 
-var twMerge = extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var insertAt = (items, index, item) => {
-  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
-};
-var spacing = {
-  parse: (input) => {
-    const matches = input.match(/(\d+)/gm);
-    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
-    switch (matches?.length) {
-      case 1:
-        return { top, right: top, bottom: top, left: top };
-      case 2:
-        return { top, bottom: top, left: right, right };
-      case 3:
-        return { top, right, left: right, bottom };
-      default:
-        return { top, right, bottom, left };
-    }
-  },
-  isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
-    return top !== bottom || right !== left;
-  }
-};
-
-// src/components/context/builder-context.tsx
 var BuilderContext = React.createContext(
   null
 );
@@ -266,4 +233,4 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-export { BuilderProvider, Button, buttonVariants, cn, spacing, useBuilder };
+export { BuilderProvider, Button, buttonVariants, useBuilder };

package/dist/chunk-J36K7WVK.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var React3 = require('react');
+var NextImage = require('next/image');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
+
+// src/lib/builder.ts
+var builder = /* @__PURE__ */ (() => {
+  const components = [];
+  return {
+    register: (component, config) => {
+      if (components.find(({ name }) => name === config.name)) {
+        console.log(
+          `[simple-builder]: Component ${config.name} already registered.`
+        );
+        return;
+      }
+      components.push({
+        component,
+        ...config
+      });
+    },
+    getComponents: () => components,
+    getComponent: (name) => {
+      return components.find((c) => c.name === name);
+    },
+    bindComponent: ({ content, ...block }, edit) => {
+      const component = components.find(({ name }) => name === block.component);
+      if (!component) {
+        throw new Error(
+          `[simple-builder]: Component ${block.component} not found`
+        );
+      }
+      const Element = React3.createElement(component.component, {
+        key: block.id,
+        builder: { id: block.id, content, edit },
+        ...block.props
+      });
+      return Element;
+    }
+  };
+})();
+var Image = (props) => {
+  if (typeof NextImage__default.default !== "undefined") {
+    return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default.default, { ...props });
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("img", { ...props });
+};
+var twMerge = tailwindMerge.extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+var spacing = {
+  parse: (input) => {
+    const matches = input.match(/(\d+)/gm);
+    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+    switch (matches?.length) {
+      case 1:
+        return { top, right: top, bottom: top, left: top };
+      case 2:
+        return { top, bottom: top, left: right, right };
+      case 3:
+        return { top, right, left: right, bottom };
+      default:
+        return { top, right, bottom, left };
+    }
+  },
+  isIndipendent: (input) => {
+    const { top, right, bottom, left } = spacing.parse(input);
+    return top !== bottom || right !== left;
+  }
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, styles } = props;
+  const { container = true, background, ...rest } = styles || {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  return /* @__PURE__ */ React3__namespace.createElement(
+    "div",
+    {
+      className: cn("sb-relative", className),
+      style: { ...!src && { background }, ...rest }
+    },
+    src && /* @__PURE__ */ React3__namespace.createElement(
+      Image,
+      {
+        src,
+        alt: "",
+        fill: true,
+        className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
+      }
+    ),
+    container ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "sb-container sb-mx-auto" }, children) : children
+  );
+};
+var BuildContainerInner = React3__namespace.lazy(
+  () => import('./build-container-client-PDM3LRIQ.js')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
+};
+
+exports.BuildContainer = BuildContainer;
+exports.DesignWrapper = DesignWrapper;
+exports.Image = Image;
+exports.builder = builder;
+exports.cn = cn;
+exports.insertAt = insertAt;
+exports.spacing = spacing;

package/dist/{chunk-N2X3IJBG.js → chunk-KOBGFPWB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkUZFAGH6G_js = require('./chunk-UZFAGH6G.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var StaticContent = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(
-    chunkUZFAGH6G_js.BuildContainer,
+    chunkJ36K7WVK_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-BOQEXOAK.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-QNCUQJUB.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-IVFWYNC3.mjs → chunk-NP2NHVJP.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-FGQSJAOO.mjs';
+import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
 import * as React from 'react';
 import { lazy } from 'react';
 
@@ -15,6 +15,6 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = lazy(() => import('./builder-content-MNCJZTFS.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-GELONUMY.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-GSOMMLCG.js → chunk-XEMUNFCV.js}

@@ -1,9 +1,7 @@
 'use strict';
 
-var chunkUZFAGH6G_js = require('./chunk-UZFAGH6G.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 
@@ -27,37 +25,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx.clsx(inputs));
-}
-var insertAt = (items, index, item) => {
-  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
-};
-var spacing = {
-  parse: (input) => {
-    const matches = input.match(/(\d+)/gm);
-    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
-    switch (matches?.length) {
-      case 1:
-        return { top, right: top, bottom: top, left: top };
-      case 2:
-        return { top, bottom: top, left: right, right };
-      case 3:
-        return { top, right, left: right, bottom };
-      default:
-        return { top, right, bottom, left };
-    }
-  },
-  isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
-    return top !== bottom || right !== left;
-  }
-};
-
-// src/components/context/builder-context.tsx
 var BuilderContext = React__namespace.createContext(
   null
 );
@@ -92,7 +59,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkUZFAGH6G_js.builder.getComponent(name);
+      const component = chunkJ36K7WVK_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -114,7 +81,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => insertAt(content2, index, entry));
+        setContent((content2) => chunkJ36K7WVK_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -124,7 +91,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: insertAt(item.content?.[container], index, entry)
+                [container]: chunkJ36K7WVK_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -279,7 +246,7 @@ var Button = React__namespace.forwardRef(
     return /* @__PURE__ */ React__namespace.createElement(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: chunkJ36K7WVK_js.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }
@@ -291,6 +258,4 @@ Button.displayName = "Button";
 exports.BuilderProvider = BuilderProvider;
 exports.Button = Button;
 exports.buttonVariants = buttonVariants;
-exports.cn = cn;
-exports.spacing = spacing;
 exports.useBuilder = useBuilder;

package/dist/index.d.mts

@@ -52,7 +52,7 @@ type BuildContainerProps = {
     multiple?: boolean;
     edit: boolean;
 };
-declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.FunctionComponentElement<any>[];
+declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.JSX.Element[];
 
 declare const BuilderContent: React.LazyExoticComponent<(props: {
     content?: _simple_builder_server.BuilderContent | undefined;

package/dist/index.d.ts

@@ -52,7 +52,7 @@ type BuildContainerProps = {
     multiple?: boolean;
     edit: boolean;
 };
-declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.FunctionComponentElement<any>[];
+declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.JSX.Element[];
 
 declare const BuilderContent: React.LazyExoticComponent<(props: {
     content?: _simple_builder_server.BuilderContent | undefined;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkN2X3IJBG_js = require('./chunk-N2X3IJBG.js');
-var chunkUZFAGH6G_js = require('./chunk-UZFAGH6G.js');
+var chunkKOBGFPWB_js = require('./chunk-KOBGFPWB.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkN2X3IJBG_js.BuilderContent; }
+  get: function () { return chunkKOBGFPWB_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkN2X3IJBG_js.StaticContent; }
+  get: function () { return chunkKOBGFPWB_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkUZFAGH6G_js.BuildContainer; }
+  get: function () { return chunkJ36K7WVK_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkUZFAGH6G_js.builder; }
+  get: function () { return chunkJ36K7WVK_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-IVFWYNC3.mjs';
-export { BuildContainer, builder } from './chunk-FGQSJAOO.mjs';
+export { BuilderContent, StaticContent } from './chunk-NP2NHVJP.mjs';
+export { BuildContainer, builder } from './chunk-BSE6WW6Q.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -44,7 +44,7 @@
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.0",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.3"
+    "@simple-builder/server": "1.0.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/dist/chunk-FGQSJAOO.mjs

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { createElement } from 'react';
-
-// src/lib/builder.ts
-var builder = /* @__PURE__ */ (() => {
-  const components = [];
-  return {
-    register: (component, config) => {
-      if (components.find(({ name }) => name === config.name)) {
-        console.log(
-          `[simple-builder]: Component ${config.name} already registered.`
-        );
-        return;
-      }
-      components.push({
-        component,
-        ...config
-      });
-    },
-    getComponents: () => components,
-    getComponent: (name) => {
-      return components.find((c) => c.name === name);
-    },
-    bindComponent: ({ content, ...block }, edit) => {
-      const component = components.find(({ name }) => name === block.component);
-      if (!component) {
-        throw new Error(
-          `[simple-builder]: Component ${block.component} not found`
-        );
-      }
-      const Element = createElement(component.component, {
-        key: block.id,
-        builder: { id: block.id, content, edit },
-        ...block.props
-      });
-      return Element;
-    }
-  };
-})();
-var BuildContainerInner = React.lazy(
-  () => import('./build-container-client-R2FNJHPM.mjs')
-);
-var BuildContainer = (props) => {
-  const { content, edit, name } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!edit) {
-    return items.map((item) => builder.bindComponent(item));
-  }
-  return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: /* @__PURE__ */ React.createElement("div", null, "Loading...") }, /* @__PURE__ */ React.createElement(BuildContainerInner, { ...props }));
-};
-
-export { BuildContainer, builder };