@arc-ui/community-components 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,16 @@
+
+> @arc-ui/community-components@0.1.0 build /builds/enterprise/frontend/arc-community/packages/components
+> rimraf dist && rollup -c && generate-subpath-css
+
+
+src/index.ts → dist...
+created dist in 6.1s
+
+src/index.ts → dist/index.es.js...
+created dist/index.es.js in 4.1s
+
+./src/components/Accordion/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/Highlights/index.ts, ./src/components/PromoListing/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts → dist...
+created dist in 3.9s
+
+./src/components/Accordion/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/Highlights/index.ts, ./src/components/PromoListing/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts → dist...
+created dist in 3.8s

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @arc-ui/community-components
+
+## 1.0.0
+
+### Major Changes
+
+- initial version

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 BT plc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Accordion/Accordion.cjs.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
+var React = require('react');
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
+var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
+var Disclosure = require('@arc-ui/components/dist/Disclosure');
+require('../_shared/cjs/index-Bp6Dd2i1.js');
+require('@arc-ui/components/dist/Heading');
+require('@arc-ui/components/dist/Text');
+require('@arc-ui/components/dist/VerticalSpace');
+
+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.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, headingLevel = _a.headingLevel, content = _a.content, disclosureList = _a.disclosureList, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "content", "disclosureList"]);
+    return (React.createElement("div", tslib_es6.__assign({}, filterDataAttrs.filterDataAttrs(props)),
+        React.createElement(SectionHeading.SectionHeading, { isPadded: true, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
+};
+
+exports.Accordion = Accordion;

package/dist/Accordion/Accordion.esm.js

@@ -0,0 +1,29 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
+import React from 'react';
+import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
+import { Disclosure } from '@arc-ui/components/dist/Disclosure';
+import '../_shared/esm/index-BfTCfPZ1.js';
+import '@arc-ui/components/dist/Heading';
+import '@arc-ui/components/dist/Text';
+import '@arc-ui/components/dist/VerticalSpace';
+
+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, headingLevel = _a.headingLevel, content = _a.content, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "content", "disclosureList"]);
+    return (React.createElement("div", __assign({}, filterDataAttrs(props)),
+        React.createElement(SectionHeading, { isPadded: true, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
+};
+
+export { Accordion };

package/dist/Author/Author.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var Author = require('../_shared/cjs/Author-CAo-qryZ.js');
+require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
+require('react');
+require('../_shared/cjs/filter-data-attrs-ajtUvDAC.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-Bx-cE9Pz.js';
+import '../_shared/esm/tslib.es6-Cv15O4Nx.js';
+import 'react';
+import '../_shared/esm/filter-data-attrs-V7cbJuwS.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/styles.css

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

package/dist/BannerWithTabs/BannerWithTabs.cjs.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
+var React = require('react');
+var HeroBanner = require('@arc-ui/components/dist/HeroBanner');
+var ContentSwitcher = require('@arc-ui/components/dist/ContentSwitcher');
+var ContentSwitcherDropdown = require('@arc-ui/components/dist/ContentSwitcherDropdown');
+
+var styles = {"contentSwitcherWrapper":"BannerWithTabs-module_contentSwitcherWrapper__xvz39","contentSwitcherDropdownWrapper":"BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq"};
+
+var BannerWithTabs = function (_a) {
+    var _b;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue;
+    var initialTab = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value;
+    var _c = React.useState(initialTab), selectedTab = _c[0], setSelectedTab = _c[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.contentSwitcherWrapper },
+            React.createElement(ContentSwitcher.ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
+                React.createElement(ContentSwitcher.ContentSwitcher.List, { isInset: true }, tabs.map(function (_a, index) {
+                    var label = _a.label, value = _a.value;
+                    return (React.createElement(ContentSwitcher.ContentSwitcher.Tab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
+                })),
+                tabs.map(function (_a, index) {
+                    var value = _a.value, content = _a.content;
+                    return (React.createElement(ContentSwitcher.ContentSwitcher.Content, { value: value, key: index },
+                        React.createElement(HeroBanner.HeroBanner, tslib_es6.__assign({}, content))));
+                }))),
+        React.createElement("div", { className: styles.contentSwitcherDropdownWrapper },
+            React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
+                var value = _a.value, content = _a.content;
+                return (React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown.Content, { value: value, key: "".concat(index, "-").concat(value) },
+                    React.createElement(HeroBanner.HeroBanner, tslib_es6.__assign({}, content))));
+            })))));
+};
+
+exports.BannerWithTabs = BannerWithTabs;

package/dist/BannerWithTabs/BannerWithTabs.esm.js

@@ -0,0 +1,34 @@
+import { a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
+import React, { useState } from 'react';
+import { HeroBanner } from '@arc-ui/components/dist/HeroBanner';
+import { ContentSwitcher } from '@arc-ui/components/dist/ContentSwitcher';
+import { ContentSwitcherDropdown } from '@arc-ui/components/dist/ContentSwitcherDropdown';
+
+var styles = {"contentSwitcherWrapper":"BannerWithTabs-module_contentSwitcherWrapper__xvz39","contentSwitcherDropdownWrapper":"BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq"};
+
+var BannerWithTabs = function (_a) {
+    var _b;
+    var tabs = _a.tabs, defaultValue = _a.defaultValue;
+    var initialTab = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value;
+    var _c = useState(initialTab), selectedTab = _c[0], setSelectedTab = _c[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.contentSwitcherWrapper },
+            React.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
+                React.createElement(ContentSwitcher.List, { isInset: true }, tabs.map(function (_a, index) {
+                    var label = _a.label, value = _a.value;
+                    return (React.createElement(ContentSwitcher.Tab, { label: label, value: value, key: "".concat(index, "-").concat(value) }));
+                })),
+                tabs.map(function (_a, index) {
+                    var value = _a.value, content = _a.content;
+                    return (React.createElement(ContentSwitcher.Content, { value: value, key: index },
+                        React.createElement(HeroBanner, __assign({}, content))));
+                }))),
+        React.createElement("div", { className: styles.contentSwitcherDropdownWrapper },
+            React.createElement(ContentSwitcherDropdown, { value: selectedTab, tabs: tabs, isInset: true, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
+                var value = _a.value, content = _a.content;
+                return (React.createElement(ContentSwitcherDropdown.Content, { value: value, key: "".concat(index, "-").concat(value) },
+                    React.createElement(HeroBanner, __assign({}, content))));
+            })))));
+};
+
+export { BannerWithTabs };

package/dist/BannerWithTabs/styles.css

@@ -0,0 +1 @@
+.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:none}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:block}@media (min-width:636px){.BannerWithTabs-module_contentSwitcherWrapper__xvz39{display:block}.BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq{display:none}}

package/dist/CopyLead/CopyLead.cjs.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
+var React = require('react');
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-ajtUvDAC.js');
+var index_es = require('../_shared/cjs/index.es-X428Cm3N.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');
+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-Bp6Dd2i1.js');
+var ButtonV2 = require('@arc-ui/components/dist/ButtonV2');
+var SectionHeading = require('../_shared/cjs/SectionHeading-L2EpTQ79.js');
+
+var styles = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
+
+var MediaContent = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    return (React.createElement("div", { className: styles.mediaContainer },
+        React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        children && (React.createElement("div", { className: styles.content },
+            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React.createElement(Text.Text, { size: "l" }, children)))));
+};
+
+var Image = function (_a) {
+    var sources = _a.sources, props = tslib_es6.__rest(_a, ["sources"]);
+    return (React.createElement("div", { className: styles.imgWrapper },
+        React.createElement(Image$1.Image, tslib_es6.__assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React.createElement(Image$1.Image.Source, tslib_es6.__assign({ key: source.srcSet }, source))); }))));
+};
+
+var IconList = function (_a) {
+    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
+    return (React.createElement("ul", { className: styles.list }, listItems.map(function (_a) {
+        var _b;
+        var icon = _a.icon, heading = _a.heading, text = _a.text;
+        return (React.createElement("li", { key: heading, className: index.classNames(styles.listItem, (_b = {},
+                _b[styles.listItemCentered] = !text,
+                _b)) },
+            React.createElement("div", { className: styles.listItemIconContainer },
+                React.createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
+            React.createElement("div", { className: styles.listItemTextContainer },
+                React.createElement(Heading.Heading, { level: "3", size: "s" }, heading),
+                text && (React.createElement(React.Fragment, null,
+                    React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
+                    React.createElement(Text.Text, null, text))))));
+    })));
+};
+
+var Button = function (props) { return (React.createElement("div", { className: styles.buttonContainer },
+    React.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.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.createElement("div", { className: styles.col }, children));
+};
+
+var VideoPlayer = React.lazy(function () {
+    return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
+        var VideoPlayer = _a.VideoPlayer;
+        return ({
+            default: VideoPlayer,
+        });
+    });
+});
+var MediaTemplate = function (_a) {
+    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    var _c = React.useState(false), isClient = _c[0], setIsClient = _c[1];
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsXl, ")"));
+    React.useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React.createElement("div", null,
+        !isMinWidthArcBreakpointXl && (React.createElement(Columns.Columns, null,
+            React.createElement(Columns.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, tslib_es6.__assign({}, button))),
+            React.createElement(Column, null,
+                video && isClient && (React.createElement(React.Suspense, { fallback: null },
+                    React.createElement(VideoPlayer, tslib_es6.__assign({}, video)))),
+                image && !video && React.createElement(Image, tslib_es6.__assign({}, image))))));
+};
+
+var ContentTemplate = function (_a) {
+    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.ArcSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")"));
+    return (React.createElement(Container, { type: "content", alignment: "top" },
+        React.createElement(Column, null,
+            React.createElement(SectionHeading.SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
+            button && isMinWidthArcBreakpointM && React.createElement(Button, tslib_es6.__assign({}, button))),
+        React.createElement(Column, null,
+            React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+            button && !isMinWidthArcBreakpointM && React.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, 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"]);
+    console.log(video);
+    if (video || image) {
+        return (React.createElement(MediaTemplate, tslib_es6.__assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs.filterDataAttrs(props))));
+    }
+    if (content) {
+        return (React.createElement(ContentTemplate, { listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }));
+    }
+    return null;
+};
+
+exports.CopyLead = CopyLead;

package/dist/CopyLead/CopyLead.esm.js

@@ -0,0 +1,127 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
+import React, { useState, useEffect, Suspense } from 'react';
+import { f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-V7cbJuwS.js';
+import { A as ArcSizeBreakpointsL, b as ArcSizeBreakpointsXl, c as ArcSizeBreakpointsM } from '../_shared/esm/index.es-BzmvPxje.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';
+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-BfTCfPZ1.js';
+import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-C70XNhqJ.js';
+
+var styles = {"buttonContainer":"CopyLead-module_buttonContainer__3OaRG","col":"CopyLead-module_col__0Da5H","container":"CopyLead-module_container__I91ym","container--content":"CopyLead-module_container--content__e8LxG","container--media":"CopyLead-module_container--media__QcMWi","container--align-center":"CopyLead-module_container--align-center__Fh1Sd","container--align-top":"CopyLead-module_container--align-top__UIXOZ","list":"CopyLead-module_list__arnJd","listItem":"CopyLead-module_listItem__NscHE","listItemCentered":"CopyLead-module_listItemCentered__Kwdab","listItemIconContainer":"CopyLead-module_listItemIconContainer__dgnhJ","listItemTextContainer":"CopyLead-module_listItemTextContainer__Dl9lw","imgWrapper":"CopyLead-module_imgWrapper__HYP3w","mediaContainer":"CopyLead-module_mediaContainer__PxTnm","content":"CopyLead-module_content__Bja1D","container--reverse":"CopyLead-module_container--reverse__Gq9u8"};
+
+var MediaContent = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
+    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.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.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.listItem, (_b = {},
+                _b[styles.listItemCentered] = !text,
+                _b)) },
+            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.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.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.createElement("div", { className: styles.col }, children));
+};
+
+var VideoPlayer = React.lazy(function () {
+    return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
+        var VideoPlayer = _a.VideoPlayer;
+        return ({
+            default: VideoPlayer,
+        });
+    });
+});
+var MediaTemplate = function (_a) {
+    var button = _a.button, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
+    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: 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, heading = _a.heading, headingLevel = _a.headingLevel, listItems = _a.listItems, content = _a.content;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    return (React.createElement(Container, { type: "content", alignment: "top" },
+        React.createElement(Column, null,
+            React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: 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, 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"]);
+    console.log(video);
+    if (video || image) {
+        return (React.createElement(MediaTemplate, __assign({ content: content, video: video, image: image, listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, isReverseOrder: isReverseOrder }, filterDataAttrs(props))));
+    }
+    if (content) {
+        return (React.createElement(ContentTemplate, { listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }));
+    }
+    return null;
+};
+
+export { CopyLead };

package/dist/CopyLead/styles.css

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

package/dist/DownloadList/DownloadList.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-DBA0GFPJ.js');
+var React = require('react');
+var Text = require('@arc-ui/components/dist/Text');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+var Heading = require('@arc-ui/components/dist/Heading');
+var Download = require('@arc-ui/components/dist/Download');
+
+var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+
+var DownloadList = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, downloads = _a.downloads;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.headingContainer },
+            React.createElement(Heading.Heading, { size: "xl", level: headingLevel }, heading),
+            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React.createElement(Text.Text, { size: "l" }, content)),
+        React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+        downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
+            React.createElement(Download.Download, tslib_es6.__assign({}, props)),
+            " ",
+            i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); })));
+};
+
+exports.DownloadList = DownloadList;

package/dist/DownloadList/DownloadList.esm.js

@@ -0,0 +1,24 @@
+import { a as __assign } from '../_shared/esm/tslib.es6-Cv15O4Nx.js';
+import React from 'react';
+import { Text } from '@arc-ui/components/dist/Text';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
+import { Heading } from '@arc-ui/components/dist/Heading';
+import { Download } from '@arc-ui/components/dist/Download';
+
+var styles = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+
+var DownloadList = function (_a) {
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, downloads = _a.downloads;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.headingContainer },
+            React.createElement(Heading, { size: "xl", level: headingLevel }, heading),
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(Text, { size: "l" }, content)),
+        React.createElement(VerticalSpace, { size: "40" }),
+        downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
+            React.createElement(Download, __assign({}, props)),
+            " ",
+            i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); })));
+};
+
+export { DownloadList };

package/dist/DownloadList/styles.css

@@ -0,0 +1 @@
+@media (min-width:768px){.DownloadList-module_headingContainer__PNio8{max-width:75%}}