@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260925110206 → 0.8.1-dev.20260929055955

package/dist/server.js

@@ -3145,37 +3145,13 @@ var init_IframeClient = __esm({
 });
 
 // src/components/controls/edit/InputControlType.tsx
-var Constants, InputControlType, InputControlType_default;
+var Constants;
 var init_InputControlType = __esm({
   "src/components/controls/edit/InputControlType.tsx"() {
     "use strict";
     Constants = {
       pagesize: 10
     };
-    InputControlType = {
-      lineTextInput: "lineTextInput",
-      multilineTextInput: "multilineTextInput",
-      emailInput: "emailInput",
-      numberInput: "numberInput",
-      checkboxInput: "checkboxInput",
-      moneyInput: "moneyInput",
-      select: "select",
-      percentageInput: "percentageInput",
-      assetUpload: "assetUpload",
-      phoneInput: "phoneInput",
-      otpInput: "otpInput",
-      datetimeInput: "datetimeInput",
-      timeInput: "timeInput",
-      colorInput: "colorInput",
-      selectWithSearchInput: "selectWithSearchInput",
-      selectWithSearchPanel: "selectWithSearchPanel",
-      switchInput: "switchInput",
-      dateInput: "dateInput",
-      radioInput: "radioInput",
-      videoInput: "videoInput",
-      referenceInput: "referenceInput"
-    };
-    InputControlType_default = InputControlType;
   }
 });
 
@@ -3689,2125 +3665,232 @@ var init_Pagination = __esm({
   }
 });
 
-// src/components/controls/edit/MultilineTextInput.tsx
-var import_react39, import_jsx_runtime65, MultilineTextInput, MultilineTextInput_default;
-var init_MultilineTextInput = __esm({
-  "src/components/controls/edit/MultilineTextInput.tsx"() {
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+var DataBindingControls_exports = {};
+__export(DataBindingControls_exports, {
+  default: () => DataBindingControls_default
+});
+var import_react39, import_navigation, import_jsx_runtime65, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, ResetIcon, FilterSlidersIcon, ChevronDownIcon, CheckIcon, CloseIcon, MapPinIcon, BriefcaseIcon, FileTextIcon, TagIcon, getCategoryIcon, normalizeSortOption, DataBindingControls, DataBindingControls_default;
+var init_DataBindingControls = __esm({
+  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
     "use strict";
-    import_react39 = __toESM(require("react"));
+    "use client";
+    import_react39 = require("react");
+    import_navigation = require("next/navigation");
+    init_Button();
+    init_StyleTypes();
     import_jsx_runtime65 = 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
-            }
-          );
+    humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+    escapeODataString = (value) => value.replace(/'/g, "''");
+    parseFacetSelections = (filter) => {
+      const selections = /* @__PURE__ */ new Map();
+      if (!filter || !filter.trim()) return selections;
+      const expression = /(?:^|[\s()]+(?:and[\s()]+)?)([\w./-]+)\s+eq\s+'((?:''|[^'])*)'/gi;
+      for (const match of filter.matchAll(expression)) {
+        if (match[1] && match[2] !== void 0) {
+          selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
         }
-      };
-      let value = "";
-      if (props.value !== void 0 && props.value !== null) {
-        value = props.value;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react39.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
-        " ",
-        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
-      ] }) });
+      }
+      return selections;
     };
-    MultilineTextInput_default = MultilineTextInput;
-  }
-});
-
-// src/components/controls/edit/LineTextInput.tsx
-var import_react40, import_jsx_runtime66, LineTextInput, LineTextInput_default;
-var init_LineTextInput = __esm({
-  "src/components/controls/edit/LineTextInput.tsx"() {
-    "use strict";
-    import_react40 = __toESM(require("react"));
-    import_jsx_runtime66 = require("react/jsx-runtime");
-    LineTextInput = (props) => {
-      const textChangeHandler = (event) => {
-        const text = event.target.value;
-        if (props.callback !== void 0) {
-          props.callback(
+    buildFacetFilter = (selections) => Array.from(selections.entries()).map(([field, value]) => `${field} eq '${escapeODataString(value)}'`).join(" and ");
+    parseODataSearch = (value) => {
+      if (!value) return "";
+      const trimmedValue = value.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue.slice(1, -1).replace(/''/g, "'");
+      }
+      return trimmedValue;
+    };
+    SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+        ]
+      }
+    );
+    ResetIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v6h6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            "path",
             {
-              name: props.name,
-              value: text,
-              index: props.index,
-              groupKey: props.groupKey
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M5.5 15a8 8 0 1 0 .6-7.8L4 10"
             }
-          );
-        }
-      };
-      let value = "";
-      if (props.value !== void 0 && props.value !== null) {
-        value = props.value;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react40.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          "input",
-          {
-            type: "text",
-            name: props.name,
-            id: props.name,
-            value,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            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_runtime66.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_react41, import_jsx_runtime67, MoneyInput, MoneyInput_default;
-var init_MoneyInput = __esm({
-  "src/components/controls/edit/MoneyInput.tsx"() {
-    "use strict";
-    import_react41 = __toESM(require("react"));
-    import_jsx_runtime67 = 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_runtime67.jsx)(import_react41.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-          "input",
-          {
-            type: "number",
-            name: props.name,
-            id: props.name,
-            value,
-            min: 0,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            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 input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
-                     ${props?.inputClasses ? props.inputClasses : ``}
-                     `
-          }
-        ),
-        /* @__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 : "" })
-      ] }) });
-    };
-    MoneyInput_default = MoneyInput;
-  }
-});
-
-// src/components/controls/edit/Select.tsx
-var import_react42, import_jsx_runtime68, Select, Select_default;
-var init_Select = __esm({
-  "src/components/controls/edit/Select.tsx"() {
-    "use strict";
-    import_react42 = require("react");
-    import_jsx_runtime68 = require("react/jsx-runtime");
-    Select = (props) => {
-      const [list, setList] = (0, import_react42.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);
+    );
+    FilterSlidersIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18M3 12h18M3 20h18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
+        ]
+      }
+    );
+    ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19 9-7 7-7-7" })
+      }
+    );
+    CheckIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+      }
+    );
+    CloseIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+      }
+    );
+    MapPinIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
             }
-          }
-        }
-        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_react42.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
-              );
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
             }
-            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_runtime68.jsxs)("label", { className: "block", children: [
-        props.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime68.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_runtime68.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        list && list.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-          "input",
+          )
+        ]
+      }
+    );
+    BriefcaseIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "path",
           {
-            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 ?? ""}`
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
           }
-        ),
-        list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-          "select",
+        )
+      }
+    );
+    FileTextIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "path",
           {
-            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_runtime68.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_runtime68.jsx)("option", { value: item[keyField], children: item[textField] }, index);
-              })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime68.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_react43, import_jsx_runtime69, PercentageInput, PercentageInput_default;
-var init_PercentageInput = __esm({
-  "src/components/controls/edit/PercentageInput.tsx"() {
-    "use strict";
-    import_react43 = __toESM(require("react"));
-    import_jsx_runtime69 = 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
-            });
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
           }
-        }
-      };
-      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_runtime69.jsx)(import_react43.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-          "input",
+    );
+    TagIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "path",
           {
-            type: "number",
-            name: props.name,
-            id: props.name,
-            value,
-            min: 0,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            onKeyDown: preventNegative,
-            onWheel: handleWheel,
-            required: props?.attributes?.required,
-            placeholder: props?.attributes?.placeholder,
-            pattern: props?.attributes?.pattern,
-            disabled: props?.attributes?.readOnly,
-            max: "100",
-            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
-                     ${props?.inputClasses ? props.inputClasses : ``}
-                     `
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
           }
-        ),
-        /* @__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 ? props.attributes.errorMessage : "" })
-      ] }) });
+        )
+      }
+    );
+    getCategoryIcon = (category) => {
+      const lower = category.toLowerCase();
+      if (lower.includes("location") || lower.includes("city") || lower.includes("country") || lower.includes("state") || lower.includes("address")) {
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MapPinIcon, { className: "h-4 w-4" });
+      }
+      if (lower.includes("type") || lower.includes("work") || lower.includes("employment") || lower.includes("experience")) {
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BriefcaseIcon, { className: "h-4 w-4" });
+      }
+      if (lower.includes("department") || lower.includes("category") || lower.includes("role") || lower.includes("industry")) {
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FileTextIcon, { className: "h-4 w-4" });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TagIcon, { className: "h-4 w-4" });
     };
-    PercentageInput_default = PercentageInput;
-  }
-});
-
-// src/components/controls/edit/PhoneInput.tsx
-var import_react44, import_jsx_runtime70, PhoneInput, PhoneInput_default;
-var init_PhoneInput = __esm({
-  "src/components/controls/edit/PhoneInput.tsx"() {
-    "use strict";
-    import_react44 = __toESM(require("react"));
-    import_jsx_runtime70 = 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_runtime70.jsx)(import_react44.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
-        " ",
-        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center rounded border ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "px-3", children: props.prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime70.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_runtime70.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_react45, import_jsx_runtime71, NumberInput, NumberInput_default;
-var init_NumberInput = __esm({
-  "src/components/controls/edit/NumberInput.tsx"() {
-    "use strict";
-    import_react45 = __toESM(require("react"));
-    import_jsx_runtime71 = 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_runtime71.jsx)(import_react45.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime71.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_runtime71.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          "input",
-          {
-            type: "number",
-            name: props.name,
-            id: props.name,
-            value,
-            onChange: textChangeHandler,
-            onWheel: handleWheel,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            required: props?.attributes?.required,
-            placeholder: props?.attributes?.placeholder,
-            pattern: props?.attributes?.pattern,
-            disabled: props?.attributes?.readOnly,
-            max: props?.attributes?.maxValue,
-            min: props?.attributes?.minValue,
-            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
-                     ${props?.inputClasses ? props.inputClasses : ``}
-                     `
-          }
-        ),
-        /* @__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 ? props.attributes.errorMessage : "" })
-      ] }) });
-    };
-    NumberInput_default = NumberInput;
-  }
-});
-
-// src/components/controls/edit/CheckboxInput.tsx
-var import_react46, import_jsx_runtime72, CheckboxInput, CheckboxInput_default;
-var init_CheckboxInput = __esm({
-  "src/components/controls/edit/CheckboxInput.tsx"() {
-    "use strict";
-    import_react46 = __toESM(require("react"));
-    import_jsx_runtime72 = require("react/jsx-runtime");
-    CheckboxInput = (props) => {
-      const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
-      const textChangeHandler = (event) => {
-        if (isReadOnly) return;
-        const 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 === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
-        value = true;
-      }
-      const customClasses = (props?.inputClasses || "").split(/\s+/).filter((c) => !/^(w-|h-|block|inline-block|py-|px-|p-)/.test(c)).join(" ");
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react46.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-            "label",
-            {
-              htmlFor: props.name,
-              className: "inline-block text-sm font-medium pb-1",
-              children: 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: "checkbox",
-            name: props.name,
-            id: props.name,
-            checked: value,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            required: !isReadOnly && Boolean(props?.attributes?.required),
-            placeholder: props?.attributes?.placeholder,
-            maxLength: props?.attributes?.maxLength,
-            pattern: props?.attributes?.pattern,
-            disabled: isReadOnly,
-            readOnly: isReadOnly,
-            tabIndex: isReadOnly ? -1 : void 0,
-            onClick: (e) => {
-              if (isReadOnly) {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            },
-            minLength: props?.attributes?.minLength,
-            className: `peer mt-1 h-4 w-4 shrink-0 rounded shadow-sm transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${customClasses}`
-          }
-        ),
-        /* @__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 || "" })
-      ] }) });
-    };
-    CheckboxInput_default = CheckboxInput;
-  }
-});
-
-// src/components/controls/edit/OtpInput.tsx
-var import_react47, import_jsx_runtime73, OtpInput, OtpInput_default;
-var init_OtpInput = __esm({
-  "src/components/controls/edit/OtpInput.tsx"() {
-    "use strict";
-    import_react47 = __toESM(require("react"));
-    import_jsx_runtime73 = 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_runtime73.jsx)(import_react47.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("label", { htmlFor: props.name, className: "block w-full", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-          "input",
-          {
-            type: "text",
-            name: props.name,
-            id: props.name,
-            value,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            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 input mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center transition-all duration-500 ease-in-out
-                     ${props?.inputClasses ? props.inputClasses : ``}
-                     `
-          }
-        ),
-        /* @__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 ? props.attributes.errorMessage : "" })
-      ] }) });
-    };
-    OtpInput_default = OtpInput;
-  }
-});
-
-// src/components/controls/edit/DateTimeInput.tsx
-var import_react48, import_jsx_runtime74, DateTimeInput, DateTimeInput_default;
-var init_DateTimeInput = __esm({
-  "src/components/controls/edit/DateTimeInput.tsx"() {
-    "use strict";
-    import_react48 = __toESM(require("react"));
-    import_jsx_runtime74 = 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_runtime74.jsx)(import_react48.default.Fragment, { children: /* @__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 }),
-        " ",
-        props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.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_runtime74.jsx)("span", { children: timeZoneAbbr })
-        ] }),
-        /* @__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 ? props.attributes.errorMessage : "" })
-      ] }) });
-    };
-    DateTimeInput_default = DateTimeInput;
-  }
-});
-
-// src/components/controls/edit/ColorInput.tsx
-var import_react49, import_jsx_runtime75, DEFAULT_COLOR, isValidHex, normalizeColor, ColorInput, ColorInput_default;
-var init_ColorInput = __esm({
-  "src/components/controls/edit/ColorInput.tsx"() {
-    "use strict";
-    import_react49 = __toESM(require("react"));
-    import_jsx_runtime75 = require("react/jsx-runtime");
-    DEFAULT_COLOR = "#3b82f6";
-    isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
-    normalizeColor = (val) => {
-      if (isValidHex(val)) {
-        return val.trim();
-      }
-      return DEFAULT_COLOR;
-    };
-    ColorInput = (props) => {
-      const isReadOnly = props.attributes?.readOnly === true || props.attributes?.readOnly === "true" || props?.readOnly === true || props.disable === true || props.attributes?.disable === true || props.attributes?.disabled === true || props.attributes?.disabled === "true";
-      const [color, setColor] = import_react49.default.useState(
-        () => normalizeColor(props.value)
-      );
-      (0, import_react49.useEffect)(() => {
-        const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
-        if (!hasValue && props.callback && !isReadOnly) {
-          props.callback({
-            name: props.name,
-            value: DEFAULT_COLOR,
-            index: props.index,
-            groupKey: props.groupKey
-          });
-        }
-      }, [isReadOnly]);
-      (0, import_react49.useEffect)(() => {
-        if (props.value !== void 0 && props.value !== null && props.value !== "") {
-          if (typeof props.value === "string") {
-            setColor(normalizeColor(props.value));
-          }
-        }
-      }, [props.value]);
-      const handleColorChange = (event) => {
-        if (isReadOnly) return;
-        const newColor = event.target.value;
-        setColor(newColor);
-        if (props.callback) {
-          props.callback({
-            name: props.name,
-            value: newColor,
-            index: props.index,
-            groupKey: props.groupKey
-          });
-        }
-      };
-      const displayColor = normalizeColor(color || props.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react49.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("label", { className: `block ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime75.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_runtime75.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-          "input",
-          {
-            type: "color",
-            name: props.name,
-            title: displayColor,
-            id: props.name,
-            value: displayColor,
-            onChange: handleColorChange,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            required: !isReadOnly && Boolean(props?.attributes?.required),
-            disabled: isReadOnly,
-            readOnly: isReadOnly,
-            tabIndex: isReadOnly ? -1 : void 0,
-            onClick: (e) => {
-              if (isReadOnly) {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            },
-            className: `peer block rounded ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`,
-            style: {
-              width: "78px",
-              height: "33px",
-              padding: 0,
-              margin: 0,
-              border: isReadOnly ? "1px solid var(--border, #e2e8f0)" : "1px solid #e2e8f0",
-              borderRadius: "5px",
-              overflow: "hidden",
-              backgroundColor: isReadOnly ? "var(--bg-color, transparent)" : "transparent",
-              appearance: "none",
-              cursor: isReadOnly ? "not-allowed" : "pointer",
-              pointerEvents: isReadOnly ? "none" : "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
-      ] }) });
-    };
-    ColorInput_default = ColorInput;
-  }
-});
-
-// src/components/controls/edit/SelectWithSearchInput.tsx
-var import_react50, import_jsx_runtime76, SelectWithSearchInput, SelectWithSearchInput_default;
-var init_SelectWithSearchInput = __esm({
-  "src/components/controls/edit/SelectWithSearchInput.tsx"() {
-    "use strict";
-    "use client";
-    import_react50 = __toESM(require("react"));
-    import_jsx_runtime76 = require("react/jsx-runtime");
-    SelectWithSearchInput = (props) => {
-      const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
-      const [searchTerm, setSearchTerm] = (0, import_react50.useState)("");
-      const [highlightedIndex, setHighlightedIndex] = (0, import_react50.useState)(-1);
-      const [selectedItem, setSelectedItem] = (0, import_react50.useState)(
-        null
-      );
-      const [list, setList] = (0, import_react50.useState)([]);
-      const loadData = import_react50.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_react50.useEffect)(() => {
-        loadData();
-      }, [loadData]);
-      (0, import_react50.useEffect)(() => {
-        if (props.value && list.length && props.dataKeyFieldName && props.dataTextFieldName) {
-          const selected = list.find(
-            (x) => String(x[props.dataKeyFieldName]) === String(props.value)
-          );
-          if (selected) {
-            setSearchTerm(selected[props.dataTextFieldName]);
-            setSelectedItem(selected);
-          }
-        }
-      }, [props.value, list, props.dataKeyFieldName, props.dataTextFieldName]);
-      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_react50.useRef)(null);
-      (0, import_react50.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_runtime76.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("label", { className: "pb-1", children: [
-          props.attributes?.label,
-          " ",
-          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "bg-error-weak", children: "*" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-            "input",
-            {
-              type: "text",
-              name: props.name,
-              id: props.name,
-              value: searchTerm,
-              onChange: (e) => {
-                if (!isReadOnly) {
-                  setSearchTerm(e.target.value);
-                  setIsOpen(true);
-                  setHighlightedIndex(-1);
-                }
-              },
-              onFocus: () => {
-                if (!isReadOnly) {
-                  setIsOpen(true);
-                }
-              },
-              onKeyDown: handleKeyDown,
-              placeholder: props.attributes?.placeholder ?? "Search...",
-              readOnly: isReadOnly,
-              disabled: isReadOnly,
-              required: props.attributes?.required,
-              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_runtime76.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_runtime76.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_runtime76.jsx)(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props.attributes?.errorMessage ?? "" })
-        ] }),
-        !isReadOnly && isOpen && /* @__PURE__ */ (0, import_jsx_runtime76.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_runtime76.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_runtime76.jsx)("span", { children: item[props.dataTextFieldName] })
-              },
-              item[props.dataKeyFieldName]
-            )) : /* @__PURE__ */ (0, import_jsx_runtime76.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_react51, import_jsx_runtime77, SelectWithSearchPanel, SelectWithSearchPanel_default;
-var init_SelectWithSearchPanel = __esm({
-  "src/components/controls/edit/SelectWithSearchPanel.tsx"() {
-    "use strict";
-    "use client";
-    init_Button();
-    import_react51 = __toESM(require("react"));
-    import_jsx_runtime77 = require("react/jsx-runtime");
-    SelectWithSearchPanel = (props) => {
-      const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
-      const [searchTerm, setSearchTerm] = (0, import_react51.useState)("");
-      const [highlightedIndex, setHighlightedIndex] = (0, import_react51.useState)(0);
-      const [list, setList] = (0, import_react51.useState)([]);
-      const listRef = (0, import_react51.useRef)(null);
-      const [isError, setIsError] = (0, import_react51.useState)(false);
-      const containerRef = (0, import_react51.useRef)(null);
-      const [isCreateOpen, setIsCreateOpen] = (0, import_react51.useState)(false);
-      const [formData, setFormData] = (0, import_react51.useState)({});
-      const getNestedValue7 = (obj, path) => {
-        return path.split(".").reduce((acc, key) => acc?.[key], obj);
-      };
-      (0, import_react51.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_react51.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_react51.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_react51.useCallback)(async () => {
-        console.log("Form Data:", formData);
-        return formData;
-      }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { className: "text-sm mb-1 font-medium", children: [
-          props.attributes?.label,
-          " ",
-          " ",
-          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "bg-error-weak", children: "*" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-            "input",
-            {
-              type: "text",
-              name: props.name,
-              id: props.name,
-              value: searchTerm,
-              onChange: textChangeHandler,
-              onFocus: () => setIsOpen(true),
-              onKeyDown: handleKeyDown,
-              placeholder: props.attributes?.placeholder,
-              required: props.attributes?.required,
-              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_runtime77.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props.attributes?.errorMessage ?? "" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ref: containerRef, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react51.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("div", { className: "flex flex-col p-2 bg-accent-950 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("h5", { className: "text-md text-white font-medium", children: [
-              "Select a",
-              " ",
-              props.attributes?.label || props.attributes?.heading
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "text-primary hover:text-primary-800",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  setIsCreateOpen(true);
-                },
-                children: "Create"
-              }
-            ) })
-          ] }),
-          isCreateOpen && /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("div", { className: "flex flex-col p-2 bg-accent-950", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("h5", { className: "text-md font-medium text-white", children: [
-              "Create New ",
-              props.attributes?.label
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex justify-end px-4 border-b py-2 border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => setIsCreateOpen(false),
-                className: "text-red-600 hover:text-red-800",
-                children: "Close"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "p-4", children: [
-              props.createFields?.map((field) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "mb-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-sm mb-1 font-medium block", children: field.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsxs)(Button_default, { onClick: async () => {
-                handleSaveModal();
-                return { isSuccessful: true };
-              }, className: "w-full", children: [
-                "Save ",
-                props.attributes?.label
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("span", { children: getNestedValue7(item, props.dataTextFieldName) })
-                }
-              ) }, item[props.dataKeyFieldName])) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "px-4 py-2 text-gray-500", children: "No results found" })
-            }
-          )
-        ] }) })
-      ] });
-    };
-    SelectWithSearchPanel_default = SelectWithSearchPanel;
-  }
-});
-
-// src/components/controls/edit/EmailInput.tsx
-var import_react52, import_jsx_runtime78, EmailInput, EmailInput_default;
-var init_EmailInput = __esm({
-  "src/components/controls/edit/EmailInput.tsx"() {
-    "use strict";
-    import_react52 = __toESM(require("react"));
-    import_jsx_runtime78 = 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,
-            groupKey: props.groupKey
-          });
-        }
-      };
-      let value = "";
-      if (props.value !== void 0 && props.value !== null) {
-        value = props.value;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime78.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_runtime78.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          "input",
-          {
-            type: "email",
-            name: props.name,
-            id: props.name,
-            value,
-            onChange: textChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            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_runtime78.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
-      ] }) });
-    };
-    EmailInput_default = EmailInput;
-  }
-});
-
-// src/components/controls/edit/TimeInput.tsx
-var import_react53, import_jsx_runtime79, TimeInput, TimeInput_default;
-var init_TimeInput = __esm({
-  "src/components/controls/edit/TimeInput.tsx"() {
-    "use strict";
-    "use client";
-    import_react53 = __toESM(require("react"));
-    import_jsx_runtime79 = 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_runtime79.jsx)(import_react53.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("label", { className: "block", children: [
-        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime79.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_runtime79.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-          "input",
-          {
-            type: "time",
-            name: props.name,
-            id: props.name,
-            value: typeof props.value === "boolean" ? "" : props.value ?? "",
-            onChange: timeChangeHandler,
-            onBlur: props?.onBlur,
-            autoFocus: props?.attributes?.autoFocus,
-            required: props?.attributes?.required,
-            disabled: props?.attributes?.readOnly,
-            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_runtime79.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_react54, import_jsx_runtime80, AssetUpload, AssetUpload_default;
-var init_AssetUpload = __esm({
-  "src/components/controls/edit/AssetUpload.tsx"() {
-    "use strict";
-    "use client";
-    import_react54 = __toESM(require("react"));
-    init_ClientButton();
-    init_StyleTypes();
-    init_AssetUtility();
-    init_Hyperlink();
-    init_Icon();
-    import_jsx_runtime80 = 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_react54.default.useState(getInitialTab);
-      (0, import_react54.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_runtime80.jsxs)(import_react54.default.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { className: "block mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex gap-6 bg-neutral-100 rounded p-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.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_runtime80.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_runtime80.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_runtime80.jsx)("div", { className: "flex flex-col gap-3", children: allValues.map((digitalAsset, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex justify-between items-start gap-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "grid grid-cols-2 gap-x-8 gap-y-3 text-sm w-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-gray-500", children: "Title" }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-gray-500", children: "Resolution" }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("p", { className: "font-medium text-gray-900 mt-3", children: [
-                  digitalAsset.intrinsicWidth,
-                  "\xD7",
-                  digitalAsset.intrinsicHeight
-                ] })
-              ] }),
-              (digitalAsset.assetUrl || digitalAsset.posterUrl) && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-gray-500", children: "Image / Poster" }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-shrink-0 flex flex-col gap-3 mt-1", children: [
-                  getAssetType(digitalAsset) === "video" && digitalAsset.posterUrl && /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.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_runtime80.jsxs)("div", { className: "col-span-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-gray-500", children: "HLS Link" }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-                  Hyperlink,
-                  {
-                    href: digitalAsset.assetUrl,
-                    className: "text-primary-600 underline mt-1 break-all",
-                    title: digitalAsset.assetUrl,
-                    children: digitalAsset.assetUrl
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-              "span",
-              {
-                onClick: () => !isDisabled && deleteFile(index),
-                className: isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon_default, { className: "w-4 h-4 text-primary", name: "delete" })
-              }
-            )
-          ] }, index)) })
-        ] })
-      ] });
-    };
-    AssetUpload_default = AssetUpload;
-  }
-});
-
-// src/components/controls/edit/SwitchInput.tsx
-var import_react55, import_jsx_runtime81, SwitchInput, SwitchInput_default;
-var init_SwitchInput = __esm({
-  "src/components/controls/edit/SwitchInput.tsx"() {
-    "use strict";
-    import_react55 = __toESM(require("react"));
-    import_jsx_runtime81 = 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_runtime81.jsx)(import_react55.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative flex items-start justify-between gap-4 py-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "min-w-0", children: props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime81.jsx)("span", { className: "bg-error-weak", children: "*" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime81.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_runtime81.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_runtime81.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"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block absolute left-0 top-full mt-1 w-max max-w-[220px] whitespace-normal bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
-            ]
-          }
-        )
-      ] }) });
-    };
-    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_react56, import_jsx_runtime82, DateInput, DateInput_default;
-var init_DateInput = __esm({
-  "src/components/controls/edit/DateInput.tsx"() {
-    "use strict";
-    import_react56 = require("react");
-    init_DateTimeUtility();
-    import_jsx_runtime82 = require("react/jsx-runtime");
-    DateInput = (props) => {
-      const value = (0, import_react56.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_runtime82.jsxs)("label", { className: "block mb-1", children: [
-        props.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium", children: props.attributes.label }),
-        " ",
-        props.attributes?.label && props.attributes.required && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "bg-error-weak", children: "*" }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.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_runtime82.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_react57, import_jsx_runtime83, RadioInput, RadioInput_default;
-var init_RadioInput = __esm({
-  "src/components/controls/edit/RadioInput.tsx"() {
-    "use strict";
-    import_react57 = require("react");
-    init_Icon();
-    import_jsx_runtime83 = require("react/jsx-runtime");
-    RadioInput = (props) => {
-      const [list, setList] = (0, import_react57.useState)([]);
-      (0, import_react57.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_runtime83.jsxs)("div", { className: "block", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-sm font-medium", children: props.attributes?.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsxs)(
-            "div",
-            {
-              className: `font-normal flex items-center justify-between gap-4 cursor-pointer border rounded p-2 ${resultClassName}`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex gap-4 items-start", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsx)("label", { className: "text-body-950 pr-2", htmlFor: inputId, children: item[props.dataTextFieldName] })
-                ] }),
-                iconName && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon_default, { className: "w-5 h-5 text-success", name: iconName })
-              ]
-            },
-            String(itemValue)
-          );
-        }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.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/ReferenceInput.tsx
-var import_jsx_runtime84, ReferenceInput, ReferenceInput_default;
-var init_ReferenceInput = __esm({
-  "src/components/controls/edit/ReferenceInput.tsx"() {
-    "use strict";
-    init_SelectWithSearchInput();
-    import_jsx_runtime84 = require("react/jsx-runtime");
-    ReferenceInput = (props) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SelectWithSearchInput_default, { ...props });
-    };
-    ReferenceInput_default = ReferenceInput;
-  }
-});
-
-// src/components/controls/edit/InputControlClient.tsx
-var InputControlClient_exports = {};
-__export(InputControlClient_exports, {
-  default: () => InputControlClient_default
-});
-var import_react58, import_jsx_runtime85, InputControl, InputControlClient_default;
-var init_InputControlClient = __esm({
-  "src/components/controls/edit/InputControlClient.tsx"() {
-    "use strict";
-    "use client";
-    import_react58 = __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_EmailInput();
-    init_TimeInput();
-    init_AssetUpload();
-    init_SwitchInput();
-    init_DateInput();
-    init_RadioInput();
-    init_ReferenceInput();
-    import_jsx_runtime85 = require("react/jsx-runtime");
-    InputControl = import_react58.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.timeInput]: TimeInput_default,
-          [InputControlType_default.assetUpload]: AssetUpload_default,
-          [InputControlType_default.switchInput]: SwitchInput_default,
-          [InputControlType_default.dateInput]: DateInput_default,
-          [InputControlType_default.radioInput]: RadioInput_default,
-          [InputControlType_default.referenceInput]: ReferenceInput_default
-        };
-        const SelectedControlComponent = ControlComponents[props.controlType];
-        return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react58.default.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
-      }
-    );
-    InputControl.displayName = "InputControl";
-    InputControlClient_default = InputControl;
-  }
-});
-
-// src/components/controls/edit/InputControl.tsx
-var import_dynamic13, InputControl2, InputControl_default;
-var init_InputControl = __esm({
-  "src/components/controls/edit/InputControl.tsx"() {
-    "use strict";
-    import_dynamic13 = __toESM(require("next/dynamic"));
-    InputControl2 = (0, import_dynamic13.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
-      ssr: false
-    });
-    InputControl_default = InputControl2;
-  }
-});
-
-// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
-var DataBindingControls_exports = {};
-__export(DataBindingControls_exports, {
-  default: () => DataBindingControls_default
-});
-var import_react59, import_navigation, import_jsx_runtime86, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, ResetIcon, FilterSlidersIcon, ChevronDownIcon, CheckIcon, CloseIcon, normalizeSortOption, DataBindingControls, DataBindingControls_default;
-var init_DataBindingControls = __esm({
-  "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
-    "use strict";
-    "use client";
-    import_react59 = require("react");
-    import_navigation = require("next/navigation");
-    init_Button();
-    init_InputControl();
-    init_InputControlType();
-    init_StyleTypes();
-    import_jsx_runtime86 = require("react/jsx-runtime");
-    humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
-    escapeODataString = (value) => value.replace(/'/g, "''");
-    parseFacetSelections = (filter) => {
-      const selections = /* @__PURE__ */ new Map();
-      if (!filter || !filter.trim()) return selections;
-      const expression = /(?:^|[\s()]+(?:and[\s()]+)?)([\w./-]+)\s+eq\s+'((?:''|[^'])*)'/gi;
-      for (const match of filter.matchAll(expression)) {
-        if (match[1] && match[2] !== void 0) {
-          selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
-        }
-      }
-      return selections;
-    };
-    buildFacetFilter = (selections) => Array.from(selections.entries()).map(([field, value]) => `${field} eq '${escapeODataString(value)}'`).join(" and ");
-    parseODataSearch = (value) => {
-      if (!value) return "";
-      const trimmedValue = value.trim();
-      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
-        return trimmedValue.slice(1, -1).replace(/''/g, "'");
-      }
-      return trimmedValue;
-    };
-    SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
-        ]
-      }
-    );
-    ResetIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v6h6" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              d: "M5.5 15a8 8 0 1 0 .6-7.8L4 10"
-            }
-          )
-        ]
-      }
-    );
-    FilterSlidersIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18M3 12h18M3 20h18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
-        ]
-      }
-    );
-    ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19 9-7 7-7-7" })
-      }
-    );
-    CheckIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
-      }
-    );
-    CloseIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      "svg",
-      {
-        "aria-hidden": "true",
-        className,
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
-      }
-    );
     normalizeSortOption = (option) => {
       const direction = option.direction.trim();
       const title = option.title || humanize(option.name);
@@ -5828,12 +3911,18 @@ var init_DataBindingControls = __esm({
     }) => {
       const router = (0, import_navigation.useRouter)();
       const searchParams = (0, import_navigation.useSearchParams)();
-      const [collapsedCategories, setCollapsedCategories] = (0, import_react59.useState)({});
-      const [isSortOpen, setIsSortOpen] = (0, import_react59.useState)(false);
-      const sortDropdownRef = (0, import_react59.useRef)(null);
-      (0, import_react59.useEffect)(() => {
+      const [collapsedCategories, setCollapsedCategories] = (0, import_react39.useState)({});
+      const [isSortOpen, setIsSortOpen] = (0, import_react39.useState)(false);
+      const [isMobileFiltersOpen, setIsMobileFiltersOpen] = (0, import_react39.useState)(false);
+      const [facetCategorySearch, setFacetCategorySearch] = (0, import_react39.useState)({});
+      const desktopSortDropdownRef = (0, import_react39.useRef)(null);
+      const mobileSortDropdownRef = (0, import_react39.useRef)(null);
+      (0, import_react39.useEffect)(() => {
         const handleClickOutside = (event) => {
-          if (sortDropdownRef.current && !sortDropdownRef.current.contains(event.target)) {
+          const target = event.target;
+          const clickedInsideDesktop = desktopSortDropdownRef.current?.contains(target);
+          const clickedInsideMobile = mobileSortDropdownRef.current?.contains(target);
+          if (!clickedInsideDesktop && !clickedInsideMobile) {
             setIsSortOpen(false);
           }
         };
@@ -5854,29 +3943,63 @@ var init_DataBindingControls = __esm({
       const currentSearch = parseODataSearch(
         searchParamsSearch !== void 0 && searchParamsSearch !== null ? searchParamsSearch : query?.["$search"]
       );
-      const [searchText, setSearchText] = (0, import_react59.useState)(currentSearch);
-      (0, import_react59.useEffect)(() => {
+      const [searchText, setSearchText] = (0, import_react39.useState)(currentSearch);
+      (0, import_react39.useEffect)(() => {
         setSearchText(currentSearch);
       }, [currentSearch]);
-      const selectedFacetValues = (0, import_react59.useMemo)(
+      const selectedFacetValues = (0, import_react39.useMemo)(
         () => parseFacetSelections(currentFilter),
         [currentFilter]
       );
-      const activeFacets = (0, import_react59.useMemo)(() => {
-        if (!facets) return [];
-        return Object.entries(facets).map(([field, values]) => {
-          if (!Array.isArray(values)) return null;
-          const filteredValues = values.filter(
-            (item) => item.count > 0 || selectedFacetValues.get(field) === item.value
-          );
-          if (filteredValues.length === 0) return null;
-          return [field, filteredValues];
-        }).filter((group) => group !== null);
+      (0, import_react39.useEffect)(() => {
+        if (isMobileFiltersOpen) {
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+        return () => {
+          document.body.style.overflow = "";
+        };
+      }, [isMobileFiltersOpen]);
+      const activeFacets = (0, import_react39.useMemo)(() => {
+        const facetMap = /* @__PURE__ */ new Map();
+        if (facets) {
+          Object.entries(facets).forEach(([field, values]) => {
+            if (!Array.isArray(values)) return;
+            const filteredValues = values.filter(
+              (item) => item.count > 0 || selectedFacetValues.get(field) === item.value
+            );
+            if (filteredValues.length > 0) {
+              facetMap.set(field, filteredValues);
+            }
+          });
+        }
+        selectedFacetValues.forEach((val, field) => {
+          if (!facetMap.has(field)) {
+            facetMap.set(field, [{ value: val, count: 0 }]);
+          } else {
+            const existing = facetMap.get(field);
+            if (!existing.some((item) => item.value === val)) {
+              existing.push({ value: val, count: 0 });
+            }
+          }
+        });
+        return Array.from(facetMap.entries());
       }, [facets, selectedFacetValues]);
-      const normalizedSortOptions = (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value);
-      const selectedSortOption = normalizedSortOptions.find((opt) => opt.value === currentSort) || normalizedSortOptions[0];
+      const normalizedSortOptions = (0, import_react39.useMemo)(
+        () => (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value),
+        [sortOptions]
+      );
+      const selectedSortOption = (0, import_react39.useMemo)(() => {
+        if (!normalizedSortOptions.length) return null;
+        const trimmedCurrentSort = currentSort.trim().toLowerCase();
+        if (!trimmedCurrentSort) return normalizedSortOptions[0];
+        return normalizedSortOptions.find(
+          (opt) => opt.value.trim().toLowerCase() === trimmedCurrentSort
+        ) || normalizedSortOptions[0];
+      }, [normalizedSortOptions, currentSort]);
       const selectedSortLabel = selectedSortOption?.label || "";
-      const getQueryUrl = (0, import_react59.useCallback)(
+      const getQueryUrl = (0, import_react39.useCallback)(
         (updates) => {
           const initialParams = searchParams ? searchParams.toString() : "";
           const params = new URLSearchParams(initialParams || query || {});
@@ -5889,18 +4012,16 @@ var init_DataBindingControls = __esm({
           });
           params.delete("$skip");
           params.delete("skip");
-          const queryString = Array.from(params.entries()).map(
-            ([key, value]) => key === "$filter" || key === "filter" ? `${key}=${encodeURIComponent(value)}` : `${key}=${value}`
-          ).join("&");
+          const queryString = Array.from(params.entries()).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&");
           return queryString ? `${path}?${queryString}` : path;
         },
         [path, query, searchParams]
       );
-      const navigateWithoutReload = (0, import_react59.useCallback)(
+      const navigateWithoutReload = (0, import_react39.useCallback)(
         (url) => {
           if (typeof window !== "undefined") {
             const targetUrl = new URL(url, window.location.origin);
-            if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
+            if (targetUrl.pathname === window.location.pathname && decodeURIComponent(targetUrl.search) === decodeURIComponent(window.location.search)) {
               return;
             }
           }
@@ -5908,6 +4029,18 @@ var init_DataBindingControls = __esm({
         },
         [router]
       );
+      const handleSelectSort = (0, import_react39.useCallback)(
+        (sortValue) => {
+          setIsSortOpen(false);
+          navigateWithoutReload(
+            getQueryUrl({
+              $orderby: sortValue || void 0,
+              orderBy: void 0
+            })
+          );
+        },
+        [getQueryUrl, navigateWithoutReload]
+      );
       const getFacetUrl = (field, value) => {
         const updatedSelections = new Map(selectedFacetValues);
         if (value) {
@@ -5936,7 +4069,7 @@ var init_DataBindingControls = __esm({
           })
         );
       };
-      const handleSearch = (0, import_react59.useCallback)(async () => {
+      const handleSearch = (0, import_react39.useCallback)(async () => {
         const trimmedSearchText = searchText.trim();
         if (trimmedSearchText === currentSearch.trim()) {
           return { isSuccessful: true };
@@ -5948,7 +4081,7 @@ var init_DataBindingControls = __esm({
         );
         return { isSuccessful: true };
       }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
-      const handleClearAll = (0, import_react59.useCallback)(async () => {
+      const handleClearAll = (0, import_react39.useCallback)(async () => {
         navigateWithoutReload(
           getQueryUrl({
             $filter: void 0,
@@ -5959,39 +4092,39 @@ var init_DataBindingControls = __esm({
         );
         return { isSuccessful: true };
       }, [getQueryUrl, navigateWithoutReload]);
-      const hasFacetControls = showFacets && activeFacets.length > 0;
-      const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+      const hasFacetControls = Boolean(showFacets && (activeFacets.length > 0 || selectedFacetValues.size > 0));
+      const hasSortControls = Boolean(showSortOptions && normalizedSortOptions.length > 0);
       const hasActiveFiltersOrSort = Boolean(
         currentFilter.trim() || currentSort.trim()
       );
       const selectedFacetCount = selectedFacetValues.size;
       const shouldShowToolbarClearAll = hasActiveFiltersOrSort && !hasFacetControls;
-      const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls || shouldShowToolbarClearAll);
-      const shouldShowFacets = mode === "facets" && hasFacetControls;
+      const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls || showFacets || shouldShowToolbarClearAll);
+      const shouldShowFacets = mode === "facets" && (hasFacetControls || showFacets && activeFacets.length > 0);
       if (!shouldShowToolbar && !shouldShowFacets) {
         return null;
       }
-      const renderFacetItems = (field, values) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-col gap-1 pt-1 pb-1", children: values.map((facet) => {
+      const renderFacetItems = (field, values) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-col gap-1 pt-1 pb-1", children: values.map((facet) => {
         const isSelected = selectedFacetValues.get(field) === facet.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
           "button",
           {
             type: "button",
             onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
             "aria-pressed": isSelected,
-            className: `group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base ${isSelected ? "bg-neutral-soft font-medium border " : "hover:bg-neutral-weak border border-transparent"}`,
+            className: `group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base ${isSelected ? "bg-neutral-soft font-medium border border-neutral-soft" : "hover:bg-neutral-weak border border-transparent"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                   "span",
                   {
-                    className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-[3px] border transition-colors duration-150 ${isSelected ? "bg-primary-base border-primary-base" : " group-hover:border-neutral-strong bg-default"}`,
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckIcon, { className: "h-3 w-3" })
+                    className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-[3px] border transition-colors duration-150 ${isSelected ? "bg-primary-base border-primary-base" : " group-hover:border-neutral-strong bg-default border-neutral-soft"}`,
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckIcon, { className: "h-3 w-3" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "leading-snug break-words", children: facet.value })
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "leading-snug break-words", children: facet.value })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 "span",
                 {
                   className: `shrink-0 rounded px-1.5 py-0.5 text-xs transition-colors ml-2 ${isSelected ? "bg-neutral-weak font-semibold" : "bg-neutral-weak font-normal"}`,
@@ -6003,109 +4136,347 @@ var init_DataBindingControls = __esm({
           `${field}-${facet.value}`
         );
       }) });
-      return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         "div",
         {
-          className: mode === "toolbar" ? "my-6" : "flex flex-col rounded-md border  bg-default p-3.5 shadow-sm",
+          className: mode === "toolbar" ? "my-4 sm:my-6" : "flex flex-col rounded-md border border-neutral-soft bg-default p-4 shadow-sm",
           children: [
-            shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
-              showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                "form",
-                {
-                  role: "search",
-                  className: "flex w-full items-center gap-2 sm:flex-row md:min-w-0 md:flex-1",
-                  onSubmit: (event) => {
-                    event.preventDefault();
-                    void handleSearch();
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-60" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                        InputControl_default,
+            shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "hidden lg:flex lg:items-center lg:justify-between lg:gap-4", children: [
+                showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                  "form",
+                  {
+                    role: "search",
+                    className: "flex w-full items-center gap-2 md:min-w-0 md:flex-1",
+                    onSubmit: (event) => {
+                      event.preventDefault();
+                      void handleSearch();
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-60" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                          "input",
+                          {
+                            type: "text",
+                            name: "searchText",
+                            value: searchText,
+                            onChange: (e) => setSearchText(e.target.value),
+                            placeholder: "Search discussions, topics, or keywords...",
+                            className: "h-10 w-full rounded-md border border-neutral-soft bg-default py-2 pl-10 pr-4 text-sm shadow-sm transition-colors focus:border-primary-base focus:outline-none focus:ring-1 focus:ring-primary-base"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                        Button_default,
                         {
-                          name: "searchText",
-                          controlType: InputControlType_default.lineTextInput,
-                          value: searchText,
-                          callback: (updatedValues) => setSearchText(updatedValues.value),
-                          attributes: {
-                            placeholder: "Search discussions, topics, or keywords..."
-                          },
-                          inputClasses: "!mt-0 !h-10 !rounded-md !border-neutral-soft !bg-default !py-2 !pl-10 !pr-4 !shadow-sm !text-sm focus:!border-primary-base focus:!ring-primary-base"
+                          ButtonType: "Primary" /* Solid */,
+                          onClick: handleSearch,
+                          className: "!h-10 !rounded-md !px-5 !py-0 flex items-center justify-center gap-1.5 shrink-0",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, { className: "h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: "Search" })
+                          ]
                         }
                       )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                      Button_default,
+                    ]
+                  }
+                ),
+                hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative shrink-0", ref: desktopSortDropdownRef, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setIsSortOpen((prev) => !prev),
+                      "aria-expanded": isSortOpen,
+                      className: "inline-flex h-10 items-center justify-between gap-2.5 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-normal shadow-sm transition-all hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base cursor-pointer whitespace-nowrap",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "whitespace-nowrap", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "opacity-70", children: "Sort by: " }),
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "font-semibold", children: selectedSortLabel })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                          ChevronDownIcon,
+                          {
+                            className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isSortOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-full max-h-80 overflow-y-auto rounded-md border border-neutral-soft bg-default p-1 shadow-lg", children: normalizedSortOptions.map((option) => {
+                    const isSelected = selectedSortOption?.value === option.value;
+                    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                      "button",
                       {
-                        ButtonType: "Primary" /* Solid */,
-                        onClick: handleSearch,
-                        className: "!h-10 !rounded-md !px-5 !py-0 flex items-center justify-center gap-1.5 shrink-0",
+                        type: "button",
+                        onClick: () => handleSelectSort(option.value),
+                        className: `flex w-full items-center justify-between gap-4 rounded-md px-3 py-1.5 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SearchIcon, { className: "h-4 w-4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Search" })
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0" })
                         ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative shrink-0", ref: sortDropdownRef, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                  "button",
+                      },
+                      option.value
+                    );
+                  }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-2.5 lg:hidden", children: [
+                showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                  "form",
                   {
-                    type: "button",
-                    onClick: () => setIsSortOpen((prev) => !prev),
-                    "aria-expanded": isSortOpen,
-                    className: "inline-flex h-10 items-center justify-between gap-2.5 rounded-md border bg-default px-3.5 text-sm font-normal shadow-sm transition-all hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-base cursor-pointer whitespace-nowrap",
+                    role: "search",
+                    className: "relative w-full",
+                    onSubmit: (event) => {
+                      event.preventDefault();
+                      void handleSearch();
+                    },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "whitespace-nowrap", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "opacity-70", children: "Sort by: " }),
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "font-semibold", children: selectedSortLabel })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                        ChevronDownIcon,
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, { className: "pointer-events-none absolute left-3.5 top-1/2 z-10 h-4 w-4 -translate-y-1/2 opacity-50" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                        "input",
                         {
-                          className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                          type: "text",
+                          name: "searchTextMobile",
+                          value: searchText,
+                          onChange: (e) => setSearchText(e.target.value),
+                          placeholder: "Search jobs, skills, or keywords...",
+                          className: "h-11 w-full rounded-md border border-neutral-soft bg-default py-2.5 pl-10 pr-4 text-sm shadow-sm transition-colors focus:border-primary-base focus:outline-none focus:ring-1 focus:ring-primary-base"
                         }
                       )
                     ]
                   }
                 ),
-                isSortOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-full max-h-80 overflow-y-auto rounded-lg border border-neutral-soft bg-default p-1 shadow-lg", children: normalizedSortOptions.map((option) => {
-                  const isSelected = currentSort ? option.value === currentSort : option.value === normalizedSortOptions[0]?.value;
-                  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between gap-2.5 pt-0.5", children: [
+                  showFacets && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                     "button",
                     {
                       type: "button",
-                      onClick: () => {
-                        setIsSortOpen(false);
-                        navigateWithoutReload(
-                          getQueryUrl({
-                            $orderby: option.value || void 0,
-                            orderBy: void 0
-                          })
-                        );
-                      },
-                      className: `flex w-full items-center justify-between gap-4 rounded-md px-3 py-1.5 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
+                      onClick: () => setIsMobileFiltersOpen(true),
+                      className: "inline-flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-medium shadow-sm transition-all hover:bg-neutral-weak cursor-pointer active:scale-95",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FilterSlidersIcon, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
+                          "Filters",
+                          selectedFacetCount > 0 ? ` (${selectedFacetCount})` : ""
+                        ] }),
+                        selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "relative flex h-2 w-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-base opacity-75" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary-base" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative shrink-0 ml-auto", ref: mobileSortDropdownRef, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsSortOpen((prev) => !prev),
+                        "aria-expanded": isSortOpen,
+                        className: "inline-flex h-10 items-center justify-between gap-2 rounded-md border border-neutral-soft bg-default px-3.5 text-sm font-medium shadow-sm transition-all hover:bg-neutral-weak cursor-pointer whitespace-nowrap",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "whitespace-nowrap font-medium", children: selectedSortLabel }),
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                            ChevronDownIcon,
+                            {
+                              className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isSortOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute right-0 z-50 mt-1.5 w-max min-w-[160px] max-h-80 overflow-y-auto rounded-md border border-neutral-soft bg-default p-1 shadow-xl", children: normalizedSortOptions.map((option) => {
+                      const isSelected = selectedSortOption?.value === option.value;
+                      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleSelectSort(option.value),
+                          className: `flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors cursor-pointer whitespace-nowrap ${isSelected ? "bg-primary-base font-semibold" : "hover:bg-neutral-soft font-normal"}`,
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                          ]
+                        },
+                        option.value
+                      );
+                    }) })
+                  ] })
+                ] }),
+                selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: [
+                  Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => clearFacetField(field),
+                      className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border border-neutral-soft bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+                      title: `Remove filter: ${value}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "font-medium truncate max-w-[140px]", children: value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CloseIcon, { className: "h-3 w-3 shrink-0 opacity-60 group-hover:opacity-100" })
                       ]
                     },
-                    option.value
-                  );
-                }) })
+                    `mobile-chip-${field}`
+                  )),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => void handleClearAll(),
+                      className: "inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-xs font-semibold underline underline-offset-2 hover:bg-neutral-weak transition-colors ml-auto",
+                      children: "Clear all"
+                    }
+                  )
+                ] })
+              ] }),
+              isMobileFiltersOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "fixed inset-0 z-50 flex flex-col justify-end lg:hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  "div",
+                  {
+                    className: "fixed inset-0 bg-neutral-stronger/60 backdrop-blur-xs transition-opacity duration-300",
+                    onClick: () => setIsMobileFiltersOpen(false),
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative z-10 flex h-[85vh] max-h-[85vh] w-full flex-col rounded-t-xl border-t border-neutral-soft bg-default shadow-2xl transition-transform duration-300 animate-in slide-in-from-bottom", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "pt-2.5 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mx-auto h-1.5 w-12 rounded-full bg-neutral-soft" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between px-5 py-3 border-b border-neutral-soft", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h2", { className: "text-lg font-bold tracking-tight", children: "Filters" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-3", children: [
+                      selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => void handleClearAll(),
+                          className: "text-xs font-semibold cursor-pointer underline underline-offset-2 hover:opacity-80",
+                          children: "Clear all"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setIsMobileFiltersOpen(false),
+                          className: "p-1 rounded-full hover:bg-neutral-weak transition-colors cursor-pointer",
+                          "aria-label": "Close filters",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CloseIcon, { className: "h-5 w-5 opacity-70" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1 overflow-y-auto px-5 py-3 space-y-3 divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+                    const isOpen = !collapsedCategories[field];
+                    const selectedValue = selectedFacetValues.get(field);
+                    const categorySearch = facetCategorySearch[field]?.toLowerCase() || "";
+                    const filteredValues = categorySearch ? values.filter((v) => v.value.toLowerCase().includes(categorySearch)) : values;
+                    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "pt-3 first:pt-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggleCategory(field),
+                          className: "flex w-full cursor-pointer items-center justify-between rounded-md py-2 text-left transition-colors",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-neutral-soft bg-neutral-weak", children: getCategoryIcon(field) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "font-semibold text-sm", children: humanize(field) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              selectedValue && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary-base text-xs font-bold leading-none", children: "1" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                                ChevronDownIcon,
+                                {
+                                  className: `h-4 w-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      ),
+                      isOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "pt-2 pb-1 pl-1 pr-1 space-y-1.5", children: [
+                        values.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 opacity-50" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                            "input",
+                            {
+                              type: "text",
+                              value: facetCategorySearch[field] || "",
+                              onChange: (e) => setFacetCategorySearch((prev) => ({
+                                ...prev,
+                                [field]: e.target.value
+                              })),
+                              placeholder: `Search ${humanize(field).toLowerCase()}...`,
+                              className: "h-8.5 w-full rounded-md border border-neutral-soft bg-neutral-weak py-1 pl-8 pr-3 text-xs focus:border-primary-base focus:outline-none"
+                            }
+                          )
+                        ] }),
+                        filteredValues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "py-2 text-center text-xs opacity-60", children: "No matching options" }) : filteredValues.map((facet) => {
+                          const isChecked = selectedValue === facet.value;
+                          return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => navigateWithoutReload(
+                                getFacetUrl(field, facet.value)
+                              ),
+                              "aria-pressed": isChecked,
+                              className: `flex w-full cursor-pointer items-center justify-between gap-3 rounded-md px-2.5 py-2 text-left text-sm transition-colors ${isChecked ? "bg-neutral-soft font-medium" : "hover:bg-neutral-weak"}`,
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                                    "span",
+                                    {
+                                      className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors ${isChecked ? "bg-primary-base border-primary-base" : "border-neutral-soft bg-default"}`,
+                                      children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckIcon, { className: "h-3.5 w-3.5" })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "leading-snug break-words", children: facet.value })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "shrink-0 text-xs opacity-60 ml-2", children: facet.count })
+                              ]
+                            },
+                            `drawer-${field}-${facet.value}`
+                          );
+                        })
+                      ] })
+                    ] }, `drawer-cat-${field}`);
+                  }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-3 border-t border-neutral-soft bg-default p-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsMobileFiltersOpen(false),
+                        className: "flex-1 h-11 rounded-md border border-neutral-soft bg-default text-sm font-medium transition-colors hover:bg-neutral-weak cursor-pointer flex items-center justify-center",
+                        children: "Close"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsMobileFiltersOpen(false),
+                        className: "flex-1 h-11 rounded-md bg-primary-base text-sm font-semibold shadow-md transition-all hover:opacity-90 active:scale-98 cursor-pointer flex items-center justify-center",
+                        children: [
+                          "Apply Filters",
+                          selectedFacetCount > 0 ? ` (${selectedFacetCount})` : ""
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] })
             ] }),
-            shouldShowFacets && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between border-b  pb-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FilterSlidersIcon, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
-                  selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "flex h-5 items-center justify-center rounded-full bg-primary-base px-2 text-xs font-semibold", children: selectedFacetCount })
+            shouldShowFacets && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between border-b border-neutral-soft pb-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FilterSlidersIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
+                  selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex h-5 items-center justify-center rounded-full bg-primary-base px-2 text-xs font-semibold", children: selectedFacetCount })
                 ] }),
-                hasActiveFiltersOrSort && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                hasActiveFiltersOrSort && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -6113,46 +4484,49 @@ var init_DataBindingControls = __esm({
                     className: "group inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 hover:bg-neutral-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
                     "aria-label": "Clear all filters and sorting",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Clear all" })
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: "Clear all" })
                     ]
                   }
                 )
               ] }),
-              selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b ", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+              selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b border-neutral-soft", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                 "button",
                 {
                   type: "button",
                   onClick: () => clearFacetField(field),
-                  className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+                  className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border border-neutral-soft bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
                   title: `Remove filter: ${value}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "font-medium truncate max-w-[150px]", children: value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "font-medium truncate max-w-[150px]", children: value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
                   ]
                 },
                 `chip-${field}`
               )) }),
-              activeFacets.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "py-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "px-1 pb-2 font-medium text-sm", children: humanize(activeFacets[0][0]) }),
+              activeFacets.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-1 pb-2 font-medium text-sm", children: humanize(activeFacets[0][0]) }),
                 renderFacetItems(activeFacets[0][0], activeFacets[0][1])
               ] }) }),
-              activeFacets.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+              activeFacets.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
                 const isOpen = !collapsedCategories[field];
-                return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                   "div",
                   {
                     className: "py-2 first:pt-0 last:pb-0",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                         "button",
                         {
                           type: "button",
                           onClick: () => toggleCategory(field),
                           className: "flex w-full cursor-pointer items-center justify-between rounded-md px-1.5 py-1.5 text-sm font-semibold transition-colors duration-150 hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: humanize(field) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded border border-neutral-soft bg-neutral-weak", children: getCategoryIcon(field) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: humanize(field) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                               ChevronDownIcon,
                               {
                                 className: `h-4 w-4 transition-transform duration-200 ease-out ${isOpen ? "rotate-180" : ""}`
@@ -6161,7 +4535,7 @@ var init_DataBindingControls = __esm({
                           ]
                         }
                       ),
-                      isOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "pt-1", children: renderFacetItems(field, values) })
+                      isOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "pt-1", children: renderFacetItems(field, values) })
                     ]
                   },
                   field
@@ -6181,13 +4555,13 @@ var Slider_exports = {};
 __export(Slider_exports, {
   default: () => Slider_default
 });
-var import_react60, import_jsx_runtime87, Slider, ArrowButton, ProgressPill, Slider_default;
+var import_react40, import_jsx_runtime66, Slider, ArrowButton, ProgressPill, Slider_default;
 var init_Slider = __esm({
   "src/components/Slider.tsx"() {
     "use strict";
     "use client";
-    import_react60 = __toESM(require("react"));
-    import_jsx_runtime87 = require("react/jsx-runtime");
+    import_react40 = __toESM(require("react"));
+    import_jsx_runtime66 = require("react/jsx-runtime");
     Slider = ({
       children,
       columns,
@@ -6208,17 +4582,17 @@ var init_Slider = __esm({
       progressPosition = "bottom",
       scrollByColumns = false
     }) => {
-      const [currentSlide, setCurrentSlide] = (0, import_react60.useState)(0);
-      const [transition, setTransition] = (0, import_react60.useState)(true);
+      const [currentSlide, setCurrentSlide] = (0, import_react40.useState)(0);
+      const [transition, setTransition] = (0, import_react40.useState)(true);
       const initialSlidesToShow = slidesToShow ?? columns ?? 4;
-      const [slidesToShowState, setSlidesToShowState] = (0, import_react60.useState)(
+      const [slidesToShowState, setSlidesToShowState] = (0, import_react40.useState)(
         typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
       );
-      const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
-      const trackRef = (0, import_react60.useRef)(null);
+      const [isPlaying, setIsPlaying] = (0, import_react40.useState)(autoplay);
+      const trackRef = (0, import_react40.useRef)(null);
       console.log("trackRef:", trackRef);
-      const [videoProgress, setVideoProgress] = (0, import_react60.useState)(null);
-      (0, import_react60.useEffect)(() => {
+      const [videoProgress, setVideoProgress] = (0, import_react40.useState)(null);
+      (0, import_react40.useEffect)(() => {
         if (typeof initialSlidesToShow === "number") {
           setSlidesToShowState(initialSlidesToShow);
           return;
@@ -6236,7 +4610,7 @@ var init_Slider = __esm({
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
       }, [initialSlidesToShow]);
-      (0, import_react60.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         if (!autoplay) return;
         const activeSlideElement = trackRef.current?.children[currentSlide];
         const videoElement = activeSlideElement?.querySelector("video");
@@ -6281,7 +4655,7 @@ var init_Slider = __esm({
         }, autoplay_speed);
         return () => clearInterval(timer);
       }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
-      const totalSlides = import_react60.Children.count(children);
+      const totalSlides = import_react40.Children.count(children);
       const numColumns = columns ?? slidesToShowState;
       const slideWidthPercentage = (() => {
         if (typeof lastColPercentage !== "number") {
@@ -6341,24 +4715,24 @@ var init_Slider = __esm({
         }
       };
       const translateX = -currentSlide * slideWidthPercentage;
-      const slides = import_react60.Children.map(children, (child, index) => {
-        if (!import_react60.default.isValidElement(child)) return null;
+      const slides = import_react40.Children.map(children, (child, index) => {
+        if (!import_react40.default.isValidElement(child)) return null;
         const childProps = child.props;
         const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
-        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "div",
           {
             className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
             style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
-            children: (0, import_react60.cloneElement)(child, {
+            children: (0, import_react40.cloneElement)(child, {
               className: mergedClassName
             })
           },
           index
         );
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "w-full", children: [
-        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "w-full", children: [
+        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           ProgressPill,
           {
             active: index === currentSlide,
@@ -6375,14 +4749,14 @@ var init_Slider = __esm({
           },
           index
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
           "div",
           {
             className: `relative w-full overflow-hidden ${className}`,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 "div",
                 {
                   ref: trackRef,
@@ -6394,32 +4768,32 @@ var init_Slider = __esm({
                   children: slides
                 }
               ),
-              show_arrows && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+              show_arrows && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                   ArrowButton,
                   {
                     direction: "left",
                     onClick: prevSlide,
                     visible: infinite_scroll || currentSlide > 0,
                     className: arrowClassName,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                   ArrowButton,
                   {
                     direction: "right",
                     onClick: nextSlide,
                     visible: infinite_scroll || currentSlide < maxSlide,
                     className: arrowClassName,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) })
                   }
                 )
               ] })
             ]
           }
         ),
-        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           ProgressPill,
           {
             active: index === currentSlide,
@@ -6444,7 +4818,7 @@ var init_Slider = __esm({
       visible,
       children,
       className = ""
-    }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "button",
       {
         className: `
@@ -6471,13 +4845,13 @@ var init_Slider = __esm({
       totalSlides,
       customProgress = null
     }) => {
-      const [progress, setProgress] = (0, import_react60.useState)(0);
-      (0, import_react60.useEffect)(() => {
+      const [progress, setProgress] = (0, import_react40.useState)(0);
+      (0, import_react40.useEffect)(() => {
         if (active) {
           setProgress(0);
         }
       }, [active, index]);
-      (0, import_react60.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         if (!active || !isPlaying || customProgress !== null) {
           if (!active) {
             setProgress(0);
@@ -6532,7 +4906,7 @@ var init_Slider = __esm({
       const renderProgressBar = () => {
         if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
           const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
-          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime66.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`,
@@ -6544,7 +4918,7 @@ var init_Slider = __esm({
       };
       const renderCumulativeFill = () => {
         if (style === "cumulative" && isFilled && !isActive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "div",
             {
               className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
@@ -6554,7 +4928,7 @@ var init_Slider = __esm({
         }
         return null;
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         "button",
         {
           className: `${baseClasses} ${getStyleClasses()}`,
@@ -6582,7 +4956,7 @@ __export(server_exports, {
 module.exports = __toCommonJS(server_exports);
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react62 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react28 = __toESM(require("react"));
@@ -7780,8 +6154,8 @@ var WidgetNode = (props) => {
 var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_dynamic14 = __toESM(require("next/dynamic"));
-var import_react61 = __toESM(require("react"));
+var import_dynamic13 = __toESM(require("next/dynamic"));
+var import_react41 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 var import_dynamic10 = __toESM(require("next/dynamic"));
@@ -8967,12 +7341,12 @@ var GoogleMapNode = (props) => {
 var GoogleMapNode_default = GoogleMapNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var Pagination2 = (0, import_dynamic14.default)(() => Promise.resolve().then(() => (init_Pagination(), Pagination_exports)), { ssr: true });
-var DataBindingControls2 = (0, import_dynamic14.default)(() => Promise.resolve().then(() => (init_DataBindingControls(), DataBindingControls_exports)), {
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Pagination2 = (0, import_dynamic13.default)(() => Promise.resolve().then(() => (init_Pagination(), Pagination_exports)), { ssr: true });
+var DataBindingControls2 = (0, import_dynamic13.default)(() => Promise.resolve().then(() => (init_DataBindingControls(), DataBindingControls_exports)), {
   ssr: true
 });
-var Slider2 = (0, import_dynamic14.default)(() => Promise.resolve().then(() => (init_Slider(), Slider_exports)), {
+var Slider2 = (0, import_dynamic13.default)(() => Promise.resolve().then(() => (init_Slider(), Slider_exports)), {
   ssr: false
 });
 function toCamelCase(str) {
@@ -9252,7 +7626,7 @@ var DivContainer = async (props) => {
     }
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react61.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react41.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       SelectedNode,
       {
         node,
@@ -9344,7 +7718,7 @@ var DivContainer = async (props) => {
           item,
           idx,
           props.href ? void 0 : item?.links?.view
-        )?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react61.default.Fragment, { children: child }, i)) : renderChildren2(props.node.children, props, item, idx)
+        )?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react41.default.Fragment, { children: child }, i)) : renderChildren2(props.node.children, props, item, idx)
       );
     }
     return props.node.children.flatMap((node, childIndex) => {
@@ -9462,17 +7836,17 @@ var DivContainer = async (props) => {
     dataBindingProperties?.showFacets || dataBindingProperties?.showSortOptions || dataBindingProperties?.showSearchBar
   );
   const WrapperComponent = Wrapper;
-  const renderedContainer = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  const renderedContainer = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     WrapperComponent,
     {
       id: guid,
       style: combinedStyles,
       className: classNames || void 0,
       ...wrapperProps,
-      children: shouldShowNoDataMessage ? hasActiveFilter ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(NoFilterResultsFound_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(NoDataFound_default, {}) : renderContainerChildren()
+      children: shouldShowNoDataMessage ? hasActiveFilter ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NoFilterResultsFound_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NoDataFound_default, {}) : renderContainerChildren()
     }
   );
-  const paginationControl = dataBindingProperties?.enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  const paginationControl = dataBindingProperties?.enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Pagination2,
     {
       path: props.path,
@@ -9480,15 +7854,15 @@ var DivContainer = async (props) => {
       dataset: response
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_react61.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react41.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "style",
       {
         dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS }
       }
     ),
-    showDataBindingControls ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_react61.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    showDataBindingControls ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react41.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         DataBindingControls2,
         {
           mode: "toolbar",
@@ -9501,16 +7875,16 @@ var DivContainer = async (props) => {
           showSearchBar: dataBindingProperties?.showSearchBar
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
         "div",
         {
           className: dataBindingProperties?.showFacets ? "grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]" : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "min-w-0", children: [
               renderedContainer,
               paginationControl
             ] }),
-            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("aside", { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("aside", { className: "hidden lg:block", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               DataBindingControls2,
               {
                 mode: "facets",
@@ -9523,16 +7897,16 @@ var DivContainer = async (props) => {
           ]
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_react61.default.Fragment, { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react41.default.Fragment, { children: [
       renderedContainer,
-      paginationControl && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: paginationControl })
+      paginationControl && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { children: paginationControl })
     ] })
   ] });
 };
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -9570,14 +7944,14 @@ var PageBodyRenderer = (props) => {
     }
     return true;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react62.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react42.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
     if (!shouldRenderNode(node)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react62.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react62.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react62.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react42.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react42.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react42.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       SelectedNode,
       {
         node,
@@ -9593,7 +7967,7 @@ var PageBodyRenderer = (props) => {
         device: props.device,
         widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react62.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react42.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       SelectedNode,
       {
         node,