@arc-ui/community-components 3.2.0 → 3.3.0

package/lib/index.cjs

@@ -24,6 +24,7 @@ var TypographyCard = require('@arc-ui/components/TypographyCard');
 var Box = require('@arc-ui/components/Box');
 var Rule = require('@arc-ui/components/Rule');
 var Align = require('@arc-ui/components/Align');
+var Hidden = require('@arc-ui/components/Hidden');
 var TabbedBanner = require('@arc-ui/components/TabbedBanner');
 var Tag = require('@arc-ui/components/Tag');
 var Toast = require('@arc-ui/components/Toast');
@@ -445,14 +446,13 @@ var CopyLead = function (_a) {
 var styles$g = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
 
 var DownloadList = function (_a) {
-    var heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, downloads = _a.downloads;
-    return (React.createElement(React.Fragment, null,
+    var heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, downloads = _a.downloads, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads"]);
+    return (React.createElement("div", __assign({}, filterAttrs(props)),
         React.createElement("div", { className: styles$g.headingContainer },
             React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
         React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-        downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
-            React.createElement(Download.Download, __assign({}, props)),
-            " ",
+        downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i) },
+            React.createElement(Download.Download, __assign({}, downloadProps)),
             i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); })));
 };
 
@@ -2743,12 +2743,12 @@ var FeaturePost = function (_a) {
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
                     React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
                     React.createElement(MediaContent, { image: image, video: video }))),
-                React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
                 typeof content === "string" ? (React.createElement(Text.Text, { size: "l" }, content)) : (content),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
                     footer.author && (React.createElement(React.Fragment, null,
-                        React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-                        React.createElement(Author, { name: footer.author.name, title: footer.author.title, avatar: footer.author.avatar }))),
+                        React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                        React.createElement(Author, __assign({}, footer.author)))),
                     React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
                     React.createElement(ButtonV2.ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
@@ -2781,9 +2781,9 @@ var getListHeadingLevel = function (level) {
 };
 
 var HighlightItem = function (_a) {
-    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
+    var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["icon", "heading", "text", "link", "isSmallIcon", "headingLevel"]);
     var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
-    return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$d.highlightItem },
+    return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$d.highlightItem }, filterAttrs(props)),
         icon && (React.createElement("div", { className: styles$d.Icon },
             React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
@@ -2795,11 +2795,11 @@ var HighlightItem = function (_a) {
 };
 
 var HighlightList = function (_a) {
-    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
+    var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
     var id = React.useId();
-    return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$d.highlights, styles$d["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, headingLevel: headingLevel }));
+    return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$d.highlights, styles$d["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
+        var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
+        return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
     })));
 };
 
@@ -2810,11 +2810,11 @@ var HighlightList = function (_a) {
  */
 var Highlights = function (_a) {
     var _b, _c, _d;
-    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
+    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
     var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
-    return (React.createElement("div", null,
+    return (React.createElement("div", __assign({}, filterAttrs(props)),
         React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
-        React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
+        React.createElement(HighlightList, { 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", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
@@ -2878,7 +2878,7 @@ const BtIconTickAlt2Px =
  * 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, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel;
+    var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel, props = __rest(_a, ["heading", "content", "id", "isCarousel", "cards", "headingLevel", "isHeadingWordWrap", "columns", "button", "overlineHeadingLevel", "overlineLabel"]);
     var componentId = React.useId();
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
@@ -2910,7 +2910,7 @@ var PromoListing = function (_a) {
         var CardComponent = CARD_COMPONENTS[card.type];
         return React.createElement(CardComponent, __assign({}, card, commonProps));
     };
-    return (React.createElement("div", { className: styles$c.PromoListing },
+    return (React.createElement("div", __assign({ className: styles$c.PromoListing }, filterAttrs(props)),
         overlineLabel && (React.createElement(React.Fragment, null,
             React.createElement(Heading.Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
             React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))),
@@ -2934,15 +2934,15 @@ var Quote = function (_a) {
             React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$b.quoteIcon, "aria-hidden": "true" },
                 React.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
             React.createElement("p", { className: styles$b.quoteContent }, content)),
-        author && (React.createElement(Author, { name: author.name, title: author.title, avatar: author.avatar }))));
+        author && React.createElement(Author, __assign({}, author))));
 };
 
 var styles$a = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
 
 var Summary = function (_a) {
-    var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c;
+    var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["content", "noBorder", "headingLevel"]);
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
-    return (React.createElement(Box.Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }),
+    return (React.createElement(Box.Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
         React.createElement("div", { className: styles$a.row }, content.map(function (_a, i) {
             var heading = _a.heading, text = _a.text;
             return (React.createElement(React.Fragment, null,
@@ -2955,7 +2955,7 @@ var Summary = function (_a) {
         }))));
 };
 
-var styles$9 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
+var styles$9 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
 
 var getLinkProps = function (link) {
     return link.openInNewTab
@@ -2967,12 +2967,11 @@ var getLinkProps = function (link) {
 };
 
 var Statistics = function (_a) {
-    var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
+    var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics, props = __rest(_a, ["id", "isHeadingWordWrap", "headingLevel", "heading", "content", "statistics"]);
     var componentId = React.useId();
-    return (React.createElement(Columns.Columns, null,
+    return (React.createElement(Columns.Columns, __assign({ isGutterless: true }, filterAttrs(props)),
         React.createElement(Columns.ColumnsCol, { spanM: 9 },
-            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
-            React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
+            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
         React.createElement(Columns.ColumnsCol, { spanL: 9 },
             React.createElement("ul", { className: styles$9.list }, statistics.map(function (_a, i) {
                 var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
@@ -2985,18 +2984,21 @@ var Statistics = function (_a) {
                         React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 8 },
                             React.createElement(Align.Align, { vertical: "center" },
                                 React.createElement("div", { className: styles$9.statWrapper },
-                                    React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat)))),
+                                    React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat),
+                                    React.createElement(Hidden.Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
+                                        React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))))),
                         React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 4 },
-                            React.createElement(Text.Text, null, copy),
-                            link && (React.createElement(React.Fragment, null,
-                                React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
-                                React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
-                            source && (React.createElement(React.Fragment, null,
-                                React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
-                                React.createElement(Text.Text, { size: "xs" },
-                                    React.createElement("span", { className: styles$9.mutedText }, source)))),
-                            sourceUrl && (React.createElement(Text.Text, { size: "xs" },
-                                React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl)))))));
+                            React.createElement(Align.Align, { vertical: "center" },
+                                React.createElement(Text.Text, null, copy),
+                                link && (React.createElement(React.Fragment, null,
+                                    React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+                                    React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
+                                source && (React.createElement(React.Fragment, null,
+                                    React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+                                    React.createElement(Text.Text, { size: "xs" },
+                                        React.createElement("span", { className: styles$9.mutedText }, source)))),
+                                sourceUrl && (React.createElement(Text.Text, { size: "xs" },
+                                    React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl))))))));
             })))));
 };
 
@@ -3004,8 +3006,8 @@ var styles$8 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWit
 
 var BannerWithTabs = function (_a) {
     var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
-    return (React.createElement(React.Fragment, null,
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM, props = __rest(_a, ["tabs", "defaultValue", "heading", "content", "id", "isHeadingWordWrap", "alignTypography", "minHeight", "minHeightM"]);
+    return (React.createElement("div", __assign({}, filterAttrs(props)),
         React.createElement("div", { className: classNames((_b = {},
                 _b[styles$8.bannerWithTabsHeadingCentered] = alignTypography === "center",
                 _b)) },
@@ -3020,7 +3022,7 @@ var styles$7 = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent"
  */
 var ArticleSidebar = function (_a) {
     var _b;
-    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection;
+    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection"]);
     var id = React.useId();
     var _c = React.useState(false), showToast = _c[0], setShowToast = _c[1];
     var url = location.href;
@@ -3067,7 +3069,7 @@ var ArticleSidebar = function (_a) {
             : []), true) : [];
     var hasTopContent = Boolean(author || aboutSection || additionalContent);
     var hasBottomContent = Boolean(linkSection || topics || share);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement("div", __assign({}, filterAttrs(props)),
         React.createElement("div", { className: classNames((_b = {},
                 _b[styles$7.textContent] = hasTopContent,
                 _b)) },
@@ -3191,67 +3193,57 @@ var ProductNavigation = function (_a) {
 var styles$5 = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
 
 var ContentInfoWidget = function (_a) {
-    var text = _a.text, icon = _a.icon;
-    return (React.createElement("div", { className: styles$5.container },
+    var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
+    return (React.createElement("div", __assign({ className: styles$5.container }, filterAttrs(props)),
         React.createElement("div", { className: styles$5.icon },
             React.createElement(Icon.Icon, { size: 20, icon: icon })),
         React.createElement("div", { className: styles$5.text },
             React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
 };
 
-var styles$4 = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
-
-/**
- * Pill-style HeroLink component with default and hover states
- */
-var HeroLink = function (_a) {
-    var _b;
-    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
-    var HeroLinkClasses = classNames(styles$4.heroLink, (_b = {},
-        _b[styles$4["heroLink--emptyLabel"]] = !label,
-        _b));
-    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
-    if (href) {
-        return (React.createElement("a", __assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: styles$4["heroLink-inner"] },
-                label && React.createElement("span", { className: styles$4["heroLink-label"] }, label),
-                React.createElement("span", { className: styles$4["heroLink-icon"] },
-                    React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-    }
-    return (React.createElement("button", __assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
-        React.createElement("span", { className: styles$4["heroLink-inner"] },
-            label && React.createElement("span", { className: styles$4["heroLink-label"] }, label),
-            React.createElement("span", { className: styles$4["heroLink-icon"] },
-                React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-};
-
-var styles$3 = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
+var styles$4 = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
 
 var ActionTile = function (_a) {
     var _b;
     var icon = _a.icon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "heading", "isActive", "onClick", "className"]);
-    var tileClasses = classNames(styles$3["action-tile"], (_b = {},
-        _b[styles$3["action-tile--active"]] = isActive,
+    var tileClasses = classNames(styles$4["action-tile"], (_b = {},
+        _b[styles$4["action-tile--active"]] = isActive,
         _b), className);
     var content = (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$3["action-tile-content"] },
-            icon && (React.createElement("div", { className: styles$3["action-tile-icon"] },
+        React.createElement("div", { className: styles$4["action-tile-content"] },
+            icon && (React.createElement("div", { className: styles$4["action-tile-icon"] },
                 React.createElement(Icon.Icon, { icon: icon, size: 48 }))),
-            React.createElement("h3", { className: styles$3["action-tile-heading"] }, heading)),
-        isActive && (React.createElement("div", { className: styles$3["action-tile-tick"] },
-            React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 20 })))));
+            React.createElement("h3", { className: styles$4["action-tile-heading"] }, heading)),
+        isActive && (React.createElement("div", { className: styles$4["action-tile-tick"] },
+            React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
     return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
 };
 
-var styles$2 = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
+var styles$3 = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
 
 var LinkTile = function (_a) {
     var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "className"]);
     var Component = href ? "a" : "div";
     var linkProps = href ? { href: href } : {};
-    return (React.createElement(Component, __assign({ className: classNames(styles$2["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles$2["link-tile-content"] },
-        React.createElement("span", { className: styles$2["link-tile-text"] }, text),
-        showIcon && React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))));
+    return (React.createElement(Component, __assign({ className: classNames(styles$3["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles$3["link-tile-content"] },
+        React.createElement("span", { className: styles$3["link-tile-text"] }, text),
+        showIcon && (React.createElement("span", { className: styles$3["link-tile-icon"] },
+            React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
+};
+
+var styles$2 = {"quick-help":"InlineLinkGroup-module_quick-help__cMTpB","quick-help-label":"InlineLinkGroup-module_quick-help-label__VLKen","quick-help-container":"InlineLinkGroup-module_quick-help-container__IStTk","quick-help-item":"InlineLinkGroup-module_quick-help-item__QTIMl","quick-help-separator":"InlineLinkGroup-module_quick-help-separator__qJE0q","quick-help-separator-line":"InlineLinkGroup-module_quick-help-separator-line__VbCVI"};
+
+var InlineLinkGroup = function (_a) {
+    var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
+    return (React.createElement("div", __assign({ className: styles$2["quick-help"] }, filterAttrs(props)),
+        label && (React.createElement("div", { className: styles$2["quick-help-label"] },
+            React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label))),
+        React.createElement("ul", { className: styles$2["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
+            React.createElement("li", { className: styles$2["quick-help-item"] },
+                React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
+                React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
+            index < links.length - 1 && (React.createElement("li", { className: styles$2["quick-help-separator"], "aria-hidden": "true" },
+                React.createElement("div", { className: styles$2["quick-help-separator-line"] }))))); }))));
 };
 
 var styles$1 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","content":"ThumbnailSignpost-module_content__XG9oj","heading":"ThumbnailSignpost-module_heading__mTrpJ","image":"ThumbnailSignpost-module_image__syGZj","thumbnailButton":"ThumbnailSignpost-module_thumbnailButton__Nn-NR","buttonIcon":"ThumbnailSignpost-module_buttonIcon__ydmza"};
@@ -3304,8 +3296,8 @@ exports.CopyLead = CopyLead;
 exports.DownloadList = DownloadList;
 exports.FAQs = FAQs;
 exports.FeaturePost = FeaturePost;
-exports.HeroLink = HeroLink;
 exports.Highlights = Highlights;
+exports.InlineLinkGroup = InlineLinkGroup;
 exports.LinkTile = LinkTile;
 exports.ProductNavigation = ProductNavigation;
 exports.PromoListing = PromoListing;