@arc-ui/community-components 3.8.1 → 3.10.0

package/lib/HeaderBarNotification/HeaderBarNotification.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var NavigationHeader = require('@arc-ui/components/NavigationHeader');
+var Popover = require('@arc-ui/components/Popover');
+var Icon = require('@arc-ui/components/Icon');
+var Image = require('@arc-ui/components/Image');
+var Heading = require('@arc-ui/components/Heading');
+var Text = require('@arc-ui/components/Text');
+var Tooltip = require('@arc-ui/components/Tooltip');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = tslib_es6.__rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
+    var _c = React.useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    React.useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React.createElement(Popover.Popover, tslib_es6.__assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles.container },
+            React.createElement("div", { className: styles.content },
+                (image || icon) && (React.createElement("div", { className: styles.image },
+                    image && (React.createElement(Image.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
+                React.createElement("div", { className: styles.details },
+                    tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
+                    React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React.createElement("div", { className: styles.closeButtonContainer },
+                React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs.filterAttrs(props)),
+        React.createElement(NavigationHeader.NavigationHeaderAction, tslib_es6.__assign({ isAttention: true }, headerActionProps))));
+};
+
+exports.HeaderBarNotification = HeaderBarNotification;

package/lib/HeaderBarNotification/HeaderBarNotification.mjs

@@ -0,0 +1,55 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
+import React__default, { useState, useEffect } from 'react';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { NavigationHeaderAction } from '@arc-ui/components/NavigationHeader';
+import { Popover } from '@arc-ui/components/Popover';
+import { Icon } from '@arc-ui/components/Icon';
+import { Image } from '@arc-ui/components/Image';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+import { Tooltip } from '@arc-ui/components/Tooltip';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCrossAlt =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
+
+var styles = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
+
+var HeaderBarNotification = function (_a) {
+    var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
+    var _c = useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
+    var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
+    // Check to see if the notication has been hidden or not and show it if so
+    useEffect(function () {
+        if (typeof window !== "undefined" && !isPersistant) {
+            setShowNotification(!localStorage.getItem(localStorageId));
+        }
+    }, []);
+    // Handle the closure of the notification, store it in the session so we don't keep showing it.
+    var handleClosePopup = function () {
+        if (!isPersistant)
+            localStorage.setItem(localStorageId, "true");
+        setShowNotification(false);
+    };
+    return (React__default.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React__default.createElement("div", { className: styles.container },
+            React__default.createElement("div", { className: styles.content },
+                (image || icon) && (React__default.createElement("div", { className: styles.image },
+                    image && (React__default.createElement(Image, { src: image, alt: heading, fit: "cover", width: 55 })),
+                    icon && React__default.createElement(Icon, { icon: icon, size: 35 }))),
+                React__default.createElement("div", { className: styles.details },
+                    tagline && (React__default.createElement(Text, { size: "m", tone: "muted" }, tagline)),
+                    React__default.createElement(Heading, { size: "s", level: "3" }, heading),
+                    children)),
+            button && (React__default.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
+            React__default.createElement("div", { className: styles.closeButtonContainer },
+                React__default.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
+                    React__default.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
+        React__default.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
+};
+
+export { HeaderBarNotification };

package/lib/HeaderBarNotification/styles.css

@@ -0,0 +1 @@
+.HeaderBarNotification-module_container__18nau{display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border-radius:var(--sem-border-radius-m)}@media (--arc-custom-media-min-width-m-px){.HeaderBarNotification-module_container__18nau{flex-direction:row;align-items:center}}.HeaderBarNotification-module_content__SUo-l{display:flex;align-items:center;gap:16px;width:100%;min-width:55%;max-width:70vw;margin-right:24px}@media (--arc-custom-media-min-width-m-px){.HeaderBarNotification-module_content__SUo-l{width:400px;margin-right:16px}}.HeaderBarNotification-module_image__uV-nD{flex-shrink:0}.HeaderBarNotification-module_details__S5Rrx{display:flex;flex-direction:column;width:100%}.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:absolute;right:20px;top:20px;margin:0}@media (--arc-custom-media-min-width-m-px){.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:relative;right:0;top:0}}

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/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-B6sSN_JJ.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"};
 
@@ -66,23 +67,23 @@ var ProductNavigation = function (_a) {
             return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
                 React.createElement(InformationCard.InformationCard, tslib_es6.__assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-        React.createElement("div", { style: { display: "flex" } },
-            !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 })),
-            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 },
-                    React.createElement("p", null,
-                        "Total products listed ",
-                        displayList.length,
-                        ". Total products hidden",
-                        " ",
-                        productList.length - displayList.length,
-                        "."))))));
+        !hideButton &&
+            !(defaultExpanded && displayList.length === productList.length) && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+            React.createElement("div", { style: { display: "flex" } },
+                !hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
+                        ? "Show more"
+                        : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+                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 },
+                        React.createElement("p", null,
+                            "Total products listed ",
+                            displayList.length,
+                            ". Total products hidden ",
+                            productList.length - displayList.length,
+                            "."))))))));
 };
 
 exports.ProductNavigation = ProductNavigation;

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-CYN3fovv.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"};
 
@@ -64,23 +65,23 @@ var ProductNavigation = function (_a) {
             return (React__default.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
                 React__default.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React__default.createElement(VerticalSpace, { size: "40" }),
-        React__default.createElement("div", { style: { display: "flex" } },
-            !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 })),
-            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 },
-                    React__default.createElement("p", null,
-                        "Total products listed ",
-                        displayList.length,
-                        ". Total products hidden",
-                        " ",
-                        productList.length - displayList.length,
-                        "."))))));
+        !hideButton &&
+            !(defaultExpanded && displayList.length === productList.length) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(VerticalSpace, { size: "40" }),
+            React__default.createElement("div", { style: { display: "flex" } },
+                !hideLessButton && (React__default.createElement(ButtonV2, { label: displayList.length < productList.length
+                        ? "Show more"
+                        : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+                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 },
+                        React__default.createElement("p", null,
+                            "Total products listed ",
+                            displayList.length,
+                            ". Total products hidden ",
+                            productList.length - displayList.length,
+                            "."))))))));
 };
 
 export { ProductNavigation };

package/lib/PromoListing/PromoListing.cjs

@@ -3,11 +3,11 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
-var index_es = require('../_shared/cjs/index.es-B6sSN_JJ.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
 var Carousel = require('@arc-ui/components/Carousel');
 var Heading = require('@arc-ui/components/Heading');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var MediaCard = require('@arc-ui/components/MediaCard');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var ImpactCard = require('@arc-ui/components/ImpactCard');
@@ -18,8 +18,9 @@ var VerticalSpace = require('@arc-ui/components/VerticalSpace');
 var BtIconArrowRightFill = require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/Image');
+require('@arc-ui/components/Columns');
 
-var styles = {"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 = {"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"};
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
@@ -65,7 +66,7 @@ var PromoListing = function (_a) {
         button.label && (React.createElement(React.Fragment, null,
             React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill.BtIconArrowRightFill : undefined, size: "m" })),
             React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles.promolistingCarouselWrapper },
+        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles.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.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: index.classNames(styles.cardGrid, styles["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.cardWrapper }, getCard(card)))); })))));
 };

package/lib/PromoListing/PromoListing.mjs

@@ -1,11 +1,11 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default, { useId } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
-import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-CYN3fovv.mjs';
+import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DNGykRl2.mjs';
 import { Carousel } from '@arc-ui/components/Carousel';
 import { Heading } from '@arc-ui/components/Heading';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import { ImpactCard } from '@arc-ui/components/ImpactCard';
@@ -16,8 +16,9 @@ import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { B as BtIconArrowRightFill } from '../_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/Image';
+import '@arc-ui/components/Columns';
 
-var styles = {"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 = {"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"};
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
@@ -63,7 +64,7 @@ var PromoListing = function (_a) {
         button.label && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
             React__default.createElement(VerticalSpace, { size: "40" }))),
-        isCarousel && !isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: styles.promolistingCarouselWrapper },
+        isCarousel && !isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: styles.CarouselWrapper },
             React__default.createElement(Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React__default.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles.cardWrapperCarousel) }, getCard(card))); })))) : (React__default.createElement("ul", { className: classNames(styles.cardGrid, styles["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React__default.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
             React__default.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles.cardWrapper }, getCard(card)))); })))));
 };

package/lib/PromoListing/styles.css

@@ -1 +1 @@
-.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}.PromoListing-module_cardGrid__llf73{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-gap:16px;gap:16px;list-style:none;margin:0;padding:0}.PromoListing-module_cardWrapper__I4iwh{height:100%}.PromoListing-module_cardWrapper__I4iwh>*{height:100%}.PromoListing-module_cardWrapperCarousel__t-2qM{width:288px;height:100%;margin-right:16px}.PromoListing-module_cardWrapperCarousel__t-2qM>*{height:100%}@media (min-width:636px){.PromoListing-module_cardWrapperCarousel__t-2qM{margin-right:24px}.PromoListing-module_cardGrid__llf73{gap:24px}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(2,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.PromoListing-module_cardWrapperCarousel__t-2qM{width:348px}}@media (min-width:1024px){.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(3,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.PromoListing-module_cardGrid__llf73{gap:32px}}
+.PromoListing-module_PromoListing__6ensv{max-width:1280px}.PromoListing-module_CarouselWrapper__iYwWp{overflow:hidden;margin:0 calc(-1 * var(--arc-size-section-margin-16));padding:6px var(--arc-size-section-margin-16)}@media (min-width:636px){.PromoListing-module_CarouselWrapper__iYwWp{margin:0 calc(-1 * var(--arc-size-section-margin-24));padding:6px var(--arc-size-section-margin-24)}}.PromoListing-module_carouselSlide__AMTPF{height:100%;padding:6px}.PromoListing-module_cardGrid__llf73{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;grid-gap:16px;gap:16px;list-style:none;margin:0;padding:0}.PromoListing-module_cardWrapper__I4iwh{height:100%}.PromoListing-module_cardWrapper__I4iwh>*{height:100%}.PromoListing-module_cardWrapperCarousel__t-2qM{width:288px;height:100%;margin-right:16px}.PromoListing-module_cardWrapperCarousel__t-2qM>*{height:100%}@media (min-width:636px){.PromoListing-module_cardWrapperCarousel__t-2qM{margin-right:24px}.PromoListing-module_cardGrid__llf73{gap:24px}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(2,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.PromoListing-module_cardWrapperCarousel__t-2qM{width:348px}}@media (min-width:1024px){.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-3__y6jWS{grid-template-columns:repeat(3,1fr)}.PromoListing-module_cardGrid__llf73.PromoListing-module_columns-2__GRFxb{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.PromoListing-module_cardGrid__llf73{gap:32px}}

package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs

@@ -2,7 +2,7 @@
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
-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 ThumbnailSignpost = require('../_shared/cjs/ThumbnailSignpost-DymZmLlB.cjs');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
@@ -10,6 +10,7 @@ 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');
 require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
 require('@arc-ui/components/Surface');
 

package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default from 'react';
-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 { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-D6uye3mm.mjs';
 import '../_shared/esm/index-BSO2EFem.mjs';
@@ -8,6 +8,7 @@ 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';
 import '../_shared/esm/BtIconArrowRightFill-D0zKgk3B.mjs';
 import '@arc-ui/components/Surface';
 

package/lib/SectionHeading/SectionHeading.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 require('react');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
@@ -9,6 +9,7 @@ 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');
 
 
 

package/lib/SectionHeading/SectionHeading.mjs

@@ -1,4 +1,4 @@
-export { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+export { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import 'react';
 import '../_shared/esm/index-BSO2EFem.mjs';
@@ -7,3 +7,4 @@ 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';

package/lib/SectionHeading/styles.css

@@ -1 +1 @@
-.SectionHeading-module_section-header__iB07I{padding-bottom:40px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{display:flex;flex-direction:column;gap:16px}.SectionHeading-module_section-header--isCentered__pz0V9{text-align:center}@media (min-width:636px){.SectionHeading-module_section-header--padded__0FXP2{min-width:588px;width:auto}.SectionHeading-module_section-header--hasImage__Ka3T7{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.SectionHeading-module_section-header--padded__0FXP2{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.SectionHeading-module_section-header--padded__0FXP2{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.SectionHeading-module_section-header--padded__0FXP2{min-width:1216px;padding:0 312px 40px 0}}
+.SectionHeading-module_sectionHeading--hasImage__qaz6n{display:flex;flex-direction:column;gap:16px}.SectionHeading-module_sectionHeading--isCentered__i0fR8{text-align:center}@media (min-width:636px){.SectionHeading-module_sectionHeading--hasImage__qaz6n{align-items:center;flex-direction:row;gap:32px}}@media (min-width:768px){.SectionHeading-module_sectionHeading-content__ufB6w{padding-right:10px}}@media (min-width:1280px){.SectionHeading-module_sectionHeading-content__ufB6w{padding-right:0;padding-right:initial}}

package/lib/Statistics/Statistics.cjs

@@ -10,7 +10,7 @@ var Align = require('@arc-ui/components/Align');
 var Heading = require('@arc-ui/components/Heading');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
 var Hidden = require('@arc-ui/components/Hidden');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DtYzFetD.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
 require('@arc-ui/components/Image');
 

package/lib/Statistics/Statistics.mjs

@@ -8,7 +8,7 @@ import { Align } from '@arc-ui/components/Align';
 import { Heading } from '@arc-ui/components/Heading';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { Hidden } from '@arc-ui/components/Hidden';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-RLfs7ete.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import '../_shared/esm/index-BSO2EFem.mjs';
 import '@arc-ui/components/Image';
 

package/lib/Summary/Summary.cjs

@@ -2,7 +2,7 @@
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
-var index_es = require('../_shared/cjs/index.es-B6sSN_JJ.cjs');
+var index_es = require('../_shared/cjs/index.es-B73RVhhj.cjs');
 var Heading = require('@arc-ui/components/Heading');
 var Text = require('@arc-ui/components/Text');
 var Box = require('@arc-ui/components/Box');

package/lib/Summary/Summary.mjs

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default from 'react';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-CYN3fovv.mjs';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DNGykRl2.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { Box } from '@arc-ui/components/Box';

package/lib/_shared/cjs/SectionHeading-XCMdv8eZ.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var index = require('./index-B7Z7sgRq.cjs');
+var filterAttrs = require('./filter-attrs-BizjMsy0.cjs');
+var Text = require('@arc-ui/components/Text');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var Image = require('@arc-ui/components/Image');
+var Heading = require('@arc-ui/components/Heading');
+var Columns = require('@arc-ui/components/Columns');
+
+var styles = {"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 = tslib_es6.__rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel", "isCentered"]);
+    return (React.createElement(Columns.Columns, null,
+        React.createElement(Columns.ColumnsCol, { spanM: isPadded ? 9 : 12 },
+            React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {},
+                    _b[styles["sectionHeading--isCentered"]] = isCentered,
+                    _b)) }, filterAttrs.filterAttrs(props)),
+                React.createElement("div", { className: index.classNames((_c = {},
+                        _c[styles["sectionHeading--hasImage"]] = image,
+                        _c)) },
+                    image && React.createElement(Image.Image, tslib_es6.__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["sectionHeading-content"] },
+                    React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+                    React.createElement(Text.Text, { size: "l", elementType: "p" }, content))),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "40" })))));
+};
+
+exports.SectionHeading = SectionHeading;

package/lib/_shared/cjs/{index.es-B6sSN_JJ.cjs → index.es-B73RVhhj.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 13 May 2026 07:47:26 GMT
+ * Generated on Thu, 21 May 2026 15:46:02 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/esm/SectionHeading-lyXLUtdr.mjs

@@ -0,0 +1,32 @@
+import { _ as __rest, a as __assign } from './tslib.es6-BVXMhEem.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-BSO2EFem.mjs';
+import { f as filterAttrs } from './filter-attrs-DZ7RCEZm.mjs';
+import { Text } from '@arc-ui/components/Text';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { Image } from '@arc-ui/components/Image';
+import { Heading } from '@arc-ui/components/Heading';
+import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
+
+var styles = {"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__default.createElement(Columns, null,
+        React__default.createElement(ColumnsCol, { spanM: isPadded ? 9 : 12 },
+            React__default.createElement("div", __assign({ className: classNames((_b = {},
+                    _b[styles["sectionHeading--isCentered"]] = isCentered,
+                    _b)) }, filterAttrs(props)),
+                React__default.createElement("div", { className: classNames((_c = {},
+                        _c[styles["sectionHeading--hasImage"]] = image,
+                        _c)) },
+                    image && React__default.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })),
+                    React__default.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
+                content && (React__default.createElement("div", { className: styles["sectionHeading-content"] },
+                    React__default.createElement(VerticalSpace, { size: "24" }),
+                    React__default.createElement(Text, { size: "l", elementType: "p" }, content))),
+                React__default.createElement(VerticalSpace, { size: "40" })))));
+};
+
+export { SectionHeading as S };

package/lib/_shared/esm/{index.es-CYN3fovv.mjs → index.es-DNGykRl2.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 May 2026 07:47:26 GMT
+ * Generated on Thu, 21 May 2026 15:46:02 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";