@digital-b2c/coreui-kit 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -601,16 +601,24 @@ declare const TextCenterCtaInBottom: (({ className, title, subtitle, ctas, child
 
 type ResourceView = 'grid' | 'list';
 type ResourceItemType = 'pdf' | 'link';
-type FilterOption = 'all' | 'link' | 'pdf';
+type FilterOption = 'all' | 'pdf' | 'link';
 type SortOption = 'latest' | 'oldest' | 'az' | 'za';
 interface ResourceItem {
     title: string;
     date: string;
-    type?: ResourceItemType;
+    image?: string;
+    type: ResourceItemType;
+    href: string;
     hasNotification?: boolean;
+    category?: string;
 }
 interface SidebarCategory {
     label: string;
+    /**
+     * Value matched against `ResourceItem.category` to filter items.
+     * Omit it (e.g. an "All Resources" entry) to show every item.
+     */
+    value?: string;
     active?: boolean;
     hasNotification?: boolean;
 }
@@ -649,4 +657,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, Footer, type FooterProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, InternalBrandsTab, type InternalBrandsTabProps, LogoBar, type LogoBarProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, type SidebarCategory, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, type AnchorProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, Footer, type FooterProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, InternalBrandsTab, type InternalBrandsTabProps, LogoBar, type LogoBarProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, type ResourceItem, type ResourceView, ResourcesGridList, type ResourcesGridListProps, type SidebarCategory, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, resolveCompoundSlots, svgs, useIntersectionObserver };

package/dist/index.d.ts

@@ -601,16 +601,24 @@ declare const TextCenterCtaInBottom: (({ className, title, subtitle, ctas, child
 
 type ResourceView = 'grid' | 'list';
 type ResourceItemType = 'pdf' | 'link';
-type FilterOption = 'all' | 'link' | 'pdf';
+type FilterOption = 'all' | 'pdf' | 'link';
 type SortOption = 'latest' | 'oldest' | 'az' | 'za';
 interface ResourceItem {
     title: string;
     date: string;
-    type?: ResourceItemType;
+    image?: string;
+    type: ResourceItemType;
+    href: string;
     hasNotification?: boolean;
+    category?: string;
 }
 interface SidebarCategory {
     label: string;
+    /**
+     * Value matched against `ResourceItem.category` to filter items.
+     * Omit it (e.g. an "All Resources" entry) to show every item.
+     */
+    value?: string;
     active?: boolean;
     hasNotification?: boolean;
 }
@@ -649,4 +657,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, Footer, type FooterProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, InternalBrandsTab, type InternalBrandsTabProps, LogoBar, type LogoBarProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, type SidebarCategory, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, type AnchorProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, Footer, type FooterProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IPicture, Icon, type IconType, InfoCard, type InfoCardProps, InternalBrandsTab, type InternalBrandsTabProps, LogoBar, type LogoBarProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, type ResourceItem, type ResourceView, ResourcesGridList, type ResourcesGridListProps, type SidebarCategory, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextEvent, type TextEventProps, resolveCompoundSlots, svgs, useIntersectionObserver };

package/dist/index.mjs

@@ -2564,7 +2564,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",
@@ -2581,6 +2583,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",
@@ -2614,23 +2617,31 @@ function FilterBar({
   filterValue,
   onFilterChange,
   sortValue,
-  onSortChange
+  onSortChange,
+  searchValue,
+  onSearchChange
 }) {
   const [openDropdown, setOpenDropdown] = useState(null);
   const [searchState, setSearchState] = useState("closed");
-  const [searchQuery, setSearchQuery] = useState("");
   const filterRef = useRef(null);
   const sortRef = useRef(null);
+  const searchRef = useRef(null);
   const searchInputRef = useRef(null);
   const closeSearch = () => {
     setSearchState("closing");
-    setSearchQuery("");
+    onSearchChange("");
+  };
+  const clearSearch = () => {
+    var _a;
+    onSearchChange("");
+    (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   };
   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);
@@ -2640,6 +2651,10 @@ function FilterBar({
     var _a;
     if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   }, [searchState]);
+  useEffect(() => {
+    var _a;
+    if (openDropdown === "search") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+  }, [openDropdown]);
   return /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.filterBar, children: [
     /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.viewToggle, children: [
       /* @__PURE__ */ jsxs(
@@ -2739,17 +2754,21 @@ function FilterBar({
           opt.value
         )) })
       ] }),
-      searchState !== "closed" ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx23(
-            ResourcesGridList_module_default.searchExpanded,
-            searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
+      isMobile ? (
+        /* Mobile — popup panel, mirroring the Filter/Sort dropdowns */
+        /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.dropdownWrapper, ref: searchRef, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx23(ResourcesGridList_module_default.chip, searchValue !== "" && ResourcesGridList_module_default.active),
+              onClick: () => setOpenDropdown(openDropdown === "search" ? null : "search"),
+              "aria-expanded": openDropdown === "search",
+              "aria-label": "Search",
+              children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" })
+            }
           ),
-          onAnimationEnd: () => {
-            if (searchState === "closing") setSearchState("closed");
-          },
-          children: [
+          openDropdown === "search" && /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.searchPanel, children: [
             /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsx(
               "input",
@@ -2758,24 +2777,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__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: ResourcesGridList_module_default.searchClear,
+                "aria-label": "Clear search",
+                onClick: clearSearch,
+                children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
               }
             )
-          ]
-        }
+          ] })
+        ] })
+      ) : searchState !== "closed" ? (
+        /* Desktop — animated inline expand */
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx23(
+              ResourcesGridList_module_default.searchExpanded,
+              searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
+            ),
+            onAnimationEnd: () => {
+              if (searchState === "closing") setSearchState("closed");
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
+              /* @__PURE__ */ 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__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: ResourcesGridList_module_default.searchClear,
+                  "aria-label": "Clear search",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: clearSearch,
+                  children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        )
       ) : /* @__PURE__ */ jsxs("button", { type: "button", className: ResourcesGridList_module_default.chip, onClick: () => setSearchState("open"), children: [
         /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
-        !isMobile && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
+        /* @__PURE__ */ 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__ */ jsx("div", { className: ResourcesGridList_module_default.sidebarMobile, children: /* @__PURE__ */ jsx(
       "button",
@@ -2793,7 +2878,17 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
     return /* @__PURE__ */ jsxs(
       "li",
       {
-        className: clsx23(ResourcesGridList_module_default.sidebarItem, cat.active && ResourcesGridList_module_default.active),
+        className: clsx23(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__ */ jsx("span", { children: cat.label }),
           cat.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2803,14 +2898,19 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
     );
   }) }) });
 };
-var ResourceIcon = ({ type }) => /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { type: type === "pdf" ? "pdf" : "externalLink", size: 32, "aria-hidden": "true" }) });
+var ResourceIcon = ({ image, type }) => {
+  if (!image) return null;
+  return /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ 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__ */ jsx("a", { href: item.href, className: ResourcesGridList_module_default.cardLink, target: "_blank", rel: "noopener noreferrer", children });
   if (view === "grid") {
     return /* @__PURE__ */ jsx("article", { className: ResourcesGridList_module_default.cardGrid, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardBody, children: [
-      /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
-        /* @__PURE__ */ jsx(ResourceIcon, { type: item.type }),
+      /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
+        /* @__PURE__ */ jsx(ResourceIcon, { image: item.image, type: item.type }),
         /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardMeta, children: [
         /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
         item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2819,22 +2919,59 @@ var ResourceCardItem = ({ item, view }) => {
   }
   return /* @__PURE__ */ jsxs("article", { className: ResourcesGridList_module_default.cardList, children: [
     /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListLeft, children: [
-      /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
-      item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
+      item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" }),
+      /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
-      /* @__PURE__ */ jsx(ResourceIcon, { type: item.type }),
+    /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
+      /* @__PURE__ */ jsx(ResourceIcon, { image: item.image, type: item.type }),
       /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
-    ] })
+    ] }) })
   ] });
 };
-var Pagination3 = () => /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
-  /* @__PURE__ */ jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Previous page", children: /* @__PURE__ */ jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" }) }),
-  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDotActive, "aria-current": "page" }),
-  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDot }),
-  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDot }),
-  /* @__PURE__ */ jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Next page", children: /* @__PURE__ */ jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" }) })
-] });
+var Pagination3 = ({ currentPage, totalPages, onPageChange }) => {
+  const isFirst = currentPage <= 1;
+  const isLast = currentPage >= totalPages;
+  return /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: ResourcesGridList_module_default.pageArrow,
+        "aria-label": "Previous page",
+        disabled: isFirst,
+        onClick: () => onPageChange(currentPage - 1),
+        children: /* @__PURE__ */ jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" })
+      }
+    ),
+    Array.from({ length: totalPages }, (_, i) => {
+      const page = i + 1;
+      const isActive = page === currentPage;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx23(isActive ? ResourcesGridList_module_default.pageDotActive : ResourcesGridList_module_default.pageDot),
+          "aria-label": `Page ${page}`,
+          "aria-current": isActive ? "page" : void 0,
+          onClick: () => onPageChange(page)
+        },
+        page
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: ResourcesGridList_module_default.pageArrow,
+        "aria-label": "Next page",
+        disabled: isLast,
+        onClick: () => onPageChange(currentPage + 1),
+        children: /* @__PURE__ */ jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" })
+      }
+    )
+  ] });
+};
+var ITEMS_PER_PAGE = 12;
 var ResourcesGridList = ({
   className,
   items = [],
@@ -2843,19 +2980,51 @@ var ResourcesGridList = ({
   defaultFilter = "all",
   defaultSort = "latest"
 }) => {
+  var _a;
   const [view, setView] = useState(defaultView);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [filterValue, setFilterValue] = useState(defaultFilter);
   const [sortValue, setSortValue] = useState(defaultSort);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedCategory, setSelectedCategory] = 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__ */ jsxs("div", { className: clsx23(ResourcesGridList_module_default.widget, className), children: [
     /* @__PURE__ */ jsx(
       FilterBar,
@@ -2864,9 +3033,11 @@ var ResourcesGridList = ({
         onViewChange: setView,
         isMobile,
         filterValue,
-        onFilterChange: setFilterValue,
+        onFilterChange: handleFilterChange,
         sortValue,
-        onSortChange: setSortValue
+        onSortChange: handleSortChange,
+        searchValue: searchQuery,
+        onSearchChange: handleSearchChange
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.content, children: [
@@ -2880,17 +3051,30 @@ var ResourcesGridList = ({
           "aria-hidden": !isSidebarOpen,
           children: [
             /* @__PURE__ */ jsx("nav", { className: ResourcesGridList_module_default.mobileCategoriesPanel, "aria-label": "Resource categories", children: /* @__PURE__ */ jsx("ul", { className: ResourcesGridList_module_default.mobileCategoriesList, children: categories.map((cat, i) => {
-              var _a;
+              var _a2;
               return /* @__PURE__ */ jsxs(
                 "li",
                 {
-                  className: clsx23(ResourcesGridList_module_default.mobileSidebarItem, cat.active && ResourcesGridList_module_default.active),
+                  className: clsx23(
+                    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__ */ jsx("span", { children: cat.label }),
                     cat.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
                   ]
                 },
-                (_a = cat.label) != null ? _a : i
+                (_a2 = cat.label) != null ? _a2 : i
               );
             }) }) }),
             /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.mobileSidebarCloseColumn, children: /* @__PURE__ */ jsx(
@@ -2911,15 +3095,24 @@ var ResourcesGridList = ({
         {
           categories,
           isMobile,
-          onToggle: () => setIsSidebarOpen(true)
+          onToggle: () => setIsSidebarOpen(true),
+          selectedIndex: selectedCategory,
+          onSelect: handleSelectCategory
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: clsx23(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: displayedItems.map((item, i) => {
-        var _a;
-        return /* @__PURE__ */ jsx(ResourceCardItem, { item, view }, (_a = item.title) != null ? _a : i);
+      /* @__PURE__ */ jsx("div", { className: clsx23(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: paginatedItems.map((item, i) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(ResourceCardItem, { item, view }, (_a2 = item.title) != null ? _a2 : i);
       }) })
     ] }),
-    /* @__PURE__ */ jsx(Pagination3, {})
+    totalPages > 1 && /* @__PURE__ */ jsx(
+      Pagination3,
+      {
+        currentPage: safeCurrentPage,
+        totalPages,
+        onPageChange: setCurrentPage
+      }
+    )
   ] });
 };
 function useIntersectionObserver({