@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260323092346 → 0.8.1-dev.20260323121228

package/dist/index.mjs

@@ -1101,53 +1101,28 @@ var ToastService_default = ToastService;
 
 // src/components/StyleTypes.tsx
 var buttonClasses = /* @__PURE__ */ new Map([
-  [
-    "Primary" /* Primary */,
-    "relative inline-flex items-center justify-center bg-primary rounded  px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg hover:bg-primary-strong focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-white"
-  ],
-  [
-    "Secondary" /* Secondary */,
-    "relative inline-flex items-center justify-center bg-gradient-to-b from-secondary to-secondary-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-secondary-strong"
-  ],
-  [
-    "Neutral" /* Neutral */,
-    "relative inline-flex items-center justify-center bg-neutral-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-neutral-stronger"
-  ],
-  [
-    "PrimaryHollow" /* PrimaryHollow */,
-    "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-primary border text-primary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"
-  ],
-  [
-    "SecondaryHollow" /* SecondaryHollow */,
-    "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-secondary border text-secondary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"
-  ],
-  [
-    "NeutralHollow" /* NeutralHollow */,
-    "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-neutral border text-neutral rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"
-  ],
-  [
-    "Ripple" /* Ripple */,
-    "px-3 py-1.5 inline-flex items-center text-sm font-medium rounded border-[1.5px] border-primary ripple btn-bg-primary btn-primary-text"
-  ],
-  [
-    "Danger" /* Danger */,
-    "inline-flex text-sm font-medium items-center justify-center px-4 py-2 border border-alert bg-alert text-white rounded hover:bg-alert-600 hover:border-alert-600 focus:outline-none active:ring-1 active:ring-alert"
-  ],
-  ["Link" /* Link */, ""],
-  [
-    "Light" /* Light */,
-    "inline-flex items-center justify-center rounded bg-white border px-4 py-2 leading-6 text-primary shadow-sm hover:shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:cursor-not-allowed"
-  ]
+  ["Primary" /* Solid */, "btn-solid"],
+  ["PrimaryHollow" /* Hollow */, "btn-hollow"],
+  ["Link" /* Link */, "btn-link"]
+  // [StyleTypes.Solid, "relative inline-flex items-center justify-center bg-gradient-to-b from-secondary to-secondary-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-secondary-strong"],
+  // [StyleTypes.Solid, "relative inline-flex items-center justify-center bg-neutral-strong rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-body hover:bg-neutral-stronger"],
+  // [StyleTypes.Hollow, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-primary border text-primary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"],
+  // [StyleTypes.Hollow, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-secondary border text-secondary rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"],
+  // [StyleTypes.Hollow, "inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 transparent border-neutral border text-neutral rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"],
+  // [StyleTypes.Ripple, "px-3 py-1.5 inline-flex items-center text-sm font-medium rounded border-[1.5px] border-primary ripple btn-bg-primary btn-primary-text"],
+  // [StyleTypes.Danger, "inline-flex text-sm font-medium items-center justify-center px-4 py-2 border border-alert bg-alert text-white rounded hover:bg-alert-600 hover:border-alert-600 focus:outline-none active:ring-1 active:ring-alert"],
+  // [StyleTypes.Link, ""],
+  // [StyleTypes.Light, "inline-flex items-center justify-center rounded bg-white border px-4 py-2 leading-6 text-primary shadow-sm hover:shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:cursor-not-allowed"],
 ]);
 var progressClasses = /* @__PURE__ */ new Map([
-  ["Primary" /* Primary */, ""],
-  ["PrimaryHollow" /* PrimaryHollow */, ""],
-  ["Secondary" /* Secondary */, ""],
-  ["SecondaryHollow" /* SecondaryHollow */, ""],
-  ["Neutral" /* Neutral */, ""],
-  ["NeutralHollow" /* NeutralHollow */, ""],
-  ["Ripple" /* Ripple */, ""],
-  ["Danger" /* Danger */, ""],
+  ["Primary" /* Solid */, ""],
+  ["PrimaryHollow" /* Hollow */, ""],
+  // [StyleTypes.Solid, ""],
+  // [StyleTypes.Hollow, ""],
+  // [StyleTypes.Solid, ""],
+  // [StyleTypes.Hollow, ""],
+  // [StyleTypes.Ripple, ""],
+  // [StyleTypes.Danger, ""],
   ["Link" /* Link */, ""]
 ]);
 
@@ -1156,56 +1131,21 @@ import { useState as useState3 } from "react";
 
 // src/components/ClientButton.tsx
 import React24 from "react";
-
-// src/components/utilities/ToastService.tsx
-var ToastService2 = class {
-  static showError(message) {
-    console.error(message);
-    if (typeof window !== "undefined") {
-      alert(message);
-    }
-  }
-  static showSuccess(message) {
-    console.log(message);
-    if (typeof window !== "undefined") {
-      alert(message);
-    }
-  }
-  static showWarning(message) {
-    console.warn(message);
-    if (typeof window !== "undefined") {
-      alert(message);
-    }
-  }
-  static showInfo(message) {
-    console.info(message);
-    if (typeof window !== "undefined") {
-      alert(message);
-    }
-  }
-};
-var ToastService_default2 = ToastService2;
-
-// src/components/ClientButton.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var ClientButton = (props) => {
   const execute = async (event) => {
-    event.preventDefault();
     if (props.onClick !== void 0) {
       props.onClick();
     } else {
-      ToastService_default2.showError("No action defined.");
+      ToastService_default.showError("No action defined.");
     }
   };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Primary */);
+  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
   return /* @__PURE__ */ jsx24(React24.Fragment, { children: /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
       onClick: execute,
-      "data-role": props.dataRole,
-      disabled: props.disabled,
-      tabIndex: props.tabIndex,
       className: buttonClass + " " + props.className,
       children: props.children
     }
@@ -1229,21 +1169,27 @@ var Confirm = ({ message, onConfirm, onCancel }) => {
       onCancel();
     }
   };
-  return /* @__PURE__ */ jsx25(Fragment, { children: showModal && /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 flex items-center justify-center z-20", children: [
+  return /* @__PURE__ */ jsx25(Fragment, { children: showModal && /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 flex items-center justify-center z-50", children: [
     /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-black opacity-70" }),
-    /* @__PURE__ */ jsxs14("div", { className: "bg-white rounded-md p-6 shadow border z-50", children: [
-      /* @__PURE__ */ jsx25("p", { className: "text-xl font-semibold mb-4", children: "Confirmation" }),
+    /* @__PURE__ */ jsxs14("div", { className: "bg-white rounded-md p-6 w-2/6 shadow border z-50", children: [
+      /* @__PURE__ */ jsx25("p", { className: "text-xl font-medium mb-4", children: "Confirmation" }),
       /* @__PURE__ */ jsx25("p", { className: "mb-4", children: message }),
       /* @__PURE__ */ jsxs14("div", { className: "flex justify-end gap-8", children: [
         /* @__PURE__ */ jsx25(
           ClientButton_default,
           {
             onClick: handleCancelAction,
-            ButtonType: "PrimaryHollow" /* PrimaryHollow */,
+            ButtonType: "PrimaryHollow" /* Hollow */,
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx25(ClientButton_default, { onClick: handleConfirmAction, children: "Confirm" })
+        /* @__PURE__ */ jsx25(
+          ClientButton_default,
+          {
+            onClick: handleConfirmAction,
+            children: "Confirm"
+          }
+        )
       ] })
     ] })
   ] }) });
@@ -1261,10 +1207,9 @@ var Button = (props) => {
   const [showModal, setShowModal] = useState4(null);
   const execute = async (event) => {
     event.preventDefault();
+    event.stopPropagation();
     if (props.confirm) {
-      const confirmed = await showConfirmation(
-        "Are you sure you want to delete this item?"
-      );
+      const confirmed = await showConfirmation("Are you sure you want to delete this item?");
       setShowModal(null);
       if (!confirmed) {
         return;
@@ -1279,15 +1224,12 @@ var Button = (props) => {
       isValid = await props.onValidate();
       if (!isValid) {
         setInProgress(false);
-        ToastService_default.showError(
-          "There are error in the form. Please fix them before proceeding."
-        );
+        ToastService_default.showError("There are errors in the form. Please fix them before proceeding.");
         return;
       }
     }
     if (props.onClick !== void 0) {
-      let response = await props.onClick(props.index);
-      console.log(response);
+      let response = await props.onClick();
       if (response.isSuccessful) {
         setIsActionPerformed(true);
         setResponseMessage(response.message);
@@ -1306,61 +1248,27 @@ var Button = (props) => {
     return new Promise((resolve) => {
       const onConfirm = () => resolve(true);
       const onCancel = () => resolve(false);
-      setShowModal(
-        /* @__PURE__ */ jsx26(
-          Confirm_default,
-          {
-            message: props.confirmationMessage,
-            onConfirm,
-            onCancel
-          }
-        )
-      );
+      setShowModal(/* @__PURE__ */ jsx26(Confirm_default, { message: props.confirmationMessage, onConfirm, onCancel }));
     });
   };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Primary */);
-  let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Primary */);
+  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+  let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
+  const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
   return /* @__PURE__ */ jsxs15(React26.Fragment, { children: [
     /* @__PURE__ */ jsxs15(
       "button",
       {
         type: "submit",
         onClick: execute,
-        id: props.id,
         disabled: props.disabled,
-        className: buttonClass + " relative " + (props.className || "") + (props.isActive ? " scale-95 shadow-inner" : ""),
+        title: isDisabled ? "The button is disabled to prevent any action" : "",
+        className: buttonClass + " relative " + props.className,
         children: [
           isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
-          inProgress && /* @__PURE__ */ jsx26(React26.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ jsx26("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs15(
-            "svg",
-            {
-              className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass,
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              children: [
-                /* @__PURE__ */ jsx26(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__PURE__ */ jsx26(
-                  "path",
-                  {
-                    className: "opacity-75",
-                    fill: "currentColor",
-                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  }
-                )
-              ]
-            }
-          ) })
+          inProgress && /* @__PURE__ */ jsx26(React26.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ jsx26("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs15("svg", { className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx26("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ jsx26("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ] }) })
         ]
       }
     ),
@@ -1581,7 +1489,10 @@ var SelectWithSearchPanel = (props) => {
               }
             )
           ] }, field.name)),
-          /* @__PURE__ */ jsxs16(Button_default, { onClick: handleSaveModal, className: "w-full", children: [
+          /* @__PURE__ */ jsxs16(Button_default, { onClick: async () => {
+            handleSaveModal();
+            return { isSuccessful: true };
+          }, className: "w-full", children: [
             "Save ",
             props.attributes?.label
           ] })
@@ -1821,7 +1732,7 @@ InputControl.displayName = "InputControl";
 var InputControl_default = InputControl;
 
 // src/components/dataForm/DataList.tsx
-import React35, { useEffect as useEffect6, useState as useState7, useCallback as useCallback2, useReducer } from "react";
+import React34, { useEffect as useEffect6, useState as useState7, useCallback as useCallback2, useReducer } from "react";
 import { useRouter } from "next/navigation";
 
 // src/components/dataForm/NoContentView.tsx
@@ -1876,27 +1787,25 @@ var ContentView_default = ContentView;
 
 // src/components/dataForm/Hyperlink.tsx
 import Link from "next/link";
-import React34 from "react";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx34 } from "react/jsx-runtime";
 function Hyperlink(props) {
-  let linkClass = props.linkType ? buttonClasses.get(props.linkType) : buttonClasses.get("Link" /* Link */);
-  const target = props.href?.startsWith("https://") ? "_blank" : "_self";
-  const additionalProps = target === "_blank" ? { rel: "noopener noreferrer" } : {};
-  return /* @__PURE__ */ jsxs21(React34.Fragment, { children: [
-    props.href && /* @__PURE__ */ jsx34(
-      Link,
-      {
-        href: props.href,
-        prefetch: false,
-        className: linkClass + " " + props.className,
-        title: props.title,
-        target,
-        ...additionalProps,
-        children: props.children
-      }
-    ),
-    !props.href && /* @__PURE__ */ jsx34("span", { className: props.className, children: props.children })
-  ] });
+  let linkClass = props.linkType ? buttonClasses.get(props.linkType) : "";
+  const target = props?.href?.startsWith("http") ? "_blank" : "_self";
+  const additionalProps = {};
+  if (target == "_blank") {
+    additionalProps.rel = "noopener noreferrer";
+  }
+  return /* @__PURE__ */ jsx34(Fragment2, { children: props.href ? /* @__PURE__ */ jsx34(
+    Link,
+    {
+      href: props.href,
+      prefetch: false,
+      className: `${linkClass} ${props.className ?? ""}`,
+      ...additionalProps,
+      target,
+      children: props.children
+    }
+  ) : props.isHeading ? /* @__PURE__ */ jsx34("h5", { className: props.className + "inline-block", children: props.children }) : /* @__PURE__ */ jsx34("span", { className: props.className, children: props.children }) });
 }
 
 // src/clients/OdataBuilder.tsx
@@ -2147,7 +2056,7 @@ function FormReducer(state, action) {
 var FormReducer_default = FormReducer;
 
 // src/components/dataForm/DataList.tsx
-import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var DataList = (props) => {
   console.log(props.dataset, "datasetssssss");
   const router = useRouter();
@@ -2226,7 +2135,7 @@ var DataList = (props) => {
   const renderPageNumbers = () => {
     if (pages <= 10) {
       return Array.from({ length: pages }, (_, index) => index + 1).map(
-        (page) => /* @__PURE__ */ jsx40(React35.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
+        (page) => /* @__PURE__ */ jsx40(React34.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
           Hyperlink,
           {
             className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -2239,8 +2148,8 @@ var DataList = (props) => {
       const showFirstPages = activePageNumber <= 5;
       const showLastPages = activePageNumber > pages - 5;
       if (showFirstPages) {
-        return /* @__PURE__ */ jsxs22(Fragment2, { children: [
-          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ jsx40(React35.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsxs21(Fragment3, { children: [
+          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ jsx40(React34.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -2265,7 +2174,7 @@ var DataList = (props) => {
               children: pages
             }
           ),
-          /* @__PURE__ */ jsx40("div", { className: "relative inline-block", children: /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsx40("div", { className: "relative inline-block", children: /* @__PURE__ */ jsxs21(
             "select",
             {
               className: "  py-1 border border-gray-300 bg-white text-gray-700 appearance-none rounded-none",
@@ -2287,7 +2196,7 @@ var DataList = (props) => {
           ) })
         ] });
       } else if (showLastPages) {
-        return /* @__PURE__ */ jsxs22(Fragment2, { children: [
+        return /* @__PURE__ */ jsxs21(Fragment3, { children: [
           /* @__PURE__ */ jsx40(
             Hyperlink,
             {
@@ -2306,7 +2215,7 @@ var DataList = (props) => {
           ),
           /* @__PURE__ */ jsx40("span", { className: "px-2 py-1", children: "..." }),
           Array.from({ length: 8 }, (_, index) => pages - 7 + index).map(
-            (page) => /* @__PURE__ */ jsx40(React35.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
+            (page) => /* @__PURE__ */ jsx40(React34.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
               Hyperlink,
               {
                 className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -2317,7 +2226,7 @@ var DataList = (props) => {
           )
         ] });
       } else {
-        return /* @__PURE__ */ jsxs22(Fragment2, { children: [
+        return /* @__PURE__ */ jsxs21(Fragment3, { children: [
           /* @__PURE__ */ jsx40(
             Hyperlink,
             {
@@ -2338,7 +2247,7 @@ var DataList = (props) => {
           Array.from(
             { length: 5 },
             (_, index) => activePageNumber - 2 + index
-          ).map((page) => /* @__PURE__ */ jsx40(React35.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
+          ).map((page) => /* @__PURE__ */ jsx40(React34.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx40(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -2363,7 +2272,7 @@ var DataList = (props) => {
               children: pages
             }
           ),
-          /* @__PURE__ */ jsx40("div", { className: "relative inline-block", children: /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsx40("div", { className: "relative inline-block", children: /* @__PURE__ */ jsxs21(
             "select",
             {
               className: "px-2 py-1 border border-gray-300 bg-white text-gray-700 appearance-none rounded-none",
@@ -2384,15 +2293,15 @@ var DataList = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs22(React35.Fragment, { children: [
-    /* @__PURE__ */ jsxs22(ContentView_default, { isDataFound, children: [
-      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(React34.Fragment, { children: [
+    /* @__PURE__ */ jsxs21(ContentView_default, { isDataFound, children: [
+      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ jsxs21(
         "div",
         {
           className: `flex justify-between items-center bg-white pl-6 pr-2 h-14 mb-3 shadow-sm rounded-md border-b border-neutral-200 sticky top-0`,
           children: [
             props.title ? /* @__PURE__ */ jsx40("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ jsx40("h2", { className: "text-lg font-semibold text-black-800", children: props.title }) }) : /* @__PURE__ */ jsx40("div", {}),
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3", children: [
               props.filters && props.filters.map((filter) => /* @__PURE__ */ jsx40(
                 InputControl_default,
                 {
@@ -2408,11 +2317,11 @@ var DataList = (props) => {
                 },
                 filter.name
               )),
-              props.addLinkHref && /* @__PURE__ */ jsxs22(
+              props.addLinkHref && /* @__PURE__ */ jsxs21(
                 Hyperlink,
                 {
                   className: "gap-1",
-                  linkType: "Primary" /* Primary */,
+                  linkType: "Primary" /* Solid */,
                   href: props.addLinkHref,
                   children: [
                     /* @__PURE__ */ jsx40(Icon_default, { name: "plus", className: "w-4 h-4" }),
@@ -2424,7 +2333,7 @@ var DataList = (props) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsx40("div", { className: "flex-1 overflow-y-auto  justify-end bg-white rounded shadow h-[calc(100vh-14rem)]", children: /* @__PURE__ */ jsxs22("table", { className: "w-full   divide-y divide-gray-200", children: [
+      /* @__PURE__ */ jsx40("div", { className: "flex-1 overflow-y-auto  justify-end bg-white rounded shadow h-[calc(100vh-14rem)]", children: /* @__PURE__ */ jsxs21("table", { className: "w-full   divide-y divide-gray-200", children: [
         /* @__PURE__ */ jsx40("thead", { className: "bg-gray-50 sticky top-0", children: /* @__PURE__ */ jsx40("tr", { children: props?.columns?.map((column) => {
           let url = builder.getNewOrderByUrl(column.name);
           let icon = "chevronUpDown";
@@ -2439,7 +2348,7 @@ var DataList = (props) => {
             "th",
             {
               className: "px-6 py-3 text-left font-medium cursor-pointer  bg-neutral-soft " + column.width + (column.controlType == ViewControlTypes_default.moneyView ? " text-right" : ""),
-              children: /* @__PURE__ */ jsx40(Hyperlink, { href: url, className: "!text-neutral-contrast ", children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center space-x-1", children: [
+              children: /* @__PURE__ */ jsx40(Hyperlink, { href: url, className: "!text-neutral-contrast ", children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center space-x-1", children: [
                 /* @__PURE__ */ jsx40("span", { className: "text-black", children: column.label }),
                 column.enableSorting && /* @__PURE__ */ jsx40(Icon_default, { className: "w-4 h-4", name: icon })
               ] }) })
@@ -2455,7 +2364,7 @@ var DataList = (props) => {
           }
           return /* @__PURE__ */ jsx40("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
             console.log("column", column);
-            return /* @__PURE__ */ jsx40(React35.Fragment, { children: /* @__PURE__ */ jsx40(
+            return /* @__PURE__ */ jsx40(React34.Fragment, { children: /* @__PURE__ */ jsx40(
               "td",
               {
                 className: "px-6 py-2 whitespace-normal " + (column.controlType == ViewControlTypes_default.moneyView ? "" : ""),
@@ -2505,9 +2414,9 @@ var DataList = (props) => {
           }) }, index);
         }) })
       ] }) }),
-      /* @__PURE__ */ jsx40("div", { className: "pt-4 border-t border-t-gray-50 sticky bottom-0 h-11 mt-2 ", children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx40("div", { className: "pt-4 border-t border-t-gray-50 sticky bottom-0 h-11 mt-2 ", children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx40("div", { className: "text-gray-700", children: label }),
-        /* @__PURE__ */ jsxs22("div", { className: "flex space-x-2 items-center", children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex space-x-2 items-center", children: [
           activePageNumber > 1 && /* @__PURE__ */ jsx40(
             Hyperlink,
             {
@@ -2530,14 +2439,14 @@ var DataList = (props) => {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs22(NoContentView_default, { isDataFound, children: [
-      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs21(NoContentView_default, { isDataFound, children: [
+      (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ jsxs21(
         "div",
         {
           className: `flex justify-between items-center bg-white pl-6 pr-2 h-14 mb-3 shadow-sm rounded-md border-b border-neutral-200`,
           children: [
             props.title ? /* @__PURE__ */ jsx40("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ jsx40("h2", { className: "text-lg font-semibold text-black", children: props.title }) }) : /* @__PURE__ */ jsx40("div", {}),
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3", children: [
               props.filters && props.filters.map((filter) => /* @__PURE__ */ jsx40(
                 InputControl_default,
                 {
@@ -2553,11 +2462,11 @@ var DataList = (props) => {
                 },
                 filter.name
               )),
-              props.addLinkHref && /* @__PURE__ */ jsxs22(
+              props.addLinkHref && /* @__PURE__ */ jsxs21(
                 Hyperlink,
                 {
                   className: "gap-1",
-                  linkType: "Primary" /* Primary */,
+                  linkType: "Primary" /* Solid */,
                   href: props.addLinkHref,
                   children: [
                     /* @__PURE__ */ jsx40(Icon_default, { name: "plus", className: "w-4 h-4" }),
@@ -2569,7 +2478,7 @@ var DataList = (props) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxs22("div", { className: "flex-grow overflow-y-auto justify-end bg-white rounded shadow h-[75vh]", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex-grow overflow-y-auto justify-end bg-white rounded shadow h-[75vh]", children: [
         /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40("table", { className: "w-full divide-y divide-gray-200", children: /* @__PURE__ */ jsx40("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx40("tr", { children: props?.columns?.map((column) => {
           let url = builder.getNewOrderByUrl(column.name);
           let icon = "chevronUpDown";
@@ -2584,7 +2493,7 @@ var DataList = (props) => {
             "th",
             {
               className: "px-6 py-3 text-left font-medium cursor-pointer bg-neutral-soft " + column.width + (column.controlType == ViewControlTypes_default.moneyView ? " text-right" : ""),
-              children: /* @__PURE__ */ jsx40(Hyperlink, { href: url, className: "text-body-950", children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center space-x-1", children: [
+              children: /* @__PURE__ */ jsx40(Hyperlink, { href: url, className: "text-body-950", children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center space-x-1", children: [
                 /* @__PURE__ */ jsx40("span", { children: column.label }),
                 column.enableSorting && /* @__PURE__ */ jsx40(Icon_default, { className: "w-4 h-4", name: icon })
               ] }) })
@@ -2600,10 +2509,10 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import React54 from "react";
+import React53 from "react";
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
-import React37 from "react";
+import React36 from "react";
 
 // src/components/pageRenderingEngine/nodes/TextNode.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
@@ -2675,9 +2584,9 @@ var LineBreakNode = (props) => {
 var LineBreakNode_default = LineBreakNode;
 
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
-import React36 from "react";
+import React35 from "react";
 import Link2 from "next/link";
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 var LinkNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default
@@ -2685,10 +2594,10 @@ var LinkNode = (props) => {
   {
   }
   let formatClasses = props.node.cssClass || "";
-  return /* @__PURE__ */ jsxs23(Link2, { className: formatClasses, href: props.node.url, title: props.node.title, children: [
+  return /* @__PURE__ */ jsxs22(Link2, { className: formatClasses, href: props.node.url, title: props.node.title, children: [
     props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx43(React36.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx43(SelectedNode, { node }) }, index);
+      return /* @__PURE__ */ jsx43(React35.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx43(SelectedNode, { node }) }, index);
     }),
     props.node.children.length == 0 && /* @__PURE__ */ jsx43("br", {})
   ] });
@@ -2839,20 +2748,14 @@ var DatafieldNode = (props) => {
     {
       className: `datafield-node ${props.node.format < Formats.length ? Formats[props.node.format] : ""}`,
       style: styles,
-      children: /* @__PURE__ */ jsx46(
-        ViewControl_default,
-        {
-          controlType: dataType,
-          value: value ?? `@databound[${fieldName}]`
-        }
-      )
+      children: String(value)
     }
   );
 };
 var DatafieldNode_default = DatafieldNode;
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
-import { Fragment as Fragment3, jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 var ParagraphNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
@@ -2872,9 +2775,9 @@ var ParagraphNode = (props) => {
   const isInlineOnlyParent = props.parentTag === "summary";
   const hasChildren = props.node.children && props.node.children.length > 0;
   if (isInlineOnlyParent) {
-    return /* @__PURE__ */ jsx47(Fragment3, { children: hasChildren && props.node.children.map((node, index) => {
+    return /* @__PURE__ */ jsx47(Fragment4, { children: hasChildren && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx47(React37.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx47(React36.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
         SelectedNode,
         {
           node,
@@ -2886,10 +2789,10 @@ var ParagraphNode = (props) => {
       ) }, index);
     }) });
   }
-  return /* @__PURE__ */ jsxs24("div", { className: " " + formatClasses, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: " " + formatClasses, children: [
     hasChildren && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx47(React37.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx47(React36.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx47(
         SelectedNode,
         {
           node,
@@ -2906,8 +2809,8 @@ var ParagraphNode = (props) => {
 var ParagraphNode_default = ParagraphNode;
 
 // src/components/pageRenderingEngine/nodes/HeadingNode.tsx
-import React38 from "react";
-import { Fragment as Fragment4, jsx as jsx48 } from "react/jsx-runtime";
+import React37 from "react";
+import { Fragment as Fragment5, jsx as jsx48 } from "react/jsx-runtime";
 var HeadingNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
@@ -2923,22 +2826,22 @@ var HeadingNode = (props) => {
   {
   }
   let formatClasses = FormatClass[props.node.format] || "";
-  return /* @__PURE__ */ jsx48(Fragment4, { children: React38.createElement(
+  return /* @__PURE__ */ jsx48(Fragment5, { children: React37.createElement(
     HeadingTag,
     { className: formatClasses },
     props.node.children && props.node.children.map((childNode, index) => {
       const SelectedNode = NodeTypes2[childNode.type];
-      return /* @__PURE__ */ jsx48(React38.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx48(SelectedNode, { node: childNode, dataitem: props.dataitem, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+      return /* @__PURE__ */ jsx48(React37.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx48(SelectedNode, { node: childNode, dataitem: props.dataitem, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
     })
   ) });
 };
 var HeadingNode_default = HeadingNode;
 
 // src/components/pageRenderingEngine/nodes/ListNode.tsx
-import React40 from "react";
+import React39 from "react";
 
 // src/components/pageRenderingEngine/nodes/ListItemNode.tsx
-import React39 from "react";
+import React38 from "react";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var ListItemNode = (props) => {
   const NodeTypes2 = {
@@ -2967,33 +2870,33 @@ var ListItemNode = (props) => {
       }
     } else {
       foundFirstBreak = false;
-      return /* @__PURE__ */ jsx49(React39.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx49(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
+      return /* @__PURE__ */ jsx49(React38.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx49(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
     }
   }) });
 };
 var ListItemNode_default = ListItemNode;
 
 // src/components/pageRenderingEngine/nodes/ListNode.tsx
-import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
 var ListNode = (props) => {
   const NodeTypes2 = {
     listitem: ListItemNode_default
   };
-  return /* @__PURE__ */ jsxs25(React40.Fragment, { children: [
+  return /* @__PURE__ */ jsxs24(React39.Fragment, { children: [
     props.node.listType == "bullet" && /* @__PURE__ */ jsx50("ul", { children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx50(React40.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
+      return /* @__PURE__ */ jsx50(React39.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
     }) }),
     props.node.listType == "number" && /* @__PURE__ */ jsx50("ol", { children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx50(React40.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
+      return /* @__PURE__ */ jsx50(React39.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx50(SelectedNode, { node, dataitem: props.dataitem, routeParameters: props.routeParameters }) }, index);
     }) })
   ] });
 };
 var ListNode_default = ListNode;
 
 // src/components/pageRenderingEngine/nodes/QuoteNode.tsx
-import React41 from "react";
+import React40 from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var QuoteNode = (props) => {
   const NodeTypes2 = {
@@ -3003,17 +2906,17 @@ var QuoteNode = (props) => {
   };
   return /* @__PURE__ */ jsx51("blockquote", { children: props.node.children && props.node.children.map((node, index) => {
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx51(React41.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx51(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+    return /* @__PURE__ */ jsx51(React40.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx51(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
   }) });
 };
 var QuoteNode_default = QuoteNode;
 
 // src/components/pageRenderingEngine/nodes/CodeNode.tsx
-import React42 from "react";
+import React41 from "react";
 
 // src/components/CopyButton.tsx
 import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
 function CopyButton({ text }) {
   const [copied, setCopied] = useState8(false);
   const timeoutRef = useRef3(null);
@@ -3032,7 +2935,7 @@ function CopyButton({ text }) {
       console.error("Failed to copy: ", err);
     }
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "button",
     {
       onClick: handleCopy,
@@ -3063,7 +2966,7 @@ function CopyButton({ text }) {
 }
 
 // src/components/pageRenderingEngine/nodes/CodeNode.tsx
-import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var CodeNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
@@ -3076,14 +2979,14 @@ var CodeNode = (props) => {
     if (node.type === "link") return node.text || node.url || "";
     return "";
   }).join("") ?? "";
-  return /* @__PURE__ */ jsxs27("div", { className: "code-block", children: [
-    /* @__PURE__ */ jsxs27("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: [
+  return /* @__PURE__ */ jsxs26("div", { className: "code-block", children: [
+    /* @__PURE__ */ jsxs26("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__ */ jsx53("span", { children: "Code Snippet" }),
       /* @__PURE__ */ jsx53(CopyButton, { text: textContent })
     ] }),
     /* @__PURE__ */ jsx53("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__ */ jsx53(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx53(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+      return /* @__PURE__ */ jsx53(React41.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx53(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
     }) })
   ] });
 };
@@ -3097,15 +3000,15 @@ var HorizontalRuleNode = (props) => {
 var HorizontalRuleNode_default = HorizontalRuleNode;
 
 // src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
-import React48 from "react";
+import React47 from "react";
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
-import React43 from "react";
+import React42 from "react";
 import { jsx as jsx55 } from "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__ */ jsx55(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx55(React42.Fragment, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
     "img",
     {
       loading: "lazy",
@@ -3131,7 +3034,7 @@ var ImageNode_default = ImageNode;
 
 // src/components/pageRenderingEngine/nodes/WidgetNode.tsx
 import { Suspense } from "react";
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var WidgetNode = (props) => {
   const getWidgetParameters = () => {
     const widgetInputParameters = { ...props.routeParameters ?? {} };
@@ -3186,7 +3089,7 @@ var WidgetNode = (props) => {
   const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
   if (!SelectedWidget) {
     console.warn("Widget not found:", props.node.widgetCode);
-    return /* @__PURE__ */ jsxs28(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs27(Fragment6, { children: [
       "Widget not found: ",
       props.node.widgetCode
     ] });
@@ -3206,37 +3109,37 @@ var WidgetNode = (props) => {
 var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/IframeClient.tsx
-import React46, { useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
+import React45, { useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
 
 // src/components/IFrameLoaderView.tsx
-import React45 from "react";
-import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
+import React44 from "react";
+import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
 var IFrameLoaderView = (props) => {
-  return /* @__PURE__ */ jsxs29(React45.Fragment, { children: [
-    props.isDataFound == null && /* @__PURE__ */ jsx57("div", { className: "", children: /* @__PURE__ */ jsxs29("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center mb-4", children: [
+  return /* @__PURE__ */ jsxs28(React44.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ jsx57("div", { className: "", children: /* @__PURE__ */ jsxs28("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "flex items-center mb-4", children: [
         /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
-        /* @__PURE__ */ jsxs29("div", { className: "ml-2", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "ml-2", children: [
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "animate-pulse", children: [
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "animate-pulse", children: [
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "animate-pulse", children: [
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
           /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
@@ -3283,7 +3186,7 @@ var IframeClient = ({ src }) => {
   const handleIframeLoad = () => {
     setIsDataFound(true);
   };
-  return /* @__PURE__ */ jsx58(React46.Fragment, { children: /* @__PURE__ */ jsx58(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx58(React45.Fragment, { children: /* @__PURE__ */ jsx58(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx58(
     "iframe",
     {
       ref: iframeRef,
@@ -3312,7 +3215,7 @@ var EmbedNode = (props) => {
 var EmbedNode_default = EmbedNode;
 
 // src/components/pageRenderingEngine/nodes/VideoNode.tsx
-import React47 from "react";
+import React46 from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var VideoNode = (props) => {
   let src;
@@ -3321,7 +3224,7 @@ var VideoNode = (props) => {
   } 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__ */ jsx60(React47.Fragment, { children: src && /* @__PURE__ */ jsx60("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
+  return /* @__PURE__ */ jsx60(React46.Fragment, { children: src && /* @__PURE__ */ jsx60("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;
 
@@ -3387,11 +3290,11 @@ var LayoutItemNode = (props) => {
   } else {
     updatedLayout = removeParagraphsAtStartAndEnd(props.node);
   }
-  return /* @__PURE__ */ jsx61(React48.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
+  return /* @__PURE__ */ jsx61(React47.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx61(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx61(React47.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
       SelectedNode,
       {
         node,
@@ -3421,7 +3324,7 @@ var AssetUtility = class {
 var AssetUtility_default = AssetUtility;
 
 // src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
-import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
 var LayoutContainerNode = (props) => {
   const VERTICAL_ALIGNMENT_CLASSES = {
     start: "items-start",
@@ -3505,7 +3408,7 @@ var LayoutContainerNode = (props) => {
     },
     index
   ));
-  return /* @__PURE__ */ jsxs30(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment7, { children: [
     sectionWidth === "mixed" && /* @__PURE__ */ jsx62("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
       "div",
       {
@@ -3535,7 +3438,7 @@ var LayoutContainerNode = (props) => {
 var LayoutContainerNode_default = LayoutContainerNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import React49, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
+import React48, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
 
 // src/components/pageRenderingEngine/nodes/InputControlNode.tsx
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -3569,7 +3472,7 @@ var InputControlNode = (props) => {
 var InputControlNode_default = InputControlNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
 var FormContainerNode = (props) => {
   const NodeTypes2 = {
     ["input-control"]: InputControlNode_default
@@ -3609,12 +3512,12 @@ var FormContainerNode = (props) => {
     };
     fetchInitialData();
   }, [props.fetchData, node.dataFetchApi, props.routeParameters]);
-  return /* @__PURE__ */ jsxs31("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
+  return /* @__PURE__ */ jsxs30("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__ */ jsx64(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx64(React48.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
         InputControlNode_default,
         {
           value: formState.inputValues[node2.name],
@@ -3629,7 +3532,7 @@ var FormContainerNode = (props) => {
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-import React53 from "react";
+import React52 from "react";
 
 // src/components/utilities/AnimationUtility.tsx
 var AnimationUtility = class {
@@ -3741,7 +3644,7 @@ var AnimationUtility_default = AnimationUtility;
 
 // src/components/Pagination.tsx
 import { useMemo } from "react";
-import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
 var Pagination = (props) => {
   const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
   const builder = useMemo(() => {
@@ -3812,11 +3715,11 @@ var Pagination = (props) => {
     );
   };
   if (totalPages <= 1 && totalItems === 0) return null;
-  return /* @__PURE__ */ jsxs32("div", { className: "py-6 border-t bg-default", children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "text-sm", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "py-6 border-t bg-default", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "text-sm", children: [
         "Showing ",
-        /* @__PURE__ */ jsxs32("span", { className: "font-semibold", children: [
+        /* @__PURE__ */ jsxs31("span", { className: "font-semibold", children: [
           startItem,
           "-",
           endItem
@@ -3826,8 +3729,8 @@ var Pagination = (props) => {
         /* @__PURE__ */ jsx65("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
         " results"
       ] }),
-      totalPages > 1 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-1", children: [
-        /* @__PURE__ */ jsxs32(
+      totalPages > 1 && /* @__PURE__ */ jsxs31("div", { className: "flex items-center space-x-1", children: [
+        /* @__PURE__ */ jsxs31(
           NavigationButton,
           {
             page: activePageNumber - 1,
@@ -3852,7 +3755,7 @@ var Pagination = (props) => {
           const page = item;
           return /* @__PURE__ */ jsx65(PageButton, { page, children: page }, page);
         }),
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs31(
           NavigationButton,
           {
             page: activePageNumber + 1,
@@ -3864,7 +3767,7 @@ var Pagination = (props) => {
           }
         )
       ] }),
-      showJumpToPage && totalPages > 5 && /* @__PURE__ */ jsxs32("div", { className: "flex items-center space-x-2", children: [
+      showJumpToPage && totalPages > 5 && /* @__PURE__ */ jsxs31("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Go to:" }),
         /* @__PURE__ */ jsx65("div", { className: "relative", children: /* @__PURE__ */ jsx65(
           "input",
@@ -3887,7 +3790,7 @@ var Pagination = (props) => {
         ) })
       ] })
     ] }),
-    showPageSizeSelector && /* @__PURE__ */ jsx65("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-center space-x-2", children: [
+    showPageSizeSelector && /* @__PURE__ */ jsx65("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-center space-x-2", children: [
       /* @__PURE__ */ jsx65("span", { className: "text-sm", children: "Show:" }),
       /* @__PURE__ */ jsx65("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsx65(
         Hyperlink,
@@ -3959,8 +3862,8 @@ var PathUtility = class {
 var PathUtility_default = new PathUtility();
 
 // src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
-import React51, { useEffect as useEffect10, useRef as useRef6 } from "react";
-import { Fragment as Fragment7, jsx as jsx66 } from "react/jsx-runtime";
+import React50, { useEffect as useEffect10, useRef as useRef6 } from "react";
+import { Fragment as Fragment8, jsx as jsx66 } from "react/jsx-runtime";
 function EnterAnimationClient({ hasEnterAnimation, children }) {
   const ref = useRef6(null);
   useEffect10(() => {
@@ -3979,14 +3882,14 @@ function EnterAnimationClient({ hasEnterAnimation, children }) {
     observer.observe(ref.current);
     return () => observer.disconnect();
   }, [hasEnterAnimation]);
-  return /* @__PURE__ */ jsx66(Fragment7, { children: children && // enforce passing the ref to Wrapper
+  return /* @__PURE__ */ jsx66(Fragment8, { children: children && // enforce passing the ref to Wrapper
   //@ts-ignore
-  React51.cloneElement(children, { ref }) });
+  React50.cloneElement(children, { ref }) });
 }
 
 // src/components/Slider.tsx
-import React52, { useState as useState11, useEffect as useEffect11, Children, cloneElement } from "react";
-import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
+import React51, { useState as useState11, useEffect as useEffect11, Children, cloneElement } from "react";
+import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var Slider = ({
   children,
   slidesToShow = 4,
@@ -4080,7 +3983,7 @@ var Slider = ({
   };
   const translateX = -currentSlide * (100 / slidesToShowState);
   const slides = Children.map(children, (child, index) => {
-    if (!React52.isValidElement(child)) return null;
+    if (!React51.isValidElement(child)) return null;
     const childProps = child.props;
     const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
     return /* @__PURE__ */ jsx67(
@@ -4106,7 +4009,7 @@ var Slider = ({
         return "bottom-4";
     }
   };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: `relative w-full overflow-hidden ${className}`,
@@ -4124,7 +4027,7 @@ var Slider = ({
             children: slides
           }
         ),
-        show_arrows && /* @__PURE__ */ jsxs33(Fragment8, { children: [
+        show_arrows && /* @__PURE__ */ jsxs32(Fragment9, { children: [
           /* @__PURE__ */ jsx67(
             ArrowButton,
             {
@@ -4135,7 +4038,7 @@ var Slider = ({
               children: /* @__PURE__ */ jsx67("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
             }
           ),
-          /* @__PURE__ */ jsxs33(
+          /* @__PURE__ */ jsxs32(
             ArrowButton,
             {
               direction: "right",
@@ -4284,7 +4187,7 @@ var ProgressPill = ({
     }
     return null;
   };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     "button",
     {
       className: `${baseClasses} ${getStyleClasses()}`,
@@ -4301,9 +4204,9 @@ var ProgressPill = ({
 var Slider_default = Slider;
 
 // src/components/NoDataFound.tsx
-import { jsx as jsx68, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs33 } from "react/jsx-runtime";
 var NoDataFound = () => {
-  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center bg-neutral-weak", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center bg-neutral-weak", children: [
     /* @__PURE__ */ jsx68("div", { className: "mb-5", children: /* @__PURE__ */ jsx68("div", { className: "mx-auto w-20 h-20 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ jsx68(
       "svg",
       {
@@ -4330,7 +4233,7 @@ var NoDataFound = () => {
 var NoDataFound_default = NoDataFound;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-import { jsx as jsx69, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs34 } from "react/jsx-runtime";
 function toCamelCase(str) {
   return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
@@ -4483,31 +4386,11 @@ var DivContainer = async (props) => {
     return fieldValue !== void 0 && fieldValue === false;
   };
   const isHidden = shouldHideContainer();
-  let odataString = void 0;
-  let endpoint = void 0;
-  let result = null;
-  let response = null;
+  const nodeData = props.dataMap?.[props.node.__id];
+  let result = nodeData?.result;
+  let response = nodeData?.response;
   let childCollectionData = null;
   if (dataBindingProperties) {
-    endpoint = dataBindingProperties.dataSource;
-    endpoint = endpoint.replace(/\{(\w+)\}/g, (_, key) => {
-      return props.routeParameters?.[key] ?? `{${key}}`;
-    });
-    if (dataBindingProperties.applyODataParams) {
-      odataString = OdataBuilder.getOdataQueryString(props.query);
-      if (odataString) {
-        const separator = endpoint.includes("?") ? "&" : "?";
-        endpoint += separator + odataString;
-      }
-    }
-    if (props.fetchData) {
-      response = await props.fetchData(endpoint);
-      result = response?.result;
-    } else {
-      console.warn(
-        "DivContainer data binding needs `fetchData` prop but none was provided."
-      );
-    }
     if (dataBindingProperties.showNoResultsMessage && (result === void 0 || Array.isArray(result) && result.length == 0)) {
       return /* @__PURE__ */ jsx69(NoDataFound_default, {});
     }
@@ -4519,7 +4402,7 @@ var DivContainer = async (props) => {
   function renderNode(node, props2, dataitem, key, href) {
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ jsx69(React53.Fragment, { children: /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx69(React52.Fragment, { children: /* @__PURE__ */ jsx69(
       SelectedNode,
       {
         node,
@@ -4530,11 +4413,11 @@ var DivContainer = async (props) => {
         host: props2.host,
         path: props2.path,
         apiBaseUrl: props2.apiBaseUrl,
-        serviceClient: props2.serviceClient,
         resolveAssetUrl: props2.resolveAssetUrl,
         breadcrumb: props2.breadcrumb,
         dataitem,
-        href
+        href,
+        dataMap: props2.dataMap
       }
     ) }, key);
   }
@@ -4616,9 +4499,9 @@ var DivContainer = async (props) => {
     props.node.autoFormat && "auto-format",
     props.node.bgClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs35(React53.Fragment, { children: [
+  return /* @__PURE__ */ jsxs34(React52.Fragment, { children: [
     /* @__PURE__ */ jsx69("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
-    /* @__PURE__ */ jsx69(EnterAnimationClient, { hasEnterAnimation: !!props.node.enterAnimation, children: /* @__PURE__ */ jsx69(React53.Fragment, { children: /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx69(EnterAnimationClient, { hasEnterAnimation: !!props.node.enterAnimation, children: /* @__PURE__ */ jsx69(React52.Fragment, { children: /* @__PURE__ */ jsx69(
       Wrapper,
       {
         id: guid,
@@ -4627,7 +4510,7 @@ var DivContainer = async (props) => {
         ...wrapperProps,
         children: dataToRender.map(
           (item, idx) => item?.links?.view && renderLink ? renderChildren(props.node.children, props, item, idx, props.href ? void 0 : item?.links?.view)?.map(
-            (child, i) => /* @__PURE__ */ jsx69(React53.Fragment, { children: child }, i)
+            (child, i) => /* @__PURE__ */ jsx69(React52.Fragment, { children: child }, i)
           ) : renderChildren(props.node.children, props, item, idx)
         )
       }
@@ -4666,11 +4549,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ jsx70(React54.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ jsx70(React53.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ jsx70(React54.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx70(React54.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx70(React54.Fragment, { children: /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx70(React53.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx70(React53.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx70(React53.Fragment, { children: /* @__PURE__ */ jsx70(
       SelectedNode,
       {
         node,
@@ -4684,9 +4567,9 @@ var PageBodyRenderer = (props) => {
         widgetRegistry: props.widgetRegistry,
         serviceClient: props.serviceClient,
         resolveAssetUrl: props.resolveAssetUrl,
-        fetchData: props.fetchData
+        dataMap: props.dataMap
       }
-    ) }) : /* @__PURE__ */ jsx70(React54.Fragment, { children: /* @__PURE__ */ jsx70(
+    ) }) : /* @__PURE__ */ jsx70(React53.Fragment, { children: /* @__PURE__ */ jsx70(
       SelectedNode,
       {
         node,
@@ -4699,7 +4582,7 @@ var PageBodyRenderer = (props) => {
         widgetRegistry: props.widgetRegistry,
         serviceClient: props.serviceClient,
         resolveAssetUrl: props.resolveAssetUrl,
-        fetchData: props.fetchData
+        dataMap: props.dataMap
       }
     ) }) }) }, index);
   }) });