@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.mjs
CHANGED
|
@@ -255,7 +255,7 @@ var filterAttrs = function (props) {
|
|
|
255
255
|
const BtIconCrossAlt =
|
|
256
256
|
"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";
|
|
257
257
|
|
|
258
|
-
var styles$
|
|
258
|
+
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"};
|
|
259
259
|
|
|
260
260
|
var HeaderBarNotification = function (_a) {
|
|
261
261
|
var _b;
|
|
@@ -274,33 +274,33 @@ var HeaderBarNotification = function (_a) {
|
|
|
274
274
|
localStorage.setItem(localStorageId, "true");
|
|
275
275
|
setShowNotification(false);
|
|
276
276
|
};
|
|
277
|
-
return (React.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, onOpenAutoFocus: function (e) { return e.preventDefault(); }, className: classNames(styles$
|
|
278
|
-
React.createElement("div", { className: styles$
|
|
279
|
-
(image || icon) && (React.createElement("div", { className: styles$
|
|
277
|
+
return (React.createElement(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 },
|
|
278
|
+
React.createElement("div", { className: styles$C.content },
|
|
279
|
+
(image || icon) && (React.createElement("div", { className: styles$C.image },
|
|
280
280
|
image && (React.createElement(Image$2, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
281
281
|
icon && React.createElement(Icon, { icon: icon, size: 35 }))),
|
|
282
|
-
React.createElement("div", { className: styles$
|
|
282
|
+
React.createElement("div", { className: styles$C.details },
|
|
283
283
|
tagline && (React.createElement(Text, { size: "m", tone: "muted" }, tagline)),
|
|
284
284
|
React.createElement(Heading, { size: "s", level: "3" }, heading),
|
|
285
285
|
children)),
|
|
286
286
|
button && (React.createElement(ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
287
|
-
React.createElement("div", { className: styles$
|
|
287
|
+
React.createElement("div", { className: styles$C.closeButtonContainer },
|
|
288
288
|
React.createElement(Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
289
289
|
React.createElement(ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
290
290
|
React.createElement(NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
291
291
|
};
|
|
292
292
|
|
|
293
|
-
var styles$
|
|
293
|
+
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"};
|
|
294
294
|
|
|
295
295
|
var AccordionHeading = function (_a) {
|
|
296
296
|
var _b, _c;
|
|
297
297
|
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"]);
|
|
298
298
|
return (React.createElement("div", __assign({ className: classNames((_b = {},
|
|
299
|
-
_b[styles$
|
|
300
|
-
_b[styles$
|
|
301
|
-
_b[styles$
|
|
299
|
+
_b[styles$B["accordion-header"]] = true,
|
|
300
|
+
_b[styles$B["accordion-header--padded"]] = isPadded,
|
|
301
|
+
_b[styles$B["accordion-header--headingSizeM"]] = headingSize === "m",
|
|
302
302
|
_b)) }, filterAttrs(props)),
|
|
303
|
-
React.createElement("div", { className: classNames((_c = {}, _c[styles$
|
|
303
|
+
React.createElement("div", { className: classNames((_c = {}, _c[styles$B["accordion-header--hasImage"]] = image, _c)) },
|
|
304
304
|
image && (React.createElement("div", null,
|
|
305
305
|
React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
|
|
306
306
|
React.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
|
|
@@ -309,25 +309,25 @@ var AccordionHeading = function (_a) {
|
|
|
309
309
|
React.createElement(Text, { size: "l", elementType: "p" }, content)))));
|
|
310
310
|
};
|
|
311
311
|
|
|
312
|
-
var styles$
|
|
312
|
+
var styles$A = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
|
|
313
313
|
|
|
314
314
|
var AccordionDisclosureList = function (_a) {
|
|
315
315
|
var disclosureList = _a.disclosureList;
|
|
316
316
|
return (React.createElement("ul", null, disclosureList.map(function (_a) {
|
|
317
317
|
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"]);
|
|
318
|
-
return (React.createElement("li", { key: id, className: styles$
|
|
318
|
+
return (React.createElement("li", { key: id, className: styles$A.AccordionDisclosureListItem, id: id },
|
|
319
319
|
React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
|
|
320
320
|
})));
|
|
321
321
|
};
|
|
322
322
|
|
|
323
|
-
var styles$
|
|
323
|
+
var styles$z = {"Accordion":"Accordion-module_Accordion__LsXTU"};
|
|
324
324
|
|
|
325
325
|
/**
|
|
326
326
|
* Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
|
|
327
327
|
*/
|
|
328
328
|
var Accordion = function (_a) {
|
|
329
329
|
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"]);
|
|
330
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
330
|
+
return (React.createElement("div", __assign({ className: styles$z.Accordion }, filterAttrs(props)),
|
|
331
331
|
React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
|
|
332
332
|
React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
|
|
333
333
|
};
|
|
@@ -986,7 +986,7 @@ function requireDebounce () {
|
|
|
986
986
|
var debounceExports = requireDebounce();
|
|
987
987
|
var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
988
988
|
|
|
989
|
-
var styles$
|
|
989
|
+
var styles$y = {"sectionHeading--hasImage":"SectionHeading-module_sectionHeading--hasImage__qaz6n","sectionHeading--isCentered":"SectionHeading-module_sectionHeading--isCentered__i0fR8","sectionHeading-content":"SectionHeading-module_sectionHeading-content__ufB6w"};
|
|
990
990
|
|
|
991
991
|
var SectionHeading = function (_a) {
|
|
992
992
|
var _b, _c;
|
|
@@ -994,14 +994,14 @@ var SectionHeading = function (_a) {
|
|
|
994
994
|
return (React.createElement(Columns, null,
|
|
995
995
|
React.createElement(ColumnsCol, { spanM: isPadded ? 9 : 12 },
|
|
996
996
|
React.createElement("div", __assign({ className: classNames((_b = {},
|
|
997
|
-
_b[styles$
|
|
997
|
+
_b[styles$y["sectionHeading--isCentered"]] = isCentered,
|
|
998
998
|
_b)) }, filterAttrs(props)),
|
|
999
999
|
React.createElement("div", { className: classNames((_c = {},
|
|
1000
|
-
_c[styles$
|
|
1000
|
+
_c[styles$y["sectionHeading--hasImage"]] = image,
|
|
1001
1001
|
_c)) },
|
|
1002
1002
|
image && React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })),
|
|
1003
1003
|
React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
|
|
1004
|
-
content && (React.createElement("div", { className: styles$
|
|
1004
|
+
content && (React.createElement("div", { className: styles$y["sectionHeading-content"] },
|
|
1005
1005
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
1006
1006
|
React.createElement(Text, { size: "l", elementType: "p" }, content))),
|
|
1007
1007
|
React.createElement(VerticalSpace, { size: "40" })))));
|
|
@@ -1009,7 +1009,7 @@ var SectionHeading = function (_a) {
|
|
|
1009
1009
|
|
|
1010
1010
|
/**
|
|
1011
1011
|
* Do not edit directly
|
|
1012
|
-
* Generated on Tue,
|
|
1012
|
+
* Generated on Tue, 22 Sep 2026 09:38:58 GMT
|
|
1013
1013
|
*/
|
|
1014
1014
|
var ArcSizeBreakpointsXs = "320px";
|
|
1015
1015
|
var ArcSizeBreakpointsS = "636px";
|
|
@@ -1036,7 +1036,7 @@ var ArcBreakpoints = {
|
|
|
1036
1036
|
xs: parseInt(ArcSizeBreakpointsXs, 10),
|
|
1037
1037
|
};
|
|
1038
1038
|
|
|
1039
|
-
var styles$
|
|
1039
|
+
var styles$x = {"carouselWrapper":"ArticleCarousel-module_carouselWrapper__3mmGu","cardWrapperCarousel":"ArticleCarousel-module_cardWrapperCarousel__v3jv1","lastCard":"ArticleCarousel-module_lastCard__my93x"};
|
|
1040
1040
|
|
|
1041
1041
|
/**
|
|
1042
1042
|
* Use `ArticleCarousel` to give supporting information about a page or proposition in the form of the `Carousel` containing only `MediaCard` components.
|
|
@@ -1066,17 +1066,17 @@ var ArticleCarousel = function (_a) {
|
|
|
1066
1066
|
}, [minHeights, checkMinHeight]);
|
|
1067
1067
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
1068
1068
|
React.createElement(SectionHeading, { isPadded: isPadded, id: id, "data-testid": "ArticleCarousel-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content, isCentered: isCentered }),
|
|
1069
|
-
React.createElement("div", { className: styles$
|
|
1069
|
+
React.createElement("div", { className: styles$x.carouselWrapper },
|
|
1070
1070
|
React.createElement(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) {
|
|
1071
1071
|
var _a;
|
|
1072
|
-
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$
|
|
1073
|
-
_a[styles$
|
|
1072
|
+
return (React.createElement("div", { key: "".concat(componentId), className: classNames(styles$x.carouselSlide, styles$x.cardWrapperCarousel, (_a = {},
|
|
1073
|
+
_a[styles$x.lastCard] = i === cards.length - 1,
|
|
1074
1074
|
_a)) },
|
|
1075
1075
|
React.createElement(MediaCard, __assign({ isContained: cardsContained, minHeight: minimumHeight }, card))));
|
|
1076
1076
|
})))));
|
|
1077
1077
|
};
|
|
1078
1078
|
|
|
1079
|
-
var styles$
|
|
1079
|
+
var styles$w = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
|
|
1080
1080
|
|
|
1081
1081
|
var Author = function (_a) {
|
|
1082
1082
|
var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
|
|
@@ -1087,10 +1087,10 @@ var Author = function (_a) {
|
|
|
1087
1087
|
React.createElement(Grid, { isFluid: true, isGutterless: true },
|
|
1088
1088
|
React.createElement(GridRow, { align: "center" },
|
|
1089
1089
|
React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
|
|
1090
|
-
React.createElement("div", { className: isLargeAvatar ? styles$
|
|
1090
|
+
React.createElement("div", { className: isLargeAvatar ? styles$w.largeAvatar : undefined },
|
|
1091
1091
|
React.createElement(Avatar, __assign({}, avatar)))),
|
|
1092
1092
|
React.createElement(GridCol, null,
|
|
1093
|
-
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$
|
|
1093
|
+
React.createElement("div", { className: "".concat(!isLargeAvatar && styles$w.authorContent), "data-testid": "authorContent" },
|
|
1094
1094
|
React.createElement(Heading, { size: "xs" }, name),
|
|
1095
1095
|
React.createElement(Text, { size: "s" }, title)))))));
|
|
1096
1096
|
};
|
|
@@ -1105,35 +1105,35 @@ var MultiLineText = function (_a) {
|
|
|
1105
1105
|
React.createElement(Text, __assign({}, textProps), paragraph))); })));
|
|
1106
1106
|
};
|
|
1107
1107
|
|
|
1108
|
-
var styles$
|
|
1108
|
+
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"};
|
|
1109
1109
|
|
|
1110
1110
|
var MediaContent$1 = function (_a) {
|
|
1111
1111
|
var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content;
|
|
1112
|
-
return (React.createElement("div", { className: styles$
|
|
1112
|
+
return (React.createElement("div", { className: styles$v.mediaContainer },
|
|
1113
1113
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
1114
|
-
content && (React.createElement("div", { className: styles$
|
|
1114
|
+
content && (React.createElement("div", { className: styles$v.content },
|
|
1115
1115
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
1116
1116
|
React.createElement(MultiLineText, { text: content, size: "l" })))));
|
|
1117
1117
|
};
|
|
1118
1118
|
|
|
1119
1119
|
var Image$1 = function (_a) {
|
|
1120
1120
|
var sources = _a.sources, props = __rest(_a, ["sources"]);
|
|
1121
|
-
return (React.createElement("div", { className: styles$
|
|
1121
|
+
return (React.createElement("div", { className: styles$v.imgWrapper },
|
|
1122
1122
|
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
1123
1123
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
|
|
1124
1124
|
};
|
|
1125
1125
|
|
|
1126
1126
|
var IconList = function (_a) {
|
|
1127
1127
|
var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
|
|
1128
|
-
return (React.createElement("ul", { className: styles$
|
|
1128
|
+
return (React.createElement("ul", { className: styles$v.list }, listItems.map(function (_a) {
|
|
1129
1129
|
var _b;
|
|
1130
1130
|
var icon = _a.icon, heading = _a.heading, text = _a.text;
|
|
1131
|
-
return (React.createElement("li", { key: heading, className: classNames(styles$
|
|
1132
|
-
_b[styles$
|
|
1131
|
+
return (React.createElement("li", { key: heading, className: classNames(styles$v.listItem, (_b = {},
|
|
1132
|
+
_b[styles$v.listItemCentered] = !text,
|
|
1133
1133
|
_b)) },
|
|
1134
|
-
React.createElement("div", { className: styles$
|
|
1134
|
+
React.createElement("div", { className: styles$v.listItemIconContainer },
|
|
1135
1135
|
React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
|
|
1136
|
-
React.createElement("div", { className: styles$
|
|
1136
|
+
React.createElement("div", { className: styles$v.listItemTextContainer },
|
|
1137
1137
|
React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
|
|
1138
1138
|
text && (React.createElement(React.Fragment, null,
|
|
1139
1139
|
React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
|
|
@@ -1141,20 +1141,20 @@ var IconList = function (_a) {
|
|
|
1141
1141
|
})));
|
|
1142
1142
|
};
|
|
1143
1143
|
|
|
1144
|
-
var Button = function (props) { return (React.createElement("div", { className: styles$
|
|
1144
|
+
var Button = function (props) { return (React.createElement("div", { className: styles$v.buttonContainer },
|
|
1145
1145
|
React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
|
|
1146
1146
|
|
|
1147
1147
|
var Container = function (_a) {
|
|
1148
1148
|
var _b;
|
|
1149
1149
|
var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
|
|
1150
|
-
return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$
|
|
1151
|
-
_b[styles$
|
|
1150
|
+
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 = {},
|
|
1151
|
+
_b[styles$v["container--reverse"]] = isReverseOrder,
|
|
1152
1152
|
_b)) }, children));
|
|
1153
1153
|
};
|
|
1154
1154
|
|
|
1155
1155
|
var Column = function (_a) {
|
|
1156
1156
|
var children = _a.children;
|
|
1157
|
-
return (React.createElement("div", { className: styles$
|
|
1157
|
+
return (React.createElement("div", { className: styles$v.col }, children));
|
|
1158
1158
|
};
|
|
1159
1159
|
|
|
1160
1160
|
var getListHeadingLevel$1 = function (level) {
|
|
@@ -1222,7 +1222,7 @@ var CopyLead = function (_a) {
|
|
|
1222
1222
|
return null;
|
|
1223
1223
|
};
|
|
1224
1224
|
|
|
1225
|
-
var styles$
|
|
1225
|
+
var styles$u = {"downloadList-below":"DownloadList-module_downloadList-below__21q6i","downloadList-right":"DownloadList-module_downloadList-right__mHYHL"};
|
|
1226
1226
|
|
|
1227
1227
|
var DownloadList = function (_a) {
|
|
1228
1228
|
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"]);
|
|
@@ -1232,12 +1232,12 @@ var DownloadList = function (_a) {
|
|
|
1232
1232
|
" ",
|
|
1233
1233
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
1234
1234
|
React.createElement(ColumnsCol, { spanL: alignment === "right" ? 6 : 8, spanM: 9, spanS: 12 },
|
|
1235
|
-
React.createElement("div", { className: styles$
|
|
1235
|
+
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) },
|
|
1236
1236
|
React.createElement(Download, __assign({}, downloadProps)),
|
|
1237
1237
|
i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); }))))));
|
|
1238
1238
|
};
|
|
1239
1239
|
|
|
1240
|
-
var styles$
|
|
1240
|
+
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"};
|
|
1241
1241
|
|
|
1242
1242
|
var scrollToSectionFocusFirstElement = function (item) {
|
|
1243
1243
|
var _a, _b, _c, _d, _e;
|
|
@@ -1251,23 +1251,23 @@ var scrollToSectionFocusFirstElement = function (item) {
|
|
|
1251
1251
|
var FAQs = function (_a) {
|
|
1252
1252
|
var _b;
|
|
1253
1253
|
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"]);
|
|
1254
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
1254
|
+
return (React.createElement("div", __assign({ className: styles$t.FAQs }, filterAttrs(props)),
|
|
1255
1255
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
|
|
1256
|
-
type === "listWithLinks" && (React.createElement("div", { className: styles$
|
|
1257
|
-
React.createElement("div", { className: styles$
|
|
1256
|
+
type === "listWithLinks" && (React.createElement("div", { className: styles$t.linkListSection },
|
|
1257
|
+
React.createElement("div", { className: styles$t.linkListTitle },
|
|
1258
1258
|
React.createElement(Heading, { size: "xs" }, linkListHeading)),
|
|
1259
1259
|
React.createElement("ul", { className: classNames((_b = {},
|
|
1260
|
-
_b[styles$
|
|
1261
|
-
_b[styles$
|
|
1260
|
+
_b[styles$t.linkList] = true,
|
|
1261
|
+
_b[styles$t["linkList--padded"]] = isPadded,
|
|
1262
1262
|
_b)) }, accordionData.map(function (item) {
|
|
1263
1263
|
var _a;
|
|
1264
|
-
return (React.createElement("li", { className: styles$
|
|
1264
|
+
return (React.createElement("li", { className: styles$t.linkListItem, key: item.heading },
|
|
1265
1265
|
React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
|
|
1266
1266
|
e.preventDefault();
|
|
1267
1267
|
scrollToSectionFocusFirstElement(item);
|
|
1268
1268
|
} }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
|
|
1269
1269
|
})))),
|
|
1270
|
-
type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$
|
|
1270
|
+
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 },
|
|
1271
1271
|
React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
|
|
1272
1272
|
React.createElement(VerticalSpace, { size: "48", sizeL: "64" }))); }))),
|
|
1273
1273
|
type === "tabs" && (React.createElement(Tabs, { defaultValue: accordionData[0].heading },
|
|
@@ -3464,12 +3464,12 @@ function cleanEscapedString(input) {
|
|
|
3464
3464
|
return matched[1].replace(doubleQuoteRegExp, "'");
|
|
3465
3465
|
}
|
|
3466
3466
|
|
|
3467
|
-
var styles$
|
|
3467
|
+
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"};
|
|
3468
3468
|
|
|
3469
3469
|
var Image = function (_a) {
|
|
3470
3470
|
var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
|
|
3471
3471
|
return (React.createElement(React.Fragment, null,
|
|
3472
|
-
React.createElement("div", { className: styles$
|
|
3472
|
+
React.createElement("div", { className: styles$s.imgWrapper },
|
|
3473
3473
|
React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
|
|
3474
3474
|
sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
|
|
3475
3475
|
title && (React.createElement(React.Fragment, null,
|
|
@@ -3504,21 +3504,22 @@ var MediaContent = function (_a) {
|
|
|
3504
3504
|
* 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.
|
|
3505
3505
|
* */
|
|
3506
3506
|
var FeaturePost = function (_a) {
|
|
3507
|
-
var _b;
|
|
3508
|
-
var
|
|
3507
|
+
var _b, _c;
|
|
3508
|
+
var _d;
|
|
3509
|
+
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"]);
|
|
3509
3510
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3510
|
-
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$
|
|
3511
|
-
_b[styles$
|
|
3511
|
+
return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$s.featurePost, (_b = {},
|
|
3512
|
+
_b[styles$s.featurePostReversed] = isReverseOrder,
|
|
3512
3513
|
_b)) }, filterAttrs(props)),
|
|
3513
|
-
React.createElement("div", { className: styles$
|
|
3514
|
-
React.createElement("div", { className: styles$
|
|
3515
|
-
label && (React.createElement(
|
|
3516
|
-
React.createElement(
|
|
3517
|
-
React.createElement(
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3514
|
+
React.createElement("div", { className: styles$s.col },
|
|
3515
|
+
React.createElement("div", { className: styles$s.contentContainer },
|
|
3516
|
+
label && (React.createElement(React.Fragment, null,
|
|
3517
|
+
React.createElement("div", { className: styles$s.labelContainer },
|
|
3518
|
+
React.createElement("span", { className: classNames(styles$s.labelText, (_c = {},
|
|
3519
|
+
_c[styles$s.labelWordWrap] = isHeadingWordWrap,
|
|
3520
|
+
_c)) }, label.text),
|
|
3521
|
+
React.createElement("div", { className: styles$s.labelDate },
|
|
3522
|
+
React.createElement(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))))),
|
|
3522
3523
|
React.createElement(VerticalSpace, { size: "24" }))),
|
|
3523
3524
|
React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
|
|
3524
3525
|
!isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
|
|
@@ -3531,7 +3532,7 @@ var FeaturePost = function (_a) {
|
|
|
3531
3532
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
3532
3533
|
React.createElement(Author, __assign({}, footer.author)))),
|
|
3533
3534
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
3534
|
-
React.createElement(ButtonV2, __assign({ buttonStyle:
|
|
3535
|
+
React.createElement(ButtonV2, __assign({}, footer.button, { buttonStyle: (_d = footer.button.buttonStyle) !== null && _d !== void 0 ? _d : "secondary" })))),
|
|
3535
3536
|
(footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
|
|
3536
3537
|
React.createElement(VerticalSpace, { size: "40" }),
|
|
3537
3538
|
React.createElement(Grid, { isGutterless: true, isFluid: true },
|
|
@@ -3539,10 +3540,10 @@ var FeaturePost = function (_a) {
|
|
|
3539
3540
|
footer.appStore && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
3540
3541
|
React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
|
|
3541
3542
|
footer.googlePlay && (React.createElement(GridCol, { xs: 12, s: "auto" },
|
|
3542
|
-
React.createElement("div", { className: styles$
|
|
3543
|
+
React.createElement("div", { className: styles$s.googlePlayButtonWrapper },
|
|
3543
3544
|
React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
|
|
3544
|
-
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$
|
|
3545
|
-
React.createElement("div", { "data-testid": "desktop-img", className: styles$
|
|
3545
|
+
isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$s.col },
|
|
3546
|
+
React.createElement("div", { "data-testid": "desktop-img", className: styles$s.imgContainer },
|
|
3546
3547
|
React.createElement(MediaContent, { image: image, video: video }))))));
|
|
3547
3548
|
};
|
|
3548
3549
|
|
|
@@ -3554,7 +3555,7 @@ var FeaturePost = function (_a) {
|
|
|
3554
3555
|
const BtIconArrowRightFill =
|
|
3555
3556
|
"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";
|
|
3556
3557
|
|
|
3557
|
-
var styles$
|
|
3558
|
+
var styles$r = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
|
|
3558
3559
|
|
|
3559
3560
|
var getListHeadingLevel = function (level) {
|
|
3560
3561
|
var nextLevel = Math.min(parseInt(level) + 1, 6);
|
|
@@ -3564,8 +3565,8 @@ var getListHeadingLevel = function (level) {
|
|
|
3564
3565
|
var HighlightItem = function (_a) {
|
|
3565
3566
|
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"]);
|
|
3566
3567
|
var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
|
|
3567
|
-
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$
|
|
3568
|
-
icon && (React.createElement("div", { className: styles$
|
|
3568
|
+
return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$r.highlightItem }, filterAttrs(props)),
|
|
3569
|
+
icon && (React.createElement("div", { className: styles$r.Icon },
|
|
3569
3570
|
React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
|
|
3570
3571
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3571
3572
|
React.createElement(Heading, { level: listHeadingLevel, size: "m" }, heading),
|
|
@@ -3578,7 +3579,7 @@ var HighlightItem = function (_a) {
|
|
|
3578
3579
|
var HighlightList = function (_a) {
|
|
3579
3580
|
var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
|
|
3580
3581
|
var id = useId();
|
|
3581
|
-
return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$
|
|
3582
|
+
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) {
|
|
3582
3583
|
var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
|
|
3583
3584
|
return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
|
|
3584
3585
|
})));
|
|
@@ -3590,22 +3591,22 @@ var HighlightList = function (_a) {
|
|
|
3590
3591
|
* Both two and three column options are available.
|
|
3591
3592
|
*/
|
|
3592
3593
|
var Highlights = function (_a) {
|
|
3593
|
-
var _b, _c, _d;
|
|
3594
|
-
var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems,
|
|
3594
|
+
var _b, _c, _d, _e;
|
|
3595
|
+
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"]);
|
|
3595
3596
|
var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
|
|
3596
3597
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3597
3598
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
|
|
3598
3599
|
React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
|
|
3599
3600
|
cta && (React.createElement(React.Fragment, null,
|
|
3600
3601
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
3601
|
-
React.createElement(ButtonV2, {
|
|
3602
|
-
? ((
|
|
3603
|
-
:
|
|
3604
|
-
? ((
|
|
3605
|
-
:
|
|
3602
|
+
React.createElement(ButtonV2, __assign({}, cta, { size: "m", buttonStyle: (_b = cta.buttonStyle) !== null && _b !== void 0 ? _b : "secondary", icon: cta.buttonStyle === "compact"
|
|
3603
|
+
? ((_c = cta.icon) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
|
|
3604
|
+
: cta.icon, iconActive: cta.buttonStyle === "compact"
|
|
3605
|
+
? ((_d = cta.iconActive) !== null && _d !== void 0 ? _d : BtIconArrowRightFill)
|
|
3606
|
+
: cta.iconActive, iconPosition: (_e = cta.iconPosition) !== null && _e !== void 0 ? _e : "beforeText" }))))));
|
|
3606
3607
|
};
|
|
3607
3608
|
|
|
3608
|
-
var styles$
|
|
3609
|
+
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"};
|
|
3609
3610
|
|
|
3610
3611
|
/**
|
|
3611
3612
|
* Do not edit directly
|
|
@@ -3660,6 +3661,14 @@ const BtIconChatMessage =
|
|
|
3660
3661
|
* Generated file
|
|
3661
3662
|
*/
|
|
3662
3663
|
|
|
3664
|
+
const BtIconChevronDownMid =
|
|
3665
|
+
"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";
|
|
3666
|
+
|
|
3667
|
+
/**
|
|
3668
|
+
* Do not edit directly
|
|
3669
|
+
* Generated file
|
|
3670
|
+
*/
|
|
3671
|
+
|
|
3663
3672
|
const BtIconClock =
|
|
3664
3673
|
"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";
|
|
3665
3674
|
|
|
@@ -3676,6 +3685,14 @@ const BtIconEmailUnread =
|
|
|
3676
3685
|
* Generated file
|
|
3677
3686
|
*/
|
|
3678
3687
|
|
|
3688
|
+
const BtIconInfo =
|
|
3689
|
+
"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";
|
|
3690
|
+
|
|
3691
|
+
/**
|
|
3692
|
+
* Do not edit directly
|
|
3693
|
+
* Generated file
|
|
3694
|
+
*/
|
|
3695
|
+
|
|
3679
3696
|
const BtIconLink =
|
|
3680
3697
|
"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";
|
|
3681
3698
|
|
|
@@ -3723,7 +3740,7 @@ var PromoListing = function (_a) {
|
|
|
3723
3740
|
var CardComponent = CARD_COMPONENTS[card.type];
|
|
3724
3741
|
return React.createElement(CardComponent, __assign({}, card, commonProps));
|
|
3725
3742
|
};
|
|
3726
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
3743
|
+
return (React.createElement("div", __assign({ className: styles$q.PromoListing }, filterAttrs(props)),
|
|
3727
3744
|
overlineLabel && (React.createElement(React.Fragment, null,
|
|
3728
3745
|
React.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
|
|
3729
3746
|
React.createElement(VerticalSpace, { size: "12" }))),
|
|
@@ -3731,44 +3748,44 @@ var PromoListing = function (_a) {
|
|
|
3731
3748
|
button.label && (React.createElement(React.Fragment, null,
|
|
3732
3749
|
React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
|
|
3733
3750
|
React.createElement(VerticalSpace, { size: "40" }))),
|
|
3734
|
-
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$
|
|
3735
|
-
React.createElement(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$
|
|
3736
|
-
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$
|
|
3751
|
+
isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$q.CarouselWrapper },
|
|
3752
|
+
React.createElement(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) },
|
|
3753
|
+
React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$q.cardWrapper }, getCard(card)))); })))));
|
|
3737
3754
|
};
|
|
3738
3755
|
|
|
3739
|
-
var styles$
|
|
3756
|
+
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"};
|
|
3740
3757
|
|
|
3741
3758
|
/**
|
|
3742
3759
|
* 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.*/
|
|
3743
3760
|
var Quote = function (_a) {
|
|
3744
3761
|
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"]);
|
|
3745
3762
|
return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
|
|
3746
|
-
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$
|
|
3747
|
-
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$
|
|
3763
|
+
React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$p.blockQuote, styles$p["quote".concat(styling)]), cite: citeUrl },
|
|
3764
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$p.quoteIcon, "aria-hidden": "true" },
|
|
3748
3765
|
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" })),
|
|
3749
|
-
React.createElement("p", { className: styles$
|
|
3766
|
+
React.createElement("p", { className: styles$p.quoteContent }, content)),
|
|
3750
3767
|
author && React.createElement(Author, __assign({}, author))));
|
|
3751
3768
|
};
|
|
3752
3769
|
|
|
3753
|
-
var styles$
|
|
3770
|
+
var styles$o = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
|
|
3754
3771
|
|
|
3755
3772
|
var Summary = function (_a) {
|
|
3756
3773
|
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"]);
|
|
3757
3774
|
var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
|
|
3758
3775
|
return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
|
|
3759
|
-
React.createElement("div", { className: styles$
|
|
3776
|
+
React.createElement("div", { className: styles$o.row }, content.map(function (_a, i) {
|
|
3760
3777
|
var heading = _a.heading, text = _a.text;
|
|
3761
3778
|
return (React.createElement(React.Fragment, null,
|
|
3762
|
-
React.createElement("div", { className: styles$
|
|
3779
|
+
React.createElement("div", { className: styles$o.col },
|
|
3763
3780
|
React.createElement(Heading, { size: "s", level: headingLevel }, heading),
|
|
3764
3781
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
3765
3782
|
React.createElement(Text, { size: "s" }, text)),
|
|
3766
|
-
i !== content.length - 1 && (React.createElement("div", { className: styles$
|
|
3783
|
+
i !== content.length - 1 && (React.createElement("div", { className: styles$o.ruleContainer },
|
|
3767
3784
|
React.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
|
|
3768
3785
|
}))));
|
|
3769
3786
|
};
|
|
3770
3787
|
|
|
3771
|
-
var styles$
|
|
3788
|
+
var styles$n = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
|
|
3772
3789
|
|
|
3773
3790
|
var getLinkProps = function (link) {
|
|
3774
3791
|
return link.openInNewTab
|
|
@@ -3786,7 +3803,7 @@ var Statistics = function (_a) {
|
|
|
3786
3803
|
React.createElement(ColumnsCol, { spanM: 9 },
|
|
3787
3804
|
React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
|
|
3788
3805
|
React.createElement(ColumnsCol, { spanL: 9 },
|
|
3789
|
-
React.createElement("ul", { className: styles$
|
|
3806
|
+
React.createElement("ul", { className: styles$n.list }, statistics.map(function (_a, i) {
|
|
3790
3807
|
var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
|
|
3791
3808
|
return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
|
|
3792
3809
|
i !== 0 && (React.createElement(React.Fragment, null,
|
|
@@ -3796,7 +3813,7 @@ var Statistics = function (_a) {
|
|
|
3796
3813
|
React.createElement(Columns, null,
|
|
3797
3814
|
React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
|
|
3798
3815
|
React.createElement(Align, { vertical: "center" },
|
|
3799
|
-
React.createElement("div", { className: styles$
|
|
3816
|
+
React.createElement("div", { className: styles$n.statWrapper },
|
|
3800
3817
|
React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
|
|
3801
3818
|
React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
|
|
3802
3819
|
React.createElement(VerticalSpace, { size: "12" }))))),
|
|
@@ -3809,26 +3826,26 @@ var Statistics = function (_a) {
|
|
|
3809
3826
|
source && (React.createElement(React.Fragment, null,
|
|
3810
3827
|
React.createElement(VerticalSpace, { size: "12" }),
|
|
3811
3828
|
React.createElement(Text, { size: "xs" },
|
|
3812
|
-
React.createElement("span", { className: styles$
|
|
3829
|
+
React.createElement("span", { className: styles$n.mutedText }, source)))),
|
|
3813
3830
|
sourceUrl && (React.createElement(Text, { size: "xs" },
|
|
3814
|
-
React.createElement("a", { className: styles$
|
|
3831
|
+
React.createElement("a", { className: styles$n.mutedText, href: sourceUrl }, sourceUrl))))))));
|
|
3815
3832
|
})))));
|
|
3816
3833
|
};
|
|
3817
3834
|
|
|
3818
|
-
var styles$
|
|
3835
|
+
var styles$m = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
|
|
3819
3836
|
|
|
3820
3837
|
var BannerWithTabs = function (_a) {
|
|
3821
3838
|
var _b;
|
|
3822
3839
|
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"]);
|
|
3823
3840
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3824
3841
|
React.createElement("div", { className: classNames((_b = {},
|
|
3825
|
-
_b[styles$
|
|
3842
|
+
_b[styles$m.bannerWithTabsHeadingCentered] = alignTypography === "center",
|
|
3826
3843
|
_b)) },
|
|
3827
3844
|
React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, headingLevel: headingLevel, content: content, isPadded: alignTypography === "left" ? true : false })),
|
|
3828
3845
|
React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
|
|
3829
3846
|
};
|
|
3830
3847
|
|
|
3831
|
-
var styles$
|
|
3848
|
+
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"};
|
|
3832
3849
|
|
|
3833
3850
|
/**
|
|
3834
3851
|
* Use `ArticleSidebar` to provide additional information about the article.
|
|
@@ -3890,7 +3907,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3890
3907
|
var hasBottomContent = Boolean(linkSection || topics || showShare);
|
|
3891
3908
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3892
3909
|
React.createElement("div", { className: classNames((_b = {},
|
|
3893
|
-
_b[styles$
|
|
3910
|
+
_b[styles$l.textContent] = hasTopContent,
|
|
3894
3911
|
_b)) },
|
|
3895
3912
|
author && (React.createElement(React.Fragment, null,
|
|
3896
3913
|
React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
|
|
@@ -3901,7 +3918,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3901
3918
|
React.createElement(Text, { size: "s" }, aboutSection.content))),
|
|
3902
3919
|
additionalContent && (React.createElement(React.Fragment, null,
|
|
3903
3920
|
(author || aboutSection) && React.createElement(VerticalSpace, { size: "16" }),
|
|
3904
|
-
React.createElement("div", { className: styles$
|
|
3921
|
+
React.createElement("div", { className: styles$l.additionalContentContainer }, additionalContent.map(function (_a) {
|
|
3905
3922
|
var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
|
|
3906
3923
|
return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
|
|
3907
3924
|
React.createElement(Heading, { level: headingLevel, size: "xxs" }, heading),
|
|
@@ -3924,7 +3941,7 @@ var ArticleSidebar = function (_a) {
|
|
|
3924
3941
|
linkSection && React.createElement(VerticalSpace, { size: "32" }),
|
|
3925
3942
|
React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
|
|
3926
3943
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3927
|
-
React.createElement("div", { className: styles$
|
|
3944
|
+
React.createElement("div", { className: styles$l.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
|
|
3928
3945
|
showShare && (React.createElement(React.Fragment, null,
|
|
3929
3946
|
(linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
|
|
3930
3947
|
React.createElement(VerticalSpace, { size: "32" }),
|
|
@@ -3932,16 +3949,16 @@ var ArticleSidebar = function (_a) {
|
|
|
3932
3949
|
React.createElement(VerticalSpace, { size: "32" }))),
|
|
3933
3950
|
React.createElement(Heading, { level: share.headingLevel }, share.heading),
|
|
3934
3951
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
3935
|
-
React.createElement("div", { className: styles$
|
|
3952
|
+
React.createElement("div", { className: styles$l.shareButtonContainer }, shareButtons.map(function (_a) {
|
|
3936
3953
|
var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
|
|
3937
|
-
return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$
|
|
3954
|
+
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 },
|
|
3938
3955
|
React.createElement(Icon, { icon: icon, size: 24 })));
|
|
3939
3956
|
})))),
|
|
3940
3957
|
React.createElement(Toast, null,
|
|
3941
3958
|
React.createElement(ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
|
|
3942
3959
|
};
|
|
3943
3960
|
|
|
3944
|
-
var styles$
|
|
3961
|
+
var styles$k = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
|
|
3945
3962
|
|
|
3946
3963
|
/**
|
|
3947
3964
|
* Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
|
|
@@ -3987,7 +4004,7 @@ var ProductNavigation = function (_a) {
|
|
|
3987
4004
|
var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
|
|
3988
4005
|
return (React.createElement("div", __assign({}, filterAttrs(props)),
|
|
3989
4006
|
React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
|
|
3990
|
-
React.createElement("ul", { className: classNames(styles$
|
|
4007
|
+
React.createElement("ul", { className: classNames(styles$k["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
|
|
3991
4008
|
var _a;
|
|
3992
4009
|
return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
|
|
3993
4010
|
React.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
|
|
@@ -3999,7 +4016,7 @@ var ProductNavigation = function (_a) {
|
|
|
3999
4016
|
!hideLessButton && (React.createElement(ButtonV2, { label: displayList.length < productList.length
|
|
4000
4017
|
? "Show more"
|
|
4001
4018
|
: "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
|
|
4002
|
-
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$
|
|
4019
|
+
displaySkipButton && displayList.length > cardsToDisplay && (React.createElement("div", { id: "skip-link", className: classNames(styles$k["productNavigation-skipLink"]), tabIndex: -1 },
|
|
4003
4020
|
React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true }))),
|
|
4004
4021
|
React.createElement(VisuallyHidden, null,
|
|
4005
4022
|
React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
|
|
@@ -4011,18 +4028,18 @@ var ProductNavigation = function (_a) {
|
|
|
4011
4028
|
"."))))))));
|
|
4012
4029
|
};
|
|
4013
4030
|
|
|
4014
|
-
var styles$
|
|
4031
|
+
var styles$j = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
|
|
4015
4032
|
|
|
4016
4033
|
var ContentInfoWidget = function (_a) {
|
|
4017
4034
|
var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
|
|
4018
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4019
|
-
React.createElement("div", { className: styles$
|
|
4035
|
+
return (React.createElement("div", __assign({ className: styles$j.container }, filterAttrs(props)),
|
|
4036
|
+
React.createElement("div", { className: styles$j.icon },
|
|
4020
4037
|
React.createElement(Icon, { size: 20, icon: icon })),
|
|
4021
|
-
React.createElement("div", { className: styles$
|
|
4038
|
+
React.createElement("div", { className: styles$j.text },
|
|
4022
4039
|
React.createElement(Text, { size: "xs", tone: "muted" }, text))));
|
|
4023
4040
|
};
|
|
4024
4041
|
|
|
4025
|
-
var styles$
|
|
4042
|
+
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"};
|
|
4026
4043
|
|
|
4027
4044
|
var ActionTile = function (_a) {
|
|
4028
4045
|
var _b, _c;
|
|
@@ -4030,51 +4047,51 @@ var ActionTile = function (_a) {
|
|
|
4030
4047
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4031
4048
|
var iconSize = isCompact ? 40 : 48;
|
|
4032
4049
|
var content = (React.createElement(React.Fragment, null,
|
|
4033
|
-
React.createElement("div", { className: classNames(styles$
|
|
4034
|
-
_b[styles$
|
|
4050
|
+
React.createElement("div", { className: classNames(styles$i["action-tile-content"], (_b = {},
|
|
4051
|
+
_b[styles$i["action-tile-content--without-icon"]] = !displayIcon,
|
|
4035
4052
|
_b)) },
|
|
4036
|
-
displayIcon && (React.createElement("div", { className: styles$
|
|
4053
|
+
displayIcon && (React.createElement("div", { className: styles$i["action-tile-icon"] },
|
|
4037
4054
|
React.createElement(Icon, { icon: displayIcon, size: iconSize }))),
|
|
4038
|
-
React.createElement("span", { className: styles$
|
|
4039
|
-
isActive && (React.createElement("div", { className: styles$
|
|
4055
|
+
React.createElement("span", { className: styles$i["action-tile-heading"] }, heading)),
|
|
4056
|
+
isActive && (React.createElement("div", { className: styles$i["action-tile-tick"] },
|
|
4040
4057
|
React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4041
|
-
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$
|
|
4042
|
-
_c[styles$
|
|
4043
|
-
_c[styles$
|
|
4058
|
+
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$i["action-tile"], (_c = {},
|
|
4059
|
+
_c[styles$i["action-tile--active"]] = isActive,
|
|
4060
|
+
_c[styles$i["action-tile--compact"]] = isCompact,
|
|
4044
4061
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4045
4062
|
};
|
|
4046
4063
|
|
|
4047
|
-
var styles$
|
|
4064
|
+
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"};
|
|
4048
4065
|
|
|
4049
4066
|
var LinkTile = function (_a) {
|
|
4050
4067
|
var _b;
|
|
4051
4068
|
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"]);
|
|
4052
4069
|
var Component = href ? "a" : "div";
|
|
4053
4070
|
var linkProps = href ? { href: href } : {};
|
|
4054
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$
|
|
4055
|
-
_b[styles$
|
|
4056
|
-
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$
|
|
4057
|
-
React.createElement("span", { className: styles$
|
|
4058
|
-
showIcon && (React.createElement("span", { className: styles$
|
|
4071
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$h["link-tile"], (_b = {},
|
|
4072
|
+
_b[styles$h["link-tile--neutral"]] = tone === "neutral",
|
|
4073
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$h["link-tile-content"] },
|
|
4074
|
+
React.createElement("span", { className: styles$h["link-tile-text"] }, text),
|
|
4075
|
+
showIcon && (React.createElement("span", { className: styles$h["link-tile-icon"] },
|
|
4059
4076
|
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
|
4060
4077
|
};
|
|
4061
4078
|
|
|
4062
|
-
var styles$
|
|
4079
|
+
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"};
|
|
4063
4080
|
|
|
4064
4081
|
var InlineLinkGroup = function (_a) {
|
|
4065
4082
|
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"]);
|
|
4066
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4067
|
-
label && (React.createElement("div", { className: styles$
|
|
4083
|
+
return (React.createElement("div", __assign({ className: styles$g["quick-help"] }, filterAttrs(props)),
|
|
4084
|
+
label && (React.createElement("div", { className: styles$g["quick-help-label"] },
|
|
4068
4085
|
React.createElement(Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
|
|
4069
|
-
React.createElement("ul", { className: styles$
|
|
4070
|
-
React.createElement("li", { className: styles$
|
|
4086
|
+
React.createElement("ul", { className: styles$g["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
|
|
4087
|
+
React.createElement("li", { className: styles$g["quick-help-item"] },
|
|
4071
4088
|
React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
|
|
4072
4089
|
React.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
|
|
4073
|
-
index < links.length - 1 && (React.createElement("li", { className: styles$
|
|
4074
|
-
React.createElement("div", { className: styles$
|
|
4090
|
+
index < links.length - 1 && (React.createElement("li", { className: styles$g["quick-help-separator"], "aria-hidden": "true" },
|
|
4091
|
+
React.createElement("div", { className: styles$g["quick-help-separator-line"] }))))); }))));
|
|
4075
4092
|
};
|
|
4076
4093
|
|
|
4077
|
-
var styles$
|
|
4094
|
+
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"};
|
|
4078
4095
|
|
|
4079
4096
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4080
4097
|
var ThumbnailSignpost = function (_a) {
|
|
@@ -4082,20 +4099,20 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4082
4099
|
var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
|
|
4083
4100
|
var surface = useContext(SurfaceContext).surface;
|
|
4084
4101
|
var isDarkSurface = surface === "dark";
|
|
4085
|
-
return (React.createElement("div", __assign({ className: classNames(styles$
|
|
4086
|
-
_b[styles$
|
|
4087
|
-
_b[styles$
|
|
4102
|
+
return (React.createElement("div", __assign({ className: classNames(styles$f.thumbnailSignpost, (_b = {},
|
|
4103
|
+
_b[styles$f.isLink] = onClick,
|
|
4104
|
+
_b[styles$f.onDarkSurface] = isDarkSurface,
|
|
4088
4105
|
_b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
|
|
4089
|
-
img && (React.createElement("div", { className: styles$
|
|
4106
|
+
img && (React.createElement("div", { className: styles$f.image },
|
|
4090
4107
|
React.createElement(Image$2, __assign({}, img)))),
|
|
4091
|
-
React.createElement("div", { className: styles$
|
|
4092
|
-
React.createElement("span", { className: styles$
|
|
4108
|
+
React.createElement("div", { className: styles$f.content },
|
|
4109
|
+
React.createElement("span", { className: styles$f.heading }, title),
|
|
4093
4110
|
React.createElement(VerticalSpace, { size: "8" }),
|
|
4094
4111
|
text,
|
|
4095
4112
|
buttonLabel && onClick && (React.createElement(React.Fragment, null,
|
|
4096
4113
|
React.createElement(VerticalSpace, { size: "32" }),
|
|
4097
|
-
React.createElement("div", { className: styles$
|
|
4098
|
-
React.createElement("span", { className: styles$
|
|
4114
|
+
React.createElement("div", { className: styles$f.thumbnailButton },
|
|
4115
|
+
React.createElement("span", { className: styles$f.buttonIcon, role: "img", style: {
|
|
4099
4116
|
height: 24,
|
|
4100
4117
|
width: 24,
|
|
4101
4118
|
maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
|
|
@@ -4104,29 +4121,29 @@ var ThumbnailSignpost = function (_a) {
|
|
|
4104
4121
|
React.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
|
|
4105
4122
|
};
|
|
4106
4123
|
|
|
4107
|
-
var styles$
|
|
4124
|
+
var styles$e = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
|
|
4108
4125
|
|
|
4109
4126
|
/**
|
|
4110
4127
|
* Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
|
|
4111
4128
|
*/
|
|
4112
4129
|
var PromoListingThumbnailSignpost = function (_a) {
|
|
4113
4130
|
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"]);
|
|
4114
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4131
|
+
return (React.createElement("div", __assign({ className: styles$e.PromoListingThumbnailSignpost }, filterAttrs(props)),
|
|
4115
4132
|
React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
|
|
4116
|
-
React.createElement("ul", { className: styles$
|
|
4133
|
+
React.createElement("ul", { className: styles$e.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
|
|
4117
4134
|
React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
|
|
4118
4135
|
};
|
|
4119
4136
|
|
|
4120
|
-
var styles$
|
|
4137
|
+
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"};
|
|
4121
4138
|
|
|
4122
4139
|
var VideoCardPlayIcon = function (_a) {
|
|
4123
4140
|
var _b = _a.size, size = _b === void 0 ? "l" : _b;
|
|
4124
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4125
|
-
React.createElement("div", { className: styles$
|
|
4141
|
+
return (React.createElement("div", { className: classNames(styles$d.playIconContainer, styles$d["playIconContainer--".concat(size)]) },
|
|
4142
|
+
React.createElement("div", { className: styles$d.playIcon },
|
|
4126
4143
|
React.createElement(Icon, { icon: ArcIconPlay }))));
|
|
4127
4144
|
};
|
|
4128
4145
|
|
|
4129
|
-
var styles$
|
|
4146
|
+
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"};
|
|
4130
4147
|
|
|
4131
4148
|
var VideoCardPlayer = function (_a) {
|
|
4132
4149
|
var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
|
|
@@ -4142,21 +4159,21 @@ var VideoCardPlayer = function (_a) {
|
|
|
4142
4159
|
(_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4143
4160
|
});
|
|
4144
4161
|
}, []);
|
|
4145
|
-
var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$
|
|
4146
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4147
|
-
React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$
|
|
4162
|
+
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 });
|
|
4163
|
+
return (React.createElement("div", __assign({ className: styles$c.container }, filterAttrs(props)),
|
|
4164
|
+
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))),
|
|
4148
4165
|
children));
|
|
4149
4166
|
};
|
|
4150
4167
|
|
|
4151
|
-
var styles$
|
|
4168
|
+
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"};
|
|
4152
4169
|
|
|
4153
4170
|
var VideoCardThumbnail = function (_a) {
|
|
4154
4171
|
var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
|
|
4155
|
-
var content = React.createElement("div", { className: styles$
|
|
4156
|
-
return (React.createElement("div", { className: classNames(styles$
|
|
4172
|
+
var content = React.createElement("div", { className: styles$b.thumbnailContent }, children);
|
|
4173
|
+
return (React.createElement("div", { className: classNames(styles$b.thumbnail, styles$b["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React.createElement(Visible, __assign({}, contentVisibility), content)) : (content)));
|
|
4157
4174
|
};
|
|
4158
4175
|
|
|
4159
|
-
var styles$
|
|
4176
|
+
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"};
|
|
4160
4177
|
|
|
4161
4178
|
var VideoHeroCardContent = function (_a) {
|
|
4162
4179
|
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;
|
|
@@ -4170,8 +4187,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4170
4187
|
},
|
|
4171
4188
|
];
|
|
4172
4189
|
var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
|
|
4173
|
-
return (React.createElement("div", { className: styles$
|
|
4174
|
-
React.createElement("div", { className: classNames(styles$
|
|
4190
|
+
return (React.createElement("div", { className: styles$a["".concat(background, "Background")] },
|
|
4191
|
+
React.createElement("div", { className: classNames(styles$a.mainText, styles$a["mainText--".concat(background, "Background")]) },
|
|
4175
4192
|
React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
|
|
4176
4193
|
React.createElement(VerticalSpace, { size: "8", sizeM: "4" }),
|
|
4177
4194
|
React.createElement(Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
|
|
@@ -4179,8 +4196,8 @@ var VideoHeroCardContent = function (_a) {
|
|
|
4179
4196
|
React.createElement(Text, null, description)),
|
|
4180
4197
|
hasMeta && (React.createElement(React.Fragment, null,
|
|
4181
4198
|
React.createElement(VerticalSpace, { size: "32", sizeS: "16" }),
|
|
4182
|
-
React.createElement("div", { className: classNames(styles$
|
|
4183
|
-
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$
|
|
4199
|
+
React.createElement("div", { className: classNames(styles$a.statContainer, styles$a["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
|
|
4200
|
+
return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles$a.stat },
|
|
4184
4201
|
React.createElement(Icon, { icon: meta.icon, size: 20 }),
|
|
4185
4202
|
React.createElement(Text, { size: "xs" }, meta.text)));
|
|
4186
4203
|
}))))));
|
|
@@ -4203,7 +4220,7 @@ var VideoPortraitCard = function (_a) {
|
|
|
4203
4220
|
React.createElement(Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
|
|
4204
4221
|
};
|
|
4205
4222
|
|
|
4206
|
-
var styles$
|
|
4223
|
+
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"};
|
|
4207
4224
|
|
|
4208
4225
|
/**
|
|
4209
4226
|
* Renders either an InformationCard or a contained MediaCard based on the card type.
|
|
@@ -4227,11 +4244,11 @@ var renderBusinessSegmentSwitcherCarousel = function (_a) {
|
|
|
4227
4244
|
xs: { itemsPerSlide: 1 },
|
|
4228
4245
|
s: { itemsPerSlide: 2 },
|
|
4229
4246
|
} },
|
|
4230
|
-
React.createElement("div", { className: styles$
|
|
4231
|
-
React.createElement("div", { className: styles$
|
|
4232
|
-
content.card3 && (React.createElement("div", { className: styles$
|
|
4247
|
+
React.createElement("div", { className: styles$9.cardWrapper }, renderCard(content.card1)),
|
|
4248
|
+
React.createElement("div", { className: styles$9.cardWrapper }, renderCard(content.card2)),
|
|
4249
|
+
content.card3 && (React.createElement("div", { className: styles$9.cardWrapper },
|
|
4233
4250
|
React.createElement(InformationCard, __assign({}, content.card3)))),
|
|
4234
|
-
React.createElement("div", { className: styles$
|
|
4251
|
+
React.createElement("div", { className: styles$9.cardWrapper },
|
|
4235
4252
|
React.createElement(TypographyCard, { heading: "All ".concat(label, " solutions"), label: content.card4.label, url: content.card4.url }))));
|
|
4236
4253
|
};
|
|
4237
4254
|
|
|
@@ -4244,8 +4261,8 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4244
4261
|
var tabs = _a.tabs, defaultValue = _a.defaultValue, props = __rest(_a, ["tabs", "defaultValue"]);
|
|
4245
4262
|
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 : "";
|
|
4246
4263
|
var _d = useState(initialTab), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
4247
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4248
|
-
React.createElement("div", { className: styles$
|
|
4264
|
+
return (React.createElement("div", __assign({ className: styles$9.businessSegmentSwitcher }, filterAttrs(props)),
|
|
4265
|
+
React.createElement("div", { className: styles$9.businessSegmentSwitcherDesktop },
|
|
4249
4266
|
React.createElement(ContentSwitcher, { value: selectedTab, onValueChange: function (value) { return setSelectedTab(value); } },
|
|
4250
4267
|
React.createElement(ContentSwitcherList, { isInset: true }, tabs.map(function (_a, index) {
|
|
4251
4268
|
var label = _a.label, value = _a.value;
|
|
@@ -4254,42 +4271,42 @@ var BusinessSegmentSwitcher = function (_a) {
|
|
|
4254
4271
|
tabs.map(function (_a, index) {
|
|
4255
4272
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4256
4273
|
return (React.createElement(ContentSwitcherContent, { value: value, key: "".concat(index, "-").concat(value), hidden: value !== selectedTab },
|
|
4257
|
-
React.createElement("div", { className: styles$
|
|
4258
|
-
React.createElement("div", { className: styles$
|
|
4274
|
+
React.createElement("div", { className: styles$9.contentWrapper },
|
|
4275
|
+
React.createElement("div", { className: styles$9.desktopCarousel }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label })),
|
|
4259
4276
|
renderCard(content.card1),
|
|
4260
4277
|
renderCard(content.card2),
|
|
4261
|
-
React.createElement("div", { className: styles$
|
|
4278
|
+
React.createElement("div", { className: styles$9.cardCol },
|
|
4262
4279
|
content.card3 && React.createElement(InformationCard, __assign({}, content.card3)),
|
|
4263
4280
|
React.createElement("div", null,
|
|
4264
4281
|
React.createElement(TypographyCard, { heading: content.card4.heading ||
|
|
4265
4282
|
"All ".concat(label.toLowerCase(), " solutions"), text: content.card4.text, label: content.card4.label, url: content.card4.url, onClick: content.card4.onClick }))))));
|
|
4266
4283
|
}))),
|
|
4267
|
-
React.createElement("div", { className: styles$
|
|
4284
|
+
React.createElement("div", { className: styles$9.businessSegmentSwitcherMobile },
|
|
4268
4285
|
React.createElement(ContentSwitcherDropdown, { isInset: true, value: selectedTab, tabs: tabs, isFluid: true, onValueChange: function (value) { return setSelectedTab(value); } }, tabs.map(function (_a, index) {
|
|
4269
4286
|
var value = _a.value, content = _a.content, label = _a.label;
|
|
4270
4287
|
return (React.createElement(ContentSwitcherDropdownContent, { value: value, key: "".concat(index, "-").concat(value) },
|
|
4271
|
-
React.createElement("div", { className: styles$
|
|
4288
|
+
React.createElement("div", { className: styles$9.contentWrapper }, renderBusinessSegmentSwitcherCarousel({ content: content, label: label }))));
|
|
4272
4289
|
})))));
|
|
4273
4290
|
};
|
|
4274
4291
|
|
|
4275
|
-
var styles$
|
|
4292
|
+
var styles$8 = {"subgroupHeader":"PartnerLogoSubgroup-module_subgroupHeader__rXAai","logoGroup":"PartnerLogoSubgroup-module_logoGroup__RYsTN","logoWrapper":"PartnerLogoSubgroup-module_logoWrapper__tyxVI","logoImage":"PartnerLogoSubgroup-module_logoImage__h7DJd"};
|
|
4276
4293
|
|
|
4277
4294
|
var PartnerLogoSubgroup = function (_a) {
|
|
4278
4295
|
var subheading = _a.subheading, text = _a.text, headingLevel = _a.headingLevel, logos = _a.logos, _b = _a.tileHeight, tileHeight = _b === void 0 ? 72 : _b;
|
|
4279
4296
|
var hasHeader = subheading || text;
|
|
4280
4297
|
var id = useId();
|
|
4281
4298
|
return (React.createElement(React.Fragment, null,
|
|
4282
|
-
hasHeader && (React.createElement("div", { className: styles$
|
|
4299
|
+
hasHeader && (React.createElement("div", { className: styles$8.subgroupHeader },
|
|
4283
4300
|
React.createElement(Columns, { isGutterless: true },
|
|
4284
4301
|
React.createElement(ColumnsCol, { spanL: 9, spanXL: 8 },
|
|
4285
4302
|
subheading && (React.createElement(Heading, { level: headingLevel, size: "s", isResponsive: false }, subheading)),
|
|
4286
4303
|
subheading && text && React.createElement(VerticalSpace, { size: "8" }),
|
|
4287
4304
|
text && (React.createElement(Text, { size: "m", tone: "supporting" }, text)))))),
|
|
4288
|
-
React.createElement("div", { className: styles$
|
|
4289
|
-
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$
|
|
4305
|
+
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 } },
|
|
4306
|
+
React.createElement("img", { src: logo.src, alt: logo.alt, className: styles$8.logoImage }))); }))));
|
|
4290
4307
|
};
|
|
4291
4308
|
|
|
4292
|
-
var styles$
|
|
4309
|
+
var styles$7 = {"subgroupList":"PartnerBrandLogos-module_subgroupList__4e1kv"};
|
|
4293
4310
|
|
|
4294
4311
|
var getSubheadingLevel = function (parentLevel, subLevel) {
|
|
4295
4312
|
return subLevel !== null && subLevel !== void 0 ? subLevel : String(Math.min(Number(parentLevel) + 1, 6));
|
|
@@ -4313,75 +4330,81 @@ var PartnerBrandLogos = function (_a) {
|
|
|
4313
4330
|
React.createElement(VerticalSpace, __assign({}, rulerTopPadding)),
|
|
4314
4331
|
React.createElement(Rule, null),
|
|
4315
4332
|
React.createElement(VerticalSpace, __assign({}, rulerBottomPadding)),
|
|
4316
|
-
React.createElement("ul", { className: styles$
|
|
4333
|
+
React.createElement("ul", { className: styles$7.subgroupList }, subgroups.map(function (subgroup, i) { return (React.createElement("li", { key: "subgroup-".concat(componentId, "-").concat(i) },
|
|
4317
4334
|
React.createElement(PartnerLogoSubgroup, { subheading: subgroup.subheading, text: subgroup.text, headingLevel: getSubheadingLevel(headingLevel, subgroup.subheadingLevel), logos: subgroup.logos, tileHeight: subgroup.tileHeight }))); }))));
|
|
4318
4335
|
};
|
|
4319
4336
|
|
|
4320
|
-
var styles$
|
|
4337
|
+
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"};
|
|
4321
4338
|
|
|
4322
4339
|
var ProductCard = function (_a) {
|
|
4323
4340
|
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"]);
|
|
4324
4341
|
var headingId = useId();
|
|
4325
|
-
return (React.createElement("div", __assign({ className: styles$
|
|
4326
|
-
React.createElement("div", { className: styles$
|
|
4327
|
-
promoted && (React.createElement("div", { className: styles$
|
|
4342
|
+
return (React.createElement("div", __assign({ className: styles$6.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
|
|
4343
|
+
React.createElement("div", { className: styles$6.productCardTop },
|
|
4344
|
+
promoted && (React.createElement("div", { className: styles$6.productCardPromoted },
|
|
4328
4345
|
React.createElement(Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
|
|
4329
4346
|
React.createElement(VisuallyHidden, null, "Promotional offer. "),
|
|
4330
4347
|
React.createElement(Text, { size: "s" }, promoted.content)))),
|
|
4331
|
-
React.createElement("div", { className: styles$
|
|
4348
|
+
React.createElement("div", { className: styles$6.productCardTopSection },
|
|
4332
4349
|
React.createElement(Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
|
|
4333
4350
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
4334
4351
|
topSlot)),
|
|
4335
|
-
React.createElement("div", { className: styles$
|
|
4336
|
-
divider ? (React.createElement("div", { className: styles$
|
|
4352
|
+
React.createElement("div", { className: styles$6.productCardBottom },
|
|
4353
|
+
divider ? (React.createElement("div", { className: styles$6.divider },
|
|
4337
4354
|
React.createElement(Rule, null))) : (React.createElement(VerticalSpace, { size: "16" })),
|
|
4338
4355
|
bottomSlot,
|
|
4339
4356
|
React.createElement(VerticalSpace, { size: "24" }),
|
|
4340
|
-
React.createElement("div", { className: styles$
|
|
4357
|
+
React.createElement("div", { className: styles$6.ctaWrapper },
|
|
4341
4358
|
React.createElement(ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
|
|
4342
4359
|
};
|
|
4343
4360
|
|
|
4344
|
-
var styles$
|
|
4361
|
+
var styles$5 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
|
|
4345
4362
|
|
|
4346
4363
|
var ProductCardBenefits = function (_a) {
|
|
4347
4364
|
var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
|
|
4348
4365
|
return (React.createElement(React.Fragment, null,
|
|
4349
4366
|
React.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
4350
4367
|
React.createElement(VerticalSpace, { size: "12" }),
|
|
4351
|
-
React.createElement("ul", { className: styles$
|
|
4368
|
+
React.createElement("ul", { className: styles$5.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles$5.benefitItem },
|
|
4352
4369
|
React.createElement(Icon, { icon: benefit.icon, color: "brand", size: 24 }),
|
|
4353
4370
|
benefit.benefit)); }))));
|
|
4354
4371
|
};
|
|
4355
4372
|
|
|
4356
|
-
var styles$
|
|
4373
|
+
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"};
|
|
4357
4374
|
|
|
4358
4375
|
var ProductCardPriceIncrease = function (_a) {
|
|
4359
|
-
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;
|
|
4376
|
+
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;
|
|
4360
4377
|
return (React.createElement(React.Fragment, null,
|
|
4361
4378
|
React.createElement(VerticalSpace, { size: "16" }),
|
|
4362
4379
|
React.createElement(Heading, { size: "xs", level: headingLevel }, heading),
|
|
4363
4380
|
React.createElement(VerticalSpace, { size: "12" }),
|
|
4364
|
-
React.createElement("div", { className: styles$
|
|
4365
|
-
React.createElement("div", { className: styles$
|
|
4366
|
-
React.createElement("ul", { className: styles$
|
|
4381
|
+
React.createElement("div", { className: styles$4.priceIncreaseWrapper },
|
|
4382
|
+
!hideBorder && React.createElement("div", { className: styles$4.priceIncreaseBorder }),
|
|
4383
|
+
React.createElement("ul", { className: styles$4.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$4.priceIncreaseItem },
|
|
4384
|
+
React.createElement(React.Fragment, null,
|
|
4385
|
+
React.createElement("b", null, item.slice(0, 6)),
|
|
4386
|
+
React.createElement(React.Fragment, null, item.slice(6))))); })))));
|
|
4367
4387
|
};
|
|
4368
4388
|
|
|
4369
|
-
var styles$
|
|
4389
|
+
var styles$3 = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
|
|
4370
4390
|
|
|
4371
4391
|
var ProductCardPrice = function (_a) {
|
|
4372
4392
|
var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
|
|
4373
|
-
return (React.createElement("div", { className: styles$
|
|
4393
|
+
return (React.createElement("div", { className: styles$3.productCardPrice },
|
|
4374
4394
|
prefix && (React.createElement(Text, { tone: "muted", size: "s" }, prefix)),
|
|
4375
|
-
React.createElement(
|
|
4395
|
+
React.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
|
|
4396
|
+
React.createElement(Heading, { color: "brand", size: "s" }, value.slice(0, 1)),
|
|
4397
|
+
React.createElement(Heading, { color: "brand", size: "l" }, value.slice(1, -3)),
|
|
4398
|
+
React.createElement(Heading, { color: "brand", size: "s" }, value.slice(-3))),
|
|
4376
4399
|
suffix && (React.createElement(Text, { tone: "muted", size: "s" }, suffix))));
|
|
4377
4400
|
};
|
|
4378
4401
|
|
|
4379
|
-
var styles = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4402
|
+
var styles$2 = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
|
|
4380
4403
|
|
|
4381
4404
|
var CardGrid = function (_a) {
|
|
4382
4405
|
var cards = _a.cards, cardsRevealed = _a.cardsRevealed, fourthCardRef = _a.fourthCardRef, props = __rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
|
|
4383
4406
|
return (React.createElement(React.Fragment, null,
|
|
4384
|
-
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)); })),
|
|
4407
|
+
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)); })),
|
|
4385
4408
|
React.createElement(VerticalSpace, { size: "24", sizeXL: "32" })));
|
|
4386
4409
|
};
|
|
4387
4410
|
|
|
@@ -4427,5 +4450,284 @@ var ProductCardGrid = function (_a) {
|
|
|
4427
4450
|
cardsRevealed && (React.createElement(ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
|
|
4428
4451
|
};
|
|
4429
4452
|
|
|
4430
|
-
|
|
4453
|
+
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"};
|
|
4454
|
+
|
|
4455
|
+
var HeaderCell = function (_a) {
|
|
4456
|
+
var _b;
|
|
4457
|
+
var children = _a.children, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, promoted = _a.promoted, props = __rest(_a, ["children", "columnIndex", "promoted"]);
|
|
4458
|
+
return (React.createElement("div", __assign({ role: "columnheader", className: classNames(styles$1.headerCell, (_b = {},
|
|
4459
|
+
_b[styles$1.highlighted] = columnIndex % 2 === 0,
|
|
4460
|
+
_b[styles$1.highlightedTop] = columnIndex % 2 === 0,
|
|
4461
|
+
_b)) }, filterAttrs(props)),
|
|
4462
|
+
promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
|
|
4463
|
+
React.createElement(Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
|
|
4464
|
+
React.createElement(VisuallyHidden, null, "Promotional offer. "),
|
|
4465
|
+
React.createElement(Text, { size: "s" }, promoted)))),
|
|
4466
|
+
children != null && (React.createElement(Heading, { size: "m", isWordWrap: true }, children))));
|
|
4467
|
+
};
|
|
4468
|
+
|
|
4469
|
+
var ControlCell = function (_a) {
|
|
4470
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
4471
|
+
return (React.createElement("div", __assign({ role: "cell", className: styles$1.controlCell }, filterAttrs(props)),
|
|
4472
|
+
React.createElement("div", { className: styles$1.controlCellContent }, children)));
|
|
4473
|
+
};
|
|
4474
|
+
|
|
4475
|
+
var Cell = function (_a) {
|
|
4476
|
+
var _b;
|
|
4477
|
+
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"]);
|
|
4478
|
+
var isHighlighted = columnIndex % 2 === 0;
|
|
4479
|
+
return (React.createElement("div", __assign({ role: "cell", className: classNames(styles$1.cell, (_b = {},
|
|
4480
|
+
_b[styles$1.highlighted] = isHighlighted,
|
|
4481
|
+
_b[styles$1.highlightedBottom] = isHighlighted && isLastRow,
|
|
4482
|
+
_b)) }, filterAttrs(props)),
|
|
4483
|
+
React.createElement(Text, null, children)));
|
|
4484
|
+
};
|
|
4485
|
+
|
|
4486
|
+
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"};
|
|
4487
|
+
|
|
4488
|
+
var FeatureCell = function (_a) {
|
|
4489
|
+
var icon = _a.icon, title = _a.title, description = _a.description, popoverContent = _a.popoverContent;
|
|
4490
|
+
return (React.createElement("div", { className: styles.packageCell },
|
|
4491
|
+
React.createElement("div", { className: styles.packageCellTitle },
|
|
4492
|
+
React.createElement("div", { style: { width: 32 } },
|
|
4493
|
+
React.createElement(Icon, { icon: icon, size: 32, color: "brand" })),
|
|
4494
|
+
React.createElement("div", { className: styles.packageCellText },
|
|
4495
|
+
React.createElement("div", { className: styles.packageCellHeading },
|
|
4496
|
+
React.createElement(Heading, { size: "xs", isWordWrap: true }, title),
|
|
4497
|
+
popoverContent && (React.createElement("div", { className: styles.packageCellPopoverMobile },
|
|
4498
|
+
React.createElement(Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text, null, popoverContent), maxWidth: 300, side: "top" },
|
|
4499
|
+
React.createElement(Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) })))),
|
|
4500
|
+
" "),
|
|
4501
|
+
description && (React.createElement(Text, { size: "xs", tone: "muted" }, description)))),
|
|
4502
|
+
popoverContent && (React.createElement("div", { className: styles.packageCellPopoverDesktop },
|
|
4503
|
+
React.createElement(Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text, null, popoverContent), side: "bottom", align: "start" },
|
|
4504
|
+
React.createElement(Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) }))))));
|
|
4505
|
+
};
|
|
4506
|
+
|
|
4507
|
+
/**
|
|
4508
|
+
* Renders a single content row of cells for the mobile layout.
|
|
4509
|
+
*/
|
|
4510
|
+
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)); }))); };
|
|
4511
|
+
var MobileRow = function (_a) {
|
|
4512
|
+
var _b;
|
|
4513
|
+
var _c;
|
|
4514
|
+
var row = _a.row, _d = _a.isLastGroup, isLastGroup = _d === void 0 ? false : _d, props = __rest(_a, ["row", "isLastGroup"]);
|
|
4515
|
+
var subRows = (_c = row.subRows) !== null && _c !== void 0 ? _c : [];
|
|
4516
|
+
var hasSubRows = subRows.length > 0;
|
|
4517
|
+
return (React.createElement("div", __assign({ role: "row", className: classNames(styles$1.rowGroup, (_b = {},
|
|
4518
|
+
_b[styles$1.isLastRow] = isLastGroup,
|
|
4519
|
+
_b)) }, filterAttrs(props)),
|
|
4520
|
+
React.createElement("div", { className: styles$1.featureRow },
|
|
4521
|
+
React.createElement("div", { role: "rowheader", className: styles$1.featureRowHeader },
|
|
4522
|
+
React.createElement("div", { className: styles$1.featureRowHeaderContent },
|
|
4523
|
+
React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })))),
|
|
4524
|
+
renderRow(row.cells, "primary-row", isLastGroup && !hasSubRows),
|
|
4525
|
+
subRows.map(function (subRow, index) {
|
|
4526
|
+
return renderRow(subRow.cells, "row-".concat(index), isLastGroup && index === subRows.length - 1);
|
|
4527
|
+
})));
|
|
4528
|
+
};
|
|
4529
|
+
|
|
4530
|
+
var SectionToggle = function (_a) {
|
|
4531
|
+
var _b, _c;
|
|
4532
|
+
var heading = _a.heading, _d = _a.headingLevel, headingLevel = _d === void 0 ? "3" : _d, isOpen = _a.isOpen, onToggle = _a.onToggle, controlsId = _a.controlsId;
|
|
4533
|
+
return (React.createElement("button", { type: "button", className: classNames(styles$1.sectionToggle, (_b = {},
|
|
4534
|
+
_b[styles$1.sectionToggleOpen] = isOpen,
|
|
4535
|
+
_b)), "aria-expanded": isOpen, "aria-controls": controlsId, onClick: onToggle },
|
|
4536
|
+
React.createElement("span", { className: styles$1.sectionToggleContent },
|
|
4537
|
+
React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
|
|
4538
|
+
React.createElement("span", { className: classNames(styles$1.sectionChevron, (_c = {},
|
|
4539
|
+
_c[styles$1.sectionChevronOpen] = isOpen,
|
|
4540
|
+
_c)), "aria-hidden": "true" },
|
|
4541
|
+
React.createElement(Icon, { icon: BtIconChevronDownMid, size: 24 })))));
|
|
4542
|
+
};
|
|
4543
|
+
|
|
4544
|
+
/**
|
|
4545
|
+
* Optional-controlled open state for a section. When `open` is provided the
|
|
4546
|
+
* section is controlled and the internal state is ignored; otherwise the hook
|
|
4547
|
+
* manages its own state seeded by `defaultOpen`. `onOpenChange` is always
|
|
4548
|
+
* called with the next value when `toggle` runs.
|
|
4549
|
+
*/
|
|
4550
|
+
var useSectionState = function (_a) {
|
|
4551
|
+
var _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, open = _a.open, onOpenChange = _a.onOpenChange;
|
|
4552
|
+
var _c = useState(defaultOpen), internalOpen = _c[0], setInternalOpen = _c[1];
|
|
4553
|
+
var isControlled = open !== undefined;
|
|
4554
|
+
var isOpen = isControlled ? open : internalOpen;
|
|
4555
|
+
var toggle = useCallback(function () {
|
|
4556
|
+
var next = !isOpen;
|
|
4557
|
+
if (!isControlled) {
|
|
4558
|
+
setInternalOpen(next);
|
|
4559
|
+
}
|
|
4560
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
|
|
4561
|
+
}, [isControlled, isOpen, onOpenChange]);
|
|
4562
|
+
return { isOpen: isOpen, toggle: toggle };
|
|
4563
|
+
};
|
|
4564
|
+
|
|
4565
|
+
var Section = function (_a) {
|
|
4566
|
+
var _b;
|
|
4567
|
+
var section = _a.section, isLastSection = _a.isLastSection, renderRow = _a.renderRow;
|
|
4568
|
+
var regionId = useId();
|
|
4569
|
+
var _c = useSectionState({
|
|
4570
|
+
defaultOpen: section.defaultOpen,
|
|
4571
|
+
open: section.open,
|
|
4572
|
+
onOpenChange: section.onOpenChange,
|
|
4573
|
+
}), isOpen = _c.isOpen, toggle = _c.toggle;
|
|
4574
|
+
var lastRowIndex = section.rows.length - 1;
|
|
4575
|
+
return (React.createElement("div", { role: "rowgroup" },
|
|
4576
|
+
React.createElement("div", { role: "row", className: classNames(styles$1.sectionToggleRow, (_b = {},
|
|
4577
|
+
_b[styles$1.isLastRow] = isLastSection === true && !isOpen,
|
|
4578
|
+
_b)) },
|
|
4579
|
+
React.createElement(SectionToggle, { heading: section.heading, headingLevel: section.headingLevel, isOpen: isOpen, onToggle: toggle, controlsId: regionId })),
|
|
4580
|
+
isOpen && (React.createElement("div", { id: regionId, className: styles$1.sectionContent }, section.rows.map(function (row, index) {
|
|
4581
|
+
return renderRow(row, index, isLastSection === true && index === lastRowIndex);
|
|
4582
|
+
})))));
|
|
4583
|
+
};
|
|
4584
|
+
|
|
4585
|
+
var SubHeaderCell = function (_a) {
|
|
4586
|
+
var _b;
|
|
4587
|
+
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"]);
|
|
4588
|
+
return (React.createElement("div", __assign({ role: "cell", className: classNames(styles$1.subHeaderCell, (_b = {},
|
|
4589
|
+
_b[styles$1.highlighted] = columnIndex % 2 === 0,
|
|
4590
|
+
_b)) }, filterAttrs(props)),
|
|
4591
|
+
React.createElement(ProductCardPrice, __assign({}, price)),
|
|
4592
|
+
priceIncrease && (React.createElement(ProductCardPriceIncrease, __assign({ heading: "Increasing to:", hideBorder: true }, priceIncrease))),
|
|
4593
|
+
React.createElement(VerticalSpace, null),
|
|
4594
|
+
button && React.createElement(ButtonV2, __assign({ isFullWidth: true }, button))));
|
|
4595
|
+
};
|
|
4596
|
+
|
|
4597
|
+
var MobileTable = function (_a) {
|
|
4598
|
+
var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, className = _a.className;
|
|
4599
|
+
return (React.createElement("div", { role: "table", className: classNames(styles$1.table, className), style: { "--comparison-columns": columns.length } },
|
|
4600
|
+
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)); })),
|
|
4601
|
+
controls && (React.createElement("div", { role: "row", className: styles$1.controlRow, "aria-label": "comparison table controls" },
|
|
4602
|
+
React.createElement(ControlCell, null, controls))),
|
|
4603
|
+
columns.some(function (column) { return column.subheader; }) && (React.createElement("div", { role: "row", className: styles$1.subHeaderRow }, columns.map(function (column, index) {
|
|
4604
|
+
var _a;
|
|
4605
|
+
return (React.createElement(SubHeaderCell, __assign({ key: column.id, columnIndex: index }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
|
|
4606
|
+
}))),
|
|
4607
|
+
rows.map(function (row, index) { return (React.createElement(MobileRow, { key: "row-group-".concat(index), row: row, isLastGroup: sections.length === 0 && index === rows.length - 1 })); }),
|
|
4608
|
+
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 })); } })); })));
|
|
4609
|
+
};
|
|
4610
|
+
|
|
4611
|
+
/**
|
|
4612
|
+
* The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
|
|
4613
|
+
* 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
|
|
4614
|
+
* the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
|
|
4615
|
+
*/
|
|
4616
|
+
var isPlanHighlighted$1 = function (planIndex) { return planIndex % 2 === 0; };
|
|
4617
|
+
var DesktopRow = function (_a) {
|
|
4618
|
+
var _b;
|
|
4619
|
+
var row = _a.row, _c = _a.isLastRow, isLastRow = _c === void 0 ? false : _c;
|
|
4620
|
+
return (React.createElement("div", { role: "row", className: classNames(styles$1.desktopRow, (_b = {},
|
|
4621
|
+
_b[styles$1.isLastRow] = isLastRow,
|
|
4622
|
+
_b)) },
|
|
4623
|
+
React.createElement("div", { role: "rowheader", className: styles$1.desktopFeatureCell },
|
|
4624
|
+
React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })),
|
|
4625
|
+
row.cells.map(function (cell, cellIndex) {
|
|
4626
|
+
var _a;
|
|
4627
|
+
return (React.createElement("div", { key: "desktop-cell-".concat(cellIndex), role: "cell", className: classNames(styles$1.cell, (_a = {},
|
|
4628
|
+
_a[styles$1.highlighted] = isPlanHighlighted$1(cellIndex),
|
|
4629
|
+
_a[styles$1.highlightedBottom] = isPlanHighlighted$1(cellIndex) && isLastRow,
|
|
4630
|
+
_a)) },
|
|
4631
|
+
React.createElement(Text, null, cell)));
|
|
4632
|
+
})));
|
|
4633
|
+
};
|
|
4634
|
+
|
|
4635
|
+
/**
|
|
4636
|
+
* The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
|
|
4637
|
+
* 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
|
|
4638
|
+
* the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
|
|
4639
|
+
*/
|
|
4640
|
+
var isPlanHighlighted = function (planIndex) { return planIndex % 2 === 0; };
|
|
4641
|
+
var DesktopTable = function (_a) {
|
|
4642
|
+
var _b, _c;
|
|
4643
|
+
var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, hasStickyHeader = _a.hasStickyHeader, className = _a.className;
|
|
4644
|
+
var hasSubheader = columns.some(function (column) { return column.subheader; });
|
|
4645
|
+
return (React.createElement("div", { role: "table", className: classNames(styles$1.desktopTable, className, (_b = {},
|
|
4646
|
+
_b[styles$1.desktopTableSticky] = hasStickyHeader,
|
|
4647
|
+
_b)), style: { "--comparison-columns": columns.length } },
|
|
4648
|
+
React.createElement("div", { role: "row", className: classNames(styles$1.desktopHeaderRow, (_c = {},
|
|
4649
|
+
_c[styles$1.stickyHeader] = hasStickyHeader,
|
|
4650
|
+
_c)) },
|
|
4651
|
+
React.createElement("div", { role: "columnheader", className: styles$1.desktopFeatureHeader },
|
|
4652
|
+
React.createElement(VisuallyHidden, null, "Features")),
|
|
4653
|
+
columns.map(function (column, index) {
|
|
4654
|
+
var _a;
|
|
4655
|
+
return (React.createElement("div", { key: column.id, role: "columnheader", className: classNames(styles$1.desktopHeaderCell, (_a = {},
|
|
4656
|
+
_a[styles$1.highlighted] = isPlanHighlighted(index),
|
|
4657
|
+
_a[styles$1.highlightedTop] = isPlanHighlighted(index),
|
|
4658
|
+
_a)) },
|
|
4659
|
+
column.promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
|
|
4660
|
+
React.createElement(Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
|
|
4661
|
+
React.createElement(VisuallyHidden, null, "Promotional offer. "),
|
|
4662
|
+
React.createElement(Text, { size: "s" }, column.promoted)))),
|
|
4663
|
+
React.createElement(Heading, { size: "m" }, column.label)));
|
|
4664
|
+
})),
|
|
4665
|
+
(controls || hasSubheader) && (React.createElement("div", { role: "row", className: styles$1.desktopSubHeaderRow },
|
|
4666
|
+
React.createElement("div", { className: styles$1.desktopControlsCell, "aria-label": "comparison table controls" }, controls),
|
|
4667
|
+
columns.map(function (column, index) {
|
|
4668
|
+
var _a;
|
|
4669
|
+
return (React.createElement(SubHeaderCell, __assign({ key: column.id, columnIndex: isPlanHighlighted(index) ? 0 : 1 }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
|
|
4670
|
+
}))),
|
|
4671
|
+
rows.map(function (row, rowIndex) { return (React.createElement(DesktopRow, { key: "desktop-row-".concat(rowIndex), row: row, isLastRow: sections.length === 0 && rowIndex === rows.length - 1 })); }),
|
|
4672
|
+
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 })); } })); })));
|
|
4673
|
+
};
|
|
4674
|
+
|
|
4675
|
+
/**
|
|
4676
|
+
* Splits a flat list of rows into unsectioned rows and resolved sections.
|
|
4677
|
+
* Rows are bucketed by `sectionId` in one pass, then sections are built by
|
|
4678
|
+
* iterating `sections` (not the bucket keys) so section order follows the
|
|
4679
|
+
* `sections` array. A `sectionId` with no matching section logs a dev-only
|
|
4680
|
+
* warning and the row renders unsectioned, so rows are never lost.
|
|
4681
|
+
*/
|
|
4682
|
+
var groupRows = function (rows, sections) {
|
|
4683
|
+
if (rows === void 0) { rows = []; }
|
|
4684
|
+
if (sections === void 0) { sections = []; }
|
|
4685
|
+
var knownIds = new Set(sections.map(function (section) { return section.id; }));
|
|
4686
|
+
var rowsBySection = new Map();
|
|
4687
|
+
var unsectioned = [];
|
|
4688
|
+
rows.forEach(function (row) {
|
|
4689
|
+
var sectionId = row.sectionId;
|
|
4690
|
+
if (sectionId === undefined) {
|
|
4691
|
+
unsectioned.push(row);
|
|
4692
|
+
return;
|
|
4693
|
+
}
|
|
4694
|
+
if (!knownIds.has(sectionId)) {
|
|
4695
|
+
if (process.env.NODE_ENV !== "production") {
|
|
4696
|
+
// eslint-disable-next-line no-console
|
|
4697
|
+
console.warn("ComparisonTable: row sectionId \"".concat(sectionId, "\" does not match any section; rendering it unsectioned."));
|
|
4698
|
+
}
|
|
4699
|
+
unsectioned.push(row);
|
|
4700
|
+
return;
|
|
4701
|
+
}
|
|
4702
|
+
var bucket = rowsBySection.get(sectionId);
|
|
4703
|
+
if (bucket) {
|
|
4704
|
+
bucket.push(row);
|
|
4705
|
+
}
|
|
4706
|
+
else {
|
|
4707
|
+
rowsBySection.set(sectionId, [row]);
|
|
4708
|
+
}
|
|
4709
|
+
});
|
|
4710
|
+
var resolvedSections = [];
|
|
4711
|
+
sections.forEach(function (section) {
|
|
4712
|
+
var sectionRows = rowsBySection.get(section.id);
|
|
4713
|
+
if (sectionRows === null || sectionRows === void 0 ? void 0 : sectionRows.length) {
|
|
4714
|
+
resolvedSections.push(__assign(__assign({}, section), { rows: sectionRows }));
|
|
4715
|
+
}
|
|
4716
|
+
});
|
|
4717
|
+
return { unsectioned: unsectioned, sections: resolvedSections };
|
|
4718
|
+
};
|
|
4719
|
+
|
|
4720
|
+
var ComparisonTable = function (_a) {
|
|
4721
|
+
var _b;
|
|
4722
|
+
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"]);
|
|
4723
|
+
var _e = React.useMemo(function () { return groupRows(rows, sections); }, [rows, sections]), unsectioned = _e.unsectioned, resolvedSections = _e.sections;
|
|
4724
|
+
return (React.createElement("div", __assign({ className: classNames(styles$1.wrapper, (_b = {},
|
|
4725
|
+
_b[styles$1.wrapperBordered] = hasBorder,
|
|
4726
|
+
_b)) }, filterAttrs(props)),
|
|
4727
|
+
hasBorder && React.createElement("div", { className: styles$1.shadowOverlay, "aria-hidden": "true" }),
|
|
4728
|
+
React.createElement(MobileTable, { className: styles$1.mobileLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls }),
|
|
4729
|
+
React.createElement(DesktopTable, { className: styles$1.desktopLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls, hasStickyHeader: hasStickyHeader })));
|
|
4730
|
+
};
|
|
4731
|
+
|
|
4732
|
+
export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, Cell, ComparisonTable, ContentInfoWidget, ControlCell, CopyLead, DownloadList, FAQs, FeatureCell, FeaturePost, HeaderBarNotification, HeaderCell, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductCard, ProductCardBenefits, ProductCardGrid, ProductCardPrice, ProductCardPriceIncrease, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, SubHeaderCell, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
|
|
4431
4733
|
//# sourceMappingURL=index.mjs.map
|