@arc-ui/community-components 3.1.0 → 3.3.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.
Files changed (111) hide show
  1. package/.turbo/turbo-build.log +14 -14
  2. package/CHANGELOG.md +31 -0
  3. package/lib/Accordion/Accordion.cjs +2 -3
  4. package/lib/Accordion/Accordion.mjs +2 -3
  5. package/lib/ActionTile/ActionTile.cjs +4 -5
  6. package/lib/ActionTile/ActionTile.mjs +2 -3
  7. package/lib/ActionTile/styles.css +1 -1
  8. package/lib/ArticleSidebar/ArticleSidebar.cjs +9 -10
  9. package/lib/ArticleSidebar/ArticleSidebar.mjs +4 -5
  10. package/lib/Author/Author.cjs +2 -3
  11. package/lib/Author/Author.mjs +2 -3
  12. package/lib/BannerWithTabs/BannerWithTabs.cjs +4 -5
  13. package/lib/BannerWithTabs/BannerWithTabs.mjs +4 -5
  14. package/lib/ContentInfoWidget/ContentInfoWidget.cjs +3 -2
  15. package/lib/ContentInfoWidget/ContentInfoWidget.mjs +3 -2
  16. package/lib/CopyLead/CopyLead.cjs +15 -16
  17. package/lib/CopyLead/CopyLead.mjs +3 -4
  18. package/lib/DownloadList/DownloadList.cjs +6 -8
  19. package/lib/DownloadList/DownloadList.mjs +6 -8
  20. package/lib/FAQs/FAQs.cjs +15 -12
  21. package/lib/FAQs/FAQs.mjs +13 -10
  22. package/lib/FeaturePost/FeaturePost.cjs +23 -17
  23. package/lib/FeaturePost/FeaturePost.mjs +18 -12
  24. package/lib/Highlights/Highlights.cjs +11 -12
  25. package/lib/Highlights/Highlights.mjs +11 -12
  26. package/lib/InlineLinkGroup/InlineLinkGroup.cjs +25 -0
  27. package/lib/InlineLinkGroup/InlineLinkGroup.mjs +23 -0
  28. package/lib/InlineLinkGroup/styles.css +1 -0
  29. package/lib/LinkTile/LinkTile.cjs +6 -6
  30. package/lib/LinkTile/LinkTile.mjs +4 -4
  31. package/lib/LinkTile/styles.css +1 -1
  32. package/lib/ProductNavigation/ProductNavigation.cjs +6 -7
  33. package/lib/ProductNavigation/ProductNavigation.mjs +3 -4
  34. package/lib/PromoListing/PromoListing.cjs +7 -8
  35. package/lib/PromoListing/PromoListing.mjs +5 -6
  36. package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs +27 -0
  37. package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs +25 -0
  38. package/lib/PromoListingThumbnailSignpost/styles.css +1 -0
  39. package/lib/Quote/Quote.cjs +5 -6
  40. package/lib/Quote/Quote.mjs +3 -4
  41. package/lib/SectionHeading/SectionHeading.cjs +2 -3
  42. package/lib/SectionHeading/SectionHeading.mjs +2 -3
  43. package/lib/Statistics/Statistics.cjs +21 -19
  44. package/lib/Statistics/Statistics.mjs +21 -19
  45. package/lib/Statistics/styles.css +1 -1
  46. package/lib/Summary/Summary.cjs +4 -4
  47. package/lib/Summary/Summary.mjs +4 -4
  48. package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +14 -0
  49. package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +8 -0
  50. package/lib/ThumbnailSignpost/styles.css +1 -0
  51. package/lib/_shared/cjs/{Accordion-BCJIm1Gq.cjs → Accordion-QqDoB3pY.cjs} +9 -10
  52. package/lib/_shared/cjs/{Author-D4dKNQem.cjs → Author-aL8YXi7C.cjs} +4 -5
  53. package/lib/_shared/cjs/{SectionHeading-DeSFM0HV.cjs → SectionHeading-Dj-dJfv3.cjs} +4 -5
  54. package/lib/_shared/cjs/ThumbnailSignpost-SBnrGooA.cjs +38 -0
  55. package/lib/_shared/cjs/{tslib.es6-BxB9I209.cjs → filter-attrs-C26zOt4_.cjs} +25 -0
  56. package/lib/_shared/cjs/{index.es-DzI6hGjj.cjs → index.es-Dq8bYrbW.cjs} +1 -1
  57. package/lib/_shared/esm/{Accordion-BN_lZk6L.mjs → Accordion-DrOTh90S.mjs} +2 -3
  58. package/lib/_shared/esm/{Author-HnYsFTPT.mjs → Author-BVCRPgkl.mjs} +1 -2
  59. package/lib/_shared/esm/{SectionHeading-CpDLCndw.mjs → SectionHeading-DZOg_gYi.mjs} +1 -2
  60. package/lib/_shared/esm/ThumbnailSignpost-DaZByYIH.mjs +36 -0
  61. package/lib/_shared/esm/{tslib.es6-D6Wu-xwB.mjs → filter-attrs-D-1kWaCP.mjs} +25 -1
  62. package/lib/_shared/esm/{index.es-B6Bolkcx.mjs → index.es-Bfdys5__.mjs} +1 -1
  63. package/lib/index.cjs +218 -173
  64. package/lib/index.cjs.map +1 -1
  65. package/lib/index.d.cts +60 -64
  66. package/lib/index.d.mts +60 -64
  67. package/lib/index.mjs +216 -173
  68. package/lib/index.mjs.map +1 -1
  69. package/lib/styles.css +1 -1
  70. package/package.json +13 -13
  71. package/src/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.tsx +1 -1
  72. package/src/components/ActionTile/ActionTile.module.css +56 -37
  73. package/src/components/ActionTile/ActionTile.tsx +1 -1
  74. package/src/components/ArticleSidebar/ArticleSidebar.tsx +4 -6
  75. package/src/components/Author/Author.tsx +0 -3
  76. package/src/components/BannerWithTabs/BannerWithTabs.tsx +4 -6
  77. package/src/components/ContentInfoWidget/ContentInfoWidget.tsx +3 -4
  78. package/src/components/DownloadList/DownloadList.tsx +8 -8
  79. package/src/components/FAQs/FAQs.tsx +13 -6
  80. package/src/components/FeaturePost/FeaturePost.tsx +9 -9
  81. package/src/components/FeaturePost/components/Image/Image.tsx +31 -7
  82. package/src/components/FeaturePost/types/feature-post-image.ts +2 -0
  83. package/src/components/Highlights/Highlights.tsx +3 -2
  84. package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx +3 -2
  85. package/src/components/Highlights/components/HighlightList/HighlightList.tsx +5 -2
  86. package/src/components/InlineLinkGroup/InlineLinkGroup.module.css +81 -0
  87. package/src/components/InlineLinkGroup/InlineLinkGroup.tsx +67 -0
  88. package/src/components/InlineLinkGroup/index.ts +5 -0
  89. package/src/components/LinkTile/LinkTile.module.css +62 -26
  90. package/src/components/LinkTile/LinkTile.tsx +8 -1
  91. package/src/components/PromoListing/PromoListing.tsx +3 -11
  92. package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.module.css +54 -0
  93. package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx +53 -0
  94. package/src/components/PromoListingThumbnailSignpost/index.ts +4 -0
  95. package/src/components/Quote/Quote.tsx +1 -7
  96. package/src/components/Statistics/Statistics.module.css +0 -10
  97. package/src/components/Statistics/Statistics.tsx +35 -32
  98. package/src/components/Summary/Summary.tsx +3 -1
  99. package/src/components/ThumbnailSignpost/ThumbnailSignpost.module.css +112 -0
  100. package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx +100 -0
  101. package/src/components/ThumbnailSignpost/index.ts +4 -0
  102. package/src/components/index.ts +3 -1
  103. package/versions.json +1 -1
  104. package/lib/HeroLink/HeroLink.cjs +0 -35
  105. package/lib/HeroLink/HeroLink.mjs +0 -33
  106. package/lib/HeroLink/styles.css +0 -1
  107. package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs +0 -27
  108. package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs +0 -25
  109. package/src/components/HeroLink/HeroLink.module.css +0 -44
  110. package/src/components/HeroLink/HeroLink.tsx +0 -136
  111. package/src/components/HeroLink/index.ts +0 -2
package/lib/index.mjs CHANGED
@@ -22,6 +22,7 @@ import { TypographyCard } from '@arc-ui/components/TypographyCard';
22
22
  import { Box } from '@arc-ui/components/Box';
23
23
  import { Rule } from '@arc-ui/components/Rule';
24
24
  import { Align } from '@arc-ui/components/Align';
25
+ import { Hidden } from '@arc-ui/components/Hidden';
25
26
  import { TabbedBanner } from '@arc-ui/components/TabbedBanner';
26
27
  import { Tag } from '@arc-ui/components/Tag';
27
28
  import { Toast, ToastNotification } from '@arc-ui/components/Toast';
@@ -235,17 +236,17 @@ function requireClassnames () {
235
236
  var classnamesExports = requireClassnames();
236
237
  var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
237
238
 
238
- var styles$k = {"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"};
239
+ var styles$m = {"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"};
239
240
 
240
241
  var AccordionHeading = function (_a) {
241
242
  var _b, _c;
242
243
  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"]);
243
244
  return (React.createElement("div", __assign({ className: classNames((_b = {},
244
- _b[styles$k["accordion-header"]] = true,
245
- _b[styles$k["accordion-header--padded"]] = isPadded,
246
- _b[styles$k["accordion-header--headingSizeM"]] = headingSize === "m",
245
+ _b[styles$m["accordion-header"]] = true,
246
+ _b[styles$m["accordion-header--padded"]] = isPadded,
247
+ _b[styles$m["accordion-header--headingSizeM"]] = headingSize === "m",
247
248
  _b)) }, filterAttrs(props)),
248
- React.createElement("div", { className: classNames((_c = {}, _c[styles$k["accordion-header--hasImage"]] = image, _c)) },
249
+ React.createElement("div", { className: classNames((_c = {}, _c[styles$m["accordion-header--hasImage"]] = image, _c)) },
249
250
  image && (React.createElement("div", null,
250
251
  React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
251
252
  React.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
@@ -254,30 +255,30 @@ var AccordionHeading = function (_a) {
254
255
  React.createElement(Text, { size: "l", elementType: "p" }, content)))));
255
256
  };
256
257
 
257
- var styles$j = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
258
+ var styles$l = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
258
259
 
259
260
  var AccordionDisclosureList = function (_a) {
260
261
  var disclosureList = _a.disclosureList;
261
262
  return (React.createElement("ul", null, disclosureList.map(function (_a) {
262
263
  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"]);
263
- return (React.createElement("li", { key: id, className: styles$j.AccordionDisclosureListItem },
264
+ return (React.createElement("li", { key: id, className: styles$l.AccordionDisclosureListItem, id: id },
264
265
  React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
265
266
  })));
266
267
  };
267
268
 
268
- var styles$i = {"Accordion":"Accordion-module_Accordion__LsXTU"};
269
+ var styles$k = {"Accordion":"Accordion-module_Accordion__LsXTU"};
269
270
 
270
271
  /**
271
272
  * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
272
273
  */
273
274
  var Accordion = function (_a) {
274
275
  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"]);
275
- return (React.createElement("div", __assign({ className: styles$i.Accordion }, filterAttrs(props)),
276
+ return (React.createElement("div", __assign({ className: styles$k.Accordion }, filterAttrs(props)),
276
277
  React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
277
278
  React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
278
279
  };
279
280
 
280
- var styles$h = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
281
+ var styles$j = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
281
282
 
282
283
  var Author = function (_a) {
283
284
  var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
@@ -288,52 +289,52 @@ var Author = function (_a) {
288
289
  React.createElement(Grid, { isFluid: true, isGutterless: true },
289
290
  React.createElement(GridRow, { align: "center" },
290
291
  React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
291
- React.createElement("div", { className: isLargeAvatar ? styles$h.largeAvatar : undefined },
292
+ React.createElement("div", { className: isLargeAvatar ? styles$j.largeAvatar : undefined },
292
293
  React.createElement(Avatar, __assign({}, avatar)))),
293
294
  React.createElement(GridCol, null,
294
- React.createElement("div", { className: "".concat(!isLargeAvatar && styles$h.authorContent), "data-testid": "authorContent" },
295
+ React.createElement("div", { className: "".concat(!isLargeAvatar && styles$j.authorContent), "data-testid": "authorContent" },
295
296
  React.createElement(Heading, { size: "xs" }, name),
296
297
  React.createElement(Text, { size: "s" }, title)))))));
297
298
  };
298
299
 
299
300
  /**
300
301
  * Do not edit directly
301
- * Generated on Wed, 25 Feb 2026 15:47:05 GMT
302
+ * Generated on Fri, 06 Mar 2026 15:05:14 GMT
302
303
  */
303
304
  var ArcSizeBreakpointsS = "636px";
304
305
  var ArcSizeBreakpointsM = "768px";
305
306
  var ArcSizeBreakpointsL = "1024px";
306
307
  var ArcSizeBreakpointsXl = "1280px";
307
308
 
308
- var styles$g = {"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"};
309
+ var styles$i = {"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"};
309
310
 
310
311
  var MediaContent$1 = function (_a) {
311
312
  var heading = _a.heading, id = _a.id, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, children = _a.children;
312
- return (React.createElement("div", { className: styles$g.mediaContainer },
313
+ return (React.createElement("div", { className: styles$i.mediaContainer },
313
314
  React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
314
- children && (React.createElement("div", { className: styles$g.content },
315
+ children && (React.createElement("div", { className: styles$i.content },
315
316
  React.createElement(VerticalSpace, { size: "24" }),
316
317
  React.createElement(Text, { size: "l" }, children)))));
317
318
  };
318
319
 
319
320
  var Image$1 = function (_a) {
320
321
  var sources = _a.sources, props = __rest(_a, ["sources"]);
321
- return (React.createElement("div", { className: styles$g.imgWrapper },
322
+ return (React.createElement("div", { className: styles$i.imgWrapper },
322
323
  React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
323
324
  sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
324
325
  };
325
326
 
326
327
  var IconList = function (_a) {
327
328
  var listItems = _a.listItems, isLgScreen = _a.isLgScreen, _b = _a.headingLevel, headingLevel = _b === void 0 ? "3" : _b;
328
- return (React.createElement("ul", { className: styles$g.list }, listItems.map(function (_a) {
329
+ return (React.createElement("ul", { className: styles$i.list }, listItems.map(function (_a) {
329
330
  var _b;
330
331
  var icon = _a.icon, heading = _a.heading, text = _a.text;
331
- return (React.createElement("li", { key: heading, className: classNames(styles$g.listItem, (_b = {},
332
- _b[styles$g.listItemCentered] = !text,
332
+ return (React.createElement("li", { key: heading, className: classNames(styles$i.listItem, (_b = {},
333
+ _b[styles$i.listItemCentered] = !text,
333
334
  _b)) },
334
- React.createElement("div", { className: styles$g.listItemIconContainer },
335
+ React.createElement("div", { className: styles$i.listItemIconContainer },
335
336
  React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
336
- React.createElement("div", { className: styles$g.listItemTextContainer },
337
+ React.createElement("div", { className: styles$i.listItemTextContainer },
337
338
  React.createElement(Heading, { level: headingLevel, size: "s" }, heading),
338
339
  text && (React.createElement(React.Fragment, null,
339
340
  React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
@@ -341,20 +342,20 @@ var IconList = function (_a) {
341
342
  })));
342
343
  };
343
344
 
344
- var Button = function (props) { return (React.createElement("div", { className: styles$g.buttonContainer },
345
+ var Button = function (props) { return (React.createElement("div", { className: styles$i.buttonContainer },
345
346
  React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
346
347
 
347
348
  var Container = function (_a) {
348
349
  var _b;
349
350
  var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
350
- return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$g.container, styles$g["container--".concat(type)], styles$g["container--align-".concat(alignment)], (_b = {},
351
- _b[styles$g["container--reverse"]] = isReverseOrder,
351
+ return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$i.container, styles$i["container--".concat(type)], styles$i["container--align-".concat(alignment)], (_b = {},
352
+ _b[styles$i["container--reverse"]] = isReverseOrder,
352
353
  _b)) }, children));
353
354
  };
354
355
 
355
356
  var Column = function (_a) {
356
357
  var children = _a.children;
357
- return (React.createElement("div", { className: styles$g.col }, children));
358
+ return (React.createElement("div", { className: styles$i.col }, children));
358
359
  };
359
360
 
360
361
  var getListHeadingLevel$1 = function (level) {
@@ -394,16 +395,16 @@ var MediaTemplate = function (_a) {
394
395
  image && !video && React.createElement(Image$1, __assign({}, image))))));
395
396
  };
396
397
 
397
- var styles$f = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
398
+ var styles$h = {"section-header":"SectionHeading-module_section-header__iB07I","section-header--hasImage":"SectionHeading-module_section-header--hasImage__Ka3T7","section-header--padded":"SectionHeading-module_section-header--padded__0FXP2"};
398
399
 
399
400
  var SectionHeading = function (_a) {
400
401
  var _b, _c;
401
402
  var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel"]);
402
403
  return (React.createElement("div", __assign({ className: classNames((_b = {},
403
- _b[styles$f["section-header"]] = true,
404
- _b[styles$f["section-header--padded"]] = isPadded,
404
+ _b[styles$h["section-header"]] = true,
405
+ _b[styles$h["section-header--padded"]] = isPadded,
405
406
  _b)) }, filterAttrs(props)),
406
- React.createElement("div", { className: classNames((_c = {}, _c[styles$f["section-header--hasImage"]] = image, _c)) },
407
+ React.createElement("div", { className: classNames((_c = {}, _c[styles$h["section-header--hasImage"]] = image, _c)) },
407
408
  image && (React.createElement("div", null,
408
409
  React.createElement(Image$2, __assign({}, image, { width: 68, fit: "cover" })))),
409
410
  React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
@@ -440,47 +441,50 @@ var CopyLead = function (_a) {
440
441
  return null;
441
442
  };
442
443
 
443
- var styles$e = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
444
+ var styles$g = {"headingContainer":"DownloadList-module_headingContainer__PNio8"};
444
445
 
445
446
  var DownloadList = function (_a) {
446
- 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;
447
- return (React.createElement(React.Fragment, null,
448
- React.createElement("div", { className: styles$e.headingContainer },
447
+ 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, props = __rest(_a, ["heading", "id", "headingLevel", "isHeadingWordWrap", "content", "downloads"]);
448
+ return (React.createElement("div", __assign({}, filterAttrs(props)),
449
+ React.createElement("div", { className: styles$g.headingContainer },
449
450
  React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
450
451
  React.createElement(VerticalSpace, { size: "40" }),
451
- downloads.map(function (props, i) { return (React.createElement(React.Fragment, null,
452
- React.createElement(Download, __assign({}, props)),
453
- " ",
452
+ downloads.map(function (downloadProps, i) { return (React.createElement(React.Fragment, { key: "download-".concat(i) },
453
+ React.createElement(Download, __assign({}, downloadProps)),
454
454
  i !== downloads.length - 1 && React.createElement(VerticalSpace, { size: "16" }))); })));
455
455
  };
456
456
 
457
- var styles$d = {"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"};
457
+ var styles$f = {"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"};
458
458
 
459
+ var scrollToSectionFocusFirstElement = function (item) {
460
+ var _a, _b, _c, _d, _e;
461
+ if (!item.id)
462
+ return;
463
+ (_a = document.getElementById(item.id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
464
+ // preventScroll avoids interfering with the scroll animation.
465
+ (_e = (_d = document
466
+ .getElementById((_c = (_b = item.disclosureList) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id)) === null || _d === void 0 ? void 0 : _d.querySelector("summary")) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
467
+ };
459
468
  var FAQs = function (_a) {
460
469
  var _b;
461
470
  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"]);
462
- return (React.createElement("div", __assign({ className: styles$d.FAQs }, filterAttrs(props)),
471
+ return (React.createElement("div", __assign({ className: styles$f.FAQs }, filterAttrs(props)),
463
472
  React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, image: image, headingLevel: headingLevel, isPadded: isPadded }),
464
- type === "listWithLinks" && (React.createElement("div", { className: styles$d.linkListSection },
465
- React.createElement("div", { className: styles$d.linkListTitle },
473
+ type === "listWithLinks" && (React.createElement("div", { className: styles$f.linkListSection },
474
+ React.createElement("div", { className: styles$f.linkListTitle },
466
475
  React.createElement(Heading, { size: "xs" }, linkListHeading)),
467
476
  React.createElement("ul", { className: classNames((_b = {},
468
- _b[styles$d.linkList] = true,
469
- _b[styles$d["linkList--padded"]] = isPadded,
477
+ _b[styles$f.linkList] = true,
478
+ _b[styles$f["linkList--padded"]] = isPadded,
470
479
  _b)) }, accordionData.map(function (item) {
471
480
  var _a;
472
- return (React.createElement("li", { className: styles$d.linkListItem, key: item.heading },
481
+ return (React.createElement("li", { className: styles$f.linkListItem, key: item.heading },
473
482
  React.createElement(Link, { title: item.heading, href: "#".concat(item.id), onClick: function (e) {
474
483
  e.preventDefault();
475
- if (item.id) {
476
- var element = document.getElementById(item.id);
477
- if (element) {
478
- element.scrollIntoView({ behavior: "smooth" });
479
- }
480
- }
484
+ scrollToSectionFocusFirstElement(item);
481
485
  } }, (_a = item.altLinkTitle) !== null && _a !== void 0 ? _a : item.heading)));
482
486
  })))),
483
- type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$d.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$d.accordionListItem, key: item.id },
487
+ type !== "tabs" && accordionData && (React.createElement("ul", { className: styles$f.accordionList }, accordionData.map(function (item) { return (React.createElement("li", { className: styles$f.accordionListItem, key: item.id },
484
488
  React.createElement(Accordion, { id: item.id, heading: item.heading, headingLevel: item.headingLevel, content: item.content, disclosureList: item.disclosureList, headingSize: "m" }),
485
489
  React.createElement(VerticalSpace, { size: "48", sizeL: "64" }))); }))),
486
490
  type === "tabs" && (React.createElement(Tabs, { defaultValue: accordionData[0].heading },
@@ -2677,13 +2681,20 @@ function cleanEscapedString(input) {
2677
2681
  return matched[1].replace(doubleQuoteRegExp, "'");
2678
2682
  }
2679
2683
 
2680
- var styles$c = {"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"};
2684
+ var styles$e = {"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"};
2681
2685
 
2682
2686
  var Image = function (_a) {
2683
- var sources = _a.sources, props = __rest(_a, ["sources"]);
2684
- return (React.createElement("div", { className: styles$c.imgWrapper },
2685
- React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
2686
- sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))));
2687
+ var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
2688
+ return (React.createElement(React.Fragment, null,
2689
+ React.createElement("div", { className: styles$e.imgWrapper },
2690
+ React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
2691
+ sources.map(function (source) { return React.createElement("source", __assign({ key: source.srcSet }, source)); }))),
2692
+ title && (React.createElement(React.Fragment, null,
2693
+ React.createElement(VerticalSpace, { size: "24" }),
2694
+ React.createElement(Heading, { level: "3", size: "s" }, title),
2695
+ description && (React.createElement(React.Fragment, null,
2696
+ React.createElement(VerticalSpace, { size: "16" }),
2697
+ React.createElement(Text, { size: "m" }, description)))))));
2687
2698
  };
2688
2699
 
2689
2700
  var VideoPlayer = React.lazy(function () {
@@ -2713,29 +2724,29 @@ var FeaturePost = function (_a) {
2713
2724
  var _b;
2714
2725
  var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
2715
2726
  var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
2716
- return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$c.featurePost, (_b = {},
2717
- _b[styles$c.featurePostReversed] = isReverseOrder,
2727
+ return (React.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles$e.featurePost, (_b = {},
2728
+ _b[styles$e.featurePostReversed] = isReverseOrder,
2718
2729
  _b)) }, filterAttrs(props)),
2719
- React.createElement("div", { className: styles$c.col },
2720
- React.createElement("div", { className: styles$c.contentContainer },
2730
+ React.createElement("div", { className: styles$e.col },
2731
+ React.createElement("div", { className: styles$e.contentContainer },
2721
2732
  label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
2722
2733
  React.createElement(GridRow, { align: "baseline" },
2723
2734
  React.createElement(GridCol, { xs: 12, m: "auto" },
2724
2735
  React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
2725
2736
  React.createElement(GridCol, { xs: 12, m: "auto" },
2726
- React.createElement("div", { className: styles$c.labelDate },
2737
+ React.createElement("div", { className: styles$e.labelDate },
2727
2738
  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)))))),
2728
2739
  React.createElement(VerticalSpace, { size: "24" }))),
2729
2740
  React.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
2730
2741
  !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
2731
2742
  React.createElement(VerticalSpace, { size: "40" }),
2732
2743
  React.createElement(MediaContent, { image: image, video: video }))),
2733
- React.createElement(VerticalSpace, { size: "40" }),
2734
- React.createElement(Text, { size: "l" }, content),
2744
+ React.createElement(VerticalSpace, { size: "24" }),
2745
+ typeof content === "string" ? (React.createElement(Text, { size: "l" }, content)) : (content),
2735
2746
  (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
2736
2747
  footer.author && (React.createElement(React.Fragment, null,
2737
- React.createElement(VerticalSpace, { size: "24" }),
2738
- React.createElement(Author, { name: footer.author.name, title: footer.author.title, avatar: footer.author.avatar }))),
2748
+ React.createElement(VerticalSpace, { size: "40" }),
2749
+ React.createElement(Author, __assign({}, footer.author)))),
2739
2750
  React.createElement(VerticalSpace, { size: "40" }),
2740
2751
  React.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
2741
2752
  (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
@@ -2745,10 +2756,10 @@ var FeaturePost = function (_a) {
2745
2756
  footer.appStore && (React.createElement(GridCol, { xs: 12, s: "auto" },
2746
2757
  React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
2747
2758
  footer.googlePlay && (React.createElement(GridCol, { xs: 12, s: "auto" },
2748
- React.createElement("div", { className: styles$c.googlePlayButtonWrapper },
2759
+ React.createElement("div", { className: styles$e.googlePlayButtonWrapper },
2749
2760
  React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
2750
- isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$c.col },
2751
- React.createElement("div", { "data-testid": "desktop-img", className: styles$c.imgContainer },
2761
+ isMinWidthArcBreakpointM && (React.createElement("div", { className: styles$e.col },
2762
+ React.createElement("div", { "data-testid": "desktop-img", className: styles$e.imgContainer },
2752
2763
  React.createElement(MediaContent, { image: image, video: video }))))));
2753
2764
  };
2754
2765
 
@@ -2760,7 +2771,7 @@ var FeaturePost = function (_a) {
2760
2771
  const BtIconArrowRightFill =
2761
2772
  "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";
2762
2773
 
2763
- var styles$b = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
2774
+ var styles$d = {"highlights":"Highlights-module_highlights__Hf7Zq","highlightItem":"Highlights-module_highlightItem__-N6le","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
2764
2775
 
2765
2776
  var getListHeadingLevel = function (level) {
2766
2777
  var nextLevel = Math.min(parseInt(level) + 1, 6);
@@ -2768,10 +2779,10 @@ var getListHeadingLevel = function (level) {
2768
2779
  };
2769
2780
 
2770
2781
  var HighlightItem = function (_a) {
2771
- var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
2782
+ 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"]);
2772
2783
  var listHeadingLevel = getListHeadingLevel(headingLevel || "2");
2773
- return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles$b.highlightItem },
2774
- icon && (React.createElement("div", { className: styles$b.Icon },
2784
+ return (React.createElement("div", __assign({ "data-testid": "highlight-item-container", className: styles$d.highlightItem }, filterAttrs(props)),
2785
+ icon && (React.createElement("div", { className: styles$d.Icon },
2775
2786
  React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
2776
2787
  React.createElement(VerticalSpace, { size: "16" }),
2777
2788
  React.createElement(Heading, { level: listHeadingLevel, size: "m" }, heading),
@@ -2782,11 +2793,11 @@ var HighlightItem = function (_a) {
2782
2793
  };
2783
2794
 
2784
2795
  var HighlightList = function (_a) {
2785
- var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel;
2796
+ var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon, headingLevel = _a.headingLevel, props = __rest(_a, ["listItems", "columns", "isSmallIcon", "headingLevel"]);
2786
2797
  var id = useId();
2787
- return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles$b.highlights, styles$b["highlights".concat(columns, "Column")]) }, listItems.map(function (_a, i) {
2788
- var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
2789
- return (React.createElement(HighlightItem, { key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }));
2798
+ return (React.createElement("div", __assign({ "data-testid": "highlights-list", className: classNames(styles$d.highlights, styles$d["highlights".concat(columns, "Column")]) }, filterAttrs(props)), listItems.map(function (_a, i) {
2799
+ var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, itemProps = __rest(_a, ["icon", "heading", "text", "link"]);
2800
+ return (React.createElement(HighlightItem, __assign({ key: "highlight-".concat(id, "-").concat(i), icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon, headingLevel: headingLevel }, itemProps)));
2790
2801
  })));
2791
2802
  };
2792
2803
 
@@ -2797,11 +2808,11 @@ var HighlightList = function (_a) {
2797
2808
  */
2798
2809
  var Highlights = function (_a) {
2799
2810
  var _b, _c, _d;
2800
- var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta;
2811
+ var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
2801
2812
  var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
2802
- return (React.createElement("div", null,
2813
+ return (React.createElement("div", __assign({}, filterAttrs(props)),
2803
2814
  React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
2804
- React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
2815
+ React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
2805
2816
  cta && (React.createElement(React.Fragment, null,
2806
2817
  React.createElement(VerticalSpace, { size: "24" }),
2807
2818
  React.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
@@ -2811,7 +2822,7 @@ var Highlights = function (_a) {
2811
2822
  : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
2812
2823
  };
2813
2824
 
2814
- var styles$a = {"PromoListing":"PromoListing-module_PromoListing__6ensv","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"};
2825
+ var styles$c = {"PromoListing":"PromoListing-module_PromoListing__6ensv","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"};
2815
2826
 
2816
2827
  /**
2817
2828
  * Do not edit directly
@@ -2865,7 +2876,7 @@ const BtIconTickAlt2Px =
2865
2876
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
2866
2877
  */
2867
2878
  var PromoListing = function (_a) {
2868
- var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel;
2879
+ var heading = _a.heading, content = _a.content, id = _a.id, _b = _a.isCarousel, isCarousel = _b === void 0 ? false : _b, cards = _a.cards, headingLevel = _a.headingLevel, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.columns, columns = _c === void 0 ? "2" : _c, _d = _a.button, button = _d === void 0 ? { buttonStyle: "secondary" } : _d, overlineHeadingLevel = _a.overlineHeadingLevel, overlineLabel = _a.overlineLabel, props = __rest(_a, ["heading", "content", "id", "isCarousel", "cards", "headingLevel", "isHeadingWordWrap", "columns", "button", "overlineHeadingLevel", "overlineLabel"]);
2869
2880
  var componentId = useId();
2870
2881
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
2871
2882
  var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
@@ -2897,7 +2908,7 @@ var PromoListing = function (_a) {
2897
2908
  var CardComponent = CARD_COMPONENTS[card.type];
2898
2909
  return React.createElement(CardComponent, __assign({}, card, commonProps));
2899
2910
  };
2900
- return (React.createElement("div", { className: styles$a.PromoListing },
2911
+ return (React.createElement("div", __assign({ className: styles$c.PromoListing }, filterAttrs(props)),
2901
2912
  overlineLabel && (React.createElement(React.Fragment, null,
2902
2913
  React.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
2903
2914
  React.createElement(VerticalSpace, { size: "12" }))),
@@ -2905,44 +2916,44 @@ var PromoListing = function (_a) {
2905
2916
  button.label && (React.createElement(React.Fragment, null,
2906
2917
  React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
2907
2918
  React.createElement(VerticalSpace, { size: "40" }))),
2908
- isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$a.promolistingCarouselWrapper },
2909
- 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$a.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$a.cardGrid, styles$a["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) },
2910
- React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$a.cardWrapper }, getCard(card)))); })))));
2919
+ isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles$c.promolistingCarouselWrapper },
2920
+ 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$c.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles$c.cardGrid, styles$c["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) },
2921
+ React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles$c.cardWrapper }, getCard(card)))); })))));
2911
2922
  };
2912
2923
 
2913
- var styles$9 = {"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"};
2924
+ var styles$b = {"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"};
2914
2925
 
2915
2926
  /**
2916
2927
  * 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.*/
2917
2928
  var Quote = function (_a) {
2918
2929
  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"]);
2919
2930
  return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
2920
- React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$9.blockQuote, styles$9["quote".concat(styling)]), cite: citeUrl },
2921
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$9.quoteIcon, "aria-hidden": "true" },
2931
+ React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles$b.blockQuote, styles$b["quote".concat(styling)]), cite: citeUrl },
2932
+ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles$b.quoteIcon, "aria-hidden": "true" },
2922
2933
  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" })),
2923
- React.createElement("p", { className: styles$9.quoteContent }, content)),
2924
- author && (React.createElement(Author, { name: author.name, title: author.title, avatar: author.avatar }))));
2934
+ React.createElement("p", { className: styles$b.quoteContent }, content)),
2935
+ author && React.createElement(Author, __assign({}, author))));
2925
2936
  };
2926
2937
 
2927
- var styles$8 = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
2938
+ var styles$a = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summary-module_row__SKV--"};
2928
2939
 
2929
2940
  var Summary = function (_a) {
2930
- var content = _a.content, _b = _a.noBorder, noBorder = _b === void 0 ? false : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "3" : _c;
2941
+ 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"]);
2931
2942
  var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
2932
- return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }),
2933
- React.createElement("div", { className: styles$8.row }, content.map(function (_a, i) {
2943
+ return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
2944
+ React.createElement("div", { className: styles$a.row }, content.map(function (_a, i) {
2934
2945
  var heading = _a.heading, text = _a.text;
2935
2946
  return (React.createElement(React.Fragment, null,
2936
- React.createElement("div", { className: styles$8.col },
2947
+ React.createElement("div", { className: styles$a.col },
2937
2948
  React.createElement(Heading, { size: "s", level: headingLevel }, heading),
2938
2949
  React.createElement(VerticalSpace, { size: "8" }),
2939
2950
  React.createElement(Text, { size: "s" }, text)),
2940
- i !== content.length - 1 && (React.createElement("div", { className: styles$8.ruleContainer },
2951
+ i !== content.length - 1 && (React.createElement("div", { className: styles$a.ruleContainer },
2941
2952
  React.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
2942
2953
  }))));
2943
2954
  };
2944
2955
 
2945
- var styles$7 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM","statWrapper":"Statistics-module_statWrapper__83OnM"};
2956
+ var styles$9 = {"list":"Statistics-module_list__BI-eQ","mutedText":"Statistics-module_mutedText__MR1JM"};
2946
2957
 
2947
2958
  var getLinkProps = function (link) {
2948
2959
  return link.openInNewTab
@@ -2954,14 +2965,13 @@ var getLinkProps = function (link) {
2954
2965
  };
2955
2966
 
2956
2967
  var Statistics = function (_a) {
2957
- var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics;
2968
+ var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, headingLevel = _a.headingLevel, heading = _a.heading, content = _a.content, statistics = _a.statistics, props = __rest(_a, ["id", "isHeadingWordWrap", "headingLevel", "heading", "content", "statistics"]);
2958
2969
  var componentId = useId();
2959
- return (React.createElement(Columns, null,
2970
+ return (React.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
2960
2971
  React.createElement(ColumnsCol, { spanM: 9 },
2961
- React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
2962
- React.createElement(VerticalSpace, { size: "16" })),
2972
+ React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
2963
2973
  React.createElement(ColumnsCol, { spanL: 9 },
2964
- React.createElement("ul", { className: styles$7.list }, statistics.map(function (_a, i) {
2974
+ React.createElement("ul", { className: styles$9.list }, statistics.map(function (_a, i) {
2965
2975
  var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
2966
2976
  return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
2967
2977
  i !== 0 && (React.createElement(React.Fragment, null,
@@ -2971,43 +2981,46 @@ var Statistics = function (_a) {
2971
2981
  React.createElement(Columns, null,
2972
2982
  React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
2973
2983
  React.createElement(Align, { vertical: "center" },
2974
- React.createElement("div", { className: styles$7.statWrapper },
2975
- React.createElement(Heading, { color: "brand", size: "xxl" }, stat)))),
2984
+ React.createElement("div", { className: styles$9.statWrapper },
2985
+ React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
2986
+ React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
2987
+ React.createElement(VerticalSpace, { size: "12" }))))),
2976
2988
  React.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
2977
- React.createElement(Text, null, copy),
2978
- link && (React.createElement(React.Fragment, null,
2979
- React.createElement(VerticalSpace, { size: "12" }),
2980
- React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
2981
- source && (React.createElement(React.Fragment, null,
2982
- React.createElement(VerticalSpace, { size: "12" }),
2983
- React.createElement(Text, { size: "xs" },
2984
- React.createElement("span", { className: styles$7.mutedText }, source)))),
2985
- sourceUrl && (React.createElement(Text, { size: "xs" },
2986
- React.createElement("a", { className: styles$7.mutedText, href: sourceUrl }, sourceUrl)))))));
2989
+ React.createElement(Align, { vertical: "center" },
2990
+ React.createElement(Text, null, copy),
2991
+ link && (React.createElement(React.Fragment, null,
2992
+ React.createElement(VerticalSpace, { size: "12" }),
2993
+ React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
2994
+ source && (React.createElement(React.Fragment, null,
2995
+ React.createElement(VerticalSpace, { size: "12" }),
2996
+ React.createElement(Text, { size: "xs" },
2997
+ React.createElement("span", { className: styles$9.mutedText }, source)))),
2998
+ sourceUrl && (React.createElement(Text, { size: "xs" },
2999
+ React.createElement("a", { className: styles$9.mutedText, href: sourceUrl }, sourceUrl))))))));
2987
3000
  })))));
2988
3001
  };
2989
3002
 
2990
- var styles$6 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
3003
+ var styles$8 = {"bannerWithTabsHeadingCentered":"BannerWithTabs-module_bannerWithTabsHeadingCentered__upqEO"};
2991
3004
 
2992
3005
  var BannerWithTabs = function (_a) {
2993
3006
  var _b;
2994
- var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, content = _a.content, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, _c = _a.alignTypography, alignTypography = _c === void 0 ? "left" : _c, minHeight = _a.minHeight, minHeightM = _a.minHeightM;
2995
- return (React.createElement(React.Fragment, null,
3007
+ var tabs = _a.tabs, defaultValue = _a.defaultValue, heading = _a.heading, 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", "content", "id", "isHeadingWordWrap", "alignTypography", "minHeight", "minHeightM"]);
3008
+ return (React.createElement("div", __assign({}, filterAttrs(props)),
2996
3009
  React.createElement("div", { className: classNames((_b = {},
2997
- _b[styles$6.bannerWithTabsHeadingCentered] = alignTypography === "center",
3010
+ _b[styles$8.bannerWithTabsHeadingCentered] = alignTypography === "center",
2998
3011
  _b)) },
2999
3012
  React.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, isPadded: alignTypography === "left" ? true : false })),
3000
3013
  React.createElement(TabbedBanner, { minHeight: minHeight, minHeightM: minHeightM, tabs: tabs, defaultValue: defaultValue })));
3001
3014
  };
3002
3015
 
3003
- var styles$5 = {"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"};
3016
+ var styles$7 = {"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"};
3004
3017
 
3005
3018
  /**
3006
3019
  * Use `ArticleSidebar` to provide additional information about the article.
3007
3020
  */
3008
3021
  var ArticleSidebar = function (_a) {
3009
3022
  var _b;
3010
- var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection;
3023
+ var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection"]);
3011
3024
  var id = useId();
3012
3025
  var _c = useState(false), showToast = _c[0], setShowToast = _c[1];
3013
3026
  var url = location.href;
@@ -3054,9 +3067,9 @@ var ArticleSidebar = function (_a) {
3054
3067
  : []), true) : [];
3055
3068
  var hasTopContent = Boolean(author || aboutSection || additionalContent);
3056
3069
  var hasBottomContent = Boolean(linkSection || topics || share);
3057
- return (React.createElement(React.Fragment, null,
3070
+ return (React.createElement("div", __assign({}, filterAttrs(props)),
3058
3071
  React.createElement("div", { className: classNames((_b = {},
3059
- _b[styles$5.textContent] = hasTopContent,
3072
+ _b[styles$7.textContent] = hasTopContent,
3060
3073
  _b)) },
3061
3074
  author && (React.createElement(React.Fragment, null,
3062
3075
  React.createElement(Author, __assign({}, author, { avatar: __assign(__assign({}, author.avatar), { size: "xl" }) })))),
@@ -3067,7 +3080,7 @@ var ArticleSidebar = function (_a) {
3067
3080
  React.createElement(Text, { size: "s" }, aboutSection.content))),
3068
3081
  additionalContent && (React.createElement(React.Fragment, null,
3069
3082
  (author || aboutSection) && React.createElement(VerticalSpace, { size: "16" }),
3070
- React.createElement("div", { className: styles$5.additionalContentContainer }, additionalContent.map(function (_a) {
3083
+ React.createElement("div", { className: styles$7.additionalContentContainer }, additionalContent.map(function (_a) {
3071
3084
  var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
3072
3085
  return (React.createElement("div", { key: "".concat(id, "-").concat(heading) },
3073
3086
  React.createElement(Heading, { level: headingLevel, size: "xxs" }, heading),
@@ -3090,7 +3103,7 @@ var ArticleSidebar = function (_a) {
3090
3103
  linkSection && React.createElement(VerticalSpace, { size: "32" }),
3091
3104
  React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
3092
3105
  React.createElement(VerticalSpace, { size: "16" }),
3093
- React.createElement("div", { className: styles$5.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
3106
+ React.createElement("div", { className: styles$7.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
3094
3107
  share && (React.createElement(React.Fragment, null,
3095
3108
  (linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
3096
3109
  React.createElement(VerticalSpace, { size: "32" }),
@@ -3098,16 +3111,16 @@ var ArticleSidebar = function (_a) {
3098
3111
  React.createElement(VerticalSpace, { size: "32" }))),
3099
3112
  React.createElement(Heading, { level: share.headingLevel }, share.heading),
3100
3113
  React.createElement(VerticalSpace, { size: "16" }),
3101
- React.createElement("div", { className: styles$5.shareButtonContainer }, shareButtons.map(function (_a) {
3114
+ React.createElement("div", { className: styles$7.shareButtonContainer }, shareButtons.map(function (_a) {
3102
3115
  var isButton = _a.isButton, ariaLabel = _a.ariaLabel, href = _a.href, icon = _a.icon, onClick = _a.onClick;
3103
- return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$5.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
3116
+ return (React.createElement("a", { key: "".concat(id, "-").concat(ariaLabel), role: isButton ? "button" : undefined, target: "_blank", rel: "noreferrer", className: styles$7.shareButton, "aria-label": ariaLabel, href: href, onClick: isButton ? onClick : undefined },
3104
3117
  React.createElement(Icon, { icon: icon, size: 24 })));
3105
3118
  })))),
3106
3119
  React.createElement(Toast, null,
3107
3120
  React.createElement(ToastNotification, { status: "success", title: "Copied to clipboard", isOpen: showToast, onOpenChange: function () { return setShowToast(false); } }))));
3108
3121
  };
3109
3122
 
3110
- var styles$4 = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
3123
+ var styles$6 = {"product-navigation-grid":"ProductNavigation-module_product-navigation-grid__RzFq8","productNavigation-skipLink":"ProductNavigation-module_productNavigation-skipLink__fy8ZJ"};
3111
3124
 
3112
3125
  /**
3113
3126
  * Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
@@ -3151,7 +3164,7 @@ var ProductNavigation = function (_a) {
3151
3164
  var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
3152
3165
  return (React.createElement("div", __assign({}, filterAttrs(props)),
3153
3166
  React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
3154
- React.createElement("ul", { className: classNames(styles$4["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
3167
+ React.createElement("ul", { className: classNames(styles$6["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
3155
3168
  var _a;
3156
3169
  return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
3157
3170
  React.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
@@ -3162,7 +3175,7 @@ var ProductNavigation = function (_a) {
3162
3175
  ? "Show more"
3163
3176
  : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
3164
3177
  displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
3165
- React.createElement("div", { id: "skip-link", className: classNames(styles$4["productNavigation-skipLink"]), tabIndex: -1 },
3178
+ React.createElement("div", { id: "skip-link", className: classNames(styles$6["productNavigation-skipLink"]), tabIndex: -1 },
3166
3179
  React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
3167
3180
  React.createElement(VisuallyHidden, null,
3168
3181
  React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
@@ -3175,71 +3188,101 @@ var ProductNavigation = function (_a) {
3175
3188
  "."))))));
3176
3189
  };
3177
3190
 
3178
- var styles$3 = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
3191
+ var styles$5 = {"container":"ContentInfoWidget-module_container__yaS-8","text":"ContentInfoWidget-module_text__O1BdZ","icon":"ContentInfoWidget-module_icon__LEww1"};
3179
3192
 
3180
3193
  var ContentInfoWidget = function (_a) {
3181
- var text = _a.text, icon = _a.icon;
3182
- return (React.createElement("div", { className: styles$3.container },
3183
- React.createElement("div", { className: styles$3.icon },
3194
+ var text = _a.text, icon = _a.icon, props = __rest(_a, ["text", "icon"]);
3195
+ return (React.createElement("div", __assign({ className: styles$5.container }, filterAttrs(props)),
3196
+ React.createElement("div", { className: styles$5.icon },
3184
3197
  React.createElement(Icon, { size: 20, icon: icon })),
3185
- React.createElement("div", { className: styles$3.text },
3198
+ React.createElement("div", { className: styles$5.text },
3186
3199
  React.createElement(Text, { size: "xs", tone: "muted" }, text))));
3187
3200
  };
3188
3201
 
3189
- var styles$2 = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
3190
-
3191
- /**
3192
- * Pill-style HeroLink component with default and hover states
3193
- */
3194
- var HeroLink = function (_a) {
3195
- var _b;
3196
- var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
3197
- var HeroLinkClasses = classNames(styles$2.heroLink, (_b = {},
3198
- _b[styles$2["heroLink--emptyLabel"]] = !label,
3199
- _b));
3200
- var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
3201
- if (href) {
3202
- return (React.createElement("a", __assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
3203
- React.createElement("span", { className: styles$2["heroLink-inner"] },
3204
- label && React.createElement("span", { className: styles$2["heroLink-label"] }, label),
3205
- React.createElement("span", { className: styles$2["heroLink-icon"] },
3206
- React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
3207
- }
3208
- return (React.createElement("button", __assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
3209
- React.createElement("span", { className: styles$2["heroLink-inner"] },
3210
- label && React.createElement("span", { className: styles$2["heroLink-label"] }, label),
3211
- React.createElement("span", { className: styles$2["heroLink-icon"] },
3212
- React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
3213
- };
3214
-
3215
- var styles$1 = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
3202
+ var styles$4 = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
3216
3203
 
3217
3204
  var ActionTile = function (_a) {
3218
3205
  var _b;
3219
3206
  var icon = _a.icon, heading = _a.heading, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, className = _a.className, props = __rest(_a, ["icon", "heading", "isActive", "onClick", "className"]);
3220
- var tileClasses = classNames(styles$1["action-tile"], (_b = {},
3221
- _b[styles$1["action-tile--active"]] = isActive,
3207
+ var tileClasses = classNames(styles$4["action-tile"], (_b = {},
3208
+ _b[styles$4["action-tile--active"]] = isActive,
3222
3209
  _b), className);
3223
3210
  var content = (React.createElement(React.Fragment, null,
3224
- React.createElement("div", { className: styles$1["action-tile-content"] },
3225
- icon && (React.createElement("div", { className: styles$1["action-tile-icon"] },
3211
+ React.createElement("div", { className: styles$4["action-tile-content"] },
3212
+ icon && (React.createElement("div", { className: styles$4["action-tile-icon"] },
3226
3213
  React.createElement(Icon, { icon: icon, size: 48 }))),
3227
- React.createElement("h3", { className: styles$1["action-tile-heading"] }, heading)),
3228
- isActive && (React.createElement("div", { className: styles$1["action-tile-tick"] },
3229
- React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 20 })))));
3214
+ React.createElement("h3", { className: styles$4["action-tile-heading"] }, heading)),
3215
+ isActive && (React.createElement("div", { className: styles$4["action-tile-tick"] },
3216
+ React.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
3230
3217
  return (React.createElement("div", __assign({ className: tileClasses, onClick: onClick }, filterAttrs(props)), content));
3231
3218
  };
3232
3219
 
3233
- var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
3220
+ var styles$3 = {"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"};
3234
3221
 
3235
3222
  var LinkTile = function (_a) {
3236
3223
  var text = _a.text, href = _a.href, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "className"]);
3237
3224
  var Component = href ? "a" : "div";
3238
3225
  var linkProps = href ? { href: href } : {};
3239
- return (React.createElement(Component, __assign({ className: classNames(styles["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles["link-tile-content"] },
3240
- React.createElement("span", { className: styles["link-tile-text"] }, text),
3241
- showIcon && React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))));
3226
+ return (React.createElement(Component, __assign({ className: classNames(styles$3["link-tile"], className) }, linkProps, filterAttrs(props)), text && (React.createElement("div", { className: styles$3["link-tile-content"] },
3227
+ React.createElement("span", { className: styles$3["link-tile-text"] }, text),
3228
+ showIcon && (React.createElement("span", { className: styles$3["link-tile-icon"] },
3229
+ React.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
3230
+ };
3231
+
3232
+ var styles$2 = {"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"};
3233
+
3234
+ var InlineLinkGroup = function (_a) {
3235
+ var label = _a.label, links = _a.links, props = __rest(_a, ["label", "links"]);
3236
+ return (React.createElement("div", __assign({ className: styles$2["quick-help"] }, filterAttrs(props)),
3237
+ label && (React.createElement("div", { className: styles$2["quick-help-label"] },
3238
+ React.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label))),
3239
+ React.createElement("ul", { className: styles$2["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
3240
+ React.createElement("li", { className: styles$2["quick-help-item"] },
3241
+ React.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
3242
+ React.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
3243
+ index < links.length - 1 && (React.createElement("li", { className: styles$2["quick-help-separator"], "aria-hidden": "true" },
3244
+ React.createElement("div", { className: styles$2["quick-help-separator-line"] }))))); }))));
3245
+ };
3246
+
3247
+ var styles$1 = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Yf26b","isLink":"ThumbnailSignpost-module_isLink__FucdG","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"};
3248
+
3249
+ /** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
3250
+ var ThumbnailSignpost = function (_a) {
3251
+ var _b;
3252
+ var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
3253
+ return (React.createElement("div", __assign({ className: classNames(styles$1.thumbnailSignpost, (_b = {},
3254
+ _b[styles$1.isLink] = onClick,
3255
+ _b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
3256
+ img && (React.createElement("div", { className: styles$1.image },
3257
+ React.createElement(Image$2, __assign({}, img)))),
3258
+ React.createElement("div", { className: styles$1.content },
3259
+ React.createElement("span", { className: styles$1.heading }, title),
3260
+ React.createElement(VerticalSpace, { size: "8" }),
3261
+ text,
3262
+ buttonLabel && onClick && (React.createElement(React.Fragment, null,
3263
+ React.createElement(VerticalSpace, { size: "8" }),
3264
+ React.createElement("div", { className: styles$1.thumbnailButton },
3265
+ React.createElement("span", { className: styles$1.buttonIcon, role: "img", style: {
3266
+ height: 24,
3267
+ width: 24,
3268
+ maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
3269
+ WebkitMaskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
3270
+ } }),
3271
+ React.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
3272
+ };
3273
+
3274
+ var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-module_PromoListingThumbnailSignpost__0HTPV","list":"PromoListingThumbnailSignpost-module_list__E9l0E"};
3275
+
3276
+ /**
3277
+ * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
3278
+ */
3279
+ var PromoListingThumbnailSignpost = function (_a) {
3280
+ var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, props = __rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList"]);
3281
+ return (React.createElement("div", __assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs(props)),
3282
+ React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content }),
3283
+ React.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
3284
+ React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
3242
3285
  };
3243
3286
 
3244
- export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
3287
+ export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
3245
3288
  //# sourceMappingURL=index.mjs.map