@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260818060820 → 0.8.1-dev.20260824072352

package/dist/server.js

@@ -30,6 +30,33 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/components/utilities/AssetUtility.tsx
+var AssetUtility, AssetUtility_default;
+var init_AssetUtility = __esm({
+  "src/components/utilities/AssetUtility.tsx"() {
+    "use strict";
+    AssetUtility = class {
+      constructor() {
+      }
+      static resolveUrl(assetBaseUrl, url) {
+        if (!url) return void 0;
+        if (url.startsWith("http")) return url;
+        if (!assetBaseUrl) return url;
+        return `${assetBaseUrl}/${url}`;
+      }
+      // // static getAssetUrl(apiBaseUrl: string) {
+      // //   let domainName = apiBaseUrl.replace("https://", "");
+      // //   return `https://cdn.g-assets.com/${domainName}`;
+      // // }
+      // static getAssetFullPath(apiBaseUrl: string, relativePath: string) {
+      //   const domainName = apiBaseUrl.replace("https://", "");
+      //   return `https://cdn.g-assets.com/${domainName}/${relativePath}`;
+      // }
+    };
+    AssetUtility_default = AssetUtility;
+  }
+});
+
 // src/components/HlsPlayer.tsx
 var HlsPlayer_exports = {};
 __export(HlsPlayer_exports, {
@@ -1008,7 +1035,7 @@ var init_CacheManage = __esm({
 });
 
 // src/clients/ServiceClient.tsx
-var ServerApiError, ServiceClient, ServiceClient_default;
+var ServerApiError, _ServiceClient, ServiceClient, ServiceClient_default;
 var init_ServiceClient = __esm({
   "src/clients/ServiceClient.tsx"() {
     "use strict";
@@ -1021,7 +1048,7 @@ var init_ServiceClient = __esm({
         this.data.isSuccessful = false;
       }
     };
-    ServiceClient = class {
+    _ServiceClient = class _ServiceClient {
       constructor(apiBaseUrl, session) {
         this.cacheManager = CacheManager.getInstance();
         this.baseUrl = apiBaseUrl;
@@ -1064,28 +1091,42 @@ var init_ServiceClient = __esm({
         if (cachedData) {
           return cachedData;
         }
-        console.log("*****************CALLING API:", cacheKey, (/* @__PURE__ */ new Date()).toISOString());
-        const response = await fetch(fullPath, { headers: config.headers });
-        if (!response.ok) {
-          const apiErrorData = await response.json();
-          throw new ServerApiError(apiErrorData, response.status);
-        }
-        const cacheControl = response.headers.get("Cache-Control");
-        let revalidate = null;
-        if (cacheControl) {
-          const maxAgeMatch = cacheControl.match(/max-age=(\d+)/);
-          if (maxAgeMatch && maxAgeMatch[1]) {
-            const maxAge = parseInt(maxAgeMatch[1], 10);
-            revalidate = maxAge * 1e3;
-          }
+        const existingRequest = _ServiceClient.inFlightGetRequests.get(cacheKey);
+        if (existingRequest) {
+          return existingRequest;
         }
-        const data = await response.json();
-        data.isSuccessful = true;
-        if (revalidate !== null && revalidate > 0) {
-          console.log("revalidate............I am caching:" + revalidate);
-          this.cacheManager.set(cacheKey, data, revalidate);
+        const request = (async () => {
+          console.log("*****************CALLING API:", cacheKey, (/* @__PURE__ */ new Date()).toISOString());
+          const response = await fetch(fullPath, { headers: config.headers });
+          if (!response.ok) {
+            const apiErrorData = await response.json();
+            throw new ServerApiError(apiErrorData, response.status);
+          }
+          const cacheControl = response.headers.get("Cache-Control");
+          let revalidate = null;
+          if (cacheControl) {
+            const maxAgeMatch = cacheControl.match(/max-age=(\d+)/);
+            if (maxAgeMatch && maxAgeMatch[1]) {
+              const maxAge = parseInt(maxAgeMatch[1], 10);
+              revalidate = maxAge * 1e3;
+            }
+          }
+          const data = await response.json();
+          data.isSuccessful = true;
+          if (revalidate !== null && revalidate > 0) {
+            console.log("revalidate............I am caching:" + revalidate);
+            this.cacheManager.set(cacheKey, data, revalidate);
+          }
+          return data;
+        })();
+        _ServiceClient.inFlightGetRequests.set(cacheKey, request);
+        try {
+          return await request;
+        } finally {
+          if (_ServiceClient.inFlightGetRequests.get(cacheKey) === request) {
+            _ServiceClient.inFlightGetRequests.delete(cacheKey);
+          }
         }
-        return data;
       }
       //   private async refreshToken(): Promise<void> {
       //     console.log("*******************calling refresh token***********************");
@@ -1182,6 +1223,8 @@ var init_ServiceClient = __esm({
         }
       }
     };
+    _ServiceClient.inFlightGetRequests = /* @__PURE__ */ new Map();
+    ServiceClient = _ServiceClient;
     ServiceClient_default = ServiceClient;
   }
 });
@@ -1824,13 +1867,40 @@ var init_IframeClient = __esm({
 });
 
 // src/components/controls/edit/InputControlType.tsx
-var Constants;
+var Constants, InputControlType, InputControlType_default;
 var init_InputControlType = __esm({
   "src/components/controls/edit/InputControlType.tsx"() {
     "use strict";
     Constants = {
       pagesize: 10
     };
+    InputControlType = {
+      lineTextInput: "lineTextInput",
+      multilineTextInput: "multilineTextInput",
+      emailInput: "emailInput",
+      moneyInput: "money",
+      select: "select",
+      percentageInput: "percentage",
+      asset: "asset",
+      assetUpload: "assetUpload",
+      phoneInput: "phone",
+      numberInput: "numberInput",
+      checkboxInput: "checkboxInput",
+      otpInput: "otp",
+      datetimeInput: "datetimeInput",
+      timeInput: "time",
+      colorInput: "colorInput",
+      selectWithSearchInput: "selectWithSearchInput",
+      selectWithSearchPanel: "selectWithSearchPanel",
+      booleanSelect: "booleanSelect",
+      switchInput: "switchInput",
+      dateInput: "dateInput",
+      radioInput: "radioInput",
+      switcher: "switcher",
+      videoInput: "videoInput",
+      referenceInput: "referenceInput"
+    };
+    InputControlType_default = InputControlType;
   }
 });
 
@@ -1875,6 +1945,12 @@ var init_OdataBuilder = __esm({
               if (key == "searchCols") {
                 this.searchCols = odata[key];
               }
+              if (key == "filter") {
+                this.apiFilter = odata[key];
+              }
+              if (key == "orderBy") {
+                this.apiOrderBy = odata[key];
+              }
             }
           }
         }
@@ -1901,6 +1977,12 @@ var init_OdataBuilder = __esm({
         if (obj?.["searchCols"] && obj["searchCols"].trim() !== "") {
           queryString += `&searchCols=${encodeURIComponent(obj["searchCols"])}`;
         }
+        if (obj?.["filter"] && obj["filter"].trim() !== "") {
+          queryString += `&filter=${encodeURIComponent(obj["filter"])}`;
+        }
+        if (obj?.["orderBy"] && obj["orderBy"].trim() !== "") {
+          queryString += `&orderBy=${encodeURIComponent(obj["orderBy"])}`;
+        }
         if (obj) {
           if (obj["$filter"] && obj["$filter"] !== null && obj["$filter"] !== "") {
             queryString = queryString + `&$filter=${encodeURIComponent(obj["$filter"])}`;
@@ -1948,6 +2030,18 @@ var init_OdataBuilder = __esm({
         }
         return pageNumber;
       }
+      appendApiQueryParameters(url) {
+        if (this.searchTerm) {
+          url += `&searchTerm=${encodeURIComponent(this.searchTerm)}`;
+        }
+        if (this.apiFilter) {
+          url += `&filter=${encodeURIComponent(this.apiFilter)}`;
+        }
+        if (this.apiOrderBy) {
+          url += `&orderBy=${encodeURIComponent(this.apiOrderBy)}`;
+        }
+        return url;
+      }
       getUrl() {
         let url = `${this.baseUrl}?$skip=${this.skip}&$top=${this.top}&$count=true`;
         if (this.filterBy !== null && this.filterBy !== "") {
@@ -1963,7 +2057,7 @@ var init_OdataBuilder = __esm({
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
         console.log(url);
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewOrderByUrl(orderBy) {
         let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
@@ -1977,7 +2071,7 @@ var init_OdataBuilder = __esm({
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
         url = url + `&$orderby=${encodeURIComponent(orderBy)}`;
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewFilterUrl(filterBy) {
         let url = `${this.baseUrl}?$skip=${0}&$top=${this.top}&$count=true`;
@@ -1993,7 +2087,7 @@ var init_OdataBuilder = __esm({
         if (this.searchCols) {
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewPageUrl(page) {
         let skip = page * Constants.pagesize - Constants.pagesize;
@@ -2010,7 +2104,7 @@ var init_OdataBuilder = __esm({
         if (this.searchCols) {
           url += `&searchCols=${encodeURIComponent(this.searchCols)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getNewPageSizeUrl(pageSize) {
         const currentPage = this.getPageNumber(
@@ -2024,7 +2118,7 @@ var init_OdataBuilder = __esm({
         if (this.orderBy !== null && this.orderBy !== "") {
           url = url + `&$orderby=${encodeURIComponent(this.orderBy)}`;
         }
-        return url;
+        return this.appendApiQueryParameters(url);
       }
       getOrderBy() {
         return this.orderBy;
@@ -2104,206 +2198,2498 @@ var init_Icons = __esm({
   }
 });
 
-// src/svg/Icon.tsx
-var import_jsx_runtime52, Icon, Icon_default;
-var init_Icon = __esm({
-  "src/svg/Icon.tsx"() {
+// src/svg/Icon.tsx
+var import_jsx_runtime52, Icon, Icon_default;
+var init_Icon = __esm({
+  "src/svg/Icon.tsx"() {
+    "use strict";
+    init_Icons();
+    import_jsx_runtime52 = require("react/jsx-runtime");
+    Icon = ({ name, className, ...props }) => {
+      const IconComponent = Icons_default[name];
+      if (!IconComponent) {
+        console.error(`Icon "${name}" not found.`);
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconComponent, { ...props, className });
+    };
+    Icon_default = Icon;
+  }
+});
+
+// src/components/Pagination.tsx
+var Pagination_exports = {};
+__export(Pagination_exports, {
+  default: () => Pagination_default
+});
+var import_react32, import_jsx_runtime53, Pagination, Pagination_default;
+var init_Pagination = __esm({
+  "src/components/Pagination.tsx"() {
+    "use strict";
+    "use client";
+    import_react32 = require("react");
+    init_OdataBuilder();
+    init_Icon();
+    init_StyleTypes();
+    init_InputControlType();
+    init_Hyperlink();
+    import_jsx_runtime53 = require("react/jsx-runtime");
+    Pagination = (props) => {
+      const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
+      const builder = (0, import_react32.useMemo)(() => {
+        const b = new OdataBuilder(path);
+        if (query) b.setQuery(query);
+        return b;
+      }, [path, query]);
+      const activePageNumber = builder.getPageNumber(Constants.pagesize);
+      const totalItems = dataset?.count || 0;
+      const itemsPerPage = parseInt(builder.top || Constants.pagesize.toString());
+      const totalPages = Math.ceil(totalItems / itemsPerPage);
+      const startItem = totalItems > 0 ? (activePageNumber - 1) * itemsPerPage + 1 : 0;
+      const endItem = Math.min(activePageNumber * itemsPerPage, totalItems);
+      const getPaginationRange = () => {
+        const delta = 1;
+        const range = [];
+        if (totalPages <= 7) {
+          return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        range.push(1);
+        let start = Math.max(2, activePageNumber - delta);
+        let end = Math.min(totalPages - 1, activePageNumber + delta);
+        if (activePageNumber - delta <= 2) {
+          end = Math.min(totalPages - 1, 4);
+        }
+        if (activePageNumber + delta >= totalPages - 1) {
+          start = Math.max(2, totalPages - 4);
+        }
+        if (start > 2) {
+          range.push("...");
+        }
+        for (let i = start; i <= end; i++) {
+          range.push(i);
+        }
+        if (end < totalPages - 1) {
+          range.push("...");
+        }
+        if (totalPages > 1) {
+          range.push(totalPages);
+        }
+        return range;
+      };
+      const paginationRange = getPaginationRange();
+      const PageButton = ({ page, children }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        Hyperlink,
+        {
+          linkType: "Link" /* Link */,
+          className: `
+               min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2.5 md:px-3 
+                border text-sm font-medium transition-colors duration-150
+                ${activePageNumber === page ? "bg-primary-base font-semibold" : ""}
+            `,
+          href: builder.getNewPageUrl(page),
+          children
+        }
+      );
+      const NavigationButton = ({ page, disabled, children }) => {
+        if (disabled) {
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border  bg-neutral-base cursor-not-allowed", children });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          Hyperlink,
+          {
+            className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border transition-colors duration-150",
+            href: builder.getNewPageUrl(page),
+            children
+          }
+        );
+      };
+      if (totalPages <= 1 && totalItems === 0) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "py-6 border-t bg-default", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "text-sm", children: [
+            "Showing ",
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "font-semibold", children: [
+              startItem,
+              "-",
+              endItem
+            ] }),
+            " ",
+            "out of ",
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
+            " results"
+          ] }),
+          totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+              NavigationButton,
+              {
+                page: activePageNumber - 1,
+                disabled: activePageNumber === 1,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Prev" })
+                ]
+              }
+            ),
+            paginationRange.map((item, index) => {
+              if (item === "...") {
+                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  "span",
+                  {
+                    className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center text-gray-500",
+                    children: "..."
+                  },
+                  `ellipsis-${index}`
+                );
+              }
+              const page = item;
+              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PageButton, { page, children: page }, page);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+              NavigationButton,
+              {
+                page: activePageNumber + 1,
+                disabled: activePageNumber === totalPages,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Next" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
+                ]
+              }
+            )
+          ] }),
+          showJumpToPage && totalPages > 5 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Go to:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              "input",
+              {
+                type: "number",
+                min: "1",
+                max: totalPages,
+                defaultValue: activePageNumber,
+                className: "w-20 h-10 px-3 border rounded text-sm focus:outline-none focus:ring-2 focus:border-transparent",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    const input = e.target;
+                    const page = parseInt(input.value);
+                    if (page >= 1 && page <= totalPages && page !== activePageNumber) {
+                      window.location.href = builder.getNewPageUrl(page);
+                    }
+                  }
+                }
+              }
+            ) })
+          ] })
+        ] }),
+        showPageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Show:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            Hyperlink,
+            {
+              className: `
+                                        px-3 py-1 text-sm rounded border transition-colors duration-150
+                                        ${itemsPerPage === size ? "bg-primary-base font-medium" : "bg-neutral-weak"}
+                                    `,
+              href: builder.getNewPageSizeUrl(size),
+              children: size
+            },
+            size
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "per page" })
+        ] }) })
+      ] });
+    };
+    Pagination_default = Pagination;
+  }
+});
+
+// src/components/controls/edit/MultilineTextInput.tsx
+var import_react33, import_jsx_runtime54, MultilineTextInput, MultilineTextInput_default;
+var init_MultilineTextInput = __esm({
+  "src/components/controls/edit/MultilineTextInput.tsx"() {
+    "use strict";
+    import_react33 = __toESM(require("react"));
+    import_jsx_runtime54 = require("react/jsx-runtime");
+    MultilineTextInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (props.callback !== void 0) {
+          props.callback(
+            {
+              name: props.name,
+              value: text,
+              index: props.index,
+              groupKey: props.groupKey
+            }
+          );
+        }
+      };
+      let value = "";
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react33.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          "textarea",
+          {
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            rows: 4,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: props?.attributes?.maxLength,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    MultilineTextInput_default = MultilineTextInput;
+  }
+});
+
+// src/components/controls/edit/LineTextInput.tsx
+var import_react34, import_jsx_runtime55, LineTextInput, LineTextInput_default;
+var init_LineTextInput = __esm({
+  "src/components/controls/edit/LineTextInput.tsx"() {
+    "use strict";
+    import_react34 = __toESM(require("react"));
+    import_jsx_runtime55 = require("react/jsx-runtime");
+    LineTextInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (props.callback !== void 0) {
+          props.callback(
+            {
+              name: props.name,
+              value: text,
+              index: props.index,
+              groupKey: props.groupKey
+            }
+          );
+        }
+      };
+      let value = "";
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          "input",
+          {
+            type: "text",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: props?.attributes?.maxLength,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block  mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    LineTextInput_default = LineTextInput;
+  }
+});
+
+// src/components/controls/edit/MoneyInput.tsx
+var import_react35, import_jsx_runtime56, MoneyInput, MoneyInput_default;
+var init_MoneyInput = __esm({
+  "src/components/controls/edit/MoneyInput.tsx"() {
+    "use strict";
+    import_react35 = __toESM(require("react"));
+    import_jsx_runtime56 = require("react/jsx-runtime");
+    MoneyInput = (props) => {
+      const textChangeHandler = (event) => {
+        const rawValue = event.target.value;
+        const numericValue = parseFloat(rawValue);
+        if (rawValue === "" || !isNaN(numericValue) && numericValue >= 0) {
+          if (props.callback !== void 0) {
+            props.callback({
+              name: props.name,
+              value: rawValue,
+              index: props.index,
+              groupKey: props.groupKey
+            });
+          }
+        }
+      };
+      const handleWheel = (event) => {
+        event.preventDefault();
+        event.target.blur();
+      };
+      let value;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      const preventNegative = (e) => {
+        if (e.key === "-") {
+          e.preventDefault();
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "input",
+          {
+            type: "number",
+            name: props.name,
+            id: props.name,
+            value,
+            min: 0,
+            onChange: textChangeHandler,
+            onWheel: handleWheel,
+            onKeyDown: preventNegative,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: props?.attributes?.maxLength,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    MoneyInput_default = MoneyInput;
+  }
+});
+
+// src/components/controls/edit/Select.tsx
+var import_react36, import_jsx_runtime57, Select, Select_default;
+var init_Select = __esm({
+  "src/components/controls/edit/Select.tsx"() {
+    "use strict";
+    import_react36 = require("react");
+    import_jsx_runtime57 = require("react/jsx-runtime");
+    Select = (props) => {
+      const [list, setList] = (0, import_react36.useState)();
+      const getSafeValue = (val) => {
+        if (val === null || val === void 0) return "";
+        if (typeof val === "boolean") return val ? "1" : "0";
+        return val;
+      };
+      const textChangeHandler = (event) => {
+        let rawValue = event.target.value;
+        if (rawValue === "") rawValue = null;
+        let finalValue = rawValue;
+        if (list && props.dataKeyFieldName) {
+          const key = props.dataKeyFieldName;
+          const selectedItem = list.find(
+            (item) => String(item[key]) === String(rawValue)
+          );
+          if (selectedItem) {
+            const keyValue = selectedItem[key];
+            if (typeof keyValue === "number") {
+              finalValue = Number(rawValue);
+            }
+          }
+        }
+        props.callback?.({
+          name: props.name,
+          value: finalValue,
+          index: props.index,
+          groupKey: props.groupKey
+        });
+      };
+      const inputChangeHandler = (event) => {
+        props.callback?.({
+          name: props.name,
+          value: event.target.value,
+          index: props.index,
+          groupKey: props.groupKey
+        });
+      };
+      (0, import_react36.useEffect)(() => {
+        async function fetchData() {
+          if (props.dataset) {
+            setList(props.dataset);
+            return;
+          }
+          if (props.dataSource && props.serviceClient) {
+            let dataSource = props.dataSource;
+            let response;
+            if (props.dataSourceDependsOn) {
+              if (!props.dependentValue) {
+                setList([]);
+                return;
+              }
+              dataSource = dataSource.replace(
+                `{${props.dataSourceDependsOn}}`,
+                props.dependentValue
+              );
+            }
+            response = await props.serviceClient.get(dataSource);
+            setList(response.result ?? []);
+            return;
+          }
+          setList([]);
+        }
+        fetchData();
+      }, [
+        props.dataset,
+        props.dataSource,
+        props.dependentValue,
+        props.dataSourceDependsOn
+      ]);
+      const value = getSafeValue(props.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { className: "block", children: [
+        props.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-medium inline-block pb-1", children: props.attributes?.label }),
+        " ",
+        props.attributes?.label && props.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        list && list.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "input",
+          {
+            type: "text",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: inputChangeHandler,
+            required: props.attributes?.required,
+            placeholder: props.attributes?.placeholder,
+            maxLength: props.attributes?.maxLength,
+            pattern: props.attributes?.pattern,
+            disabled: props.attributes?.readOnly,
+            minLength: props.attributes?.minLength,
+            className: `peer input select mt-1 py-1.5 block w-full rounded shadow-sm ${props.inputClasses ?? ""}`
+          }
+        ),
+        list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+          "select",
+          {
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            required: props.attributes?.required,
+            disabled: props.attributes?.readOnly,
+            className: `peer select py-1.5 block w-full text-black rounded border-gray-300 shadow-sm
+                     focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none ${props.inputClasses ?? ""}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("option", { value: "", children: props.attributes?.placeholder || "Select" }),
+              list.map((item, index) => {
+                const keyField = props.dataKeyFieldName;
+                const textField = props.dataTextFieldName;
+                return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("option", { value: item[keyField], children: item[textField] }, index);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 text-alert text-sm", children: props.attributes?.errorMessage || "" })
+      ] });
+    };
+    Select_default = Select;
+  }
+});
+
+// src/components/controls/edit/PercentageInput.tsx
+var import_react37, import_jsx_runtime58, PercentageInput, PercentageInput_default;
+var init_PercentageInput = __esm({
+  "src/components/controls/edit/PercentageInput.tsx"() {
+    "use strict";
+    import_react37 = __toESM(require("react"));
+    import_jsx_runtime58 = require("react/jsx-runtime");
+    PercentageInput = (props) => {
+      const textChangeHandler = (event) => {
+        const rawValue = event.target.value;
+        const numericValue = parseFloat(rawValue);
+        if (rawValue === "" || !isNaN(numericValue) && numericValue >= 0) {
+          if (props.callback !== void 0) {
+            props.callback({
+              name: props.name,
+              value: rawValue,
+              index: props.index,
+              groupKey: props.groupKey
+            });
+          }
+        }
+      };
+      const handleWheel = (event) => {
+        event.preventDefault();
+        event.target.blur();
+      };
+      let value;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      const preventNegative = (e) => {
+        if (e.key === "-") {
+          e.preventDefault();
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react37.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label ? props?.attributes?.label + " %" : "" }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "input",
+          {
+            type: "number",
+            name: props.name,
+            id: props.name,
+            value,
+            min: 0,
+            onChange: textChangeHandler,
+            onKeyDown: preventNegative,
+            onWheel: handleWheel,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            max: "100",
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    PercentageInput_default = PercentageInput;
+  }
+});
+
+// src/components/controls/edit/PhoneInput.tsx
+var import_react38, import_jsx_runtime59, PhoneInput, PhoneInput_default;
+var init_PhoneInput = __esm({
+  "src/components/controls/edit/PhoneInput.tsx"() {
+    "use strict";
+    import_react38 = __toESM(require("react"));
+    import_jsx_runtime59 = require("react/jsx-runtime");
+    PhoneInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (props.callback !== void 0) {
+          props.callback(
+            {
+              name: props.name,
+              value: text,
+              index: props.index,
+              groupKey: props.groupKey
+            }
+          );
+        }
+      };
+      let value = "";
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react38.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center rounded border ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "px-3", children: props.prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "input",
+            {
+              type: "text",
+              name: props.name,
+              id: props.name,
+              value,
+              onChange: textChangeHandler,
+              required: props?.attributes?.required,
+              placeholder: props?.attributes?.placeholder,
+              maxLength: props?.attributes?.maxLength,
+              pattern: props?.attributes?.pattern,
+              disabled: props?.attributes?.readOnly,
+              minLength: props?.attributes?.minLength,
+              className: "py-1.5 block w-full outline-none border-0 mr-0.5"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    PhoneInput_default = PhoneInput;
+  }
+});
+
+// src/components/controls/edit/NumberInput.tsx
+var import_react39, import_jsx_runtime60, NumberInput, NumberInput_default;
+var init_NumberInput = __esm({
+  "src/components/controls/edit/NumberInput.tsx"() {
+    "use strict";
+    import_react39 = __toESM(require("react"));
+    import_jsx_runtime60 = require("react/jsx-runtime");
+    NumberInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (props.callback !== void 0) {
+          props.callback(
+            {
+              name: props.name,
+              value: text,
+              index: props.index,
+              groupKey: props.groupKey
+            }
+          );
+        }
+      };
+      const handleWheel = (event) => {
+        event.preventDefault();
+        event.target.blur();
+      };
+      let value;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react39.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          "input",
+          {
+            type: "number",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            onWheel: handleWheel,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            onBlur: props?.onBlur,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            max: props?.attributes?.maxValue,
+            min: props?.attributes?.minValue,
+            className: "peer py-1.5 block w-full rounded shadow-sm number-input input\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    NumberInput_default = NumberInput;
+  }
+});
+
+// src/components/controls/edit/CheckboxInput.tsx
+var import_react40, import_jsx_runtime61, CheckboxInput, CheckboxInput_default;
+var init_CheckboxInput = __esm({
+  "src/components/controls/edit/CheckboxInput.tsx"() {
+    "use strict";
+    import_react40 = __toESM(require("react"));
+    import_jsx_runtime61 = require("react/jsx-runtime");
+    CheckboxInput = (props) => {
+      const textChangeHandler = (event) => {
+        let text = event.target.checked;
+        if (props.callback !== void 0) {
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      let value = false;
+      if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
+        value = true;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react40.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "mb-1", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "label",
+            {
+              htmlFor: props.name,
+              className: "inline-block text-sm font-medium",
+              children: props.attributes.label
+            }
+          ),
+          props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "bg-error-weak", children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            name: props.name,
+            id: props.name,
+            checked: value,
+            onChange: textChangeHandler,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: props?.attributes?.maxLength,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            className: "peer mt-1 py-1.5 block rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n           "
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
+      ] }) });
+    };
+    CheckboxInput_default = CheckboxInput;
+  }
+});
+
+// src/components/controls/edit/OtpInput.tsx
+var import_react41, import_jsx_runtime62, OtpInput, OtpInput_default;
+var init_OtpInput = __esm({
+  "src/components/controls/edit/OtpInput.tsx"() {
+    "use strict";
+    import_react41 = __toESM(require("react"));
+    import_jsx_runtime62 = require("react/jsx-runtime");
+    OtpInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (props.callback !== void 0) {
+          props.callback(
+            {
+              name: props.name,
+              value: text,
+              index: props.index,
+              groupKey: props.groupKey
+            }
+          );
+        }
+      };
+      const handleWheel = (event) => {
+        event.preventDefault();
+      };
+      let value;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react41.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          "input",
+          {
+            type: "text",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            autoComplete: "off",
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: 4,
+            pattern: props?.attributes?.pattern,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            autoFocus: props?.attributes?.autoFocus,
+            onWheel: handleWheel,
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    OtpInput_default = OtpInput;
+  }
+});
+
+// src/components/controls/edit/DateTimeInput.tsx
+var import_react42, import_jsx_runtime63, DateTimeInput, DateTimeInput_default;
+var init_DateTimeInput = __esm({
+  "src/components/controls/edit/DateTimeInput.tsx"() {
+    "use strict";
+    import_react42 = __toESM(require("react"));
+    import_jsx_runtime63 = require("react/jsx-runtime");
+    DateTimeInput = (props) => {
+      const textChangeHandler = (event) => {
+        const localDate = new Date(event.target.value);
+        if (props.callback !== void 0) {
+          const utcISOString = localDate.toISOString();
+          props.callback({
+            name: props.name,
+            value: utcISOString,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      let value;
+      let localvalue;
+      let timeZoneAbbr;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+        const now = /* @__PURE__ */ new Date();
+        const offsetMinutes = now.getTimezoneOffset();
+        const offsetMilliseconds = offsetMinutes * 60 * 1e3;
+        const valDate = value.toString().includes("Z") ? new Date(value) : /* @__PURE__ */ new Date(value + "Z");
+        const localDate = new Date(valDate.getTime() - offsetMilliseconds);
+        timeZoneAbbr = now.toLocaleTimeString("en", { timeZoneName: "short" }).split(" ")[2];
+        localvalue = localDate?.toISOString()?.slice(0, 16);
+      }
+      const handleKeyDown = (e) => {
+        if (e.key === "Backspace") {
+          e.preventDefault();
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react42.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "input",
+            {
+              type: "datetime-local",
+              name: props.name,
+              id: props.name,
+              value: localvalue,
+              onChange: textChangeHandler,
+              onKeyDown: handleKeyDown,
+              required: props?.attributes?.required,
+              placeholder: props?.attributes?.placeholder,
+              maxLength: props?.attributes?.maxLength,
+              pattern: props?.attributes?.pattern,
+              disabled: props?.attributes?.readOnly,
+              minLength: props?.attributes?.minLength,
+              className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: timeZoneAbbr })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    DateTimeInput_default = DateTimeInput;
+  }
+});
+
+// src/components/controls/edit/ColorInput.tsx
+var import_react43, import_jsx_runtime64, ColorInput, ColorInput_default;
+var init_ColorInput = __esm({
+  "src/components/controls/edit/ColorInput.tsx"() {
+    "use strict";
+    import_react43 = __toESM(require("react"));
+    import_jsx_runtime64 = require("react/jsx-runtime");
+    ColorInput = (props) => {
+      const [color, setColor] = import_react43.default.useState("#3b82f6");
+      (0, import_react43.useEffect)(() => {
+        if (props.value !== void 0 && props.value !== null) {
+          if (typeof props.value === "string") {
+            setColor(props.value);
+          }
+        }
+      }, [props.value]);
+      const handleColorChange = (event) => {
+        const newColor = event.target.value;
+        setColor(newColor);
+        if (props.callback) {
+          props.callback({
+            name: props.name,
+            value: newColor,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "input",
+          {
+            type: "color",
+            name: props.name,
+            title: color,
+            id: props.name,
+            value: color,
+            onChange: handleColorChange,
+            required: props?.attributes?.required,
+            className: `w-[78px] h-12 block cursor-pointer`
+          }
+        ),
+        props?.attributes?.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "mt-1 bg-error-weak text-sm", children: props.attributes.errorMessage })
+      ] });
+    };
+    ColorInput_default = ColorInput;
+  }
+});
+
+// src/components/controls/edit/SelectWithSearchInput.tsx
+var import_react44, import_jsx_runtime65, SelectWithSearchInput, SelectWithSearchInput_default;
+var init_SelectWithSearchInput = __esm({
+  "src/components/controls/edit/SelectWithSearchInput.tsx"() {
+    "use strict";
+    "use client";
+    import_react44 = __toESM(require("react"));
+    import_jsx_runtime65 = require("react/jsx-runtime");
+    SelectWithSearchInput = (props) => {
+      const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
+      const [searchTerm, setSearchTerm] = (0, import_react44.useState)("");
+      const [highlightedIndex, setHighlightedIndex] = (0, import_react44.useState)(-1);
+      const [selectedItem, setSelectedItem] = (0, import_react44.useState)(
+        null
+      );
+      const [list, setList] = (0, import_react44.useState)([]);
+      const loadData = import_react44.default.useCallback(async () => {
+        if (props.dataset) {
+          setList(props.dataset);
+          return;
+        }
+        if (props.dataSource && props.serviceClient) {
+          let url = props.dataSource;
+          if (props.dataSourceDependsOn && props.dependentValue) {
+            url = url.replace(
+              `{${props.dataSourceDependsOn}}`,
+              props.dependentValue
+            );
+          }
+          const response = await props.serviceClient.get(url);
+          if (response?.result) {
+            setList(response.result);
+          }
+        }
+      }, [
+        props.dataset,
+        props.dataSource,
+        props.serviceClient,
+        props.dataSourceDependsOn,
+        props.dependentValue
+      ]);
+      (0, import_react44.useEffect)(() => {
+        loadData();
+      }, [loadData]);
+      (0, import_react44.useEffect)(() => {
+        if (props.value && list.length && props.dataKeyFieldName && props.dataTextFieldName) {
+          const selected = list.find(
+            (x) => x[props.dataKeyFieldName] == props.value
+          );
+          if (selected) {
+            setSearchTerm(selected[props.dataTextFieldName]);
+            setSelectedItem(selected);
+          }
+        }
+      }, [props.value, list]);
+      const filteredItems = list.filter((item) => {
+        const text = item[props.dataTextFieldName] ?? "";
+        return text.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+      const handleSelect = (event, item) => {
+        event.preventDefault();
+        setSearchTerm(item[props.dataTextFieldName]);
+        setSelectedItem(item);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        const selectedValue = item[props.dataKeyFieldName];
+        if (props.onChange) {
+          props.onChange(selectedValue);
+        }
+        if (props.callback) {
+          props.callback({
+            name: props.name,
+            value: selectedValue,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      const handleKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+          setHighlightedIndex(
+            (prev) => prev < filteredItems.length - 1 ? prev + 1 : 0
+          );
+        } else if (e.key === "ArrowUp") {
+          setHighlightedIndex(
+            (prev) => prev > 0 ? prev - 1 : filteredItems.length - 1
+          );
+        } else if (e.key === "Enter" && highlightedIndex >= 0) {
+          handleSelect(e, filteredItems[highlightedIndex]);
+        }
+      };
+      const dropdownRef = (0, import_react44.useRef)(null);
+      (0, import_react44.useEffect)(() => {
+        if (highlightedIndex >= 0 && dropdownRef.current) {
+          const highlightedItem = dropdownRef.current.children[highlightedIndex];
+          highlightedItem?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest"
+          });
+        }
+      }, [highlightedIndex]);
+      const isReadOnly = props.attributes?.readOnly || props.disable || props.attributes?.disable;
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("label", { className: "pb-1", children: [
+          props.attributes?.label,
+          " ",
+          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "bg-error-weak", children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            "input",
+            {
+              type: "text",
+              value: searchTerm,
+              onChange: (e) => {
+                setSearchTerm(e.target.value);
+                setIsOpen(true);
+                setHighlightedIndex(-1);
+              },
+              onFocus: () => setIsOpen(true),
+              onKeyDown: handleKeyDown,
+              placeholder: props.attributes?.placeholder ?? "Search...",
+              readOnly: isReadOnly,
+              disabled: props.disable || props.attributes?.disable,
+              className: `peer mt-2 py-1.5 select block w-full text-black rounded border-gray-300 shadow-sm
+          focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
+          ${isReadOnly ? "bg-neutral-soft opacity-50 cursor-not-allowed" : "bg-default"}
+          `
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: isReadOnly,
+              onClick: () => {
+                if (!isReadOnly) {
+                  setIsOpen(!isOpen);
+                }
+              },
+              className: "absolute right-2 top-3 h-5 w-5 text-gray-500 focus:outline-none",
+              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 1.5,
+                  stroke: "currentColor",
+                  className: "w-full h-full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        !isReadOnly && isOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "div",
+          {
+            ref: dropdownRef,
+            className: "absolute z-10 w-full bg-default border border-gray-200 shadow-lg max-h-48 overflow-y-auto",
+            children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              "button",
+              {
+                onClick: (e) => handleSelect(e, item),
+                className: `w-full px-4 py-2 flex items-center space-x-2 text-left ${index === highlightedIndex ? "bg-gray-200" : "hover:bg-gray-100"}`,
+                role: "option",
+                tabIndex: -1,
+                onMouseEnter: () => setHighlightedIndex(index),
+                children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: item[props.dataTextFieldName] })
+              },
+              item[props.dataKeyFieldName]
+            )) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
+          }
+        )
+      ] });
+    };
+    SelectWithSearchInput_default = SelectWithSearchInput;
+  }
+});
+
+// src/components/controls/edit/SelectWithSearchPanel.tsx
+var import_react45, import_jsx_runtime66, SelectWithSearchPanel, SelectWithSearchPanel_default;
+var init_SelectWithSearchPanel = __esm({
+  "src/components/controls/edit/SelectWithSearchPanel.tsx"() {
+    "use strict";
+    "use client";
+    init_Button();
+    import_react45 = __toESM(require("react"));
+    import_jsx_runtime66 = require("react/jsx-runtime");
+    SelectWithSearchPanel = (props) => {
+      const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
+      const [searchTerm, setSearchTerm] = (0, import_react45.useState)("");
+      const [highlightedIndex, setHighlightedIndex] = (0, import_react45.useState)(0);
+      const [list, setList] = (0, import_react45.useState)([]);
+      const listRef = (0, import_react45.useRef)(null);
+      const [isError, setIsError] = (0, import_react45.useState)(false);
+      const containerRef = (0, import_react45.useRef)(null);
+      const [isCreateOpen, setIsCreateOpen] = (0, import_react45.useState)(false);
+      const [formData, setFormData] = (0, import_react45.useState)({});
+      const getNestedValue7 = (obj, path) => {
+        return path.split(".").reduce((acc, key) => acc?.[key], obj);
+      };
+      (0, import_react45.useEffect)(() => {
+        const handleClickOutside = (event) => {
+          if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsOpen(false);
+          }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          document.removeEventListener("mousedown", handleClickOutside);
+        };
+      }, []);
+      (0, import_react45.useEffect)(() => {
+        async function fetchData() {
+          if (props.dataset) {
+            setList(props.dataset);
+          } else if (props.dataSource && props.serviceClient) {
+            let dataSource = props.dataSource;
+            if (props.dataSourceDependsOn && props.dependentValue) {
+              dataSource = dataSource.replace(
+                `{${props.dataSourceDependsOn}}`,
+                props.dependentValue
+              );
+            }
+            const response = await props.serviceClient.get(dataSource);
+            if (response?.result) setList(response.result);
+          }
+        }
+        fetchData();
+      }, [
+        props.dataSource,
+        props.dependentValue,
+        props.dataset,
+        props.dataSourceDependsOn
+      ]);
+      const filteredItems = list?.filter((item) => {
+        const value = getNestedValue7(item, props.dataTextFieldName);
+        return value?.toLowerCase().includes(searchTerm?.toLowerCase());
+      });
+      const playBeep = () => {
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        const oscillator = audioCtx.createOscillator();
+        const gainNode = audioCtx.createGain();
+        oscillator.type = "square";
+        oscillator.frequency.setValueAtTime(300, audioCtx.currentTime);
+        gainNode.gain.setValueAtTime(0.02, audioCtx.currentTime);
+        oscillator.connect(gainNode);
+        gainNode.connect(audioCtx.destination);
+        oscillator.start();
+        setTimeout(() => {
+          oscillator.stop();
+          audioCtx.close();
+        }, 250);
+      };
+      (0, import_react45.useEffect)(() => {
+        const filteredItems2 = list?.filter(
+          (item) => item[props?.dataTextFieldName]?.toLowerCase().includes(searchTerm?.toLowerCase())
+        );
+        if (searchTerm.length > 0 && filteredItems2.length === 0) {
+          playBeep();
+          setIsError(true);
+        } else {
+          setIsError(false);
+        }
+      }, [searchTerm]);
+      const handleSelect = (event, item) => {
+        event.preventDefault();
+        setSearchTerm(getNestedValue7(item, props.dataTextFieldName));
+        if (props.callback) {
+          const val = {};
+          props.callback({
+            name: props.name,
+            value: item[props.dataKeyFieldName],
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+        setHighlightedIndex(0);
+        setIsOpen(false);
+      };
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+          setIsOpen(false);
+          setHighlightedIndex(-1);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const nextIndex = prev < filteredItems.length - 1 ? prev + 1 : prev;
+            scrollIntoView(nextIndex);
+            return nextIndex;
+          });
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const prevIndex = prev > 0 ? prev - 1 : prev;
+            scrollIntoView(prevIndex);
+            return prevIndex;
+          });
+        } else if (e.key === "Enter" && highlightedIndex >= 0) {
+          handleSelect(e, filteredItems[highlightedIndex]);
+        }
+      };
+      const scrollIntoView = (index) => {
+        if (listRef.current) {
+          const item = listRef.current.children[index];
+          if (item) {
+            item.scrollIntoView();
+          }
+        }
+      };
+      const textChangeHandler = (event) => {
+        const newSearchTerm = event.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        setHighlightedIndex(0);
+      };
+      const handleInputChange = (event, field) => {
+        setFormData((prev) => ({ ...prev, [field]: event.target.value }));
+      };
+      const handleSaveModal = (0, import_react45.useCallback)(async () => {
+        console.log("Form Data:", formData);
+        return formData;
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "text-sm mb-1 font-medium", children: [
+          props.attributes?.label,
+          " ",
+          " ",
+          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "bg-error-weak", children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          "input",
+          {
+            type: "text",
+            value: searchTerm,
+            onChange: textChangeHandler,
+            onFocus: () => setIsOpen(true),
+            onKeyDown: handleKeyDown,
+            placeholder: props.attributes?.placeholder,
+            className: `peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm
+          ${isError ? "focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50" : "focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"}  
+          disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none`
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ref: containerRef, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react45.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "fixed z-50 right-0 bg-white top-[62px] w-1/4 border-l border-gray-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-col p-2 bg-accent-950 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("h5", { className: "text-md text-white font-medium", children: [
+              "Select a",
+              " ",
+              props.attributes?.label || props.attributes?.heading
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200 h-10", children: props.createFields && props.createFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "text-primary hover:text-primary-800",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  setIsCreateOpen(true);
+                },
+                children: "Create"
+              }
+            ) })
+          ] }),
+          isCreateOpen && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "fixed right-0 w-1/4 h-full top-[62px] bg-white shadow-lg border-l border-gray-200 z-50", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-col p-2 bg-accent-950", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("h5", { className: "text-md font-medium text-white", children: [
+              "Create New ",
+              props.attributes?.label
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsCreateOpen(false),
+                className: "text-red-600 hover:text-red-800",
+                children: "Close"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "p-4", children: [
+              props.createFields?.map((field) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mb-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("label", { className: "text-sm mb-1 font-medium block", children: field.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  "input",
+                  {
+                    type: field.type,
+                    value: formData[field.name] || "",
+                    onChange: (e) => handleInputChange(e, field.name),
+                    placeholder: field.placeholder,
+                    required: field.required,
+                    disabled: field.disabled,
+                    pattern: field.pattern,
+                    minLength: field.minLength,
+                    maxLength: field.maxLength,
+                    className: "peer mt-1 py-1.5 block w-full text-black rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                  }
+                )
+              ] }, field.name)),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Button_default, { onClick: async () => {
+                handleSaveModal();
+                return { isSuccessful: true };
+              }, className: "w-full", children: [
+                "Save ",
+                props.attributes?.label
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            "div",
+            {
+              ref: listRef,
+              className: "fixed z-10 right-0 mt-[130px] top-0 w-1/4 bg-white border-l border-gray-200 shadow-lg overflow-y-auto",
+              style: { height: "calc(100vh - 130px)" },
+              children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    handleSelect(e, item);
+                  },
+                  className: `w-full px-4 py-2 flex items-center space-x-2 text-left border-b border-gray-200 ${index === highlightedIndex ? "bg-gray-200" : "hover:bg-gray-100"}`,
+                  role: "option",
+                  tabIndex: -1,
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: getNestedValue7(item, props.dataTextFieldName) })
+                }
+              ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
+            }
+          )
+        ] }) })
+      ] });
+    };
+    SelectWithSearchPanel_default = SelectWithSearchPanel;
+  }
+});
+
+// src/components/controls/edit/BooleanSelect.tsx
+var import_react46, import_jsx_runtime67, BooleanSelect, BooleanSelect_default;
+var init_BooleanSelect = __esm({
+  "src/components/controls/edit/BooleanSelect.tsx"() {
+    "use strict";
+    import_react46 = __toESM(require("react"));
+    import_jsx_runtime67 = require("react/jsx-runtime");
+    BooleanSelect = (props) => {
+      const [list, setList] = (0, import_react46.useState)();
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        const boolValue = text?.toLowerCase() === "true" || text === "1";
+        if (props.callback !== void 0) {
+          props.callback({
+            name: props.name,
+            value: boolValue,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      (0, import_react46.useEffect)(() => {
+        async function fetchData() {
+          console.log("in select");
+          if (props.dataset) {
+            setList(props.dataset);
+          } else if (props.dataSource && props.dataSource != "" && props.serviceClient) {
+            let dataSource = props.dataSource;
+            let response;
+            if (props.dataSourceDependsOn) {
+              if (props.dependentValue) {
+                dataSource = dataSource.replace(
+                  `{${props.dataSourceDependsOn}}`,
+                  props.dependentValue
+                );
+                response = await props.serviceClient.get(dataSource);
+                setList(response.result);
+              }
+            } else {
+              response = await props.serviceClient.get(dataSource);
+              setList(response.result);
+            }
+          }
+        }
+        fetchData();
+      }, [
+        props.dataSource,
+        props.dependentValue,
+        props.dataset,
+        props.dataSourceDependsOn
+      ]);
+      let value;
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react46.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+          "select",
+          {
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            disabled: props?.attributes?.readOnly,
+            className: "peer mt-1 py-1.5 block w-full text-black rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     ",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("option", { className: "", value: "", children: props.attributes?.placeholder || "Select" }),
+              list && list.map((item, i) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                  "option",
+                  {
+                    className: "fac-select-option",
+                    value: item[props.dataKeyFieldName],
+                    children: item[props.dataTextFieldName]
+                  },
+                  item[props.dataKeyFieldName]
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    BooleanSelect_default = BooleanSelect;
+  }
+});
+
+// src/components/controls/edit/EmailInput.tsx
+var import_react47, import_jsx_runtime68, EmailInput, EmailInput_default;
+var init_EmailInput = __esm({
+  "src/components/controls/edit/EmailInput.tsx"() {
+    "use strict";
+    import_react47 = __toESM(require("react"));
+    import_jsx_runtime68 = require("react/jsx-runtime");
+    EmailInput = (props) => {
+      const textChangeHandler = (event) => {
+        const text = event.target.value;
+        if (text) {
+          const atIndex = text.indexOf("@");
+          const dotIndex = text.indexOf(".", atIndex);
+          if (dotIndex < atIndex || text.length - dotIndex <= 2) {
+            event.target.setCustomValidity("invaild-value");
+          } else {
+            event.target.setCustomValidity("");
+          }
+        }
+        if (props.callback !== void 0) {
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index
+          });
+        }
+      };
+      let value = "";
+      if (props.value !== void 0 && props.value !== null) {
+        value = props.value;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react47.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium text-slate-700", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          "input",
+          {
+            type: "email",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: textChangeHandler,
+            required: props?.attributes?.required,
+            placeholder: props?.attributes?.placeholder,
+            maxLength: props?.attributes?.maxLength,
+            disabled: props?.attributes?.readOnly,
+            minLength: props?.attributes?.minLength,
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     transition-all duration-500 ease-in-out"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 mb-0 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
+      ] }) });
+    };
+    EmailInput_default = EmailInput;
+  }
+});
+
+// src/components/controls/edit/TimeInput.tsx
+var import_react48, import_jsx_runtime69, TimeInput, TimeInput_default;
+var init_TimeInput = __esm({
+  "src/components/controls/edit/TimeInput.tsx"() {
+    "use strict";
+    "use client";
+    import_react48 = __toESM(require("react"));
+    import_jsx_runtime69 = require("react/jsx-runtime");
+    TimeInput = (props) => {
+      const timeChangeHandler = (event) => {
+        const timeValue = event.target.value;
+        if (props.callback) {
+          props.callback({
+            name: props.name,
+            value: timeValue,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react48.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+        " ",
+        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          "input",
+          {
+            type: "time",
+            name: props.name,
+            id: props.name,
+            value: typeof props.value === "boolean" ? "" : props.value ?? "",
+            onChange: timeChangeHandler,
+            required: props?.attributes?.required,
+            disabled: props?.attributes?.readOnly,
+            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ?? "" })
+      ] }) });
+    };
+    TimeInput_default = TimeInput;
+  }
+});
+
+// src/components/controls/edit/AssetUpload.tsx
+var import_react49, import_jsx_runtime70, AssetUpload, AssetUpload_default;
+var init_AssetUpload = __esm({
+  "src/components/controls/edit/AssetUpload.tsx"() {
+    "use strict";
+    "use client";
+    import_react49 = __toESM(require("react"));
+    init_ClientButton();
+    init_StyleTypes();
+    init_AssetUtility();
+    init_Hyperlink();
+    init_Icon();
+    import_jsx_runtime70 = require("react/jsx-runtime");
+    AssetUpload = (props) => {
+      const isDisabled = props.attributes?.disable ?? false;
+      let allValues = [];
+      if (props.value !== void 0 && props.value !== null && props.value !== "") {
+        try {
+          allValues = JSON.parse(props.value.toString());
+        } catch (error) {
+        }
+      }
+      const getInitialTab = () => {
+        if (allValues.length > 0) {
+          const asset = allValues[0];
+          if (asset.posterUrl) {
+            return "video";
+          } else if (asset.assetUrl) {
+            return "image";
+          }
+        }
+        return "image";
+      };
+      const [assetType, setAssetType] = import_react49.default.useState(getInitialTab);
+      (0, import_react49.useEffect)(() => {
+        setAssetType(getInitialTab());
+      }, [props.value]);
+      const assetUploadCallback = (newAsset) => {
+        if (isDisabled) return;
+        let updated = [];
+        updated.push({
+          assetUrl: newAsset.assetUrl,
+          title: newAsset.title,
+          posterUrl: newAsset.posterUrl,
+          intrinsicHeight: newAsset.intrinsicHeight,
+          intrinsicWidth: newAsset.intrinsicWidth
+        });
+        props.callback?.({
+          name: props.name,
+          value: JSON.stringify(updated),
+          index: props.index,
+          groupKey: props.groupKey
+        });
+      };
+      const deleteFile = (index) => {
+        if (isDisabled) return;
+        let existingValue = [];
+        if (props.value) {
+          try {
+            existingValue = JSON.parse(props.value.toString());
+          } catch (error) {
+          }
+        }
+        if (existingValue.length > index) {
+          existingValue.splice(index, 1);
+          props.callback?.({
+            name: props.name,
+            value: JSON.stringify(existingValue),
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      const textChangeHandler = (index, event) => {
+        if (isDisabled) return;
+        let existingValue = [];
+        if (props.value) {
+          try {
+            existingValue = JSON.parse(props.value.toString());
+          } catch (error) {
+          }
+        }
+        const text = event.target.value;
+        if (existingValue.length > index) {
+          const updatedArray = [...existingValue];
+          updatedArray[index] = { ...updatedArray[index], title: text };
+          props.callback?.({
+            name: props.name,
+            value: JSON.stringify(updatedArray),
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      const getAssetType = (asset) => {
+        if (asset.assetUrl?.endsWith(".m3u8") || asset.posterUrl) return "video";
+        return "image";
+      };
+      const shouldShowDetails = () => {
+        if (allValues.length === 0) return false;
+        const asset = allValues[0];
+        if (assetType === "video") {
+          return Boolean(asset.posterUrl && asset.assetUrl && asset.assetUrl.endsWith(".m3u8"));
+        }
+        if (assetType === "image") {
+          return Boolean(asset.assetUrl && !asset.assetUrl.endsWith(".m3u8"));
+        }
+        return false;
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_react49.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("label", { className: "block mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex gap-6 bg-neutral-100 rounded p-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            ClientButton_default,
+            {
+              className: assetType === "image" ? "px-2 py-1 rounded bg-body-200 scale-95" : "text-neutral-700",
+              ButtonType: "Link" /* Link */,
+              onClick: () => setAssetType("image"),
+              disabled: isDisabled,
+              children: "Image Upload"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            ClientButton_default,
+            {
+              className: assetType === "video" ? "bg-body-200 px-2 py-1 rounded-md scale-95" : "text-neutral-700",
+              ButtonType: "Link" /* Link */,
+              onClick: () => setAssetType("video"),
+              disabled: isDisabled,
+              children: "Video Upload"
+            }
+          )
+        ] }),
+        shouldShowDetails() && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative mt-4 rounded-md p-4 border-2 border-dotted border-gray-300 bg-gray-50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "absolute -top-2.5 left-3 bg-primary-600 text-white text-xs px-2 py-0.5 rounded-full", children: getAssetType(allValues[0]) === "video" ? "Video" : "Image" }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-col gap-3", children: allValues.map((digitalAsset, index) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex justify-between items-start gap-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "grid grid-cols-2 gap-x-8 gap-y-3 text-sm w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-gray-500", children: "Title" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: digitalAsset.title,
+                    onChange: (event) => textChangeHandler(index, event),
+                    placeholder: "title",
+                    disabled: isDisabled,
+                    className: "w-full mt-1 py-1.5 block rounded border-gray-300 shadow-sm bg-white\n                        focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50\n                        disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
+                  }
+                )
+              ] }),
+              digitalAsset.intrinsicWidth && digitalAsset.intrinsicHeight && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-gray-500", children: "Resolution" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("p", { className: "font-medium text-gray-900 mt-3", children: [
+                  digitalAsset.intrinsicWidth,
+                  "\xD7",
+                  digitalAsset.intrinsicHeight
+                ] })
+              ] }),
+              (digitalAsset.assetUrl || digitalAsset.posterUrl) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-gray-500", children: "Image / Poster" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-shrink-0 flex flex-col gap-3 mt-1", children: [
+                  getAssetType(digitalAsset) === "video" && digitalAsset.posterUrl && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                    "img",
+                    {
+                      src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.posterUrl),
+                      alt: digitalAsset.title || "Video poster",
+                      className: "w-32 h-auto object-cover rounded border p-1"
+                    }
+                  ),
+                  getAssetType(digitalAsset) === "image" && digitalAsset.assetUrl && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                    "img",
+                    {
+                      src: AssetUtility_default.resolveUrl(props.serviceClient?.baseUrl, digitalAsset.assetUrl),
+                      alt: digitalAsset.title || "Uploaded image",
+                      className: "w-32 h-auto object-cover rounded border p-1"
+                    }
+                  )
+                ] })
+              ] }),
+              digitalAsset.assetUrl?.endsWith(".m3u8") && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "col-span-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-gray-500", children: "HLS Link" }),
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                  Hyperlink,
+                  {
+                    href: digitalAsset.assetUrl,
+                    className: "text-primary-600 underline mt-1 break-all",
+                    title: digitalAsset.assetUrl,
+                    children: digitalAsset.assetUrl
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+              "span",
+              {
+                onClick: () => !isDisabled && deleteFile(index),
+                className: isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+                children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Icon_default, { className: "w-4 h-4 text-primary", name: "delete" })
+              }
+            )
+          ] }, index)) })
+        ] })
+      ] });
+    };
+    AssetUpload_default = AssetUpload;
+  }
+});
+
+// src/components/controls/edit/SwitchInput.tsx
+var import_react50, import_jsx_runtime71, SwitchInput, SwitchInput_default;
+var init_SwitchInput = __esm({
+  "src/components/controls/edit/SwitchInput.tsx"() {
+    "use strict";
+    import_react50 = __toESM(require("react"));
+    import_jsx_runtime71 = require("react/jsx-runtime");
+    SwitchInput = (props) => {
+      const textChangeHandler = (event) => {
+        let text = event.target.checked;
+        if (props.callback !== void 0) {
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      let value = false;
+      if (props.value != void 0 && props.value != null && props.value != "" && (props.value == "true" || props.value.toString() == "true")) {
+        value = true;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react50.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-start justify-between gap-4 py-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "min-w-0", children: [
+          props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+            "label",
+            {
+              htmlFor: props.name,
+              className: "inline-block text-sm font-semibold text-slate-800",
+              children: [
+                props.attributes.label,
+                props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "bg-error-weak", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "label",
+          {
+            htmlFor: props.name,
+            className: "relative inline-flex shrink-0 cursor-pointer items-center peer-disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  name: props.name,
+                  id: props.name,
+                  checked: value,
+                  onChange: textChangeHandler,
+                  required: props?.attributes?.required,
+                  disabled: props?.attributes?.readOnly,
+                  className: "peer sr-only"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                "div",
+                {
+                  className: "h-6 w-11 rounded-full bg-slate-200 shadow-inner\n                       transition-colors duration-200 ease-in-out\n                       peer-checked:bg-blue-600\n                       peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300 peer-focus-visible:ring-offset-2\n                       peer-disabled:bg-slate-100"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                "div",
+                {
+                  className: "absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-default shadow\n                       transition-transform duration-200 ease-in-out\n                       peer-checked:translate-x-5\n                       peer-disabled:bg-slate-50"
+                }
+              )
+            ]
+          }
+        )
+      ] }) });
+    };
+    SwitchInput_default = SwitchInput;
+  }
+});
+
+// src/components/utilities/DateTimeUtility.tsx
+var DateTimeUtility, DateTimeUtility_default;
+var init_DateTimeUtility = __esm({
+  "src/components/utilities/DateTimeUtility.tsx"() {
+    "use strict";
+    DateTimeUtility = class {
+      constructor() {
+      }
+      static formatDate(date) {
+        if (!date) {
+          throw new Error("Invalid date");
+        }
+        const pad = (num) => num.toString().padStart(2, "0");
+        const year = date.getFullYear();
+        const month = pad(date.getMonth() + 1);
+        const day = pad(date.getDate());
+        const hours = pad(date.getHours());
+        const minutes = pad(date.getMinutes());
+        const seconds = pad(date.getSeconds());
+        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+      }
+      static getMonthShortNameCustom(month) {
+        const monthNames = [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec"
+        ];
+        if (month < 1 || month > 12) {
+          throw new Error(
+            "Invalid month. Please provide a value between 1 and 12."
+          );
+        }
+        return monthNames[month - 1];
+      }
+      static getCurrentWeekRange() {
+        const today = /* @__PURE__ */ new Date();
+        const day = today.getDay();
+        const diffToMonday = (day === 0 ? -6 : 1) - day;
+        const monday = new Date(today);
+        monday.setDate(today.getDate() + diffToMonday);
+        monday.setHours(0, 0, 0, 0);
+        const sunday = new Date(monday);
+        sunday.setDate(monday.getDate() + 6);
+        sunday.setHours(23, 59, 59, 999);
+        return { start: monday, end: sunday };
+      }
+      static getCurrentMonthRange() {
+        const now = /* @__PURE__ */ new Date();
+        const start = new Date(now.getFullYear(), now.getMonth(), 1);
+        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+        return { start, end };
+      }
+      static formatShortDate(date) {
+        const day = date.getDate();
+        const month = this.getMonthShortNameCustom(date.getMonth() + 1);
+        return `${day} ${month}`;
+      }
+      static formatIndianCurrencyShort(value) {
+        if (value >= 1e7) {
+          return `${(value / 1e7).toFixed(2)} Cr`;
+        } else if (value >= 1e5) {
+          return `${(value / 1e5).toFixed(2)} L`;
+        } else if (value >= 1e3) {
+          return `${(value / 1e3).toFixed(2)} K`;
+        } else {
+          return `${value}`;
+        }
+      }
+    };
+    DateTimeUtility_default = DateTimeUtility;
+  }
+});
+
+// src/components/controls/edit/DateInput.tsx
+var import_react51, import_jsx_runtime72, DateInput, DateInput_default;
+var init_DateInput = __esm({
+  "src/components/controls/edit/DateInput.tsx"() {
+    "use strict";
+    import_react51 = require("react");
+    init_DateTimeUtility();
+    import_jsx_runtime72 = require("react/jsx-runtime");
+    DateInput = (props) => {
+      const value = (0, import_react51.useMemo)(() => {
+        if (props.value === void 0 || props.value === null || props.value === "") {
+          return "";
+        }
+        try {
+          const rawValue = String(props.value);
+          const utcDate = new Date(rawValue.endsWith("Z") ? rawValue : `${rawValue}Z`);
+          const localDate = new Date(
+            utcDate.getTime() - utcDate.getTimezoneOffset() * 6e4
+          );
+          return localDate.toISOString().slice(0, 10);
+        } catch {
+          return String(props.value);
+        }
+      }, [props.value]);
+      const changeHandler = (event) => {
+        const dateValue = event.target.value;
+        let callbackValue = dateValue;
+        const parsedDate = new Date(dateValue);
+        if (dateValue && !Number.isNaN(parsedDate.getTime())) {
+          const adjustedDate = new Date(
+            parsedDate.getTime() + 2 * parsedDate.getTimezoneOffset() * 6e4
+          );
+          callbackValue = DateTimeUtility_default.formatDate(adjustedDate);
+        }
+        props.callback?.({
+          name: props.name,
+          value: callbackValue,
+          index: props.index,
+          groupKey: props.groupKey
+        });
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("label", { className: "block mb-1", children: [
+        props.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-sm font-medium", children: props.attributes.label }),
+        " ",
+        props.attributes?.label && props.attributes.required && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "bg-error-weak", children: "*" }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          "input",
+          {
+            type: "date",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: changeHandler,
+            required: props.attributes?.required,
+            disabled: props.attributes?.readOnly,
+            max: String(props.attributes?.maxValue ?? "9999-12-31"),
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm ${props.inputClasses ?? ""}`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props.attributes?.errorMessage ?? "" })
+      ] });
+    };
+    DateInput_default = DateInput;
+  }
+});
+
+// src/components/controls/edit/RadioInput.tsx
+var import_react52, import_jsx_runtime73, RadioInput, RadioInput_default;
+var init_RadioInput = __esm({
+  "src/components/controls/edit/RadioInput.tsx"() {
+    "use strict";
+    import_react52 = require("react");
+    init_Icon();
+    import_jsx_runtime73 = require("react/jsx-runtime");
+    RadioInput = (props) => {
+      const [list, setList] = (0, import_react52.useState)([]);
+      (0, import_react52.useEffect)(() => {
+        async function loadData() {
+          if (props.dataset) {
+            setList(props.dataset);
+            return;
+          }
+          if (!props.dataSource || !props.serviceClient) {
+            setList([]);
+            return;
+          }
+          let dataSource = props.dataSource;
+          if (props.dataSourceDependsOn) {
+            if (!props.dependentValue) {
+              setList([]);
+              return;
+            }
+            dataSource = dataSource.replace(
+              `{${props.dataSourceDependsOn}}`,
+              props.dependentValue
+            );
+          }
+          const response = await props.serviceClient.get(dataSource);
+          setList(response.result ?? []);
+        }
+        loadData();
+      }, [
+        props.dataSource,
+        props.dataSourceDependsOn,
+        props.dataset,
+        props.dependentValue,
+        props.serviceClient
+      ]);
+      const changeHandler = (event) => {
+        if (!props.attributes?.readOnly) {
+          props.callback?.({
+            name: props.name,
+            value: event.target.value,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-sm font-medium", children: props.attributes?.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex flex-col gap-3", children: list.map((item, index) => {
+          const itemValue = item[props.dataKeyFieldName];
+          const isSelected = String(itemValue) === String(props.value ?? "");
+          const isRecommended = props.dataRecommendedValue !== void 0 && String(itemValue) === String(props.dataRecommendedValue);
+          const resultClassName = isSelected ? isRecommended ? "bg-success" : props.dataRecommendedValue ? "bg-alert" : "border-transparent" : "border-transparent";
+          const iconName = isSelected && props.dataRecommendedValue ? isRecommended ? "checkCircle" : "xCircle" : void 0;
+          const inputId = `${props.name}-${props.index ?? 0}-id-${index}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+            "div",
+            {
+              className: `font-normal flex items-center justify-between gap-4 cursor-pointer border rounded p-2 ${resultClassName}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex gap-4 items-start", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                    "input",
+                    {
+                      type: "radio",
+                      className: "form-radio mt-1.5 focus:outline-none",
+                      name: `${props.name}-${props.index ?? 0}`,
+                      id: inputId,
+                      value: itemValue,
+                      checked: isSelected,
+                      readOnly: props.attributes?.readOnly,
+                      onChange: changeHandler,
+                      required: props.attributes?.required
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("label", { className: "text-body-950 pr-2", htmlFor: inputId, children: item[props.dataTextFieldName] })
+                ] }),
+                iconName && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon_default, { className: "w-5 h-5 text-success", name: iconName })
+              ]
+            },
+            String(itemValue)
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props.attributes?.errorMessage ?? "" })
+      ] });
+    };
+    RadioInput_default = RadioInput;
+  }
+});
+
+// src/components/controls/edit/Switcher.tsx
+var import_react53, import_jsx_runtime74, Switcher, Switcher_default;
+var init_Switcher = __esm({
+  "src/components/controls/edit/Switcher.tsx"() {
+    "use strict";
+    import_react53 = require("react");
+    import_jsx_runtime74 = require("react/jsx-runtime");
+    Switcher = (props) => {
+      const [list, setList] = (0, import_react53.useState)([]);
+      (0, import_react53.useEffect)(() => {
+        async function loadData() {
+          if (props.dataset) {
+            setList(props.dataset);
+            return;
+          }
+          if (!props.dataSource || !props.serviceClient) {
+            setList([]);
+            return;
+          }
+          let dataSource = props.dataSource;
+          if (props.dataSourceDependsOn) {
+            if (!props.dependentValue) {
+              setList([]);
+              return;
+            }
+            dataSource = dataSource.replace(
+              `{${props.dataSourceDependsOn}}`,
+              props.dependentValue
+            );
+          }
+          const response = await props.serviceClient.get(dataSource);
+          setList(response.result ?? []);
+        }
+        loadData();
+      }, [
+        props.dataSource,
+        props.dataSourceDependsOn,
+        props.dataset,
+        props.dependentValue,
+        props.serviceClient
+      ]);
+      const changeHandler = (event) => {
+        props.callback?.({
+          name: props.name,
+          value: event.target.value,
+          index: props.index,
+          groupKey: props.groupKey
+        });
+      };
+      const value = props.value === void 0 || props.value === null ? "" : String(props.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("label", { className: "block mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-sm font-medium", children: props.attributes?.label }),
+        list.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "input",
+          {
+            type: "text",
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: changeHandler,
+            required: props.attributes?.required,
+            placeholder: props.attributes?.placeholder,
+            disabled: props.attributes?.readOnly,
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm ${props.inputClasses ?? ""}`
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+          "select",
+          {
+            name: props.name,
+            id: props.name,
+            value,
+            onChange: changeHandler,
+            required: props.attributes?.required,
+            disabled: props.attributes?.readOnly,
+            className: `peer select my-1 py-1 block w-full rounded shadow-sm ${props.inputClasses ?? ""}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("option", { value: "", children: props.attributes?.placeholder || "Select" }),
+              list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                "option",
+                {
+                  value: item[props.dataKeyFieldName],
+                  children: item[props.dataTextFieldName]
+                },
+                String(item[props.dataKeyFieldName])
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props.attributes?.errorMessage ?? "" })
+      ] });
+    };
+    Switcher_default = Switcher;
+  }
+});
+
+// src/components/controls/edit/ReferenceInput.tsx
+var import_jsx_runtime75, ReferenceInput, ReferenceInput_default;
+var init_ReferenceInput = __esm({
+  "src/components/controls/edit/ReferenceInput.tsx"() {
+    "use strict";
+    init_SelectWithSearchInput();
+    import_jsx_runtime75 = require("react/jsx-runtime");
+    ReferenceInput = (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SelectWithSearchInput_default, { ...props });
+    };
+    ReferenceInput_default = ReferenceInput;
+  }
+});
+
+// src/components/controls/edit/InputControlClient.tsx
+var InputControlClient_exports = {};
+__export(InputControlClient_exports, {
+  default: () => InputControlClient_default
+});
+var import_react54, import_jsx_runtime76, InputControl, InputControlClient_default;
+var init_InputControlClient = __esm({
+  "src/components/controls/edit/InputControlClient.tsx"() {
+    "use strict";
+    "use client";
+    import_react54 = __toESM(require("react"));
+    init_MultilineTextInput();
+    init_LineTextInput();
+    init_MoneyInput();
+    init_InputControlType();
+    init_Select();
+    init_PercentageInput();
+    init_PhoneInput();
+    init_NumberInput();
+    init_CheckboxInput();
+    init_OtpInput();
+    init_DateTimeInput();
+    init_ColorInput();
+    init_SelectWithSearchInput();
+    init_SelectWithSearchPanel();
+    init_BooleanSelect();
+    init_EmailInput();
+    init_TimeInput();
+    init_AssetUpload();
+    init_SwitchInput();
+    init_DateInput();
+    init_RadioInput();
+    init_Switcher();
+    init_ReferenceInput();
+    import_jsx_runtime76 = require("react/jsx-runtime");
+    InputControl = import_react54.default.forwardRef(
+      (props, ref) => {
+        const ControlComponents = {
+          [InputControlType_default.lineTextInput]: LineTextInput_default,
+          [InputControlType_default.emailInput]: EmailInput_default,
+          [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
+          [InputControlType_default.moneyInput]: MoneyInput_default,
+          [InputControlType_default.select]: Select_default,
+          [InputControlType_default.percentageInput]: PercentageInput_default,
+          [InputControlType_default.phoneInput]: PhoneInput_default,
+          [InputControlType_default.numberInput]: NumberInput_default,
+          [InputControlType_default.checkboxInput]: CheckboxInput_default,
+          [InputControlType_default.otpInput]: OtpInput_default,
+          [InputControlType_default.datetimeInput]: DateTimeInput_default,
+          [InputControlType_default.colorInput]: ColorInput_default,
+          [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
+          [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
+          [InputControlType_default.booleanSelect]: BooleanSelect_default,
+          [InputControlType_default.timeInput]: TimeInput_default,
+          [InputControlType_default.asset]: AssetUpload_default,
+          [InputControlType_default.assetUpload]: AssetUpload_default,
+          [InputControlType_default.switchInput]: SwitchInput_default,
+          [InputControlType_default.dateInput]: DateInput_default,
+          [InputControlType_default.radioInput]: RadioInput_default,
+          [InputControlType_default.switcher]: Switcher_default,
+          [InputControlType_default.referenceInput]: ReferenceInput_default
+        };
+        const SelectedControlComponent = ControlComponents[props.controlType];
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react54.default.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
+      }
+    );
+    InputControl.displayName = "InputControl";
+    InputControlClient_default = InputControl;
+  }
+});
+
+// src/components/controls/edit/InputControl.tsx
+var import_dynamic11, InputControl2, InputControl_default;
+var init_InputControl = __esm({
+  "src/components/controls/edit/InputControl.tsx"() {
     "use strict";
-    init_Icons();
-    import_jsx_runtime52 = require("react/jsx-runtime");
-    Icon = ({ name, className, ...props }) => {
-      const IconComponent = Icons_default[name];
-      if (!IconComponent) {
-        console.error(`Icon "${name}" not found.`);
-        return null;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconComponent, { ...props, className });
-    };
-    Icon_default = Icon;
+    import_dynamic11 = __toESM(require("next/dynamic"));
+    InputControl2 = (0, import_dynamic11.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
+      ssr: false
+    });
+    InputControl_default = InputControl2;
   }
 });
 
-// src/components/Pagination.tsx
-var Pagination_exports = {};
-__export(Pagination_exports, {
-  default: () => Pagination_default
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+var DataBindingControls_exports = {};
+__export(DataBindingControls_exports, {
+  default: () => DataBindingControls_default
 });
-var import_react32, import_jsx_runtime53, Pagination, Pagination_default;
-var init_Pagination = __esm({
-  "src/components/Pagination.tsx"() {
+var import_react55, import_navigation, import_jsx_runtime77, humanize, escapeODataString, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
+var init_DataBindingControls = __esm({
+  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
     "use strict";
     "use client";
-    import_react32 = require("react");
-    init_OdataBuilder();
-    init_Icon();
-    init_StyleTypes();
+    import_react55 = require("react");
+    import_navigation = require("next/navigation");
+    init_InputControl();
     init_InputControlType();
-    init_Hyperlink();
-    import_jsx_runtime53 = require("react/jsx-runtime");
-    Pagination = (props) => {
-      const { dataset, path, query, showPageSizeSelector = false, showJumpToPage = false } = props;
-      const builder = (0, import_react32.useMemo)(() => {
-        const b = new OdataBuilder(path);
-        if (query) b.setQuery(query);
-        return b;
-      }, [path, query]);
-      const activePageNumber = builder.getPageNumber(Constants.pagesize);
-      const totalItems = dataset?.count || 0;
-      const itemsPerPage = parseInt(builder.top || Constants.pagesize.toString());
-      const totalPages = Math.ceil(totalItems / itemsPerPage);
-      const startItem = totalItems > 0 ? (activePageNumber - 1) * itemsPerPage + 1 : 0;
-      const endItem = Math.min(activePageNumber * itemsPerPage, totalItems);
-      const getPaginationRange = () => {
-        const delta = 1;
-        const range = [];
-        if (totalPages <= 7) {
-          return Array.from({ length: totalPages }, (_, i) => i + 1);
-        }
-        range.push(1);
-        let start = Math.max(2, activePageNumber - delta);
-        let end = Math.min(totalPages - 1, activePageNumber + delta);
-        if (activePageNumber - delta <= 2) {
-          end = Math.min(totalPages - 1, 4);
-        }
-        if (activePageNumber + delta >= totalPages - 1) {
-          start = Math.max(2, totalPages - 4);
-        }
-        if (start > 2) {
-          range.push("...");
-        }
-        for (let i = start; i <= end; i++) {
-          range.push(i);
-        }
-        if (end < totalPages - 1) {
-          range.push("...");
-        }
-        if (totalPages > 1) {
-          range.push(totalPages);
-        }
-        return range;
+    import_jsx_runtime77 = require("react/jsx-runtime");
+    humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+    escapeODataString = (value) => value.replace(/'/g, "''");
+    normalizeSortOption = (option) => {
+      const direction = option.direction.trim();
+      return {
+        label: option.title || humanize(option.name),
+        value: [option.name, direction].filter(Boolean).join(" ")
       };
-      const paginationRange = getPaginationRange();
-      const PageButton = ({ page, children }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        Hyperlink,
-        {
-          linkType: "Link" /* Link */,
-          className: `
-               min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2.5 md:px-3 
-                border text-sm font-medium transition-colors duration-150
-                ${activePageNumber === page ? "bg-primary-base font-semibold" : ""}
-            `,
-          href: builder.getNewPageUrl(page),
-          children
-        }
+    };
+    DUMMY_FACETS = {
+      CategoryTitle: [
+        { value: "Career Readiness", count: 2 },
+        { value: "Student Learning", count: 2 }
+      ],
+      Author: [
+        { value: "John Smith", count: 2 },
+        { value: "Sarah Jones", count: 1 },
+        { value: "Emily Brown", count: 1 }
+      ]
+    };
+    DUMMY_SORT_OPTIONS = [
+      { name: "createdDate", title: "Newest First", direction: "desc" },
+      { name: "createdDate", title: "Oldest First", direction: "asc" },
+      { name: "title", title: "Title A-Z", direction: "asc" },
+      { name: "title", title: "Title Z-A", direction: "desc" }
+    ];
+    DataBindingControls = ({
+      path,
+      query,
+      facets,
+      sortOptions,
+      showFacets,
+      showSortOptions,
+      showSearchBar,
+      mode = "toolbar"
+    }) => {
+      const router = (0, import_navigation.useRouter)();
+      const apiFacetGroups = Object.entries(facets ?? {}).filter(
+        ([, values]) => Array.isArray(values) && values.length > 0
       );
-      const NavigationButton = ({ page, disabled, children }) => {
-        if (disabled) {
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border  bg-neutral-base cursor-not-allowed", children });
+      const facetGroups = apiFacetGroups.length > 0 ? apiFacetGroups : Object.entries(DUMMY_FACETS);
+      const apiSortOptions = (sortOptions ?? []).filter(
+        (option) => option?.name && option?.direction
+      );
+      const resolvedSortOptions = apiSortOptions.length > 0 ? apiSortOptions : DUMMY_SORT_OPTIONS;
+      const normalizedSortOptions = resolvedSortOptions.map(normalizeSortOption).filter((option) => option.value);
+      const currentFilter = query?.["$filter"] ?? query?.filter ?? "";
+      const currentSort = query?.["$orderby"] ?? query?.orderBy ?? "";
+      const currentSearch = query?.searchTerm ?? query?.searchText ?? "";
+      const [searchText, setSearchText] = (0, import_react55.useState)(currentSearch);
+      const lastNavigationUrl = (0, import_react55.useRef)(null);
+      (0, import_react55.useEffect)(() => {
+        setSearchText(currentSearch);
+      }, [currentSearch]);
+      const getQueryUrl = (0, import_react55.useCallback)(
+        (updates) => {
+          const params = new URLSearchParams(query ?? {});
+          Object.entries(updates).forEach(([key, value]) => {
+            if (value) {
+              params.set(key, value);
+            } else {
+              params.delete(key);
+            }
+          });
+          params.delete("$skip");
+          params.delete("skip");
+          const queryString = params.toString();
+          return queryString ? `${path}?${queryString}` : path;
+        },
+        [path, query]
+      );
+      const getFacetUrl = (field, value) => getQueryUrl({
+        $filter: value ? `${field} eq '${escapeODataString(value)}'` : void 0,
+        filter: void 0
+      });
+      const navigateWithoutReload = (0, import_react55.useCallback)(
+        (url) => {
+          if (lastNavigationUrl.current === url) {
+            return;
+          }
+          if (typeof window !== "undefined") {
+            const targetUrl = new URL(url, window.location.origin);
+            if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
+              return;
+            }
+          }
+          lastNavigationUrl.current = url;
+          router.push(url, { scroll: false });
+        },
+        [router]
+      );
+      (0, import_react55.useEffect)(() => {
+        const trimmedSearchText = searchText.trim();
+        if (trimmedSearchText === currentSearch.trim()) {
+          return;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          Hyperlink,
+        const timeout = window.setTimeout(() => {
+          navigateWithoutReload(
+            getQueryUrl({
+              searchTerm: trimmedSearchText || void 0,
+              searchText: void 0
+            })
+          );
+        }, 500);
+        return () => window.clearTimeout(timeout);
+      }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+      const hasFacetControls = showFacets && facetGroups.length > 0;
+      const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+      const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls);
+      const shouldShowFacets = mode === "facets" && hasFacetControls;
+      if (!shouldShowToolbar && !shouldShowFacets) {
+        return null;
+      }
+      const renderFacetLinks = (field, values, stacked = false) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: stacked ? "flex flex-col gap-1" : "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "button",
           {
-            className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center px-2 md:px-3 border transition-colors duration-150",
-            href: builder.getNewPageUrl(page),
-            children
+            type: "button",
+            onClick: () => navigateWithoutReload(getFacetUrl(field)),
+            "aria-pressed": !currentFilter,
+            className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter ? "" : "bg-primary-base font-semibold"}`,
+            children: "All"
           }
-        );
-      };
-      if (totalPages <= 1 && totalItems === 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "py-6 border-t bg-default", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "text-sm", children: [
-            "Showing ",
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "font-semibold", children: [
-              startItem,
-              "-",
-              endItem
-            ] }),
-            " ",
-            "out of ",
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "font-semibold", children: totalItems.toLocaleString() }),
-            " results"
-          ] }),
-          totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-              NavigationButton,
-              {
-                page: activePageNumber - 1,
-                disabled: activePageNumber === 1,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 mr-1" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Prev" })
-                ]
-              }
-            ),
-            paginationRange.map((item, index) => {
-              if (item === "...") {
-                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                  "span",
-                  {
-                    className: "min-w-[20px] md:min-w-[40px] h-10 flex items-center justify-center text-gray-500",
-                    children: "..."
-                  },
-                  `ellipsis-${index}`
-                );
-              }
-              const page = item;
-              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PageButton, { page, children: page }, page);
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-              NavigationButton,
+        ),
+        values.map((facet) => {
+          const filter = `${field} eq '${escapeODataString(facet.value)}'`;
+          return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+              "aria-pressed": currentFilter === filter,
+              className: `px-3 py-2 text-left text-sm ${stacked ? "w-full" : "border"} ${currentFilter === filter ? "bg-primary-base font-semibold" : ""}`,
+              children: [
+                facet.value,
+                " (",
+                facet.count,
+                ")"
+              ]
+            },
+            `${field}-${facet.value}`
+          );
+        })
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: mode === "toolbar" ? "mb-6" : "flex flex-col gap-2", children: [
+        shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            InputControl_default,
+            {
+              name: "searchText",
+              controlType: InputControlType_default.lineTextInput,
+              value: searchText,
+              callback: (updatedValues) => setSearchText(updatedValues.value),
+              attributes: { placeholder: "Search" },
+              inputClasses: "!mt-0"
+            }
+          ) }),
+          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "font-medium", children: "Sort by" }),
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              InputControl_default,
               {
-                page: activePageNumber + 1,
-                disabled: activePageNumber === totalPages,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Next" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon_default, { name: "chevronRight", className: "w-4 h-4 ml-1" }) })
-                ]
+                name: "sortOptions",
+                controlType: InputControlType_default.select,
+                value: currentSort,
+                dataset: normalizedSortOptions,
+                dataKeyFieldName: "value",
+                dataTextFieldName: "label",
+                callback: (updatedValues) => navigateWithoutReload(
+                  getQueryUrl({
+                    $orderby: updatedValues.value || void 0,
+                    orderBy: void 0
+                  })
+                ),
+                attributes: { placeholder: "Default" },
+                inputClasses: "!mt-0 min-w-44"
               }
             )
-          ] }),
-          showJumpToPage && totalPages > 5 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Go to:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              "input",
-              {
-                type: "number",
-                min: "1",
-                max: totalPages,
-                defaultValue: activePageNumber,
-                className: "w-20 h-10 px-3 border rounded text-sm focus:outline-none focus:ring-2 focus:border-transparent",
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") {
-                    const input = e.target;
-                    const page = parseInt(input.value);
-                    if (page >= 1 && page <= totalPages && page !== activePageNumber) {
-                      window.location.href = builder.getNewPageUrl(page);
-                    }
-                  }
-                }
-              }
-            ) })
           ] })
         ] }),
-        showPageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mt-4 pt-4 border-t bg-default", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "Show:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex space-x-1", children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            Hyperlink,
-            {
-              className: `
-                                        px-3 py-1 text-sm rounded border transition-colors duration-150
-                                        ${itemsPerPage === size ? "bg-primary-base font-medium" : "bg-neutral-weak"}
-                                    `,
-              href: builder.getNewPageSizeUrl(size),
-              children: size
-            },
-            size
-          )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm", children: "per page" })
-        ] }) })
+        shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
+        shouldShowFacets && facetGroups.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex flex-col gap-2", children: facetGroups.map(([field, values]) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("details", { className: "border-b", open: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("summary", { className: "cursor-pointer font-semibold", children: humanize(field) }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "p-2", children: renderFacetLinks(field, values, true) })
+        ] }, field)) })
       ] });
     };
-    Pagination_default = Pagination;
+    DataBindingControls_default = DataBindingControls;
   }
 });
 
@@ -2312,13 +4698,13 @@ var Slider_exports = {};
 __export(Slider_exports, {
   default: () => Slider_default
 });
-var import_react33, import_jsx_runtime54, Slider, ArrowButton, ProgressPill, Slider_default;
+var import_react56, import_jsx_runtime78, Slider, ArrowButton, ProgressPill, Slider_default;
 var init_Slider = __esm({
   "src/components/Slider.tsx"() {
     "use strict";
     "use client";
-    import_react33 = __toESM(require("react"));
-    import_jsx_runtime54 = require("react/jsx-runtime");
+    import_react56 = __toESM(require("react"));
+    import_jsx_runtime78 = require("react/jsx-runtime");
     Slider = ({
       children,
       slidesToShow = 4,
@@ -2336,13 +4722,13 @@ var init_Slider = __esm({
       pillStyle = "cumulative",
       progressPosition = "bottom"
     }) => {
-      const [currentSlide, setCurrentSlide] = (0, import_react33.useState)(0);
-      const [transition, setTransition] = (0, import_react33.useState)(true);
-      const [slidesToShowState, setSlidesToShowState] = (0, import_react33.useState)(
+      const [currentSlide, setCurrentSlide] = (0, import_react56.useState)(0);
+      const [transition, setTransition] = (0, import_react56.useState)(true);
+      const [slidesToShowState, setSlidesToShowState] = (0, import_react56.useState)(
         typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
       );
-      const [isPlaying, setIsPlaying] = (0, import_react33.useState)(autoplay);
-      (0, import_react33.useEffect)(() => {
+      const [isPlaying, setIsPlaying] = (0, import_react56.useState)(autoplay);
+      (0, import_react56.useEffect)(() => {
         if (typeof slidesToShow === "number") return;
         const handleResize = () => {
           if (window.innerWidth >= 1024) {
@@ -2357,7 +4743,7 @@ var init_Slider = __esm({
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
       }, [slidesToShow]);
-      (0, import_react33.useEffect)(() => {
+      (0, import_react56.useEffect)(() => {
         if (!autoplay) return;
         const timer = setInterval(() => {
           if (isPlaying) {
@@ -2366,7 +4752,7 @@ var init_Slider = __esm({
         }, autoplay_speed);
         return () => clearInterval(timer);
       }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
-      const totalSlides = import_react33.Children.count(children);
+      const totalSlides = import_react56.Children.count(children);
       const maxSlide = totalSlides - slidesToShowState;
       const nextSlide = () => {
         if (currentSlide >= maxSlide) {
@@ -2411,16 +4797,16 @@ var init_Slider = __esm({
         }
       };
       const translateX = -currentSlide * (100 / slidesToShowState);
-      const slides = import_react33.Children.map(children, (child, index) => {
-        if (!import_react33.default.isValidElement(child)) return null;
+      const slides = import_react56.Children.map(children, (child, index) => {
+        if (!import_react56.default.isValidElement(child)) return null;
         const childProps = child.props;
         const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
             style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
-            children: (0, import_react33.cloneElement)(child, {
+            children: (0, import_react56.cloneElement)(child, {
               className: mergedClassName
             })
           },
@@ -2438,14 +4824,14 @@ var init_Slider = __esm({
             return "bottom-4";
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "div",
         {
           className: `relative w-full overflow-hidden ${className}`,
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "div",
               {
                 className: "flex h-full",
@@ -2456,18 +4842,18 @@ var init_Slider = __esm({
                 children: slides
               }
             ),
-            show_arrows && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            show_arrows && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 ArrowButton,
                 {
                   direction: "left",
                   onClick: prevSlide,
                   visible: infinite_scroll || currentSlide > 0,
                   className: arrowClassName,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
                 ArrowButton,
                 {
                   direction: "right",
@@ -2475,13 +4861,13 @@ var init_Slider = __esm({
                   visible: infinite_scroll || currentSlide < maxSlide,
                   className: arrowClassName,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
                     "          "
                   ]
                 }
               )
             ] }),
-            show_dots && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            show_dots && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               ProgressPill,
               {
                 active: index === currentSlide,
@@ -2507,7 +4893,7 @@ var init_Slider = __esm({
       visible,
       children,
       className = ""
-    }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "button",
       {
         className: `
@@ -2533,13 +4919,13 @@ var init_Slider = __esm({
       currentSlide,
       totalSlides
     }) => {
-      const [progress, setProgress] = (0, import_react33.useState)(0);
-      (0, import_react33.useEffect)(() => {
+      const [progress, setProgress] = (0, import_react56.useState)(0);
+      (0, import_react56.useEffect)(() => {
         if (active) {
           setProgress(0);
         }
       }, [active, index]);
-      (0, import_react33.useEffect)(() => {
+      (0, import_react56.useEffect)(() => {
         if (!active || !isPlaying) {
           if (!active) {
             setProgress(0);
@@ -2594,7 +4980,7 @@ var init_Slider = __esm({
       const renderProgressBar = () => {
         if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
           const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
-          return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
             {
               className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
@@ -2606,7 +4992,7 @@ var init_Slider = __esm({
       };
       const renderCumulativeFill = () => {
         if (style === "cumulative" && isFilled && !isActive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
             {
               className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
@@ -2616,7 +5002,7 @@ var init_Slider = __esm({
         }
         return null;
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "button",
         {
           className: `${baseClasses} ${getStyleClasses()}`,
@@ -2644,7 +5030,7 @@ __export(server_exports, {
 module.exports = __toCommonJS(server_exports);
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react35 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react22 = __toESM(require("react"));
@@ -2731,32 +5117,13 @@ var LineBreakNode_default = LineBreakNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 var import_react6 = __toESM(require("react"));
 
-// src/components/utilities/AssetUtility.tsx
-var AssetUtility = class {
-  constructor() {
-  }
-  static resolveUrl(assetBaseUrl, url) {
-    if (!url) return void 0;
-    if (url.startsWith("http")) return url;
-    if (!assetBaseUrl) return url;
-    return `${assetBaseUrl}/${url}`;
-  }
-  // // static getAssetUrl(apiBaseUrl: string) {
-  // //   let domainName = apiBaseUrl.replace("https://", "");
-  // //   return `https://cdn.g-assets.com/${domainName}`;
-  // // }
-  // static getAssetFullPath(apiBaseUrl: string, relativePath: string) {
-  //   const domainName = apiBaseUrl.replace("https://", "");
-  //   return `https://cdn.g-assets.com/${domainName}/${relativePath}`;
-  // }
-};
-var AssetUtility_default = AssetUtility;
-
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
+init_AssetUtility();
 var import_dynamic2 = __toESM(require("next/dynamic"));
 
 // src/components/DeviceAssetSelector.tsx
 var import_dynamic = __toESM(require("next/dynamic"));
+init_AssetUtility();
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var HlsPlayer2 = (0, import_dynamic.default)(() => Promise.resolve().then(() => (init_HlsPlayer(), HlsPlayer_exports)), { ssr: false });
 var FORMAT_CLASSES = {
@@ -3808,8 +6175,8 @@ var WidgetNode = (props) => {
 var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_dynamic11 = __toESM(require("next/dynamic"));
-var import_react34 = __toESM(require("react"));
+var import_dynamic12 = __toESM(require("next/dynamic"));
+var import_react57 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 var import_dynamic8 = __toESM(require("next/dynamic"));
@@ -3831,6 +6198,7 @@ var EmbedNode = (props) => {
 var EmbedNode_default = EmbedNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
+init_AssetUtility();
 init_ServiceClient();
 
 // src/components/utilities/AnimationUtility.tsx
@@ -4054,6 +6422,7 @@ var NoDataFound = () => {
 var NoDataFound_default = NoDataFound;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
+init_AssetUtility();
 var import_dynamic9 = __toESM(require("next/dynamic"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var HlsPlayer4 = (0, import_dynamic9.default)(() => Promise.resolve().then(() => (init_HlsPlayer(), HlsPlayer_exports)), { ssr: false });
@@ -4450,6 +6819,7 @@ var shouldRenderContainer = (node, dataItem, session) => {
 };
 
 // src/components/pageRenderingEngine/nodes/DocumentNode.tsx
+init_AssetUtility();
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var getNestedValue5 = (obj, path) => {
   if (!obj || !path) return void 0;
@@ -4921,9 +7291,12 @@ var GoogleMapNode = (props) => {
 var GoogleMapNode_default = GoogleMapNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Pagination2 = (0, import_dynamic11.default)(() => Promise.resolve().then(() => (init_Pagination(), Pagination_exports)), { ssr: true });
-var Slider2 = (0, import_dynamic11.default)(() => Promise.resolve().then(() => (init_Slider(), Slider_exports)), {
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var Pagination2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_Pagination(), Pagination_exports)), { ssr: true });
+var DataBindingControls2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_DataBindingControls(), DataBindingControls_exports)), {
+  ssr: true
+});
+var Slider2 = (0, import_dynamic12.default)(() => Promise.resolve().then(() => (init_Slider(), Slider_exports)), {
   ssr: false
 });
 function toCamelCase(str) {
@@ -5177,7 +7550,7 @@ var DivContainer = async (props) => {
     response = await serviceClient.get(endpoint);
     result = response?.result;
     if (dataBindingProperties.showNoResultsMessage && (result === void 0 || result.length == 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NoDataFound_default, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(NoDataFound_default, {});
     }
     if (dataBindingProperties.childCollectionName && props.dataitem) {
       childCollectionData = getNestedValue6(
@@ -5197,7 +7570,7 @@ var DivContainer = async (props) => {
     }
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       SelectedNode,
       {
         node,
@@ -5330,45 +7703,91 @@ var DivContainer = async (props) => {
     noLinkColor && "no-link-color",
     !!props.node.enterAnimation && "enter-animation"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react34.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const showDataBindingControls = Boolean(
+    dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
+  );
+  const WrapperComponent = Wrapper;
+  const renderedContainer = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    WrapperComponent,
+    {
+      id: guid,
+      style: combinedStyles,
+      className: classNames || void 0,
+      ...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__ */ (0, import_jsx_runtime79.jsx)(import_react57.default.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
+      )
+    }
+  );
+  const paginationControl = dataBindingProperties?.enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    Pagination2,
+    {
+      path: props.path,
+      query: props.query,
+      dataset: response
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "style",
       {
         dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      Wrapper,
-      {
-        id: guid,
-        style: combinedStyles,
-        className: classNames || void 0,
-        ...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__ */ (0, import_jsx_runtime55.jsx)(import_react34.default.Fragment, { children: child }, i)) : renderChildren(props.node.children, props, item, idx)
-        )
-      }
-    ),
-    dataBindingProperties && props.node.dataBinding.enablePagination && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      Pagination2,
-      {
-        path: props.path,
-        query: props.query,
-        dataset: response
-      }
-    ) })
+    showDataBindingControls ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        DataBindingControls2,
+        {
+          mode: "toolbar",
+          path: props.path,
+          query: props.query,
+          facets: response?.facets,
+          sortOptions: response?.sortOptions,
+          showSortOptions: dataBindingProperties?.showSortOptions,
+          showSearchBar: dataBindingProperties?.showSearchBar
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        "div",
+        {
+          className: dataBindingProperties?.showFacets ? "grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]" : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "min-w-0", children: [
+              renderedContainer,
+              paginationControl
+            ] }),
+            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("aside", { className: "border bg-default p-3 lg:sticky lg:top-[90px] lg:self-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h2", { className: "mb-2 text-lg font-semibold", children: "Filters" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                DataBindingControls2,
+                {
+                  mode: "facets",
+                  path: props.path,
+                  query: props.query,
+                  facets: response?.facets,
+                  showFacets: dataBindingProperties.showFacets
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react57.default.Fragment, { children: [
+      renderedContainer,
+      paginationControl && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { children: paginationControl })
+    ] })
   ] });
 };
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -5406,14 +7825,14 @@ var PageBodyRenderer = (props) => {
     }
     return true;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
     if (!shouldRenderNode(node)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       SelectedNode,
       {
         node,
@@ -5429,7 +7848,7 @@ var PageBodyRenderer = (props) => {
         device: props.device,
         widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react35.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react58.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       SelectedNode,
       {
         node,