@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260320043430 → 0.8.1-dev.20260320070922

package/dist/index.js

@@ -2101,7 +2101,7 @@ var DataList = (props) => {
       }
     }
   }, [props.dataset]);
-  function getNestedProperty(obj, path) {
+  function getNestedProperty2(obj, path) {
     if (path.includes(".")) {
       return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
     } else if (Array.isArray(obj[path])) {
@@ -2385,7 +2385,7 @@ var DataList = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { className: "divide-y divide-gray-200 ", children: props.dataset?.result?.map((dataitem, index) => {
           let validityClass = "";
           console.log("dataitem", dataitem);
-          if (props.recordValidityColumnName && getNestedProperty(dataitem, props.recordValidityColumnName) == false) {
+          if (props.recordValidityColumnName && getNestedProperty2(dataitem, props.recordValidityColumnName) == false) {
             validityClass = "bg-alert-200";
           }
           return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
@@ -2403,7 +2403,7 @@ var DataList = (props) => {
                       ViewControl_default,
                       {
                         controlType: column.controlType,
-                        value: getNestedProperty(
+                        value: getNestedProperty2(
                           dataitem,
                           column.name
                         ),
@@ -2420,7 +2420,7 @@ var DataList = (props) => {
                       ViewControl_default,
                       {
                         controlType: column.controlType,
-                        value: getNestedProperty(dataitem, column.name) || column.emptyValueLabel,
+                        value: getNestedProperty2(dataitem, column.name) || column.emptyValueLabel,
                         format: column.format,
                         customProps: column.customProps
                       }
@@ -2430,7 +2430,7 @@ var DataList = (props) => {
                   ViewControl_default,
                   {
                     controlType: column.controlType,
-                    value: getNestedProperty(dataitem, column.name),
+                    value: getNestedProperty2(dataitem, column.name),
                     format: column.format,
                     customProps: column.customProps
                   }
@@ -2535,7 +2535,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react49 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react37 = __toESM(require("react"));
@@ -2548,19 +2548,57 @@ var TextNode = (props) => {
   };
   function cssStringToJson(cssString) {
     const styleObject = {};
-    const matches = cssString.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
-    if (matches && matches.length === 3) {
-      const property = matches[1].trim();
-      const value = matches[2].trim();
-      {
-      }
-      styleObject[property] = value;
+    const matches = cssString?.match(/([\w-]+)\s*:\s*([^;]+)\s*;/g);
+    if (matches) {
+      matches.forEach((match) => {
+        const parts = match.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
+        if (parts && parts.length === 3) {
+          const property = parts[1].trim();
+          const value = parts[2].trim();
+          styleObject[property] = value;
+        }
+      });
     }
     return styleObject;
   }
-  const Formats = ["", "font-semibold"];
-  const styles = cssStringToJson(props.node.style || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { ...styles }, className: props.node.format < Formats.length ? Formats[props.node.format] : "", children: props.node.text });
+  function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+  }
+  function convertKeysToCamelCase(obj) {
+    if (Array.isArray(obj)) {
+      return obj.map(convertKeysToCamelCase);
+    } else if (obj !== null && typeof obj === "object") {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([_, value]) => value !== "").map(([key, value]) => [
+          toCamelCase(key),
+          convertKeysToCamelCase(value)
+        ])
+      );
+    }
+    return obj;
+  }
+  function getFormatClass(format) {
+    const classes = [];
+    if (format === 1) classes.push("font-medium");
+    if (format === 2) classes.push("italic");
+    if (format === 3) classes.push("font-medium italic");
+    if (format === 8) classes.push("underline");
+    if (format === 9) classes.push("font-medium underline");
+    if (format === 10) classes.push("italic underline");
+    if (format === 11) classes.push("font-medium italic underline");
+    if (format === 256) classes.push("lowercase");
+    if (format === 512) classes.push("uppercase");
+    if (format === 1024) classes.push("capitalize");
+    return classes.join(" ");
+  }
+  const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
+  function replacePlaceholders(template, dataItem) {
+    return template.replace(/{(\w+)}/g, (_, key) => {
+      return key in dataItem ? dataItem[key] : `{${key}}`;
+    });
+  }
+  const displayText = props.linkText ? props.linkText : props.node.text;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { ...styles }, className: getFormatClass(props.node.format), children: props.dataitem && props.linkText ? displayText : props.dataitem ? replacePlaceholders(props.node.text, props.dataitem) : props.node.text });
 };
 var TextNode_default = TextNode;
 
@@ -2600,7 +2638,7 @@ var SVGIconNode = ({ node }) => {
     "span",
     {
       style: {
-        display: "flex",
+        display: "inline-flex",
         width: node.width,
         height: node.height,
         color: node.color
@@ -2646,39 +2684,172 @@ var EquationNode = ({ node }) => {
 };
 var EquationNode_default = EquationNode;
 
-// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
+// src/components/pageRenderingEngine/nodes/DatafieldNode.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
+function getNestedProperty(obj, path) {
+  if (!obj || !path) return null;
+  if (path.includes(".")) {
+    return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
+  } else if (Array.isArray(obj[path])) {
+    return obj[path].map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: item }, index));
+  } else {
+    return obj[path];
+  }
+}
+var DatafieldNode = (props) => {
+  function cssStringToJson(cssString) {
+    const styleObject = {};
+    const matches = cssString?.match(/([\w-]+)\s*:\s*([^;]+)\s*;/g);
+    if (matches) {
+      matches.forEach((match) => {
+        const parts = match.match(/([\w-]+)\s*:\s*([^;]+)\s*;/);
+        if (parts && parts.length === 3) {
+          const property = parts[1].trim();
+          const value2 = parts[2].trim();
+          styleObject[property] = value2;
+        }
+      });
+    }
+    return styleObject;
+  }
+  function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+  }
+  function convertKeysToCamelCase(obj) {
+    if (!obj || typeof obj !== "object") return obj;
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value2]) => [toCamelCase(key), value2])
+    );
+  }
+  const Formats = [
+    "",
+    "font-medium",
+    "italic",
+    "font-medium italic",
+    "",
+    "",
+    "",
+    "",
+    "underline",
+    "font-medium underline",
+    "italic underline",
+    "italic underline font-medium"
+  ];
+  const styles = convertKeysToCamelCase(cssStringToJson(props.node.style));
+  const fieldName = props.node.fieldName;
+  const value = props.dataitem ? getNestedProperty(props.dataitem, fieldName) : null;
+  console.log(fieldName, value, "haha");
+  const isEmptyValue = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0 || typeof value === "object" && Object.keys(value).length === 0;
+  const maxLines = props.node.maxLines;
+  if (maxLines && Number(maxLines) > 0) {
+    Object.assign(styles, {
+      display: "-webkit-box",
+      overflow: "hidden",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: String(maxLines)
+    });
+  }
+  const dataType = props.node.dataType;
+  if (isEmptyValue) {
+    return null;
+  }
+  if (dataType == "rawContent") {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      PageBodyRenderer_default,
+      {
+        rawBody: value ?? `@databound[${fieldName}]`,
+        routeParameters: props.routeParameters,
+        query: props.query,
+        session: props.session,
+        host: props.host,
+        path: props.path,
+        apiBaseUrl: props.apiBaseUrl,
+        breadcrumb: props.breadcrumb,
+        donotApplyContainerClass: true
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "span",
+    {
+      className: `datafield-node ${props.node.format < Formats.length ? Formats[props.node.format] : ""}`,
+      style: styles,
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        ViewControl_default,
+        {
+          controlType: dataType,
+          value: value ?? `@databound[${fieldName}]`
+        }
+      )
+    }
+  );
+};
+var DatafieldNode_default = DatafieldNode;
+
+// src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ParagraphNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
     ["linebreak"]: LineBreakNode_default,
     ["link"]: LinkNode_default,
+    ["datafield"]: DatafieldNode_default,
     ["equation"]: EquationNode_default,
     ["svg-icon"]: SVGIconNode_default
   };
   const FormatClass = {
-    "center": "text-center"
+    "center": "text-center",
+    "right": "text-right"
   };
   {
   }
   let formatClasses = FormatClass[props.node.format] || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "my-1 " + formatClasses, children: [
-    props.node.children && props.node.children.map((node, index) => {
+  const isInlineOnlyParent = props.parentTag === "summary";
+  const hasChildren = props.node.children && props.node.children.length > 0;
+  if (isInlineOnlyParent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: hasChildren && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react37.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectedNode, { node }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react37.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        SelectedNode,
+        {
+          node,
+          dataitem: props.dataitem,
+          session: props.session,
+          apiBaseUrl: props.apiBaseUrl,
+          routeParameters: props.routeParameters
+        }
+      ) }, index);
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: " " + formatClasses, children: [
+    hasChildren && props.node.children.map((node, index) => {
+      const SelectedNode = NodeTypes2[node.type];
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react37.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        SelectedNode,
+        {
+          node,
+          dataitem: props.dataitem,
+          session: props.session,
+          apiBaseUrl: props.apiBaseUrl,
+          routeParameters: props.routeParameters
+        }
+      ) }, index);
     }),
-    props.node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "py-0.5 lg:py-1.5" })
+    !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "py-1.5 lg:py-2" })
   ] });
 };
 var ParagraphNode_default = ParagraphNode;
 
 // src/components/pageRenderingEngine/nodes/HeadingNode.tsx
 var import_react38 = __toESM(require("react"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var HeadingNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
-    ["link"]: LinkNode_default
+    ["link"]: LinkNode_default,
+    ["svg-icon"]: SVGIconNode_default,
+    // ["linebreak"]: LineBreakNodeNew,
+    ["datafield"]: DatafieldNode_default
   };
   const HeadingTag = `${props.node.tag}`;
   const FormatClass = {
@@ -2687,12 +2858,12 @@ var HeadingNode = (props) => {
   {
   }
   let formatClasses = FormatClass[props.node.format] || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: import_react38.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: import_react38.default.createElement(
     HeadingTag,
     { className: formatClasses },
     props.node.children && props.node.children.map((childNode, index) => {
       const SelectedNode = NodeTypes2[childNode.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react38.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectedNode, { node: childNode }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react38.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectedNode, { node: childNode, dataitem: props.dataitem, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
     })
   ) });
 };
@@ -2703,34 +2874,54 @@ var import_react40 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ListItemNode.tsx
 var import_react39 = __toESM(require("react"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var ListItemNode = (props) => {
   const NodeTypes2 = {
-    ["text"]: TextNode_default,
-    ["linebreak"]: LineBreakNode_default,
-    ["link"]: LinkNode_default
+    text: TextNode_default,
+    linebreak: LineBreakNode_default,
+    link: LinkNode_default,
+    list: ListNode_default
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: props.node.children && props.node.children.map((node, index) => {
+  let foundFirstBreak = false;
+  const firstTextChild = props.node.children?.find((c) => c.type === "text");
+  let liStyle = {};
+  if (firstTextChild?.style) {
+    const match = firstTextChild.style.match(/font-size\s*:\s*([^;]+);?/);
+    if (match) {
+      liStyle.fontSize = match[1].trim();
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { style: liStyle, children: props.node.children && props.node.children.map((node, index) => {
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react39.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectedNode, { node }) }, index);
+    if (node.type === "linebreak") {
+      if (!foundFirstBreak) {
+        foundFirstBreak = true;
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {}, index);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "py-1 lg:py-2" }, index);
+      }
+    } else {
+      foundFirstBreak = false;
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react39.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
+    }
   }) });
 };
 var ListItemNode_default = ListItemNode;
 
 // src/components/pageRenderingEngine/nodes/ListNode.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ListNode = (props) => {
   const NodeTypes2 = {
     listitem: ListItemNode_default
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react40.default.Fragment, { children: [
-    props.node.listType == "bullet" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: props.node.children && props.node.children.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react40.default.Fragment, { children: [
+    props.node.listType == "bullet" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectedNode, { node }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
     }) }),
-    props.node.listType == "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ol", { children: props.node.children && props.node.children.map((node, index) => {
+    props.node.listType == "number" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ol", { children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectedNode, { node }) }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react40.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
     }) })
   ] });
 };
@@ -2738,56 +2929,118 @@ var ListNode_default = ListNode;
 
 // src/components/pageRenderingEngine/nodes/QuoteNode.tsx
 var import_react41 = __toESM(require("react"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var QuoteNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
     ["linebreak"]: LineBreakNode_default,
     ["link"]: LinkNode_default
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("blockquote", { children: props.node.children && props.node.children.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("blockquote", { children: props.node.children && props.node.children.map((node, index) => {
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react41.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectedNode, { node }) }, index);
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react41.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
   }) });
 };
 var QuoteNode_default = QuoteNode;
 
 // src/components/pageRenderingEngine/nodes/CodeNode.tsx
-var import_react42 = __toESM(require("react"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react43 = __toESM(require("react"));
+
+// src/components/CopyButton.tsx
+var import_react42 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function CopyButton({ text }) {
+  const [copied, setCopied] = (0, import_react42.useState)(false);
+  const timeoutRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex gap-1 items-center hover:text-white transition",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            className: "w-4 h-4",
+            fill: "currentColor",
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z"
+              }
+            )
+          }
+        ),
+        copied ? "Copied!" : "Copy code"
+      ]
+    }
+  );
+}
+
+// src/components/pageRenderingEngine/nodes/CodeNode.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var CodeNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
     ["linebreak"]: LineBreakNode_default,
     ["link"]: LinkNode_default
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("code", { children: props.node.children && props.node.children.map((node, index) => {
-    const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react42.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectedNode, { node }) }, index);
-  }) });
+  const textContent = props.node?.children?.map((node) => {
+    if (node.type === "text") return node.text || "";
+    if (node.type === "linebreak") return "\n";
+    if (node.type === "link") return node.text || node.url || "";
+    return "";
+  }).join("") ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "code-block", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center relative text-gray-200 bg-gray-800 px-4 py-2.5 text-xs font-sans justify-between rounded-t-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: "Code Snippet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CopyButton, { text: textContent })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
+      const SelectedNode = NodeTypes2[node.type];
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react43.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+    }) })
+  ] });
 };
 var CodeNode_default = CodeNode;
 
 // src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var HorizontalRuleNode = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("hr", {});
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("hr", {});
 };
 var HorizontalRuleNode_default = HorizontalRuleNode;
 
-// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
-var import_react45 = __toESM(require("react"));
-
 // src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
-var import_react44 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
-var import_react43 = __toESM(require("react"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react44 = __toESM(require("react"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var ImageNode = (props) => {
   const { node, apiBaseUrl = "" } = props;
   let imageUrl = node.imageUrl.startsWith("http") ? node.imageUrl : `${apiBaseUrl}/digitalassets/storefront/${node.imageUrl}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react43.default.Fragment, { children: node.width ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { style: { width: node.width }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react44.default.Fragment, { children: node.width ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { width: node.width }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "img",
     {
       loading: "lazy",
@@ -2797,7 +3050,7 @@ var ImageNode = (props) => {
       height: node.intrinsicHeight,
       alt: node.title
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "img",
     {
       loading: "lazy",
@@ -2811,8 +3064,204 @@ var ImageNode = (props) => {
 };
 var ImageNode_default = ImageNode;
 
+// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
+var import_react45 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var WidgetNode = (props) => {
+  const getWidgetParameters = () => {
+    const widgetInputParameters = { ...props.routeParameters ?? {} };
+    const rawWidgetParams = props.node?.widgetParameters ?? props.node?.widgetParams;
+    let widgetParameters = {};
+    const isJSON = (str) => {
+      if (typeof str !== "string") return false;
+      str = str.trim();
+      return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
+    };
+    if (rawWidgetParams) {
+      if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
+        widgetParameters = JSON.parse(rawWidgetParams);
+      } else if (typeof rawWidgetParams === "object") {
+        widgetParameters = rawWidgetParams;
+      }
+    }
+    const resolveValue = (val) => {
+      if (typeof val === "string") {
+        const m = /^\{(.+)\}$/.exec(val);
+        if (m) {
+          const actualKey = m[1];
+          return props.routeParameters?.[actualKey] ?? val;
+        }
+        return val;
+      } else if (Array.isArray(val)) {
+        return val.map(resolveValue);
+      } else if (val && typeof val === "object") {
+        const out = {};
+        for (const k of Object.keys(val)) {
+          out[k] = resolveValue(val[k]);
+        }
+        return out;
+      }
+      return val;
+    };
+    Object.keys(widgetParameters).forEach((key) => {
+      const rawVal = widgetParameters[key];
+      if (rawVal === "route") {
+        if (key === "itemPath") {
+          widgetInputParameters[key] = props.path;
+        } else {
+          widgetInputParameters[key] = widgetInputParameters[key] ?? null;
+        }
+      } else {
+        widgetInputParameters[key] = resolveValue(rawVal);
+      }
+    });
+    widgetInputParameters["widgetTitle"] = props.node?.widgetTitle;
+    return widgetInputParameters;
+  };
+  const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
+  if (!SelectedWidget) {
+    console.warn("Widget not found:", props.node.widgetCode);
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+      "Widget not found: ",
+      props.node.widgetCode
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react45.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    SelectedWidget,
+    {
+      params: getWidgetParameters(),
+      query: props.query,
+      session: props.session,
+      host: props.host,
+      path: props.path,
+      apiBaseUrl: props.apiBaseUrl
+    }
+  ) });
+};
+var WidgetNode_default = WidgetNode;
+
+// src/components/pageRenderingEngine/nodes/IframeClient.tsx
+var import_react47 = __toESM(require("react"));
+
+// src/components/IFrameLoaderView.tsx
+var import_react46 = __toESM(require("react"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var IFrameLoaderView = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react46.default.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] })
+      ] })
+    ] }) }),
+    props.children
+  ] });
+};
+var IFrameLoaderView_default = IFrameLoaderView;
+
+// src/components/pageRenderingEngine/nodes/IframeClient.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var IframeClient = ({ src }) => {
+  const iframeRef = (0, import_react47.useRef)(null);
+  const [iframeHeight, setIframeHeight] = (0, import_react47.useState)("100%");
+  const [isDataFound, setIsDataFound] = (0, import_react47.useState)(null);
+  (0, import_react47.useEffect)(() => {
+    const handleReceiveMessage = (event) => {
+      const eventName = event?.data?.eventName;
+      const payload = event?.data?.payload;
+      if (eventName === "SET_HEIGHT" && payload?.height) {
+        let height = 500;
+        if (payload.height > 500) {
+          height = payload.height + 50;
+        }
+        setIframeHeight(`${height}px`);
+      }
+    };
+    window.addEventListener("message", handleReceiveMessage);
+    return () => window.removeEventListener("message", handleReceiveMessage);
+  }, []);
+  (0, import_react47.useEffect)(() => {
+    const handleResize = () => {
+      if (iframeRef.current) {
+        iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const handleIframeLoad = () => {
+    setIsDataFound(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react47.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      className: "w-full h-full border-none",
+      scrolling: "no",
+      onLoad: handleIframeLoad
+    }
+  ) }) });
+};
+var IframeClient_default = IframeClient;
+
+// src/components/pageRenderingEngine/nodes/EmbedNode.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var EmbedNode = (props) => {
+  let src;
+  if (props.node.provider == "youtube") {
+    src = `https://www.youtube-nocookie.com/embed/${props.node.embedSrc}`;
+  } else if (props.node.provider == "bunny") {
+    src = `https://iframe.mediadelivery.net/embed/${props.node.embedSrc}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
+  } else {
+    src = props.node.embedSrc;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aspect-video", children: src && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IframeClient_default, { src }) });
+};
+var EmbedNode_default = EmbedNode;
+
+// src/components/pageRenderingEngine/nodes/VideoNode.tsx
+var import_react48 = __toESM(require("react"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var VideoNode = (props) => {
+  let src;
+  if (props.node.provider == "youtube") {
+    src = `https://www.youtube-nocookie.com/embed/${props.node.videoId}`;
+  } else if (props.node.provider == "bunny") {
+    src = `https://iframe.mediadelivery.net/embed/${props.node.videoId}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react48.default.Fragment, { children: src && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
+};
+var VideoNode_default = VideoNode;
+
 // src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var LayoutItemNode = (props) => {
   const NodeTypes2 = {
     ["paragraph"]: ParagraphNode_default,
@@ -2823,7 +3272,11 @@ var LayoutItemNode = (props) => {
     ["horizontalrule"]: HorizontalRuleNode_default,
     ["image"]: ImageNode_default,
     ["layout-container"]: LayoutContainerNode_default,
-    ["link"]: LinkNode_default
+    ["link"]: LinkNode_default,
+    ["widget"]: WidgetNode_default,
+    ["youtube"]: VideoNode_default,
+    ["video"]: VideoNode_default,
+    ["embed"]: EmbedNode_default
   };
   let cssClasses = "";
   if (props.order) {
@@ -2841,6 +3294,7 @@ var LayoutItemNode = (props) => {
   }
   if (props.node.itemBorderRadius) {
     styles.borderRadius = props.node.itemBorderRadius;
+    styles.overflow = "hidden";
   }
   function removeParagraphsAtStartAndEnd(layoutItem) {
     let startIndex = 0;
@@ -2857,6 +3311,8 @@ var LayoutItemNode = (props) => {
     }
     if (startIndex <= endIndex) {
       layoutItem.children = layoutItem.children.slice(startIndex, endIndex + 1);
+    } else {
+      layoutItem.children = [];
     }
     return layoutItem;
   }
@@ -2866,201 +3322,160 @@ var LayoutItemNode = (props) => {
   } else {
     updatedLayout = removeParagraphsAtStartAndEnd(props.node);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "" + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react44.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectedNode, { node }) }, index);
-  }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react49.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      SelectedNode,
+      {
+        node,
+        routeParameters: props.routeParameters,
+        query: props.query,
+        session: props.session,
+        host: props.host,
+        path: props.path,
+        apiBaseUrl: props.apiBaseUrl
+      }
+    ) }, index);
+  }) }) });
 };
 var LayoutItemNode_default = LayoutItemNode;
 
-// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var VERTICAL_ALIGNMENT_CLASSES = {
-  "start": "items-start",
-  "center": "items-center",
-  "end": "items-end",
-  "stretch": "items-stretch",
-  "baseline": "items-baseline"
-};
-var LAYOUTGRID_COLS_CLASSES = {
-  "1fr": "layout-grid-col-1",
-  "1fr 1fr": "layout-grid-col-2-equal",
-  "1fr 2fr": "layout-grid-col-2-widths-33-67",
-  "2fr 1fr": "layout-grid-col-2-widths-67-33",
-  "3fr 2fr": "layout-grid-col-2-widths-60-40",
-  "3fr 1fr": "layout-grid-col-2-widths-75-25",
-  "1fr 1fr 1fr": "layout-grid-col-3-equal",
-  "1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
-  "1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
-  "1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
+// src/components/utilities/AssetUtility.tsx
+var AssetUtility = class {
+  constructor() {
+  }
+  static resolveUrl(apiBaseUrl, url) {
+    if (!url) return void 0;
+    if (url.startsWith("http")) return url;
+    if (!apiBaseUrl) return url;
+    return `${apiBaseUrl}/digitalassets-management/${url}`;
+  }
 };
+var AssetUtility_default = AssetUtility;
+
+// src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var LayoutContainerNode = (props) => {
-  const { node, apiBaseUrl = "" } = props;
-  let gridCssClasses = LAYOUTGRID_COLS_CLASSES[node.templateColumns];
-  if (node.contentVerticalAlignment) {
-    {
-    }
-    gridCssClasses = gridCssClasses + " " + (VERTICAL_ALIGNMENT_CLASSES[node.contentVerticalAlignment] || "");
-  }
-  let columnGap = "0.5rem";
-  if (node.columnGap && node.columnGap != "") {
-    columnGap = node.columnGap;
+  const VERTICAL_ALIGNMENT_CLASSES = {
+    start: "items-start",
+    center: "items-center place-content-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+  };
+  const LAYOUTGRID_COLS_CLASSES = {
+    "1fr": "layout-grid-col-1",
+    "1fr 1fr": "layout-grid-col-2-equal",
+    "1fr 2fr": "layout-grid-col-2-widths-33-67",
+    "2fr 1fr": "layout-grid-col-2-widths-67-33",
+    "3fr 2fr": "layout-grid-col-2-widths-60-40",
+    "3fr 1fr": "layout-grid-col-2-widths-75-25",
+    "1fr 1fr 1fr": "layout-grid-col-3-equal",
+    "1fr 2fr 1fr": "layout-grid-col-3-widths-25-50-25",
+    "1fr 6fr 1fr": "layout-grid-col-3-widths-15-70-15",
+    "1fr 1fr 1fr 1fr": "layout-grid-col-4-equal"
+  };
+  const sectionWidth = props.node.sectionWidth || "fixed";
+  let gridCssClasses = LAYOUTGRID_COLS_CLASSES[props.node.templateColumns] || "";
+  if (props.node.contentVerticalAlignment) {
+    gridCssClasses += " " + (VERTICAL_ALIGNMENT_CLASSES[props.node.contentVerticalAlignment] || "");
   }
+  const columnGap = props.node.columnGap || "0.5rem";
   const styles = {};
-  if (node.backgroundColor) {
-    styles.backgroundColor = node.backgroundColor;
-  }
-  let cssClasses = "layout_grid ";
+  let cssClasses = "layout_grid";
   let addPadding = false;
-  if (node.boxShadow) {
-    {
-    }
-    cssClasses = cssClasses + " " + (node.boxShadow || "");
-    addPadding = true;
+  if (props.node.backgroundColor) {
+    styles.backgroundColor = props.node.backgroundColor;
   }
-  if (node.borderWidth) {
-    styles.borderWidth = node.borderWidth;
+  if (props.node.borderWidth) {
+    styles.borderWidth = props.node.borderWidth;
     addPadding = true;
   }
-  if (node.borderRadius) {
-    styles.borderRadius = node.borderRadius;
+  if (props.node.borderRadius) {
+    styles.borderRadius = props.node.borderRadius;
   }
-  let backgroundStyle = "";
-  if (node.backgroundImage) {
-    let resolvedPath = node.backgroundImage;
-    if (!resolvedPath.startsWith("http")) {
-      resolvedPath = `${apiBaseUrl}/digitalassets/storefront/${resolvedPath}`;
-    }
-    backgroundStyle = `url('${resolvedPath}'),`;
-  }
-  if (node.gradientColor1 && node.gradientColor2) {
-    backgroundStyle += `linear-gradient(to bottom, ${node.gradientColor1}, ${node.gradientColor2}),`;
+  if (props.node.boxShadow && props.node.boxShadow !== "shadow-none") {
+    cssClasses += " " + props.node.boxShadow;
+    addPadding = true;
   }
-  if (node.backgroundColor) {
-    backgroundStyle += `${node.backgroundColor},`;
+  const backgroundLayers = [];
+  if (props.node.backgroundImage) {
+    const resolved = AssetUtility_default.resolveUrl(
+      props.apiBaseUrl,
+      props.node.backgroundImage
+    );
+    if (resolved) {
+      backgroundLayers.push(`url('${resolved}')`);
+      addPadding = true;
+    }
   }
-  if (backgroundStyle && backgroundStyle != "") {
-    let stringWithoutTrailingComma = backgroundStyle.replace(/,(\s*)$/, "$1");
-    styles.background = stringWithoutTrailingComma;
+  if (props.node.gradientColor1 && props.node.gradientColor2) {
+    backgroundLayers.push(
+      `linear-gradient(to bottom, ${props.node.gradientColor1}, ${props.node.gradientColor2})`
+    );
+    addPadding = true;
+  } else if (props.node.gradientColor1) {
+    backgroundLayers.push(props.node.gradientColor1);
+    addPadding = true;
+  } else if (props.node.gradientColor2) {
+    backgroundLayers.push(props.node.gradientColor2);
     addPadding = true;
   }
-  let sectionWidth = "fixed";
-  if (node.sectionWidth) {
-    sectionWidth = node.sectionWidth;
+  if (backgroundLayers.length) {
+    styles.background = backgroundLayers.join(", ");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react45.default.Fragment, { children: [
-    sectionWidth == "mixed" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cssClasses, style: { ...styles }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "grid gap-y-8  " + gridCssClasses + (addPadding ? " px-4 py-4 lg:px-6 lg:py-6 " : ""), style: { columnGap, minHeight: node.height }, children: node.children && node.children.map((node2, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
-    }) }) }) }),
-    sectionWidth == "full" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    LayoutItemNode_default,
+    {
+      node,
+      order: props.node.smOrder === "reverse" ? props.node.children.length - index : index,
+      routeParameters: props.routeParameters,
+      query: props.query,
+      session: props.session,
+      host: props.host,
+      path: props.path,
+      apiBaseUrl: props.apiBaseUrl
+    },
+    index
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+    sectionWidth === "mixed" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "div",
       {
-        className: "grid gap-y-8 " + cssClasses + " " + gridCssClasses + (addPadding ? " p-4 lg:p-0" : ""),
+        className: `grid gap-y-4 lg:gap-y-0 ${gridCssClasses} ${addPadding ? "py-8 lg:py-6" : ""}`,
+        style: { columnGap, minHeight: props.node.height },
+        children: renderChildren()
+      }
+    ) }) }),
+    sectionWidth === "full" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      "div",
+      {
+        className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "p-8 lg:p-0" : ""}`,
         style: { columnGap, ...styles },
-        children: node.children && node.children.map((node2, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
-        })
+        children: renderChildren()
       }
     ),
-    sectionWidth == "fixed" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    sectionWidth === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "container", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "div",
       {
-        className: "grid gap-y-8 " + cssClasses + " " + gridCssClasses + (addPadding ? " px-4 py-4 lg:px-6 lg:py-6 " : ""),
+        className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "px-8 py-6 lg:px-6 lg:py-6" : ""}`,
         style: { columnGap, ...styles },
-        children: node.children && node.children.map((node2, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LayoutItemNode_default, { node: node2, order: props.node.smOrder == "reverse" ? node2.children.length - index : index }) }, index);
-        })
+        children: renderChildren()
       }
     ) })
   ] });
 };
 var LayoutContainerNode_default = LayoutContainerNode;
 
-// src/components/pageRenderingEngine/nodes/WidgetNode.tsx
-var import_react46 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var WidgetNode = (props) => {
-  const getWidgetParameters = () => {
-    const widgetInputParameters = { ...props.routeParameters ?? {} };
-    const rawWidgetParams = props.node?.widgetParameters ?? props.node?.widgetParams;
-    let widgetParameters = {};
-    const isJSON = (str) => {
-      if (typeof str !== "string") return false;
-      str = str.trim();
-      return str.startsWith("{") && str.endsWith("}") || str.startsWith("[") && str.endsWith("]");
-    };
-    if (rawWidgetParams) {
-      if (typeof rawWidgetParams === "string" && isJSON(rawWidgetParams)) {
-        widgetParameters = JSON.parse(rawWidgetParams);
-      } else if (typeof rawWidgetParams === "object") {
-        widgetParameters = rawWidgetParams;
-      }
-    }
-    const resolveValue = (val) => {
-      if (typeof val === "string") {
-        const m = /^\{(.+)\}$/.exec(val);
-        if (m) {
-          const actualKey = m[1];
-          return props.routeParameters?.[actualKey] ?? val;
-        }
-        return val;
-      } else if (Array.isArray(val)) {
-        return val.map(resolveValue);
-      } else if (val && typeof val === "object") {
-        const out = {};
-        for (const k of Object.keys(val)) {
-          out[k] = resolveValue(val[k]);
-        }
-        return out;
-      }
-      return val;
-    };
-    Object.keys(widgetParameters).forEach((key) => {
-      const rawVal = widgetParameters[key];
-      if (rawVal === "route") {
-        if (key === "itemPath") {
-          widgetInputParameters[key] = props.path;
-        } else {
-          widgetInputParameters[key] = widgetInputParameters[key] ?? null;
-        }
-      } else {
-        widgetInputParameters[key] = resolveValue(rawVal);
-      }
-    });
-    widgetInputParameters["widgetTitle"] = props.node?.widgetTitle;
-    return widgetInputParameters;
-  };
-  const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
-  if (!SelectedWidget) {
-    console.warn("Widget not found:", props.node.widgetCode);
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-      "Widget not found: ",
-      props.node.widgetCode
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react46.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    SelectedWidget,
-    {
-      params: getWidgetParameters(),
-      query: props.query,
-      session: props.session,
-      host: props.host,
-      path: props.path,
-      apiBaseUrl: props.apiBaseUrl
-    }
-  ) });
-};
-var WidgetNode_default = WidgetNode;
-
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-var import_react47 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/InputControlNode.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var InputControlNode = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     InputControl_default,
     {
       name: props.node.name,
@@ -3089,19 +3504,19 @@ var InputControlNode = (props) => {
 var InputControlNode_default = InputControlNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var FormContainerNode = (props) => {
   const NodeTypes2 = {
     ["input-control"]: InputControlNode_default
   };
   const { node } = props;
-  const formRef = (0, import_react47.useRef)(null);
+  const formRef = (0, import_react50.useRef)(null);
   const initialState = {
     inputValues: {},
     lastPropertyChanged: ""
   };
-  const [formState, dispatch] = (0, import_react47.useReducer)(FormReducer_default, initialState);
-  const handleInputChange = (0, import_react47.useCallback)((updatedValues) => {
+  const [formState, dispatch] = (0, import_react50.useReducer)(FormReducer_default, initialState);
+  const handleInputChange = (0, import_react50.useCallback)((updatedValues) => {
     dispatch({ type: FORM_INPUT_UPDATE, name: updatedValues.name, value: updatedValues.value });
   }, [dispatch]);
   const onValidate = async () => {
@@ -3112,7 +3527,7 @@ var FormContainerNode = (props) => {
       return true;
     }
   };
-  (0, import_react47.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const fetchInitialData = async () => {
       if (!props.fetchData || !node.dataFetchApi) return;
       const response = await props.fetchData(
@@ -3129,12 +3544,12 @@ var FormContainerNode = (props) => {
     };
     fetchInitialData();
   }, [props.fetchData, node.dataFetchApi, props.routeParameters]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
     node.children && node.children.map((node2, index) => {
       {
       }
       const SelectedNode = NodeTypes2[node2.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react47.default.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react50.default.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         InputControlNode_default,
         {
           value: formState.inputValues[node2.name],
@@ -3143,34 +3558,15 @@ var FormContainerNode = (props) => {
         }
       ) }, index);
     }),
-    node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "py-0.5 lg:py-1.5" })
+    node.children.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "py-0.5 lg:py-1.5" })
   ] });
 };
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_react48 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_link3 = __toESM(require("next/link"));
-
-// src/components/utilities/AssetUtility.tsx
-var AssetUtility = class {
-  constructor() {
-  }
-  static resolveUrl(apiBaseUrl, url) {
-    if (url) {
-      if (url.startsWith("http")) {
-        return url;
-      } else {
-        return `${apiBaseUrl}/digitalassets-management/${url}`;
-      }
-    }
-    return void 0;
-  }
-};
-var AssetUtility_default = AssetUtility;
-
-// src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var DivContainer = (props) => {
   const { cssProperties: styles, hoverCssProperties: hoverStyles, mobileCssProperties: mobileStyles } = props.node;
   const updatedStyles = convertKeysToCamelCase(styles);
@@ -3184,8 +3580,10 @@ var DivContainer = (props) => {
     ["horizontalrule"]: HorizontalRuleNode_default,
     ["layout-container"]: LayoutContainerNode_default,
     ["widget"]: WidgetNode_default,
+    ["embed"]: EmbedNode_default,
     ["div-container"]: DivContainer,
     ["text"]: TextNode_default,
+    ["datafield"]: DatafieldNode_default,
     ["svg-icon"]: SVGIconNode_default
   };
   function toCamelCase(str) {
@@ -3287,9 +3685,9 @@ ${mobileCssRules.join("\n")}
     return css2;
   };
   const css = generateCssString(updatedStyle, hoverStyles, mobileStyles);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react48.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
-    props.node.href && props.node.href !== "" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_link3.default, { href: props.node.href, className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react51.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }),
+    props.node.href && props.node.href !== "" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_link3.default, { href: props.node.href, className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "div",
       {
         id: guid,
@@ -3297,7 +3695,7 @@ ${mobileCssRules.join("\n")}
         className: containerPaddingClass,
         children: props.node.children?.map((node, index) => {
           const SelectedNode = NodeTypes2[node.type];
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react48.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react51.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             SelectedNode,
             {
               node,
@@ -3312,9 +3710,9 @@ ${mobileCssRules.join("\n")}
           ) }, index);
         })
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react48.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react51.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         SelectedNode,
         {
           node,
@@ -3333,7 +3731,7 @@ ${mobileCssRules.join("\n")}
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -3346,7 +3744,8 @@ var NodeTypes = {
   ["widget"]: WidgetNode_default,
   ["form-container"]: FormContainerNode_default,
   ["div-container"]: DivContainer_default,
-  ["svg-icon"]: SVGIconNode_default
+  ["svg-icon"]: SVGIconNode_default,
+  ["embed"]: EmbedNode_default
 };
 var PageBodyRenderer = (props) => {
   let pageBodyTree;
@@ -3360,11 +3759,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react49.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react49.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react49.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       SelectedNode,
       {
         node,
@@ -3377,7 +3776,7 @@ var PageBodyRenderer = (props) => {
         apiBaseUrl: props.apiBaseUrl,
         widgetRegistry: props.widgetRegistry
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       SelectedNode,
       {
         node,