@arc-ui/community-components 12.0.0-beta.5 → 12.0.0-beta7

package/dist/Accordion/Accordion.cjs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
+var React = require('react');
+var index_es = require('../_shared/cjs/index.es-a9e01247.js');
+var Heading = require('@arc-ui/components/dist/Heading');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+var Disclosure = require('@arc-ui/components/dist/Disclosure');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"header":"Accordion-module_header__WaTdJ","headerContent":"Accordion-module_headerContent__pjddt"};
+
+/**
+ * Use `Accordion` 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 AccordionHeader = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content;
+    return (React__default["default"].createElement("div", { "data-testid": "Accordion-header", className: styles.header },
+        React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement("p", { className: styles.headerContent }, content)))));
+};
+
+var AccordionDisclosureList = function (_a) {
+    var disclosureList = _a.disclosureList;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, disclosureList.map(function (_a, index) {
+        var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel;
+        return (React__default["default"].createElement(Disclosure.Disclosure, { key: index, summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, children));
+    })));
+};
+
+/**
+ * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
+ */
+var Accordion = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, disclosureList = _a.disclosureList, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "content", "disclosureList"]);
+    return (React__default["default"].createElement("div", tslib_es6.__assign({}, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(AccordionHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React__default["default"].createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
+};
+
+exports.Accordion = Accordion;

package/dist/Accordion/Accordion.esm.js

@@ -0,0 +1,40 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-2bdcff75.js';
+import React from 'react';
+import { f as filterDataAttrs } from '../_shared/esm/index.es-33860780.js';
+import { Heading } from '@arc-ui/components/dist/Heading';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
+import { Disclosure } from '@arc-ui/components/dist/Disclosure';
+
+var styles = {"header":"Accordion-module_header__WaTdJ","headerContent":"Accordion-module_headerContent__pjddt"};
+
+/**
+ * Use `Accordion` 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 AccordionHeader = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content;
+    return (React.createElement("div", { "data-testid": "Accordion-header", className: styles.header },
+        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement("p", { className: styles.headerContent }, content)))));
+};
+
+var AccordionDisclosureList = function (_a) {
+    var disclosureList = _a.disclosureList;
+    return (React.createElement(React.Fragment, null, disclosureList.map(function (_a, index) {
+        var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel;
+        return (React.createElement(Disclosure, { key: index, summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, children));
+    })));
+};
+
+/**
+ * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
+ */
+var Accordion = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "content", "disclosureList"]);
+    return (React.createElement("div", __assign({}, filterDataAttrs(props)),
+        React.createElement(AccordionHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
+};
+
+export { Accordion };

package/dist/Accordion/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/accordion",
+  "types": "../types/components/Accordion/index.d.ts",
+  "main": "./Accordion.cjs.js",
+  "module": "./Accordion.esm.js",
+  "private": true
+}

package/dist/Accordion/styles.css

@@ -0,0 +1 @@
+.Accordion-module_header__WaTdJ{display:flex;flex-direction:column;padding-bottom:40px;width:auto}.Accordion-module_headerContent__pjddt{color:#2a2a2a;font-size:20px;line-height:28px;margin:0}@media (min-width:636px){.Accordion-module_header__WaTdJ{min-width:588px;width:auto}}@media (min-width:768px){.Accordion-module_header__WaTdJ{min-width:720px;padding:0 186px 40px 0}}@media (min-width:1024px){.Accordion-module_header__WaTdJ{min-width:960px;padding:0 246px 40px 0}}@media (min-width:1280px){.Accordion-module_header__WaTdJ{min-width:1216px;padding:0 312px 40px 0}}

package/dist/Author/Author.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Author = require('../_shared/cjs/Author-cd166353.js');
+require('../_shared/cjs/tslib.es6-ec509cfc.js');
+require('react');
+require('../_shared/cjs/index.es-a9e01247.js');
+require('@arc-ui/components/dist/Grid');
+require('@arc-ui/components/dist/Avatar');
+require('@arc-ui/components/dist/Heading');
+require('@arc-ui/components/dist/Text');
+
+
+
+exports.Author = Author.Author;

package/dist/Author/Author.esm.js

@@ -0,0 +1,8 @@
+export { A as Author } from '../_shared/esm/Author-9c7cb4f2.js';
+import '../_shared/esm/tslib.es6-2bdcff75.js';
+import 'react';
+import '../_shared/esm/index.es-33860780.js';
+import '@arc-ui/components/dist/Grid';
+import '@arc-ui/components/dist/Avatar';
+import '@arc-ui/components/dist/Heading';
+import '@arc-ui/components/dist/Text';

package/dist/Author/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/author",
+  "types": "../types/components/Author/index.d.ts",
+  "main": "./Author.cjs.js",
+  "module": "./Author.esm.js",
+  "private": true
+}

package/dist/Author/styles.css

@@ -0,0 +1 @@
+.Author-module_authorContent__TBY7b{padding-left:var(--sem-space-padding-70)}

package/dist/CopyLead/CopyLead.cjs.js

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
 var React = require('react');
-var index = require('../_shared/cjs/index-0524fde2.js');
+var index_es$1 = require('../_shared/cjs/index.es-a9e01247.js');
+var index_es = require('../_shared/cjs/index.es-875b2756.js');
 var Columns = require('@arc-ui/components/dist/Columns');
 var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
 var Heading = require('@arc-ui/components/dist/Heading');
@@ -11,6 +13,7 @@ var Text = require('@arc-ui/components/dist/Text');
 var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
 var Image$1 = require('@arc-ui/components/dist/Image');
 var Icon = require('@arc-ui/components/dist/Icon');
+var index = require('../_shared/cjs/index-9947ac13.js');
 var ButtonV2 = require('@arc-ui/components/dist/ButtonV2');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -35,39 +38,35 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles$5 = {"container":"MediaContent-module_container__zJvhV","content":"MediaContent-module_content__3VTWr"};
+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, children = _a.children;
-    return (React__default["default"].createElement("div", { className: styles$5.container },
-        React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
-        children && (React__default["default"].createElement("div", { className: styles$5.content },
+    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    return (React__default["default"].createElement("div", { className: styles.mediaContainer },
+        React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        children && (React__default["default"].createElement("div", { className: styles.content },
             React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
             React__default["default"].createElement(Text.Text, { size: "l" }, children)))));
 };
 
-var styles$4 = {"imgWrapper":"Image-module_imgWrapper__8IEXh"};
-
 var Image = function (_a) {
-    var sources = _a.sources, props = index.__rest(_a, ["sources"]);
-    return (React__default["default"].createElement("div", { className: styles$4.imgWrapper },
-        React__default["default"].createElement(Image$1.Image, index.__assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React__default["default"].createElement(Image$1.Image.Source, index.__assign({ key: source.srcSet }, source))); }))));
+    var sources = _a.sources, props = tslib_es6.__rest(_a, ["sources"]);
+    return (React__default["default"].createElement("div", { className: styles.imgWrapper },
+        React__default["default"].createElement(Image$1.Image, tslib_es6.__assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React__default["default"].createElement(Image$1.Image.Source, tslib_es6.__assign({ key: source.srcSet }, source))); }))));
 };
 
-var styles$3 = {"list":"IconList-module_list__J9ei6","listItem":"IconList-module_listItem__gNx5-","listItemCentered":"IconList-module_listItemCentered__0HGoP","listItemIconContainer":"IconList-module_listItemIconContainer__4SYoW","listItemTextContainer":"IconList-module_listItemTextContainer__PfFZS"};
-
 var IconList = function (_a) {
     var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React__default["default"].createElement("ul", { className: styles$3.list }, listItems.map(function (_a) {
+    return (React__default["default"].createElement("ul", { className: styles.list }, listItems.map(function (_a) {
         var _b;
         var icon = _a.icon, heading = _a.heading, text = _a.text;
-        return (React__default["default"].createElement("li", { key: heading, className: index.classNames(styles$3.listItem, (_b = {},
-                _b[styles$3.listItemCentered] = !text,
+        return (React__default["default"].createElement("li", { key: heading, className: index.classNames(styles.listItem, (_b = {},
+                _b[styles.listItemCentered] = !text,
                 _b)) },
-            React__default["default"].createElement("div", { className: styles$3.listItemIconContainer },
+            React__default["default"].createElement("div", { className: styles.listItemIconContainer },
                 React__default["default"].createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React__default["default"].createElement("div", { className: styles$3.listItemTextContainer },
+            React__default["default"].createElement("div", { className: styles.listItemTextContainer },
                 React__default["default"].createElement(Heading.Heading, { level: "3", size: "s" }, heading),
                 text && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
@@ -75,23 +74,17 @@ var IconList = function (_a) {
     })));
 };
 
-var styles$2 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
-
-var Button = function (props) { return (React__default["default"].createElement("div", { className: styles$2.buttonContainer },
-    React__default["default"].createElement(ButtonV2.ButtonV2, index.__assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
-
-var styles$1 = {"container":"Container-module_container__JZgGy","container--content":"Container-module_container--content__ScwIb","container--media":"Container-module_container--media__KIzMa","container--reverse":"Container-module_container--reverse__-B82g","container--align-center":"Container-module_container--align-center__qneG2","container--align-top":"Container-module_container--align-top__TE6Ah"};
+var Button = function (props) { return (React__default["default"].createElement("div", { className: styles.buttonContainer },
+    React__default["default"].createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
 
 var Container = function (_a) {
     var _b;
     var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
-    return (React__default["default"].createElement("div", { "data-testid": "copy-lead-container", className: index.classNames(styles$1.container, styles$1["container--".concat(type)], styles$1["container--align-".concat(alignment)], (_b = {},
-            _b[styles$1["container--reverse"]] = isReverseOrder,
+    return (React__default["default"].createElement("div", { "data-testid": "copy-lead-container", className: index.classNames(styles.container, styles["container--".concat(type)], styles["container--align-".concat(alignment)], (_b = {},
+            _b[styles["container--reverse"]] = isReverseOrder,
             _b)) }, children));
 };
 
-var styles = {"col":"Column-module_col__9bKZy"};
-
 var Column = function (_a) {
     var children = _a.children;
     return (React__default["default"].createElement("div", { className: styles.col }, children));
@@ -106,53 +99,53 @@ var VideoPlayer = React__default["default"].lazy(function () {
     });
 });
 var MediaTemplate = function (_a) {
-    var button = _a.button, title = _a.title, 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, 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 _c = React.useState(false), isClient = _c[0], setIsClient = _c[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsL, ")"));
-    var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsXl, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsXl, ")"));
     React.useEffect(function () {
         setIsClient(true);
     }, []);
     return (React__default["default"].createElement("div", null,
         !isMinWidthArcBreakpointXl && (React__default["default"].createElement(Columns.Columns, null,
             React__default["default"].createElement(Columns.Columns.Col, { span: 12, spanM: 9 },
-                React__default["default"].createElement(MediaContent, { heading: title }, content)))),
+                React__default["default"].createElement(MediaContent, { heading: heading, headingLevel: headingLevel }, content)))),
         React__default["default"].createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React__default["default"].createElement(Column, null,
-                isMinWidthArcBreakpointXl && (React__default["default"].createElement(MediaContent, { heading: title }, content)),
+                isMinWidthArcBreakpointXl && (React__default["default"].createElement(MediaContent, { heading: heading }, content)),
                 React__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-                button && React__default["default"].createElement(Button, index.__assign({}, button))),
+                button && React__default["default"].createElement(Button, tslib_es6.__assign({}, button))),
             React__default["default"].createElement(Column, null,
                 video && isClient && (React__default["default"].createElement(React.Suspense, { fallback: null },
-                    React__default["default"].createElement(VideoPlayer, index.__assign({}, video)))),
-                image && !video && React__default["default"].createElement(Image, index.__assign({}, image))))));
+                    React__default["default"].createElement(VideoPlayer, tslib_es6.__assign({}, video)))),
+                image && !video && React__default["default"].createElement(Image, tslib_es6.__assign({}, image))))));
 };
 
 var ContentTemplate = function (_a) {
-    var button = _a.button, title = _a.title, listItems = _a.listItems, content = _a.content;
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsM, ")"));
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsL, ")"));
+    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsL, ")"));
     return (React__default["default"].createElement(Container, { type: "content", alignment: "top" },
         React__default["default"].createElement(Column, null,
-            React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, title),
+            React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
             React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
             React__default["default"].createElement(Text.Text, { size: "l" }, content),
-            button && isMinWidthArcBreakpointM && React__default["default"].createElement(Button, index.__assign({}, button))),
+            button && isMinWidthArcBreakpointM && React__default["default"].createElement(Button, tslib_es6.__assign({}, button))),
         React__default["default"].createElement(Column, null,
             React__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-            button && !isMinWidthArcBreakpointM && React__default["default"].createElement(Button, index.__assign({}, button)))));
+            button && !isMinWidthArcBreakpointM && React__default["default"].createElement(Button, tslib_es6.__assign({}, button)))));
 };
 
 /**
  * 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, title = _a.title, 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, 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"]);
     if (video || image) {
-        return (React__default["default"].createElement(MediaTemplate, { content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }));
+        return (React__default["default"].createElement(MediaTemplate, tslib_es6.__assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, index_es$1.filterDataAttrs(props))));
     }
     if (content) {
-        return (React__default["default"].createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+        return (React__default["default"].createElement(ContentTemplate, { listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }));
     }
     return null;
 };

package/dist/CopyLead/CopyLead.esm.js

@@ -1,5 +1,7 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-2bdcff75.js';
 import React, { useState, useEffect, Suspense } from 'react';
-import { _ as __rest, a as __assign, c as classNames, S as SemSizeBreakpointsL, b as SemSizeBreakpointsXl, d as SemSizeBreakpointsM } from '../_shared/esm/index-8c73b64b.js';
+import { f as filterDataAttrs } from '../_shared/esm/index.es-33860780.js';
+import { S as SemSizeBreakpointsL, a as SemSizeBreakpointsXl, b as SemSizeBreakpointsM } from '../_shared/esm/index.es-a1591fd3.js';
 import { Columns } from '@arc-ui/components/dist/Columns';
 import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
 import { Heading } from '@arc-ui/components/dist/Heading';
@@ -7,41 +9,38 @@ import { Text } from '@arc-ui/components/dist/Text';
 import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
 import { Image as Image$1 } from '@arc-ui/components/dist/Image';
 import { Icon } from '@arc-ui/components/dist/Icon';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
 
-var styles$5 = {"container":"MediaContent-module_container__zJvhV","content":"MediaContent-module_content__3VTWr"};
+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, children = _a.children;
-    return (React.createElement("div", { className: styles$5.container },
-        React.createElement(Heading, { level: "2", size: "xl" }, heading),
-        children && (React.createElement("div", { className: styles$5.content },
+    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    return (React.createElement("div", { className: styles.mediaContainer },
+        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        children && (React.createElement("div", { className: styles.content },
             React.createElement(VerticalSpace, { size: "24" }),
             React.createElement(Text, { size: "l" }, children)))));
 };
 
-var styles$4 = {"imgWrapper":"Image-module_imgWrapper__8IEXh"};
-
 var Image = function (_a) {
     var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles$4.imgWrapper },
+    return (React.createElement("div", { className: styles.imgWrapper },
         React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
             sources.map(function (source) { return (React.createElement(Image$1.Source, __assign({ key: source.srcSet }, source))); }))));
 };
 
-var styles$3 = {"list":"IconList-module_list__J9ei6","listItem":"IconList-module_listItem__gNx5-","listItemCentered":"IconList-module_listItemCentered__0HGoP","listItemIconContainer":"IconList-module_listItemIconContainer__4SYoW","listItemTextContainer":"IconList-module_listItemTextContainer__PfFZS"};
-
 var IconList = function (_a) {
     var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React.createElement("ul", { className: styles$3.list }, listItems.map(function (_a) {
+    return (React.createElement("ul", { className: styles.list }, listItems.map(function (_a) {
         var _b;
         var icon = _a.icon, heading = _a.heading, text = _a.text;
-        return (React.createElement("li", { key: heading, className: classNames(styles$3.listItem, (_b = {},
-                _b[styles$3.listItemCentered] = !text,
+        return (React.createElement("li", { key: heading, className: classNames(styles.listItem, (_b = {},
+                _b[styles.listItemCentered] = !text,
                 _b)) },
-            React.createElement("div", { className: styles$3.listItemIconContainer },
+            React.createElement("div", { className: styles.listItemIconContainer },
                 React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React.createElement("div", { className: styles$3.listItemTextContainer },
+            React.createElement("div", { className: styles.listItemTextContainer },
                 React.createElement(Heading, { level: "3", size: "s" }, heading),
                 text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
@@ -49,23 +48,17 @@ var IconList = function (_a) {
     })));
 };
 
-var styles$2 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
-
-var Button = function (props) { return (React.createElement("div", { className: styles$2.buttonContainer },
+var Button = function (props) { return (React.createElement("div", { className: styles.buttonContainer },
     React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
 
-var styles$1 = {"container":"Container-module_container__JZgGy","container--content":"Container-module_container--content__ScwIb","container--media":"Container-module_container--media__KIzMa","container--reverse":"Container-module_container--reverse__-B82g","container--align-center":"Container-module_container--align-center__qneG2","container--align-top":"Container-module_container--align-top__TE6Ah"};
-
 var Container = function (_a) {
     var _b;
     var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
-    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$1.container, styles$1["container--".concat(type)], styles$1["container--align-".concat(alignment)], (_b = {},
-            _b[styles$1["container--reverse"]] = isReverseOrder,
+    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles.container, styles["container--".concat(type)], styles["container--align-".concat(alignment)], (_b = {},
+            _b[styles["container--reverse"]] = isReverseOrder,
             _b)) }, children));
 };
 
-var styles = {"col":"Column-module_col__9bKZy"};
-
 var Column = function (_a) {
     var children = _a.children;
     return (React.createElement("div", { className: styles.col }, children));
@@ -80,7 +73,7 @@ var VideoPlayer = React.lazy(function () {
     });
 });
 var MediaTemplate = function (_a) {
-    var button = _a.button, title = _a.title, 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, 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 _c = useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsXl, ")"));
@@ -90,10 +83,10 @@ var MediaTemplate = function (_a) {
     return (React.createElement("div", null,
         !isMinWidthArcBreakpointXl && (React.createElement(Columns, null,
             React.createElement(Columns.Col, { span: 12, spanM: 9 },
-                React.createElement(MediaContent, { heading: title }, content)))),
+                React.createElement(MediaContent, { heading: heading, headingLevel: headingLevel }, content)))),
         React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React.createElement(Column, null,
-                isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: title }, content)),
+                isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: heading }, content)),
                 React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
                 button && React.createElement(Button, __assign({}, button))),
             React.createElement(Column, null,
@@ -103,12 +96,12 @@ var MediaTemplate = function (_a) {
 };
 
 var ContentTemplate = function (_a) {
-    var button = _a.button, title = _a.title, listItems = _a.listItems, content = _a.content;
+    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     return (React.createElement(Container, { type: "content", alignment: "top" },
         React.createElement(Column, null,
-            React.createElement(Heading, { level: "2", size: "xl" }, title),
+            React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
             React.createElement(VerticalSpace, { size: "24" }),
             React.createElement(Text, { size: "l" }, content),
             button && isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button))),
@@ -121,12 +114,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, title = _a.title, 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, 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"]);
     if (video || image) {
-        return (React.createElement(MediaTemplate, { content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }));
+        return (React.createElement(MediaTemplate, __assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs(props))));
     }
     if (content) {
-        return (React.createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+        return (React.createElement(ContentTemplate, { listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }));
     }
     return null;
 };

package/dist/CopyLead/styles.css

@@ -0,0 +1 @@
+.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) auto 0;width:100%}.CopyLead-module_col__0Da5H{flex:1 1 auto;width:100%}.CopyLead-module_container__I91ym{align-items:flex-start;display:flex;gap:var(--sem-space-padding-150)}.CopyLead-module_container--content__e8LxG{flex-direction:column}.CopyLead-module_container--media__QcMWi{flex-direction:column-reverse}.CopyLead-module_container--align-center__Fh1Sd{align-items:center}.CopyLead-module_container--align-top__UIXOZ{align-items:flex-start}.CopyLead-module_list__arnJd{list-style:none;margin:0;max-width:480px;padding:0}.CopyLead-module_listItem__NscHE{display:flex}.CopyLead-module_listItem__NscHE:nth-of-type(n+2){margin-top:var(--sem-space-padding-150)}.CopyLead-module_listItemCentered__Kwdab{align-items:center}.CopyLead-module_listItemIconContainer__dgnhJ{flex:0 0 auto}.CopyLead-module_listItemTextContainer__Dl9lw{flex:1 1 auto;padding:0 0 0 var(--sem-space-padding-80)}.CopyLead-module_imgWrapper__HYP3w{border-radius:var(--sem-border-radius-s);overflow:hidden}.CopyLead-module_mediaContainer__PxTnm{margin-bottom:var(--sem-space-padding-150)}.CopyLead-module_content__Bja1D{max-width:715px}@media (min-width:636px){.CopyLead-module_buttonContainer__3OaRG{width:-moz-max-content;width:max-content}}@media (min-width:768px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-110)}.CopyLead-module_container--media__QcMWi,.CopyLead-module_container--content__e8LxG{flex-direction:row}.CopyLead-module_container--reverse__Gq9u8{flex-direction:row-reverse}.CopyLead-module_buttonContainer__3OaRG{margin:var(--sem-space-padding-150) 0 0}.CopyLead-module_col__0Da5H{width:50%}.CopyLead-module_list__arnJd{max-width:100%}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-80)}}@media (min-width:1024px){.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-110)}}@media (min-width:1280px){.CopyLead-module_container__I91ym{gap:var(--sem-space-padding-130)}.CopyLead-module_listItemTextContainer__Dl9lw{padding:0 var(--sem-space-padding-130)}}