@arc-ui/community-components 3.0.1 → 3.1.0

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-DzI6hGjj.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-B6Bolkcx.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-BCJIm1Gq.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');
@@ -18,9 +18,9 @@ var styles = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_li
 
 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)),

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-BN_lZk6L.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';
@@ -16,9 +16,9 @@ var styles = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_li
 
 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)),

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-DzI6hGjj.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');
 
@@ -2235,11 +2235,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,7 +2250,7 @@ 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 }))),

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-B6Bolkcx.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';
 
@@ -2233,11 +2233,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,7 +2248,7 @@ 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 }))),

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;

package/lib/HeroLink/HeroLink.mjs

@@ -0,0 +1,33 @@
+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 { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
+import { Icon } from '@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 = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
+    var HeroLinkClasses = classNames(styles.heroLink, (_b = {},
+        _b[styles["heroLink--emptyLabel"]] = !label,
+        _b));
+    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
+    if (href) {
+        return (React.createElement("a", __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, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
+    }
+    return (React.createElement("button", __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, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
+};
+
+export { HeroLink };

package/lib/HeroLink/styles.css

@@ -0,0 +1 @@
+.HeroLink-module_heroLink__WUqWB{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 16px 24px;border:2px solid #e5e5e5;border-radius:32px;background:transparent;color:#5514b4;text-decoration:none;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:all 0.2s ease;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.HeroLink-module_heroLink__WUqWB:hover{border-color:#3f187f;color:#3f187f}.HeroLink-module_heroLink-inner__RE5i8{display:flex;align-items:center;gap:4px}.HeroLink-module_heroLink-label__93HPY{white-space:nowrap}.HeroLink-module_heroLink-icon__l7o4U{display:flex;align-items:center;justify-content:center}.HeroLink-module_heroLink--emptyLabel__XY2sa{padding:16px}

package/lib/Highlights/Highlights.cjs

@@ -4,24 +4,17 @@ var React = require('react');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var VerticalSpace = require('@arc-ui/components/VerticalSpace');
-var SectionHeading = require('../_shared/cjs/SectionHeading-DepTV4JA.cjs');
+var BtIconArrowRightFill = require('../_shared/cjs/BtIconArrowRightFill-BVCZv7Lm.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-DeSFM0HV.cjs');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
 var Heading = require('@arc-ui/components/Heading');
 var Icon = require('@arc-ui/components/Icon');
 var Text = require('@arc-ui/components/Text');
 var Link = require('@arc-ui/components/Link');
 require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
-require('../_shared/cjs/filter-data-attrs-ajtUvDAC.cjs');
+require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Image');
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconArrowRightFill =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
-
 var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 
 var getListHeadingLevel = function (level) {
@@ -40,7 +33,7 @@ var HighlightItem = function (_a) {
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
         React.createElement(Text.Text, null, text),
         React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
-        link && (React.createElement(Link.Link, { href: link.url, id: link.url, onClick: link.onClick, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+        link && (React.createElement(Link.Link, { href: link.url, id: link.url, "aria-label": link.ariaLabel, onClick: link.onClick, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
 };
 
 var HighlightList = function (_a) {
@@ -59,17 +52,17 @@ var HighlightList = function (_a) {
  */
 var Highlights = function (_a) {
     var _b, _c, _d;
-    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
+    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
     var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
     return (React.createElement("div", null,
-        React.createElement(SectionHeading.SectionHeading, { isPadded: true, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(SectionHeading.SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
         React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
         cta && (React.createElement(React.Fragment, null,
             React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React.createElement(ButtonV2.ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
-                    ? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill)
+            React.createElement(ButtonV2.ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
+                    ? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill.BtIconArrowRightFill)
                     : undefined, iconActive: cta.buttonStyle === "compact"
-                    ? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
+                    ? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill.BtIconArrowRightFill)
                     : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
 };