@digital-b2c/coreui-kit 0.9.0 → 0.10.0

package/LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Luxottica
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Luxottica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,52 +1,52 @@
-# CoreUI Kit
-
-A React‑based design system and component library.
-
-## 🚀 Getting Started
-
-Install
-
-```bash
-npm install
-```
-
-Development
-
-- Run the build in watch mode
-
-```bash
-npm run dev
-```
-
-Start Storybook
-
-```bash
-npm run storybook
-```
-
-Run tests
-
-```bash
-npm test
-```
-
-Lint/format
-
-```bash
-npm run lint
-```
-
-## 🛠️ Usage
-
-Import components in other projects:
-
-```ts
-import '@digital-b2c/coreui-kit/styles.css'
-
-import { MiniSectionCta } from '@digital-b2c/coreui-kit'
-
-<MiniSectionCta>
-  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
-  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
-</MiniSectionCta>
-```
+# CoreUI Kit
+
+A React‑based design system and component library.
+
+## 🚀 Getting Started
+
+Install
+
+```bash
+npm install
+```
+
+Development
+
+- Run the build in watch mode
+
+```bash
+npm run dev
+```
+
+Start Storybook
+
+```bash
+npm run storybook
+```
+
+Run tests
+
+```bash
+npm test
+```
+
+Lint/format
+
+```bash
+npm run lint
+```
+
+## 🛠️ Usage
+
+Import components in other projects:
+
+```ts
+import '@digital-b2c/coreui-kit/styles.css'
+
+import { MiniSectionCta } from '@digital-b2c/coreui-kit'
+
+<MiniSectionCta>
+  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
+  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
+</MiniSectionCta>
+```

package/dist/index.cjs

@@ -2572,7 +2572,9 @@ var ResourcesGridList_module_default = {
   searchCollapse: "ResourcesGridList_module_searchCollapse",
   searchIconInner: "ResourcesGridList_module_searchIconInner",
   searchInput: "ResourcesGridList_module_searchInput",
+  searchClear: "ResourcesGridList_module_searchClear",
   dropdownPanel: "ResourcesGridList_module_dropdownPanel",
+  searchPanel: "ResourcesGridList_module_searchPanel",
   dropdownOption: "ResourcesGridList_module_dropdownOption",
   selected: "ResourcesGridList_module_selected",
   content: "ResourcesGridList_module_content",
@@ -2589,6 +2591,7 @@ var ResourcesGridList_module_default = {
   cardsArea: "ResourcesGridList_module_cardsArea",
   grid: "ResourcesGridList_module_grid",
   list: "ResourcesGridList_module_list",
+  cardLink: "ResourcesGridList_module_cardLink",
   cardGrid: "ResourcesGridList_module_cardGrid",
   cardBody: "ResourcesGridList_module_cardBody",
   cardIconTitle: "ResourcesGridList_module_cardIconTitle",
@@ -2622,23 +2625,31 @@ function FilterBar({
   filterValue,
   onFilterChange,
   sortValue,
-  onSortChange
+  onSortChange,
+  searchValue,
+  onSearchChange
 }) {
   const [openDropdown, setOpenDropdown] = React62.useState(null);
   const [searchState, setSearchState] = React62.useState("closed");
-  const [searchQuery, setSearchQuery] = React62.useState("");
   const filterRef = React62.useRef(null);
   const sortRef = React62.useRef(null);
+  const searchRef = React62.useRef(null);
   const searchInputRef = React62.useRef(null);
   const closeSearch = () => {
     setSearchState("closing");
-    setSearchQuery("");
+    onSearchChange("");
+  };
+  const clearSearch = () => {
+    var _a;
+    onSearchChange("");
+    (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   };
   React62.useEffect(() => {
     const handleMouseDown = (e) => {
-      var _a, _b;
+      var _a, _b, _c;
       const target = e.target;
-      if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target))) return;
+      if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target)) || ((_c = searchRef.current) == null ? void 0 : _c.contains(target)))
+        return;
       setOpenDropdown(null);
     };
     document.addEventListener("mousedown", handleMouseDown);
@@ -2648,6 +2659,10 @@ function FilterBar({
     var _a;
     if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   }, [searchState]);
+  React62.useEffect(() => {
+    var _a;
+    if (openDropdown === "search") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+  }, [openDropdown]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.filterBar, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.viewToggle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2747,17 +2762,21 @@ function FilterBar({
           opt.value
         )) })
       ] }),
-      searchState !== "closed" ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: clsx23__default.default(
-            ResourcesGridList_module_default.searchExpanded,
-            searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
+      isMobile ? (
+        /* Mobile — popup panel, mirroring the Filter/Sort dropdowns */
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.dropdownWrapper, ref: searchRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx23__default.default(ResourcesGridList_module_default.chip, searchValue !== "" && ResourcesGridList_module_default.active),
+              onClick: () => setOpenDropdown(openDropdown === "search" ? null : "search"),
+              "aria-expanded": openDropdown === "search",
+              "aria-label": "Search",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" })
+            }
           ),
-          onAnimationEnd: () => {
-            if (searchState === "closing") setSearchState("closed");
-          },
-          children: [
+          openDropdown === "search" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.searchPanel, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
@@ -2766,24 +2785,90 @@ function FilterBar({
                 type: "text",
                 className: ResourcesGridList_module_default.searchInput,
                 placeholder: "Search\u2026",
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
+                value: searchValue,
+                onChange: (e) => onSearchChange(e.target.value),
                 onKeyDown: (e) => {
-                  if (e.key === "Escape") closeSearch();
-                },
-                onBlur: closeSearch
+                  if (e.key === "Escape") {
+                    if (searchValue) clearSearch();
+                    else setOpenDropdown(null);
+                  }
+                }
+              }
+            ),
+            searchValue && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: ResourcesGridList_module_default.searchClear,
+                "aria-label": "Clear search",
+                onClick: clearSearch,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
               }
             )
-          ]
-        }
+          ] })
+        ] })
+      ) : searchState !== "closed" ? (
+        /* Desktop — animated inline expand */
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx23__default.default(
+              ResourcesGridList_module_default.searchExpanded,
+              searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
+            ),
+            onAnimationEnd: () => {
+              if (searchState === "closing") setSearchState("closed");
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  className: ResourcesGridList_module_default.searchInput,
+                  placeholder: "Search\u2026",
+                  value: searchValue,
+                  onChange: (e) => onSearchChange(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                      if (searchValue) clearSearch();
+                      else closeSearch();
+                    }
+                  },
+                  onBlur: () => {
+                    if (!searchValue) closeSearch();
+                  }
+                }
+              ),
+              searchValue && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: ResourcesGridList_module_default.searchClear,
+                  "aria-label": "Clear search",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: clearSearch,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        )
       ) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: ResourcesGridList_module_default.chip, onClick: () => setSearchState("open"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
-        !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
       ] })
     ] })
   ] });
 }
-var Sidebar = ({ categories, isMobile, onToggle }) => {
+var Sidebar = ({
+  categories,
+  isMobile,
+  onToggle,
+  selectedIndex,
+  onSelect
+}) => {
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResourcesGridList_module_default.sidebarMobile, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -2801,7 +2886,17 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        className: clsx23__default.default(ResourcesGridList_module_default.sidebarItem, cat.active && ResourcesGridList_module_default.active),
+        className: clsx23__default.default(ResourcesGridList_module_default.sidebarItem, i === selectedIndex && ResourcesGridList_module_default.active),
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": i === selectedIndex,
+        onClick: () => onSelect(i),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(i);
+          }
+        },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: cat.label }),
           cat.hasNotification && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2811,14 +2906,19 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
     );
   }) }) });
 };
-var ResourceIcon = ({ type }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: type === "pdf" ? "pdf" : "externalLink", size: 32, "aria-hidden": "true" }) });
+var ResourceIcon = ({ image, type }) => {
+  if (!image) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: type != null ? type : "", width: 32, height: 32 }) });
+};
 var ResourceCardItem = ({ item, view }) => {
+  const hasHref = Boolean(item.href);
+  const linkWrapper = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: ResourcesGridList_module_default.cardLink, target: "_blank", rel: "noopener noreferrer", children });
   if (view === "grid") {
     return /* @__PURE__ */ jsxRuntime.jsx("article", { className: ResourcesGridList_module_default.cardGrid, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardBody, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ResourceIcon, { type: item.type }),
+      /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ResourceIcon, { image: item.image, type: item.type }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardMeta, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
         item.hasNotification && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2827,22 +2927,59 @@ var ResourceCardItem = ({ item, view }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: ResourcesGridList_module_default.cardList, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardListLeft, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
-      item.hasNotification && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
+      item.hasNotification && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ResourceIcon, { type: item.type }),
+    /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ResourceIcon, { image: item.image, type: item.type }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
-    ] })
+    ] }) })
   ] });
 };
-var Pagination3 = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Previous page", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.pageDotActive, "aria-current": "page" }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.pageDot }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.pageDot }),
-  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Next page", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" }) })
-] });
+var Pagination3 = ({ currentPage, totalPages, onPageChange }) => {
+  const isFirst = currentPage <= 1;
+  const isLast = currentPage >= totalPages;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: ResourcesGridList_module_default.pageArrow,
+        "aria-label": "Previous page",
+        disabled: isFirst,
+        onClick: () => onPageChange(currentPage - 1),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" })
+      }
+    ),
+    Array.from({ length: totalPages }, (_, i) => {
+      const page = i + 1;
+      const isActive = page === currentPage;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx23__default.default(isActive ? ResourcesGridList_module_default.pageDotActive : ResourcesGridList_module_default.pageDot),
+          "aria-label": `Page ${page}`,
+          "aria-current": isActive ? "page" : void 0,
+          onClick: () => onPageChange(page)
+        },
+        page
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: ResourcesGridList_module_default.pageArrow,
+        "aria-label": "Next page",
+        disabled: isLast,
+        onClick: () => onPageChange(currentPage + 1),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" })
+      }
+    )
+  ] });
+};
+var ITEMS_PER_PAGE = 12;
 var ResourcesGridList = ({
   className,
   items = [],
@@ -2851,19 +2988,51 @@ var ResourcesGridList = ({
   defaultFilter = "all",
   defaultSort = "latest"
 }) => {
+  var _a;
   const [view, setView] = React62.useState(defaultView);
   const [isSidebarOpen, setIsSidebarOpen] = React62.useState(false);
   const [filterValue, setFilterValue] = React62.useState(defaultFilter);
   const [sortValue, setSortValue] = React62.useState(defaultSort);
+  const [searchQuery, setSearchQuery] = React62.useState("");
+  const [currentPage, setCurrentPage] = React62.useState(1);
+  const [selectedCategory, setSelectedCategory] = React62.useState(() => {
+    const activeIndex = categories.findIndex((cat) => cat.active);
+    return activeIndex === -1 ? 0 : activeIndex;
+  });
   const { is } = useViewPort_default();
   const isMobile = is("tablet", "below");
-  const displayedItems = [...items].filter((item) => filterValue === "all" || item.type === filterValue).sort((a, b) => {
+  const selectedValue = (_a = categories[selectedCategory]) == null ? void 0 : _a.value;
+  const handleSelectCategory = (index) => {
+    setSelectedCategory(index);
+    setCurrentPage(1);
+    if (isMobile) setIsSidebarOpen(false);
+  };
+  const handleFilterChange = (value) => {
+    setFilterValue(value);
+    setCurrentPage(1);
+  };
+  const handleSortChange = (value) => {
+    setSortValue(value);
+    setCurrentPage(1);
+  };
+  const handleSearchChange = (value) => {
+    setSearchQuery(value);
+    setCurrentPage(1);
+  };
+  const displayedItems = [...items].filter((item) => filterValue === "all" || item.type === filterValue).filter((item) => selectedValue == null || item.category === selectedValue).filter((item) => {
+    const q = searchQuery.trim().toLowerCase();
+    return q === "" || item.title.toLowerCase().includes(q);
+  }).sort((a, b) => {
     if (sortValue === "latest") return new Date(b.date).getTime() - new Date(a.date).getTime();
     if (sortValue === "oldest") return new Date(a.date).getTime() - new Date(b.date).getTime();
     if (sortValue === "az") return a.title.localeCompare(b.title);
     if (sortValue === "za") return b.title.localeCompare(a.title);
     return 0;
   });
+  const totalPages = Math.max(1, Math.ceil(displayedItems.length / ITEMS_PER_PAGE));
+  const safeCurrentPage = Math.min(currentPage, totalPages);
+  const pageStart = (safeCurrentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedItems = displayedItems.slice(pageStart, pageStart + ITEMS_PER_PAGE);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx23__default.default(ResourcesGridList_module_default.widget, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FilterBar,
@@ -2872,9 +3041,11 @@ var ResourcesGridList = ({
         onViewChange: setView,
         isMobile,
         filterValue,
-        onFilterChange: setFilterValue,
+        onFilterChange: handleFilterChange,
         sortValue,
-        onSortChange: setSortValue
+        onSortChange: handleSortChange,
+        searchValue: searchQuery,
+        onSearchChange: handleSearchChange
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ResourcesGridList_module_default.content, children: [
@@ -2888,17 +3059,30 @@ var ResourcesGridList = ({
           "aria-hidden": !isSidebarOpen,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("nav", { className: ResourcesGridList_module_default.mobileCategoriesPanel, "aria-label": "Resource categories", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: ResourcesGridList_module_default.mobileCategoriesList, children: categories.map((cat, i) => {
-              var _a;
+              var _a2;
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "li",
                 {
-                  className: clsx23__default.default(ResourcesGridList_module_default.mobileSidebarItem, cat.active && ResourcesGridList_module_default.active),
+                  className: clsx23__default.default(
+                    ResourcesGridList_module_default.mobileSidebarItem,
+                    i === selectedCategory && ResourcesGridList_module_default.active
+                  ),
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-pressed": i === selectedCategory,
+                  onClick: () => handleSelectCategory(i),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleSelectCategory(i);
+                    }
+                  },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: cat.label }),
                     cat.hasNotification && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
                   ]
                 },
-                (_a = cat.label) != null ? _a : i
+                (_a2 = cat.label) != null ? _a2 : i
               );
             }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: ResourcesGridList_module_default.mobileSidebarCloseColumn, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2919,15 +3103,24 @@ var ResourcesGridList = ({
         {
           categories,
           isMobile,
-          onToggle: () => setIsSidebarOpen(true)
+          onToggle: () => setIsSidebarOpen(true),
+          selectedIndex: selectedCategory,
+          onSelect: handleSelectCategory
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx23__default.default(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: displayedItems.map((item, i) => {
-        var _a;
-        return /* @__PURE__ */ jsxRuntime.jsx(ResourceCardItem, { item, view }, (_a = item.title) != null ? _a : i);
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx23__default.default(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: paginatedItems.map((item, i) => {
+        var _a2;
+        return /* @__PURE__ */ jsxRuntime.jsx(ResourceCardItem, { item, view }, (_a2 = item.title) != null ? _a2 : i);
       }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Pagination3, {})
+    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination3,
+      {
+        currentPage: safeCurrentPage,
+        totalPages,
+        onPageChange: setCurrentPage
+      }
+    )
   ] });
 };
 function useIntersectionObserver({