@arc-ui/community-components 3.13.0 → 3.14.0

package/.turbo/turbo-build.log

@@ -1,47 +1,49 @@
 
-> @arc-ui/community-components@3.13.0 build /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.14.0 build /builds/enterprise/frontend/arc-community/packages/components
 > rimraf lib dist && rollup -c && generate-subpath-css && pnpm run build:clean
 
-Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 12 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
 src/index.ts → lib/index.cjs, lib/index.mjs...
-created lib/index.cjs, lib/index.mjs in 12.7s
+created lib/index.cjs, lib/index.mjs in 7.5s
 
 ./lib/types/index.d.ts → lib/index.d.mts, lib/index.d.cts...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
-@arc-ui/components/MediaCard (imported by "lib/types/components/ArticleCarousel/ArticleCarousel.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
-@arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.d.ts")
 @arc-ui/components/NavigationHeader (imported by "lib/types/components/HeaderBarNotification/HeaderBarNotification.d.ts")
-@arc-ui/components/Heading (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
-@arc-ui/components/VideoPlayer (imported by "lib/types/components/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.d.ts")
 @arc-ui/components/Download (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
-@arc-ui/components/ButtonV2 (imported by "lib/types/components/Highlights/Highlights.d.ts" and "lib/types/components/PromoListing/PromoListing.d.ts")
+@arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.d.ts")
+@arc-ui/components/MediaCard (imported by "lib/types/components/ArticleCarousel/ArticleCarousel.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
+@arc-ui/components/Heading (imported by "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/VideoPortraitCard/VideoPortraitCard.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/ProductCard/ProductCard.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts", "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts", "lib/types/components/ProductCard/ProductCardBenefits/ProductCardBenefits.d.ts", "lib/types/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.d.ts" and "lib/types/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.d.ts")
+@arc-ui/components/VideoPlayer (imported by "lib/types/components/FeaturePost/FeaturePost.d.ts" and "lib/types/components/CopyLead/CopyLead.d.ts")
+@arc-ui/components/ButtonV2 (imported by "lib/types/components/Highlights/Highlights.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/ProductCard/ProductCard.d.ts")
 @arc-ui/components/ImpactCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts")
 @arc-ui/components/InformationCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts" and "lib/types/components/ProductNavigation/types/product-list.d.ts")
 @arc-ui/components/TypographyCard (imported by "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
 @arc-ui/components/TemplateBanner (imported by "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts")
 @arc-ui/components/Image (imported by "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/ThumbnailSignpost/ThumbnailSignpost.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/CopyLead/types/copy-lead-image.d.ts" and "lib/types/components/FeaturePost/types/feature-post-image.d.ts")
 @arc-ui/components/VerticalSpace (imported by "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts")
+@arc-ui/components/Surface (imported by "lib/types/components/ProductCard/ProductCard.d.ts")
+@arc-ui/components/Tabs (imported by "lib/types/components/ProductCardGrid/ProductCardGrid.d.ts")
 @arc-ui/components/Disclosure (imported by "lib/types/components/Accordion/components/AccordionDisclosureList/AccordionDisclosureList.d.ts")
 @arc-ui/components/Tag (imported by "lib/types/components/ArticleSidebar/types/topic.d.ts")
 @arc-ui/components/AppButton (imported by "lib/types/components/FeaturePost/types/feature-post-app-button-footer.d.ts")
-@arc-ui/components/Button (imported by "lib/types/components/CopyLead/types/copy-lead-button.d.ts" and "lib/types/components/FeaturePost/types/feature-post-cta-footer.d.ts")
+@arc-ui/components/Button (imported by "lib/types/components/FeaturePost/types/feature-post-cta-footer.d.ts" and "lib/types/components/CopyLead/types/copy-lead-button.d.ts")
 react-player/types (imported by "lib/types/internal/VideoCardPlayer/VideoCardPlayer.d.ts" and "lib/types/internal/VideoCardPlayer/types/player-props.d.ts")
 @arc-ui/components/Visible (imported by "lib/types/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.d.ts")
-created lib/index.d.mts, lib/index.d.cts in 276ms
+created lib/index.d.mts, lib/index.d.cts in 223ms
 
-./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 16.9s
+./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductCard/index.ts, ./src/components/ProductCardGrid/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
+created lib in 9.1s
 
-./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
-created lib in 16.2s
-Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
+./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductCard/index.ts, ./src/components/ProductCardGrid/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts → lib...
+created lib in 8s
+Browserslist: browsers data (caniuse-lite) is 12 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
-> @arc-ui/community-components@3.13.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.14.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
 > rimraf ./lib/types ./lib/styles.js ./lib/index.js ./lib/index.js.map
 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @arc-ui/community-components
 
+## 3.14.0
+
+### Minor Changes
+
+- a9440d2: feat: added isImplied property to InlineLinkGroup
+- 3287177: feat: Add new ProductCard and ProductCardGrid components with ProductCardPrice, ProductCardIncrease and ProductCardBenefits subcomponents
+
+### Patch Changes
+
+- 06c7127: fix: update videocards to improve heading accessibility
+
+## 3.13.1
+
+### Patch Changes
+
+- 8978dfe: Add support for URL prop
+- 8978dfe: Add optional URL prop to ArticleSidebar
+
 ## 3.13.0
 
 ### Minor Changes

package/lib/ArticleCarousel/ArticleCarousel.cjs

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

package/lib/ArticleCarousel/ArticleCarousel.mjs

@@ -4,7 +4,7 @@ import { a as commonjsGlobal, g as getDefaultExportFromCjs, c as classNames } fr
 import { Carousel } from '@arc-ui/components/Carousel';
 import { S as SectionHeading } from '../_shared/esm/SectionHeading-lyXLUtdr.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { d as ArcSizeBreakpointsXs, A as ArcSizeBreakpointsS, b as ArcSizeBreakpointsM, a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, e as ArcSizeBreakpointsXxl } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { d as ArcSizeBreakpointsXs, A as ArcSizeBreakpointsS, b as ArcSizeBreakpointsM, a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, e as ArcSizeBreakpointsXxl } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import '@arc-ui/components/Text';

package/lib/ArticleSidebar/ArticleSidebar.cjs

@@ -55,10 +55,15 @@ var styles = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent":"
  */
 var ArticleSidebar = function (_a) {
     var _b;
-    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, props = tslib_es6.__rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection"]);
+    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, providedUrl = _a.url, props = tslib_es6.__rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection", "url"]);
     var id = React.useId();
     var _c = React.useState(false), showToast = _c[0], setShowToast = _c[1];
-    var url = location.href;
+    var _d = React.useState(""), clientUrl = _d[0], setClientUrl = _d[1];
+    React.useEffect(function () {
+        if (!providedUrl)
+            setClientUrl(window.location.href);
+    }, [providedUrl]);
+    var url = providedUrl !== null && providedUrl !== void 0 ? providedUrl : clientUrl;
     var copyTextToClipBoard = function () { return tslib_es6.__awaiter(void 0, void 0, void 0, function () {
         return tslib_es6.__generator(this, function (_a) {
             switch (_a.label) {
@@ -79,14 +84,14 @@ var ArticleSidebar = function (_a) {
                 ariaLabel: share.clipboardAriaLabel || "Copy url to clipboard",
             },
             {
-                href: "mailto:?subject=".concat(share.articleTitle, "&body=").concat(url),
+                href: "mailto:?subject=".concat(encodeURIComponent(share.articleTitle), "&body=").concat(encodeURIComponent(url)),
                 icon: BtIconEmailUnread,
                 ariaLabel: share.emailAriaLabel || "Share by email",
             }
         ], (share.linkedin
             ? [
                 {
-                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(url),
+                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialLinkedin,
                     ariaLabel: share.linkedInAriaLabel || "Share on LinkedIn",
                 },
@@ -94,14 +99,15 @@ var ArticleSidebar = function (_a) {
             : []), true), (share.x
             ? [
                 {
-                    href: "https://twitter.com/intent/tweet?url=".concat(url),
+                    href: "https://twitter.com/intent/tweet?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialX,
                     ariaLabel: share.xAriaLabel || "Share on x",
                 },
             ]
             : []), true) : [];
     var hasTopContent = Boolean(author || aboutSection || additionalContent);
-    var hasBottomContent = Boolean(linkSection || topics || share);
+    var showShare = share && url;
+    var hasBottomContent = Boolean(linkSection || topics || showShare);
     return (React.createElement("div", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: index.classNames((_b = {},
                 _b[styles.textContent] = hasTopContent,
@@ -129,9 +135,9 @@ var ArticleSidebar = function (_a) {
             React.createElement(Heading.Heading, { level: linkSection.headingLevel }, linkSection.heading),
             linkSection.links.map(function (_a) {
                 var text = _a.text, url = _a.url, ariaLabel = _a.ariaLabel;
-                return (React.createElement(React.Fragment, null,
+                return (React.createElement(React.Fragment, { key: "".concat(id, "-").concat(url) },
                     React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
-                    React.createElement("div", { key: "".concat(id, "-").concat(url) },
+                    React.createElement("div", null,
                         React.createElement(Link.Link, { "aria-label": ariaLabel, size: "s", href: url }, text))));
             }))),
         topics && (React.createElement(React.Fragment, null,
@@ -139,7 +145,7 @@ var ArticleSidebar = function (_a) {
             React.createElement(Heading.Heading, { level: topics.headingLevel }, topics.heading),
             React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
             React.createElement("div", { className: styles.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag.Tag, tslib_es6.__assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
-        share && (React.createElement(React.Fragment, null,
+        showShare && (React.createElement(React.Fragment, null,
             (linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
                 React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
                 React.createElement(Rule.Rule, null),

package/lib/ArticleSidebar/ArticleSidebar.mjs

@@ -1,5 +1,5 @@
 import { _ as __rest, b as __spreadArray, a as __assign, c as __awaiter, d as __generator } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
-import React__default, { useId, useState } from 'react';
+import React__default, { useId, useState, useEffect } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Icon } from '@arc-ui/components/Icon';
@@ -53,10 +53,15 @@ var styles = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent":"
  */
 var ArticleSidebar = function (_a) {
     var _b;
-    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"]);
+    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, providedUrl = _a.url, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection", "url"]);
     var id = useId();
     var _c = useState(false), showToast = _c[0], setShowToast = _c[1];
-    var url = location.href;
+    var _d = useState(""), clientUrl = _d[0], setClientUrl = _d[1];
+    useEffect(function () {
+        if (!providedUrl)
+            setClientUrl(window.location.href);
+    }, [providedUrl]);
+    var url = providedUrl !== null && providedUrl !== void 0 ? providedUrl : clientUrl;
     var copyTextToClipBoard = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -77,14 +82,14 @@ var ArticleSidebar = function (_a) {
                 ariaLabel: share.clipboardAriaLabel || "Copy url to clipboard",
             },
             {
-                href: "mailto:?subject=".concat(share.articleTitle, "&body=").concat(url),
+                href: "mailto:?subject=".concat(encodeURIComponent(share.articleTitle), "&body=").concat(encodeURIComponent(url)),
                 icon: BtIconEmailUnread,
                 ariaLabel: share.emailAriaLabel || "Share by email",
             }
         ], (share.linkedin
             ? [
                 {
-                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(url),
+                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialLinkedin,
                     ariaLabel: share.linkedInAriaLabel || "Share on LinkedIn",
                 },
@@ -92,14 +97,15 @@ var ArticleSidebar = function (_a) {
             : []), true), (share.x
             ? [
                 {
-                    href: "https://twitter.com/intent/tweet?url=".concat(url),
+                    href: "https://twitter.com/intent/tweet?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialX,
                     ariaLabel: share.xAriaLabel || "Share on x",
                 },
             ]
             : []), true) : [];
     var hasTopContent = Boolean(author || aboutSection || additionalContent);
-    var hasBottomContent = Boolean(linkSection || topics || share);
+    var showShare = share && url;
+    var hasBottomContent = Boolean(linkSection || topics || showShare);
     return (React__default.createElement("div", __assign({}, filterAttrs(props)),
         React__default.createElement("div", { className: classNames((_b = {},
                 _b[styles.textContent] = hasTopContent,
@@ -127,9 +133,9 @@ var ArticleSidebar = function (_a) {
             React__default.createElement(Heading, { level: linkSection.headingLevel }, linkSection.heading),
             linkSection.links.map(function (_a) {
                 var text = _a.text, url = _a.url, ariaLabel = _a.ariaLabel;
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(React__default.Fragment, { key: "".concat(id, "-").concat(url) },
                     React__default.createElement(VerticalSpace, { size: "8" }),
-                    React__default.createElement("div", { key: "".concat(id, "-").concat(url) },
+                    React__default.createElement("div", null,
                         React__default.createElement(Link, { "aria-label": ariaLabel, size: "s", href: url }, text))));
             }))),
         topics && (React__default.createElement(React__default.Fragment, null,
@@ -137,7 +143,7 @@ var ArticleSidebar = function (_a) {
             React__default.createElement(Heading, { level: topics.headingLevel }, topics.heading),
             React__default.createElement(VerticalSpace, { size: "16" }),
             React__default.createElement("div", { className: styles.tagGroup }, topics.tags.map(function (tag) { return (React__default.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
-        share && (React__default.createElement(React__default.Fragment, null,
+        showShare && (React__default.createElement(React__default.Fragment, null,
             (linkSection || topics) && (React__default.createElement("div", { "data-testid": "links-topics-content-rule" },
                 React__default.createElement(VerticalSpace, { size: "32" }),
                 React__default.createElement(Rule, null),

package/lib/CopyLead/CopyLead.cjs

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
-var index_es = require('../_shared/cjs/index.es-DcJ01c8P.cjs');
+var index_es = require('../_shared/cjs/index.es-5qmN4ppJ.cjs');
 var Columns = require('@arc-ui/components/Columns');
 var useMediaQuery = require('@arc-ui/components/use-media-query');
 var Heading = require('@arc-ui/components/Heading');

package/lib/CopyLead/CopyLead.mjs

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
 import React__default, { useState, useEffect, Suspense } from 'react';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { a as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl, b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { Columns, ColumnsCol } from '@arc-ui/components/Columns';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import { Heading } from '@arc-ui/components/Heading';

package/lib/FeaturePost/FeaturePost.cjs

@@ -4,7 +4,7 @@ var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
 var React = require('react');
 var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
 var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
-var index_es = require('../_shared/cjs/index.es-DcJ01c8P.cjs');
+var index_es = require('../_shared/cjs/index.es-5qmN4ppJ.cjs');
 var AppButton = require('@arc-ui/components/AppButton');
 var Grid = require('@arc-ui/components/Grid');
 var ButtonV2 = require('@arc-ui/components/ButtonV2');

package/lib/FeaturePost/FeaturePost.mjs

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mj
 import React__default, { useState, useEffect, Suspense } from 'react';
 import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
-import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-C76rXaZz.mjs';
+import { b as ArcSizeBreakpointsM } from '../_shared/esm/index.es-Cis5MKaa.mjs';
 import { AppButton } from '@arc-ui/components/AppButton';
 import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
 import { ButtonV2 } from '@arc-ui/components/ButtonV2';

package/lib/InlineLinkGroup/InlineLinkGroup.cjs

@@ -11,13 +11,13 @@ var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
 var styles = {"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"};
 
 var InlineLinkGroup = function (_a) {
-    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = tslib_es6.__rest(_a, ["label", "headingLevel", "links"]);
+    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, props = tslib_es6.__rest(_a, ["label", "headingLevel", "links", "isImplied"]);
     return (React.createElement("div", tslib_es6.__assign({ className: styles["quick-help"] }, filterAttrs.filterAttrs(props)),
         label && (React.createElement("div", { className: styles["quick-help-label"] },
             React.createElement(Heading.Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
         React.createElement("ul", { className: styles["quick-help-container"] }, links.map(function (link, index) { return (React.createElement(React.Fragment, { key: index },
             React.createElement("li", { className: styles["quick-help-item"] },
-                React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
+                React.createElement(Link.Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
                 React.createElement(Icon.Icon, { icon: BtIconArrowAltRight.BtIconArrowAltRight, size: 24, color: "brand" })),
             index < links.length - 1 && (React.createElement("li", { className: styles["quick-help-separator"], "aria-hidden": "true" },
                 React.createElement("div", { className: styles["quick-help-separator-line"] }))))); }))));

package/lib/InlineLinkGroup/InlineLinkGroup.mjs

@@ -9,13 +9,13 @@ import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
 var styles = {"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"};
 
 var InlineLinkGroup = function (_a) {
-    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, props = __rest(_a, ["label", "headingLevel", "links"]);
+    var label = _a.label, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, links = _a.links, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, props = __rest(_a, ["label", "headingLevel", "links", "isImplied"]);
     return (React__default.createElement("div", __assign({ className: styles["quick-help"] }, filterAttrs(props)),
         label && (React__default.createElement("div", { className: styles["quick-help-label"] },
             React__default.createElement(Heading, { level: headingLevel, size: "xxs", fontStyle: "overline" }, label))),
         React__default.createElement("ul", { className: styles["quick-help-container"] }, links.map(function (link, index) { return (React__default.createElement(React__default.Fragment, { key: index },
             React__default.createElement("li", { className: styles["quick-help-item"] },
-                React__default.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel }, link.label),
+                React__default.createElement(Link, { href: link.href, onClick: link.onClick, "aria-label": link.ariaLabel, isImplied: isImplied }, link.label),
                 React__default.createElement(Icon, { icon: BtIconArrowAltRight, size: 24, color: "brand" })),
             index < links.length - 1 && (React__default.createElement("li", { className: styles["quick-help-separator"], "aria-hidden": "true" },
                 React__default.createElement("div", { className: styles["quick-help-separator-line"] }))))); }))));

package/lib/ProductCard/ProductCard.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var Heading = require('@arc-ui/components/Heading');
+var Text = require('@arc-ui/components/Text');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
+var Surface = require('@arc-ui/components/Surface');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var Rule = require('@arc-ui/components/Rule');
+var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
+var Icon = require('@arc-ui/components/Icon');
+
+var styles$3 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
+
+var ProductCard = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, topSlot = _a.topSlot, _b = _a.divider, divider = _b === void 0 ? true : _b, bottomSlot = _a.bottomSlot, promoted = _a.promoted, button = _a.button, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
+    var headingId = React.useId();
+    return (React.createElement("div", tslib_es6.__assign({ className: styles$3.productCard }, filterAttrs.filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
+        React.createElement("div", { className: styles$3.productCardTop },
+            promoted && (React.createElement("div", { className: styles$3.productCardPromoted },
+                React.createElement(Surface.Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
+                    React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
+                    React.createElement(Text.Text, { size: "s" }, promoted.content)))),
+            React.createElement("div", { className: styles$3.productCardTopSection },
+                React.createElement(Heading.Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
+                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                topSlot)),
+        React.createElement("div", { className: styles$3.productCardBottom },
+            divider ? (React.createElement("div", { className: styles$3.divider },
+                React.createElement(Rule.Rule, null))) : (React.createElement(VerticalSpace.VerticalSpace, { size: "16" })),
+            bottomSlot,
+            React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React.createElement("div", { className: styles$3.ctaWrapper },
+                React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
+};
+
+var styles$2 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
+
+var ProductCardBenefits = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
+        React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+        React.createElement("ul", { className: styles$2.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles$2.benefitItem },
+            React.createElement(Icon.Icon, { icon: benefit.icon, color: "brand", size: 24 }),
+            benefit.benefit)); }))));
+};
+
+var styles$1 = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
+
+var ProductCardPriceIncrease = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React.createElement(Heading.Heading, { size: "xs", level: headingLevel }, heading),
+        React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+        React.createElement("div", { className: styles$1.priceIncreaseWrapper },
+            React.createElement("div", { className: styles$1.priceIncreaseBorder }),
+            React.createElement("ul", { className: styles$1.priceIncreaseList }, items.map(function (item, index) { return (React.createElement("li", { key: index, className: styles$1.priceIncreaseItem }, item)); })))));
+};
+
+var styles = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
+
+var ProductCardPrice = function (_a) {
+    var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
+    return (React.createElement("div", { className: styles.productCardPrice },
+        prefix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, prefix)),
+        React.createElement(Heading.Heading, { color: "brand", size: "m" }, value),
+        suffix && (React.createElement(Text.Text, { tone: "muted", size: "s" }, suffix))));
+};
+
+exports.ProductCard = ProductCard;
+exports.ProductCardBenefits = ProductCardBenefits;
+exports.ProductCardPrice = ProductCardPrice;
+exports.ProductCardPriceIncrease = ProductCardPriceIncrease;

package/lib/ProductCard/ProductCard.mjs

@@ -0,0 +1,72 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
+import React__default, { useId } from 'react';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+import { Surface } from '@arc-ui/components/Surface';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { Rule } from '@arc-ui/components/Rule';
+import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
+import { Icon } from '@arc-ui/components/Icon';
+
+var styles$3 = {"productCard":"ProductCard-module_productCard__4-BqH","productCardPromoted":"ProductCard-module_productCardPromoted__7cxo-","productCardTopSection":"ProductCard-module_productCardTopSection__8ukd-","divider":"ProductCard-module_divider__rF6XX","productCardBottom":"ProductCard-module_productCardBottom__XvXan","ctaWrapper":"ProductCard-module_ctaWrapper__bJfHv"};
+
+var ProductCard = function (_a) {
+    var heading = _a.heading, headingLevel = _a.headingLevel, topSlot = _a.topSlot, _b = _a.divider, divider = _b === void 0 ? true : _b, bottomSlot = _a.bottomSlot, promoted = _a.promoted, button = _a.button, props = __rest(_a, ["heading", "headingLevel", "topSlot", "divider", "bottomSlot", "promoted", "button"]);
+    var headingId = useId();
+    return (React__default.createElement("div", __assign({ className: styles$3.productCard }, filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
+        React__default.createElement("div", { className: styles$3.productCardTop },
+            promoted && (React__default.createElement("div", { className: styles$3.productCardPromoted },
+                React__default.createElement(Surface, { background: promoted.background, paddingVertical: "16", paddingHorizontal: "24" },
+                    React__default.createElement(VisuallyHidden, null, "Promotional offer. "),
+                    React__default.createElement(Text, { size: "s" }, promoted.content)))),
+            React__default.createElement("div", { className: styles$3.productCardTopSection },
+                React__default.createElement(Heading, { id: headingId, size: "m", level: headingLevel, color: "brand" }, heading),
+                React__default.createElement(VerticalSpace, { size: "16" }),
+                topSlot)),
+        React__default.createElement("div", { className: styles$3.productCardBottom },
+            divider ? (React__default.createElement("div", { className: styles$3.divider },
+                React__default.createElement(Rule, null))) : (React__default.createElement(VerticalSpace, { size: "16" })),
+            bottomSlot,
+            React__default.createElement(VerticalSpace, { size: "24" }),
+            React__default.createElement("div", { className: styles$3.ctaWrapper },
+                React__default.createElement(ButtonV2, __assign({ label: "Explore ".concat(heading), buttonStyle: "secondary", isFullWidth: true }, button))))));
+};
+
+var styles$2 = {"benefitList":"ProductCardBenefits-module_benefitList__Qb1io","benefitItem":"ProductCardBenefits-module_benefitItem__nJqa6"};
+
+var ProductCardBenefits = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Includes:" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, benefits = _a.benefits;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
+        React__default.createElement(VerticalSpace, { size: "12" }),
+        React__default.createElement("ul", { className: styles$2.benefitList }, benefits.map(function (benefit, index) { return (React__default.createElement("li", { key: index, className: styles$2.benefitItem },
+            React__default.createElement(Icon, { icon: benefit.icon, color: "brand", size: 24 }),
+            benefit.benefit)); }))));
+};
+
+var styles$1 = {"priceIncreaseWrapper":"ProductCardPriceIncrease-module_priceIncreaseWrapper__Psknf","priceIncreaseBorder":"ProductCardPriceIncrease-module_priceIncreaseBorder__NC2eA","priceIncreaseList":"ProductCardPriceIncrease-module_priceIncreaseList__qsmOQ","priceIncreaseItem":"ProductCardPriceIncrease-module_priceIncreaseItem__f-x-D"};
+
+var ProductCardPriceIncrease = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? "Price increasing to" : _b, _c = _a.headingLevel, headingLevel = _c === void 0 ? "4" : _c, _d = _a.items, items = _d === void 0 ? [] : _d;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(VerticalSpace, { size: "16" }),
+        React__default.createElement(Heading, { size: "xs", level: headingLevel }, heading),
+        React__default.createElement(VerticalSpace, { size: "12" }),
+        React__default.createElement("div", { className: styles$1.priceIncreaseWrapper },
+            React__default.createElement("div", { className: styles$1.priceIncreaseBorder }),
+            React__default.createElement("ul", { className: styles$1.priceIncreaseList }, items.map(function (item, index) { return (React__default.createElement("li", { key: index, className: styles$1.priceIncreaseItem }, item)); })))));
+};
+
+var styles = {"productCardPrice":"ProductCardPrice-module_productCardPrice__6k4kU"};
+
+var ProductCardPrice = function (_a) {
+    var prefix = _a.prefix, value = _a.value, suffix = _a.suffix;
+    return (React__default.createElement("div", { className: styles.productCardPrice },
+        prefix && (React__default.createElement(Text, { tone: "muted", size: "s" }, prefix)),
+        React__default.createElement(Heading, { color: "brand", size: "m" }, value),
+        suffix && (React__default.createElement(Text, { tone: "muted", size: "s" }, suffix))));
+};
+
+export { ProductCard, ProductCardBenefits, ProductCardPrice, ProductCardPriceIncrease };

package/lib/ProductCard/styles.css

@@ -0,0 +1 @@
+.ProductCard-module_productCard__4-BqH{max-width:603px;border-radius:var(--card-border-radius-s);box-shadow:0 0 0 1px var(--card-colors-light-border-default);display:grid;grid-template-rows:subgrid;grid-row:span 2;height:100%}.ProductCard-module_productCardPromoted__7cxo-{overflow:hidden;text-align:center;border-radius:var(--card-border-radius-s) var(--card-border-radius-s) 0 0}.ProductCard-module_productCardTopSection__8ukd-{padding:24px;padding-bottom:0}.ProductCard-module_divider__rF6XX{padding:24px 0;align-items:center}.ProductCard-module_productCardBottom__XvXan{display:flex;flex-direction:column;padding:0 24px 24px}.ProductCard-module_ctaWrapper__bJfHv{display:flex;flex-direction:column-reverse;height:auto;flex-grow:1}@media (--arc-custom-media-min-width-xl-px){.ProductCard-module_productCardTopSection__8ukd-{padding:32px 32px 0}.ProductCard-module_productCardBottom__XvXan{padding:0 32px 32px}}

package/lib/ProductCardGrid/ProductCardGrid.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
+var React = require('react');
+var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
+var SectionHeading = require('../_shared/cjs/SectionHeading-XCMdv8eZ.cjs');
+var Tabs = require('@arc-ui/components/Tabs');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
+var Rule = require('@arc-ui/components/Rule');
+var Align = require('@arc-ui/components/Align');
+require('../_shared/cjs/index-B7Z7sgRq.cjs');
+require('@arc-ui/components/Text');
+require('@arc-ui/components/Image');
+require('@arc-ui/components/Heading');
+require('@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 = tslib_es6.__rest(_a, ["cards", "cardsRevealed", "fourthCardRef"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("ul", tslib_es6.__assign({ className: styles.cardGrid }, filterAttrs.filterAttrs(props)), (cardsRevealed ? cards : cards.slice(0, 3)).map(function (card, index) { return (React.createElement("li", { key: "card-".concat(index), className: styles.cardGridItem, ref: index === 3 ? fourthCardRef : undefined, tabIndex: -1 }, card)); })),
+        React.createElement(VerticalSpace.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 = tslib_es6.__rest(_a, ["id", "isHeadingWordWrap", "heading", "content", "headingLevel", "tabs", "expanded", "hideTabs"]);
+    var _j = React.useState(expanded), cardsRevealed = _j[0], setCardsRevealed = _j[1];
+    var _k = React.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 = React.useRef(null);
+    var cardContext = React.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.createElement("div", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
+        React.createElement(SectionHeading.SectionHeading, { id: id, isHeadingWordWrap: isHeadingWordWrap, heading: heading, content: content, headingLevel: headingLevel, isPadded: true }),
+        tabs && !hideTabs && (React.createElement(Tabs.Tabs, { defaultValue: (_f = tabs[0]) === null || _f === void 0 ? void 0 : _f.value, onValueChange: function (value) {
+                setActiveTab(value);
+            } },
+            React.createElement(Tabs.TabsList, { type: "standard" }, tabs.map(function (tab) { return (React.createElement(Tabs.TabsItem, { key: tab.value, label: tab.label, value: tab.value, icon: tab.icon, iconActive: tab.iconActive })); })),
+            tabs.map(function (tab) { return (React.createElement(Tabs.TabsContent, { key: tab.value, value: tab.value },
+                React.createElement(VerticalSpace.VerticalSpace, { size: "24", sizeL: "32" }),
+                React.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.createElement(React.Fragment, null,
+            React.createElement(CardGrid, { cards: tabs[0].cards, cardsRevealed: cardsRevealed, fourthCardRef: fourthCardRef }))),
+        !expanded && hasMoreCards && (React.createElement(React.Fragment, null,
+            React.createElement(Rule.Rule, null),
+            React.createElement("span", { id: cardContext, style: { display: "none" } }, remainingCards === 1
+                ? "".concat(remainingCards, " card")
+                : "".concat(remainingCards, " cards")),
+            React.createElement(Align.Align, { horizontal: "center" },
+                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                !cardsRevealed && (React.createElement(ButtonV2.ButtonV2, { label: "Show more", buttonStyle: "secondary", onClick: showMore, "aria-describedby": cardContext })),
+                cardsRevealed && (React.createElement(ButtonV2.ButtonV2, { label: "Show less", buttonStyle: "secondary", onClick: showLess, "aria-describedby": cardContext })))))));
+};
+
+exports.ProductCardGrid = ProductCardGrid;