@arc-ui/community-components 3.8.0 → 3.9.0

package/lib/index.d.cts

@@ -203,7 +203,14 @@ interface CopyLeadProps {
 
 declare const DownloadList: React$1.FC<DownloadListProps>;
 interface DownloadListProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * Set the list of `Download` components.
+     */
     downloads: DownloadProps[];
+    /**
+     * Align the `Download` list below or to the right of the `SectionHeading`.
+     */
+    alignment?: "below" | "right";
 }
 
 declare const FAQs: React$1.FC<FAQsProps>;
@@ -561,7 +568,7 @@ interface ProductNavigationProps extends Omit<SectionHeadingProps, "isPadded"> {
      */
     productList: ListProps[];
     /**
-     * Include "show more" or "show less" buttons.
+     * Hide "show more" or "show less" button controls.
      */
     hideButton?: boolean;
     /**
@@ -642,6 +649,8 @@ declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
 interface InlineLinkGroupProps {
     /** Optional overline label displayed above the link group */
     label?: string;
+    /** Heading level for the label, defaults to "2" for proper heading hierarchy */
+    headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
 }
@@ -762,16 +771,19 @@ interface BentoMediaCard extends Omit<MediaCardProps, "isContained" | "buttonIco
  * Content structure for the bento grid layout within each tab.
  * - card1 & card2: Can be either information or media cards
  * - card3: Optional information card
- * - card4: Typography card with label and url
+ * - card4: Typography card with label, heading and url
  */
 type BentoGridContent = {
     card1: BentoInformationCard | BentoMediaCard;
     card2: BentoInformationCard | BentoMediaCard;
     card3?: BentoInformationCard;
     card4: {
-        url: string;
-        label?: string;
+        url: TypographyCardProps["url"];
+        label?: TypographyCardProps["label"];
+        /** Overrides the default heading if provided and is not falsey. */
+        heading?: string;
         text?: TypographyCardProps["text"];
+        onClick?: TypographyCardProps["onClick"];
     };
 };
 

package/lib/index.d.mts

@@ -203,7 +203,14 @@ interface CopyLeadProps {
 
 declare const DownloadList: React$1.FC<DownloadListProps>;
 interface DownloadListProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * Set the list of `Download` components.
+     */
     downloads: DownloadProps[];
+    /**
+     * Align the `Download` list below or to the right of the `SectionHeading`.
+     */
+    alignment?: "below" | "right";
 }
 
 declare const FAQs: React$1.FC<FAQsProps>;
@@ -561,7 +568,7 @@ interface ProductNavigationProps extends Omit<SectionHeadingProps, "isPadded"> {
      */
     productList: ListProps[];
     /**
-     * Include "show more" or "show less" buttons.
+     * Hide "show more" or "show less" button controls.
      */
     hideButton?: boolean;
     /**
@@ -642,6 +649,8 @@ declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
 interface InlineLinkGroupProps {
     /** Optional overline label displayed above the link group */
     label?: string;
+    /** Heading level for the label, defaults to "2" for proper heading hierarchy */
+    headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
 }
@@ -762,16 +771,19 @@ interface BentoMediaCard extends Omit<MediaCardProps, "isContained" | "buttonIco
  * Content structure for the bento grid layout within each tab.
  * - card1 & card2: Can be either information or media cards
  * - card3: Optional information card
- * - card4: Typography card with label and url
+ * - card4: Typography card with label, heading and url
  */
 type BentoGridContent = {
     card1: BentoInformationCard | BentoMediaCard;
     card2: BentoInformationCard | BentoMediaCard;
     card3?: BentoInformationCard;
     card4: {
-        url: string;
-        label?: string;
+        url: TypographyCardProps["url"];
+        label?: TypographyCardProps["label"];
+        /** Overrides the default heading if provided and is not falsey. */
+        heading?: string;
         text?: TypographyCardProps["text"];
+        onClick?: TypographyCardProps["onClick"];
     };
 };
 

package/lib/index.mjs

@@ -1,15 +1,15 @@
-import React, { useId, useState, useEffect, Suspense, useRef } from 'react';
+import React, { useId, useState, useEffect, Suspense, useRef, useContext } from 'react';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { Image as Image$2 } from '@arc-ui/components/Image';
 import { Disclosure } from '@arc-ui/components/Disclosure';
 import { Carousel } from '@arc-ui/components/Carousel';
+import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
 import { Avatar } from '@arc-ui/components/Avatar';
-import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { Icon } from '@arc-ui/components/Icon';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 import { Download } from '@arc-ui/components/Download';
@@ -27,10 +27,10 @@ import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
 import { Tag } from '@arc-ui/components/Tag';
 import { Toast, ToastNotification } from '@arc-ui/components/Toast';
 import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
+import { SurfaceContext, Surface } from '@arc-ui/components/Surface';
 import { Visible } from '@arc-ui/components/Visible';
 import { Spacing } from '@arc-ui/components/Spacing';
 import ReactPlayer from 'react-player';
-import { Surface } from '@arc-ui/components/Surface';
 import { ContentSwitcher, ContentSwitcherList, ContentSwitcherTab, ContentSwitcherContent } from '@arc-ui/components/ContentSwitcher';
 import { ContentSwitcherDropdown, ContentSwitcherDropdownContent } from '@arc-ui/components/ContentSwitcherDropdown';
 
@@ -940,28 +940,30 @@ function requireDebounce () {
 var debounceExports = requireDebounce();
 var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
 
-var styles$r = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--isCentered":"SectionHeading-module_section-header--isCentered__pz0V9","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
+var styles$r = {"sectionHeading--hasImage":"SectionHeading-module_sectionHeading--hasImage__qaz6n","sectionHeading--isCentered":"SectionHeading-module_sectionHeading--isCentered__i0fR8","sectionHeading-content":"SectionHeading-module_sectionHeading-content__ufB6w"};
 
 var SectionHeading = function (_a) {
     var _b, _c;
     var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.isCentered, isCentered = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel", "isCentered"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b[styles$r["section-header"]] = true,
-            _b[styles$r["section-header--padded"]] = isPadded,
-            _b[styles$r["section-header--isCentered"]] = isCentered,
-            _b)) }, filterAttrs(props)),
-        React.createElement("div", { className: classNames((_c = {}, _c[styles$r["section-header--hasImage"]] = image, _c)) },
-            image && (React.createElement("div", null,
-                React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
-        content && (React.createElement(React.Fragment, null,
-            React.createElement(VerticalSpace, { size: "24" }),
-            React.createElement(Text, { size: "l", elementType: "p" }, content)))));
+    return (React.createElement(Columns, null,
+        React.createElement(ColumnsCol, { spanM: isPadded ? 9 : 12 },
+            React.createElement("div", __assign({ className: classNames((_b = {},
+                    _b[styles$r["sectionHeading--isCentered"]] = isCentered,
+                    _b)) }, filterAttrs(props)),
+                React.createElement("div", { className: classNames((_c = {},
+                        _c[styles$r["sectionHeading--hasImage"]] = image,
+                        _c)) },
+                    image && React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })),
+                    React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
+                content && (React.createElement("div", { className: styles$r["sectionHeading-content"] },
+                    React.createElement(VerticalSpace, { size: "24" }),
+                    React.createElement(Text, { size: "l", elementType: "p" }, content))),
+                React.createElement(VerticalSpace, { size: "40" })))));
 };
 
 /**
  * Do not edit directly
- * Generated on Tue, 21 Apr 2026 10:23:52 GMT
+ * Generated on Thu, 21 May 2026 15:46:02 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -1174,17 +1176,19 @@ var CopyLead = function (_a) {
     return null;
 };
 
-var styles$n = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+var styles$n = {"downloadList-below":"DownloadList-module_downloadList-below__21q6i","downloadList-right":"DownloadList-module_downloadList-right__mHYHL"};
 
 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, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads"]);
+    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, _c = _a.alignment, alignment = _c === void 0 ? "below" : _c, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads", "alignment"]);
     return (React.createElement("div", __assign({}, filterAttrs(props)),
-        React.createElement("div", { className: styles$n.headingContainer },
-            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
-        React.createElement(VerticalSpace, { size: "40" }),
-        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" }))); })));
+        React.createElement(Columns, null,
+            React.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 9, spanM: 9, span: 12 },
+                " ",
+                React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
+            React.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
+                React.createElement("div", { className: styles$n["downloadList-".concat(alignment)] }, downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i, "-").concat(downloadProps.name) },
+                    React.createElement(Download, __assign({}, downloadProps)),
+                    i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); }))))));
 };
 
 var styles$m = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_linkListSection__RdQkU","linkListTitle":"FAQs-module_linkListTitle__RVni3","linkList":"FAQs-module_linkList__dPyXj","linkListItem":"FAQs-module_linkListItem__S83CL","linkList--padded":"FAQs-module_linkList--padded__8Paxc"};
@@ -3555,7 +3559,7 @@ var Highlights = function (_a) {
                     : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
 };
 
-var styles$j = {"PromoListing":"PromoListing-module_PromoListing__6ensv","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid":"PromoListing-module_cardGrid__llf73","cardWrapper":"PromoListing-module_cardWrapper__I4iwh","cardWrapperCarousel":"PromoListing-module_cardWrapperCarousel__t-2qM","columns-3":"PromoListing-module_columns-3__y6jWS","columns-2":"PromoListing-module_columns-2__GRFxb"};
+var styles$j = {"PromoListing":"PromoListing-module_PromoListing__6ensv","CarouselWrapper":"PromoListing-module_CarouselWrapper__iYwWp","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid":"PromoListing-module_cardGrid__llf73","cardWrapper":"PromoListing-module_cardWrapper__I4iwh","cardWrapperCarousel":"PromoListing-module_cardWrapperCarousel__t-2qM","columns-3":"PromoListing-module_columns-3__y6jWS","columns-2":"PromoListing-module_columns-2__GRFxb"};
 
 /**
  * Do not edit directly
@@ -3681,7 +3685,7 @@ var PromoListing = function (_a) {
         button.label && (React.createElement(React.Fragment, null,
             React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
             React.createElement(VerticalSpace, { size: "40" }))),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$j.promolistingCarouselWrapper },
+        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$j.CarouselWrapper },
             React.createElement(Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$j.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$j.cardGrid, styles$j["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
             React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$j.cardWrapper }, getCard(card)))); })))));
 };
@@ -3895,6 +3899,7 @@ var ProductNavigation = function (_a) {
     var _g = useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
     var _h = useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
     var _j = useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
+    var _k = useState(false), displaySkipButton = _k[0], setDisplaySkipButton = _k[1];
     var cardRef = useRef(null);
     useEffect(function () {
         if (defaultExpanded) {
@@ -3906,6 +3911,7 @@ var ProductNavigation = function (_a) {
         (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var clickController = function () {
+        setDisplaySkipButton(true);
         // show more / current list length + increment
         if (displayList.length < productList.length) {
             if (onClickMore)
@@ -3939,8 +3945,8 @@ var ProductNavigation = function (_a) {
             !hideButton && !hideLessButton && (React.createElement(ButtonV2, { label: displayList.length < productList.length
                     ? "Show more"
                     : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
-                React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
+            hideButton ||
+                (displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$d["productNavigation-skipLink"]), tabIndex: -1 },
                     React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
             React.createElement(VisuallyHidden, null,
                 React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
@@ -3977,10 +3983,10 @@ var ActionTile = function (_a) {
         React.createElement("div", { className: styles$b["action-tile-content"] },
             displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
                 React.createElement(Icon, { icon: displayIcon, size: 48 }))),
-            React.createElement("h3", { className: styles$b["action-tile-heading"] }, heading)),
+            React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
             React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
-    return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
+    return (React.createElement("button", __assign({ type: "button", className: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
 var styles$a = {"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"};
@@ -3998,10 +4004,10 @@ var LinkTile = function (_a) {
 var styles$9 = {"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"]);
+    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
     return (React.createElement("div", __assign({ className: styles$9["quick-help"] }, filterAttrs(props)),
         label && (React.createElement("div", { className: styles$9["quick-help-label"] },
-            React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label))),
+            React.createElement(Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
         React.createElement("ul", { className: styles$9["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
             React.createElement("li", { className: styles$9["quick-help-item"] },
                 React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
@@ -4010,14 +4016,17 @@ var InlineLinkGroup = function (_a) {
                 React.createElement("div", { className: styles$9["quick-help-separator-line"] }))))); }))));
 };
 
-var styles$8 = {"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"};
+var styles$8 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","onDarkSurface":"ThumbnailSignpost-module_onDarkSurface__F2jUk","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"};
 
 /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
 var ThumbnailSignpost = function (_a) {
     var _b;
     var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
+    var surface = useContext(SurfaceContext).surface;
+    var isDarkSurface = surface === "dark";
     return (React.createElement("div", __assign({ className: classNames(styles$8.thumbnailSignpost, (_b = {},
             _b[styles$8.isLink] = onClick,
+            _b[styles$8.onDarkSurface] = isDarkSurface,
             _b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
         img && (React.createElement("div", { className: styles$8.image },
             React.createElement(Image$2, __assign({}, img)))),
@@ -4026,7 +4035,7 @@ var ThumbnailSignpost = function (_a) {
             React.createElement(VerticalSpace, { size: "8" }),
             text,
             buttonLabel && onClick && (React.createElement(React.Fragment, null,
-                React.createElement(VerticalSpace, { size: "8" }),
+                React.createElement(VerticalSpace, { size: "32" }),
                 React.createElement("div", { className: styles$8.thumbnailButton },
                     React.createElement("span", { className: styles$8.buttonIcon, role: "img", style: {
                             height: 24,
@@ -4186,7 +4195,8 @@ var BusinessSegmentSwitcher = function (_a) {
                             React.createElement("div", { className: styles$2.cardCol },
                                 content.card3 && React.createElement(InformationCard, __assign({}, content.card3)),
                                 React.createElement("div", null,
-                                    React.createElement(TypographyCard, { heading: "All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url }))))));
+                                    React.createElement(TypographyCard, { heading: content.card4.heading ||
+                                            "All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
                 }))),
         React.createElement("div", { className: styles$2.businessSegmentSwitcherMobile },
             React.createElement(ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {