@arc-ui/community-components 3.0.1 → 3.2.0

package/lib/Author/Author.mjs

@@ -1,7 +1,7 @@
-export { A as Author } from '../_shared/esm/Author-CydDYCma.mjs';
+export { A as Author } from '../_shared/esm/Author-HnYsFTPT.mjs';
 import '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
 import 'react';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
+import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Grid';
 import '@arc-ui/components/Avatar';
 import '@arc-ui/components/Heading';

package/lib/BannerWithTabs/BannerWithTabs.cjs

@@ -2,25 +2,25 @@
 
 var React = require('react');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DepTV4JA.cjs');
 var TabbedBanner = require('@arc-ui/components/TabbedBanner');
+var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
 require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
-require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
-require('@arc-ui/components/Heading');
+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');
 
 var styles = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
 
 var BannerWithTabs = function (_a) {
     var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: index.classNames((_b = {},
                 _b[styles.bannerWithTabsHeadingCentered] = alignTypography === "center",
                 _b)) },
-            React.createElement(SectionHeading.SectionHeading, { heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
+            React.createElement(SectionHeading.SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
         React.createElement(TabbedBanner.TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
 };
 

package/lib/BannerWithTabs/BannerWithTabs.mjs

@@ -1,24 +1,24 @@
 import React from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-BayinGP_.mjs';
 import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-CpDLCndw.mjs';
 import '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
-import '@arc-ui/components/Heading';
+import '../_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';
 
 var styles = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
 
 var BannerWithTabs = function (_a) {
     var _b;
-    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames((_b = {},
                 _b[styles.bannerWithTabsHeadingCentered] = alignTypography === "center",
                 _b)) },
-            React.createElement(SectionHeading, { heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
+            React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
         React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
 };
 

package/lib/CopyLead/CopyLead.cjs

@@ -2,8 +2,8 @@
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
-var index_es = require('../_shared/cjs/index.es-D11PdokQ.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.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,14 +13,14 @@ var Image$1 = require('@arc-ui/components/Image');
 var Icon = require('@arc-ui/components/Icon');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DepTV4JA.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
 
 var styles = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
 
 var MediaContent = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, children = _a.children;
     return (React.createElement("div", { className: styles.mediaContainer },
-        React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
         children && (React.createElement("div", { className: styles.content },
             React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
             React.createElement(Text.Text, { size: "l" }, children)))));
@@ -81,7 +81,7 @@ var VideoPlayer = React.lazy(function () {
     });
 });
 var MediaTemplate = function (_a) {
-    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    var button = _a.button, id = _a.id, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, isHeadingWordWrap = _a.isHeadingWordWrap, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
     var _c = React.useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsXl, ")"));
@@ -92,7 +92,7 @@ var MediaTemplate = function (_a) {
     return (React.createElement("div", null,
         !isMinWidthArcBreakpointXl && (React.createElement(Columns.Columns, null,
             React.createElement(Columns.ColumnsCol, { span: 12, spanM: 9 },
-                React.createElement(MediaContent, { heading: heading, headingLevel: headingLevel }, content)))),
+                React.createElement(MediaContent, { heading: heading, headingLevel: headingLevel, id: id, isHeadingWordWrap: isHeadingWordWrap }, content)))),
         React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React.createElement(Column, null,
                 isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: heading }, content)),
@@ -105,13 +105,13 @@ var MediaTemplate = function (_a) {
 };
 
 var ContentTemplate = function (_a) {
-    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
+    var button = _a.button, id = _a.id, heading = _a.heading, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, listItems = _a.listItems, content = _a.content;
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
     var listHeadingLevel = getListHeadingLevel(headingLevel);
     return (React.createElement(Container, { type: "content", alignment: "top" },
         React.createElement(Column, null,
-            React.createElement(SectionHeading.SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
+            React.createElement(SectionHeading.SectionHeading, { id: id, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
             button && isMinWidthArcBreakpointM && React.createElement(Button, tslib_es6.__assign({}, button))),
         React.createElement(Column, null,
             React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL, headingLevel: listHeadingLevel }),
@@ -122,12 +122,12 @@ var ContentTemplate = function (_a) {
  * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
  */
 var CopyLead = function (_a) {
-    var button = _a.button, heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["button", "heading", "headingLevel", "listItems", "video", "image", "content", "isReverseOrder"]);
+    var button = _a.button, heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["button", "heading", "id", "headingLevel", "listItems", "video", "image", "content", "isHeadingWordWrap", "isReverseOrder"]);
     if (video || image) {
-        return (React.createElement(MediaTemplate, tslib_es6.__assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs.filterDataAttrs(props))));
+        return (React.createElement(MediaTemplate, tslib_es6.__assign({ id: id, content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, button: button, isReverseOrder: isReverseOrder }, filterAttrs.filterAttrs(props))));
     }
     if (content) {
-        return (React.createElement(ContentTemplate, tslib_es6.__assign({ listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }, filterDataAttrs.filterDataAttrs(props))));
+        return (React.createElement(ContentTemplate, tslib_es6.__assign({ id: id, listItems: listItems, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, button: button, content: content }, filterAttrs.filterAttrs(props))));
     }
     return null;
 };

package/lib/CopyLead/CopyLead.mjs

@@ -1,7 +1,7 @@
 import { a as __rest, _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
 import React, { useState, useEffect, Suspense } from 'react';
-import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
-import { a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C4PyYMjI.mjs';
+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-Bfdys5__.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,14 +11,14 @@ 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-BfTCfPZ1.mjs';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-BayinGP_.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-CpDLCndw.mjs';
 
 var styles = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
 
 var MediaContent = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, children = _a.children;
     return (React.createElement("div", { className: styles.mediaContainer },
-        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
         children && (React.createElement("div", { className: styles.content },
             React.createElement(VerticalSpace, { size: "24" }),
             React.createElement(Text, { size: "l" }, children)))));
@@ -79,7 +79,7 @@ var VideoPlayer = React.lazy(function () {
     });
 });
 var MediaTemplate = function (_a) {
-    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    var button = _a.button, id = _a.id, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, isHeadingWordWrap = _a.isHeadingWordWrap, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
     var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
@@ -90,7 +90,7 @@ var MediaTemplate = function (_a) {
     return (React.createElement("div", null,
         !isMinWidthArcBreakpointXl && (React.createElement(Columns, null,
             React.createElement(ColumnsCol, { span: 12, spanM: 9 },
-                React.createElement(MediaContent, { heading: heading, headingLevel: headingLevel }, content)))),
+                React.createElement(MediaContent, { heading: heading, headingLevel: headingLevel, id: id, isHeadingWordWrap: isHeadingWordWrap }, content)))),
         React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React.createElement(Column, null,
                 isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: heading }, content)),
@@ -103,13 +103,13 @@ var MediaTemplate = function (_a) {
 };
 
 var ContentTemplate = function (_a) {
-    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
+    var button = _a.button, id = _a.id, heading = _a.heading, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, listItems = _a.listItems, content = _a.content;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
     var listHeadingLevel = getListHeadingLevel(headingLevel);
     return (React.createElement(Container, { type: "content", alignment: "top" },
         React.createElement(Column, null,
-            React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
+            React.createElement(SectionHeading, { id: id, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
             button && isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button))),
         React.createElement(Column, null,
             React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL, headingLevel: listHeadingLevel }),
@@ -120,12 +120,12 @@ var ContentTemplate = function (_a) {
  * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
  */
 var CopyLead = function (_a) {
-    var button = _a.button, heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c, props = __rest(_a, ["button", "heading", "headingLevel", "listItems", "video", "image", "content", "isReverseOrder"]);
+    var button = _a.button, heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c, props = __rest(_a, ["button", "heading", "id", "headingLevel", "listItems", "video", "image", "content", "isHeadingWordWrap", "isReverseOrder"]);
     if (video || image) {
-        return (React.createElement(MediaTemplate, __assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs(props))));
+        return (React.createElement(MediaTemplate, __assign({ id: id, content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, button: button, isReverseOrder: isReverseOrder }, filterAttrs(props))));
     }
     if (content) {
-        return (React.createElement(ContentTemplate, __assign({ listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }, filterDataAttrs(props))));
+        return (React.createElement(ContentTemplate, __assign({ id: id, listItems: listItems, heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, button: button, content: content }, filterAttrs(props))));
     }
     return null;
 };

package/lib/DownloadList/DownloadList.cjs

@@ -3,21 +3,21 @@
 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-DepTV4JA.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
 var Download = require('@arc-ui/components/Download');
 require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
-require('@arc-ui/components/Heading');
+require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Text');
 require('@arc-ui/components/Image');
+require('@arc-ui/components/Heading');
 
 var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
 
 var DownloadList = function (_a) {
-    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, downloads = _a.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;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles.headingContainer },
-            React.createElement(SectionHeading.SectionHeading, { heading: heading, headingLevel: headingLevel, content: content })),
+            React.createElement(SectionHeading.SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
         React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
         downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
             React.createElement(Download.Download, tslib_es6.__assign({}, props)),

package/lib/DownloadList/DownloadList.mjs

@@ -1,21 +1,21 @@
 import { _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
 import React from 'react';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-BayinGP_.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-CpDLCndw.mjs';
 import { Download } from '@arc-ui/components/Download';
 import '../_shared/esm/index-BfTCfPZ1.mjs';
-import '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
-import '@arc-ui/components/Heading';
+import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/Image';
+import '@arc-ui/components/Heading';
 
 var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
 
 var DownloadList = function (_a) {
-    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, downloads = _a.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;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles.headingContainer },
-            React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content })),
+            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
         React.createElement(VerticalSpace, { size: "40" }),
         downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
             React.createElement(Download, __assign({}, props)),

package/lib/FAQs/FAQs.cjs

@@ -3,9 +3,9 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
-var Accordion = require('../_shared/cjs/Accordion-D5fpUJzm.cjs');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DepTV4JA.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var Accordion = require('../_shared/cjs/Accordion-DfNGOjTm.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
 var Link = require('@arc-ui/components/Link');
 var Heading = require('@arc-ui/components/Heading');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
@@ -16,11 +16,20 @@ require('@arc-ui/components/Disclosure');
 
 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"};
 
+var scrollToSectionFocusFirstElement = function (item) {
+    var _a, _b, _c, _d, _e;
+    if (!item.id)
+        return;
+    (_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    // preventScroll avoids interfering with the scroll animation.
+    (_e = (_d = document
+        .getElementById((_c = (_b = item.disclosureList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id)) === null || _d === void 0 ? void 0 : _d.querySelector("summary")) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
+};
 var FAQs = function (_a) {
     var _b;
-    var heading = _a.heading, content = _a.content, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, _e = _a.type, type = _e === void 0 ? "list" : _e, _f = _a.linkListHeading, linkListHeading = _f === void 0 ? "Skip to section" : _f, accordionData = _a.accordionData, props = tslib_es6.__rest(_a, ["heading", "content", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
-    return (React.createElement("div", tslib_es6.__assign({ className: styles.FAQs }, filterDataAttrs.filterDataAttrs(props)),
-        React.createElement(SectionHeading.SectionHeading, { heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
+    var heading = _a.heading, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, type = _a.type, _e = _a.linkListHeading, linkListHeading = _e === void 0 ? "Skip to section" : _e, accordionData = _a.accordionData, props = tslib_es6.__rest(_a, ["heading", "isHeadingWordWrap", "content", "id", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: styles.FAQs }, filterAttrs.filterAttrs(props)),
+        React.createElement(SectionHeading.SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
         type === "listWithLinks" && (React.createElement("div", { className: styles.linkListSection },
             React.createElement("div", { className: styles.linkListTitle },
                 React.createElement(Heading.Heading, { size: "xs" }, linkListHeading)),
@@ -32,12 +41,7 @@ var FAQs = function (_a) {
                 return (React.createElement("li", { className: styles.linkListItem, key: item.heading },
                     React.createElement(Link.Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
                             e.preventDefault();
-                            if (item.id) {
-                                var element = document.getElementById(item.id);
-                                if (element) {
-                                    element.scrollIntoView({ behavior: "smooth" });
-                                }
-                            }
+                            scrollToSectionFocusFirstElement(item);
                         } }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
             })))),
         type !== "tabs" && accordionData && (React.createElement("ul", { className: styles.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles.accordionListItem, key: item.id },

package/lib/FAQs/FAQs.mjs

@@ -1,9 +1,9 @@
 import { a as __rest, _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
 import React from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
-import { A as Accordion } from '../_shared/esm/Accordion-LLwNdzax.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-BayinGP_.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { A as Accordion } from '../_shared/esm/Accordion-cd1oYvBv.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-CpDLCndw.mjs';
 import { Link } from '@arc-ui/components/Link';
 import { Heading } from '@arc-ui/components/Heading';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -14,11 +14,20 @@ import '@arc-ui/components/Disclosure';
 
 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"};
 
+var scrollToSectionFocusFirstElement = function (item) {
+    var _a, _b, _c, _d, _e;
+    if (!item.id)
+        return;
+    (_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    // preventScroll avoids interfering with the scroll animation.
+    (_e = (_d = document
+        .getElementById((_c = (_b = item.disclosureList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id)) === null || _d === void 0 ? void 0 : _d.querySelector("summary")) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
+};
 var FAQs = function (_a) {
     var _b;
-    var heading = _a.heading, content = _a.content, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, _e = _a.type, type = _e === void 0 ? "list" : _e, _f = _a.linkListHeading, linkListHeading = _f === void 0 ? "Skip to section" : _f, accordionData = _a.accordionData, props = __rest(_a, ["heading", "content", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
-    return (React.createElement("div", __assign({ className: styles.FAQs }, filterDataAttrs(props)),
-        React.createElement(SectionHeading, { heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
+    var heading = _a.heading, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, type = _a.type, _e = _a.linkListHeading, linkListHeading = _e === void 0 ? "Skip to section" : _e, accordionData = _a.accordionData, props = __rest(_a, ["heading", "isHeadingWordWrap", "content", "id", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
+    return (React.createElement("div", __assign({ className: styles.FAQs }, filterAttrs(props)),
+        React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
         type === "listWithLinks" && (React.createElement("div", { className: styles.linkListSection },
             React.createElement("div", { className: styles.linkListTitle },
                 React.createElement(Heading, { size: "xs" }, linkListHeading)),
@@ -30,12 +39,7 @@ var FAQs = function (_a) {
                 return (React.createElement("li", { className: styles.linkListItem, key: item.heading },
                     React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
                             e.preventDefault();
-                            if (item.id) {
-                                var element = document.getElementById(item.id);
-                                if (element) {
-                                    element.scrollIntoView({ behavior: "smooth" });
-                                }
-                            }
+                            scrollToSectionFocusFirstElement(item);
                         } }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
             })))),
         type !== "tabs" && accordionData && (React.createElement("ul", { className: styles.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles.accordionListItem, key: item.id },

package/lib/FeaturePost/FeaturePost.cjs

@@ -3,8 +3,8 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
-var index_es = require('../_shared/cjs/index.es-D11PdokQ.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.cjs');
 var AppButton = require('@arc-ui/components/AppButton');
 var Grid = require('@arc-ui/components/Grid');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
@@ -12,7 +12,7 @@ var Heading = require('@arc-ui/components/Heading');
 var Text = require('@arc-ui/components/Text');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
-var Author = require('../_shared/cjs/Author-X47pv31V.cjs');
+var Author = require('../_shared/cjs/Author-D4dKNQem.cjs');
 var Image$1 = require('@arc-ui/components/Image');
 require('@arc-ui/components/Avatar');
 
@@ -2204,10 +2204,17 @@ function cleanEscapedString(input) {
 var styles = {"labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
 
 var Image = function (_a) {
-    var sources = _a.sources, props = tslib_es6.__rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles.imgWrapper },
-        React.createElement(Image$1.Image, tslib_es6.__assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return React.createElement("source", tslib_es6.__assign({ key: source.srcSet }, source)); }))));
+    var sources = _a.sources, title = _a.title, description = _a.description, props = tslib_es6.__rest(_a, ["sources", "title", "description"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.imgWrapper },
+            React.createElement(Image$1.Image, tslib_es6.__assign({ fadeOnLoad: true }, props), sources &&
+                sources.map(function (source) { return React.createElement("source", tslib_es6.__assign({ key: source.srcSet }, source)); }))),
+        title && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React.createElement(Heading.Heading, { level: "3", size: "s" }, title),
+            description && (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                React.createElement(Text.Text, { size: "m" }, description)))))));
 };
 
 var VideoPlayer = React.lazy(function () {
@@ -2235,11 +2242,11 @@ var MediaContent = function (_a) {
  * */
 var FeaturePost = function (_a) {
     var _b;
-    var heading = _a.heading, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "label", "image", "content", "footer", "video", "isReverseOrder"]);
+    var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     return (React.createElement("div", tslib_es6.__assign({ "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
             _b[styles.featurePostReversed] = isReverseOrder,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
+            _b)) }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: styles.col },
             React.createElement("div", { className: styles.contentContainer },
                 label && (React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
@@ -2250,12 +2257,12 @@ var FeaturePost = function (_a) {
                             React.createElement("div", { className: styles.labelDate },
                                 React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
                     React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
-                React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+                React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
                     React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
                     React.createElement(MediaContent, { image: image, video: video }))),
                 React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                React.createElement(Text.Text, { size: "l" }, content),
+                typeof content === "string" ? (React.createElement(Text.Text, { size: "l" }, content)) : (content),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
                     footer.author && (React.createElement(React.Fragment, null,
                         React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),

package/lib/FeaturePost/FeaturePost.mjs

@@ -1,8 +1,8 @@
 import { a as __rest, _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
 import React, { useState, useEffect, Suspense } from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.mjs';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C4PyYMjI.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Bfdys5__.mjs';
 import { AppButton } from '@arc-ui/components/AppButton';
 import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
@@ -10,7 +10,7 @@ import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { A as Author } from '../_shared/esm/Author-CydDYCma.mjs';
+import { A as Author } from '../_shared/esm/Author-HnYsFTPT.mjs';
 import { Image as Image$1 } from '@arc-ui/components/Image';
 import '@arc-ui/components/Avatar';
 
@@ -2202,10 +2202,17 @@ function cleanEscapedString(input) {
 var styles = {"labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
 
 var Image = function (_a) {
-    var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles.imgWrapper },
-        React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
+    var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.imgWrapper },
+            React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
+                sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
+        title && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(Heading, { level: "3", size: "s" }, title),
+            description && (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace, { size: "16" }),
+                React.createElement(Text, { size: "m" }, description)))))));
 };
 
 var VideoPlayer = React.lazy(function () {
@@ -2233,11 +2240,11 @@ var MediaContent = function (_a) {
  * */
 var FeaturePost = function (_a) {
     var _b;
-    var heading = _a.heading, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "headingLevel", "label", "image", "content", "footer", "video", "isReverseOrder"]);
+    var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles.featurePost, (_b = {},
             _b[styles.featurePostReversed] = isReverseOrder,
-            _b)) }, filterDataAttrs(props)),
+            _b)) }, filterAttrs(props)),
         React.createElement("div", { className: styles.col },
             React.createElement("div", { className: styles.contentContainer },
                 label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
@@ -2248,12 +2255,12 @@ var FeaturePost = function (_a) {
                             React.createElement("div", { className: styles.labelDate },
                                 React.createElement(Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
                     React.createElement(VerticalSpace, { size: "24" }))),
-                React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+                React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
                     React.createElement(VerticalSpace, { size: "40" }),
                     React.createElement(MediaContent, { image: image, video: video }))),
                 React.createElement(VerticalSpace, { size: "40" }),
-                React.createElement(Text, { size: "l" }, content),
+                typeof content === "string" ? (React.createElement(Text, { size: "l" }, content)) : (content),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
                     footer.author && (React.createElement(React.Fragment, null,
                         React.createElement(VerticalSpace, { size: "24" }),

package/lib/HeroLink/HeroLink.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
+var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
+var Icon = require('@arc-ui/components/Icon');
+
+var styles = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
+
+/**
+ * Pill-style HeroLink component with default and hover states
+ */
+var HeroLink = function (_a) {
+    var _b;
+    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = tslib_es6.__rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
+    var HeroLinkClasses = index.classNames(styles.heroLink, (_b = {},
+        _b[styles["heroLink--emptyLabel"]] = !label,
+        _b));
+    var commonProps = tslib_es6.__assign({ id: id, onClick: onClick, ref: ref }, props);
+    if (href) {
+        return (React.createElement("a", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
+            React.createElement("span", { className: styles["heroLink-inner"] },
+                label && React.createElement("span", { className: styles["heroLink-label"] }, label),
+                React.createElement("span", { className: styles["heroLink-icon"] },
+                    React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
+    }
+    return (React.createElement("button", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
+        React.createElement("span", { className: styles["heroLink-inner"] },
+            label && React.createElement("span", { className: styles["heroLink-label"] }, label),
+            React.createElement("span", { className: styles["heroLink-icon"] },
+                React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
+};
+
+exports.HeroLink = HeroLink;