@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260924115534 → 0.8.1-dev.20260926063530

package/dist/index.js

@@ -4601,19 +4601,6 @@ var init_InputControlClient = __esm({
   }
 });
 
-// src/components/controls/edit/InputControl.tsx
-var import_dynamic7, InputControl2, InputControl_default;
-var init_InputControl = __esm({
-  "src/components/controls/edit/InputControl.tsx"() {
-    "use strict";
-    import_dynamic7 = __toESM(require("next/dynamic"));
-    InputControl2 = (0, import_dynamic7.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
-      ssr: false
-    });
-    InputControl_default = InputControl2;
-  }
-});
-
 // src/clients/CacheManage.tsx
 var import_node_cache, CacheManager;
 var init_CacheManage = __esm({
@@ -5686,7 +5673,7 @@ 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 import_react59, import_navigation, import_jsx_runtime86, 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";
@@ -5694,8 +5681,6 @@ var init_DataBindingControls = __esm({
     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();
@@ -5810,10 +5795,110 @@ var init_DataBindingControls = __esm({
         children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
       }
     );
+    MapPinIcon = ({ 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: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+            }
+          )
+        ]
+      }
+    );
+    BriefcaseIcon = ({ 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: "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"
+          }
+        )
+      }
+    );
+    FileTextIcon = ({ 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: "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"
+          }
+        )
+      }
+    );
+    TagIcon = ({ 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: "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"
+          }
+        )
+      }
+    );
+    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_runtime86.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_runtime86.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_runtime86.jsx)(FileTextIcon, { className: "h-4 w-4" });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TagIcon, { className: "h-4 w-4" });
+    };
     normalizeSortOption = (option) => {
       const direction = option.direction.trim();
+      const title = option.title || humanize(option.name);
       return {
-        label: option.title || humanize(option.name),
+        label: title,
         value: [option.name, direction].filter(Boolean).join(" ")
       };
     };
@@ -5830,6 +5915,23 @@ 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 [isMobileFiltersOpen, setIsMobileFiltersOpen] = (0, import_react59.useState)(false);
+      const [facetCategorySearch, setFacetCategorySearch] = (0, import_react59.useState)({});
+      const desktopSortDropdownRef = (0, import_react59.useRef)(null);
+      const mobileSortDropdownRef = (0, import_react59.useRef)(null);
+      (0, import_react59.useEffect)(() => {
+        const handleClickOutside = (event) => {
+          const target = event.target;
+          const clickedInsideDesktop = desktopSortDropdownRef.current?.contains(target);
+          const clickedInsideMobile = mobileSortDropdownRef.current?.contains(target);
+          if (!clickedInsideDesktop && !clickedInsideMobile) {
+            setIsSortOpen(false);
+          }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }, []);
       const toggleCategory = (field) => {
         setCollapsedCategories((prev) => ({
           ...prev,
@@ -5852,18 +5954,54 @@ var init_DataBindingControls = __esm({
         () => parseFacetSelections(currentFilter),
         [currentFilter]
       );
+      (0, import_react59.useEffect)(() => {
+        if (isMobileFiltersOpen) {
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+        return () => {
+          document.body.style.overflow = "";
+        };
+      }, [isMobileFiltersOpen]);
       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);
+        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 normalizedSortOptions = (0, import_react59.useMemo)(
+        () => (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value),
+        [sortOptions]
+      );
+      const selectedSortOption = (0, import_react59.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)(
         (updates) => {
           const initialParams = searchParams ? searchParams.toString() : "";
@@ -5877,9 +6015,7 @@ 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]
@@ -5888,7 +6024,7 @@ var init_DataBindingControls = __esm({
         (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;
             }
           }
@@ -5896,6 +6032,18 @@ var init_DataBindingControls = __esm({
         },
         [router]
       );
+      const handleSelectSort = (0, import_react59.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) {
@@ -5947,15 +6095,15 @@ 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;
       }
@@ -5967,13 +6115,13 @@ var init_DataBindingControls = __esm({
             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)(
                   "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"}`,
+                    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_runtime86.jsx)(CheckIcon, { className: "h-3 w-3" })
                   }
                 ),
@@ -5994,93 +6142,338 @@ var init_DataBindingControls = __esm({
       return /* @__PURE__ */ (0, import_jsx_runtime86.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-3 md:flex-row md:items-center md:justify-between", children: [
-              showSearchBar && // <form
-              //   role="search"
-              //   className="flex w-full flex-col gap-3 rounded-md border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1"
-              //   onSubmit={(event) => {
-              //     event.preventDefault();
-              //     void handleSearch();
-              //   }}
-              // >
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                "form",
-                {
-                  role: "search",
-                  className: "flex w-full flex-col gap-3 rounded-md sm:flex-row sm:items-center md:min-w-0 md:flex-1",
-                  onSubmit: (event) => {
-                    event.preventDefault();
-                    void handleSearch();
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative bg-default rounded-md min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+            shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "hidden lg:flex lg:items-center lg:justify-between lg:gap-4", children: [
+                showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime86.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_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)(
+                          "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_runtime86.jsxs)(
+                        Button_default,
+                        {
+                          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_runtime86.jsx)(SearchIcon, { className: "h-4 w-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Search" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative shrink-0", ref: desktopSortDropdownRef, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime86.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_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,
+                          {
+                            className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  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-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_runtime86.jsxs)(
+                      "button",
+                      {
+                        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)("span", { className: "whitespace-nowrap", children: option.label }),
+                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                        ]
+                      },
+                      option.value
+                    );
+                  }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col gap-2.5 lg:hidden", children: [
+                showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                  "form",
+                  {
+                    role: "search",
+                    className: "relative w-full",
+                    onSubmit: (event) => {
+                      event.preventDefault();
+                      void handleSearch();
+                    },
+                    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-50" }),
                       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                        InputControl_default,
+                        "input",
                         {
-                          name: "searchText",
-                          controlType: InputControlType_default.lineTextInput,
+                          type: "text",
+                          name: "searchTextMobile",
                           value: searchText,
-                          callback: (updatedValues) => setSearchText(updatedValues.value),
-                          attributes: {
-                            placeholder: "Search discussions, topics, or keywords..."
-                          },
-                          inputClasses: "!mt-0 !rounded-md !py-3 !pl-11 !pr-4 !shadow-sm"
+                          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"
                         }
                       )
-                    ] }),
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between gap-2.5 pt-0.5", children: [
+                  showFacets && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      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_runtime86.jsx)(FilterSlidersIcon, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
+                          "Filters",
+                          selectedFacetCount > 0 ? ` (${selectedFacetCount})` : ""
+                        ] }),
+                        selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "relative flex h-2 w-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-base opacity-75" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary-base" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative shrink-0 ml-auto", ref: mobileSortDropdownRef, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                      Button_default,
+                      "button",
                       {
-                        ButtonType: "Primary" /* Solid */,
-                        onClick: handleSearch,
-                        className: "!rounded-md !px-6 !py-3 sm:self-stretch",
+                        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_runtime86.jsx)(SearchIcon, { className: "h-5 w-5" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: "Search" })
+                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "whitespace-nowrap font-medium", children: selectedSortLabel }),
+                          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                            ChevronDownIcon,
+                            {
+                              className: `h-4 w-4 shrink-0 transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`
+                            }
+                          )
                         ]
                       }
-                    )
-                  ]
-                }
-              ),
-              hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex w-full items-center gap-3 rounded-md border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
+                    ),
+                    isSortOpen && /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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_runtime86.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0" })
+                          ]
+                        },
+                        option.value
+                      );
+                    }) })
+                  ] })
+                ] }),
+                selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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: "font-medium truncate max-w-[140px]", children: value }),
+                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CloseIcon, { className: "h-3 w-3 shrink-0 opacity-60 group-hover:opacity-100" })
+                      ]
+                    },
+                    `mobile-chip-${field}`
+                  )),
+                  /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsxs)("div", { className: "fixed inset-0 z-50 flex flex-col justify-end lg:hidden", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                  "label",
+                  "div",
                   {
-                    htmlFor: "sortOptions",
-                    className: "shrink-0 whitespace-nowrap font-medium",
-                    children: "Sort by"
+                    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_runtime86.jsx)("div", { className: "min-w-0 flex-1 rounded-md bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                  InputControl_default,
-                  {
-                    name: "sortOptions",
-                    controlType: InputControlType_default.select,
-                    value: currentSort,
-                    dataset: normalizedSortOptions,
-                    dataKeyFieldName: "value",
-                    dataTextFieldName: "label",
-                    callback: (updatedValues) => {
-                      const updatedSort = updatedValues.value || "";
-                      navigateWithoutReload(
-                        getQueryUrl({
-                          $orderby: updatedSort || void 0,
-                          orderBy: void 0
+                /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)("div", { className: "pt-2.5 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "mx-auto h-1.5 w-12 rounded-full bg-neutral-soft" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between px-5 py-3 border-b border-neutral-soft", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-lg font-bold tracking-tight", children: "Filters" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-3", children: [
+                      selectedFacetCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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_runtime86.jsx)(CloseIcon, { className: "h-5 w-5 opacity-70" })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsxs)("div", { className: "pt-3 first:pt-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)("span", { className: "font-semibold text-sm", children: humanize(field) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              selectedValue && /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)(
+                                ChevronDownIcon,
+                                {
+                                  className: `h-4 w-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      ),
+                      isOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "pt-2 pb-1 pl-1 pr-1 space-y-1.5", children: [
+                        values.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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_runtime86.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_runtime86.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_runtime86.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)(CheckIcon, { className: "h-3.5 w-3.5" })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "leading-snug break-words", children: facet.value })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "shrink-0 text-xs opacity-60 ml-2", children: facet.count })
+                              ]
+                            },
+                            `drawer-${field}-${facet.value}`
+                          );
                         })
-                      );
-                    },
-                    attributes: { placeholder: "Default" },
-                    inputClasses: "!mt-0 !rounded-md !border-info !bg-default !px-4 !py-3 !shadow-sm focus:!border-primary focus:!ring-primary-base"
-                  }
-                ) })
+                      ] })
+                    ] }, `drawer-cat-${field}`);
+                  }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-3 border-t border-neutral-soft bg-default p-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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 justify-between border-b border-neutral-soft 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" }),
@@ -6100,12 +6493,12 @@ var init_DataBindingControls = __esm({
                   }
                 )
               ] }),
-              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_runtime86.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_runtime86.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 }),
@@ -6132,7 +6525,10 @@ var init_DataBindingControls = __esm({
                           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.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.jsx)("span", { children: humanize(field) })
+                            ] }),
                             /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                               ChevronDownIcon,
                               {
@@ -7002,8 +7398,14 @@ var ViewControl = (props) => {
 };
 var ViewControl_default = ViewControl;
 
+// src/components/controls/edit/InputControl.tsx
+var import_dynamic7 = __toESM(require("next/dynamic"));
+var InputControl2 = (0, import_dynamic7.default)(() => Promise.resolve().then(() => (init_InputControlClient(), InputControlClient_exports)), {
+  ssr: false
+});
+var InputControl_default = InputControl2;
+
 // src/index.ts
-init_InputControl();
 init_InputControlType();
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
@@ -9520,7 +9922,7 @@ var DivContainer = async (props) => {
               renderedContainer,
               paginationControl
             ] }),
-            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("aside", { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            dataBindingProperties?.showFacets && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("aside", { className: "hidden lg:block", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
               DataBindingControls2,
               {
                 mode: "facets",
@@ -9794,7 +10196,6 @@ var NavigationTabsV2_default = NavigationTabsV2;
 
 // src/components/dataForm/DataList.tsx
 var import_react67 = __toESM(require("react"));
-init_InputControl();
 var import_navigation3 = require("next/navigation");
 
 // src/components/dataForm/NoContentView.tsx
@@ -10600,14 +11001,12 @@ init_InputControlType();
 
 // src/components/dataForm/DataForm.tsx
 var import_react70 = __toESM(require("react"));
-init_InputControl();
 init_Icon();
 init_Button();
 init_StyleTypes();
 
 // src/components/dataForm/DataFormChildSection.tsx
 var import_react69 = __toESM(require("react"));
-init_InputControl();
 
 // src/components/dataForm/StyleTypes.tsx
 var StyleTypes2 = /* @__PURE__ */ ((StyleTypes3) => {