@arc-ui/community-components 3.2.0 → 3.3.0

package/lib/index.d.cts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Ref } from 'react';
+import React$1, { ReactNode, FC } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
 import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
@@ -358,10 +358,6 @@ interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon"
      * Style variant for the button. Defaults to "secondary".
      */
     buttonStyle?: "secondary" | "compact";
-    /**
-     * Optional prop to pass additional props to the button. Only data-* and aria-* will work.
-     */
-    [key: string]: unknown;
 }
 
 /**
@@ -572,62 +568,6 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
-type ButtonRef = Ref<ElementUnion> | null;
-/**
- * Pill-style HeroLink component with default and hover states
- */
-declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
-interface LinkElementProps {
-    /**
-     * URL to link to if `HeroButton` elementType is 'a'.
-     */
-    href?: string;
-    /**
-     * Target window for the `HeroButton` href URL.
-     */
-    target?: string;
-    /**
-     * Relationship between the Button href URL and the current page. See
-     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
-     */
-    rel?: string;
-}
-interface HeroButtonElementProps {
-    /**
-     * Default behavior of the Button element. If not provided, 'submit' will
-     * be inferred. Type 'reset' deliberately excluded.
-     */
-    type?: "button" | "submit";
-    /**
-     * Refers to the id of a form so it can be submitted if the button exists outside of it.
-     */
-    form?: string;
-}
-interface HeroLinkProps extends HeroButtonElementProps, LinkElementProps {
-    /**
-     * Label for `HeroLink`
-     */
-    label?: string;
-    /**
-     * Optional click handler for the `HeroLink`.
-     */
-    onClick?: () => void;
-    /**
-     * Optional property to provide component Ref
-     */
-    ref?: ButtonRef;
-    /**
-     * Text to override `label` with additional, more precise information
-     * specifically for screen reader users.
-     */
-    ariaLabel?: string;
-    /**
-     * HTML ID for the `HeroLink`
-     */
-    id?: string;
-}
-
 declare const ActionTile: React$1.FC<ActionTileProps>;
 interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
@@ -650,11 +590,32 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
 
 declare const LinkTile: React$1.FC<LinkTileProps>;
 interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Display text for the tile */
     text?: string;
+    /** URL the tile navigates to. Renders as an anchor tag when provided */
     href?: string;
+    /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
 }
 
+declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
+interface InlineLinkGroupProps {
+    /** Optional overline label displayed above the link group */
+    label?: string;
+    /** Array of link items to display */
+    links: InlineLinkGroupItem[];
+}
+interface InlineLinkGroupItem {
+    /** Display text for the link */
+    label: string;
+    /** URL the link navigates to */
+    href: string;
+    /** Optional click handler for the link */
+    onClick?: () => void;
+    /** Optional accessible label for screen readers */
+    ariaLabel?: string;
+}
+
 /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
 declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
 interface ThumbnailSignpostProps {
@@ -688,5 +649,5 @@ interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
     thumbnailList: ThumbnailSignpostProps[];
 }
 
-export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
-export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };

package/lib/index.d.mts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Ref } from 'react';
+import React$1, { ReactNode, FC } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
 import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
@@ -358,10 +358,6 @@ interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon"
      * Style variant for the button. Defaults to "secondary".
      */
     buttonStyle?: "secondary" | "compact";
-    /**
-     * Optional prop to pass additional props to the button. Only data-* and aria-* will work.
-     */
-    [key: string]: unknown;
 }
 
 /**
@@ -572,62 +568,6 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
-type ButtonRef = Ref<ElementUnion> | null;
-/**
- * Pill-style HeroLink component with default and hover states
- */
-declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
-interface LinkElementProps {
-    /**
-     * URL to link to if `HeroButton` elementType is 'a'.
-     */
-    href?: string;
-    /**
-     * Target window for the `HeroButton` href URL.
-     */
-    target?: string;
-    /**
-     * Relationship between the Button href URL and the current page. See
-     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
-     */
-    rel?: string;
-}
-interface HeroButtonElementProps {
-    /**
-     * Default behavior of the Button element. If not provided, 'submit' will
-     * be inferred. Type 'reset' deliberately excluded.
-     */
-    type?: "button" | "submit";
-    /**
-     * Refers to the id of a form so it can be submitted if the button exists outside of it.
-     */
-    form?: string;
-}
-interface HeroLinkProps extends HeroButtonElementProps, LinkElementProps {
-    /**
-     * Label for `HeroLink`
-     */
-    label?: string;
-    /**
-     * Optional click handler for the `HeroLink`.
-     */
-    onClick?: () => void;
-    /**
-     * Optional property to provide component Ref
-     */
-    ref?: ButtonRef;
-    /**
-     * Text to override `label` with additional, more precise information
-     * specifically for screen reader users.
-     */
-    ariaLabel?: string;
-    /**
-     * HTML ID for the `HeroLink`
-     */
-    id?: string;
-}
-
 declare const ActionTile: React$1.FC<ActionTileProps>;
 interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
@@ -650,11 +590,32 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
 
 declare const LinkTile: React$1.FC<LinkTileProps>;
 interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Display text for the tile */
     text?: string;
+    /** URL the tile navigates to. Renders as an anchor tag when provided */
     href?: string;
+    /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
 }
 
+declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
+interface InlineLinkGroupProps {
+    /** Optional overline label displayed above the link group */
+    label?: string;
+    /** Array of link items to display */
+    links: InlineLinkGroupItem[];
+}
+interface InlineLinkGroupItem {
+    /** Display text for the link */
+    label: string;
+    /** URL the link navigates to */
+    href: string;
+    /** Optional click handler for the link */
+    onClick?: () => void;
+    /** Optional accessible label for screen readers */
+    ariaLabel?: string;
+}
+
 /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
 declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
 interface ThumbnailSignpostProps {
@@ -688,5 +649,5 @@ interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
     thumbnailList: ThumbnailSignpostProps[];
 }
 
-export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
-export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };

package/lib/index.mjs

@@ -22,6 +22,7 @@ import { TypographyCard } from '@arc-ui/components/TypographyCard';
 import { Box } from '@arc-ui/components/Box';
 import { Rule } from '@arc-ui/components/Rule';
 import { Align } from '@arc-ui/components/Align';
+import { Hidden } from '@arc-ui/components/Hidden';
 import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
 import { Tag } from '@arc-ui/components/Tag';
 import { Toast, ToastNotification } from '@arc-ui/components/Toast';
@@ -443,14 +444,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, { size: "40" }),
-        downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
-            React.createElement(Download, __assign({}, props)),
-            " ",
+        downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i) },
+            React.createElement(Download, __assign({}, downloadProps)),
             i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); })));
 };
 
@@ -2741,12 +2741,12 @@ var FeaturePost = function (_a) {
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
                     React.createElement(VerticalSpace, { size: "40" }),
                     React.createElement(MediaContent, { image: image, video: video }))),
-                React.createElement(VerticalSpace, { size: "40" }),
+                React.createElement(VerticalSpace, { size: "24" }),
                 typeof content === "string" ? (React.createElement(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, { size: "24" }),
-                        React.createElement(Author, { name: footer.author.name, title: footer.author.title, avatar: footer.author.avatar }))),
+                        React.createElement(VerticalSpace, { size: "40" }),
+                        React.createElement(Author, __assign({}, footer.author)))),
                     React.createElement(VerticalSpace, { size: "40" }),
                     React.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
@@ -2779,9 +2779,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, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
         React.createElement(VerticalSpace, { size: "16" }),
@@ -2793,11 +2793,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 = 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)));
     })));
 };
 
@@ -2808,11 +2808,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("(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, { size: "24" }),
             React.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
@@ -2876,7 +2876,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 = useId();
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
@@ -2908,7 +2908,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, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
             React.createElement(VerticalSpace, { size: "12" }))),
@@ -2932,15 +2932,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("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
-    return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }),
+    return (React.createElement(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,
@@ -2953,7 +2953,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
@@ -2965,12 +2965,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 = useId();
-    return (React.createElement(Columns, null,
+    return (React.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
         React.createElement(ColumnsCol, { spanM: 9 },
-            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
-            React.createElement(VerticalSpace, { size: "16" })),
+            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
         React.createElement(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;
@@ -2983,18 +2982,21 @@ var Statistics = function (_a) {
                         React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
                             React.createElement(Align, { vertical: "center" },
                                 React.createElement("div", { className: styles$9.statWrapper },
-                                    React.createElement(Heading, { color: "brand", size: "xxl" }, stat)))),
+                                    React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
+                                    React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
+                                        React.createElement(VerticalSpace, { size: "12" }))))),
                         React.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
-                            React.createElement(Text, null, copy),
-                            link && (React.createElement(React.Fragment, null,
-                                React.createElement(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, { size: "12" }),
-                                React.createElement(Text, { size: "xs" },
-                                    React.createElement("span", { className: styles$9.mutedText }, source)))),
-                            sourceUrl && (React.createElement(Text, { size: "xs" },
-                                React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl)))))));
+                            React.createElement(Align, { vertical: "center" },
+                                React.createElement(Text, null, copy),
+                                link && (React.createElement(React.Fragment, null,
+                                    React.createElement(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, { size: "12" }),
+                                    React.createElement(Text, { size: "xs" },
+                                        React.createElement("span", { className: styles$9.mutedText }, source)))),
+                                sourceUrl && (React.createElement(Text, { size: "xs" },
+                                    React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl))))))));
             })))));
 };
 
@@ -3002,8 +3004,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)) },
@@ -3018,7 +3020,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 = useId();
     var _c = useState(false), showToast = _c[0], setShowToast = _c[1];
     var url = location.href;
@@ -3065,7 +3067,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)) },
@@ -3189,67 +3191,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, { size: 20, icon: icon })),
         React.createElement("div", { className: styles$5.text },
             React.createElement(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, { 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, { 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, 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: 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: 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: 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: 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, { 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, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
+                React.createElement(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"};
@@ -3292,5 +3284,5 @@ var PromoListingThumbnailSignpost = function (_a) {
             React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
 };
 
-export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
 //# sourceMappingURL=index.mjs.map