@arc-ui/community-components 12.0.0-beta.4 → 12.0.0-beta.6

package/dist/CopyLead/CopyLead.cjs.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var index = require('../_shared/cjs/index-7818af76.js');
+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 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 +12,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 }; }
@@ -33,71 +35,61 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default__default = /*#__PURE__*/_interopDefaultLegacy(React__default);
 
-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 },
-            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React__default["default"].createElement(Text.Text, { size: "l" }, 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 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["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))); }))));
 };
 
-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["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["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(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React__default["default"].createElement("div", { className: styles$3.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))))));
+            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))))));
     })));
 };
 
-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["default"].createElement("div", { className: styles.buttonContainer },
+    React__default__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["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));
+    return (React__default__default["default"].createElement("div", { className: styles.col }, children));
 };
 
-var VideoPlayer = React__default["default"].lazy(function () {
+var VideoPlayer = React__default__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 ({
@@ -107,52 +99,52 @@ 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 _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, ")"));
-    React.useEffect(function () {
+    var _c = React__default.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 () {
         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(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, index.__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))))));
+    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))))));
 };
 
 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, ")"));
-    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(VerticalSpace.VerticalSpace, { size: "24" }),
-            React__default["default"].createElement(Text.Text, { size: "l" }, content),
-            button && isMinWidthArcBreakpointM && React__default["default"].createElement(Button, index.__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)))));
+    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)))));
 };
 
 /**
  * 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, 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"]);
     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["default"].createElement(MediaTemplate, tslib_es6.__assign({ content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }, index_es.filterDataAttrs(props))));
     }
     if (content) {
-        return (React__default["default"].createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+        return (React__default__default["default"].createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
     }
     return null;
 };

package/dist/CopyLead/CopyLead.esm.js

@@ -1,5 +1,6 @@
-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-8d1d7cd8.js';
+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 { 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,71 +8,62 @@ 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 },
-            React.createElement(VerticalSpace, { size: "24" }),
-            React.createElement(Text, { size: "l" }, 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 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 },
-        React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React.createElement(Image$1.Source, __assign({ key: source.srcSet }, source))); }))));
+    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))); }))));
 };
 
-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__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.createElement("li", { key: heading, className: classNames(styles$3.listItem, (_b = {},
-                _b[styles$3.listItemCentered] = !text,
+        return (React__default__default.createElement("li", { key: heading, className: classNames(styles.listItem, (_b = {},
+                _b[styles.listItemCentered] = !text,
                 _b)) },
-            React.createElement("div", { className: styles$3.listItemIconContainer },
-                React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React.createElement("div", { className: styles$3.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))))));
+            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))))));
     })));
 };
 
-var styles$2 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
-
-var Button = function (props) { return (React.createElement("div", { className: styles$2.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 Button = function (props) { return (React__default__default.createElement("div", { className: styles.buttonContainer },
+    React__default__default.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.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__default__default.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));
+    return (React__default__default.createElement("div", { className: styles.col }, children));
 };
 
-var VideoPlayer = React.lazy(function () {
+var VideoPlayer = React__default__default.lazy(function () {
     return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
         return ({
@@ -87,46 +79,46 @@ var MediaTemplate = function (_a) {
     useEffect(function () {
         setIsClient(true);
     }, []);
-    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(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
-            React.createElement(Column, null,
-                isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: title }, 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))))));
+    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))))));
 };
 
 var ContentTemplate = function (_a) {
     var button = _a.button, title = _a.title, 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(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)))));
+    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)))));
 };
 
 /**
  * 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, 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"]);
     if (video || image) {
-        return (React.createElement(MediaTemplate, { content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }));
+        return (React__default__default.createElement(MediaTemplate, __assign({ content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs(props))));
     }
     if (content) {
-        return (React.createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+        return (React__default__default.createElement(ContentTemplate, { listItems: listItems, title: title, 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-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)}}

package/dist/FeaturePost/FeaturePost.cjs.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-7818af76.js');
-var React = require('react');
+var tslib_es6 = require('../_shared/cjs/tslib.es6-ec509cfc.js');
+var React__default = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
 var AppButton = require('@arc-ui/components/dist/AppButton');
 var Grid = require('@arc-ui/components/dist/Grid');
 var ButtonV2 = require('@arc-ui/components/dist/ButtonV2');
@@ -11,72 +12,71 @@ var Avatar = require('@arc-ui/components/dist/Avatar');
 var Heading = require('@arc-ui/components/dist/Heading');
 var Text = require('@arc-ui/components/dist/Text');
 var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+var index_es = require('../_shared/cjs/index.es-5af2c2a1.js');
 var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
 var Image$1 = require('@arc-ui/components/dist/Image');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default__default = /*#__PURE__*/_interopDefaultLegacy(React__default);
 
-var styles$1 = {"imgWrapper":"Image-module_imgWrapper__flS1n"};
+var styles = {"labelDate":"FeaturePost-module_labelDate__NXOgY","authorContent":"FeaturePost-module_authorContent__FEuRO","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
 
 var Image = function (_a) {
-    var sources = _a.sources, props = index.__rest(_a, ["sources"]);
-    return (React__default["default"].createElement("div", { className: styles$1.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["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))); }))));
 };
 
-var styles = {"featurePost":"FeaturePost-module_featurePost__PDoVH","featurePostReversed":"FeaturePost-module_featurePostReversed__tQZSX","col":"FeaturePost-module_col__x2s9L","labelDate":"FeaturePost-module_labelDate__eiCmw","contentContainer":"FeaturePost-module_contentContainer__dqJOS","authorContent":"FeaturePost-module_authorContent__QD4Nv","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__nGdyh"};
-
 var FeaturePost = function (_a) {
     var _b;
-    var heading = _a.heading, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c;
-    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsM, ")"));
-    return (React__default["default"].createElement("div", { "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
+    var heading = _a.heading, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["heading", "label", "image", "content", "footer", "isReverseOrder"]);
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsM, ")"));
+    return (React__default__default["default"].createElement("div", tslib_es6.__assign({ "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
             _b[styles.featurePostReversed] = isReverseOrder,
-            _b)) },
-        React__default["default"].createElement("div", { className: styles.col },
-            React__default["default"].createElement("div", { className: styles.contentContainer },
-                label && (React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
-                    React__default["default"].createElement(Grid.Grid.Row, { align: "baseline" },
-                        React__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
-                            React__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.text.toUpperCase())),
-                        React__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
-                            React__default["default"].createElement("div", { className: styles.labelDate },
-                                React__default["default"].createElement(Text.Text, { size: "xs", tone: "muted" }, label.date)))),
-                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
-                React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
-                !isMinWidthArcBreakpointM && (React__default["default"].createElement("div", { "data-testid": "mobile-img" },
-                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                    React__default["default"].createElement(Image, index.__assign({}, image)))),
-                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                React__default["default"].createElement(Text.Text, { size: "l" }, content),
-                (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    footer.author && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-                        React__default["default"].createElement(Grid.Grid, { isFluid: true, isGutterless: true },
-                            React__default["default"].createElement(Grid.Grid.Row, { align: "center" },
-                                React__default["default"].createElement(Grid.Grid.Col, { xs: "auto" },
-                                    React__default["default"].createElement(Avatar.Avatar, index.__assign({ size: "m" }, footer.author.avatar))),
-                                React__default["default"].createElement(Grid.Grid.Col, null,
-                                    React__default["default"].createElement("div", { className: styles.authorContent },
-                                        React__default["default"].createElement(Heading.Heading, { size: "xs" }, footer.author.name),
-                                        React__default["default"].createElement(Text.Text, { size: "s" }, footer.author.title))))))),
-                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                    React__default["default"].createElement(ButtonV2.ButtonV2, index.__assign({ buttonStyle: "secondary" }, footer.button)))),
-                (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                    React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
-                        React__default["default"].createElement(Grid.Grid.Row, null,
-                            footer.appStore && (React__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
-                                React__default["default"].createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
-                            footer.googlePlay && (React__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
-                                React__default["default"].createElement("div", { className: styles.googlePlayButtonWrapper },
-                                    React__default["default"].createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
-        isMinWidthArcBreakpointM && (React__default["default"].createElement("div", { className: styles.col },
-            React__default["default"].createElement("div", { "data-testid": "desktop-img", className: styles.imgContainer },
-                React__default["default"].createElement(Image, index.__assign({}, image)))))));
+            _b)) }, index_es.filterDataAttrs(props)),
+        React__default__default["default"].createElement("div", { className: styles.col },
+            React__default__default["default"].createElement("div", { className: styles.contentContainer },
+                label && (React__default__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                    React__default__default["default"].createElement(Grid.Grid.Row, { align: "baseline" },
+                        React__default__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
+                            React__default__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.text.toUpperCase())),
+                        React__default__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
+                            React__default__default["default"].createElement("div", { className: styles.labelDate },
+                                React__default__default["default"].createElement(Text.Text, { size: "xs", tone: "muted" }, label.date)))),
+                    React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
+                React__default__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
+                !isMinWidthArcBreakpointM && (React__default__default["default"].createElement("div", { "data-testid": "mobile-img" },
+                    React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default__default["default"].createElement(Image, tslib_es6.__assign({}, image)))),
+                React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                React__default__default["default"].createElement(Text.Text, { size: "l" }, content),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React__default__default["default"].createElement(React__default__default["default"].Fragment, null,
+                    footer.author && (React__default__default["default"].createElement(React__default__default["default"].Fragment, null,
+                        React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+                        React__default__default["default"].createElement(Grid.Grid, { isFluid: true, isGutterless: true },
+                            React__default__default["default"].createElement(Grid.Grid.Row, { align: "center" },
+                                React__default__default["default"].createElement(Grid.Grid.Col, { xs: "auto" },
+                                    React__default__default["default"].createElement(Avatar.Avatar, tslib_es6.__assign({ size: "m" }, footer.author.avatar))),
+                                React__default__default["default"].createElement(Grid.Grid.Col, null,
+                                    React__default__default["default"].createElement("div", { className: styles.authorContent },
+                                        React__default__default["default"].createElement(Heading.Heading, { size: "xs" }, footer.author.name),
+                                        React__default__default["default"].createElement(Text.Text, { size: "s" }, footer.author.title))))))),
+                    React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default__default["default"].createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ buttonStyle: "secondary" }, footer.button)))),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React__default__default["default"].createElement(React__default__default["default"].Fragment, null,
+                    React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                        React__default__default["default"].createElement(Grid.Grid.Row, null,
+                            footer.appStore && (React__default__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
+                                React__default__default["default"].createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
+                            footer.googlePlay && (React__default__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
+                                React__default__default["default"].createElement("div", { className: styles.googlePlayButtonWrapper },
+                                    React__default__default["default"].createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
+        isMinWidthArcBreakpointM && (React__default__default["default"].createElement("div", { className: styles.col },
+            React__default__default["default"].createElement("div", { "data-testid": "desktop-img", className: styles.imgContainer },
+                React__default__default["default"].createElement(Image, tslib_es6.__assign({}, image)))))));
 };
 
 exports.FeaturePost = FeaturePost;