@arc-ui/community-components 3.8.0 → 3.9.0

package/.turbo/turbo-build.log

@@ -1,26 +1,26 @@
 
-> @arc-ui/community-components@3.8.0 build /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.9.0 build /builds/enterprise/frontend/arc-community/packages/components
 > rimraf lib dist && rollup -c && generate-subpath-css && pnpm run build:clean
 
-Browserslist: browsers data (caniuse-lite) is 8 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 9 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
 src/index.ts → lib/index.cjs, lib/index.mjs...
-created lib/index.cjs, lib/index.mjs in 6.3s
+created lib/index.cjs, lib/index.mjs in 5.1s
 
 ./lib/types/index.d.ts → lib/index.d.mts, lib/index.d.cts...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
-@arc-ui/components/Heading (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
-@arc-ui/components/VideoPlayer (imported by "lib/types/components/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.d.ts")
 @arc-ui/components/MediaCard (imported by "lib/types/components/ArticleCarousel/ArticleCarousel.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
+@arc-ui/components/Heading (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
+@arc-ui/components/VideoPlayer (imported by "lib/types/components/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.d.ts")
+@arc-ui/components/Download (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
 @arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.d.ts")
+@arc-ui/components/ButtonV2 (imported by "lib/types/components/Highlights/Highlights.d.ts" and "lib/types/components/PromoListing/PromoListing.d.ts")
 @arc-ui/components/ImpactCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts")
 @arc-ui/components/InformationCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts" and "lib/types/components/ProductNavigation/types/product-list.d.ts")
 @arc-ui/components/TypographyCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
-@arc-ui/components/ButtonV2 (imported by "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/Highlights/Highlights.d.ts")
-@arc-ui/components/Download (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
 @arc-ui/components/TemplateBanner (imported by "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts")
 @arc-ui/components/Image (imported by "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/ThumbnailSignpost/ThumbnailSignpost.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/CopyLead/types/copy-lead-image.d.ts" and "lib/types/components/FeaturePost/types/feature-post-image.d.ts")
 @arc-ui/components/VerticalSpace (imported by "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts")
@@ -30,17 +30,17 @@ Browserslist: browsers data (caniuse-lite) is 8 months old. Please run:
 @arc-ui/components/AppButton (imported by "lib/types/components/FeaturePost/types/feature-post-app-button-footer.d.ts")
 react-player/types (imported by "lib/types/internal/VideoCardPlayer/VideoCardPlayer.d.ts" and "lib/types/internal/VideoCardPlayer/types/player-props.d.ts")
 @arc-ui/components/Visible (imported by "lib/types/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.d.ts")
-created lib/index.d.mts, lib/index.d.cts in 175ms
+created lib/index.d.mts, lib/index.d.cts in 130ms
 
 ./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 8.1s
+created lib in 5.9s
 
 ./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 6.4s
-Browserslist: browsers data (caniuse-lite) is 8 months old. Please run:
+created lib in 5.1s
+Browserslist: browsers data (caniuse-lite) is 9 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
-> @arc-ui/community-components@3.8.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.9.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
 > rimraf ./lib/types ./lib/styles.js ./lib/index.js ./lib/index.js.map
 

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @arc-ui/community-components
 
+## 3.9.0
+
+### Minor Changes
+
+- 151e415: feat: added optional heading property to card4 in business segment switcher
+
+### Patch Changes
+
+- 239daa1: fix: fixed promo listing overflowing in carousel mode
+- bf9dfcb: Update arc packages to 13.10.0, Update download list to use new version, refactor SectionHeading to use Columns for isPadded logic
+
+## 3.8.1
+
+### Patch Changes
+
+- b85f7b6: Hide a11y "move to first new button" button when hideButton is true also hide before first "show more" click
+- e1f83bf: added outline color in darkpathway
+- 55b4c25: fixed accessibility issue
+- 9e5d967: Fix spacing in ThumbnailSignpost
+- e1f83bf: fix: improve ThumbnailSignpost button visibility on dark surfaces
+- a583147: chore: updated arc version
+
 ## 3.8.0
 
 ### Minor Changes

package/lib/ActionTile/ActionTile.cjs

@@ -27,10 +27,10 @@ var ActionTile = function (_a) {
         React.createElement("div", { className: styles["action-tile-content"] },
             displayIcon && (React.createElement("div", { className: styles["action-tile-icon"] },
                 React.createElement(Icon.Icon, { icon: displayIcon, size: 48 }))),
-            React.createElement("h3", { className: styles["action-tile-heading"] }, heading)),
+            React.createElement("span", { className: styles["action-tile-heading"] }, heading)),
         isActive && (React.createElement("div", { className: styles["action-tile-tick"] },
             React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
-    return (React.createElement("div", tslib_es6.__assign({ className: tileClasses, onClick: onClick }, filterAttrs.filterAttrs(props)), content));
+    return (React.createElement("button", tslib_es6.__assign({ type: "button", className: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs.filterAttrs(props)), content));
 };
 
 exports.ActionTile = ActionTile;

package/lib/ActionTile/ActionTile.mjs

@@ -25,10 +25,10 @@ var ActionTile = function (_a) {
         React__default.createElement("div", { className: styles["action-tile-content"] },
             displayIcon && (React__default.createElement("div", { className: styles["action-tile-icon"] },
                 React__default.createElement(Icon, { icon: displayIcon, size: 48 }))),
-            React__default.createElement("h3", { className: styles["action-tile-heading"] }, heading)),
+            React__default.createElement("span", { className: styles["action-tile-heading"] }, heading)),
         isActive && (React__default.createElement("div", { className: styles["action-tile-tick"] },
             React__default.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
-    return (React__default.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
+    return (React__default.createElement("button", __assign({ type: "button", className: tileClasses, onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
 };
 
 export { ActionTile };

package/lib/ArticleCarousel/ArticleCarousel.cjs

@@ -4,15 +4,16 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var Carousel = require('@arc-ui/components/Carousel');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
-var index_es = require('../_shared/cjs/index.es-Dg_lyAyh.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
 var MediaCard = require('@arc-ui/components/MediaCard');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/VerticalSpace');
 require('@arc-ui/components/Image');
 require('@arc-ui/components/Heading');
+require('@arc-ui/components/Columns');
 
 /**
  * Checks if `value` is the

package/lib/ArticleCarousel/ArticleCarousel.mjs

@@ -2,15 +2,16 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 import React__default, { useId, useState, useEffect } from 'react';
 import { a as commonjsGlobal, g as getDefaultExportFromCjs, c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { Carousel } from '@arc-ui/components/Carousel';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { d as ArcSizeBreakpointsXs, A as ArcSizeBreakpointsS, b as ArcSizeBreakpointsM, a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, e as ArcSizeBreakpointsXxl } from '../_shared/esm/index.es-DtCgfyRV.mjs';
+import { d as ArcSizeBreakpointsXs, A as ArcSizeBreakpointsS, b as ArcSizeBreakpointsM, a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, e as ArcSizeBreakpointsXxl } from '../_shared/esm/index.es-DNGykRl2.mjs';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/VerticalSpace';
 import '@arc-ui/components/Image';
 import '@arc-ui/components/Heading';
+import '@arc-ui/components/Columns';
 
 /**
  * Checks if `value` is the

package/lib/BannerWithTabs/BannerWithTabs.cjs

@@ -4,12 +4,13 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var TabbedBanner = require('@arc-ui/components/TabbedBanner');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/VerticalSpace');
 require('@arc-ui/components/Image');
 require('@arc-ui/components/Heading');
+require('@arc-ui/components/Columns');
 
 var styles = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
 

package/lib/BannerWithTabs/BannerWithTabs.mjs

@@ -2,12 +2,13 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 import React__default from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/VerticalSpace';
 import '@arc-ui/components/Image';
 import '@arc-ui/components/Heading';
+import '@arc-ui/components/Columns';
 
 var styles = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
 

package/lib/BusinessSegmentSwitcher/BusinessSegmentSwitcher.cjs

@@ -68,7 +68,8 @@ var BusinessSegmentSwitcher = function (_a) {
                             React.createElement("div", { className: styles.cardCol },
                                 content.card3 && React.createElement(InformationCard.InformationCard, tslib_es6.__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.businessSegmentSwitcherMobile },
             React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {

package/lib/BusinessSegmentSwitcher/BusinessSegmentSwitcher.mjs

@@ -66,7 +66,8 @@ var BusinessSegmentSwitcher = function (_a) {
                             React__default.createElement("div", { className: styles.cardCol },
                                 content.card3 && React__default.createElement(InformationCard, __assign({}, content.card3)),
                                 React__default.createElement("div", null,
-                                    React__default.createElement(TypographyCard, { heading: "All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url }))))));
+                                    React__default.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__default.createElement("div", { className: styles.businessSegmentSwitcherMobile },
             React__default.createElement(ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {

package/lib/CopyLead/CopyLead.cjs

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
-var index_es = require('../_shared/cjs/index.es-Dg_lyAyh.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
 var Columns = require('@arc-ui/components/Columns');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 var Heading = require('@arc-ui/components/Heading');
@@ -13,7 +13,7 @@ var Image$1 = require('@arc-ui/components/Image');
 var Icon = require('@arc-ui/components/Icon');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 
 var MultiLineText = function (_a) {
     var text = _a.text, textProps = tslib_es6.__rest(_a, ["text"]);

package/lib/CopyLead/CopyLead.mjs

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default, { useState, useEffect, Suspense } from 'react';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DtCgfyRV.mjs';
+import { a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DNGykRl2.mjs';
 import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import { Heading } from '@arc-ui/components/Heading';
@@ -11,7 +11,7 @@ import { Image as Image$1 } from '@arc-ui/components/Image';
 import { Icon } from '@arc-ui/components/Icon';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 
 var MultiLineText = function (_a) {
     var text = _a.text, textProps = __rest(_a, ["text"]);

package/lib/DownloadList/DownloadList.cjs

@@ -3,25 +3,28 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var Download = require('@arc-ui/components/Download');
+var Columns = require('@arc-ui/components/Columns');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/Image');
 require('@arc-ui/components/Heading');
 
-var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+var styles = {"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 = tslib_es6.__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 = tslib_es6.__rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads", "alignment"]);
     return (React.createElement("div", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { className: styles.headingContainer },
-            React.createElement(SectionHeading.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, tslib_es6.__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.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["downloadList-".concat(alignment)] }, downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i, "-").concat(downloadProps.name) },
+                    React.createElement(Download.Download, tslib_es6.__assign({}, downloadProps)),
+                    i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); }))))));
 };
 
 exports.DownloadList = DownloadList;

package/lib/DownloadList/DownloadList.mjs

@@ -1,25 +1,28 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default from 'react';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { Download } from '@arc-ui/components/Download';
+import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '../_shared/esm/index-BSO2EFem.mjs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/Image';
 import '@arc-ui/components/Heading';
 
-var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+var styles = {"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__default.createElement("div", __assign({}, filterAttrs(props)),
-        React__default.createElement("div", { className: styles.headingContainer },
-            React__default.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
-        React__default.createElement(VerticalSpace, { size: "40" }),
-        downloads.map(function (downloadProps, i) { return (React__default.createElement(React__default.Fragment, { key: "download-".concat(i) },
-            React__default.createElement(Download, __assign({}, downloadProps)),
-            i !== downloads.length - 1 && React__default.createElement(VerticalSpace, { size: "16" }))); })));
+        React__default.createElement(Columns, null,
+            React__default.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 9, spanM: 9, span: 12 },
+                " ",
+                React__default.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
+            React__default.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
+                React__default.createElement("div", { className: styles["downloadList-".concat(alignment)] }, downloads.map(function (downloadProps, i) { return (React__default.createElement(React__default.Fragment, { key: "download-".concat(i, "-").concat(downloadProps.name) },
+                    React__default.createElement(Download, __assign({}, downloadProps)),
+                    i !== downloads.length - 1 && React__default.createElement(VerticalSpace, { size: "16" }))); }))))));
 };
 
 export { DownloadList };

package/lib/DownloadList/styles.css

@@ -1 +1 @@
-@media (min-width:768px){.DownloadList-module_headingContainer__PNio8{max-width:75%}}
+.DownloadList-module_downloadList-below__21q6i{margin-top:calc(-1 * var(--arc-columns-gap))}.DownloadList-module_downloadList-right__mHYHL{margin-top:calc(-1 * var(--arc-columns-gap))}@media (min-width:1024px){.DownloadList-module_downloadList-right__mHYHL{margin-top:0;margin-top:initial}}

package/lib/FAQs/FAQs.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var Accordion = require('../_shared/cjs/Accordion-B-BRosyE.cjs');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var Link = require('@arc-ui/components/Link');
 var Heading = require('@arc-ui/components/Heading');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
@@ -13,6 +13,7 @@ var Tabs = require('@arc-ui/components/Tabs');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/Image');
 require('@arc-ui/components/Disclosure');
+require('@arc-ui/components/Columns');
 
 var styles = {"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"};
 

package/lib/FAQs/FAQs.mjs

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import { A as Accordion } from '../_shared/esm/Accordion-CKN8n0ky.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { Link } from '@arc-ui/components/Link';
 import { Heading } from '@arc-ui/components/Heading';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -11,6 +11,7 @@ import { Tabs, TabsList, TabsItem, TabsContent } from '@arc-ui/components/Tabs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/Image';
 import '@arc-ui/components/Disclosure';
+import '@arc-ui/components/Columns';
 
 var styles = {"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"};
 

package/lib/FeaturePost/FeaturePost.cjs

@@ -4,7 +4,7 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
-var index_es = require('../_shared/cjs/index.es-Dg_lyAyh.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
 var AppButton = require('@arc-ui/components/AppButton');
 var Grid = require('@arc-ui/components/Grid');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');

package/lib/FeaturePost/FeaturePost.mjs

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 import React__default, { useState, useEffect, Suspense } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DtCgfyRV.mjs';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DNGykRl2.mjs';
 import { AppButton } from '@arc-ui/components/AppButton';
 import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';

package/lib/Highlights/Highlights.cjs

@@ -6,7 +6,7 @@ var useMediaQuery = require('@arc-ui/components/use-media-query');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
 var BtIconArrowRightFill = require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var Heading = require('@arc-ui/components/Heading');
 var Icon = require('@arc-ui/components/Icon');
@@ -14,6 +14,7 @@ var Text = require('@arc-ui/components/Text');
 var Link = require('@arc-ui/components/Link');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Image');
+require('@arc-ui/components/Columns');
 
 var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 

package/lib/Highlights/Highlights.mjs

@@ -4,7 +4,7 @@ import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { B as BtIconArrowRightFill } from '../_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Icon } from '@arc-ui/components/Icon';
@@ -12,6 +12,7 @@ import { Text } from '@arc-ui/components/Text';
 import { Link } from '@arc-ui/components/Link';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Image';
+import '@arc-ui/components/Columns';
 
 var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 

package/lib/InlineLinkGroup/InlineLinkGroup.cjs

@@ -11,10 +11,10 @@ var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var styles = {"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 = tslib_es6.__rest(_a, ["label", "links"]);
+    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = tslib_es6.__rest(_a, ["label", "headingLevel", "links"]);
     return (React.createElement("div", tslib_es6.__assign({ className: styles["quick-help"] }, filterAttrs.filterAttrs(props)),
         label && (React.createElement("div", { className: styles["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["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
             React.createElement("li", { className: styles["quick-help-item"] },
                 React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),

package/lib/InlineLinkGroup/InlineLinkGroup.mjs

@@ -9,10 +9,10 @@ import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 var styles = {"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__default.createElement("div", __assign({ className: styles["quick-help"] }, filterAttrs(props)),
         label && (React__default.createElement("div", { className: styles["quick-help-label"] },
-            React__default.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label))),
+            React__default.createElement(Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
         React__default.createElement("ul", { className: styles["quick-help-container"] }, links.map(function (link, index) { return (React__default.createElement(React__default.Fragment, { key: index },
             React__default.createElement("li", { className: styles["quick-help-item"] },
                 React__default.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),

package/lib/ProductNavigation/ProductNavigation.cjs

@@ -5,8 +5,8 @@ var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
-var index_es = require('../_shared/cjs/index.es-Dg_lyAyh.cjs');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var InformationCard = require('@arc-ui/components/InformationCard');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
@@ -14,6 +14,7 @@ var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/Image');
 require('@arc-ui/components/Heading');
+require('@arc-ui/components/Columns');
 
 var styles = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
 
@@ -25,6 +26,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) {
@@ -36,6 +38,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)
@@ -69,8 +72,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: index.classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+            hideButton ||
+                (displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: index.classNames(styles["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 },

package/lib/ProductNavigation/ProductNavigation.mjs

@@ -3,8 +3,8 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-DtCgfyRV.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-DNGykRl2.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 import { InformationCard } from '@arc-ui/components/InformationCard';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -12,6 +12,7 @@ import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/Image';
 import '@arc-ui/components/Heading';
+import '@arc-ui/components/Columns';
 
 var styles = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
 
@@ -23,6 +24,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) {
@@ -34,6 +36,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)
@@ -67,8 +70,8 @@ var ProductNavigation = function (_a) {
             !hideButton && !hideLessButton && (React__default.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__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+            hideButton ||
+                (displaySkipButton && displayList.length > cardsToDisplay && (React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
                     React__default.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
             React__default.createElement(VisuallyHidden, null,
                 React__default.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },