@arc-ui/community-components 3.15.0 → 3.17.0

package/.turbo/turbo-build.log

@@ -1,24 +1,24 @@
 
-> @arc-ui/community-components@3.15.0 build /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.17.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 13 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 15 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 6.8s
+created lib/index.cjs, lib/index.mjs in 6.6s
 
 ./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/NavigationHeader (imported by "lib/types/components/HeaderBarNotification/HeaderBarNotification.d.ts")
 @arc-ui/components/Avatar (imported by "lib/types/components/Author/Author.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/VideoPortraitCard/VideoPortraitCard.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/ProductCard/ProductCard.d.ts", "lib/types/components/ComparisonTable/types/comparison-section.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", "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/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.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/Download (imported by "lib/types/components/DownloadList/DownloadList.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/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/link-section.d.ts", "lib/types/components/ArticleSidebar/types/share.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/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.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/ButtonV2 (imported by "lib/types/components/Highlights/Highlights.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/ProductCard/ProductCard.d.ts", "lib/types/components/ComparisonTable/components/SubHeaderCell/SubHeaderCell.d.ts" and "lib/types/components/FeaturePost/types/feature-post-cta-footer.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")
@@ -29,21 +29,21 @@ Browserslist: browsers data (caniuse-lite) is 13 months old. Please run:
 @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/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/CopyLead/types/copy-lead-button.d.ts")
 @arc-ui/components/AppButton (imported by "lib/types/components/FeaturePost/types/feature-post-app-button-footer.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 178ms
+created lib/index.d.mts, lib/index.d.cts in 191ms
 
-./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 7.3s
+./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/ComparisonTable/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 6.8s
 
-./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 6.5s
-Browserslist: browsers data (caniuse-lite) is 13 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/ComparisonTable/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 7.2s
+Browserslist: browsers data (caniuse-lite) is 15 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.15.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
+> @arc-ui/community-components@3.17.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,32 @@
 # @arc-ui/community-components
 
+## 3.17.0
+
+### Minor Changes
+
+- 46b9c24: Allow FeaturePost CTA buttons to use all ButtonV2 styles while preserving secondary as the default.
+- 46b9c24: Introduce new ComparisonTable component
+- 46b9c24: Support all ButtonV2 styles for Highlights CTAs through cta.buttonStyle, defaulting to secondary and preserving existing cta usage.
+
+### Patch Changes
+
+- 46b9c24: Use ButtonV2Props for Highlights CTAs and forward button props while retaining existing defaults.
+- 46b9c24: refactor: make rows be a single array with a sectionID prop
+- 46b9c24: Preserve the fixed medium size for Highlights CTAs and limit Storybook examples to the established styles and default.
+- 46b9c24: Align the FeaturePost date with the label when it wraps onto a separate row.
+- 46b9c24: Keep Highlights button styling on the existing cta API and remove the additional footer prop.
+- 46b9c24: create tags via Gitlab API using CI_JOB_TOKEN rather than pushing tag via PAT
+- 46b9c24: Replace Project Access Token to CI_JOB_TOKEN for tag and publish stage
+- 46b9c24: Use local styles for FeaturePost label wrapping and date layout without overriding Arc component classes.
+- 46b9c24: Allow FeaturePost labels to wrap across multiple lines instead of truncating.
+- 46b9c24: fix a11y roles for comparison table
+
+## 3.16.0
+
+### Minor Changes
+
+- Update Arc packages to 13.16.0, including components, themes, icons, gradients and design tokens.
+
 ## 3.15.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-C-y6aRIY.cjs');
+var index_es = require('../_shared/cjs/index.es-oEhoU2Bd.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-YxZ1vAot.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-DujqqZXe.mjs';
 import { MediaCard } from '@arc-ui/components/MediaCard';
 import { useMediaQuery } from '@arc-ui/components/use-media-query';
 import '@arc-ui/components/Text';

package/lib/ComparisonTable/ComparisonTable.cjs

@@ -0,0 +1,317 @@
+'use strict';
+
+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 Heading = require('@arc-ui/components/Heading');
+var Surface = require('@arc-ui/components/Surface');
+var Text = require('@arc-ui/components/Text');
+var VisuallyHidden = require('@arc-ui/components/VisuallyHidden');
+var Icon = require('@arc-ui/components/Icon');
+var Popover = require('@arc-ui/components/Popover');
+var ButtonV2 = require('@arc-ui/components/ButtonV2');
+var VerticalSpace = require('@arc-ui/components/VerticalSpace');
+var ProductCardPriceIncrease = require('../_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs');
+
+var styles$1 = {"wrapper":"ComparisonTable-module_wrapper__SSvrL","wrapperBordered":"ComparisonTable-module_wrapperBordered__kQeRo","shadowOverlay":"ComparisonTable-module_shadowOverlay__unZ3Q","table":"ComparisonTable-module_table__iU0Zl","desktopTable":"ComparisonTable-module_desktopTable__IwkOh","headerRow":"ComparisonTable-module_headerRow__BCw20","subHeaderRow":"ComparisonTable-module_subHeaderRow__h-S8Y","row":"ComparisonTable-module_row__VMAyW","headerCell":"ComparisonTable-module_headerCell__4bhwd","headerCellPromoted":"ComparisonTable-module_headerCellPromoted__4oIRU","highlightedTop":"ComparisonTable-module_highlightedTop__pKNy8","stickyHeader":"ComparisonTable-module_stickyHeader__MJLxP","subHeaderCell":"ComparisonTable-module_subHeaderCell__12J6c","rowGroup":"ComparisonTable-module_rowGroup__YuAHE","featureRow":"ComparisonTable-module_featureRow__hSa-p","featureRowHeader":"ComparisonTable-module_featureRowHeader__YB-eY","cell":"ComparisonTable-module_cell__lWOm3","featureRowHeaderContent":"ComparisonTable-module_featureRowHeaderContent__XmzGi","controlRow":"ComparisonTable-module_controlRow__Lf01P","controlCell":"ComparisonTable-module_controlCell__uauzO","controlCellContent":"ComparisonTable-module_controlCellContent__welDu","highlighted":"ComparisonTable-module_highlighted__WLAu4","highlightedBottom":"ComparisonTable-module_highlightedBottom__7PPJO","mobileLayout":"ComparisonTable-module_mobileLayout__GkFfO","desktopLayout":"ComparisonTable-module_desktopLayout__k3qMZ","desktopTableSticky":"ComparisonTable-module_desktopTableSticky__GflmR","desktopHeaderRow":"ComparisonTable-module_desktopHeaderRow__BmfJz","desktopSubHeaderRow":"ComparisonTable-module_desktopSubHeaderRow__4KeVU","desktopRow":"ComparisonTable-module_desktopRow__XrYwQ","desktopFeatureHeader":"ComparisonTable-module_desktopFeatureHeader__M5Aa-","desktopHeaderCell":"ComparisonTable-module_desktopHeaderCell__fEYWe","desktopControlsCell":"ComparisonTable-module_desktopControlsCell__5fjOI","desktopFeatureCell":"ComparisonTable-module_desktopFeatureCell__i5MiH","sectionToggleRow":"ComparisonTable-module_sectionToggleRow__XDwt4","sectionToggle":"ComparisonTable-module_sectionToggle__GR-Xz","sectionContent":"ComparisonTable-module_sectionContent__GuogA","sectionToggleContent":"ComparisonTable-module_sectionToggleContent__p0ouX","sectionToggleOpen":"ComparisonTable-module_sectionToggleOpen__ZFdLO","sectionChevron":"ComparisonTable-module_sectionChevron__0kmLs","sectionChevronOpen":"ComparisonTable-module_sectionChevronOpen__m7jv0","isLastRow":"ComparisonTable-module_isLastRow__coPlk"};
+
+var HeaderCell = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, promoted = _a.promoted, props = tslib_es6.__rest(_a, ["children", "columnIndex", "promoted"]);
+    return (React.createElement("div", tslib_es6.__assign({ role: "columnheader", className: index.classNames(styles$1.headerCell, (_b = {},
+            _b[styles$1.highlighted] = columnIndex % 2 === 0,
+            _b[styles$1.highlightedTop] = columnIndex % 2 === 0,
+            _b)) }, filterAttrs.filterAttrs(props)),
+        promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
+            React.createElement(Surface.Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
+                React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
+                React.createElement(Text.Text, { size: "s" }, promoted)))),
+        children != null && (React.createElement(Heading.Heading, { size: "m", isWordWrap: true }, children))));
+};
+
+var ControlCell = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement("div", tslib_es6.__assign({ role: "cell", className: styles$1.controlCell }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: styles$1.controlCellContent }, children)));
+};
+
+var Cell = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, _d = _a.isLastRow, isLastRow = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["children", "columnIndex", "isLastRow"]);
+    var isHighlighted = columnIndex % 2 === 0;
+    return (React.createElement("div", tslib_es6.__assign({ role: "cell", className: index.classNames(styles$1.cell, (_b = {},
+            _b[styles$1.highlighted] = isHighlighted,
+            _b[styles$1.highlightedBottom] = isHighlighted && isLastRow,
+            _b)) }, filterAttrs.filterAttrs(props)),
+        React.createElement(Text.Text, null, children)));
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconInfo =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 27a13 13 0 1 1 13-13 13.015 13.015 0 0 1-13 13'/%3e%3cpath d='M16 8.993a1 1 0 1 0 0 2 1 1 0 1 0 0-2M15.995 12.977a.5.5 0 0 0-.5.5l-.002 9.01a.5.5 0 0 0 1 0l.002-9.01a.5.5 0 0 0-.5-.5'/%3e%3c/svg%3e";
+
+var styles = {"packageCell":"FeatureCell-module_packageCell__H7UPQ","packageCellPopoverDesktop":"FeatureCell-module_packageCellPopoverDesktop__AHGzm","packageCellTitle":"FeatureCell-module_packageCellTitle__747D6","packageCellHeading":"FeatureCell-module_packageCellHeading__YxXWC","packageCellPopoverMobile":"FeatureCell-module_packageCellPopoverMobile__JEZXA"};
+
+var FeatureCell = function (_a) {
+    var icon = _a.icon, title = _a.title, description = _a.description, popoverContent = _a.popoverContent;
+    return (React.createElement("div", { className: styles.packageCell },
+        React.createElement("div", { className: styles.packageCellTitle },
+            React.createElement("div", { style: { width: 32 } },
+                React.createElement(Icon.Icon, { icon: icon, size: 32, color: "brand" })),
+            React.createElement("div", { className: styles.packageCellText },
+                React.createElement("div", { className: styles.packageCellHeading },
+                    React.createElement(Heading.Heading, { size: "xs", isWordWrap: true }, title),
+                    popoverContent && (React.createElement("div", { className: styles.packageCellPopoverMobile },
+                        React.createElement(Popover.Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text.Text, null, popoverContent), maxWidth: 300, side: "top" },
+                            React.createElement(Icon.Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) })))),
+                    " "),
+                description && (React.createElement(Text.Text, { size: "xs", tone: "muted" }, description)))),
+        popoverContent && (React.createElement("div", { className: styles.packageCellPopoverDesktop },
+            React.createElement(Popover.Popover, { arrow: true, background: "white", constrainToViewport: true, content: React.createElement(Text.Text, null, popoverContent), side: "bottom", align: "start" },
+                React.createElement(Icon.Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) }))))));
+};
+
+/**
+ * Renders a single content row of cells for the mobile layout.
+ */
+var renderRow = function (cells, key, isLastRow) { return (React.createElement("div", { key: key, className: styles$1.row }, cells.map(function (cell, index) { return (React.createElement(Cell, { key: "cell-".concat(index), columnIndex: index, isLastRow: isLastRow }, cell)); }))); };
+var MobileRow = function (_a) {
+    var _b;
+    var _c;
+    var row = _a.row, _d = _a.isLastGroup, isLastGroup = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["row", "isLastGroup"]);
+    var subRows = (_c = row.subRows) !== null && _c !== void 0 ? _c : [];
+    var hasSubRows = subRows.length > 0;
+    return (React.createElement("div", tslib_es6.__assign({ role: "row", className: index.classNames(styles$1.rowGroup, (_b = {},
+            _b[styles$1.isLastRow] = isLastGroup,
+            _b)) }, filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: styles$1.featureRow },
+            React.createElement("div", { role: "rowheader", className: styles$1.featureRowHeader },
+                React.createElement("div", { className: styles$1.featureRowHeaderContent },
+                    React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })))),
+        renderRow(row.cells, "primary-row", isLastGroup && !hasSubRows),
+        subRows.map(function (subRow, index) {
+            return renderRow(subRow.cells, "row-".concat(index), isLastGroup && index === subRows.length - 1);
+        })));
+};
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const BtIconChevronDownMid =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16 18.09 5.704-5.696a1.347 1.347 0 0 1 2.296.949 1.34 1.34 0 0 1-.393.95L16.95 20.94a1.347 1.347 0 0 1-1.902 0l-6.656-6.648A1.342 1.342 0 0 1 9.345 12c.356 0 .699.142.951.393z'/%3e%3c/svg%3e";
+
+var SectionToggle = function (_a) {
+    var _b, _c;
+    var heading = _a.heading, _d = _a.headingLevel, headingLevel = _d === void 0 ? "3" : _d, isOpen = _a.isOpen, onToggle = _a.onToggle, controlsId = _a.controlsId;
+    return (React.createElement("button", { type: "button", className: index.classNames(styles$1.sectionToggle, (_b = {},
+            _b[styles$1.sectionToggleOpen] = isOpen,
+            _b)), "aria-expanded": isOpen, "aria-controls": controlsId, onClick: onToggle },
+        React.createElement("span", { className: styles$1.sectionToggleContent },
+            React.createElement(Heading.Heading, { level: headingLevel, size: "s" }, heading),
+            React.createElement("span", { className: index.classNames(styles$1.sectionChevron, (_c = {},
+                    _c[styles$1.sectionChevronOpen] = isOpen,
+                    _c)), "aria-hidden": "true" },
+                React.createElement(Icon.Icon, { icon: BtIconChevronDownMid, size: 24 })))));
+};
+
+/**
+ * Optional-controlled open state for a section. When `open` is provided the
+ * section is controlled and the internal state is ignored; otherwise the hook
+ * manages its own state seeded by `defaultOpen`. `onOpenChange` is always
+ * called with the next value when `toggle` runs.
+ */
+var useSectionState = function (_a) {
+    var _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, open = _a.open, onOpenChange = _a.onOpenChange;
+    var _c = React.useState(defaultOpen), internalOpen = _c[0], setInternalOpen = _c[1];
+    var isControlled = open !== undefined;
+    var isOpen = isControlled ? open : internalOpen;
+    var toggle = React.useCallback(function () {
+        var next = !isOpen;
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, isOpen, onOpenChange]);
+    return { isOpen: isOpen, toggle: toggle };
+};
+
+var Section = function (_a) {
+    var _b;
+    var section = _a.section, isLastSection = _a.isLastSection, renderRow = _a.renderRow;
+    var regionId = React.useId();
+    var _c = useSectionState({
+        defaultOpen: section.defaultOpen,
+        open: section.open,
+        onOpenChange: section.onOpenChange,
+    }), isOpen = _c.isOpen, toggle = _c.toggle;
+    var lastRowIndex = section.rows.length - 1;
+    return (React.createElement("div", { role: "rowgroup" },
+        React.createElement("div", { role: "row", className: index.classNames(styles$1.sectionToggleRow, (_b = {},
+                _b[styles$1.isLastRow] = isLastSection === true && !isOpen,
+                _b)) },
+            React.createElement(SectionToggle, { heading: section.heading, headingLevel: section.headingLevel, isOpen: isOpen, onToggle: toggle, controlsId: regionId })),
+        isOpen && (React.createElement("div", { id: regionId, className: styles$1.sectionContent }, section.rows.map(function (row, index) {
+            return renderRow(row, index, isLastSection === true && index === lastRowIndex);
+        })))));
+};
+
+var SubHeaderCell = function (_a) {
+    var _b;
+    var price = _a.price, priceIncrease = _a.priceIncrease, button = _a.button, _c = _a.columnIndex, columnIndex = _c === void 0 ? 0 : _c, props = tslib_es6.__rest(_a, ["price", "priceIncrease", "button", "columnIndex"]);
+    return (React.createElement("div", tslib_es6.__assign({ role: "cell", className: index.classNames(styles$1.subHeaderCell, (_b = {},
+            _b[styles$1.highlighted] = columnIndex % 2 === 0,
+            _b)) }, filterAttrs.filterAttrs(props)),
+        React.createElement(ProductCardPriceIncrease.ProductCardPrice, tslib_es6.__assign({}, price)),
+        priceIncrease && (React.createElement(ProductCardPriceIncrease.ProductCardPriceIncrease, tslib_es6.__assign({ heading: "Increasing to:", hideBorder: true }, priceIncrease))),
+        React.createElement(VerticalSpace.VerticalSpace, null),
+        button && React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ isFullWidth: true }, button))));
+};
+
+var MobileTable = function (_a) {
+    var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, className = _a.className;
+    return (React.createElement("div", { role: "table", className: index.classNames(styles$1.table, className), style: { "--comparison-columns": columns.length } },
+        React.createElement("div", { role: "row", className: styles$1.headerRow }, columns.map(function (column, index) { return (React.createElement(HeaderCell, { key: column.id, columnIndex: index, promoted: column.promoted }, column.label)); })),
+        controls && (React.createElement("div", { role: "row", className: styles$1.controlRow, "aria-label": "comparison table controls" },
+            React.createElement(ControlCell, null, controls))),
+        columns.some(function (column) { return column.subheader; }) && (React.createElement("div", { role: "row", className: styles$1.subHeaderRow }, columns.map(function (column, index) {
+            var _a;
+            return (React.createElement(SubHeaderCell, tslib_es6.__assign({ key: column.id, columnIndex: index }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
+        }))),
+        rows.map(function (row, index) { return (React.createElement(MobileRow, { key: "row-group-".concat(index), row: row, isLastGroup: sections.length === 0 && index === rows.length - 1 })); }),
+        sections.map(function (section, index) { return (React.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React.createElement(MobileRow, { key: "section-group-".concat(rowIndex), row: row, isLastGroup: isLast })); } })); })));
+};
+
+/**
+ * The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
+ * 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
+ * the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
+ */
+var isPlanHighlighted$1 = function (planIndex) { return planIndex % 2 === 0; };
+var DesktopRow = function (_a) {
+    var _b;
+    var row = _a.row, _c = _a.isLastRow, isLastRow = _c === void 0 ? false : _c;
+    return (React.createElement("div", { role: "row", className: index.classNames(styles$1.desktopRow, (_b = {},
+            _b[styles$1.isLastRow] = isLastRow,
+            _b)) },
+        React.createElement("div", { role: "rowheader", className: styles$1.desktopFeatureCell },
+            React.createElement(FeatureCell, { icon: row.feature.icon, title: row.feature.title, description: row.feature.description, popoverContent: row.feature.popoverContent })),
+        row.cells.map(function (cell, cellIndex) {
+            var _a;
+            return (React.createElement("div", { key: "desktop-cell-".concat(cellIndex), role: "cell", className: index.classNames(styles$1.cell, (_a = {},
+                    _a[styles$1.highlighted] = isPlanHighlighted$1(cellIndex),
+                    _a[styles$1.highlightedBottom] = isPlanHighlighted$1(cellIndex) && isLastRow,
+                    _a)) },
+                React.createElement(Text.Text, null, cell)));
+        })));
+};
+
+/**
+ * The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
+ * 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
+ * the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
+ */
+var isPlanHighlighted = function (planIndex) { return planIndex % 2 === 0; };
+var DesktopTable = function (_a) {
+    var _b, _c;
+    var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, hasStickyHeader = _a.hasStickyHeader, className = _a.className;
+    var hasSubheader = columns.some(function (column) { return column.subheader; });
+    return (React.createElement("div", { role: "table", className: index.classNames(styles$1.desktopTable, className, (_b = {},
+            _b[styles$1.desktopTableSticky] = hasStickyHeader,
+            _b)), style: { "--comparison-columns": columns.length } },
+        React.createElement("div", { role: "row", className: index.classNames(styles$1.desktopHeaderRow, (_c = {},
+                _c[styles$1.stickyHeader] = hasStickyHeader,
+                _c)) },
+            React.createElement("div", { role: "columnheader", className: styles$1.desktopFeatureHeader },
+                React.createElement(VisuallyHidden.VisuallyHidden, null, "Features")),
+            columns.map(function (column, index$1) {
+                var _a;
+                return (React.createElement("div", { key: column.id, role: "columnheader", className: index.classNames(styles$1.desktopHeaderCell, (_a = {},
+                        _a[styles$1.highlighted] = isPlanHighlighted(index$1),
+                        _a[styles$1.highlightedTop] = isPlanHighlighted(index$1),
+                        _a)) },
+                    column.promoted && (React.createElement("div", { className: styles$1.headerCellPromoted },
+                        React.createElement(Surface.Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
+                            React.createElement(VisuallyHidden.VisuallyHidden, null, "Promotional offer. "),
+                            React.createElement(Text.Text, { size: "s" }, column.promoted)))),
+                    React.createElement(Heading.Heading, { size: "m" }, column.label)));
+            })),
+        (controls || hasSubheader) && (React.createElement("div", { role: "row", className: styles$1.desktopSubHeaderRow },
+            React.createElement("div", { className: styles$1.desktopControlsCell, "aria-label": "comparison table controls" }, controls),
+            columns.map(function (column, index) {
+                var _a;
+                return (React.createElement(SubHeaderCell, tslib_es6.__assign({ key: column.id, columnIndex: isPlanHighlighted(index) ? 0 : 1 }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
+            }))),
+        rows.map(function (row, rowIndex) { return (React.createElement(DesktopRow, { key: "desktop-row-".concat(rowIndex), row: row, isLastRow: sections.length === 0 && rowIndex === rows.length - 1 })); }),
+        sections.map(function (section, index) { return (React.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React.createElement(DesktopRow, { key: "desktop-section-row-".concat(rowIndex), row: row, isLastRow: isLast })); } })); })));
+};
+
+/**
+ * Splits a flat list of rows into unsectioned rows and resolved sections.
+ * Rows are bucketed by `sectionId` in one pass, then sections are built by
+ * iterating `sections` (not the bucket keys) so section order follows the
+ * `sections` array. A `sectionId` with no matching section logs a dev-only
+ * warning and the row renders unsectioned, so rows are never lost.
+ */
+var groupRows = function (rows, sections) {
+    if (rows === void 0) { rows = []; }
+    if (sections === void 0) { sections = []; }
+    var knownIds = new Set(sections.map(function (section) { return section.id; }));
+    var rowsBySection = new Map();
+    var unsectioned = [];
+    rows.forEach(function (row) {
+        var sectionId = row.sectionId;
+        if (sectionId === undefined) {
+            unsectioned.push(row);
+            return;
+        }
+        if (!knownIds.has(sectionId)) {
+            if (process.env.NODE_ENV !== "production") {
+                // eslint-disable-next-line no-console
+                console.warn("ComparisonTable: row sectionId \"".concat(sectionId, "\" does not match any section; rendering it unsectioned."));
+            }
+            unsectioned.push(row);
+            return;
+        }
+        var bucket = rowsBySection.get(sectionId);
+        if (bucket) {
+            bucket.push(row);
+        }
+        else {
+            rowsBySection.set(sectionId, [row]);
+        }
+    });
+    var resolvedSections = [];
+    sections.forEach(function (section) {
+        var sectionRows = rowsBySection.get(section.id);
+        if (sectionRows === null || sectionRows === void 0 ? void 0 : sectionRows.length) {
+            resolvedSections.push(tslib_es6.__assign(tslib_es6.__assign({}, section), { rows: sectionRows }));
+        }
+    });
+    return { unsectioned: unsectioned, sections: resolvedSections };
+};
+
+var ComparisonTable = function (_a) {
+    var _b;
+    var columns = _a.columns, rows = _a.rows, sections = _a.sections, controls = _a.controls, _c = _a.hasBorder, hasBorder = _c === void 0 ? true : _c, _d = _a.hasStickyHeader, hasStickyHeader = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["columns", "rows", "sections", "controls", "hasBorder", "hasStickyHeader"]);
+    var _e = React.useMemo(function () { return groupRows(rows, sections); }, [rows, sections]), unsectioned = _e.unsectioned, resolvedSections = _e.sections;
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames(styles$1.wrapper, (_b = {},
+            _b[styles$1.wrapperBordered] = hasBorder,
+            _b)) }, filterAttrs.filterAttrs(props)),
+        hasBorder && React.createElement("div", { className: styles$1.shadowOverlay, "aria-hidden": "true" }),
+        React.createElement(MobileTable, { className: styles$1.mobileLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls }),
+        React.createElement(DesktopTable, { className: styles$1.desktopLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls, hasStickyHeader: hasStickyHeader })));
+};
+
+exports.Cell = Cell;
+exports.ComparisonTable = ComparisonTable;
+exports.ControlCell = ControlCell;
+exports.FeatureCell = FeatureCell;
+exports.HeaderCell = HeaderCell;
+exports.SubHeaderCell = SubHeaderCell;