@arc-ui/community-components 2.0.0 → 3.0.0

package/{dist/index.es.js → lib/index.mjs}

@@ -247,9 +247,9 @@ var styles$f = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_Ac
 var AccordionDisclosureList = function (_a) {
     var disclosureList = _a.disclosureList;
     return (React.createElement("ul", null, disclosureList.map(function (_a) {
-        var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel, id = _a.id;
+        var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel, id = _a.id, props = __rest(_a, ["children", "summary", "isOpen", "indentDetails", "headingLevel", "id"]);
         return (React.createElement("li", { key: id, className: styles$f.AccordionDisclosureListItem },
-            React.createElement(Disclosure, { summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, children)));
+            React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterDataAttrs(props)), children)));
     })));
 };
 
@@ -284,7 +284,7 @@ var Author = function (_a) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 23 Dec 2025 14:36:38 GMT
+ * Generated on Wed, 18 Feb 2026 11:14:49 GMT
  */
 var ArcSizeBreakpointsS = "636px";
 var ArcSizeBreakpointsM = "768px";
@@ -310,7 +310,7 @@ var Image$1 = function (_a) {
 };
 
 var IconList = function (_a) {
-    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
+    var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
     return (React.createElement("ul", { className: styles$d.list }, listItems.map(function (_a) {
         var _b;
         var icon = _a.icon, heading = _a.heading, text = _a.text;
@@ -320,7 +320,7 @@ var IconList = function (_a) {
             React.createElement("div", { className: styles$d.listItemIconContainer },
                 React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
             React.createElement("div", { className: styles$d.listItemTextContainer },
-                React.createElement(Heading, { level: "3", size: "s" }, heading),
+                React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
                 text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
                     React.createElement(Text, null, text))))));
@@ -343,6 +343,11 @@ var Column = function (_a) {
     return (React.createElement("div", { className: styles$d.col }, children));
 };
 
+var getListHeadingLevel$1 = function (level) {
+    var nextLevel = Math.min(parseInt(level) + 1, 6);
+    return nextLevel.toString();
+};
+
 var VideoPlayer$1 = React.lazy(function () {
     return import('@arc-ui/components/VideoPlayer').then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
@@ -356,6 +361,7 @@ var MediaTemplate = function (_a) {
     var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
+    var listHeadingLevel = getListHeadingLevel$1(headingLevel);
     useEffect(function () {
         setIsClient(true);
     }, []);
@@ -366,7 +372,7 @@ var MediaTemplate = function (_a) {
         React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React.createElement(Column, null,
                 isMinWidthArcBreakpointXl && (React.createElement(MediaContent$1, { heading: heading }, content)),
-                React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+                React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL, headingLevel: listHeadingLevel }),
                 button && React.createElement(Button, __assign({}, button))),
             React.createElement(Column, null,
                 video && isClient && (React.createElement(Suspense, { fallback: null },
@@ -396,12 +402,13 @@ var ContentTemplate = function (_a) {
     var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var listHeadingLevel = getListHeadingLevel$1(headingLevel);
     return (React.createElement(Container, { type: "content", alignment: "top" },
         React.createElement(Column, null,
             React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
             button && isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button))),
         React.createElement(Column, null,
-            React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+            React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL, headingLevel: listHeadingLevel }),
             button && !isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button)))));
 };
 
@@ -433,28 +440,33 @@ var DownloadList = function (_a) {
             i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); })));
 };
 
-var styles$a = {"linkListSection":"FAQs-module_linkListSection__RdQkU","linkListTitle":"FAQs-module_linkListTitle__RVni3","linkList":"FAQs-module_linkList__dPyXj","linkListItem":"FAQs-module_linkListItem__S83CL","linkList--padded":"FAQs-module_linkList--padded__8Paxc"};
+var styles$a = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_linkListSection__RdQkU","linkListTitle":"FAQs-module_linkListTitle__RVni3","linkList":"FAQs-module_linkList__dPyXj","linkListItem":"FAQs-module_linkListItem__S83CL","linkList--padded":"FAQs-module_linkList--padded__8Paxc"};
 
 var FAQs = function (_a) {
     var _b;
     var heading = _a.heading, content = _a.content, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, _e = _a.type, type = _e === void 0 ? "list" : _e, _f = _a.linkListHeading, linkListHeading = _f === void 0 ? "Skip to section" : _f, accordionData = _a.accordionData, props = __rest(_a, ["heading", "content", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
-    return (React.createElement("div", __assign({}, filterDataAttrs(props)),
+    return (React.createElement("div", __assign({ className: styles$a.FAQs }, filterDataAttrs(props)),
         React.createElement(SectionHeading, { heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
         type === "listWithLinks" && (React.createElement("div", { className: styles$a.linkListSection },
             React.createElement("div", { className: styles$a.linkListTitle },
                 React.createElement(Heading, { size: "xs" }, linkListHeading)),
             React.createElement("ul", { className: classNames((_b = {},
-                    _b[styles$a["linkList"]] = true,
+                    _b[styles$a.linkList] = true,
                     _b[styles$a["linkList--padded"]] = isPadded,
                     _b)) }, accordionData.map(function (item) {
                 var _a;
                 return (React.createElement("li", { className: styles$a.linkListItem, key: item.heading },
-                    React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function () {
-                            var _a;
-                            (_a = document.getElementById("#".concat(item.id))) === null || _a === void 0 ? void 0 : _a.focus();
+                    React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
+                            e.preventDefault();
+                            if (item.id) {
+                                var element = document.getElementById(item.id);
+                                if (element) {
+                                    element.scrollIntoView({ behavior: "smooth" });
+                                }
+                            }
                         } }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
             })))),
-        type !== "tabs" && accordionData && (React.createElement("ul", null, accordionData.map(function (item) { return (React.createElement("li", { key: item.id },
+        type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$a.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$a.accordionListItem, key: item.id },
             React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
             React.createElement(VerticalSpace, { size: "48", sizeL: "64" }))); }))),
         type === "tabs" && (React.createElement(Tabs, { defaultValue: accordionData[0].heading },
@@ -2726,15 +2738,29 @@ var FeaturePost = function (_a) {
                 React.createElement(MediaContent, { image: image, video: video }))))));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconArrowRightFill =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
+
 var styles$8 = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 
+var getListHeadingLevel = function (level) {
+    var nextLevel = Math.min(parseInt(level) + 1, 6);
+    return nextLevel.toString();
+};
+
 var HighlightItem = function (_a) {
-    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
+    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
+    var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
     return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$8.highlightItem },
         icon && (React.createElement("div", { className: styles$8.Icon },
             React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
         React.createElement(VerticalSpace, { size: "16" }),
-        React.createElement(Heading, { level: "3", size: "m" }, heading),
+        React.createElement(Heading, { level: listHeadingLevel, size: "m" }, heading),
         React.createElement(VerticalSpace, { size: "16" }),
         React.createElement(Text, null, text),
         React.createElement(VerticalSpace, { size: "16" }),
@@ -2742,54 +2768,78 @@ var HighlightItem = function (_a) {
 };
 
 var HighlightList = function (_a) {
-    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
+    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
     var id = useId();
     return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$8.highlights, styles$8["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
         var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
-        return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
+        return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }));
     })));
 };
 
 /**
- * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
+ * Use `Highlights` to give supporting information about a page or proposition. I
+ * t can be used to call out key benefits in bullet points, or link.
+ * Both two and three column options are available.
  */
 var Highlights = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, listItems = _a.listItems, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
+    var _b, _c, _d;
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
     var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
     return (React.createElement("div", null,
         React.createElement(SectionHeading, { isPadded: true, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, content: content }),
-        React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
+        React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
+        cta && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
+                    ? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill)
+                    : undefined, iconActive: cta.buttonStyle === "compact"
+                    ? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
+                    : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
 };
 
-var styles$7 = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
+var styles$7 = {"PromoListing":"PromoListing-module_PromoListing__6ensv","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid":"PromoListing-module_cardGrid__llf73","cardWrapper":"PromoListing-module_cardWrapper__I4iwh","cardWrapperCarousel":"PromoListing-module_cardWrapperCarousel__t-2qM","columns-3":"PromoListing-module_columns-3__y6jWS","columns-2":"PromoListing-module_columns-2__GRFxb"};
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
  */
 var PromoListing = function (_a) {
-    var heading = _a.heading, content = _a.content, isCarousel = _a.isCarousel, cards = _a.cards, headingLevel = _a.headingLevel, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
+    var heading = _a.heading, content = _a.content, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
     var id = useId();
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
-    var columnCount = isMinWidthArcBreakpointL ? columns : 2;
-    var getCard = function (card) { return (React.createElement(React.Fragment, null,
-        card.type === "media-card" && React.createElement(MediaCard, __assign({}, card)),
-        card.type === "impact-card" && React.createElement(ImpactCard, __assign({}, card)),
-        card.type === "information-card" && React.createElement(InformationCard, __assign({}, card)),
-        card.type === "typography-card" && React.createElement(TypographyCard, __assign({}, card)))); };
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
+    var cardAspectRatios = columns === "3" ? "10-16" : "3-4";
+    var getCardAspectRatios = {
+        xs: !isCarousel ? "3-4" : undefined,
+        s: !isCarousel ? "10-16" : undefined,
+        m: !isCarousel ? "3-4" : undefined,
+        l: cardAspectRatios,
+        xl: cardAspectRatios,
+        xxl: cardAspectRatios,
+        xxxl: cardAspectRatios,
+    };
+    var commonProps = {
+        preserveAspectRatios: getCardAspectRatios,
+        minHeight: isCarousel && !isMinWidthArcBreakpointL
+            ? isMinWidthArcBreakpointM
+                ? 557
+                : 461
+            : undefined,
+    };
+    var CARD_COMPONENTS = {
+        "media-card": MediaCard,
+        "impact-card": ImpactCard,
+        "information-card": InformationCard,
+        "typography-card": TypographyCard,
+    };
+    var getCard = function (card) {
+        var CardComponent = CARD_COMPONENTS[card.type];
+        return React.createElement(CardComponent, __assign({}, card, commonProps));
+    };
     return (React.createElement("div", { className: styles$7.PromoListing },
         React.createElement(SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel, { itemsPerSlide: 1, responsive: {
-                s: {
-                    itemsToScroll: 1,
-                    isPartialVisible: false,
-                    itemsPerSlide: 2,
-                },
-                m: {
-                    itemsToScroll: 1,
-                    isPartialVisible: true,
-                    itemsPerSlide: 2,
-                },
-            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles$7.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: classNames(styles$7.cardGrid, styles$7["cardGrid".concat(columnCount, "Columns")], styles$7["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles$7.promoListingContainer), key: index }, getCard(card))); })))));
+        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$7.promolistingCarouselWrapper },
+            React.createElement(Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(id, "-").concat(i), className: (styles$7.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$7.cardGrid, styles$7["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("li", { key: "promolist-card--".concat(id, "-").concat(index) },
+            React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$7.cardWrapper }, getCard(card)))); })))));
 };
 
 var styles$6 = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
@@ -3095,4 +3145,4 @@ var ContentInfoWidget = function (_a) {
 };
 
 export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
-//# sourceMappingURL=index.es.js.map
+//# sourceMappingURL=index.mjs.map