@arc-ui/community-components 12.0.0-beta.6 → 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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
-var React__default = require('react');
-var index_es = require('../_shared/cjs/index.es-5af2c2a1.js');
+var React = require('react');
+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');
@@ -35,61 +36,61 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default__default = /*#__PURE__*/_interopDefaultLegacy(React__default);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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["default"].createElement("div", { className: styles.mediaContainer },
-        React__default__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
-        children && (React__default__default["default"].createElement("div", { className: styles.content },
-            React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React__default__default["default"].createElement(Text.Text, { size: "l" }, children)))));
+    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 Image = function (_a) {
     var sources = _a.sources, props = tslib_es6.__rest(_a, ["sources"]);
-    return (React__default__default["default"].createElement("div", { className: styles.imgWrapper },
-        React__default__default["default"].createElement(Image$1.Image, tslib_es6.__assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React__default__default["default"].createElement(Image$1.Image.Source, tslib_es6.__assign({ key: source.srcSet }, source))); }))));
+    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 IconList = function (_a) {
     var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React__default__default["default"].createElement("ul", { className: styles.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["default"].createElement("li", { key: heading, className: index.classNames(styles.listItem, (_b = {},
+        return (React__default["default"].createElement("li", { key: heading, className: index.classNames(styles.listItem, (_b = {},
                 _b[styles.listItemCentered] = !text,
                 _b)) },
-            React__default__default["default"].createElement("div", { className: styles.listItemIconContainer },
-                React__default__default["default"].createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React__default__default["default"].createElement("div", { className: styles.listItemTextContainer },
-                React__default__default["default"].createElement(Heading.Heading, { level: "3", size: "s" }, heading),
-                text && (React__default__default["default"].createElement(React__default__default["default"].Fragment, null,
-                    React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
-                    React__default__default["default"].createElement(Text.Text, null, text))))));
+            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.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" }),
+                    React__default["default"].createElement(Text.Text, null, text))))));
     })));
 };
 
-var Button = function (props) { return (React__default__default["default"].createElement("div", { className: styles.buttonContainer },
-    React__default__default["default"].createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
+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["default"].createElement("div", { "data-testid": "copy-lead-container", className: index.classNames(styles.container, styles["container--".concat(type)], styles["container--align-".concat(alignment)], (_b = {},
+    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 Column = function (_a) {
     var children = _a.children;
-    return (React__default__default["default"].createElement("div", { className: styles.col }, children));
+    return (React__default["default"].createElement("div", { className: styles.col }, children));
 };
 
-var VideoPlayer = React__default__default["default"].lazy(function () {
+var VideoPlayer = React__default["default"].lazy(function () {
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@arc-ui/components/dist/VideoPlayer')); }).then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
         return ({
@@ -98,53 +99,53 @@ var VideoPlayer = React__default__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 _c = React__default.useState(false), isClient = _c[0], setIsClient = _c[1];
+    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_es.SemSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsXl, ")"));
-    React__default.useEffect(function () {
+    React.useEffect(function () {
         setIsClient(true);
     }, []);
-    return (React__default__default["default"].createElement("div", null,
-        !isMinWidthArcBreakpointXl && (React__default__default["default"].createElement(Columns.Columns, null,
-            React__default__default["default"].createElement(Columns.Columns.Col, { span: 12, spanM: 9 },
-                React__default__default["default"].createElement(MediaContent, { heading: title }, content)))),
-        React__default__default["default"].createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
-            React__default__default["default"].createElement(Column, null,
-                isMinWidthArcBreakpointXl && (React__default__default["default"].createElement(MediaContent, { heading: title }, content)),
-                React__default__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-                button && React__default__default["default"].createElement(Button, tslib_es6.__assign({}, button))),
-            React__default__default["default"].createElement(Column, null,
-                video && isClient && (React__default__default["default"].createElement(React__default.Suspense, { fallback: null },
-                    React__default__default["default"].createElement(VideoPlayer, tslib_es6.__assign({}, video)))),
-                image && !video && React__default__default["default"].createElement(Image, tslib_es6.__assign({}, image))))));
+    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: 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: heading }, content)),
+                React__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+                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, 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 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["default"].createElement(Container, { type: "content", alignment: "top" },
-        React__default__default["default"].createElement(Column, null,
-            React__default__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, title),
-            React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React__default__default["default"].createElement(Text.Text, { size: "l" }, content),
-            button && isMinWidthArcBreakpointM && React__default__default["default"].createElement(Button, tslib_es6.__assign({}, button))),
-        React__default__default["default"].createElement(Column, null,
-            React__default__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-            button && !isMinWidthArcBreakpointM && React__default__default["default"].createElement(Button, tslib_es6.__assign({}, button)))));
+    return (React__default["default"].createElement(Container, { type: "content", alignment: "top" },
+        React__default["default"].createElement(Column, null,
+            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, 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, 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, props = tslib_es6.__rest(_a, ["button", "title", "listItems", "video", "image", "content", "isReverseOrder"]);
+    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["default"].createElement(MediaTemplate, tslib_es6.__assign({ content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }, index_es.filterDataAttrs(props))));
+        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["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,6 +1,7 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-2bdcff75.js';
-import React__default__default, { useState, useEffect, Suspense } from 'react';
-import { S as SemSizeBreakpointsL, a as SemSizeBreakpointsXl, b as SemSizeBreakpointsM, f as filterDataAttrs } from '../_shared/esm/index.es-8a0a3fd0.js';
+import React, { useState, useEffect, Suspense } from 'react';
+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';
@@ -14,56 +15,56 @@ import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
 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.mediaContainer },
-        React__default__default.createElement(Heading, { level: "2", size: "xl" }, heading),
-        children && (React__default__default.createElement("div", { className: styles.content },
-            React__default__default.createElement(VerticalSpace, { size: "24" }),
-            React__default__default.createElement(Text, { size: "l" }, children)))));
+    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 Image = function (_a) {
     var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React__default__default.createElement("div", { className: styles.imgWrapper },
-        React__default__default.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React__default__default.createElement(Image$1.Source, __assign({ key: source.srcSet }, source))); }))));
+    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 IconList = function (_a) {
     var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React__default__default.createElement("ul", { className: styles.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__default__default.createElement("li", { key: heading, className: classNames(styles.listItem, (_b = {},
+        return (React.createElement("li", { key: heading, className: classNames(styles.listItem, (_b = {},
                 _b[styles.listItemCentered] = !text,
                 _b)) },
-            React__default__default.createElement("div", { className: styles.listItemIconContainer },
-                React__default__default.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React__default__default.createElement("div", { className: styles.listItemTextContainer },
-                React__default__default.createElement(Heading, { level: "3", size: "s" }, heading),
-                text && (React__default__default.createElement(React__default__default.Fragment, null,
-                    React__default__default.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
-                    React__default__default.createElement(Text, null, text))))));
+            React.createElement("div", { className: styles.listItemIconContainer },
+                React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
+            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" }),
+                    React.createElement(Text, null, text))))));
     })));
 };
 
-var Button = function (props) { return (React__default__default.createElement("div", { className: styles.buttonContainer },
-    React__default__default.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
+var Button = function (props) { return (React.createElement("div", { className: styles.buttonContainer },
+    React.createElement(ButtonV2, __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: classNames(styles.container, styles["container--".concat(type)], styles["container--align-".concat(alignment)], (_b = {},
+    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 Column = function (_a) {
     var children = _a.children;
-    return (React__default__default.createElement("div", { className: styles.col }, children));
+    return (React.createElement("div", { className: styles.col }, children));
 };
 
-var VideoPlayer = React__default__default.lazy(function () {
+var VideoPlayer = React.lazy(function () {
     return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
         return ({
@@ -72,53 +73,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 = useState(false), isClient = _c[0], setIsClient = _c[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsXl, ")"));
     useEffect(function () {
         setIsClient(true);
     }, []);
-    return (React__default__default.createElement("div", null,
-        !isMinWidthArcBreakpointXl && (React__default__default.createElement(Columns, null,
-            React__default__default.createElement(Columns.Col, { span: 12, spanM: 9 },
-                React__default__default.createElement(MediaContent, { heading: title }, 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)),
-                React__default__default.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-                button && React__default__default.createElement(Button, __assign({}, button))),
-            React__default__default.createElement(Column, null,
-                video && isClient && (React__default__default.createElement(Suspense, { fallback: null },
-                    React__default__default.createElement(VideoPlayer, __assign({}, video)))),
-                image && !video && React__default__default.createElement(Image, __assign({}, image))))));
+    return (React.createElement("div", null,
+        !isMinWidthArcBreakpointXl && (React.createElement(Columns, null,
+            React.createElement(Columns.Col, { span: 12, spanM: 9 },
+                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: heading }, content)),
+                React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+                button && React.createElement(Button, __assign({}, button))),
+            React.createElement(Column, null,
+                video && isClient && (React.createElement(Suspense, { fallback: null },
+                    React.createElement(VideoPlayer, __assign({}, video)))),
+                image && !video && React.createElement(Image, __assign({}, image))))));
 };
 
 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__default__default.createElement(Container, { type: "content", alignment: "top" },
-        React__default__default.createElement(Column, null,
-            React__default__default.createElement(Heading, { level: "2", size: "xl" }, title),
-            React__default__default.createElement(VerticalSpace, { size: "24" }),
-            React__default__default.createElement(Text, { size: "l" }, content),
-            button && isMinWidthArcBreakpointM && React__default__default.createElement(Button, __assign({}, button))),
-        React__default__default.createElement(Column, null,
-            React__default__default.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
-            button && !isMinWidthArcBreakpointM && React__default__default.createElement(Button, __assign({}, button)))));
+    return (React.createElement(Container, { type: "content", alignment: "top" },
+        React.createElement(Column, null,
+            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))),
+        React.createElement(Column, null,
+            React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+            button && !isMinWidthArcBreakpointM && React.createElement(Button, __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, props = __rest(_a, ["button", "title", "listItems", "video", "image", "content", "isReverseOrder"]);
+    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__default__default.createElement(MediaTemplate, __assign({ content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs(props))));
+        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__default__default.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

@@ -1 +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-xl);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)}}
+.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)}}