@digital-b2c/coreui-kit 0.18.4 → 0.18.6

package/dist/index.d.cts

@@ -1179,6 +1179,36 @@ declare const LocationsBrandCards: (({ className, title, subtitle, image, cards,
     Text: ({ children }: LocationsBrandCardsTextProps) => react.JSX.Element;
 };
 
+interface BrandTab {
+    trigger: {
+        default: string | {
+            src: string;
+            alt: string;
+        };
+        active: string | {
+            src: string;
+            alt: string;
+        };
+    };
+    content?: {
+        title?: string;
+        description: React.ReactNode | string;
+        logo?: IPicture;
+        textColor?: string;
+    }[];
+    image?: IPicture;
+    cta?: ICtaLogo;
+    theme: string;
+}
+interface BrandsTabProps {
+    title?: string;
+    className?: string;
+    subtitle?: React.ReactNode;
+    tabs?: BrandTab[];
+}
+
+declare const BrandsTab: (props: BrandsTabProps) => react.JSX.Element;
+
 /** Tracks the current browser path, updating on back/forward navigation. */
 declare const useActivePath: () => string;
 
@@ -1207,4 +1237,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandCard, type BrandCardProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ColTextMenu, type ColTextMenuProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type IColTextMenuItem, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, type ITwoColTextMenuSection, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, type UserMenuItem as InternalNavMenuItem, Loader, type LoaderProps, LocationsBrandCards, type LocationsBrandCardsProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, type NavItem, Navigation, type NavigationBrandBar, type NavigationProps, type UserMenuUser as NavigationUser, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, QuoteSectionBlock, type QuoteSectionBlockProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Search, type SearchProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, Text, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextCenterWithMedia, type TextCenterWithMediaProps, TextEvent, type TextEventProps, type TextProps, TwoColTextMenu, type TwoColTextMenuProps, UpcomingEventCard, type UpcomingEventCardProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
+export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandCard, type BrandCardProps, BrandsStrip, type BrandsStripProps, BrandsTab, type BrandsTabProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ColTextMenu, type ColTextMenuProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type IColTextMenuItem, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, type ITwoColTextMenuSection, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, type UserMenuItem as InternalNavMenuItem, Loader, type LoaderProps, LocationsBrandCards, type LocationsBrandCardsProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, type NavItem, Navigation, type NavigationBrandBar, type NavigationProps, type UserMenuUser as NavigationUser, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, QuoteSectionBlock, type QuoteSectionBlockProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Search, type SearchProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, Text, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextCenterWithMedia, type TextCenterWithMediaProps, TextEvent, type TextEventProps, type TextProps, TwoColTextMenu, type TwoColTextMenuProps, UpcomingEventCard, type UpcomingEventCardProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };

package/dist/index.d.ts

@@ -1179,6 +1179,36 @@ declare const LocationsBrandCards: (({ className, title, subtitle, image, cards,
     Text: ({ children }: LocationsBrandCardsTextProps) => react.JSX.Element;
 };
 
+interface BrandTab {
+    trigger: {
+        default: string | {
+            src: string;
+            alt: string;
+        };
+        active: string | {
+            src: string;
+            alt: string;
+        };
+    };
+    content?: {
+        title?: string;
+        description: React.ReactNode | string;
+        logo?: IPicture;
+        textColor?: string;
+    }[];
+    image?: IPicture;
+    cta?: ICtaLogo;
+    theme: string;
+}
+interface BrandsTabProps {
+    title?: string;
+    className?: string;
+    subtitle?: React.ReactNode;
+    tabs?: BrandTab[];
+}
+
+declare const BrandsTab: (props: BrandsTabProps) => react.JSX.Element;
+
 /** Tracks the current browser path, updating on back/forward navigation. */
 declare const useActivePath: () => string;
 
@@ -1207,4 +1237,4 @@ type SlotMap = Record<string, SlotComponent>;
  */
 declare function resolveCompoundSlots(children: ReactNode, slots: SlotMap): Record<string, ReactNode>;
 
-export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandCard, type BrandCardProps, BrandsStrip, type BrandsStripProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ColTextMenu, type ColTextMenuProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type IColTextMenuItem, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, type ITwoColTextMenuSection, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, type UserMenuItem as InternalNavMenuItem, Loader, type LoaderProps, LocationsBrandCards, type LocationsBrandCardsProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, type NavItem, Navigation, type NavigationBrandBar, type NavigationProps, type UserMenuUser as NavigationUser, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, QuoteSectionBlock, type QuoteSectionBlockProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Search, type SearchProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, Text, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextCenterWithMedia, type TextCenterWithMediaProps, TextEvent, type TextEventProps, type TextProps, TwoColTextMenu, type TwoColTextMenuProps, UpcomingEventCard, type UpcomingEventCardProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
+export { Anchor, type AnchorProps, Badge, type BadgeProps, BlogCardGrid, type BlogCardGridProps, BlogPost, BlogPostContent, type BlogPostContentProps, type BlogPostProps, BlogSearchResultsList, type BlogSearchResultsListProps, BrandCard, type BrandCardProps, BrandsStrip, type BrandsStripProps, BrandsTab, type BrandsTabProps, Button, type ButtonProps, Card, CardCollection, type CardCollectionProps, type CardProps, ColTextMenu, type ColTextMenuProps, ConditionalWrapper, type ConditionalWrapperProps, ContactModule, type ContactModuleProps, Container, type ContainerProps, CountingCard, type CountingCardProps, EventList, type EventListProps, FeaturedNewsHighlights, type FeaturedNewsHighlightsProps, FilterBar, type FilterBarProps, type FilterOption, Footer, type FooterProps, GlobalSearchResultsList, type GlobalSearchResultsListProps, type GridItemProps, type GridProps, HeroBanner, HeroBannerCarousel, type HeroBannerCarouselProps, type HeroBannerProps, type IColTextMenuItem, type ICta, type ICtaHoverLogo, type ICtaIcon, type ICtaLogo, type IFooterSupportGroup, type IPicture, type ITwoColTextMenuSection, Icon, type IconType, InfoCard, type InfoCardProps, Input, type InputProps, InternalBrandsTab, type InternalBrandsTabProps, type UserMenuItem as InternalNavMenuItem, Loader, type LoaderProps, LocationsBrandCards, type LocationsBrandCardsProps, MiniBanner, type MiniBannerProps, MiniSectionCta, type MiniSectionCtaProps, type NavItem, Navigation, type NavigationBrandBar, type NavigationProps, type UserMenuUser as NavigationUser, NewsCard, NewsCardList, type NewsCardListProps, type NewsCardProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Picture, type PictureProps, PracticeCard, type PracticeCardProps, PracticePathCards, type PracticePathCardsProps, QuoteSectionBlock, type QuoteSectionBlockProps, ResourceCardItem, type ResourceCardItemProps, type ResourceItem, type ResourceItemType, type ResourceView, ResourcesGridList, type ResourcesGridListProps, Search, type SearchProps, Sidebar, type SidebarCategory, type SidebarProps, type SortOption, type TButtonVariant, Teaser5050With3Text, type Teaser5050With3TextProps, Teaser5050WithCta, type Teaser5050WithCtaProps, Text, TextBody, type TextBodyProps, TextCenterCtaInBottom, type TextCenterCtaInBottomProps, TextCenterWithMedia, type TextCenterWithMediaProps, TextEvent, type TextEventProps, type TextProps, TwoColTextMenu, type TwoColTextMenuProps, UpcomingEventCard, type UpcomingEventCardProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };

package/dist/index.mjs

@@ -2848,6 +2848,7 @@ var AccordionItem = ({
   children,
   isOpen = false,
   onToggle,
+  renderItemHeader,
   className
 }) => {
   const contentRef = useRef(null);
@@ -2898,7 +2899,10 @@ var AccordionItem = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(
+        renderItemHeader ? renderItemHeader({
+          isOpen,
+          toggle: handleToggle
+        }) : /* @__PURE__ */ jsxs(
           "button",
           {
             className: clsx50(Accordion_module_default.accordionHeader, {
@@ -2925,12 +2929,20 @@ var AccordionItem = ({
           "div",
           {
             ref: contentRef,
-            className: Accordion_module_default.accordionContent,
+            className: clsx50("accordionContent", Accordion_module_default.accordionContent),
             style: {
               overflow: "hidden",
               height: 0
             },
-            children: /* @__PURE__ */ jsx("div", { ref: contentInnerRef, className: Accordion_module_default.accordionContentInner, children })
+            inert: !isOpen,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: contentInnerRef,
+                className: clsx50("accordionContentInner", Accordion_module_default.accordionContentInner),
+                children
+              }
+            )
           }
         )
       ]
@@ -2964,17 +2976,20 @@ var Accordion = ({
   if (items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx50(Accordion_module_default.accordion, className), children: items.map((item) => /* @__PURE__ */ jsx(
-    AccordionItem,
-    {
-      id: item.id,
-      title: item.title,
-      isOpen: openIds.includes(item.id),
-      onToggle: handleToggle,
-      children: item.content
-    },
-    item.id
-  )) });
+  return /* @__PURE__ */ jsx("div", { className: clsx50(Accordion_module_default.accordion, className), children: items.map((item) => {
+    return /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        id: item.id,
+        title: item.title,
+        isOpen: openIds.includes(item.id),
+        onToggle: handleToggle,
+        renderItemHeader: item.renderItemHeader,
+        children: item.content
+      },
+      item.id
+    );
+  }) });
 };
 
 // src/widgets/InternalBrandsTab/InternalBrandsTab.module.scss
@@ -3265,11 +3280,12 @@ var MiniSectionCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+  const hasModuleStyles = moduleStyles && Object.values(moduleStyles).length > 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx50(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], theme && MiniSectionCta_module_default[theme], className),
-      style: __spreadValues({}, moduleStyles && {
+      style: __spreadValues({}, hasModuleStyles && {
         "--custom-background-color": moduleStyles.backgroundColor,
         "--custom-color": moduleStyles.color
       }),
@@ -4252,18 +4268,19 @@ var Teaser5050WithCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+  const hasModuleStyles = moduleStyles && Object.values(moduleStyles).length > 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx50(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className),
-      style: __spreadValues({}, moduleStyles && {
+      style: __spreadValues({}, hasModuleStyles && {
         "--custom-background-color": moduleStyles.backgroundColor,
         "--custom-color": moduleStyles.color
       }),
       children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
         /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
           /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
-            titleNode && /* @__PURE__ */ jsx("div", { className: clsx50(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+            titleNode && /* @__PURE__ */ jsx("div", { className: clsx50("h3", Teaser5050WithCta_module_default.title), children: titleNode }),
             subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx50("subheading", Teaser5050WithCta_module_default.subheading), children: subtitleNode })
           ] }),
           /* @__PURE__ */ jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsx(
@@ -4703,7 +4720,7 @@ var ResourcesGridList = ({
     if (isMobile) setIsSidebarOpen(false);
     setTimeout(() => {
       var _a3;
-      (_a3 = widgetRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth" });
+      (_a3 = widgetRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth", block: "start" });
     }, 200);
   };
   const handleFilterChange = (value) => {
@@ -4816,7 +4833,13 @@ var ResourcesGridList = ({
         currentPage: safeCurrentPage,
         totalPages,
         loop: false,
-        onPageChange: setCurrentPage
+        onPageChange: (page) => {
+          setCurrentPage(page);
+          setTimeout(() => {
+            var _a2;
+            (_a2 = widgetRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "start" });
+          }, 200);
+        }
       },
       `${selectedCategory}-${filterValue}-${sortValue}-${searchQuery}`
     )
@@ -5650,6 +5673,193 @@ var LocationsBrandCards = ({
 var LocationsBrandCards2 = Object.assign(LocationsBrandCards, {
   Text: LocationsBrandCardsText
 });
+
+// src/widgets/BrandsTab/BrandsTab.module.scss
+var BrandsTab_module_default = {
+  "brands-tab": "BrandsTab_module_brands-tab",
+  "text-container": "BrandsTab_module_text-container",
+  title: "BrandsTab_module_title",
+  "tab-wrapper": "BrandsTab_module_tab-wrapper",
+  "tab-buttons": "BrandsTab_module_tab-buttons",
+  "tab-trigger": "BrandsTab_module_tab-trigger",
+  "tab-active": "BrandsTab_module_tab-active",
+  "tab-content-area": "BrandsTab_module_tab-content-area",
+  "content-cards": "BrandsTab_module_content-cards",
+  card: "BrandsTab_module_card",
+  "card-header": "BrandsTab_module_card-header",
+  "card-logo": "BrandsTab_module_card-logo",
+  "content-side": "BrandsTab_module_content-side",
+  "card-cta": "BrandsTab_module_card-cta",
+  "card-image": "BrandsTab_module_card-image",
+  accordion: "BrandsTab_module_accordion",
+  "accordion-header": "BrandsTab_module_accordion-header",
+  "accordion-header-open": "BrandsTab_module_accordion-header-open",
+  "accordion-content": "BrandsTab_module_accordion-content",
+  "card-description": "BrandsTab_module_card-description"
+};
+var BrandsTab = (props) => {
+  var _a, _b, _c;
+  const { title, subtitle, className, tabs } = props;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const accordionItems = useMemo(() => {
+    return (tabs == null ? void 0 : tabs.map((tab, index) => {
+      var _a2, _b2, _c2, _d, _e;
+      return {
+        id: index,
+        title: typeof tab.trigger.active === "string" ? tab.trigger.active : /* @__PURE__ */ jsx(Picture, __spreadValues({}, tab.trigger.active)),
+        content: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx50(BrandsTab_module_default["accordion-content"]),
+            style: {
+              "--theme-color": `var(${tab.theme})`
+            },
+            children: [
+              (_a2 = tab == null ? void 0 : tab.content) == null ? void 0 : _a2.map((content) => {
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: BrandsTab_module_default["card"],
+                    style: {
+                      "--theme-text-color": `var(${content.textColor})`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: BrandsTab_module_default["card-header"], children: [
+                        content.logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: BrandsTab_module_default["card-logo"] }, content.logo)),
+                        /* @__PURE__ */ jsx("h3", { className: clsx50("h4", BrandsTab_module_default["card-title"]), children: content.title })
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: BrandsTab_module_default["card-description"], children: content.description })
+                    ]
+                  },
+                  `${content.title}-${index}`
+                );
+              }),
+              tab.image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, tab.image), { className: BrandsTab_module_default["card-image"] })),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: BrandsTab_module_default["card-cta"],
+                  logo: (_b2 = tab.cta) == null ? void 0 : _b2.logo,
+                  title: (_c2 = tab.cta) == null ? void 0 : _c2.label,
+                  children: /* @__PURE__ */ jsx("span", { "aria-label": (_d = tab.cta) == null ? void 0 : _d.label, children: (_e = tab.cta) == null ? void 0 : _e.label })
+                }
+              )
+            ]
+          }
+        ),
+        renderItemHeader: ({ isOpen, toggle }) => {
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: clsx50(BrandsTab_module_default["accordion-header"], {
+                [BrandsTab_module_default["accordion-header-open"]]: isOpen
+              }),
+              style: {
+                "--theme-color": `var(${tab.theme})`
+              },
+              onClick: toggle,
+              "aria-expanded": isOpen,
+              "aria-label": `Toggle accordion item #${index + 1}`,
+              children: [
+                typeof tab.trigger.active === "string" ? tab.trigger.active : /* @__PURE__ */ jsx(Picture, __spreadValues({}, tab.trigger.active)),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: clsx50(BrandsTab_module_default.accordionChevron, {
+                      [BrandsTab_module_default.accordionChevronOpen]: isOpen
+                    }),
+                    children: isOpen ? /* @__PURE__ */ jsx(Icon, { type: "filledChevronUp", size: 40 }) : /* @__PURE__ */ jsx(Icon, { type: "circleChevronDown", size: 40 })
+                  }
+                )
+              ]
+            }
+          );
+        }
+      };
+    })) || [];
+  }, [tabs]);
+  return /* @__PURE__ */ jsxs(Container, { className: clsx50(BrandsTab_module_default["brands-tab"], className), children: [
+    /* @__PURE__ */ jsxs("div", { className: BrandsTab_module_default["text-container"], children: [
+      title && /* @__PURE__ */ jsx(Text, { tag: "h2", className: BrandsTab_module_default.title, children: title }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: clsx50("subheading", BrandsTab_module_default.subtitle), children: subtitle })
+    ] }),
+    isTabletBelow ? /* @__PURE__ */ jsx(
+      Accordion,
+      {
+        items: accordionItems,
+        allowMultiple: true,
+        defaultOpenIds: [],
+        className: clsx50(BrandsTab_module_default["accordion"])
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: BrandsTab_module_default["tab-wrapper"], children: [
+      /* @__PURE__ */ jsx("div", { className: BrandsTab_module_default["tab-buttons"], children: tabs == null ? void 0 : tabs.map(({ trigger, theme }, index) => {
+        const isActive = activeIndex === index;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tabbutton",
+            onClick: () => setActiveIndex(index),
+            isActive,
+            className: clsx50(BrandsTab_module_default["tab-trigger"], isActive ? BrandsTab_module_default["tab-active"] : null),
+            style: {
+              "--theme-color": `var(${theme})`
+            },
+            children: trigger ? isActive ? typeof trigger.active === "string" ? /* @__PURE__ */ jsx("span", { children: trigger.active }) : /* @__PURE__ */ jsx(Picture, __spreadValues({}, trigger.active)) : typeof trigger.default === "string" ? /* @__PURE__ */ jsx("span", { children: trigger.default }) : /* @__PURE__ */ jsx(Picture, __spreadValues({}, trigger.default)) : null
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx50(BrandsTab_module_default["tab-content-area"]),
+          style: {
+            "--theme-color": `var(${tabs == null ? void 0 : tabs[activeIndex].theme})`
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: BrandsTab_module_default["content-cards"], children: (_a = tabs == null ? void 0 : tabs[activeIndex].content) == null ? void 0 : _a.map((content, index) => {
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: BrandsTab_module_default["card"],
+                  style: {
+                    "--theme-text-color": `var(${content.textColor})`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: BrandsTab_module_default["card-header"], children: [
+                      content.logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: BrandsTab_module_default["card-logo"] }, content.logo)),
+                      /* @__PURE__ */ jsx("h3", { className: clsx50("h4", BrandsTab_module_default["card-title"]), children: content.title })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: BrandsTab_module_default["card-description"], children: content.description })
+                  ]
+                },
+                `${content.title}-${index}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: BrandsTab_module_default["content-side"], children: [
+              (tabs == null ? void 0 : tabs[activeIndex].image) && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, tabs == null ? void 0 : tabs[activeIndex].image), { className: BrandsTab_module_default["card-image"] })),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: BrandsTab_module_default["card-cta"],
+                  logo: (_b = tabs == null ? void 0 : tabs[activeIndex].cta) == null ? void 0 : _b.logo,
+                  children: (_c = tabs == null ? void 0 : tabs[activeIndex].cta) == null ? void 0 : _c.label
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/widgets/BrandsTab/index.tsx
+var BrandsTab2 = Object.assign(BrandsTab, {});
 function useIntersectionObserver({
   animateOnce = false,
   options = {}
@@ -5679,6 +5889,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandCard, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ColTextMenu, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, Loader, LocationsBrandCards2 as LocationsBrandCards, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation3 as Navigation, NewsCard, NewsCardList2 as NewsCardList, PageLoader2 as PageLoader, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, QuoteSectionBlock, ResourceCardItem, ResourcesGridList, Search, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, Text, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextCenterWithMedia2 as TextCenterWithMedia, TextEvent2 as TextEvent, TwoColTextMenu, UpcomingEventCard, UserMenu, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
+export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandCard, BrandsStrip, BrandsTab2 as BrandsTab, Button, Card2 as Card, CardCollection2 as CardCollection, ColTextMenu, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, Loader, LocationsBrandCards2 as LocationsBrandCards, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation3 as Navigation, NewsCard, NewsCardList2 as NewsCardList, PageLoader2 as PageLoader, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, QuoteSectionBlock, ResourceCardItem, ResourcesGridList, Search, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, Text, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextCenterWithMedia2 as TextCenterWithMedia, TextEvent2 as TextEvent, TwoColTextMenu, UpcomingEventCard, UserMenu, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map