@arc-ui/community-components 3.15.0 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +14 -14
- package/CHANGELOG.md +27 -0
- package/lib/ArticleCarousel/ArticleCarousel.cjs +1 -1
- package/lib/ArticleCarousel/ArticleCarousel.mjs +1 -1
- package/lib/ComparisonTable/ComparisonTable.cjs +317 -0
- package/lib/ComparisonTable/ComparisonTable.mjs +310 -0
- package/lib/ComparisonTable/styles.css +1 -0
- package/lib/CopyLead/CopyLead.cjs +1 -1
- package/lib/CopyLead/CopyLead.mjs +1 -1
- package/lib/FeaturePost/FeaturePost.cjs +13 -12
- package/lib/FeaturePost/FeaturePost.mjs +13 -12
- package/lib/FeaturePost/styles.css +1 -1
- package/lib/Highlights/Highlights.cjs +7 -7
- package/lib/Highlights/Highlights.mjs +7 -7
- package/lib/ProductCard/ProductCard.cjs +13 -35
- package/lib/ProductCard/ProductCard.mjs +12 -34
- package/lib/ProductNavigation/ProductNavigation.cjs +1 -1
- package/lib/ProductNavigation/ProductNavigation.mjs +1 -1
- package/lib/PromoListing/PromoListing.cjs +1 -1
- package/lib/PromoListing/PromoListing.mjs +1 -1
- package/lib/Summary/Summary.cjs +1 -1
- package/lib/Summary/Summary.mjs +1 -1
- package/lib/_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs +38 -0
- package/lib/_shared/cjs/{index.es-C-y6aRIY.cjs → index.es-oEhoU2Bd.cjs} +1 -1
- package/lib/_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs +35 -0
- package/lib/_shared/esm/{index.es-YxZ1vAot.mjs → index.es-DujqqZXe.mjs} +1 -1
- package/lib/index.cjs +508 -200
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +213 -22
- package/lib/index.d.mts +213 -22
- package/lib/index.mjs +503 -201
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +16 -16
- package/src/components/ComparisonTable/ComparisonTable.module.css +503 -0
- package/src/components/ComparisonTable/ComparisonTable.tsx +104 -0
- package/src/components/ComparisonTable/components/Cell/Cell.tsx +44 -0
- package/src/components/ComparisonTable/components/ControlCell/ControlCell.tsx +21 -0
- package/src/components/ComparisonTable/components/DesktopRow/DesktopRow.tsx +59 -0
- package/src/components/ComparisonTable/components/DesktopTable/DesktopTable.tsx +150 -0
- package/src/components/ComparisonTable/components/FeatureCell/FeatureCell.module.css +56 -0
- package/src/components/ComparisonTable/components/FeatureCell/FeatureCell.tsx +96 -0
- package/src/components/ComparisonTable/components/HeaderCell/HeaderCell.tsx +59 -0
- package/src/components/ComparisonTable/components/MobileRow/MobileRow.tsx +77 -0
- package/src/components/ComparisonTable/components/MobileTable/MobileTable.tsx +103 -0
- package/src/components/ComparisonTable/components/Section/Section.tsx +75 -0
- package/src/components/ComparisonTable/components/SectionToggle/SectionToggle.tsx +63 -0
- package/src/components/ComparisonTable/components/SubHeaderCell/SubHeaderCell.tsx +62 -0
- package/src/components/ComparisonTable/index.ts +22 -0
- package/src/components/ComparisonTable/types/comparison-column.ts +22 -0
- package/src/components/ComparisonTable/types/comparison-row.ts +23 -0
- package/src/components/ComparisonTable/types/comparison-section.ts +39 -0
- package/src/components/ComparisonTable/types/comparison-sub-row.ts +8 -0
- package/src/components/ComparisonTable/utils/group-rows.ts +69 -0
- package/src/components/ComparisonTable/utils/use-section-state.ts +45 -0
- package/src/components/FeaturePost/FeaturePost.module.css +24 -2
- package/src/components/FeaturePost/FeaturePost.tsx +26 -25
- package/src/components/FeaturePost/types/feature-post-cta-footer.ts +4 -3
- package/src/components/Highlights/Highlights.tsx +5 -32
- package/src/components/ProductCard/ProductCard.tsx +14 -14
- package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.tsx +11 -3
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.module.css +1 -2
- package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.tsx +14 -3
- package/src/components/ProductCardGrid/ProductCardGrid.tsx +8 -8
- package/src/components/ProductCardGrid/components/CardGrid/CardGrid.tsx +6 -6
- package/src/components/index.ts +1 -0
- package/versions.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -257,7 +257,7 @@ var filterAttrs = function (props) {
|
|
|
257
257
|
const BtIconCrossAlt =
|
|
258
258
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
259
259
|
|
|
260
|
-
var styles$
|
|
260
|
+
var styles$C = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
261
261
|
|
|
262
262
|
var HeaderBarNotification = function (_a) {
|
|
263
263
|
var _b;
|
|
@@ -276,33 +276,33 @@ var HeaderBarNotification = function (_a) {
|
|
|
276
276
|
localStorage.setItem(localStorageId, "true");
|
|
277
277
|
setShowNotification(false);
|
|
278
278
|
};
|
|
279
|
-
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$
|
|
280
|
-
React.createElement("div", { className: styles$
|
|
281
|
-
(image || icon) && (React.createElement("div", { className: styles$
|
|
279
|
+
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$C.popupNotification, (_b = {}, _b[styles$C.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$C[s]; })), content: React.createElement("div", { className: styles$C.container },
|
|
280
|
+
React.createElement("div", { className: styles$C.content },
|
|
281
|
+
(image || icon) && (React.createElement("div", { className: styles$C.image },
|
|
282
282
|
image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
283
283
|
icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
|
|
284
|
-
React.createElement("div", { className: styles$
|
|
284
|
+
React.createElement("div", { className: styles$C.details },
|
|
285
285
|
tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
|
|
286
286
|
React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
|
|
287
287
|
children)),
|
|
288
288
|
button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
289
|
-
React.createElement("div", { className: styles$
|
|
289
|
+
React.createElement("div", { className: styles$C.closeButtonContainer },
|
|
290
290
|
React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
291
291
|
React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
292
292
|
React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
-
var styles$
|
|
295
|
+
var styles$B = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
|
|
296
296
|
|
|
297
297
|
var AccordionHeading = function (_a) {
|
|
298
298
|
var _b, _c;
|
|
299
299
|
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, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "headingSize", "image"]);
|
|
300
300
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
301
|
-
_b[styles$
|
|
302
|
-
_b[styles$
|
|
303
|
-
_b[styles$
|
|
301
|
+
_b[styles$B["accordion-header"]] = true,
|
|
302
|
+
_b[styles$B["accordion-header--padded"]] = isPadded,
|
|
303
|
+
_b[styles$B["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
304
304
|
_b)) }, filterAttrs(props)),
|
|
305
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
305
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$B["accordion-header--hasImage"]] = image, _c)) },
|
|
306
306
|
image && (React.createElement("div", null,
|
|
307
307
|
React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
308
308
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -311,25 +311,25 @@ var AccordionHeading = function (_a) {
|
|
|
311
311
|
React.createElement(Text.Text, { size: "l", elementType: "p" }, content)))));
|
|
312
312
|
};
|
|
313
313
|
|
|
314
|
-
var styles$
|
|
314
|
+
var styles$A = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
315
315
|
|
|
316
316
|
var AccordionDisclosureList = function (_a) {
|
|
317
317
|
var disclosureList = _a.disclosureList;
|
|
318
318
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
319
319
|
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, id = _a.id, props = __rest(_a, ["children", "summary", "isOpen", "indentDetails", "headingLevel", "id"]);
|
|
320
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
320
|
+
return (React.createElement("li", { key: id, className: styles$A.AccordionDisclosureListItem, id: id },
|
|
321
321
|
React.createElement(Disclosure.Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
322
322
|
})));
|
|
323
323
|
};
|
|
324
324
|
|
|
325
|
-
var styles$
|
|
325
|
+
var styles$z = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
326
326
|
|
|
327
327
|
/**
|
|
328
328
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
329
329
|
*/
|
|
330
330
|
var Accordion = function (_a) {
|
|
331
331
|
var heading = _a.heading, headingLevel = _a.headingLevel, headingSize = _a.headingSize, content = _a.content, id = _a.id, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "headingSize", "content", "id", "disclosureList"]);
|
|
332
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
332
|
+
return (React.createElement("div", __assign({ className: styles$z.Accordion }, filterAttrs(props)),
|
|
333
333
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
334
334
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
335
335
|
};
|
|
@@ -988,7 +988,7 @@ function requireDebounce () {
|
|
|
988
988
|
var debounceExports = requireDebounce();
|
|
989
989
|
var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
990
990
|
|
|
991
|
-
var styles$
|
|
991
|
+
var styles$y = {"sectionHeading--hasImage":"SectionHeading-module_sectionHeading--hasImage__qaz6n","sectionHeading--isCentered":"SectionHeading-module_sectionHeading--isCentered__i0fR8","sectionHeading-content":"SectionHeading-module_sectionHeading-content__ufB6w"};
|
|
992
992
|
|
|
993
993
|
var SectionHeading = function (_a) {
|
|
994
994
|
var _b, _c;
|
|
@@ -996,14 +996,14 @@ var SectionHeading = function (_a) {
|
|
|
996
996
|
return (React.createElement(Columns.Columns, null,
|
|
997
997
|
React.createElement(Columns.ColumnsCol, { spanM: isPadded ? 9 : 12 },
|
|
998
998
|
React.createElement("div", __assign({ className: classNames((_b = {},
|
|
999
|
-
_b[styles$
|
|
999
|
+
_b[styles$y["sectionHeading--isCentered"]] = isCentered,
|
|
1000
1000
|
_b)) }, filterAttrs(props)),
|
|
1001
1001
|
React.createElement("div", { className: classNames((_c = {},
|
|
1002
|
-
_c[styles$
|
|
1002
|
+
_c[styles$y["sectionHeading--hasImage"]] = image,
|
|
1003
1003
|
_c)) },
|
|
1004
1004
|
image && React.createElement(Image$2.Image, __assign({}, image, { width: 68, fit: "cover" })),
|
|
1005
1005
|
React.createElement(Heading.Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
1006
|
-
content && (React.createElement("div", { className: styles$
|
|
1006
|
+
content && (React.createElement("div", { className: styles$y["sectionHeading-content"] },
|
|
1007
1007
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
1008
1008
|
React.createElement(Text.Text, { size: "l", elementType: "p" }, content))),
|
|
1009
1009
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" })))));
|
|
@@ -1011,7 +1011,7 @@ var SectionHeading = function (_a) {
|
|
|
1011
1011
|
|
|
1012
1012
|
/**
|
|
1013
1013
|
* Do not edit directly
|
|
1014
|
-
* Generated on Tue,
|
|
1014
|
+
* Generated on Tue, 22 Sep 2026 09:38:58 GMT
|
|
1015
1015
|
*/
|
|
1016
1016
|
var ArcSizeBreakpointsXs = "320px";
|
|
1017
1017
|
var ArcSizeBreakpointsS = "636px";
|
|
@@ -1038,7 +1038,7 @@ var ArcBreakpoints = {
|
|
|
1038
1038
|
xs: parseInt(ArcSizeBreakpointsXs, 10),
|
|
1039
1039
|
};
|
|
1040
1040
|
|
|
1041
|
-
var styles$
|
|
1041
|
+
var styles$x = {"carouselWrapper":"ArticleCarousel-module_carouselWrapper__3mmGu","cardWrapperCarousel":"ArticleCarousel-module_cardWrapperCarousel__v3jv1","lastCard":"ArticleCarousel-module_lastCard__my93x"};
|
|
1042
1042
|
|
|
1043
1043
|
/**
|
|
1044
1044
|
* Use `ArticleCarousel` to give supporting information about a page or proposition in the form of the `Carousel` containing only `MediaCard` components.
|
|
@@ -1068,17 +1068,17 @@ var ArticleCarousel = function (_a) {
|
|
|
1068
1068
|
}, [minHeights, checkMinHeight]);
|
|
1069
1069
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
1070
1070
|
React.createElement(SectionHeading, { isPadded: isPadded, id: id, "data-testid": "ArticleCarousel-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content, isCentered: isCentered }),
|
|
1071
|
-
React.createElement("div", { className: styles$
|
|
1071
|
+
React.createElement("div", { className: styles$x.carouselWrapper },
|
|
1072
1072
|
React.createElement(Carousel.Carousel, { overflow: isMinWidthArcBreakpointL ? "hidden" : "visible", itemsPerSlide: isMinWidthArcBreakpointL ? 3 : 1, itemsToScroll: isMinWidthArcBreakpointL ? 3 : 1, behavior: isMinWidthArcBreakpointL ? "default" : "adaptive", withGutter: isMinWidthArcBreakpointL ? true : false }, cards.map(function (card, i) {
|
|
1073
1073
|
var _a;
|
|
1074
|
-
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$
|
|
1075
|
-
_a[styles$
|
|
1074
|
+
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$x.carouselSlide, styles$x.cardWrapperCarousel, (_a = {},
|
|
1075
|
+
_a[styles$x.lastCard] = i === cards.length - 1,
|
|
1076
1076
|
_a)) },
|
|
1077
1077
|
React.createElement(MediaCard.MediaCard, __assign({ isContained: cardsContained, minHeight: minimumHeight }, card))));
|
|
1078
1078
|
})))));
|
|
1079
1079
|
};
|
|
1080
1080
|
|
|
1081
|
-
var styles$
|
|
1081
|
+
var styles$w = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
1082
1082
|
|
|
1083
1083
|
var Author = function (_a) {
|
|
1084
1084
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -1089,10 +1089,10 @@ var Author = function (_a) {
|
|
|
1089
1089
|
React.createElement(Grid.Grid, { isFluid: true, isGutterless: true },
|
|
1090
1090
|
React.createElement(Grid.GridRow, { align: "center" },
|
|
1091
1091
|
React.createElement(Grid.GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
1092
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
1092
|
+
React.createElement("div", { className: isLargeAvatar ? styles$w.largeAvatar : undefined },
|
|
1093
1093
|
React.createElement(Avatar.Avatar, __assign({}, avatar)))),
|
|
1094
1094
|
React.createElement(Grid.GridCol, null,
|
|
1095
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
1095
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$w.authorContent), "data-testid": "authorContent" },
|
|
1096
1096
|
React.createElement(Heading.Heading, { size: "xs" }, name),
|
|
1097
1097
|
React.createElement(Text.Text, { size: "s" }, title)))))));
|
|
1098
1098
|
};
|
|
@@ -1107,35 +1107,35 @@ var MultiLineText = function (_a) {
|
|
|
1107
1107
|
React.createElement(Text.Text, __assign({}, textProps), paragraph))); })));
|
|
1108
1108
|
};
|
|
1109
1109
|
|
|
1110
|
-
var styles$
|
|
1110
|
+
var styles$v = {"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"};
|
|
1111
1111
|
|
|
1112
1112
|
var MediaContent$1 = function (_a) {
|
|
1113
1113
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content;
|
|
1114
|
-
return (React.createElement("div", { className: styles$
|
|
1114
|
+
return (React.createElement("div", { className: styles$v.mediaContainer },
|
|
1115
1115
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
1116
|
-
content && (React.createElement("div", { className: styles$
|
|
1116
|
+
content && (React.createElement("div", { className: styles$v.content },
|
|
1117
1117
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
1118
1118
|
React.createElement(MultiLineText, { text: content, size: "l" })))));
|
|
1119
1119
|
};
|
|
1120
1120
|
|
|
1121
1121
|
var Image$1 = function (_a) {
|
|
1122
1122
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
1123
|
-
return (React.createElement("div", { className: styles$
|
|
1123
|
+
return (React.createElement("div", { className: styles$v.imgWrapper },
|
|
1124
1124
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
1125
1125
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
1126
1126
|
};
|
|
1127
1127
|
|
|
1128
1128
|
var IconList = function (_a) {
|
|
1129
1129
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
1130
|
-
return (React.createElement("ul", { className: styles$
|
|
1130
|
+
return (React.createElement("ul", { className: styles$v.list }, listItems.map(function (_a) {
|
|
1131
1131
|
var _b;
|
|
1132
1132
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
1133
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
1134
|
-
_b[styles$
|
|
1133
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$v.listItem, (_b = {},
|
|
1134
|
+
_b[styles$v.listItemCentered] = !text,
|
|
1135
1135
|
_b)) },
|
|
1136
|
-
React.createElement("div", { className: styles$
|
|
1136
|
+
React.createElement("div", { className: styles$v.listItemIconContainer },
|
|
1137
1137
|
React.createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
1138
|
-
React.createElement("div", { className: styles$
|
|
1138
|
+
React.createElement("div", { className: styles$v.listItemTextContainer },
|
|
1139
1139
|
React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
|
|
1140
1140
|
text && (React.createElement(React.Fragment, null,
|
|
1141
1141
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -1143,20 +1143,20 @@ var IconList = function (_a) {
|
|
|
1143
1143
|
})));
|
|
1144
1144
|
};
|
|
1145
1145
|
|
|
1146
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
1146
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$v.buttonContainer },
|
|
1147
1147
|
React.createElement(ButtonV2.ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
1148
1148
|
|
|
1149
1149
|
var Container = function (_a) {
|
|
1150
1150
|
var _b;
|
|
1151
1151
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
1152
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
1153
|
-
_b[styles$
|
|
1152
|
+
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$v.container, styles$v["container--".concat(type)], styles$v["container--align-".concat(alignment)], (_b = {},
|
|
1153
|
+
_b[styles$v["container--reverse"]] = isReverseOrder,
|
|
1154
1154
|
_b)) }, children));
|
|
1155
1155
|
};
|
|
1156
1156
|
|
|
1157
1157
|
var Column = function (_a) {
|
|
1158
1158
|
var children = _a.children;
|
|
1159
|
-
return (React.createElement("div", { className: styles$
|
|
1159
|
+
return (React.createElement("div", { className: styles$v.col }, children));
|
|
1160
1160
|
};
|
|
1161
1161
|
|
|
1162
1162
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -1224,7 +1224,7 @@ var CopyLead = function (_a) {
|
|
|
1224
1224
|
return null;
|
|
1225
1225
|
};
|
|
1226
1226
|
|
|
1227
|
-
var styles$
|
|
1227
|
+
var styles$u = {"downloadList-below":"DownloadList-module_downloadList-below__21q6i","downloadList-right":"DownloadList-module_downloadList-right__mHYHL"};
|
|
1228
1228
|
|
|
1229
1229
|
var DownloadList = function (_a) {
|
|
1230
1230
|
var heading = _a.heading, id = _a.id, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, downloads = _a.downloads, _c = _a.alignment, alignment = _c === void 0 ? "below" : _c, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads", "alignment"]);
|
|
@@ -1234,12 +1234,12 @@ var DownloadList = function (_a) {
|
|
|
1234
1234
|
" ",
|
|
1235
1235
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
1236
1236
|
React.createElement(Columns.ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
|
|
1237
|
-
React.createElement("div", { className: styles$
|
|
1237
|
+
React.createElement("div", { className: styles$u["downloadList-".concat(alignment)] }, downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i, "-").concat(downloadProps.name) },
|
|
1238
1238
|
React.createElement(Download.Download, __assign({}, downloadProps)),
|
|
1239
1239
|
i !== downloads.length - 1 && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }))); }))))));
|
|
1240
1240
|
};
|
|
1241
1241
|
|
|
1242
|
-
var styles$
|
|
1242
|
+
var styles$t = {"FAQs":"FAQs-module_FAQs__FtQr4","linkListSection":"FAQs-module_linkListSection__RdQkU","linkListTitle":"FAQs-module_linkListTitle__RVni3","linkList":"FAQs-module_linkList__dPyXj","linkListItem":"FAQs-module_linkListItem__S83CL","linkList--padded":"FAQs-module_linkList--padded__8Paxc"};
|
|
1243
1243
|
|
|
1244
1244
|
var scrollToSectionFocusFirstElement = function (item) {
|
|
1245
1245
|
var _a, _b, _c, _d, _e;
|
|
@@ -1253,23 +1253,23 @@ var scrollToSectionFocusFirstElement = function (item) {
|
|
|
1253
1253
|
var FAQs = function (_a) {
|
|
1254
1254
|
var _b;
|
|
1255
1255
|
var heading = _a.heading, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, id = _a.id, _c = _a.isPadded, isPadded = _c === void 0 ? false : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, image = _a.image, type = _a.type, _e = _a.linkListHeading, linkListHeading = _e === void 0 ? "Skip to section" : _e, accordionData = _a.accordionData, props = __rest(_a, ["heading", "isHeadingWordWrap", "content", "id", "isPadded", "headingLevel", "image", "type", "linkListHeading", "accordionData"]);
|
|
1256
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
1256
|
+
return (React.createElement("div", __assign({ className: styles$t.FAQs }, filterAttrs(props)),
|
|
1257
1257
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
1258
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
1259
|
-
React.createElement("div", { className: styles$
|
|
1258
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$t.linkListSection },
|
|
1259
|
+
React.createElement("div", { className: styles$t.linkListTitle },
|
|
1260
1260
|
React.createElement(Heading.Heading, { size: "xs" }, linkListHeading)),
|
|
1261
1261
|
React.createElement("ul", { className: classNames((_b = {},
|
|
1262
|
-
_b[styles$
|
|
1263
|
-
_b[styles$
|
|
1262
|
+
_b[styles$t.linkList] = true,
|
|
1263
|
+
_b[styles$t["linkList--padded"]] = isPadded,
|
|
1264
1264
|
_b)) }, accordionData.map(function (item) {
|
|
1265
1265
|
var _a;
|
|
1266
|
-
return (React.createElement("li", { className: styles$
|
|
1266
|
+
return (React.createElement("li", { className: styles$t.linkListItem, key: item.heading },
|
|
1267
1267
|
React.createElement(Link.Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
1268
1268
|
e.preventDefault();
|
|
1269
1269
|
scrollToSectionFocusFirstElement(item);
|
|
1270
1270
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
1271
1271
|
})))),
|
|
1272
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
1272
|
+
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$t.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$t.accordionListItem, key: item.id },
|
|
1273
1273
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
1274
1274
|
React.createElement(VerticalSpace.VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
1275
1275
|
type === "tabs" && (React.createElement(Tabs.Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -3466,12 +3466,12 @@ function cleanEscapedString(input) {
|
|
|
3466
3466
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
3467
3467
|
}
|
|
3468
3468
|
|
|
3469
|
-
var styles$
|
|
3469
|
+
var styles$s = {"labelContainer":"FeaturePost-module_labelContainer__j-yf2","labelText":"FeaturePost-module_labelText__DqBB3","labelWordWrap":"FeaturePost-module_labelWordWrap__vKD6M","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"};
|
|
3470
3470
|
|
|
3471
3471
|
var Image = function (_a) {
|
|
3472
3472
|
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
3473
3473
|
return (React.createElement(React.Fragment, null,
|
|
3474
|
-
React.createElement("div", { className: styles$
|
|
3474
|
+
React.createElement("div", { className: styles$s.imgWrapper },
|
|
3475
3475
|
React.createElement(Image$2.Image, __assign({ fadeOnLoad: true }, props), sources &&
|
|
3476
3476
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
3477
3477
|
title && (React.createElement(React.Fragment, null,
|
|
@@ -3506,21 +3506,22 @@ var MediaContent = function (_a) {
|
|
|
3506
3506
|
* Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
|
|
3507
3507
|
* */
|
|
3508
3508
|
var FeaturePost = function (_a) {
|
|
3509
|
-
var _b;
|
|
3510
|
-
var
|
|
3509
|
+
var _b, _c;
|
|
3510
|
+
var _d;
|
|
3511
|
+
var heading = _a.heading, id = _a.id, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _f = _a.isReverseOrder, isReverseOrder = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
|
|
3511
3512
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3512
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
3513
|
-
_b[styles$
|
|
3513
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$s.featurePost, (_b = {},
|
|
3514
|
+
_b[styles$s.featurePostReversed] = isReverseOrder,
|
|
3514
3515
|
_b)) }, filterAttrs(props)),
|
|
3515
|
-
React.createElement("div", { className: styles$
|
|
3516
|
-
React.createElement("div", { className: styles$
|
|
3517
|
-
label && (React.createElement(
|
|
3518
|
-
React.createElement(
|
|
3519
|
-
React.createElement(
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3516
|
+
React.createElement("div", { className: styles$s.col },
|
|
3517
|
+
React.createElement("div", { className: styles$s.contentContainer },
|
|
3518
|
+
label && (React.createElement(React.Fragment, null,
|
|
3519
|
+
React.createElement("div", { className: styles$s.labelContainer },
|
|
3520
|
+
React.createElement("span", { className: classNames(styles$s.labelText, (_c = {},
|
|
3521
|
+
_c[styles$s.labelWordWrap] = isHeadingWordWrap,
|
|
3522
|
+
_c)) }, label.text),
|
|
3523
|
+
React.createElement("div", { className: styles$s.labelDate },
|
|
3524
|
+
React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date))))),
|
|
3524
3525
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
|
|
3525
3526
|
React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
3526
3527
|
!isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
|
|
@@ -3533,7 +3534,7 @@ var FeaturePost = function (_a) {
|
|
|
3533
3534
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
3534
3535
|
React.createElement(Author, __assign({}, footer.author)))),
|
|
3535
3536
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
3536
|
-
React.createElement(ButtonV2.ButtonV2, __assign({ buttonStyle:
|
|
3537
|
+
React.createElement(ButtonV2.ButtonV2, __assign({}, footer.button, { buttonStyle: (_d = footer.button.buttonStyle) !== null && _d !== void 0 ? _d : "secondary" })))),
|
|
3537
3538
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
|
|
3538
3539
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
|
|
3539
3540
|
React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
|
|
@@ -3541,10 +3542,10 @@ var FeaturePost = function (_a) {
|
|
|
3541
3542
|
footer.appStore && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
3542
3543
|
React.createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
3543
3544
|
footer.googlePlay && (React.createElement(Grid.GridCol, { xs: 12, s: "auto" },
|
|
3544
|
-
React.createElement("div", { className: styles$
|
|
3545
|
+
React.createElement("div", { className: styles$s.googlePlayButtonWrapper },
|
|
3545
3546
|
React.createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
3546
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
3547
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
3547
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$s.col },
|
|
3548
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$s.imgContainer },
|
|
3548
3549
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
3549
3550
|
};
|
|
3550
3551
|
|
|
@@ -3556,7 +3557,7 @@ var FeaturePost = function (_a) {
|
|
|
3556
3557
|
const BtIconArrowRightFill =
|
|
3557
3558
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
|
|
3558
3559
|
|
|
3559
|
-
var styles$
|
|
3560
|
+
var styles$r = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
3560
3561
|
|
|
3561
3562
|
var getListHeadingLevel = function (level) {
|
|
3562
3563
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -3566,8 +3567,8 @@ var getListHeadingLevel = function (level) {
|
|
|
3566
3567
|
var HighlightItem = function (_a) {
|
|
3567
3568
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["icon", "heading", "text", "link", "isSmallIcon", "headingLevel"]);
|
|
3568
3569
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
3569
|
-
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$
|
|
3570
|
-
icon && (React.createElement("div", { className: styles$
|
|
3570
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$r.highlightItem }, filterAttrs(props)),
|
|
3571
|
+
icon && (React.createElement("div", { className: styles$r.Icon },
|
|
3571
3572
|
React.createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
3572
3573
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3573
3574
|
React.createElement(Heading.Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -3580,7 +3581,7 @@ var HighlightItem = function (_a) {
|
|
|
3580
3581
|
var HighlightList = function (_a) {
|
|
3581
3582
|
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
3582
3583
|
var id = React.useId();
|
|
3583
|
-
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$
|
|
3584
|
+
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$r.highlights, styles$r["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
|
|
3584
3585
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
3585
3586
|
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
3586
3587
|
})));
|
|
@@ -3592,22 +3593,22 @@ var HighlightList = function (_a) {
|
|
|
3592
3593
|
* Both two and three column options are available.
|
|
3593
3594
|
*/
|
|
3594
3595
|
var Highlights = function (_a) {
|
|
3595
|
-
var _b, _c, _d;
|
|
3596
|
-
var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems,
|
|
3596
|
+
var _b, _c, _d, _e;
|
|
3597
|
+
var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _f = _a.columns, columns = _f === void 0 ? "2" : _f, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
|
|
3597
3598
|
var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
|
|
3598
3599
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3599
3600
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
|
|
3600
3601
|
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
3601
3602
|
cta && (React.createElement(React.Fragment, null,
|
|
3602
3603
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
3603
|
-
React.createElement(ButtonV2.ButtonV2, {
|
|
3604
|
-
? ((
|
|
3605
|
-
:
|
|
3606
|
-
? ((
|
|
3607
|
-
:
|
|
3604
|
+
React.createElement(ButtonV2.ButtonV2, __assign({}, cta, { size: "m", buttonStyle: (_b = cta.buttonStyle) !== null && _b !== void 0 ? _b : "secondary", icon: cta.buttonStyle === "compact"
|
|
3605
|
+
? ((_c = cta.icon) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
|
|
3606
|
+
: cta.icon, iconActive: cta.buttonStyle === "compact"
|
|
3607
|
+
? ((_d = cta.iconActive) !== null && _d !== void 0 ? _d : BtIconArrowRightFill)
|
|
3608
|
+
: cta.iconActive, iconPosition: (_e = cta.iconPosition) !== null && _e !== void 0 ? _e : "beforeText" }))))));
|
|
3608
3609
|
};
|
|
3609
3610
|
|
|
3610
|
-
var styles$
|
|
3611
|
+
var styles$q = {"PromoListing":"PromoListing-module_PromoListing__6ensv","CarouselWrapper":"PromoListing-module_CarouselWrapper__iYwWp","carouselSlide":"PromoListing-module_carouselSlide__AMTPF","cardGrid":"PromoListing-module_cardGrid__llf73","cardWrapper":"PromoListing-module_cardWrapper__I4iwh","cardWrapperCarousel":"PromoListing-module_cardWrapperCarousel__t-2qM","columns-3":"PromoListing-module_columns-3__y6jWS","columns-2":"PromoListing-module_columns-2__GRFxb"};
|
|
3611
3612
|
|
|
3612
3613
|
/**
|
|
3613
3614
|
* Do not edit directly
|
|
@@ -3662,6 +3663,14 @@ const BtIconChatMessage =
|
|
|
3662
3663
|
* Generated file
|
|
3663
3664
|
*/
|
|
3664
3665
|
|
|
3666
|
+
const BtIconChevronDownMid =
|
|
3667
|
+
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z'/%3e%3c/svg%3e";
|
|
3668
|
+
|
|
3669
|
+
/**
|
|
3670
|
+
* Do not edit directly
|
|
3671
|
+
* Generated file
|
|
3672
|
+
*/
|
|
3673
|
+
|
|
3665
3674
|
const BtIconClock =
|
|
3666
3675
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 29.984A13.984 13.984 0 1 1 29.984 16 14 14 0 0 1 16 29.984m0-26.968A12.984 12.984 0 1 0 28.984 16 13 13 0 0 0 16 3.016'/%3e%3cpath d='M21.594 15.511h-5.081V8.518a.5.5 0 0 0-1 0v7.993h6.08a.5.5 0 0 0 0-1'/%3e%3c/svg%3e";
|
|
3667
3676
|
|
|
@@ -3678,6 +3687,14 @@ const BtIconEmailUnread =
|
|
|
3678
3687
|
* Generated file
|
|
3679
3688
|
*/
|
|
3680
3689
|
|
|
3690
|
+
const BtIconInfo =
|
|
3691
|
+
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 27a13 13 0 1 1 13-13 13.015 13.015 0 0 1-13 13'/%3e%3cpath d='M16 8.993a1 1 0 1 0 0 2 1 1 0 1 0 0-2M15.995 12.977a.5.5 0 0 0-.5.5l-.002 9.01a.5.5 0 0 0 1 0l.002-9.01a.5.5 0 0 0-.5-.5'/%3e%3c/svg%3e";
|
|
3692
|
+
|
|
3693
|
+
/**
|
|
3694
|
+
* Do not edit directly
|
|
3695
|
+
* Generated file
|
|
3696
|
+
*/
|
|
3697
|
+
|
|
3681
3698
|
const BtIconLink =
|
|
3682
3699
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M9.959 10.013h2.417a5.99 5.99 0 0 1 5.226 8.915.5.5 0 1 0 .872.49 6.99 6.99 0 0 0-6.098-10.405H9.959a6.989 6.989 0 0 0 0 13.977h1.54a.5.5 0 1 0 0-1h-1.54a5.989 5.989 0 0 1 0-11.977'/%3e%3cpath d='M22.063 9.013h-1.54a.5.5 0 0 0 0 1h1.54a5.989 5.989 0 0 1 0 11.977h-2.417a5.99 5.99 0 0 1-5.227-8.915.5.5 0 1 0-.871-.49 6.99 6.99 0 0 0 6.097 10.405h2.417a6.989 6.989 0 0 0 0-13.977'/%3e%3c/svg%3e";
|
|
3683
3700
|
|
|
@@ -3725,7 +3742,7 @@ var PromoListing = function (_a) {
|
|
|
3725
3742
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
3726
3743
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
3727
3744
|
};
|
|
3728
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3745
|
+
return (React.createElement("div", __assign({ className: styles$q.PromoListing }, filterAttrs(props)),
|
|
3729
3746
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
3730
3747
|
React.createElement(Heading.Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
3731
3748
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))),
|
|
@@ -3733,44 +3750,44 @@ var PromoListing = function (_a) {
|
|
|
3733
3750
|
button.label && (React.createElement(React.Fragment, null,
|
|
3734
3751
|
React.createElement(ButtonV2.ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
3735
3752
|
React.createElement(VerticalSpace.VerticalSpace, { size: "40" }))),
|
|
3736
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
3737
|
-
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$
|
|
3738
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
3753
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$q.CarouselWrapper },
|
|
3754
|
+
React.createElement(Carousel.Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles$q.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$q.cardGrid, styles$q["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
|
|
3755
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$q.cardWrapper }, getCard(card)))); })))));
|
|
3739
3756
|
};
|
|
3740
3757
|
|
|
3741
|
-
var styles$
|
|
3758
|
+
var styles$p = {"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"};
|
|
3742
3759
|
|
|
3743
3760
|
/**
|
|
3744
3761
|
* 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.*/
|
|
3745
3762
|
var Quote = function (_a) {
|
|
3746
3763
|
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"]);
|
|
3747
3764
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
3748
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
3749
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
3765
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$p.blockQuote, styles$p["quote".concat(styling)]), cite: citeUrl },
|
|
3766
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$p.quoteIcon, "aria-hidden": "true" },
|
|
3750
3767
|
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" })),
|
|
3751
|
-
React.createElement("p", { className: styles$
|
|
3768
|
+
React.createElement("p", { className: styles$p.quoteContent }, content)),
|
|
3752
3769
|
author && React.createElement(Author, __assign({}, author))));
|
|
3753
3770
|
};
|
|
3754
3771
|
|
|
3755
|
-
var styles$
|
|
3772
|
+
var styles$o = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
3756
3773
|
|
|
3757
3774
|
var Summary = function (_a) {
|
|
3758
3775
|
var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c, props = __rest(_a, ["content", "noBorder", "headingLevel"]);
|
|
3759
3776
|
var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3760
3777
|
return (React.createElement(Box.Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
3761
|
-
React.createElement("div", { className: styles$
|
|
3778
|
+
React.createElement("div", { className: styles$o.row }, content.map(function (_a, i) {
|
|
3762
3779
|
var heading = _a.heading, text = _a.text;
|
|
3763
3780
|
return (React.createElement(React.Fragment, null,
|
|
3764
|
-
React.createElement("div", { className: styles$
|
|
3781
|
+
React.createElement("div", { className: styles$o.col },
|
|
3765
3782
|
React.createElement(Heading.Heading, { size: "s", level: headingLevel }, heading),
|
|
3766
3783
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
3767
3784
|
React.createElement(Text.Text, { size: "s" }, text)),
|
|
3768
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
3785
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$o.ruleContainer },
|
|
3769
3786
|
React.createElement(Rule.Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
3770
3787
|
}))));
|
|
3771
3788
|
};
|
|
3772
3789
|
|
|
3773
|
-
var styles$
|
|
3790
|
+
var styles$n = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
3774
3791
|
|
|
3775
3792
|
var getLinkProps = function (link) {
|
|
3776
3793
|
return link.openInNewTab
|
|
@@ -3788,7 +3805,7 @@ var Statistics = function (_a) {
|
|
|
3788
3805
|
React.createElement(Columns.ColumnsCol, { spanM: 9 },
|
|
3789
3806
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
3790
3807
|
React.createElement(Columns.ColumnsCol, { spanL: 9 },
|
|
3791
|
-
React.createElement("ul", { className: styles$
|
|
3808
|
+
React.createElement("ul", { className: styles$n.list }, statistics.map(function (_a, i) {
|
|
3792
3809
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
3793
3810
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
3794
3811
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -3798,7 +3815,7 @@ var Statistics = function (_a) {
|
|
|
3798
3815
|
React.createElement(Columns.Columns, null,
|
|
3799
3816
|
React.createElement(Columns.ColumnsCol, { spanS: 6, spanM: 8 },
|
|
3800
3817
|
React.createElement(Align.Align, { vertical: "center" },
|
|
3801
|
-
React.createElement("div", { className: styles$
|
|
3818
|
+
React.createElement("div", { className: styles$n.statWrapper },
|
|
3802
3819
|
React.createElement(Heading.Heading, { color: "brand", size: "xxl" }, stat),
|
|
3803
3820
|
React.createElement(Hidden.Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
3804
3821
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }))))),
|
|
@@ -3811,26 +3828,26 @@ var Statistics = function (_a) {
|
|
|
3811
3828
|
source && (React.createElement(React.Fragment, null,
|
|
3812
3829
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
3813
3830
|
React.createElement(Text.Text, { size: "xs" },
|
|
3814
|
-
React.createElement("span", { className: styles$
|
|
3831
|
+
React.createElement("span", { className: styles$n.mutedText }, source)))),
|
|
3815
3832
|
sourceUrl && (React.createElement(Text.Text, { size: "xs" },
|
|
3816
|
-
React.createElement("a", { className: styles$
|
|
3833
|
+
React.createElement("a", { className: styles$n.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
3817
3834
|
})))));
|
|
3818
3835
|
};
|
|
3819
3836
|
|
|
3820
|
-
var styles$
|
|
3837
|
+
var styles$m = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
3821
3838
|
|
|
3822
3839
|
var BannerWithTabs = function (_a) {
|
|
3823
3840
|
var _b;
|
|
3824
3841
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM, props = __rest(_a, ["tabs", "defaultValue", "heading", "headingLevel", "content", "id", "isHeadingWordWrap", "alignTypography", "minHeight", "minHeightM"]);
|
|
3825
3842
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3826
3843
|
React.createElement("div", { className: classNames((_b = {},
|
|
3827
|
-
_b[styles$
|
|
3844
|
+
_b[styles$m.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
3828
3845
|
_b)) },
|
|
3829
3846
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, headingLevel: headingLevel, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3830
3847
|
React.createElement(TabbedBanner.TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3831
3848
|
};
|
|
3832
3849
|
|
|
3833
|
-
var styles$
|
|
3850
|
+
var styles$l = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent":"ArticleSidebar-module_textContent__3nCfG","additionalContentContainer":"ArticleSidebar-module_additionalContentContainer__91L4n","shareButtonContainer":"ArticleSidebar-module_shareButtonContainer__iAfHL","shareButton":"ArticleSidebar-module_shareButton__rb-1E"};
|
|
3834
3851
|
|
|
3835
3852
|
/**
|
|
3836
3853
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
@@ -3892,7 +3909,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3892
3909
|
var hasBottomContent = Boolean(linkSection || topics || showShare);
|
|
3893
3910
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3894
3911
|
React.createElement("div", { className: classNames((_b = {},
|
|
3895
|
-
_b[styles$
|
|
3912
|
+
_b[styles$l.textContent] = hasTopContent,
|
|
3896
3913
|
_b)) },
|
|
3897
3914
|
author && (React.createElement(React.Fragment, null,
|
|
3898
3915
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3903,7 +3920,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3903
3920
|
React.createElement(Text.Text, { size: "s" }, aboutSection.content))),
|
|
3904
3921
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3905
3922
|
(author || aboutSection) && React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3906
|
-
React.createElement("div", { className: styles$
|
|
3923
|
+
React.createElement("div", { className: styles$l.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3907
3924
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3908
3925
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3909
3926
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3926,7 +3943,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3926
3943
|
linkSection && React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
3927
3944
|
React.createElement(Heading.Heading, { level: topics.headingLevel }, topics.heading),
|
|
3928
3945
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3929
|
-
React.createElement("div", { className: styles$
|
|
3946
|
+
React.createElement("div", { className: styles$l.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag.Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3930
3947
|
showShare && (React.createElement(React.Fragment, null,
|
|
3931
3948
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3932
3949
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
@@ -3934,16 +3951,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3934
3951
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }))),
|
|
3935
3952
|
React.createElement(Heading.Heading, { level: share.headingLevel }, share.heading),
|
|
3936
3953
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
3937
|
-
React.createElement("div", { className: styles$
|
|
3954
|
+
React.createElement("div", { className: styles$l.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3938
3955
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3939
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3956
|
+
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$l.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
|
|
3940
3957
|
React.createElement(Icon.Icon, { icon: icon, size: 24 })));
|
|
3941
3958
|
})))),
|
|
3942
3959
|
React.createElement(Toast.Toast, null,
|
|
3943
3960
|
React.createElement(Toast.ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3944
3961
|
};
|
|
3945
3962
|
|
|
3946
|
-
var styles$
|
|
3963
|
+
var styles$k = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3947
3964
|
|
|
3948
3965
|
/**
|
|
3949
3966
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3989,7 +4006,7 @@ var ProductNavigation = function (_a) {
|
|
|
3989
4006
|
var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3990
4007
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3991
4008
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3992
|
-
React.createElement("ul", { className: classNames(styles$
|
|
4009
|
+
React.createElement("ul", { className: classNames(styles$k["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3993
4010
|
var _a;
|
|
3994
4011
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3995
4012
|
React.createElement(InformationCard.InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -4001,7 +4018,7 @@ var ProductNavigation = function (_a) {
|
|
|
4001
4018
|
!hideLessButton && (React.createElement(ButtonV2.ButtonV2, { label: displayList.length < productList.length
|
|
4002
4019
|
? "Show more"
|
|
4003
4020
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
4004
|
-
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
4021
|
+
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$k["productNavigation-skipLink"]), tabIndex: -1 },
|
|
4005
4022
|
React.createElement(ButtonV2.ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
|
|
4006
4023
|
React.createElement(VisuallyHidden.VisuallyHidden, null,
|
|
4007
4024
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -4013,18 +4030,18 @@ var ProductNavigation = function (_a) {
|
|
|
4013
4030
|
"."))))))));
|
|
4014
4031
|
};
|
|
4015
4032
|
|
|
4016
|
-
var styles$
|
|
4033
|
+
var styles$j = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
4017
4034
|
|
|
4018
4035
|
var ContentInfoWidget = function (_a) {
|
|
4019
4036
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
4020
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4021
|
-
React.createElement("div", { className: styles$
|
|
4037
|
+
return (React.createElement("div", __assign({ className: styles$j.container }, filterAttrs(props)),
|
|
4038
|
+
React.createElement("div", { className: styles$j.icon },
|
|
4022
4039
|
React.createElement(Icon.Icon, { size: 20, icon: icon })),
|
|
4023
|
-
React.createElement("div", { className: styles$
|
|
4040
|
+
React.createElement("div", { className: styles$j.text },
|
|
4024
4041
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
|
|
4025
4042
|
};
|
|
4026
4043
|
|
|
4027
|
-
var styles$
|
|
4044
|
+
var styles$i = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
4028
4045
|
|
|
4029
4046
|
var ActionTile = function (_a) {
|
|
4030
4047
|
var _b, _c;
|
|
@@ -4032,51 +4049,51 @@ var ActionTile = function (_a) {
|
|
|
4032
4049
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4033
4050
|
var iconSize = isCompact ? 40 : 48;
|
|
4034
4051
|
var content = (React.createElement(React.Fragment, null,
|
|
4035
|
-
React.createElement("div", { className: classNames(styles$
|
|
4036
|
-
_b[styles$
|
|
4052
|
+
React.createElement("div", { className: classNames(styles$i["action-tile-content"], (_b = {},
|
|
4053
|
+
_b[styles$i["action-tile-content--without-icon"]] = !displayIcon,
|
|
4037
4054
|
_b)) },
|
|
4038
|
-
displayIcon && (React.createElement("div", { className: styles$
|
|
4055
|
+
displayIcon && (React.createElement("div", { className: styles$i["action-tile-icon"] },
|
|
4039
4056
|
React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
|
|
4040
|
-
React.createElement("span", { className: styles$
|
|
4041
|
-
isActive && (React.createElement("div", { className: styles$
|
|
4057
|
+
React.createElement("span", { className: styles$i["action-tile-heading"] }, heading)),
|
|
4058
|
+
isActive && (React.createElement("div", { className: styles$i["action-tile-tick"] },
|
|
4042
4059
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4043
|
-
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$
|
|
4044
|
-
_c[styles$
|
|
4045
|
-
_c[styles$
|
|
4060
|
+
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$i["action-tile"], (_c = {},
|
|
4061
|
+
_c[styles$i["action-tile--active"]] = isActive,
|
|
4062
|
+
_c[styles$i["action-tile--compact"]] = isCompact,
|
|
4046
4063
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4047
4064
|
};
|
|
4048
4065
|
|
|
4049
|
-
var styles$
|
|
4066
|
+
var styles$h = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
|
|
4050
4067
|
|
|
4051
4068
|
var LinkTile = function (_a) {
|
|
4052
4069
|
var _b;
|
|
4053
4070
|
var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
|
|
4054
4071
|
var Component = href ? "a" : "div";
|
|
4055
4072
|
var linkProps = href ? { href: href } : {};
|
|
4056
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
4057
|
-
_b[styles$
|
|
4058
|
-
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$
|
|
4059
|
-
React.createElement("span", { className: styles$
|
|
4060
|
-
showIcon && (React.createElement("span", { className: styles$
|
|
4073
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$h["link-tile"], (_b = {},
|
|
4074
|
+
_b[styles$h["link-tile--neutral"]] = tone === "neutral",
|
|
4075
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$h["link-tile-content"] },
|
|
4076
|
+
React.createElement("span", { className: styles$h["link-tile-text"] }, text),
|
|
4077
|
+
showIcon && (React.createElement("span", { className: styles$h["link-tile-icon"] },
|
|
4061
4078
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
4062
4079
|
};
|
|
4063
4080
|
|
|
4064
|
-
var styles$
|
|
4081
|
+
var styles$g = {"quick-help":"InlineLinkGroup-module_quick-help__cMTpB","quick-help-label":"InlineLinkGroup-module_quick-help-label__VLKen","quick-help-container":"InlineLinkGroup-module_quick-help-container__IStTk","quick-help-item":"InlineLinkGroup-module_quick-help-item__QTIMl","quick-help-separator":"InlineLinkGroup-module_quick-help-separator__qJE0q","quick-help-separator-line":"InlineLinkGroup-module_quick-help-separator-line__VbCVI"};
|
|
4065
4082
|
|
|
4066
4083
|
var InlineLinkGroup = function (_a) {
|
|
4067
4084
|
var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, props = __rest(_a, ["label", "headingLevel", "links", "isImplied"]);
|
|
4068
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4069
|
-
label && (React.createElement("div", { className: styles$
|
|
4085
|
+
return (React.createElement("div", __assign({ className: styles$g["quick-help"] }, filterAttrs(props)),
|
|
4086
|
+
label && (React.createElement("div", { className: styles$g["quick-help-label"] },
|
|
4070
4087
|
React.createElement(Heading.Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
|
|
4071
|
-
React.createElement("ul", { className: styles$
|
|
4072
|
-
React.createElement("li", { className: styles$
|
|
4088
|
+
React.createElement("ul", { className: styles$g["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
4089
|
+
React.createElement("li", { className: styles$g["quick-help-item"] },
|
|
4073
4090
|
React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
|
|
4074
4091
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
4075
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
4076
|
-
React.createElement("div", { className: styles$
|
|
4092
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$g["quick-help-separator"], "aria-hidden": "true" },
|
|
4093
|
+
React.createElement("div", { className: styles$g["quick-help-separator-line"] }))))); }))));
|
|
4077
4094
|
};
|
|
4078
4095
|
|
|
4079
|
-
var styles$
|
|
4096
|
+
var styles$f = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","onDarkSurface":"ThumbnailSignpost-module_onDarkSurface__F2jUk","content":"ThumbnailSignpost-module_content__XG9oj","heading":"ThumbnailSignpost-module_heading__mTrpJ","image":"ThumbnailSignpost-module_image__syGZj","thumbnailButton":"ThumbnailSignpost-module_thumbnailButton__Nn-NR","buttonIcon":"ThumbnailSignpost-module_buttonIcon__ydmza"};
|
|
4080
4097
|
|
|
4081
4098
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4082
4099
|
var ThumbnailSignpost = function (_a) {
|
|
@@ -4084,20 +4101,20 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4084
4101
|
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
4085
4102
|
var surface = React.useContext(Surface.SurfaceContext).surface;
|
|
4086
4103
|
var isDarkSurface = surface === "dark";
|
|
4087
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
4088
|
-
_b[styles$
|
|
4089
|
-
_b[styles$
|
|
4104
|
+
return (React.createElement("div", __assign({ className: classNames(styles$f.thumbnailSignpost, (_b = {},
|
|
4105
|
+
_b[styles$f.isLink] = onClick,
|
|
4106
|
+
_b[styles$f.onDarkSurface] = isDarkSurface,
|
|
4090
4107
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
4091
|
-
img && (React.createElement("div", { className: styles$
|
|
4108
|
+
img && (React.createElement("div", { className: styles$f.image },
|
|
4092
4109
|
React.createElement(Image$2.Image, __assign({}, img)))),
|
|
4093
|
-
React.createElement("div", { className: styles$
|
|
4094
|
-
React.createElement("span", { className: styles$
|
|
4110
|
+
React.createElement("div", { className: styles$f.content },
|
|
4111
|
+
React.createElement("span", { className: styles$f.heading }, title),
|
|
4095
4112
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4096
4113
|
text,
|
|
4097
4114
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
4098
4115
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
|
|
4099
|
-
React.createElement("div", { className: styles$
|
|
4100
|
-
React.createElement("span", { className: styles$
|
|
4116
|
+
React.createElement("div", { className: styles$f.thumbnailButton },
|
|
4117
|
+
React.createElement("span", { className: styles$f.buttonIcon, role: "img", style: {
|
|
4101
4118
|
height: 24,
|
|
4102
4119
|
width: 24,
|
|
4103
4120
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -4106,29 +4123,29 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4106
4123
|
React.createElement(Heading.Heading, { size: "xxs" }, buttonLabel)))))));
|
|
4107
4124
|
};
|
|
4108
4125
|
|
|
4109
|
-
var styles$
|
|
4126
|
+
var styles$e = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
4110
4127
|
|
|
4111
4128
|
/**
|
|
4112
4129
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
4113
4130
|
*/
|
|
4114
4131
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
4115
4132
|
var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, isHeadingWordWrap = _a.isHeadingWordWrap, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList", "isHeadingWordWrap"]);
|
|
4116
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4133
|
+
return (React.createElement("div", __assign({ className: styles$e.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
4117
4134
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
4118
|
-
React.createElement("ul", { className: styles$
|
|
4135
|
+
React.createElement("ul", { className: styles$e.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
4119
4136
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
4120
4137
|
};
|
|
4121
4138
|
|
|
4122
|
-
var styles$
|
|
4139
|
+
var styles$d = {"playIconContainer":"VideoCardPlayIcon-module_playIconContainer__ZqZP3","playIconContainer--s":"VideoCardPlayIcon-module_playIconContainer--s__ETbOZ","playIconContainer--l":"VideoCardPlayIcon-module_playIconContainer--l__OGccg","playIcon":"VideoCardPlayIcon-module_playIcon__kzito"};
|
|
4123
4140
|
|
|
4124
4141
|
var VideoCardPlayIcon = function (_a) {
|
|
4125
4142
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
4126
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4127
|
-
React.createElement("div", { className: styles$
|
|
4143
|
+
return (React.createElement("div", { className: classNames(styles$d.playIconContainer, styles$d["playIconContainer--".concat(size)]) },
|
|
4144
|
+
React.createElement("div", { className: styles$d.playIcon },
|
|
4128
4145
|
React.createElement(Icon.Icon, { icon: ArcIconPlay }))));
|
|
4129
4146
|
};
|
|
4130
4147
|
|
|
4131
|
-
var styles$
|
|
4148
|
+
var styles$c = {"container":"VideoCardPlayer-module_container__G-Uta","player":"VideoCardPlayer-module_player__BgueT","playerWrapper":"VideoCardPlayer-module_playerWrapper__UcH1q","playerWrapper--landscape":"VideoCardPlayer-module_playerWrapper--landscape__shKv-","playerWrapper--portrait":"VideoCardPlayer-module_playerWrapper--portrait__7bKAr"};
|
|
4132
4149
|
|
|
4133
4150
|
var VideoCardPlayer = function (_a) {
|
|
4134
4151
|
var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
|
|
@@ -4144,21 +4161,21 @@ var VideoCardPlayer = function (_a) {
|
|
|
4144
4161
|
(_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4145
4162
|
});
|
|
4146
4163
|
}, []);
|
|
4147
|
-
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$
|
|
4148
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4149
|
-
React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$
|
|
4164
|
+
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$c.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
|
|
4165
|
+
return (React.createElement("div", __assign({ className: styles$c.container }, filterAttrs(props)),
|
|
4166
|
+
React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$c.playerWrapper, styles$c["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(ReactPlayer, __assign({}, playerProps))),
|
|
4150
4167
|
children));
|
|
4151
4168
|
};
|
|
4152
4169
|
|
|
4153
|
-
var styles$
|
|
4170
|
+
var styles$b = {"thumbnail":"VideoCardThumbnail-module_thumbnail__Yamk0","thumbnail--landscape":"VideoCardThumbnail-module_thumbnail--landscape__FmnLk","thumbnail--portrait":"VideoCardThumbnail-module_thumbnail--portrait__FZS93","thumbnailContent":"VideoCardThumbnail-module_thumbnailContent__cHham"};
|
|
4154
4171
|
|
|
4155
4172
|
var VideoCardThumbnail = function (_a) {
|
|
4156
4173
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
4157
|
-
var content = React.createElement("div", { className: styles$
|
|
4158
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4174
|
+
var content = React.createElement("div", { className: styles$b.thumbnailContent }, children);
|
|
4175
|
+
return (React.createElement("div", { className: classNames(styles$b.thumbnail, styles$b["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React.createElement(Visible.Visible, __assign({}, contentVisibility), content)) : (content)));
|
|
4159
4176
|
};
|
|
4160
4177
|
|
|
4161
|
-
var styles$
|
|
4178
|
+
var styles$a = {"mainText--lightBackground":"VideoHeroCardContent-module_mainText--lightBackground__nGl6W","statContainer--lightBackground":"VideoHeroCardContent-module_statContainer--lightBackground__7hXAf","statContainer--darkBackground":"VideoHeroCardContent-module_statContainer--darkBackground__X3-r2","mainText--darkBackground":"VideoHeroCardContent-module_mainText--darkBackground__Pfizt","statContainer":"VideoHeroCardContent-module_statContainer__q21g9","stat":"VideoHeroCardContent-module_stat__iIcoq"};
|
|
4162
4179
|
|
|
4163
4180
|
var VideoHeroCardContent = function (_a) {
|
|
4164
4181
|
var title = _a.title, label = _a.label, _b = _a.titleLevel, titleLevel = _b === void 0 ? "3" : _b, labelLevel = _a.labelLevel, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
|
|
@@ -4172,8 +4189,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4172
4189
|
},
|
|
4173
4190
|
];
|
|
4174
4191
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
4175
|
-
return (React.createElement("div", { className: styles$
|
|
4176
|
-
React.createElement("div", { className: classNames(styles$
|
|
4192
|
+
return (React.createElement("div", { className: styles$a["".concat(background, "Background")] },
|
|
4193
|
+
React.createElement("div", { className: classNames(styles$a.mainText, styles$a["mainText--".concat(background, "Background")]) },
|
|
4177
4194
|
React.createElement(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label),
|
|
4178
4195
|
React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
|
|
4179
4196
|
React.createElement(Heading.Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
|
|
@@ -4181,8 +4198,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4181
4198
|
React.createElement(Text.Text, null, description)),
|
|
4182
4199
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
4183
4200
|
React.createElement(VerticalSpace.VerticalSpace, { size: "32", sizeS: "16" }),
|
|
4184
|
-
React.createElement("div", { className: classNames(styles$
|
|
4185
|
-
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$
|
|
4201
|
+
React.createElement("div", { className: classNames(styles$a.statContainer, styles$a["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
4202
|
+
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$a.stat },
|
|
4186
4203
|
React.createElement(Icon.Icon, { icon: meta.icon, size: 20 }),
|
|
4187
4204
|
React.createElement(Text.Text, { size: "xs" }, meta.text)));
|
|
4188
4205
|
}))))));
|
|
@@ -4205,7 +4222,7 @@ var VideoPortraitCard = function (_a) {
|
|
|
4205
4222
|
React.createElement(Heading.Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
|
|
4206
4223
|
};
|
|
4207
4224
|
|
|
4208
|
-
var styles$
|
|
4225
|
+
var styles$9 = {"contentWrapper":"BusinessSegmentSwitcher-module_contentWrapper__YKEjS","cardWrapper":"BusinessSegmentSwitcher-module_cardWrapper__eGDJ-","cardCol":"BusinessSegmentSwitcher-module_cardCol__jsySH","businessSegmentSwitcherDesktop":"BusinessSegmentSwitcher-module_businessSegmentSwitcherDesktop__oBvzS","businessSegmentSwitcher":"BusinessSegmentSwitcher-module_businessSegmentSwitcher__Sae5K","desktopCarousel":"BusinessSegmentSwitcher-module_desktopCarousel__xW3HN","businessSegmentSwitcherMobile":"BusinessSegmentSwitcher-module_businessSegmentSwitcherMobile__PSFyi"};
|
|
4209
4226
|
|
|
4210
4227
|
/**
|
|
4211
4228
|
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
@@ -4229,11 +4246,11 @@ var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
|
4229
4246
|
xs: { itemsPerSlide: 1 },
|
|
4230
4247
|
s: { itemsPerSlide: 2 },
|
|
4231
4248
|
} },
|
|
4232
|
-
React.createElement("div", { className: styles$
|
|
4233
|
-
React.createElement("div", { className: styles$
|
|
4234
|
-
content.card3 && (React.createElement("div", { className: styles$
|
|
4249
|
+
React.createElement("div", { className: styles$9.cardWrapper }, renderCard(content.card1)),
|
|
4250
|
+
React.createElement("div", { className: styles$9.cardWrapper }, renderCard(content.card2)),
|
|
4251
|
+
content.card3 && (React.createElement("div", { className: styles$9.cardWrapper },
|
|
4235
4252
|
React.createElement(InformationCard.InformationCard, __assign({}, content.card3)))),
|
|
4236
|
-
React.createElement("div", { className: styles$
|
|
4253
|
+
React.createElement("div", { className: styles$9.cardWrapper },
|
|
4237
4254
|
React.createElement(TypographyCard.TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
4238
4255
|
};
|
|
4239
4256
|
|
|
@@ -4246,8 +4263,8 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4246
4263
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
4247
4264
|
var initialTab = (_c = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : "";
|
|
4248
4265
|
var _d = React.useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
4249
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4250
|
-
React.createElement("div", { className: styles$
|
|
4266
|
+
return (React.createElement("div", __assign({ className: styles$9.businessSegmentSwitcher }, filterAttrs(props)),
|
|
4267
|
+
React.createElement("div", { className: styles$9.businessSegmentSwitcherDesktop },
|
|
4251
4268
|
React.createElement(ContentSwitcher.ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
4252
4269
|
React.createElement(ContentSwitcher.ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
4253
4270
|
var label = _a.label, value = _a.value;
|
|
@@ -4256,42 +4273,42 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4256
4273
|
tabs.map(function (_a, index) {
|
|
4257
4274
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4258
4275
|
return (React.createElement(ContentSwitcher.ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
4259
|
-
React.createElement("div", { className: styles$
|
|
4260
|
-
React.createElement("div", { className: styles$
|
|
4276
|
+
React.createElement("div", { className: styles$9.contentWrapper },
|
|
4277
|
+
React.createElement("div", { className: styles$9.desktopCarousel }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label })),
|
|
4261
4278
|
renderCard(content.card1),
|
|
4262
4279
|
renderCard(content.card2),
|
|
4263
|
-
React.createElement("div", { className: styles$
|
|
4280
|
+
React.createElement("div", { className: styles$9.cardCol },
|
|
4264
4281
|
content.card3 && React.createElement(InformationCard.InformationCard, __assign({}, content.card3)),
|
|
4265
4282
|
React.createElement("div", null,
|
|
4266
4283
|
React.createElement(TypographyCard.TypographyCard, { heading: content.card4.heading ||
|
|
4267
4284
|
"All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
|
|
4268
4285
|
}))),
|
|
4269
|
-
React.createElement("div", { className: styles$
|
|
4286
|
+
React.createElement("div", { className: styles$9.businessSegmentSwitcherMobile },
|
|
4270
4287
|
React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
4271
4288
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4272
4289
|
return (React.createElement(ContentSwitcherDropdown.ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
4273
|
-
React.createElement("div", { className: styles$
|
|
4290
|
+
React.createElement("div", { className: styles$9.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
4274
4291
|
})))));
|
|
4275
4292
|
};
|
|
4276
4293
|
|
|
4277
|
-
var styles$
|
|
4294
|
+
var styles$8 = {"subgroupHeader":"PartnerLogoSubgroup-module_subgroupHeader__rXAai","logoGroup":"PartnerLogoSubgroup-module_logoGroup__RYsTN","logoWrapper":"PartnerLogoSubgroup-module_logoWrapper__tyxVI","logoImage":"PartnerLogoSubgroup-module_logoImage__h7DJd"};
|
|
4278
4295
|
|
|
4279
4296
|
var PartnerLogoSubgroup = function (_a) {
|
|
4280
4297
|
var subheading = _a.subheading, text = _a.text, headingLevel = _a.headingLevel, logos = _a.logos, _b = _a.tileHeight, tileHeight = _b === void 0 ? 72 : _b;
|
|
4281
4298
|
var hasHeader = subheading || text;
|
|
4282
4299
|
var id = React.useId();
|
|
4283
4300
|
return (React.createElement(React.Fragment, null,
|
|
4284
|
-
hasHeader && (React.createElement("div", { className: styles$
|
|
4301
|
+
hasHeader && (React.createElement("div", { className: styles$8.subgroupHeader },
|
|
4285
4302
|
React.createElement(Columns.Columns, { isGutterless: true },
|
|
4286
4303
|
React.createElement(Columns.ColumnsCol, { spanL: 9, spanXL: 8 },
|
|
4287
4304
|
subheading && (React.createElement(Heading.Heading, { level: headingLevel, size: "s", isResponsive: false }, subheading)),
|
|
4288
4305
|
subheading && text && React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
|
|
4289
4306
|
text && (React.createElement(Text.Text, { size: "m", tone: "supporting" }, text)))))),
|
|
4290
|
-
React.createElement("div", { className: styles$
|
|
4291
|
-
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$
|
|
4307
|
+
React.createElement("div", { className: styles$8.logoGroup }, logos.map(function (logo, j) { return (React.createElement("div", { key: "".concat(id, "-logo-").concat(j), className: styles$8.logoWrapper, style: { height: tileHeight } },
|
|
4308
|
+
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$8.logoImage }))); }))));
|
|
4292
4309
|
};
|
|
4293
4310
|
|
|
4294
|
-
var styles$
|
|
4311
|
+
var styles$7 = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4295
4312
|
|
|
4296
4313
|
var getSubheadingLevel = function (parentLevel, subLevel) {
|
|
4297
4314
|
return subLevel !== null && subLevel !== void 0 ? subLevel : String(Math.min(Number(parentLevel) + 1, 6));
|
|
@@ -4315,75 +4332,81 @@ var PartnerBrandLogos = function (_a) {
|
|
|
4315
4332
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerTopPadding)),
|
|
4316
4333
|
React.createElement(Rule.Rule, null),
|
|
4317
4334
|
React.createElement(VerticalSpace.VerticalSpace, __assign({}, rulerBottomPadding)),
|
|
4318
|
-
React.createElement("ul", { className: styles$
|
|
4335
|
+
React.createElement("ul", { className: styles$7.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4319
4336
|
React.createElement(PartnerLogoSubgroup, { subheading: subgroup.subheading, text: subgroup.text, headingLevel: getSubheadingLevel(headingLevel, subgroup.subheadingLevel), logos: subgroup.logos, tileHeight: subgroup.tileHeight }))); }))));
|
|
4320
4337
|
};
|
|
4321
4338
|
|
|
4322
|
-
var styles$
|
|
4339
|
+
var styles$6 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
|
|
4323
4340
|
|
|
4324
4341
|
var ProductCard = function (_a) {
|
|
4325
4342
|
var heading = _a.heading, headingLevel = _a.headingLevel, topSlot = _a.topSlot, _b = _a.divider, divider = _b === void 0 ? true : _b, bottomSlot = _a.bottomSlot, promoted = _a.promoted, button = _a.button, props = __rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
|
|
4326
4343
|
var headingId = React.useId();
|
|
4327
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4328
|
-
React.createElement("div", { className: styles$
|
|
4329
|
-
promoted && (React.createElement("div", { className: styles$
|
|
4344
|
+
return (React.createElement("div", __assign({ className: styles$6.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
4345
|
+
React.createElement("div", { className: styles$6.productCardTop },
|
|
4346
|
+
promoted && (React.createElement("div", { className: styles$6.productCardPromoted },
|
|
4330
4347
|
React.createElement(Surface.Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
4331
4348
|
React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
|
|
4332
4349
|
React.createElement(Text.Text, { size: "s" }, promoted.content)))),
|
|
4333
|
-
React.createElement("div", { className: styles$
|
|
4350
|
+
React.createElement("div", { className: styles$6.productCardTopSection },
|
|
4334
4351
|
React.createElement(Heading.Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
4335
4352
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4336
4353
|
topSlot)),
|
|
4337
|
-
React.createElement("div", { className: styles$
|
|
4338
|
-
divider ? (React.createElement("div", { className: styles$
|
|
4354
|
+
React.createElement("div", { className: styles$6.productCardBottom },
|
|
4355
|
+
divider ? (React.createElement("div", { className: styles$6.divider },
|
|
4339
4356
|
React.createElement(Rule.Rule, null))) : (React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
|
|
4340
4357
|
bottomSlot,
|
|
4341
4358
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
|
|
4342
|
-
React.createElement("div", { className: styles$
|
|
4359
|
+
React.createElement("div", { className: styles$6.ctaWrapper },
|
|
4343
4360
|
React.createElement(ButtonV2.ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
4344
4361
|
};
|
|
4345
4362
|
|
|
4346
|
-
var styles$
|
|
4363
|
+
var styles$5 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
4347
4364
|
|
|
4348
4365
|
var ProductCardBenefits = function (_a) {
|
|
4349
4366
|
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
4350
4367
|
return (React.createElement(React.Fragment, null,
|
|
4351
4368
|
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
4352
4369
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
4353
|
-
React.createElement("ul", { className: styles$
|
|
4370
|
+
React.createElement("ul", { className: styles$5.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles$5.benefitItem },
|
|
4354
4371
|
React.createElement(Icon.Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
4355
4372
|
benefit.benefit)); }))));
|
|
4356
4373
|
};
|
|
4357
4374
|
|
|
4358
|
-
var styles$
|
|
4375
|
+
var styles$4 = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
|
|
4359
4376
|
|
|
4360
4377
|
var ProductCardPriceIncrease = function (_a) {
|
|
4361
|
-
var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d;
|
|
4378
|
+
var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d, _e = _a.hideBorder, hideBorder = _e === void 0 ? false : _e;
|
|
4362
4379
|
return (React.createElement(React.Fragment, null,
|
|
4363
4380
|
React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
|
|
4364
4381
|
React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
|
|
4365
4382
|
React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
|
|
4366
|
-
React.createElement("div", { className: styles$
|
|
4367
|
-
React.createElement("div", { className: styles$
|
|
4368
|
-
React.createElement("ul", { className: styles$
|
|
4383
|
+
React.createElement("div", { className: styles$4.priceIncreaseWrapper },
|
|
4384
|
+
!hideBorder && React.createElement("div", { className: styles$4.priceIncreaseBorder }),
|
|
4385
|
+
React.createElement("ul", { className: styles$4.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$4.priceIncreaseItem },
|
|
4386
|
+
React.createElement(React.Fragment, null,
|
|
4387
|
+
React.createElement("b", null, item.slice(0, 6)),
|
|
4388
|
+
React.createElement(React.Fragment, null, item.slice(6))))); })))));
|
|
4369
4389
|
};
|
|
4370
4390
|
|
|
4371
|
-
var styles$
|
|
4391
|
+
var styles$3 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
4372
4392
|
|
|
4373
4393
|
var ProductCardPrice = function (_a) {
|
|
4374
4394
|
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
4375
|
-
return (React.createElement("div", { className: styles$
|
|
4395
|
+
return (React.createElement("div", { className: styles$3.productCardPrice },
|
|
4376
4396
|
prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
|
|
4377
|
-
React.createElement(
|
|
4397
|
+
React.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
|
|
4398
|
+
React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
|
|
4399
|
+
React.createElement(Heading.Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
|
|
4400
|
+
React.createElement(Heading.Heading, { color: "brand", size: "s" }, value.slice(-3))),
|
|
4378
4401
|
suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
|
|
4379
4402
|
};
|
|
4380
4403
|
|
|
4381
|
-
var styles = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4404
|
+
var styles$2 = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4382
4405
|
|
|
4383
4406
|
var CardGrid = function (_a) {
|
|
4384
4407
|
var cards = _a.cards, cardsRevealed = _a.cardsRevealed, fourthCardRef = _a.fourthCardRef, props = __rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
|
|
4385
4408
|
return (React.createElement(React.Fragment, null,
|
|
4386
|
-
React.createElement("ul", __assign({ className: styles.cardGrid }, filterAttrs(props)), (cardsRevealed ? cards : cards.slice(0, 3)).map(function (card, index) { return (React.createElement("li", { key: "card-".concat(index), className: styles.cardGridItem, ref: index === 3 ? fourthCardRef : undefined, tabIndex: -1 }, card)); })),
|
|
4409
|
+
React.createElement("ul", __assign({ className: styles$2.cardGrid }, filterAttrs(props)), (cardsRevealed ? cards : cards.slice(0, 3)).map(function (card, index) { return (React.createElement("li", { key: "card-".concat(index), className: styles$2.cardGridItem, ref: index === 3 ? fourthCardRef : undefined, tabIndex: -1 }, card)); })),
|
|
4387
4410
|
React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeXL: "32" })));
|
|
4388
4411
|
};
|
|
4389
4412
|
|
|
@@ -4429,6 +4452,285 @@ var ProductCardGrid = function (_a) {
|
|
|
4429
4452
|
cardsRevealed && (React.createElement(ButtonV2.ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
|
|
4430
4453
|
};
|
|
4431
4454
|
|
|
4455
|
+
var styles$1 = {"wrapper":"ComparisonTable-module_wrapper__SSvrL","wrapperBordered":"ComparisonTable-module_wrapperBordered__kQeRo","shadowOverlay":"ComparisonTable-module_shadowOverlay__unZ3Q","table":"ComparisonTable-module_table__iU0Zl","desktopTable":"ComparisonTable-module_desktopTable__IwkOh","headerRow":"ComparisonTable-module_headerRow__BCw20","subHeaderRow":"ComparisonTable-module_subHeaderRow__h-S8Y","row":"ComparisonTable-module_row__VMAyW","headerCell":"ComparisonTable-module_headerCell__4bhwd","headerCellPromoted":"ComparisonTable-module_headerCellPromoted__4oIRU","highlightedTop":"ComparisonTable-module_highlightedTop__pKNy8","stickyHeader":"ComparisonTable-module_stickyHeader__MJLxP","subHeaderCell":"ComparisonTable-module_subHeaderCell__12J6c","rowGroup":"ComparisonTable-module_rowGroup__YuAHE","featureRow":"ComparisonTable-module_featureRow__hSa-p","featureRowHeader":"ComparisonTable-module_featureRowHeader__YB-eY","cell":"ComparisonTable-module_cell__lWOm3","featureRowHeaderContent":"ComparisonTable-module_featureRowHeaderContent__XmzGi","controlRow":"ComparisonTable-module_controlRow__Lf01P","controlCell":"ComparisonTable-module_controlCell__uauzO","controlCellContent":"ComparisonTable-module_controlCellContent__welDu","highlighted":"ComparisonTable-module_highlighted__WLAu4","highlightedBottom":"ComparisonTable-module_highlightedBottom__7PPJO","mobileLayout":"ComparisonTable-module_mobileLayout__GkFfO","desktopLayout":"ComparisonTable-module_desktopLayout__k3qMZ","desktopTableSticky":"ComparisonTable-module_desktopTableSticky__GflmR","desktopHeaderRow":"ComparisonTable-module_desktopHeaderRow__BmfJz","desktopSubHeaderRow":"ComparisonTable-module_desktopSubHeaderRow__4KeVU","desktopRow":"ComparisonTable-module_desktopRow__XrYwQ","desktopFeatureHeader":"ComparisonTable-module_desktopFeatureHeader__M5Aa-","desktopHeaderCell":"ComparisonTable-module_desktopHeaderCell__fEYWe","desktopControlsCell":"ComparisonTable-module_desktopControlsCell__5fjOI","desktopFeatureCell":"ComparisonTable-module_desktopFeatureCell__i5MiH","sectionToggleRow":"ComparisonTable-module_sectionToggleRow__XDwt4","sectionToggle":"ComparisonTable-module_sectionToggle__GR-Xz","sectionContent":"ComparisonTable-module_sectionContent__GuogA","sectionToggleContent":"ComparisonTable-module_sectionToggleContent__p0ouX","sectionToggleOpen":"ComparisonTable-module_sectionToggleOpen__ZFdLO","sectionChevron":"ComparisonTable-module_sectionChevron__0kmLs","sectionChevronOpen":"ComparisonTable-module_sectionChevronOpen__m7jv0","isLastRow":"ComparisonTable-module_isLastRow__coPlk"};
|
|
4456
|
+
|
|
4457
|
+
var HeaderCell = function (_a) {
|
|
4458
|
+
var _b;
|
|
4459
|
+
var children = _a.children, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, promoted = _a.promoted, props = __rest(_a, ["children", "columnIndex", "promoted"]);
|
|
4460
|
+
return (React.createElement("div", __assign({ role: "columnheader", className: classNames(styles$1.headerCell, (_b = {},
|
|
4461
|
+
_b[styles$1.highlighted] = columnIndex % 2 === 0,
|
|
4462
|
+
_b[styles$1.highlightedTop] = columnIndex % 2 === 0,
|
|
4463
|
+
_b)) }, filterAttrs(props)),
|
|
4464
|
+
promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
|
|
4465
|
+
React.createElement(Surface.Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
|
|
4466
|
+
React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
|
|
4467
|
+
React.createElement(Text.Text, { size: "s" }, promoted)))),
|
|
4468
|
+
children != null && (React.createElement(Heading.Heading, { size: "m", isWordWrap: true }, children))));
|
|
4469
|
+
};
|
|
4470
|
+
|
|
4471
|
+
var ControlCell = function (_a) {
|
|
4472
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
4473
|
+
return (React.createElement("div", __assign({ role: "cell", className: styles$1.controlCell }, filterAttrs(props)),
|
|
4474
|
+
React.createElement("div", { className: styles$1.controlCellContent }, children)));
|
|
4475
|
+
};
|
|
4476
|
+
|
|
4477
|
+
var Cell = function (_a) {
|
|
4478
|
+
var _b;
|
|
4479
|
+
var children = _a.children, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, _d = _a.isLastRow, isLastRow = _d === void 0 ? false : _d, props = __rest(_a, ["children", "columnIndex", "isLastRow"]);
|
|
4480
|
+
var isHighlighted = columnIndex % 2 === 0;
|
|
4481
|
+
return (React.createElement("div", __assign({ role: "cell", className: classNames(styles$1.cell, (_b = {},
|
|
4482
|
+
_b[styles$1.highlighted] = isHighlighted,
|
|
4483
|
+
_b[styles$1.highlightedBottom] = isHighlighted && isLastRow,
|
|
4484
|
+
_b)) }, filterAttrs(props)),
|
|
4485
|
+
React.createElement(Text.Text, null, children)));
|
|
4486
|
+
};
|
|
4487
|
+
|
|
4488
|
+
var styles = {"packageCell":"FeatureCell-module_packageCell__H7UPQ","packageCellPopoverDesktop":"FeatureCell-module_packageCellPopoverDesktop__AHGzm","packageCellTitle":"FeatureCell-module_packageCellTitle__747D6","packageCellHeading":"FeatureCell-module_packageCellHeading__YxXWC","packageCellPopoverMobile":"FeatureCell-module_packageCellPopoverMobile__JEZXA"};
|
|
4489
|
+
|
|
4490
|
+
var FeatureCell = function (_a) {
|
|
4491
|
+
var icon = _a.icon, title = _a.title, description = _a.description, popoverContent = _a.popoverContent;
|
|
4492
|
+
return (React.createElement("div", { className: styles.packageCell },
|
|
4493
|
+
React.createElement("div", { className: styles.packageCellTitle },
|
|
4494
|
+
React.createElement("div", { style: { width: 32 } },
|
|
4495
|
+
React.createElement(Icon.Icon, { icon: icon, size: 32, color: "brand" })),
|
|
4496
|
+
React.createElement("div", { className: styles.packageCellText },
|
|
4497
|
+
React.createElement("div", { className: styles.packageCellHeading },
|
|
4498
|
+
React.createElement(Heading.Heading, { size: "xs", isWordWrap: true }, title),
|
|
4499
|
+
popoverContent && (React.createElement("div", { className: styles.packageCellPopoverMobile },
|
|
4500
|
+
React.createElement(Popover.Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text.Text, null, popoverContent), maxWidth: 300, side: "top" },
|
|
4501
|
+
React.createElement(Icon.Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) })))),
|
|
4502
|
+
" "),
|
|
4503
|
+
description && (React.createElement(Text.Text, { size: "xs", tone: "muted" }, description)))),
|
|
4504
|
+
popoverContent && (React.createElement("div", { className: styles.packageCellPopoverDesktop },
|
|
4505
|
+
React.createElement(Popover.Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text.Text, null, popoverContent), side: "bottom", align: "start" },
|
|
4506
|
+
React.createElement(Icon.Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) }))))));
|
|
4507
|
+
};
|
|
4508
|
+
|
|
4509
|
+
/**
|
|
4510
|
+
* Renders a single content row of cells for the mobile layout.
|
|
4511
|
+
*/
|
|
4512
|
+
var renderRow = function (cells, key, isLastRow) { return (React.createElement("div", { key: key, className: styles$1.row }, cells.map(function (cell, index) { return (React.createElement(Cell, { key: "cell-".concat(index), columnIndex: index, isLastRow: isLastRow }, cell)); }))); };
|
|
4513
|
+
var MobileRow = function (_a) {
|
|
4514
|
+
var _b;
|
|
4515
|
+
var _c;
|
|
4516
|
+
var row = _a.row, _d = _a.isLastGroup, isLastGroup = _d === void 0 ? false : _d, props = __rest(_a, ["row", "isLastGroup"]);
|
|
4517
|
+
var subRows = (_c = row.subRows) !== null && _c !== void 0 ? _c : [];
|
|
4518
|
+
var hasSubRows = subRows.length > 0;
|
|
4519
|
+
return (React.createElement("div", __assign({ role: "row", className: classNames(styles$1.rowGroup, (_b = {},
|
|
4520
|
+
_b[styles$1.isLastRow] = isLastGroup,
|
|
4521
|
+
_b)) }, filterAttrs(props)),
|
|
4522
|
+
React.createElement("div", { className: styles$1.featureRow },
|
|
4523
|
+
React.createElement("div", { role: "rowheader", className: styles$1.featureRowHeader },
|
|
4524
|
+
React.createElement("div", { className: styles$1.featureRowHeaderContent },
|
|
4525
|
+
React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })))),
|
|
4526
|
+
renderRow(row.cells, "primary-row", isLastGroup && !hasSubRows),
|
|
4527
|
+
subRows.map(function (subRow, index) {
|
|
4528
|
+
return renderRow(subRow.cells, "row-".concat(index), isLastGroup && index === subRows.length - 1);
|
|
4529
|
+
})));
|
|
4530
|
+
};
|
|
4531
|
+
|
|
4532
|
+
var SectionToggle = function (_a) {
|
|
4533
|
+
var _b, _c;
|
|
4534
|
+
var heading = _a.heading, _d = _a.headingLevel, headingLevel = _d === void 0 ? "3" : _d, isOpen = _a.isOpen, onToggle = _a.onToggle, controlsId = _a.controlsId;
|
|
4535
|
+
return (React.createElement("button", { type: "button", className: classNames(styles$1.sectionToggle, (_b = {},
|
|
4536
|
+
_b[styles$1.sectionToggleOpen] = isOpen,
|
|
4537
|
+
_b)), "aria-expanded": isOpen, "aria-controls": controlsId, onClick: onToggle },
|
|
4538
|
+
React.createElement("span", { className: styles$1.sectionToggleContent },
|
|
4539
|
+
React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
|
|
4540
|
+
React.createElement("span", { className: classNames(styles$1.sectionChevron, (_c = {},
|
|
4541
|
+
_c[styles$1.sectionChevronOpen] = isOpen,
|
|
4542
|
+
_c)), "aria-hidden": "true" },
|
|
4543
|
+
React.createElement(Icon.Icon, { icon: BtIconChevronDownMid, size: 24 })))));
|
|
4544
|
+
};
|
|
4545
|
+
|
|
4546
|
+
/**
|
|
4547
|
+
* Optional-controlled open state for a section. When `open` is provided the
|
|
4548
|
+
* section is controlled and the internal state is ignored; otherwise the hook
|
|
4549
|
+
* manages its own state seeded by `defaultOpen`. `onOpenChange` is always
|
|
4550
|
+
* called with the next value when `toggle` runs.
|
|
4551
|
+
*/
|
|
4552
|
+
var useSectionState = function (_a) {
|
|
4553
|
+
var _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, open = _a.open, onOpenChange = _a.onOpenChange;
|
|
4554
|
+
var _c = React.useState(defaultOpen), internalOpen = _c[0], setInternalOpen = _c[1];
|
|
4555
|
+
var isControlled = open !== undefined;
|
|
4556
|
+
var isOpen = isControlled ? open : internalOpen;
|
|
4557
|
+
var toggle = React.useCallback(function () {
|
|
4558
|
+
var next = !isOpen;
|
|
4559
|
+
if (!isControlled) {
|
|
4560
|
+
setInternalOpen(next);
|
|
4561
|
+
}
|
|
4562
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
|
|
4563
|
+
}, [isControlled, isOpen, onOpenChange]);
|
|
4564
|
+
return { isOpen: isOpen, toggle: toggle };
|
|
4565
|
+
};
|
|
4566
|
+
|
|
4567
|
+
var Section = function (_a) {
|
|
4568
|
+
var _b;
|
|
4569
|
+
var section = _a.section, isLastSection = _a.isLastSection, renderRow = _a.renderRow;
|
|
4570
|
+
var regionId = React.useId();
|
|
4571
|
+
var _c = useSectionState({
|
|
4572
|
+
defaultOpen: section.defaultOpen,
|
|
4573
|
+
open: section.open,
|
|
4574
|
+
onOpenChange: section.onOpenChange,
|
|
4575
|
+
}), isOpen = _c.isOpen, toggle = _c.toggle;
|
|
4576
|
+
var lastRowIndex = section.rows.length - 1;
|
|
4577
|
+
return (React.createElement("div", { role: "rowgroup" },
|
|
4578
|
+
React.createElement("div", { role: "row", className: classNames(styles$1.sectionToggleRow, (_b = {},
|
|
4579
|
+
_b[styles$1.isLastRow] = isLastSection === true && !isOpen,
|
|
4580
|
+
_b)) },
|
|
4581
|
+
React.createElement(SectionToggle, { heading: section.heading, headingLevel: section.headingLevel, isOpen: isOpen, onToggle: toggle, controlsId: regionId })),
|
|
4582
|
+
isOpen && (React.createElement("div", { id: regionId, className: styles$1.sectionContent }, section.rows.map(function (row, index) {
|
|
4583
|
+
return renderRow(row, index, isLastSection === true && index === lastRowIndex);
|
|
4584
|
+
})))));
|
|
4585
|
+
};
|
|
4586
|
+
|
|
4587
|
+
var SubHeaderCell = function (_a) {
|
|
4588
|
+
var _b;
|
|
4589
|
+
var price = _a.price, priceIncrease = _a.priceIncrease, button = _a.button, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, props = __rest(_a, ["price", "priceIncrease", "button", "columnIndex"]);
|
|
4590
|
+
return (React.createElement("div", __assign({ role: "cell", className: classNames(styles$1.subHeaderCell, (_b = {},
|
|
4591
|
+
_b[styles$1.highlighted] = columnIndex % 2 === 0,
|
|
4592
|
+
_b)) }, filterAttrs(props)),
|
|
4593
|
+
React.createElement(ProductCardPrice, __assign({}, price)),
|
|
4594
|
+
priceIncrease && (React.createElement(ProductCardPriceIncrease, __assign({ heading: "Increasing to:", hideBorder: true }, priceIncrease))),
|
|
4595
|
+
React.createElement(VerticalSpace.VerticalSpace, null),
|
|
4596
|
+
button && React.createElement(ButtonV2.ButtonV2, __assign({ isFullWidth: true }, button))));
|
|
4597
|
+
};
|
|
4598
|
+
|
|
4599
|
+
var MobileTable = function (_a) {
|
|
4600
|
+
var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, className = _a.className;
|
|
4601
|
+
return (React.createElement("div", { role: "table", className: classNames(styles$1.table, className), style: { "--comparison-columns": columns.length } },
|
|
4602
|
+
React.createElement("div", { role: "row", className: styles$1.headerRow }, columns.map(function (column, index) { return (React.createElement(HeaderCell, { key: column.id, columnIndex: index, promoted: column.promoted }, column.label)); })),
|
|
4603
|
+
controls && (React.createElement("div", { role: "row", className: styles$1.controlRow, "aria-label": "comparison table controls" },
|
|
4604
|
+
React.createElement(ControlCell, null, controls))),
|
|
4605
|
+
columns.some(function (column) { return column.subheader; }) && (React.createElement("div", { role: "row", className: styles$1.subHeaderRow }, columns.map(function (column, index) {
|
|
4606
|
+
var _a;
|
|
4607
|
+
return (React.createElement(SubHeaderCell, __assign({ key: column.id, columnIndex: index }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
|
|
4608
|
+
}))),
|
|
4609
|
+
rows.map(function (row, index) { return (React.createElement(MobileRow, { key: "row-group-".concat(index), row: row, isLastGroup: sections.length === 0 && index === rows.length - 1 })); }),
|
|
4610
|
+
sections.map(function (section, index) { return (React.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React.createElement(MobileRow, { key: "section-group-".concat(rowIndex), row: row, isLastGroup: isLast })); } })); })));
|
|
4611
|
+
};
|
|
4612
|
+
|
|
4613
|
+
/**
|
|
4614
|
+
* The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
|
|
4615
|
+
* 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
|
|
4616
|
+
* the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
|
|
4617
|
+
*/
|
|
4618
|
+
var isPlanHighlighted$1 = function (planIndex) { return planIndex % 2 === 0; };
|
|
4619
|
+
var DesktopRow = function (_a) {
|
|
4620
|
+
var _b;
|
|
4621
|
+
var row = _a.row, _c = _a.isLastRow, isLastRow = _c === void 0 ? false : _c;
|
|
4622
|
+
return (React.createElement("div", { role: "row", className: classNames(styles$1.desktopRow, (_b = {},
|
|
4623
|
+
_b[styles$1.isLastRow] = isLastRow,
|
|
4624
|
+
_b)) },
|
|
4625
|
+
React.createElement("div", { role: "rowheader", className: styles$1.desktopFeatureCell },
|
|
4626
|
+
React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })),
|
|
4627
|
+
row.cells.map(function (cell, cellIndex) {
|
|
4628
|
+
var _a;
|
|
4629
|
+
return (React.createElement("div", { key: "desktop-cell-".concat(cellIndex), role: "cell", className: classNames(styles$1.cell, (_a = {},
|
|
4630
|
+
_a[styles$1.highlighted] = isPlanHighlighted$1(cellIndex),
|
|
4631
|
+
_a[styles$1.highlightedBottom] = isPlanHighlighted$1(cellIndex) && isLastRow,
|
|
4632
|
+
_a)) },
|
|
4633
|
+
React.createElement(Text.Text, null, cell)));
|
|
4634
|
+
})));
|
|
4635
|
+
};
|
|
4636
|
+
|
|
4637
|
+
/**
|
|
4638
|
+
* The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
|
|
4639
|
+
* 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
|
|
4640
|
+
* the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
|
|
4641
|
+
*/
|
|
4642
|
+
var isPlanHighlighted = function (planIndex) { return planIndex % 2 === 0; };
|
|
4643
|
+
var DesktopTable = function (_a) {
|
|
4644
|
+
var _b, _c;
|
|
4645
|
+
var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, hasStickyHeader = _a.hasStickyHeader, className = _a.className;
|
|
4646
|
+
var hasSubheader = columns.some(function (column) { return column.subheader; });
|
|
4647
|
+
return (React.createElement("div", { role: "table", className: classNames(styles$1.desktopTable, className, (_b = {},
|
|
4648
|
+
_b[styles$1.desktopTableSticky] = hasStickyHeader,
|
|
4649
|
+
_b)), style: { "--comparison-columns": columns.length } },
|
|
4650
|
+
React.createElement("div", { role: "row", className: classNames(styles$1.desktopHeaderRow, (_c = {},
|
|
4651
|
+
_c[styles$1.stickyHeader] = hasStickyHeader,
|
|
4652
|
+
_c)) },
|
|
4653
|
+
React.createElement("div", { role: "columnheader", className: styles$1.desktopFeatureHeader },
|
|
4654
|
+
React.createElement(VisuallyHidden.VisuallyHidden, null, "Features")),
|
|
4655
|
+
columns.map(function (column, index) {
|
|
4656
|
+
var _a;
|
|
4657
|
+
return (React.createElement("div", { key: column.id, role: "columnheader", className: classNames(styles$1.desktopHeaderCell, (_a = {},
|
|
4658
|
+
_a[styles$1.highlighted] = isPlanHighlighted(index),
|
|
4659
|
+
_a[styles$1.highlightedTop] = isPlanHighlighted(index),
|
|
4660
|
+
_a)) },
|
|
4661
|
+
column.promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
|
|
4662
|
+
React.createElement(Surface.Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
|
|
4663
|
+
React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
|
|
4664
|
+
React.createElement(Text.Text, { size: "s" }, column.promoted)))),
|
|
4665
|
+
React.createElement(Heading.Heading, { size: "m" }, column.label)));
|
|
4666
|
+
})),
|
|
4667
|
+
(controls || hasSubheader) && (React.createElement("div", { role: "row", className: styles$1.desktopSubHeaderRow },
|
|
4668
|
+
React.createElement("div", { className: styles$1.desktopControlsCell, "aria-label": "comparison table controls" }, controls),
|
|
4669
|
+
columns.map(function (column, index) {
|
|
4670
|
+
var _a;
|
|
4671
|
+
return (React.createElement(SubHeaderCell, __assign({ key: column.id, columnIndex: isPlanHighlighted(index) ? 0 : 1 }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
|
|
4672
|
+
}))),
|
|
4673
|
+
rows.map(function (row, rowIndex) { return (React.createElement(DesktopRow, { key: "desktop-row-".concat(rowIndex), row: row, isLastRow: sections.length === 0 && rowIndex === rows.length - 1 })); }),
|
|
4674
|
+
sections.map(function (section, index) { return (React.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React.createElement(DesktopRow, { key: "desktop-section-row-".concat(rowIndex), row: row, isLastRow: isLast })); } })); })));
|
|
4675
|
+
};
|
|
4676
|
+
|
|
4677
|
+
/**
|
|
4678
|
+
* Splits a flat list of rows into unsectioned rows and resolved sections.
|
|
4679
|
+
* Rows are bucketed by `sectionId` in one pass, then sections are built by
|
|
4680
|
+
* iterating `sections` (not the bucket keys) so section order follows the
|
|
4681
|
+
* `sections` array. A `sectionId` with no matching section logs a dev-only
|
|
4682
|
+
* warning and the row renders unsectioned, so rows are never lost.
|
|
4683
|
+
*/
|
|
4684
|
+
var groupRows = function (rows, sections) {
|
|
4685
|
+
if (rows === void 0) { rows = []; }
|
|
4686
|
+
if (sections === void 0) { sections = []; }
|
|
4687
|
+
var knownIds = new Set(sections.map(function (section) { return section.id; }));
|
|
4688
|
+
var rowsBySection = new Map();
|
|
4689
|
+
var unsectioned = [];
|
|
4690
|
+
rows.forEach(function (row) {
|
|
4691
|
+
var sectionId = row.sectionId;
|
|
4692
|
+
if (sectionId === undefined) {
|
|
4693
|
+
unsectioned.push(row);
|
|
4694
|
+
return;
|
|
4695
|
+
}
|
|
4696
|
+
if (!knownIds.has(sectionId)) {
|
|
4697
|
+
if (process.env.NODE_ENV !== "production") {
|
|
4698
|
+
// eslint-disable-next-line no-console
|
|
4699
|
+
console.warn("ComparisonTable: row sectionId \"".concat(sectionId, "\" does not match any section; rendering it unsectioned."));
|
|
4700
|
+
}
|
|
4701
|
+
unsectioned.push(row);
|
|
4702
|
+
return;
|
|
4703
|
+
}
|
|
4704
|
+
var bucket = rowsBySection.get(sectionId);
|
|
4705
|
+
if (bucket) {
|
|
4706
|
+
bucket.push(row);
|
|
4707
|
+
}
|
|
4708
|
+
else {
|
|
4709
|
+
rowsBySection.set(sectionId, [row]);
|
|
4710
|
+
}
|
|
4711
|
+
});
|
|
4712
|
+
var resolvedSections = [];
|
|
4713
|
+
sections.forEach(function (section) {
|
|
4714
|
+
var sectionRows = rowsBySection.get(section.id);
|
|
4715
|
+
if (sectionRows === null || sectionRows === void 0 ? void 0 : sectionRows.length) {
|
|
4716
|
+
resolvedSections.push(__assign(__assign({}, section), { rows: sectionRows }));
|
|
4717
|
+
}
|
|
4718
|
+
});
|
|
4719
|
+
return { unsectioned: unsectioned, sections: resolvedSections };
|
|
4720
|
+
};
|
|
4721
|
+
|
|
4722
|
+
var ComparisonTable = function (_a) {
|
|
4723
|
+
var _b;
|
|
4724
|
+
var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, _c = _a.hasBorder, hasBorder = _c === void 0 ? true : _c, _d = _a.hasStickyHeader, hasStickyHeader = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "rows", "sections", "controls", "hasBorder", "hasStickyHeader"]);
|
|
4725
|
+
var _e = React.useMemo(function () { return groupRows(rows, sections); }, [rows, sections]), unsectioned = _e.unsectioned, resolvedSections = _e.sections;
|
|
4726
|
+
return (React.createElement("div", __assign({ className: classNames(styles$1.wrapper, (_b = {},
|
|
4727
|
+
_b[styles$1.wrapperBordered] = hasBorder,
|
|
4728
|
+
_b)) }, filterAttrs(props)),
|
|
4729
|
+
hasBorder && React.createElement("div", { className: styles$1.shadowOverlay, "aria-hidden": "true" }),
|
|
4730
|
+
React.createElement(MobileTable, { className: styles$1.mobileLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls }),
|
|
4731
|
+
React.createElement(DesktopTable, { className: styles$1.desktopLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls, hasStickyHeader: hasStickyHeader })));
|
|
4732
|
+
};
|
|
4733
|
+
|
|
4432
4734
|
exports.Accordion = Accordion;
|
|
4433
4735
|
exports.ActionTile = ActionTile;
|
|
4434
4736
|
exports.ArticleCarousel = ArticleCarousel;
|
|
@@ -4436,12 +4738,17 @@ exports.ArticleSidebar = ArticleSidebar;
|
|
|
4436
4738
|
exports.Author = Author;
|
|
4437
4739
|
exports.BannerWithTabs = BannerWithTabs;
|
|
4438
4740
|
exports.BusinessSegmentSwitcher = BusinessSegmentSwitcher;
|
|
4741
|
+
exports.Cell = Cell;
|
|
4742
|
+
exports.ComparisonTable = ComparisonTable;
|
|
4439
4743
|
exports.ContentInfoWidget = ContentInfoWidget;
|
|
4744
|
+
exports.ControlCell = ControlCell;
|
|
4440
4745
|
exports.CopyLead = CopyLead;
|
|
4441
4746
|
exports.DownloadList = DownloadList;
|
|
4442
4747
|
exports.FAQs = FAQs;
|
|
4748
|
+
exports.FeatureCell = FeatureCell;
|
|
4443
4749
|
exports.FeaturePost = FeaturePost;
|
|
4444
4750
|
exports.HeaderBarNotification = HeaderBarNotification;
|
|
4751
|
+
exports.HeaderCell = HeaderCell;
|
|
4445
4752
|
exports.Highlights = Highlights;
|
|
4446
4753
|
exports.InlineLinkGroup = InlineLinkGroup;
|
|
4447
4754
|
exports.LinkTile = LinkTile;
|
|
@@ -4457,6 +4764,7 @@ exports.PromoListingThumbnailSignpost = PromoListingThumbnailSignpost;
|
|
|
4457
4764
|
exports.Quote = Quote;
|
|
4458
4765
|
exports.SectionHeading = SectionHeading;
|
|
4459
4766
|
exports.Statistics = Statistics;
|
|
4767
|
+
exports.SubHeaderCell = SubHeaderCell;
|
|
4460
4768
|
exports.Summary = Summary;
|
|
4461
4769
|
exports.ThumbnailSignpost = ThumbnailSignpost;
|
|
4462
4770
|
exports.VideoHeroCard = VideoHeroCard;
|