@arc-ui/community-components 3.8.0 → 3.9.0

package/lib/index.cjs

@@ -7,11 +7,11 @@ var VerticalSpace = require('@arc-ui/components/VerticalSpace');
 var Image$2 = require('@arc-ui/components/Image');
 var Disclosure = require('@arc-ui/components/Disclosure');
 var Carousel = require('@arc-ui/components/Carousel');
+var Columns = require('@arc-ui/components/Columns');
 var MediaCard = require('@arc-ui/components/MediaCard');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 var Grid = require('@arc-ui/components/Grid');
 var Avatar = require('@arc-ui/components/Avatar');
-var Columns = require('@arc-ui/components/Columns');
 var Icon = require('@arc-ui/components/Icon');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var Download = require('@arc-ui/components/Download');
@@ -29,10 +29,10 @@ var TabbedBanner = require('@arc-ui/components/TabbedBanner');
 var Tag = require('@arc-ui/components/Tag');
 var Toast = require('@arc-ui/components/Toast');
 var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
+var Surface = require('@arc-ui/components/Surface');
 var Visible = require('@arc-ui/components/Visible');
 var Spacing = require('@arc-ui/components/Spacing');
 var ReactPlayer = require('react-player');
-var Surface = require('@arc-ui/components/Surface');
 var ContentSwitcher = require('@arc-ui/components/ContentSwitcher');
 var ContentSwitcherDropdown = require('@arc-ui/components/ContentSwitcherDropdown');
 
@@ -942,28 +942,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.Image, __assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
-        content && (React.createElement(React.Fragment, null,
-            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
+    return (React.createElement(Columns.Columns, null,
+        React.createElement(Columns.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.Image, __assign({}, image, { width: 68, fit: "cover" })),
+                    React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
+                content && (React.createElement("div", { className: styles$r["sectionHeading-content"] },
+                    React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+                    React.createElement(Text.Text, { size: "l", elementType: "p" }, content))),
+                React.createElement(VerticalSpace.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";
@@ -1176,17 +1178,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.VerticalSpace, { size: "40" }),
-        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" }))); })));
+        React.createElement(Columns.Columns, null,
+            React.createElement(Columns.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(Columns.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.Download, __assign({}, downloadProps)),
+                    i !== downloads.length - 1 && React.createElement(VerticalSpace.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"};
@@ -3557,7 +3561,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
@@ -3683,7 +3687,7 @@ var PromoListing = function (_a) {
         button.label && (React.createElement(React.Fragment, null,
             React.createElement(ButtonV2.ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
             React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$j.promolistingCarouselWrapper },
+        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$j.CarouselWrapper },
             React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(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)))); })))));
 };
@@ -3897,6 +3901,7 @@ var ProductNavigation = function (_a) {
     var _g = React.useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
     var _h = React.useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
     var _j = React.useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
+    var _k = React.useState(false), displaySkipButton = _k[0], setDisplaySkipButton = _k[1];
     var cardRef = React.useRef(null);
     React.useEffect(function () {
         if (defaultExpanded) {
@@ -3908,6 +3913,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)
@@ -3941,8 +3947,8 @@ var ProductNavigation = function (_a) {
             !hideButton && !hideLessButton && (React.createElement(ButtonV2.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.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
             React.createElement(VisuallyHidden.VisuallyHidden, null,
                 React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
@@ -3979,10 +3985,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, { 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, { 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"};
@@ -4000,10 +4006,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.Heading, { size: "xxs", fontStyle: "overline" }, label))),
+            React.createElement(Heading.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.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
@@ -4012,14 +4018,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 = React.useContext(Surface.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.Image, __assign({}, img)))),
@@ -4028,7 +4037,7 @@ var ThumbnailSignpost = function (_a) {
             React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
             text,
             buttonLabel && onClick && (React.createElement(React.Fragment, null,
-                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                 React.createElement("div", { className: styles$8.thumbnailButton },
                     React.createElement("span", { className: styles$8.buttonIcon, role: "img", style: {
                             height: 24,
@@ -4188,7 +4197,8 @@ var BusinessSegmentSwitcher = function (_a) {
                             React.createElement("div", { className: styles$2.cardCol },
                                 content.card3 && React.createElement(InformationCard.InformationCard, __assign({}, content.card3)),
                                 React.createElement("div", null,
-                                    React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url }))))));
+                                    React.createElement(TypographyCard.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.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {