@arc-ui/community-components 3.3.0 → 3.4.0

package/lib/ProductNavigation/ProductNavigation.mjs

@@ -1,9 +1,9 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-Bfdys5__.mjs';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
+import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-DraZ-qKh.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 import { InformationCard } from '@arc-ui/components/InformationCard';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -54,24 +54,24 @@ var ProductNavigation = function (_a) {
         }
     };
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
-    return (React.createElement("div", __assign({}, filterAttrs(props)),
-        React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
-        React.createElement("ul", { className: classNames(styles["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
+    return (React__default.createElement("div", __assign({}, filterAttrs(props)),
+        React__default.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "ProductNavigation-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content, image: image }),
+        React__default.createElement("ul", { className: classNames(styles["product-navigation-grid"]) }, displayList === null || displayList === void 0 ? void 0 : displayList.map(function (cardProps, i) {
             var _a;
-            return (React.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
-                React.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
+            return (React__default.createElement("li", { key: "displayList-".concat(i), tabIndex: -1, ref: i === skipLinkCard ? cardRef : undefined, "data-cy": "list-item-".concat(i) },
+                React__default.createElement(InformationCard, __assign({}, cardProps, { minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : cardProps.minHeight, headingLevel: (_a = cardProps.headingLevel) !== null && _a !== void 0 ? _a : "2" }))));
         })),
-        React.createElement(VerticalSpace, { size: "40" }),
-        React.createElement("div", { style: { display: "flex" } },
-            !hideButton && !hideLessButton && (React.createElement(ButtonV2, { label: displayList.length < productList.length
+        React__default.createElement(VerticalSpace, { size: "40" }),
+        React__default.createElement("div", { style: { display: "flex" } },
+            !hideButton && !hideLessButton && (React__default.createElement(ButtonV2, { label: displayList.length < productList.length
                     ? "Show more"
                     : "Show less", buttonStyle: "secondary", onClick: clickController, isFullWidth: isMinWidthArcBreakpointS ? false : true, isLoading: isLoading })),
-            displayList.length > cardsToDisplay && (React.createElement(React.Fragment, null,
-                React.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
-                    React.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
-            React.createElement(VisuallyHidden, null,
-                React.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
-                    React.createElement("p", null,
+            displayList.length > cardsToDisplay && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { id: "skip-link", className: classNames(styles["productNavigation-skipLink"]), tabIndex: -1 },
+                    React__default.createElement(ButtonV2, { label: "Move to first new card", buttonStyle: "primary", onClick: moveFocus, isFullWidth: isMinWidthArcBreakpointS ? false : true })))),
+            React__default.createElement(VisuallyHidden, null,
+                React__default.createElement("div", { "aria-live": "polite", id: "aria-live-region", "aria-atomic": true },
+                    React__default.createElement("p", null,
                         "Total products listed ",
                         displayList.length,
                         ". Total products hidden",

package/lib/PromoListing/PromoListing.cjs

@@ -3,7 +3,7 @@
 var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.cjs');
+var index_es = require('../_shared/cjs/index.es-B0J3cvrY.cjs');
 var Carousel = require('@arc-ui/components/Carousel');
 var Heading = require('@arc-ui/components/Heading');
 var useMediaQuery = require('@arc-ui/components/use-media-query');

package/lib/PromoListing/PromoListing.mjs

@@ -1,11 +1,11 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Bfdys5__.mjs';
+import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DraZ-qKh.mjs';
 import { Carousel } from '@arc-ui/components/Carousel';
 import { Heading } from '@arc-ui/components/Heading';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { ImpactCard } from '@arc-ui/components/ImpactCard';
 import { InformationCard } from '@arc-ui/components/InformationCard';
@@ -52,19 +52,19 @@ var PromoListing = function (_a) {
     };
     var getCard = function (card) {
         var CardComponent = CARD_COMPONENTS[card.type];
-        return React.createElement(CardComponent, __assign({}, card, commonProps));
+        return React__default.createElement(CardComponent, __assign({}, card, commonProps));
     };
-    return (React.createElement("div", __assign({ className: styles.PromoListing }, filterAttrs(props)),
-        overlineLabel && (React.createElement(React.Fragment, null,
-            React.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
-            React.createElement(VerticalSpace, { size: "12" }))),
-        React.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "PromoListing-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
-        button.label && (React.createElement(React.Fragment, null,
-            React.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
-            React.createElement(VerticalSpace, { size: "40" }))),
-        isCarousel && !isMinWidthArcBreakpointL ? (React.createElement("div", { className: styles.promolistingCarouselWrapper },
-            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.cardWrapperCarousel) }, getCard(card))); })))) : (React.createElement("ul", { className: classNames(styles.cardGrid, styles["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) },
-            React.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles.cardWrapper }, getCard(card)))); })))));
+    return (React__default.createElement("div", __assign({ className: styles.PromoListing }, filterAttrs(props)),
+        overlineLabel && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Heading, { level: overlineHeadingLevel, fontStyle: "overline" }, overlineLabel),
+            React__default.createElement(VerticalSpace, { size: "12" }))),
+        React__default.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "PromoListing-header", heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content }),
+        button.label && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ButtonV2, __assign({}, button, { icon: button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined, size: "m" })),
+            React__default.createElement(VerticalSpace, { size: "40" }))),
+        isCarousel && !isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: styles.promolistingCarouselWrapper },
+            React__default.createElement(Carousel, { overflow: "visible", itemsPerSlide: 1, behavior: "adaptive", withGutter: false }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, i) { return (React__default.createElement("div", { key: "promolist-carousel-card-".concat(componentId, "-").concat(i), className: (styles.cardWrapperCarousel) }, getCard(card))); })))) : (React__default.createElement("ul", { className: classNames(styles.cardGrid, styles["columns-".concat(columns)]) }, cards === null || cards === void 0 ? void 0 : cards.map(function (card, index) { return (React__default.createElement("li", { key: "promolist-card--".concat(componentId, "-").concat(index) },
+            React__default.createElement("div", { "data-testid": "promoList-card".concat(index), className: styles.cardWrapper }, getCard(card)))); })))));
 };
 
 export { PromoListing };

package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.cjs

@@ -17,9 +17,9 @@ var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-mod
  * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
  */
 var PromoListingThumbnailSignpost = function (_a) {
-    var _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, thumbnailList = _a.thumbnailList, props = filterAttrs.__rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList"]);
+    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 = filterAttrs.__rest(_a, ["isPadded", "heading", "content", "headingLevel", "thumbnailList", "isHeadingWordWrap"]);
     return (React.createElement("div", filterAttrs.__assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs.filterAttrs(props)),
-        React.createElement(SectionHeading.SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(SectionHeading.SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
         React.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
             React.createElement(ThumbnailSignpost.ThumbnailSignpost, filterAttrs.__assign({}, thumbnail)))); }))));
 };

package/lib/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.mjs

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
-import { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-DaZByYIH.mjs';
+import React__default from 'react';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
+import { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-CBSdQiHw.mjs';
 import '../_shared/esm/index-BfTCfPZ1.mjs';
 import '@arc-ui/components/Text';
 import '@arc-ui/components/VerticalSpace';
@@ -15,11 +15,11 @@ var styles = {"PromoListingThumbnailSignpost":"PromoListingThumbnailSignpost-mod
  * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
  */
 var PromoListingThumbnailSignpost = function (_a) {
-    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"]);
-    return (React.createElement("div", __assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs(props)),
-        React.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content }),
-        React.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React.createElement("li", { key: index },
-            React.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
+    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"]);
+    return (React__default.createElement("div", __assign({ className: styles.PromoListingThumbnailSignpost }, filterAttrs(props)),
+        React__default.createElement(SectionHeading, { isPadded: isPadded, "data-testid": "PromoListingThumbnailSignpost-header", heading: heading, headingLevel: headingLevel, content: content, isHeadingWordWrap: isHeadingWordWrap }),
+        React__default.createElement("ul", { className: styles.list }, thumbnailList.map(function (thumbnail, index) { return (React__default.createElement("li", { key: index },
+            React__default.createElement(ThumbnailSignpost, __assign({}, thumbnail)))); }))));
 };
 
 export { PromoListingThumbnailSignpost };

package/lib/Quote/Quote.mjs

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
+import React__default from 'react';
 import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { A as Author } from '../_shared/esm/Author-BVCRPgkl.mjs';
+import { A as Author } from '../_shared/esm/Author-CJQFrQM9.mjs';
 import '@arc-ui/components/Grid';
 import '@arc-ui/components/Avatar';
 import '@arc-ui/components/Heading';
@@ -13,12 +13,12 @@ var styles = {"blockQuote":"Quote-module_blockQuote__STj-z","quoteContent":"Quot
  * Use `Quote` where a quote or testimonial from an existing customer or stakeholder would help build trust and credibility with potential new customers. It's commonly used on product pages where customers would learn about a product or service that we offer.*/
 var Quote = function (_a) {
     var author = _a.author, _b = _a.styling, styling = _b === void 0 ? "Default" : _b, content = _a.content, citeUrl = _a.citeUrl, props = __rest(_a, ["author", "styling", "content", "citeUrl"]);
-    return (React.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
-        React.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
-            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
-                React.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
-            React.createElement("p", { className: styles.quoteContent }, content)),
-        author && React.createElement(Author, __assign({}, author))));
+    return (React__default.createElement("div", __assign({ className: "community-component--quote", "data-testid": "quote-test" }, filterAttrs(props)),
+        React__default.createElement("blockquote", { "data-testid": "style-test", className: classNames(styles.blockQuote, styles["quote".concat(styling)]), cite: citeUrl },
+            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 77", className: styles.quoteIcon, "aria-hidden": "true" },
+                React__default.createElement("path", { d: "M21.8085 76.4706C15.9574 76.4706 10.8156 74.2732 6.38298 69.8783C2.12766 65.4834 0 58.979 0 50.3651C0 40.5206 3.10284 31.1156 9.30851 22.1501C15.6915 13.1846 25.3546 5.80122 38.2979 0L44.1489 11.3387C37.4113 14.3272 31.7376 18.0189 27.1277 22.4138C22.5177 26.6329 19.6809 31.4672 18.617 36.9168C19.8582 36.741 21.0106 36.6531 22.0745 36.6531C27.7482 36.6531 32.4468 38.499 36.1702 42.1907C40.0709 45.8824 42.0213 50.7167 42.0213 56.6937C42.0213 62.4949 39.9823 67.2414 35.9043 70.9331C32.0035 74.6247 27.305 76.4706 21.8085 76.4706ZM77.6596 76.4706C71.8085 76.4706 66.6667 74.2732 62.234 69.8783C57.9787 65.4834 55.8511 58.979 55.8511 50.3651C55.8511 40.5206 58.9539 31.1156 65.1596 22.1501C71.5425 13.1846 81.2057 5.80122 94.1489 0L100 11.3387C93.2624 14.3272 87.5886 18.0189 82.9787 22.4138C78.3688 26.6329 75.5319 31.4672 74.4681 36.9168C75.7092 36.741 76.8617 36.6531 77.9255 36.6531C83.5993 36.6531 88.2979 38.499 92.0213 42.1907C95.922 45.8824 97.8723 50.7167 97.8723 56.6937C97.8723 62.4949 95.8333 67.2414 91.7553 70.9331C87.8546 74.6247 83.156 76.4706 77.6596 76.4706Z" })),
+            React__default.createElement("p", { className: styles.quoteContent }, content)),
+        author && React__default.createElement(Author, __assign({}, author))));
 };
 
 export { Quote };

package/lib/SectionHeading/SectionHeading.mjs

@@ -1,4 +1,4 @@
-export { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
+export { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
 import '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
 import 'react';
 import '../_shared/esm/index-BfTCfPZ1.mjs';

package/lib/Statistics/Statistics.mjs

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { Rule } from '@arc-ui/components/Rule';
 import { Text } from '@arc-ui/components/Text';
@@ -7,7 +7,7 @@ import { Align } from '@arc-ui/components/Align';
 import { Heading } from '@arc-ui/components/Heading';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
 import { Hidden } from '@arc-ui/components/Hidden';
-import { S as SectionHeading } from '../_shared/esm/SectionHeading-DZOg_gYi.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-BskdQ2Tt.mjs';
 import '../_shared/esm/index-BfTCfPZ1.mjs';
 import '@arc-ui/components/Image';
 
@@ -25,36 +25,36 @@ var getLinkProps = function (link) {
 var Statistics = function (_a) {
     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"]);
     var componentId = useId();
-    return (React.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
-        React.createElement(ColumnsCol, { spanM: 9 },
-            React.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
-        React.createElement(ColumnsCol, { spanL: 9 },
-            React.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
+    return (React__default.createElement(Columns, __assign({ isGutterless: true }, filterAttrs(props)),
+        React__default.createElement(ColumnsCol, { spanM: 9 },
+            React__default.createElement(SectionHeading, { id: id, heading: heading, isHeadingWordWrap: isHeadingWordWrap, headingLevel: headingLevel, content: content })),
+        React__default.createElement(ColumnsCol, { spanL: 9 },
+            React__default.createElement("ul", { className: styles.list }, statistics.map(function (_a, i) {
                 var stat = _a.stat, copy = _a.copy, link = _a.link, source = _a.source, sourceUrl = _a.sourceUrl;
-                return (React.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
-                    i !== 0 && (React.createElement(React.Fragment, null,
-                        React.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }),
-                        React.createElement(Rule, null),
-                        React.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
-                    React.createElement(Columns, null,
-                        React.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
-                            React.createElement(Align, { vertical: "center" },
-                                React.createElement("div", { className: styles.statWrapper },
-                                    React.createElement(Heading, { color: "brand", size: "xxl" }, stat),
-                                    React.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
-                                        React.createElement(VerticalSpace, { size: "12" }))))),
-                        React.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
-                            React.createElement(Align, { vertical: "center" },
-                                React.createElement(Text, null, copy),
-                                link && (React.createElement(React.Fragment, null,
-                                    React.createElement(VerticalSpace, { size: "12" }),
-                                    React.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
-                                source && (React.createElement(React.Fragment, null,
-                                    React.createElement(VerticalSpace, { size: "12" }),
-                                    React.createElement(Text, { size: "xs" },
-                                        React.createElement("span", { className: styles.mutedText }, source)))),
-                                sourceUrl && (React.createElement(Text, { size: "xs" },
-                                    React.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl))))))));
+                return (React__default.createElement("li", { key: "statistic-".concat(componentId, "-").concat(i) },
+                    i !== 0 && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }),
+                        React__default.createElement(Rule, null),
+                        React__default.createElement(VerticalSpace, { size: "24", sizeS: "32", sizeXL: "40" }))),
+                    React__default.createElement(Columns, null,
+                        React__default.createElement(ColumnsCol, { spanS: 6, spanM: 8 },
+                            React__default.createElement(Align, { vertical: "center" },
+                                React__default.createElement("div", { className: styles.statWrapper },
+                                    React__default.createElement(Heading, { color: "brand", size: "xxl" }, stat),
+                                    React__default.createElement(Hidden, { s: true, m: true, l: true, xl: true, xxl: true },
+                                        React__default.createElement(VerticalSpace, { size: "12" }))))),
+                        React__default.createElement(ColumnsCol, { spanS: 6, spanM: 4 },
+                            React__default.createElement(Align, { vertical: "center" },
+                                React__default.createElement(Text, null, copy),
+                                link && (React__default.createElement(React__default.Fragment, null,
+                                    React__default.createElement(VerticalSpace, { size: "12" }),
+                                    React__default.createElement("a", __assign({ href: link.href, "aria-label": link.ariaLabel }, getLinkProps(link)), link.text))),
+                                source && (React__default.createElement(React__default.Fragment, null,
+                                    React__default.createElement(VerticalSpace, { size: "12" }),
+                                    React__default.createElement(Text, { size: "xs" },
+                                        React__default.createElement("span", { className: styles.mutedText }, source)))),
+                                sourceUrl && (React__default.createElement(Text, { size: "xs" },
+                                    React__default.createElement("a", { className: styles.mutedText, href: sourceUrl }, sourceUrl))))))));
             })))));
 };
 

package/lib/Summary/Summary.cjs

@@ -2,7 +2,7 @@
 
 var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
 var React = require('react');
-var index_es = require('../_shared/cjs/index.es-Dq8bYrbW.cjs');
+var index_es = require('../_shared/cjs/index.es-B0J3cvrY.cjs');
 var Heading = require('@arc-ui/components/Heading');
 var Text = require('@arc-ui/components/Text');
 var Box = require('@arc-ui/components/Box');

package/lib/Summary/Summary.mjs

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Bfdys5__.mjs';
+import React__default from 'react';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-DraZ-qKh.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { Box } from '@arc-ui/components/Box';
@@ -13,16 +13,16 @@ var styles = {"ruleContainer":"Summary-module_ruleContainer__ydWlG","row":"Summa
 var Summary = function (_a) {
     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"]);
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
-    return (React.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
-        React.createElement("div", { className: styles.row }, content.map(function (_a, i) {
+    return (React__default.createElement(Box, __assign({ isBorderRadius: true }, (!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" }), { padding: "24" }, filterAttrs(props)),
+        React__default.createElement("div", { className: styles.row }, content.map(function (_a, i) {
             var heading = _a.heading, text = _a.text;
-            return (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: styles.col },
-                    React.createElement(Heading, { size: "s", level: headingLevel }, heading),
-                    React.createElement(VerticalSpace, { size: "8" }),
-                    React.createElement(Text, { size: "s" }, text)),
-                i !== content.length - 1 && (React.createElement("div", { className: styles.ruleContainer },
-                    React.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: styles.col },
+                    React__default.createElement(Heading, { size: "s", level: headingLevel }, heading),
+                    React__default.createElement(VerticalSpace, { size: "8" }),
+                    React__default.createElement(Text, { size: "s" }, text)),
+                i !== content.length - 1 && (React__default.createElement("div", { className: styles.ruleContainer },
+                    React__default.createElement(Rule, { orientation: isMinWidthArcBreakpointM ? "vertical" : "horizontal" })))));
         }))));
 };
 

package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs

@@ -1,4 +1,4 @@
-export { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-DaZByYIH.mjs';
+export { T as ThumbnailSignpost } from '../_shared/esm/ThumbnailSignpost-CBSdQiHw.mjs';
 import '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
 import 'react';
 import '../_shared/esm/index-BfTCfPZ1.mjs';

package/lib/VideoHeroCard/VideoHeroCard.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
+var React = require('react');
+var Visible = require('@arc-ui/components/Visible');
+var Spacing = require('@arc-ui/components/Spacing');
+var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-BqYgpk0u.cjs');
+var Heading = require('@arc-ui/components/Heading');
+var Icon = require('@arc-ui/components/Icon');
+var Text = require('@arc-ui/components/Text');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCalendar =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M27 7h-2V4.5a.5.5 0 0 0-1 0V7H8V4.5a.5.5 0 0 0-1 0V7H5a1.003 1.003 0 0 0-1 1v19a1.003 1.003 0 0 0 1 1h22a1.003 1.003 0 0 0 1-1V8a1.003 1.003 0 0 0-1-1M7 8v.5a.5.5 0 0 0 1 0V8h16v.5a.5.5 0 0 0 1 0V8h2v4H5V8ZM5 27V13h22v14Z'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChatMessage =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 7c7.168 0 13 4.037 13 9a7.79 7.79 0 0 1-3.59 6.184l-.41.3v4.511l-4.535-2.308-.316-.16-.346.073A18.3 18.3 0 0 1 16 25c-7.168 0-13-4.037-13-9s5.832-9 13-9m0-1C8.268 6 2 10.477 2 16s6.268 10 14 10a19.2 19.2 0 0 0 4.012-.422l4.613 2.348A.998.998 0 0 0 26 27v-4.007A8.79 8.79 0 0 0 30 16c0-5.523-6.268-10-14-10'/%3e%3cpath d='M23.5 12h-15a.5.5 0 0 1 0-1h15a.5.5 0 0 1 0 1M25.5 15h-19a.5.5 0 0 1 0-1h19a.5.5 0 0 1 0 1M25.5 18h-19a.5.5 0 0 1 0-1h19a.5.5 0 0 1 0 1M15.5 21h-7a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconClock =
+  "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";
+
+var styles = {"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"};
+
+var VideoHeroCardContent = function (_a) {
+    var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
+    var id = React.useId();
+    var metaItems = [
+        { icon: BtIconCalendar, text: videoDate },
+        { icon: BtIconClock, text: duration },
+        {
+            icon: BtIconChatMessage,
+            text: subtitleAvailabilityText,
+        },
+    ];
+    var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
+    return (React.createElement("div", { className: styles["".concat(background, "Background")] },
+        React.createElement("div", { className: index.classNames(styles.mainText, styles["mainText--".concat(background, "Background")]) },
+            React.createElement(Heading.Heading, { fontStyle: "overline" }, label),
+            React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
+            React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xl" }, title),
+            React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+            React.createElement(Text.Text, null, description)),
+        hasMeta && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "32", sizeS: "16" }),
+            React.createElement("div", { className: index.classNames(styles.statContainer, styles["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
+                return meta.text && (React.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles.stat },
+                    React.createElement(Icon.Icon, { icon: meta.icon, size: 20 }),
+                    React.createElement(Text.Text, { size: "xs" }, meta.text)));
+            }))))));
+};
+
+var VideoHeroCard = function (_a) {
+    var content = _a.content, thumbnailImg = _a.thumbnailImg, player = _a.player, props = filterAttrs.__rest(_a, ["content", "thumbnailImg", "player"]);
+    return (React.createElement(VideoCardThumbnail.VideoCardPlayer, filterAttrs.__assign({ thumbnail: React.createElement(VideoCardThumbnail.VideoCardThumbnail, { src: thumbnailImg, orientation: "landscape", contentVisibility: { l: true, xl: true, xxl: true } },
+            React.createElement(VideoHeroCardContent, filterAttrs.__assign({}, content, { background: "dark" }))), orientation: "landscape", playIconSize: "l", player: player }, props), content && (React.createElement(Visible.Visible, { xs: true, s: true, m: true },
+        React.createElement(Spacing.Spacing, { all: { xs: "16", s: "32" } },
+            React.createElement(VideoHeroCardContent, filterAttrs.__assign({}, content, { background: "light" })))))));
+};
+
+exports.VideoHeroCard = VideoHeroCard;

package/lib/VideoHeroCard/VideoHeroCard.mjs

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
+import React__default, { useId } from 'react';
+import { Visible } from '@arc-ui/components/Visible';
+import { Spacing } from '@arc-ui/components/Spacing';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-VfOKmPCv.mjs';
+import { Heading } from '@arc-ui/components/Heading';
+import { Icon } from '@arc-ui/components/Icon';
+import { Text } from '@arc-ui/components/Text';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconCalendar =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M27 7h-2V4.5a.5.5 0 0 0-1 0V7H8V4.5a.5.5 0 0 0-1 0V7H5a1.003 1.003 0 0 0-1 1v19a1.003 1.003 0 0 0 1 1h22a1.003 1.003 0 0 0 1-1V8a1.003 1.003 0 0 0-1-1M7 8v.5a.5.5 0 0 0 1 0V8h16v.5a.5.5 0 0 0 1 0V8h2v4H5V8ZM5 27V13h22v14Z'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChatMessage =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 7c7.168 0 13 4.037 13 9a7.79 7.79 0 0 1-3.59 6.184l-.41.3v4.511l-4.535-2.308-.316-.16-.346.073A18.3 18.3 0 0 1 16 25c-7.168 0-13-4.037-13-9s5.832-9 13-9m0-1C8.268 6 2 10.477 2 16s6.268 10 14 10a19.2 19.2 0 0 0 4.012-.422l4.613 2.348A.998.998 0 0 0 26 27v-4.007A8.79 8.79 0 0 0 30 16c0-5.523-6.268-10-14-10'/%3e%3cpath d='M23.5 12h-15a.5.5 0 0 1 0-1h15a.5.5 0 0 1 0 1M25.5 15h-19a.5.5 0 0 1 0-1h19a.5.5 0 0 1 0 1M25.5 18h-19a.5.5 0 0 1 0-1h19a.5.5 0 0 1 0 1M15.5 21h-7a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1'/%3e%3c/svg%3e";
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconClock =
+  "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";
+
+var styles = {"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"};
+
+var VideoHeroCardContent = function (_a) {
+    var title = _a.title, label = _a.label, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
+    var id = useId();
+    var metaItems = [
+        { icon: BtIconCalendar, text: videoDate },
+        { icon: BtIconClock, text: duration },
+        {
+            icon: BtIconChatMessage,
+            text: subtitleAvailabilityText,
+        },
+    ];
+    var hasMeta = metaItems.some(function (meta) { return Boolean(meta.text); });
+    return (React__default.createElement("div", { className: styles["".concat(background, "Background")] },
+        React__default.createElement("div", { className: classNames(styles.mainText, styles["mainText--".concat(background, "Background")]) },
+            React__default.createElement(Heading, { fontStyle: "overline" }, label),
+            React__default.createElement(VerticalSpace, { size: "8", sizeM: "4" }),
+            React__default.createElement(Heading, { level: "3", isWordWrap: false, size: "xl" }, title),
+            React__default.createElement(VerticalSpace, { size: "16" }),
+            React__default.createElement(Text, null, description)),
+        hasMeta && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(VerticalSpace, { size: "32", sizeS: "16" }),
+            React__default.createElement("div", { className: classNames(styles.statContainer, styles["statContainer--".concat(background, "Background")]) }, metaItems.map(function (meta, i) {
+                return meta.text && (React__default.createElement("div", { key: "".concat(id, "-stat-").concat(i), className: styles.stat },
+                    React__default.createElement(Icon, { icon: meta.icon, size: 20 }),
+                    React__default.createElement(Text, { size: "xs" }, meta.text)));
+            }))))));
+};
+
+var VideoHeroCard = function (_a) {
+    var content = _a.content, thumbnailImg = _a.thumbnailImg, player = _a.player, props = __rest(_a, ["content", "thumbnailImg", "player"]);
+    return (React__default.createElement(VideoCardPlayer, __assign({ thumbnail: React__default.createElement(VideoCardThumbnail, { src: thumbnailImg, orientation: "landscape", contentVisibility: { l: true, xl: true, xxl: true } },
+            React__default.createElement(VideoHeroCardContent, __assign({}, content, { background: "dark" }))), orientation: "landscape", playIconSize: "l", player: player }, props), content && (React__default.createElement(Visible, { xs: true, s: true, m: true },
+        React__default.createElement(Spacing, { all: { xs: "16", s: "32" } },
+            React__default.createElement(VideoHeroCardContent, __assign({}, content, { background: "light" })))))));
+};
+
+export { VideoHeroCard };

package/lib/VideoPortraitCard/VideoPortraitCard.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-C26zOt4_.cjs');
+var React = require('react');
+var Heading = require('@arc-ui/components/Heading');
+var Surface = require('@arc-ui/components/Surface');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-BqYgpk0u.cjs');
+require('../_shared/cjs/index-Bp6Dd2i1.cjs');
+require('@arc-ui/components/Icon');
+require('@arc-ui/components/Visible');
+
+var VideoPortraitCard = function (_a) {
+    var thumbnail = _a.thumbnail, player = _a.player, props = filterAttrs.__rest(_a, ["thumbnail", "player"]);
+    return (React.createElement(VideoCardThumbnail.VideoCardPlayer, filterAttrs.__assign({ thumbnail: thumbnail && (React.createElement(VideoCardThumbnail.VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
+            React.createElement(Surface.Surface, { isTransparent: true, background: "dark-black" },
+                React.createElement(Heading.Heading, { fontStyle: "overline" }, thumbnail.label),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
+                React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
+};
+
+exports.VideoPortraitCard = VideoPortraitCard;

package/lib/VideoPortraitCard/VideoPortraitCard.mjs

@@ -0,0 +1,20 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/filter-attrs-D-1kWaCP.mjs';
+import React__default from 'react';
+import { Heading } from '@arc-ui/components/Heading';
+import { Surface } from '@arc-ui/components/Surface';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-VfOKmPCv.mjs';
+import '../_shared/esm/index-BfTCfPZ1.mjs';
+import '@arc-ui/components/Icon';
+import '@arc-ui/components/Visible';
+
+var VideoPortraitCard = function (_a) {
+    var thumbnail = _a.thumbnail, player = _a.player, props = __rest(_a, ["thumbnail", "player"]);
+    return (React__default.createElement(VideoCardPlayer, __assign({ thumbnail: thumbnail && (React__default.createElement(VideoCardThumbnail, { orientation: "portrait", src: thumbnail.img },
+            React__default.createElement(Surface, { isTransparent: true, background: "dark-black" },
+                React__default.createElement(Heading, { fontStyle: "overline" }, thumbnail.label),
+                React__default.createElement(VerticalSpace, { size: "8" }),
+                React__default.createElement(Heading, { level: "3", isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
+};
+
+export { VideoPortraitCard };