@arc-ui/community-components 1.1.0 → 2.0.0

package/dist/index.js

@@ -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;
+        return (React.createElement("li", { key: id, className: styles$f.AccordionDisclosureListItem },
+            React.createElement(Disclosure.Disclosure, { summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, 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,52 +276,52 @@ 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 Tue, 23 Dec 2025 14:36:38 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) {
+    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("div", { className: styles$d.listItemTextContainer },
                 React.createElement(Heading.Heading, { level: "3", size: "s" }, heading),
                 text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
@@ -324,20 +329,20 @@ var IconList = function (_a) {
     })));
 };
 
-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 VideoPlayer$1 = React.lazy(function () {
@@ -371,6 +376,24 @@ 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, ")"));
@@ -398,12 +421,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 +435,39 @@ var DownloadList = function (_a) {
             i !== downloads.length - 1 && React.createElement(VerticalSpace.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 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)),
+        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 () {
+                            var _a;
+                            (_a = document.getElementById("#".concat(item.id))) === null || _a === void 0 ? void 0 : _a.focus();
+                        } }, (_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 },
+            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 +2697,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" },
@@ -2819,11 +2875,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 +3103,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;