@arc-ui/community-components 1.1.0 → 3.0.0

package/{dist/index.js → lib/index.cjs}

@@ -13,8 +13,9 @@ var useMediaQuery = require('@arc-ui/components/use-media-query');
 var Icon = require('@arc-ui/components/Icon');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var Download = require('@arc-ui/components/Download');
-var AppButton = require('@arc-ui/components/AppButton');
 var Link = require('@arc-ui/components/Link');
+var Tabs = require('@arc-ui/components/Tabs');
+var AppButton = require('@arc-ui/components/AppButton');
 var Carousel = require('@arc-ui/components/Carousel');
 var MediaCard = require('@arc-ui/components/MediaCard');
 var ImpactCard = require('@arc-ui/components/ImpactCard');
@@ -224,29 +225,33 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-var styles$d = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
+var styles$g = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
 
-var SectionHeading = function (_a) {
+var AccordionHeading = function (_a) {
     var _b, _c;
-    var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "image"]);
+    var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "headingSize", "image"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b[styles$d["section-header"]] = true,
-            _b[styles$d["section-header--padded"]] = isPadded,
+            _b[styles$g["accordion-header"]] = true,
+            _b[styles$g["accordion-header--padded"]] = isPadded,
+            _b[styles$g["accordion-header--headingSizeM"]] = headingSize === "m",
             _b)) }, filterDataAttrs(props)),
-        React.createElement("div", { className: classNames((_c = {}, _c[styles$d["section-header--hasImage"]] = image, _c)) },
+        React.createElement("div", { className: classNames((_c = {}, _c[styles$g["accordion-header--hasImage"]] = image, _c)) },
             image && (React.createElement("div", null,
                 React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl" }, heading)),
+            React.createElement(Heading.Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
         content && (React.createElement(React.Fragment, null,
-            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            headingSize === "xl" ? (React.createElement(VerticalSpace.VerticalSpace, { size: "24" })) : (React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "12", sizeXL: "16" })),
             React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
 };
 
+var styles$f = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
+
 var AccordionDisclosureList = function (_a) {
     var disclosureList = _a.disclosureList;
-    return (React.createElement(React.Fragment, null, disclosureList.map(function (_a, index) {
-        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;
-        return (React.createElement(Disclosure.Disclosure, { key: index, summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, children));
+    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, props = __rest(_a, ["children", "summary", "isOpen", "indentDetails", "headingLevel", "id"]);
+        return (React.createElement("li", { key: id, className: styles$f.AccordionDisclosureListItem },
+            React.createElement(Disclosure.Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterDataAttrs(props)), children)));
     })));
 };
 
@@ -254,13 +259,13 @@ var AccordionDisclosureList = function (_a) {
  * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
  */
 var Accordion = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "content", "disclosureList"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, headingSize = _a.headingSize, content = _a.content, id = _a.id, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "headingSize", "content", "id", "disclosureList"]);
     return (React.createElement("div", __assign({}, filterDataAttrs(props)),
-        React.createElement(SectionHeading, { isPadded: true, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
         React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
 };
 
-var styles$c = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
+var styles$e = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
 
 var Author = function (_a) {
     var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
@@ -271,73 +276,78 @@ var Author = function (_a) {
         React.createElement(Grid.Grid, { isFluid: true, isGutterless: true },
             React.createElement(Grid.GridRow, { align: "center" },
                 React.createElement(Grid.GridCol, { xs: isLargeAvatar ? 12 : "auto" },
-                    React.createElement("div", { className: isLargeAvatar ? styles$c.largeAvatar : undefined },
+                    React.createElement("div", { className: isLargeAvatar ? styles$e.largeAvatar : undefined },
                         React.createElement(Avatar.Avatar, __assign({}, avatar)))),
                 React.createElement(Grid.GridCol, null,
-                    React.createElement("div", { className: "".concat(!isLargeAvatar && styles$c.authorContent), "data-testid": "authorContent" },
+                    React.createElement("div", { className: "".concat(!isLargeAvatar && styles$e.authorContent), "data-testid": "authorContent" },
                         React.createElement(Heading.Heading, { size: "xs" }, name),
                         React.createElement(Text.Text, { size: "s" }, title)))))));
 };
 
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 18:15:01 GMT
+ * Generated on Wed, 18 Feb 2026 11:14:49 GMT
  */
 var ArcSizeBreakpointsS = "636px";
 var ArcSizeBreakpointsM = "768px";
 var ArcSizeBreakpointsL = "1024px";
 var ArcSizeBreakpointsXl = "1280px";
 
-var styles$b = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
+var styles$d = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
 
 var MediaContent$1 = function (_a) {
     var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
-    return (React.createElement("div", { className: styles$b.mediaContainer },
+    return (React.createElement("div", { className: styles$d.mediaContainer },
         React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
-        children && (React.createElement("div", { className: styles$b.content },
+        children && (React.createElement("div", { className: styles$d.content },
             React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
             React.createElement(Text.Text, { size: "l" }, children)))));
 };
 
 var Image$1 = function (_a) {
     var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles$b.imgWrapper },
+    return (React.createElement("div", { className: styles$d.imgWrapper },
         React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
             sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
 };
 
 var IconList = function (_a) {
-    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React.createElement("ul", { className: styles$b.list }, listItems.map(function (_a) {
+    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;
-        return (React.createElement("li", { key: heading, className: classNames(styles$b.listItem, (_b = {},
-                _b[styles$b.listItemCentered] = !text,
+        return (React.createElement("li", { key: heading, className: classNames(styles$d.listItem, (_b = {},
+                _b[styles$d.listItemCentered] = !text,
                 _b)) },
-            React.createElement("div", { className: styles$b.listItemIconContainer },
+            React.createElement("div", { className: styles$d.listItemIconContainer },
                 React.createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React.createElement("div", { className: styles$b.listItemTextContainer },
-                React.createElement(Heading.Heading, { level: "3", size: "s" }, heading),
+            React.createElement("div", { className: styles$d.listItemTextContainer },
+                React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
                 text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
                     React.createElement(Text.Text, null, text))))));
     })));
 };
 
-var Button = function (props) { return (React.createElement("div", { className: styles$b.buttonContainer },
+var Button = function (props) { return (React.createElement("div", { className: styles$d.buttonContainer },
     React.createElement(ButtonV2.ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
 
 var Container = function (_a) {
     var _b;
     var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
-    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$b.container, styles$b["container--".concat(type)], styles$b["container--align-".concat(alignment)], (_b = {},
-            _b[styles$b["container--reverse"]] = isReverseOrder,
+    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$d.container, styles$d["container--".concat(type)], styles$d["container--align-".concat(alignment)], (_b = {},
+            _b[styles$d["container--reverse"]] = isReverseOrder,
             _b)) }, children));
 };
 
 var Column = function (_a) {
     var children = _a.children;
-    return (React.createElement("div", { className: styles$b.col }, children));
+    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 () {
@@ -353,6 +363,7 @@ var MediaTemplate = function (_a) {
     var _c = React.useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
+    var listHeadingLevel = getListHeadingLevel$1(headingLevel);
     React.useEffect(function () {
         setIsClient(true);
     }, []);
@@ -363,7 +374,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(React.Suspense, { fallback: null },
@@ -371,16 +382,35 @@ var MediaTemplate = function (_a) {
                 image && !video && React.createElement(Image$1, __assign({}, image))))));
 };
 
+var styles$c = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
+
+var SectionHeading = function (_a) {
+    var _b, _c;
+    var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "image"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {},
+            _b[styles$c["section-header"]] = true,
+            _b[styles$c["section-header--padded"]] = isPadded,
+            _b)) }, filterDataAttrs(props)),
+        React.createElement("div", { className: classNames((_c = {}, _c[styles$c["section-header--hasImage"]] = image, _c)) },
+            image && (React.createElement("div", null,
+                React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
+            React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl" }, heading)),
+        content && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
+};
+
 var ContentTemplate = function (_a) {
     var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var isMinWidthArcBreakpointL = useMediaQuery.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)))));
 };
 
@@ -398,12 +428,12 @@ var CopyLead = function (_a) {
     return null;
 };
 
-var styles$a = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+var styles$b = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
 
 var DownloadList = function (_a) {
     var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, downloads = _a.downloads;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$a.headingContainer },
+        React.createElement("div", { className: styles$b.headingContainer },
             React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content })),
         React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
         downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
@@ -412,6 +442,44 @@ var DownloadList = function (_a) {
             i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); })));
 };
 
+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({ 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.Heading, { size: "xs" }, linkListHeading)),
+            React.createElement("ul", { className: classNames((_b = {},
+                    _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.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", { 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.VerticalSpace, { size: "48", sizeL: "64" }))); }))),
+        type === "tabs" && (React.createElement(Tabs.Tabs, { defaultValue: accordionData[0].heading },
+            React.createElement(Tabs.TabsList, { type: "standard" }, accordionData.map(function (item, index) { return (React.createElement("div", { key: index },
+                React.createElement(Tabs.TabsItem, { label: item.heading, value: item.heading }))); })),
+            React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+            accordionData.map(function (item, index) { return (React.createElement("div", { key: item.heading },
+                React.createElement(Tabs.TabsContent, { value: item.heading },
+                    React.createElement(Accordion, { key: index, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" })))); })))));
+};
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -2641,10 +2709,10 @@ var FeaturePost = function (_a) {
                 label && (React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
                     React.createElement(Grid.GridRow, { align: "baseline" },
                         React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
-                            React.createElement(Heading.Heading, { size: "xxs" }, label.text.toUpperCase())),
+                            React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
                         React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
                             React.createElement("div", { className: styles$9.labelDate },
-                                React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "LLLL d, yyyy"))) : (React.createElement("span", null, label.date)))))),
+                                React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
                     React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
                 React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
@@ -2672,15 +2740,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.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
-        React.createElement(Heading.Heading, { level: "3", size: "m" }, heading),
+        React.createElement(Heading.Heading, { level: listHeadingLevel, size: "m" }, heading),
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
         React.createElement(Text.Text, null, text),
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
@@ -2688,54 +2770,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 = React.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.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.VerticalSpace, { size: "24" }),
+            React.createElement(ButtonV2.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 = React.useId();
     var isMinWidthArcBreakpointL = useMediaQuery.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.MediaCard, __assign({}, card)),
-        card.type === "impact-card" && React.createElement(ImpactCard.ImpactCard, __assign({}, card)),
-        card.type === "information-card" && React.createElement(InformationCard.InformationCard, __assign({}, card)),
-        card.type === "typography-card" && React.createElement(TypographyCard.TypographyCard, __assign({}, card)))); };
+    var isMinWidthArcBreakpointM = useMediaQuery.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.MediaCard,
+        "impact-card": ImpactCard.ImpactCard,
+        "information-card": InformationCard.InformationCard,
+        "typography-card": TypographyCard.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.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.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"};
@@ -2819,11 +2925,11 @@ var styles$3 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWit
 
 var BannerWithTabs = function (_a) {
     var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classNames(styles$3.bannerWithTabsHeading, (_b = {},
+        React.createElement("div", { className: classNames((_b = {},
                 _b[styles$3.bannerWithTabsHeadingCentered] = alignTypography === "center",
-                _b)), style: { color: isInverted ? "white" : "black" } },
+                _b)) },
             React.createElement(SectionHeading, { heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
         React.createElement(TabbedBanner.TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
 };
@@ -3047,6 +3153,7 @@ exports.BannerWithTabs = BannerWithTabs;
 exports.ContentInfoWidget = ContentInfoWidget;
 exports.CopyLead = CopyLead;
 exports.DownloadList = DownloadList;
+exports.FAQs = FAQs;
 exports.FeaturePost = FeaturePost;
 exports.Highlights = Highlights;
 exports.ProductNavigation = ProductNavigation;
@@ -3055,4 +3162,4 @@ exports.Quote = Quote;
 exports.SectionHeading = SectionHeading;
 exports.Statistics = Statistics;
 exports.Summary = Summary;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map