@arc-ui/community-components 3.13.0 → 3.14.0

package/lib/ProductCardGrid/ProductCardGrid.mjs

@@ -0,0 +1,67 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
+import React__default, { useState, useRef, useId } from 'react';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
+import { Tabs, TabsList, TabsItem, TabsContent } from '@arc-ui/components/Tabs';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+import { Rule } from '@arc-ui/components/Rule';
+import { Align } from '@arc-ui/components/Align';
+import '../_shared/esm/index-BSO2EFem.mjs';
+import '@arc-ui/components/Text';
+import '@arc-ui/components/Image';
+import '@arc-ui/components/Heading';
+import '@arc-ui/components/Columns';
+
+var styles = {"cardGrid":"CardGrid-module_cardGrid__b6S6h","cardGridItem":"CardGrid-module_cardGridItem__xy0D3"};
+
+var CardGrid = function (_a) {
+    var cards = _a.cards, cardsRevealed = _a.cardsRevealed, fourthCardRef = _a.fourthCardRef, props = __rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("ul", __assign({ className: styles.cardGrid }, filterAttrs(props)), (cardsRevealed ? cards : cards.slice(0, 3)).map(function (card, index) { return (React__default.createElement("li", { key: "card-".concat(index), className: styles.cardGridItem, ref: index === 3 ? fourthCardRef : undefined, tabIndex: -1 }, card)); })),
+        React__default.createElement(VerticalSpace, { size: "24", sizeXL: "32" })));
+};
+
+var ProductCardGrid = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, heading = _a.heading, content = _a.content, headingLevel = _a.headingLevel, tabs = _a.tabs, _g = _a.expanded, expanded = _g === void 0 ? true : _g, _h = _a.hideTabs, hideTabs = _h === void 0 ? false : _h, props = __rest(_a, ["id", "isHeadingWordWrap", "heading", "content", "headingLevel", "tabs", "expanded", "hideTabs"]);
+    var _j = useState(expanded), cardsRevealed = _j[0], setCardsRevealed = _j[1];
+    var _k = useState((_b = tabs === null || tabs === void 0 ? void 0 : tabs[0]) === null || _b === void 0 ? void 0 : _b.value), activeTab = _k[0], setActiveTab = _k[1];
+    var fourthCardRef = useRef(null);
+    var cardContext = useId();
+    var activeCards = (_c = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.value === activeTab; })) === null || _c === void 0 ? void 0 : _c.cards;
+    var hasMoreCards = ((_d = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _d !== void 0 ? _d : 0) > 3;
+    var remainingCards = Math.max(((_e = activeCards === null || activeCards === void 0 ? void 0 : activeCards.length) !== null && _e !== void 0 ? _e : 0) - 3, 0);
+    var showMore = function () {
+        setCardsRevealed(true);
+        setTimeout(function () {
+            var _a;
+            (_a = fourthCardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    };
+    var showLess = function () {
+        setCardsRevealed(false);
+    };
+    return (React__default.createElement("div", __assign({}, filterAttrs(props)),
+        React__default.createElement(SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, headingLevel: headingLevel, isPadded: true }),
+        tabs && !hideTabs && (React__default.createElement(Tabs, { defaultValue: (_f = tabs[0]) === null || _f === void 0 ? void 0 : _f.value, onValueChange: function (value) {
+                setActiveTab(value);
+            } },
+            React__default.createElement(TabsList, { type: "standard" }, tabs.map(function (tab) { return (React__default.createElement(TabsItem, { key: tab.value, label: tab.label, value: tab.value, icon: tab.icon, iconActive: tab.iconActive })); })),
+            tabs.map(function (tab) { return (React__default.createElement(TabsContent, { key: tab.value, value: tab.value },
+                React__default.createElement(VerticalSpace, { size: "24", sizeL: "32" }),
+                React__default.createElement(CardGrid, { cards: tab.cards, cardsRevealed: cardsRevealed, fourthCardRef: tab.value === activeTab ? fourthCardRef : { current: null } }))); }))),
+        (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 && hideTabs && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(CardGrid, { cards: tabs[0].cards, cardsRevealed: cardsRevealed, fourthCardRef: fourthCardRef }))),
+        !expanded && hasMoreCards && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Rule, null),
+            React__default.createElement("span", { id: cardContext, style: { display: "none" } }, remainingCards === 1
+                ? "".concat(remainingCards, " card")
+                : "".concat(remainingCards, " cards")),
+            React__default.createElement(Align, { horizontal: "center" },
+                React__default.createElement(VerticalSpace, { size: "16" }),
+                !cardsRevealed && (React__default.createElement(ButtonV2, { label: "Show more", buttonStyle: "secondary", onClick: showMore, "aria-describedby": cardContext })),
+                cardsRevealed && (React__default.createElement(ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
+};
+
+export { ProductCardGrid };

package/lib/ProductNavigation/ProductNavigation.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
-var index_es = require('../_shared/cjs/index.es-DcJ01c8P.cjs');
+var index_es = require('../_shared/cjs/index.es-5qmN4ppJ.cjs');
 var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');
 var InformationCard = require('@arc-ui/components/InformationCard');

package/lib/ProductNavigation/ProductNavigation.mjs

@@ -3,7 +3,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
-import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { A as ArcSizeBreakpointsS } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';
 import { InformationCard } from '@arc-ui/components/InformationCard';

package/lib/PromoListing/PromoListing.cjs

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
-var index_es = require('../_shared/cjs/index.es-DcJ01c8P.cjs');
+var index_es = require('../_shared/cjs/index.es-5qmN4ppJ.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,7 +1,7 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default, { useId } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
-import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { a as ArcSizeBreakpointsL, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { Carousel } from '@arc-ui/components/Carousel';
 import { Heading } from '@arc-ui/components/Heading';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';

package/lib/Summary/Summary.cjs

@@ -2,7 +2,7 @@
 
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
-var index_es = require('../_shared/cjs/index.es-DcJ01c8P.cjs');
+var index_es = require('../_shared/cjs/index.es-5qmN4ppJ.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 } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default from 'react';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
 import { Box } from '@arc-ui/components/Box';

package/lib/VideoHeroCard/VideoHeroCard.cjs

@@ -4,7 +4,7 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.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-BM3GwyWR.cjs');
+var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-DhdbNf5c.cjs');
 var Heading = require('@arc-ui/components/Heading');
 var Icon = require('@arc-ui/components/Icon');
 var Text = require('@arc-ui/components/Text');
@@ -39,7 +39,7 @@ const BtIconClock =
 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 title = _a.title, label = _a.label, _b = _a.titleLevel, titleLevel = _b === void 0 ? "3" : _b, labelLevel = _a.labelLevel, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
     var id = React.useId();
     var metaItems = [
         { icon: BtIconCalendar, text: videoDate },
@@ -52,9 +52,9 @@ var VideoHeroCardContent = function (_a) {
     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(Heading.Heading, { level: labelLevel, fontStyle: "overline" }, label),
             React.createElement(VerticalSpace.VerticalSpace, { size: "8", sizeM: "4" }),
-            React.createElement(Heading.Heading, { level: "3", isWordWrap: false, size: "xl" }, title),
+            React.createElement(Heading.Heading, { level: titleLevel, isWordWrap: false, size: "xl" }, title),
             React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
             React.createElement(Text.Text, null, description)),
         hasMeta && (React.createElement(React.Fragment, null,

package/lib/VideoHeroCard/VideoHeroCard.mjs

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 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-K6eHIeAM.mjs';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-B8JS-s6O.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Icon } from '@arc-ui/components/Icon';
 import { Text } from '@arc-ui/components/Text';
@@ -37,7 +37,7 @@ const BtIconClock =
 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 title = _a.title, label = _a.label, _b = _a.titleLevel, titleLevel = _b === void 0 ? "3" : _b, labelLevel = _a.labelLevel, description = _a.description, videoDate = _a.videoDate, duration = _a.duration, background = _a.background, subtitleAvailabilityText = _a.subtitleAvailabilityText;
     var id = useId();
     var metaItems = [
         { icon: BtIconCalendar, text: videoDate },
@@ -50,9 +50,9 @@ var VideoHeroCardContent = function (_a) {
     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(Heading, { level: labelLevel, 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(Heading, { level: titleLevel, 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,

package/lib/VideoPortraitCard/VideoPortraitCard.cjs

@@ -5,7 +5,7 @@ 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-BM3GwyWR.cjs');
+var VideoCardThumbnail = require('../_shared/cjs/VideoCardThumbnail-DhdbNf5c.cjs');
 require('../_shared/cjs/index-B7Z7sgRq.cjs');
 require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 require('@arc-ui/components/Icon');
@@ -15,9 +15,9 @@ var VideoPortraitCard = function (_a) {
     var thumbnail = _a.thumbnail, player = _a.player, props = tslib_es6.__rest(_a, ["thumbnail", "player"]);
     return (React.createElement(VideoCardThumbnail.VideoCardPlayer, tslib_es6.__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(Heading.Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, 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)));
+                React.createElement(Heading.Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
 };
 
 exports.VideoPortraitCard = VideoPortraitCard;

package/lib/VideoPortraitCard/VideoPortraitCard.mjs

@@ -3,7 +3,7 @@ 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-K6eHIeAM.mjs';
+import { V as VideoCardPlayer, a as VideoCardThumbnail } from '../_shared/esm/VideoCardThumbnail-B8JS-s6O.mjs';
 import '../_shared/esm/index-BSO2EFem.mjs';
 import '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 import '@arc-ui/components/Icon';
@@ -13,9 +13,9 @@ 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(Heading, { fontStyle: "overline", level: thumbnail.labelLevel }, 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)));
+                React__default.createElement(Heading, { level: thumbnail.titleLevel, isWordWrap: false, size: "xs" }, thumbnail.title)))), orientation: "portrait", player: player, playIconSize: "s" }, props)));
 };
 
 export { VideoPortraitCard };

package/lib/_shared/cjs/{VideoCardThumbnail-BM3GwyWR.cjs → VideoCardThumbnail-DhdbNf5c.cjs}

@@ -421,12 +421,20 @@ var styles$1 = {"container":"VideoCardPlayer-module_container__G-Uta","player":"
 var VideoCardPlayer = function (_a) {
     var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = tslib_es6.__rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
     var _b = React.useState(false), isClient = _b[0], setIsClient = _b[1];
+    var playerWrapperRef = React.useRef(null);
     React.useEffect(function () {
         setIsClient(true);
     }, []);
-    var playerProps = tslib_es6.__assign(tslib_es6.__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%" });
+    var handleClickPreview = React.useCallback(function () {
+        // Restore focus to the player wrapper after preview is clicked.
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }, []);
+    var playerProps = tslib_es6.__assign(tslib_es6.__assign({}, player), { light: thumbnail, playIcon: React.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
     return (React.createElement("div", tslib_es6.__assign({ className: styles$1.container }, filterAttrs.filterAttrs(props)),
-        React.createElement("div", { "data-testid": "arc-video-card", className: index.classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(src_default, tslib_es6.__assign({}, playerProps))),
+        React.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: index.classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React.createElement(src_default, tslib_es6.__assign({}, playerProps))),
         children));
 };
 

package/lib/_shared/cjs/{index.es-DcJ01c8P.cjs → index.es-5qmN4ppJ.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 23 Jul 2026 08:25:27 GMT
+ * Generated on Thu, 20 Aug 2026 14:34:09 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/esm/{VideoCardThumbnail-K6eHIeAM.mjs → VideoCardThumbnail-B8JS-s6O.mjs}

@@ -419,12 +419,20 @@ var styles$1 = {"container":"VideoCardPlayer-module_container__G-Uta","player":"
 var VideoCardPlayer = function (_a) {
     var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
     var _b = useState(false), isClient = _b[0], setIsClient = _b[1];
+    var playerWrapperRef = useRef(null);
     useEffect(function () {
         setIsClient(true);
     }, []);
-    var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React__default.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%" });
+    var handleClickPreview = useCallback(function () {
+        // Restore focus to the player wrapper after preview is clicked.
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }, []);
+    var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React__default.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%", onClickPreview: handleClickPreview });
     return (React__default.createElement("div", __assign({ className: styles$1.container }, filterAttrs(props)),
-        React__default.createElement("div", { "data-testid": "arc-video-card", className: classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React__default.createElement(src_default, __assign({}, playerProps))),
+        React__default.createElement("div", { ref: playerWrapperRef, "data-testid": "arc-video-card", role: "button", tabIndex: -1, className: classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React__default.createElement(src_default, __assign({}, playerProps))),
         children));
 };
 

package/lib/_shared/esm/{index.es-C76rXaZz.mjs → index.es-Cis5MKaa.mjs}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 23 Jul 2026 08:25:27 GMT
+ * Generated on Thu, 20 Aug 2026 14:34:09 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";