@arc-ui/community-components 0.1.0 → 1.0.0

package/dist/index.es.js

@@ -1,29 +1,29 @@
-import React, { useState, useEffect, Suspense, useId } from 'react';
-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 { Disclosure } from '@arc-ui/components/dist/Disclosure';
-import { Grid } from '@arc-ui/components/dist/Grid';
-import { Avatar } from '@arc-ui/components/dist/Avatar';
-import { Columns } from '@arc-ui/components/dist/Columns';
-import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
-import { Image as Image$2 } from '@arc-ui/components/dist/Image';
-import { Icon } from '@arc-ui/components/dist/Icon';
-import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
-import { Download } from '@arc-ui/components/dist/Download';
-import { AppButton } from '@arc-ui/components/dist/AppButton';
-import { Link } from '@arc-ui/components/dist/Link';
-import { Carousel } from '@arc-ui/components/dist/Carousel';
-import { MediaCard } from '@arc-ui/components/dist/MediaCard';
-import { ImpactCard } from '@arc-ui/components/dist/ImpactCard';
-import { InformationCard } from '@arc-ui/components/dist/InformationCard';
-import { TypographyCard } from '@arc-ui/components/dist/TypographyCard';
-import { Box } from '@arc-ui/components/dist/Box';
-import { Rule } from '@arc-ui/components/dist/Rule';
-import { Align } from '@arc-ui/components/dist/Align';
-import { HeroBanner } from '@arc-ui/components/dist/HeroBanner';
-import { ContentSwitcher } from '@arc-ui/components/dist/ContentSwitcher';
-import { ContentSwitcherDropdown } from '@arc-ui/components/dist/ContentSwitcherDropdown';
+import React, { useState, useEffect, Suspense, useId, useRef } from 'react';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { Image as Image$2 } from '@arc-ui/components/Image';
+import { Disclosure } from '@arc-ui/components/Disclosure';
+import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
+import { Avatar } from '@arc-ui/components/Avatar';
+import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
+import { useMediaQuery } from '@arc-ui/components/use-media-query';
+import { Icon } from '@arc-ui/components/Icon';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+import { Download } from '@arc-ui/components/Download';
+import { AppButton } from '@arc-ui/components/AppButton';
+import { Link } from '@arc-ui/components/Link';
+import { Carousel } from '@arc-ui/components/Carousel';
+import { MediaCard } from '@arc-ui/components/MediaCard';
+import { ImpactCard } from '@arc-ui/components/ImpactCard';
+import { InformationCard } from '@arc-ui/components/InformationCard';
+import { TypographyCard } from '@arc-ui/components/TypographyCard';
+import { Box } from '@arc-ui/components/Box';
+import { Rule } from '@arc-ui/components/Rule';
+import { Align } from '@arc-ui/components/Align';
+import { TabbedBanner, InformationCard as InformationCard$1, VerticalSpace as VerticalSpace$1, ButtonV2 as ButtonV2$1, VisuallyHidden } from '@arc-ui/components';
+import { Tag } from '@arc-ui/components/Tag';
+import { Toast, ToastNotification } from '@arc-ui/components/Toast';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -65,6 +65,54 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -173,15 +221,19 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-var styles$a = {"section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
+var styles$c = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
 
 var SectionHeading = function (_a) {
-    var _b;
-    var heading = _a.heading, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel"]);
+    var _b, _c;
+    var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "image"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b[styles$a["section-header--padded"]] = isPadded,
+            _b[styles$c["section-header"]] = true,
+            _b[styles$c["section-header--padded"]] = isPadded,
             _b)) }, filterDataAttrs(props)),
-        React.createElement(Heading, { level: headingLevel, id: id, size: "xl" }, heading),
+        React.createElement("div", { className: classNames((_c = {}, _c[styles$c["section-header--hasImage"]] = image, _c)) },
+            image && (React.createElement("div", null,
+                React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
+            React.createElement(Heading, { level: headingLevel, id: id, size: "xl" }, heading)),
         content && (React.createElement(React.Fragment, null,
             React.createElement(VerticalSpace, { size: "24" }),
             React.createElement(Text, { size: "l", elementType: "p" }, content)))));
@@ -205,7 +257,7 @@ var Accordion = function (_a) {
         React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
 };
 
-var styles$9 = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
+var styles$b = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
 
 var Author = function (_a) {
     var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
@@ -214,54 +266,54 @@ var Author = function (_a) {
     var isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
     return (React.createElement("div", __assign({}, filterDataAttrs(props)),
         React.createElement(Grid, { isFluid: true, isGutterless: true },
-            React.createElement(Grid.Row, { align: "center" },
-                React.createElement(Grid.Col, { xs: isLargeAvatar ? 12 : "auto" },
-                    React.createElement("div", { className: isLargeAvatar ? styles$9.largeAvatar : undefined },
+            React.createElement(GridRow, { align: "center" },
+                React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
+                    React.createElement("div", { className: isLargeAvatar ? styles$b.largeAvatar : undefined },
                         React.createElement(Avatar, __assign({}, avatar)))),
-                React.createElement(Grid.Col, null,
-                    React.createElement("div", { className: "".concat(!isLargeAvatar && styles$9.authorContent), "data-testid": "authorContent" },
+                React.createElement(GridCol, null,
+                    React.createElement("div", { className: "".concat(!isLargeAvatar && styles$b.authorContent), "data-testid": "authorContent" },
                         React.createElement(Heading, { size: "xs" }, name),
                         React.createElement(Text, { size: "s" }, title)))))));
 };
 
 /**
  * Do not edit directly
- * Generated on Fri, 29 Nov 2024 12:01:05 GMT
+ * Generated on Thu, 06 Mar 2025 14:17:53 GMT
  */
 var ArcSizeBreakpointsS = "636px";
 var ArcSizeBreakpointsM = "768px";
 var ArcSizeBreakpointsL = "1024px";
 var ArcSizeBreakpointsXl = "1280px";
 
-var styles$8 = {"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 styles$a = {"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$1 = function (_a) {
     var heading = _a.heading, headingLevel = _a.headingLevel, children = _a.children;
-    return (React.createElement("div", { className: styles$8.mediaContainer },
+    return (React.createElement("div", { className: styles$a.mediaContainer },
         React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
-        children && (React.createElement("div", { className: styles$8.content },
+        children && (React.createElement("div", { className: styles$a.content },
             React.createElement(VerticalSpace, { size: "24" }),
             React.createElement(Text, { size: "l" }, children)))));
 };
 
 var Image$1 = function (_a) {
     var sources = _a.sources, props = __rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles$8.imgWrapper },
+    return (React.createElement("div", { className: styles$a.imgWrapper },
         React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React.createElement(Image$2.Source, __assign({ key: source.srcSet }, source))); }))));
+            sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
 };
 
 var IconList = function (_a) {
     var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
-    return (React.createElement("ul", { className: styles$8.list }, listItems.map(function (_a) {
+    return (React.createElement("ul", { className: styles$a.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$8.listItem, (_b = {},
-                _b[styles$8.listItemCentered] = !text,
+        return (React.createElement("li", { key: heading, className: classNames(styles$a.listItem, (_b = {},
+                _b[styles$a.listItemCentered] = !text,
                 _b)) },
-            React.createElement("div", { className: styles$8.listItemIconContainer },
+            React.createElement("div", { className: styles$a.listItemIconContainer },
                 React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
-            React.createElement("div", { className: styles$8.listItemTextContainer },
+            React.createElement("div", { className: styles$a.listItemTextContainer },
                 React.createElement(Heading, { level: "3", size: "s" }, heading),
                 text && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
@@ -269,24 +321,24 @@ var IconList = function (_a) {
     })));
 };
 
-var Button = function (props) { return (React.createElement("div", { className: styles$8.buttonContainer },
+var Button = function (props) { return (React.createElement("div", { className: styles$a.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$8.container, styles$8["container--".concat(type)], styles$8["container--align-".concat(alignment)], (_b = {},
-            _b[styles$8["container--reverse"]] = isReverseOrder,
+    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$a.container, styles$a["container--".concat(type)], styles$a["container--align-".concat(alignment)], (_b = {},
+            _b[styles$a["container--reverse"]] = isReverseOrder,
             _b)) }, children));
 };
 
 var Column = function (_a) {
     var children = _a.children;
-    return (React.createElement("div", { className: styles$8.col }, children));
+    return (React.createElement("div", { className: styles$a.col }, children));
 };
 
 var VideoPlayer$1 = React.lazy(function () {
-    return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
+    return import('@arc-ui/components/VideoPlayer').then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
         return ({
             default: VideoPlayer,
@@ -303,7 +355,7 @@ var MediaTemplate = function (_a) {
     }, []);
     return (React.createElement("div", null,
         !isMinWidthArcBreakpointXl && (React.createElement(Columns, null,
-            React.createElement(Columns.Col, { span: 12, spanM: 9 },
+            React.createElement(ColumnsCol, { span: 12, spanM: 9 },
                 React.createElement(MediaContent$1, { heading: heading, headingLevel: headingLevel }, content)))),
         React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
             React.createElement(Column, null,
@@ -334,25 +386,22 @@ var ContentTemplate = function (_a) {
  */
 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 (React.createElement(ContentTemplate, __assign({ listItems: listItems, heading: heading, headingLevel: headingLevel, button: button, content: content }, filterDataAttrs(props))));
     }
     return null;
 };
 
-var styles$7 = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
+var styles$9 = {"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$7.headingContainer },
-            React.createElement(Heading, { size: "xl", level: headingLevel }, heading),
-            React.createElement(VerticalSpace, { size: "24" }),
-            React.createElement(Text, { size: "l" }, content)),
+        React.createElement("div", { className: styles$9.headingContainer },
+            React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content })),
         React.createElement(VerticalSpace, { size: "40" }),
         downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
             React.createElement(Download, __assign({}, props)),
@@ -813,8 +862,6 @@ var formatters$1 = {
 };
 
 var dayPeriodEnum = {
-  am: 'am',
-  pm: 'pm',
   midnight: 'midnight',
   noon: 'noon',
   morning: 'morning',
@@ -2547,17 +2594,17 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-var styles$6 = {"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 styles$8 = {"labelDate":"FeaturePost-module_labelDate__NXOgY","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 = __rest(_a, ["sources"]);
-    return (React.createElement("div", { className: styles$6.imgWrapper },
+    return (React.createElement("div", { className: styles$8.imgWrapper },
         React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
-            sources.map(function (source) { return (React.createElement(Image$2.Source, __assign({ key: source.srcSet }, source))); }))));
+            sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
 };
 
 var VideoPlayer = React.lazy(function () {
-    return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
+    return import('@arc-ui/components/VideoPlayer').then(function (_a) {
         var VideoPlayer = _a.VideoPlayer;
         return ({
             default: VideoPlayer,
@@ -2583,17 +2630,17 @@ var FeaturePost = function (_a) {
     var _b;
     var heading = _a.heading, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "headingLevel", "label", "image", "content", "footer", "video", "isReverseOrder"]);
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
-    return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$6.featurePost, (_b = {},
-            _b[styles$6.featurePostReversed] = isReverseOrder,
+    return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$8.featurePost, (_b = {},
+            _b[styles$8.featurePostReversed] = isReverseOrder,
             _b)) }, filterDataAttrs(props)),
-        React.createElement("div", { className: styles$6.col },
-            React.createElement("div", { className: styles$6.contentContainer },
+        React.createElement("div", { className: styles$8.col },
+            React.createElement("div", { className: styles$8.contentContainer },
                 label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
-                    React.createElement(Grid.Row, { align: "baseline" },
-                        React.createElement(Grid.Col, { xs: 12, m: "auto" },
+                    React.createElement(GridRow, { align: "baseline" },
+                        React.createElement(GridCol, { xs: 12, m: "auto" },
                             React.createElement(Heading, { size: "xxs" }, label.text.toUpperCase())),
-                        React.createElement(Grid.Col, { xs: 12, m: "auto" },
-                            React.createElement("div", { className: styles$6.labelDate },
+                        React.createElement(GridCol, { xs: 12, m: "auto" },
+                            React.createElement("div", { className: styles$8.labelDate },
                                 React.createElement(Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "LLLL d, yyyy"))) : (React.createElement("span", null, label.date)))))),
                     React.createElement(VerticalSpace, { size: "24" }))),
                 React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
@@ -2611,36 +2658,36 @@ var FeaturePost = function (_a) {
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace, { size: "40" }),
                     React.createElement(Grid, { isGutterless: true, isFluid: true },
-                        React.createElement(Grid.Row, null,
-                            footer.appStore && (React.createElement(Grid.Col, { xs: 12, s: "auto" },
+                        React.createElement(GridRow, null,
+                            footer.appStore && (React.createElement(GridCol, { xs: 12, s: "auto" },
                                 React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
-                            footer.googlePlay && (React.createElement(Grid.Col, { xs: 12, s: "auto" },
-                                React.createElement("div", { className: styles$6.googlePlayButtonWrapper },
+                            footer.googlePlay && (React.createElement(GridCol, { xs: 12, s: "auto" },
+                                React.createElement("div", { className: styles$8.googlePlayButtonWrapper },
                                     React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
-        isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$6.col },
-            React.createElement("div", { "data-testid": "desktop-img", className: styles$6.imgContainer },
+        isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$8.col },
+            React.createElement("div", { "data-testid": "desktop-img", className: styles$8.imgContainer },
                 React.createElement(MediaContent, { image: image, video: video }))))));
 };
 
-var styles$5 = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
+var styles$7 = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 
 var HighlightItem = function (_a) {
     var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
-    return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$5.highlightItem },
-        icon && (React.createElement("div", { className: styles$5.Icon },
+    return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$7.highlightItem },
+        icon && (React.createElement("div", { className: styles$7.Icon },
             React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
         React.createElement(VerticalSpace, { size: "16" }),
         React.createElement(Heading, { level: "3", size: "m" }, heading),
         React.createElement(VerticalSpace, { size: "16" }),
         React.createElement(Text, null, text),
         React.createElement(VerticalSpace, { size: "16" }),
-        link && (React.createElement(Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+        link && (React.createElement(Link, { href: link.url, id: link.url, onClick: link.onClick, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
 };
 
 var HighlightList = function (_a) {
     var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
     var id = useId();
-    return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$5.highlights, styles$5["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
+    return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$7.highlights, styles$7["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
         var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
         return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
     })));
@@ -2657,7 +2704,7 @@ var Highlights = function (_a) {
         React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
 };
 
-var styles$4 = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
+var styles$6 = {"PromoListing":"PromoListing-module_PromoListing__6ensv","promoListingContainer":"PromoListing-module_promoListingContainer__vwez-","cardGrid":"PromoListing-module_cardGrid__llf73","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid2Columns":"PromoListing-module_cardGrid2Columns__qPLQk","cardGrid3Cards":"PromoListing-module_cardGrid3Cards__VKWMs","cardGrid5Cards":"PromoListing-module_cardGrid5Cards__ywl5k","cardGrid3Columns":"PromoListing-module_cardGrid3Columns__g0Xru","cardGrid4Cards":"PromoListing-module_cardGrid4Cards__5Bv5u","cardGrid2Cards":"PromoListing-module_cardGrid2Cards__wDc4S"};
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
@@ -2672,7 +2719,7 @@ var PromoListing = function (_a) {
         card.type === "impact-card" && React.createElement(ImpactCard, __assign({}, card)),
         card.type === "information-card" && React.createElement(InformationCard, __assign({}, card)),
         card.type === "typography-card" && React.createElement(TypographyCard, __assign({}, card)))); };
-    return (React.createElement("div", { className: styles$4.PromoListing },
+    return (React.createElement("div", { className: styles$6.PromoListing },
         React.createElement(SectionHeading, { isPadded: true, "data-testid": "PromoListing-header", heading: heading, headingLevel: headingLevel, content: content }),
         isCarousel && !isMinWidthArcBreakpointL ? (React.createElement(Carousel, { itemsPerSlide: 1, responsive: {
                 s: {
@@ -2685,42 +2732,42 @@ var PromoListing = function (_a) {
                     isPartialVisible: true,
                     itemsPerSlide: 2,
                 },
-            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles$4.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: classNames(styles$4.cardGrid, styles$4["cardGrid".concat(columnCount, "Columns")], styles$4["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles$4.promoListingContainer), key: index }, getCard(card))); })))));
+            } }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "card-".concat(id, "-").concat(i), className: styles$6.carouselSlide }, getCard(card))); }))) : (React.createElement("div", { className: classNames(styles$6.cardGrid, styles$6["cardGrid".concat(columnCount, "Columns")], styles$6["cardGrid".concat(cards.length, "Cards")]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("div", { "data-testid": "promoList-card".concat(index), className: classNames(styles$6.promoListingContainer), key: index }, getCard(card))); })))));
 };
 
-var styles$3 = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
+var styles$5 = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quote-module_quoteContent__kWc51","quoteDefault":"Quote-module_quoteDefault__tU5db","quoteSecondary":"Quote-module_quoteSecondary__3Rk3f","quoteIcon":"Quote-module_quoteIcon__HK1TV"};
 
 /**
  * Use `Quote` where a quote or testimonial from an existing customer or stakeholder would help build trust and credibility with potential new customers. It's commonly used on product pages where customers would learn about a product or service that we offer.*/
 var Quote = function (_a) {
     var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = __rest(_a, ["author", "styling", "content", "citeUrl"]);
     return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterDataAttrs(props)),
-        React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$3.blockQuote, styles$3["quote".concat(styling)]), cite: citeUrl },
-            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$3.quoteIcon, "aria-hidden": "true" },
+        React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$5.blockQuote, styles$5["quote".concat(styling)]), cite: citeUrl },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$5.quoteIcon, "aria-hidden": "true" },
                 React.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
-            React.createElement("p", { className: styles$3.quoteContent }, content)),
+            React.createElement("p", { className: styles$5.quoteContent }, content)),
         author && (React.createElement(Author, { name: author.name, title: author.title, avatar: author.avatar }))));
 };
 
-var styles$2 = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
+var styles$4 = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
 
 var Summary = function (_a) {
     var content = _a.content, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
     return (React.createElement(Box, { isBorderRadius: true, borderWidth: "thin", padding: "24" },
-        React.createElement("div", { className: styles$2.row }, content.map(function (_a, i) {
+        React.createElement("div", { className: styles$4.row }, content.map(function (_a, i) {
             var heading = _a.heading, text = _a.text;
             return (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: styles$2.col },
+                React.createElement("div", { className: styles$4.col },
                     React.createElement(Heading, { size: "s", level: headingLevel }, heading),
                     React.createElement(VerticalSpace, { size: "8" }),
                     React.createElement(Text, { size: "s" }, text)),
-                i !== content.length - 1 && (React.createElement("div", { className: styles$2.ruleContainer },
+                i !== content.length - 1 && (React.createElement("div", { className: styles$4.ruleContainer },
                     React.createElement(Rule, { orientation: isMinWidthArcBreakpointS ? "vertical" : "horizontal" })))));
         }))));
 };
 
-var styles$1 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
+var styles$3 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
 
 var getLinkProps = function (link) {
     return link.openInNewTab
@@ -2735,11 +2782,11 @@ var Statistics = function (_a) {
     var headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
     var id = useId();
     return (React.createElement(Columns, null,
-        React.createElement(Columns.Col, { spanM: 9 },
+        React.createElement(ColumnsCol, { spanM: 9 },
             React.createElement(SectionHeading, { heading: heading, headingLevel: headingLevel, content: content }),
             React.createElement(VerticalSpace, { size: "16" })),
-        React.createElement(Columns.Col, { spanL: 9 },
-            React.createElement("ul", { className: styles$1.list }, statistics.map(function (_a, i) {
+        React.createElement(ColumnsCol, { spanL: 9 },
+            React.createElement("ul", { className: styles$3.list }, statistics.map(function (_a, i) {
                 var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
                 return (React.createElement("li", { key: "statistic-".concat(id, "-").concat(i) },
                     i !== 0 && (React.createElement(React.Fragment, null,
@@ -2747,11 +2794,11 @@ var Statistics = function (_a) {
                         React.createElement(Rule, null),
                         React.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
                     React.createElement(Columns, null,
-                        React.createElement(Columns.Col, { spanS: 6, spanM: 8 },
+                        React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
                             React.createElement(Align, { vertical: "center" },
-                                React.createElement("div", { className: styles$1.statWrapper },
+                                React.createElement("div", { className: styles$3.statWrapper },
                                     React.createElement(Heading, { color: "brand", size: "xxl" }, stat)))),
-                        React.createElement(Columns.Col, { spanS: 6, spanM: 4 },
+                        React.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
                             React.createElement(Text, null, copy),
                             link && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace, { size: "12" }),
@@ -2759,38 +2806,263 @@ var Statistics = function (_a) {
                             source && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace, { size: "12" }),
                                 React.createElement(Text, { size: "xs" },
-                                    React.createElement("span", { className: styles$1.mutedText }, source)))),
+                                    React.createElement("span", { className: styles$3.mutedText }, source)))),
                             sourceUrl && (React.createElement(Text, { size: "xs" },
-                                React.createElement("a", { className: styles$1.mutedText, href: sourceUrl }, sourceUrl)))))));
+                                React.createElement("a", { className: styles$3.mutedText, href: sourceUrl }, sourceUrl)))))));
             })))));
 };
 
-var styles = {"contentSwitcherWrapper":"BannerWithTabs-module_contentSwitcherWrapper__xvz39","contentSwitcherDropdownWrapper":"BannerWithTabs-module_contentSwitcherDropdownWrapper__eT5zq"};
+var styles$2 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
 
 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];
+    var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classNames(styles$2.bannerWithTabsHeading, (_b = {},
+                _b[styles$2.bannerWithTabsHeadingCentered] = alignTypography === "center",
+                _b)), style: { color: isInverted ? "white" : "black" } },
+            React.createElement(SectionHeading, { heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
+        React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
+};
+
+const ArcIconSocialLinkedin = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 32 32",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M25.856 25.86H21.71v-6.496c0-1.55-.032-3.544-2.161-3.544-2.162 0-2.492 1.686-2.492 3.43v6.61H12.91V12.5h3.983v1.821h.053c.557-1.05 1.91-2.158 3.932-2.158 4.201 0 4.978 2.765 4.978 6.364v7.334zM8.226 10.673a2.406 2.406 0 01-2.406-2.41 2.408 2.408 0 112.407 2.41zm2.08 15.189H6.148V12.5h4.158v13.36zM27.929 2H4.066C2.924 2 2 2.903 2 4.017v23.966C2 29.098 2.924 30 4.066 30h23.86c1.14 0 2.074-.902 2.074-2.017V4.017C30 2.903 29.067 2 27.926 2h.003z",
+      fill: "currentColor",
+    }),
+  );
+
+const ArcIconSocialX = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 32 32",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M24.0342 3H28.3116L18.9688 13.6389L30 28.1034H21.3608L14.5789 19.3354L6.8402 28.1034H2.56281L12.5809 16.7385L2 3H10.8643L16.9709 11.0141L24.0342 3ZM22.5427 25.5624H24.9065L9.56985 5.40144H7.00905L22.5427 25.5624Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconLink = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M9.959,10.0127h2.417a5.99044,5.99044,0,0,1,5.22558,8.91552.5.5,0,1,0,.87207.48926A6.99034,6.99034,0,0,0,12.376,9.0127H9.959a6.98853,6.98853,0,0,0,0,13.97705h1.54a.5.5,0,1,0,0-1H9.959a5.98853,5.98853,0,0,1,0-11.977Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M22.0625,9.0127h-1.54a.5.5,0,0,0,0,1h1.54a5.98853,5.98853,0,0,1,0,11.97705h-2.417a5.99145,5.99145,0,0,1-5.22656-8.915.49955.49955,0,1,0-.8711-.48926,6.99,6.99,0,0,0,6.09766,10.4043h2.417a6.98853,6.98853,0,0,0,0-13.977Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconEmailUnread = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M29,6H3A1,1,0,0,0,2,7V25a1,1,0,0,0,1,1H29a1,1,0,0,0,1-1V7A1,1,0,0,0,29,6Zm0,1V8.71649L18.00049,16.33154a3.5158,3.5158,0,0,1-3.98438,0L3,8.70532V7Zm0,2.93292V22.08368l-8.77545-6.07544Zm-17.20819,6.0752L3,22.09485V9.92175ZM3,25V23.31128l9.67035-6.695.77643.53754a4.52223,4.52223,0,0,0,5.123,0l.77619-.53735L29,23.30011V25Z",
+      fill: "currentColor",
+    }),
+  );
+
+var styles$1 = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent":"ArticleSidebar-module_textContent__3nCfG","shareButtonContainer":"ArticleSidebar-module_shareButtonContainer__iAfHL","shareButton":"ArticleSidebar-module_shareButton__rb-1E"};
+
+/**
+ * Use `ArticleSidebar` to provide additional information about the article.
+ */
+var ArticleSidebar = function (_a) {
+    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection;
+    var id = useId();
+    var _b = useState(false), showToast = _b[0], setShowToast = _b[1];
+    var url = location.href;
+    var copyTextToClipBoard = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, navigator.clipboard.writeText(url)];
+                case 1:
+                    _a.sent();
+                    setShowToast(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var shareButtons = __spreadArray(__spreadArray([
+        {
+            isButton: true,
+            label: "Copy url to clipboard",
+            onClick: copyTextToClipBoard,
+            icon: BtIconLink,
+        },
+        {
+            label: "Share by email",
+            href: "mailto:?subject=".concat(share.articleTitle, "&body=").concat(url),
+            icon: BtIconEmailUnread,
+        }
+    ], (share.linkedin
+        ? [
+            {
+                label: "Share on LinkedIn",
+                href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(url),
+                icon: ArcIconSocialLinkedin,
+            },
+        ]
+        : []), true), (share.x
+        ? [
+            {
+                label: "Share on x",
+                href: "https://twitter.com/intent/tweet?url=".concat(url),
+                icon: ArcIconSocialX,
+            },
+        ]
+        : []), true);
     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) }));
+        React.createElement("div", { className: styles$1.textContent },
+            author && (React.createElement(React.Fragment, null,
+                React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
+            aboutSection && (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace, { size: "32" }),
+                React.createElement(Heading, { level: aboutSection.headingLevel }, aboutSection.heading),
+                React.createElement(VerticalSpace, { size: "16" }),
+                React.createElement(Text, { size: "s" }, aboutSection.content))),
+            additionalContent &&
+                additionalContent.map(function (_a) {
+                    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(VerticalSpace, { size: "16" }),
+                        React.createElement(Heading, { level: headingLevel, size: "xxs" }, heading),
+                        React.createElement(Text, { size: "s" }, content)));
                 })),
-                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))));
-            })))));
+        (author || aboutSection || additionalContent) && (React.createElement("div", { "data-testid": "content-rule" },
+            React.createElement(VerticalSpace, { size: "32" }),
+            React.createElement(Rule, null),
+            React.createElement(VerticalSpace, { size: "32" }))),
+        React.createElement(Heading, { level: linkSection.headingLevel }, linkSection.heading),
+        linkSection.links.map(function (_a) {
+            var text = _a.text, url = _a.url;
+            return (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace, { size: "8" }),
+                React.createElement("div", { key: "".concat(id, "-").concat(url) },
+                    React.createElement(Link, { size: "s", href: url }, text))));
+        }),
+        React.createElement(VerticalSpace, { size: "32" }),
+        topics && (React.createElement(React.Fragment, null,
+            React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
+            React.createElement(VerticalSpace, { size: "16" }),
+            React.createElement("div", { className: styles$1.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })),
+            React.createElement(VerticalSpace, { size: "32" }))),
+        React.createElement(Rule, null),
+        React.createElement(VerticalSpace, { size: "32" }),
+        React.createElement(Heading, { level: share.headingLevel }, share.heading),
+        React.createElement(VerticalSpace, { size: "16" }),
+        React.createElement("div", { className: styles$1.shareButtonContainer }, shareButtons.map(function (_a) {
+            var isButton = _a.isButton, label = _a.label, href = _a.href, icon = _a.icon, onClick = _a.onClick;
+            return (React.createElement("a", { key: "".concat(id, "-").concat(label), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$1.shareButton, "aria-label": label, href: href, onClick: onClick },
+                React.createElement(Icon, { icon: icon, size: 24 })));
+        })),
+        React.createElement(Toast, null,
+            React.createElement(ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
+};
+
+var styles = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
+
+/**
+ * Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
+ */
+var ProductNavigation = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, _b = _a.hideButton, hideButton = _b === void 0 ? false : _b, productList = _a.productList, _c = _a.defaultExpanded, defaultExpanded = _c === void 0 ? false : _c, minHeight = _a.minHeight, _d = _a.cardsToDisplay, cardsToDisplay = _d === void 0 ? 3 : _d, _e = _a.listIncrement, listIncrement = _e === void 0 ? 6 : _e, onClickMore = _a.onClickMore, onClickLess = _a.onClickLess, _f = _a.hideShowLess, hideShowLess = _f === void 0 ? false : _f, isLoading = _a.isLoading, image = _a.image, props = __rest(_a, ["heading", "headingLevel", "content", "hideButton", "productList", "defaultExpanded", "minHeight", "cardsToDisplay", "listIncrement", "onClickMore", "onClickLess", "hideShowLess", "isLoading", "image"]);
+    var _g = useState(false), hideLessButton = _g[0], setHideLessButton = _g[1];
+    var _h = useState(cardsToDisplay), skipLinkCard = _h[0], setSkipLinkCard = _h[1];
+    var _j = useState(productList.slice(0, cardsToDisplay)), displayList = _j[0], setDisplayList = _j[1];
+    var cardRef = useRef(null);
+    useEffect(function () {
+        if (defaultExpanded) {
+            setDisplayList(productList);
+        }
+    }, []);
+    var moveFocus = function () {
+        var _a;
+        (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var clickController = function () {
+        // show more / current list length + increment
+        if (displayList.length < productList.length) {
+            if (onClickMore)
+                onClickMore();
+            setSkipLinkCard(displayList.length);
+            setDisplayList(productList.slice(0, displayList.length + listIncrement));
+        }
+        // show less / reset to original list length
+        else {
+            if (onClickLess)
+                onClickLess();
+            setSkipLinkCard(cardsToDisplay);
+            setDisplayList(productList.slice(0, cardsToDisplay));
+        }
+        // hide "show less" button option when fully expanded
+        if (hideShowLess &&
+            displayList.length + listIncrement >= productList.length) {
+            setHideLessButton(true);
+        }
+    };
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
+    return (React.createElement("div", __assign({}, filterDataAttrs(props)),
+        React.createElement(SectionHeading, { isPadded: true, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, content: content, image: image }),
+        React.createElement("ul", { className: classNames(styles["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (_a, i) {
+            var label = _a.label, href = _a.href, heading = _a.heading, text = _a.text;
+            return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
+                React.createElement(InformationCard$1, { button: {
+                        label: label,
+                        href: href,
+                    }, minHeight: minHeight, heading: heading, headingLevel: "2", text: text })));
+        })),
+        React.createElement(VerticalSpace$1, { size: "40" }),
+        React.createElement("div", { style: { display: "flex" } },
+            !hideButton && !hideLessButton && (React.createElement(ButtonV2$1, { label: displayList.length < productList.length
+                    ? "Show more"
+                    : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
+            displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
+                React.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+                    React.createElement(ButtonV2$1, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
+            React.createElement(VisuallyHidden, null,
+                React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
+                    React.createElement("p", null,
+                        "Total products listed ",
+                        displayList.length,
+                        ". Total products hidden",
+                        " ",
+                        productList.length - displayList.length,
+                        "."))))));
 };
 
-export { Accordion, Author, BannerWithTabs, CopyLead, DownloadList, FeaturePost, Highlights, PromoListing, Quote, Statistics, Summary };
+export { Accordion, ArticleSidebar, Author, BannerWithTabs, CopyLead, DownloadList, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
 //# sourceMappingURL=index.es.js.map