@arc-ui/community-components 3.16.0 → 3.17.0

package/lib/ComparisonTable/ComparisonTable.mjs

@@ -0,0 +1,310 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
+import React__default, { useState, useCallback, useId } from 'react';
+import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
+import { Heading } from '@arc-ui/components/Heading';
+import { Surface } from '@arc-ui/components/Surface';
+import { Text } from '@arc-ui/components/Text';
+import { VisuallyHidden } from '@arc-ui/components/VisuallyHidden';
+import { Icon } from '@arc-ui/components/Icon';
+import { Popover } from '@arc-ui/components/Popover';
+import { ButtonV2 } from '@arc-ui/components/ButtonV2';
+import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
+import { a as ProductCardPrice, P as ProductCardPriceIncrease } from '../_shared/esm/ProductCardPriceIncrease-CJyG2wv-.mjs';
+
+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 = __rest(_a, ["children", "columnIndex", "promoted"]);
+    return (React__default.createElement("div", __assign({ role: "columnheader", className: classNames(styles$1.headerCell, (_b = {},
+            _b[styles$1.highlighted] = columnIndex % 2 === 0,
+            _b[styles$1.highlightedTop] = columnIndex % 2 === 0,
+            _b)) }, filterAttrs(props)),
+        promoted && (React__default.createElement("div", { className: styles$1.headerCellPromoted },
+            React__default.createElement(Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
+                React__default.createElement(VisuallyHidden, null, "Promotional offer. "),
+                React__default.createElement(Text, { size: "s" }, promoted)))),
+        children != null && (React__default.createElement(Heading, { size: "m", isWordWrap: true }, children))));
+};
+
+var ControlCell = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement("div", __assign({ role: "cell", className: styles$1.controlCell }, filterAttrs(props)),
+        React__default.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 = __rest(_a, ["children", "columnIndex", "isLastRow"]);
+    var isHighlighted = columnIndex % 2 === 0;
+    return (React__default.createElement("div", __assign({ role: "cell", className: classNames(styles$1.cell, (_b = {},
+            _b[styles$1.highlighted] = isHighlighted,
+            _b[styles$1.highlightedBottom] = isHighlighted && isLastRow,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement(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__default.createElement("div", { className: styles.packageCell },
+        React__default.createElement("div", { className: styles.packageCellTitle },
+            React__default.createElement("div", { style: { width: 32 } },
+                React__default.createElement(Icon, { icon: icon, size: 32, color: "brand" })),
+            React__default.createElement("div", { className: styles.packageCellText },
+                React__default.createElement("div", { className: styles.packageCellHeading },
+                    React__default.createElement(Heading, { size: "xs", isWordWrap: true }, title),
+                    popoverContent && (React__default.createElement("div", { className: styles.packageCellPopoverMobile },
+                        React__default.createElement(Popover, { arrow: true, background: "white", constrainToViewport: true, content: React__default.createElement(Text, null, popoverContent), maxWidth: 300, side: "top" },
+                            React__default.createElement(Icon, { icon: BtIconInfo, size: 16, color: "brand", label: "More information about ".concat(title) })))),
+                    " "),
+                description && (React__default.createElement(Text, { size: "xs", tone: "muted" }, description)))),
+        popoverContent && (React__default.createElement("div", { className: styles.packageCellPopoverDesktop },
+            React__default.createElement(Popover, { arrow: true, background: "white", constrainToViewport: true, content: React__default.createElement(Text, null, popoverContent), side: "bottom", align: "start" },
+                React__default.createElement(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__default.createElement("div", { key: key, className: styles$1.row }, cells.map(function (cell, index) { return (React__default.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 = __rest(_a, ["row", "isLastGroup"]);
+    var subRows = (_c = row.subRows) !== null && _c !== void 0 ? _c : [];
+    var hasSubRows = subRows.length > 0;
+    return (React__default.createElement("div", __assign({ role: "row", className: classNames(styles$1.rowGroup, (_b = {},
+            _b[styles$1.isLastRow] = isLastGroup,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement("div", { className: styles$1.featureRow },
+            React__default.createElement("div", { role: "rowheader", className: styles$1.featureRowHeader },
+                React__default.createElement("div", { className: styles$1.featureRowHeaderContent },
+                    React__default.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__default.createElement("button", { type: "button", className: classNames(styles$1.sectionToggle, (_b = {},
+            _b[styles$1.sectionToggleOpen] = isOpen,
+            _b)), "aria-expanded": isOpen, "aria-controls": controlsId, onClick: onToggle },
+        React__default.createElement("span", { className: styles$1.sectionToggleContent },
+            React__default.createElement(Heading, { level: headingLevel, size: "s" }, heading),
+            React__default.createElement("span", { className: classNames(styles$1.sectionChevron, (_c = {},
+                    _c[styles$1.sectionChevronOpen] = isOpen,
+                    _c)), "aria-hidden": "true" },
+                React__default.createElement(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 = useState(defaultOpen), internalOpen = _c[0], setInternalOpen = _c[1];
+    var isControlled = open !== undefined;
+    var isOpen = isControlled ? open : internalOpen;
+    var toggle = 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 = 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__default.createElement("div", { role: "rowgroup" },
+        React__default.createElement("div", { role: "row", className: classNames(styles$1.sectionToggleRow, (_b = {},
+                _b[styles$1.isLastRow] = isLastSection === true && !isOpen,
+                _b)) },
+            React__default.createElement(SectionToggle, { heading: section.heading, headingLevel: section.headingLevel, isOpen: isOpen, onToggle: toggle, controlsId: regionId })),
+        isOpen && (React__default.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 = __rest(_a, ["price", "priceIncrease", "button", "columnIndex"]);
+    return (React__default.createElement("div", __assign({ role: "cell", className: classNames(styles$1.subHeaderCell, (_b = {},
+            _b[styles$1.highlighted] = columnIndex % 2 === 0,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement(ProductCardPrice, __assign({}, price)),
+        priceIncrease && (React__default.createElement(ProductCardPriceIncrease, __assign({ heading: "Increasing to:", hideBorder: true }, priceIncrease))),
+        React__default.createElement(VerticalSpace, null),
+        button && React__default.createElement(ButtonV2, __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__default.createElement("div", { role: "table", className: classNames(styles$1.table, className), style: { "--comparison-columns": columns.length } },
+        React__default.createElement("div", { role: "row", className: styles$1.headerRow }, columns.map(function (column, index) { return (React__default.createElement(HeaderCell, { key: column.id, columnIndex: index, promoted: column.promoted }, column.label)); })),
+        controls && (React__default.createElement("div", { role: "row", className: styles$1.controlRow, "aria-label": "comparison table controls" },
+            React__default.createElement(ControlCell, null, controls))),
+        columns.some(function (column) { return column.subheader; }) && (React__default.createElement("div", { role: "row", className: styles$1.subHeaderRow }, columns.map(function (column, index) {
+            var _a;
+            return (React__default.createElement(SubHeaderCell, __assign({ key: column.id, columnIndex: index }, ((_a = column.subheader) !== null && _a !== void 0 ? _a : { price: { value: "" } }))));
+        }))),
+        rows.map(function (row, index) { return (React__default.createElement(MobileRow, { key: "row-group-".concat(index), row: row, isLastGroup: sections.length === 0 && index === rows.length - 1 })); }),
+        sections.map(function (section, index) { return (React__default.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React__default.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__default.createElement("div", { role: "row", className: classNames(styles$1.desktopRow, (_b = {},
+            _b[styles$1.isLastRow] = isLastRow,
+            _b)) },
+        React__default.createElement("div", { role: "rowheader", className: styles$1.desktopFeatureCell },
+            React__default.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__default.createElement("div", { key: "desktop-cell-".concat(cellIndex), role: "cell", className: classNames(styles$1.cell, (_a = {},
+                    _a[styles$1.highlighted] = isPlanHighlighted$1(cellIndex),
+                    _a[styles$1.highlightedBottom] = isPlanHighlighted$1(cellIndex) && isLastRow,
+                    _a)) },
+                React__default.createElement(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__default.createElement("div", { role: "table", className: classNames(styles$1.desktopTable, className, (_b = {},
+            _b[styles$1.desktopTableSticky] = hasStickyHeader,
+            _b)), style: { "--comparison-columns": columns.length } },
+        React__default.createElement("div", { role: "row", className: classNames(styles$1.desktopHeaderRow, (_c = {},
+                _c[styles$1.stickyHeader] = hasStickyHeader,
+                _c)) },
+            React__default.createElement("div", { role: "columnheader", className: styles$1.desktopFeatureHeader },
+                React__default.createElement(VisuallyHidden, null, "Features")),
+            columns.map(function (column, index) {
+                var _a;
+                return (React__default.createElement("div", { key: column.id, role: "columnheader", className: classNames(styles$1.desktopHeaderCell, (_a = {},
+                        _a[styles$1.highlighted] = isPlanHighlighted(index),
+                        _a[styles$1.highlightedTop] = isPlanHighlighted(index),
+                        _a)) },
+                    column.promoted && (React__default.createElement("div", { className: styles$1.headerCellPromoted },
+                        React__default.createElement(Surface, { background: "dark-brand-01", paddingVertical: "16", paddingHorizontal: "24" },
+                            React__default.createElement(VisuallyHidden, null, "Promotional offer. "),
+                            React__default.createElement(Text, { size: "s" }, column.promoted)))),
+                    React__default.createElement(Heading, { size: "m" }, column.label)));
+            })),
+        (controls || hasSubheader) && (React__default.createElement("div", { role: "row", className: styles$1.desktopSubHeaderRow },
+            React__default.createElement("div", { className: styles$1.desktopControlsCell, "aria-label": "comparison table controls" }, controls),
+            columns.map(function (column, index) {
+                var _a;
+                return (React__default.createElement(SubHeaderCell, __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__default.createElement(DesktopRow, { key: "desktop-row-".concat(rowIndex), row: row, isLastRow: sections.length === 0 && rowIndex === rows.length - 1 })); }),
+        sections.map(function (section, index) { return (React__default.createElement(Section, { key: section.id, section: section, isLastSection: index === sections.length - 1, renderRow: function (row, rowIndex, isLast) { return (React__default.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(__assign(__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 = __rest(_a, ["columns", "rows", "sections", "controls", "hasBorder", "hasStickyHeader"]);
+    var _e = React__default.useMemo(function () { return groupRows(rows, sections); }, [rows, sections]), unsectioned = _e.unsectioned, resolvedSections = _e.sections;
+    return (React__default.createElement("div", __assign({ className: classNames(styles$1.wrapper, (_b = {},
+            _b[styles$1.wrapperBordered] = hasBorder,
+            _b)) }, filterAttrs(props)),
+        hasBorder && React__default.createElement("div", { className: styles$1.shadowOverlay, "aria-hidden": "true" }),
+        React__default.createElement(MobileTable, { className: styles$1.mobileLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls }),
+        React__default.createElement(DesktopTable, { className: styles$1.desktopLayout, columns: columns, rows: unsectioned, sections: resolvedSections, controls: controls, hasStickyHeader: hasStickyHeader })));
+};
+
+export { Cell, ComparisonTable, ControlCell, FeatureCell, HeaderCell, SubHeaderCell };

package/lib/ComparisonTable/styles.css

@@ -0,0 +1 @@
+.ComparisonTable-module_wrapper__SSvrL{position:relative}.ComparisonTable-module_wrapperBordered__kQeRo{border-radius:64px;padding:32px 0 0;overflow:clip}.ComparisonTable-module_shadowOverlay__unZ3Q{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 16px 0 rgba(0,0,0,0.25);pointer-events:none}.ComparisonTable-module_wrapperBordered__kQeRo .ComparisonTable-module_table__iU0Zl{padding:0 32px 32px}.ComparisonTable-module_wrapperBordered__kQeRo .ComparisonTable-module_desktopTable__IwkOh{padding:0 32px 32px}.ComparisonTable-module_table__iU0Zl{--comparison-right-edge-gap:32px;--cols:repeat(var(--comparison-columns),calc((1024px - 256px) / var(--comparison-columns))) var(--comparison-right-edge-gap);display:flex;flex-direction:column;width:100%;overflow-x:auto}.ComparisonTable-module_headerRow__BCw20,.ComparisonTable-module_subHeaderRow__h-S8Y,.ComparisonTable-module_row__VMAyW{display:grid;grid-template-columns:var(--cols);min-width:100%}.ComparisonTable-module_headerRow__BCw20::after,.ComparisonTable-module_subHeaderRow__h-S8Y::after,.ComparisonTable-module_row__VMAyW::after{content:"";grid-column:-2/-1}.ComparisonTable-module_headerCell__4bhwd{--header-cell-pad-top:var(--sem-space-padding-110);--header-cell-pad-right:var(--sem-space-padding-110);--header-cell-pad-left:var(--sem-space-padding-110);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sem-space-padding-110);background-color:var(--sem-color-bg-secondary-light-default);border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_headerCellPromoted__4oIRU{margin-top:calc(-1 * var(--header-cell-pad-top,var(--sem-space-padding-110)));margin-right:calc(-1 * var(--header-cell-pad-right,var(--sem-space-padding-110)));margin-bottom:var(--sem-space-gap-40);margin-left:calc(-1 * var(--header-cell-pad-left,var(--sem-space-padding-110)));border-radius:0;overflow:hidden;text-align:center}.ComparisonTable-module_highlightedTop__pKNy8 .ComparisonTable-module_headerCellPromoted__4oIRU{border-top-left-radius:32px;border-top-right-radius:32px}.ComparisonTable-module_stickyHeader__MJLxP{position:sticky;top:0;z-index:1;background:var(--sem-color-bg-secondary-light-default);box-shadow:0 1px 0 0 rgba(0,0,0,0.12)}.ComparisonTable-module_subHeaderCell__12J6c{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:24px 32px 32px;border-top:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}@media (min-width:636px){.ComparisonTable-module_subHeaderCell__12J6c{border-top:none}}.ComparisonTable-module_rowGroup__YuAHE{display:flex;flex-direction:column}.ComparisonTable-module_featureRow__hSa-p{display:grid;grid-template-columns:var(--cols);min-width:100%}.ComparisonTable-module_featureRowHeader__YB-eY{grid-column:1/-2;background-color:var(--sem-color-bg-secondary-light-default)}.ComparisonTable-module_row__VMAyW .ComparisonTable-module_cell__lWOm3{border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_featureRowHeaderContent__XmzGi{position:sticky;left:0;width:calc((1024px - 256px) / var(--comparison-columns))}@media (min-width:636px){.ComparisonTable-module_featureRowHeaderContent__XmzGi{position:static;width:auto}}.ComparisonTable-module_controlRow__Lf01P{display:grid;grid-template-columns:var(--cols);min-width:100%}.ComparisonTable-module_controlCell__uauzO{grid-column:1/-2;display:flex;padding:16px}.ComparisonTable-module_controlCellContent__welDu{display:flex;position:sticky;left:0;width:calc((1024px - 256px) / var(--comparison-columns));flex-wrap:wrap;gap:var(--sem-space-gap-60);align-items:center}@media (min-width:636px){.ComparisonTable-module_controlCell__uauzO{padding:16px 16px 48px 0}.ComparisonTable-module_controlCellContent__welDu{position:static;width:auto}}.ComparisonTable-module_cell__lWOm3{display:flex;align-items:center;justify-content:center;padding:16px 32px;text-align:center}.ComparisonTable-module_highlighted__WLAu4{background:var(--surface-colors-bg-light-brand-02)}.ComparisonTable-module_highlightedTop__pKNy8{border-top-left-radius:32px;border-top-right-radius:32px}.ComparisonTable-module_highlightedBottom__7PPJO{border-bottom-left-radius:32px;border-bottom-right-radius:32px}.ComparisonTable-module_mobileLayout__GkFfO{display:flex}.ComparisonTable-module_desktopLayout__k3qMZ{display:none}@media (min-width:636px){.ComparisonTable-module_mobileLayout__GkFfO{display:none}.ComparisonTable-module_desktopLayout__k3qMZ{display:flex}}.ComparisonTable-module_desktopTable__IwkOh{--comparison-right-edge-gap:32px;--desktop-cols:minmax(144px,256px) repeat(var(--comparison-columns),calc((1024px - 256px) / var(--comparison-columns))) var(--comparison-right-edge-gap);flex-direction:column;width:100%;overflow-x:auto}.ComparisonTable-module_desktopTableSticky__GflmR{max-height:100dvh;overflow-y:auto}@media (min-width:1024px){.ComparisonTable-module_desktopTable__IwkOh{--comparison-right-edge-gap:0px;--desktop-cols:minmax(144px,256px) repeat(var(--comparison-columns),minmax(0,1fr)) var(--comparison-right-edge-gap)}}.ComparisonTable-module_desktopHeaderRow__BmfJz,.ComparisonTable-module_desktopSubHeaderRow__4KeVU,.ComparisonTable-module_desktopRow__XrYwQ{display:grid;grid-template-columns:var(--desktop-cols);min-width:100%}.ComparisonTable-module_desktopHeaderRow__BmfJz::after,.ComparisonTable-module_desktopSubHeaderRow__4KeVU::after,.ComparisonTable-module_desktopRow__XrYwQ::after{content:"";grid-column:-2/-1}.ComparisonTable-module_desktopFeatureHeader__M5Aa-,.ComparisonTable-module_desktopHeaderCell__fEYWe{--header-cell-pad-top:var(--sem-space-padding-110);--header-cell-pad-right:0;--header-cell-pad-left:var(--sem-space-padding-110);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sem-space-padding-110) 0 var(--sem-space-padding-110) var(--sem-space-padding-110);background-color:var(--sem-color-bg-secondary-light-default);border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_desktopControlsCell__5fjOI{display:flex;flex-direction:column;gap:var(--sem-space-gap-60);justify-content:flex-end;padding:16px 16px 48px 0;border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_desktopFeatureCell__i5MiH{border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_desktopRow__XrYwQ .ComparisonTable-module_cell__lWOm3{border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal)}.ComparisonTable-module_desktopHeaderCell__fEYWe.ComparisonTable-module_highlighted__WLAu4{background:var(--surface-colors-bg-light-brand-02)}.ComparisonTable-module_sectionToggleRow__XDwt4{display:grid;min-width:100%}.ComparisonTable-module_table__iU0Zl .ComparisonTable-module_sectionToggleRow__XDwt4{grid-template-columns:var(--cols)}.ComparisonTable-module_desktopTable__IwkOh .ComparisonTable-module_sectionToggleRow__XDwt4{grid-template-columns:var(--desktop-cols)}.ComparisonTable-module_sectionToggleRow__XDwt4 .ComparisonTable-module_sectionToggle__GR-Xz{grid-column:1/-2}.ComparisonTable-module_sectionContent__GuogA{display:flex;flex-direction:column}.ComparisonTable-module_sectionToggle__GR-Xz{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:var(--sem-space-padding-110);padding-left:0;background:var(--sem-color-bg-secondary-light-default);border:none;border-bottom:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);text-align:left;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ComparisonTable-module_sectionToggleContent__p0ouX{display:flex;position:sticky;left:0;width:-moz-fit-content;width:fit-content;align-items:center;gap:var(--sem-space-gap-40)}.ComparisonTable-module_sectionToggleOpen__ZFdLO{border-bottom:none}.ComparisonTable-module_sectionChevron__0kmLs{display:inline-flex;transition:transform 0.2s ease}.ComparisonTable-module_sectionChevronOpen__m7jv0{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.ComparisonTable-module_sectionChevron__0kmLs{transition:none}}.ComparisonTable-module_rowGroup__YuAHE.ComparisonTable-module_isLastRow__coPlk:last-child .ComparisonTable-module_row__VMAyW .ComparisonTable-module_cell__lWOm3{border-bottom:none}.ComparisonTable-module_desktopRow__XrYwQ.ComparisonTable-module_isLastRow__coPlk .ComparisonTable-module_desktopFeatureCell__i5MiH,.ComparisonTable-module_desktopRow__XrYwQ.ComparisonTable-module_isLastRow__coPlk .ComparisonTable-module_cell__lWOm3{border-bottom:none}.ComparisonTable-module_sectionToggleRow__XDwt4.ComparisonTable-module_isLastRow__coPlk .ComparisonTable-module_sectionToggle__GR-Xz{border-bottom:none}

package/lib/FeaturePost/FeaturePost.cjs

@@ -2201,7 +2201,7 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-var styles = {"labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
+var styles = {"labelContainer":"FeaturePost-module_labelContainer__j-yf2","labelText":"FeaturePost-module_labelText__DqBB3","labelWordWrap":"FeaturePost-module_labelWordWrap__vKD6M","labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
 
 var Image = function (_a) {
     var sources = _a.sources, title = _a.title, description = _a.description, props = tslib_es6.__rest(_a, ["sources", "title", "description"]);
@@ -2241,21 +2241,22 @@ var MediaContent = function (_a) {
  * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
  * */
 var FeaturePost = function (_a) {
-    var _b;
-    var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
+    var _b, _c;
+    var _d;
+    var heading = _a.heading, id = _a.id, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _f = _a.isReverseOrder, isReverseOrder = _f === void 0 ? false : _f, props = tslib_es6.__rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
     var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")"));
     return (React.createElement("div", tslib_es6.__assign({ "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
             _b[styles.featurePostReversed] = isReverseOrder,
             _b)) }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: styles.col },
             React.createElement("div", { className: styles.contentContainer },
-                label && (React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },
-                    React.createElement(Grid.GridRow, { align: "baseline" },
-                        React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
-                            React.createElement(Heading.Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
-                        React.createElement(Grid.GridCol, { xs: 12, m: "auto" },
-                            React.createElement("div", { className: styles.labelDate },
-                                React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date)))))),
+                label && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: styles.labelContainer },
+                        React.createElement("span", { className: index.classNames(styles.labelText, (_c = {},
+                                _c[styles.labelWordWrap] = isHeadingWordWrap,
+                                _c)) }, label.text),
+                        React.createElement("div", { className: styles.labelDate },
+                            React.createElement(Text.Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React.createElement("span", null, label.date))))),
                     React.createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
                 React.createElement(Heading.Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
                 !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
@@ -2268,7 +2269,7 @@ var FeaturePost = function (_a) {
                         React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
                         React.createElement(Author.Author, tslib_es6.__assign({}, footer.author)))),
                     React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
-                    React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({ buttonStyle: "secondary" }, footer.button)))),
+                    React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({}, footer.button, { buttonStyle: (_d = footer.button.buttonStyle) !== null && _d !== void 0 ? _d : "secondary" })))),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
                     React.createElement(VerticalSpace.VerticalSpace, { size: "40" }),
                     React.createElement(Grid.Grid, { isGutterless: true, isFluid: true },

package/lib/FeaturePost/FeaturePost.mjs

@@ -2199,7 +2199,7 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-var styles = {"labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
+var styles = {"labelContainer":"FeaturePost-module_labelContainer__j-yf2","labelText":"FeaturePost-module_labelText__DqBB3","labelWordWrap":"FeaturePost-module_labelWordWrap__vKD6M","labelDate":"FeaturePost-module_labelDate__NXOgY","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__GI-ag","imgWrapper":"FeaturePost-module_imgWrapper__r6omd","featurePost":"FeaturePost-module_featurePost__9jY21","featurePostReversed":"FeaturePost-module_featurePostReversed__WQRXm","contentContainer":"FeaturePost-module_contentContainer__kdus7","col":"FeaturePost-module_col__eW8gY"};
 
 var Image = function (_a) {
     var sources = _a.sources, title = _a.title, description = _a.description, props = __rest(_a, ["sources", "title", "description"]);
@@ -2239,21 +2239,22 @@ var MediaContent = function (_a) {
  * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
  * */
 var FeaturePost = function (_a) {
-    var _b;
-    var heading = _a.heading, id = _a.id, _c = _a.headingLevel, headingLevel = _c === void 0 ? "2" : _c, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isReverseOrder, isReverseOrder = _d === void 0 ? false : _d, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
+    var _b, _c;
+    var _d;
+    var heading = _a.heading, id = _a.id, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, video = _a.video, isHeadingWordWrap = _a.isHeadingWordWrap, _f = _a.isReverseOrder, isReverseOrder = _f === void 0 ? false : _f, props = __rest(_a, ["heading", "id", "headingLevel", "label", "image", "content", "footer", "video", "isHeadingWordWrap", "isReverseOrder"]);
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
     return (React__default.createElement("div", __assign({ "data-testid": "feature-post", className: classNames(styles.featurePost, (_b = {},
             _b[styles.featurePostReversed] = isReverseOrder,
             _b)) }, filterAttrs(props)),
         React__default.createElement("div", { className: styles.col },
             React__default.createElement("div", { className: styles.contentContainer },
-                label && (React__default.createElement(Grid, { isGutterless: true, isFluid: true },
-                    React__default.createElement(GridRow, { align: "baseline" },
-                        React__default.createElement(GridCol, { xs: 12, m: "auto" },
-                            React__default.createElement(Heading, { size: "xxs", fontStyle: "overline" }, label.text)),
-                        React__default.createElement(GridCol, { xs: 12, m: "auto" },
-                            React__default.createElement("div", { className: styles.labelDate },
-                                React__default.createElement(Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React__default.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React__default.createElement("span", null, label.date)))))),
+                label && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: styles.labelContainer },
+                        React__default.createElement("span", { className: classNames(styles.labelText, (_c = {},
+                                _c[styles.labelWordWrap] = isHeadingWordWrap,
+                                _c)) }, label.text),
+                        React__default.createElement("div", { className: styles.labelDate },
+                            React__default.createElement(Text, { size: "xs", tone: "muted" }, isDate(label.date) ? (React__default.createElement("time", { dateTime: format(label.date, "yyyy-MM-dd") }, format(label.date, "d MMMM yyyy"))) : (React__default.createElement("span", null, label.date))))),
                     React__default.createElement(VerticalSpace, { size: "24" }))),
                 React__default.createElement(Heading, { id: id, level: headingLevel, isWordWrap: isHeadingWordWrap, size: "xl" }, heading),
                 !isMinWidthArcBreakpointM && (React__default.createElement("div", { "data-testid": "mobile-img" },
@@ -2266,7 +2267,7 @@ var FeaturePost = function (_a) {
                         React__default.createElement(VerticalSpace, { size: "40" }),
                         React__default.createElement(Author, __assign({}, footer.author)))),
                     React__default.createElement(VerticalSpace, { size: "40" }),
-                    React__default.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
+                    React__default.createElement(ButtonV2, __assign({}, footer.button, { buttonStyle: (_d = footer.button.buttonStyle) !== null && _d !== void 0 ? _d : "secondary" })))),
                 (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(VerticalSpace, { size: "40" }),
                     React__default.createElement(Grid, { isGutterless: true, isFluid: true },

package/lib/FeaturePost/styles.css

@@ -1 +1 @@
-.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20);text-transform:uppercase}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}
+.FeaturePost-module_labelContainer__j-yf2{display:flex;flex-direction:column;align-items:baseline}.FeaturePost-module_labelText__DqBB3{max-width:100%;min-width:0;font:var(--sem-type-label-overline);letter-spacing:0.1em;text-transform:uppercase}.FeaturePost-module_labelWordWrap__vKD6M{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word}.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20);text-transform:uppercase}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelContainer__j-yf2{flex-direction:row;flex-wrap:wrap;-moz-column-gap:var(--sem-space-padding-70);column-gap:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}

package/lib/Highlights/Highlights.cjs

@@ -52,19 +52,19 @@ var HighlightList = function (_a) {
  * Both two and three column options are available.
  */
 var Highlights = function (_a) {
-    var _b, _c, _d;
-    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
+    var _b, _c, _d, _e;
+    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _f = _a.columns, columns = _f === void 0 ? "2" : _f, cta = _a.cta, props = tslib_es6.__rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
     var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
     return (React.createElement("div", tslib_es6.__assign({}, filterAttrs.filterAttrs(props)),
         React.createElement(SectionHeading.SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
         React.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
         cta && (React.createElement(React.Fragment, null,
             React.createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React.createElement(ButtonV2.ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, target: cta.target, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
-                    ? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill.BtIconArrowRightFill)
-                    : undefined, iconActive: cta.buttonStyle === "compact"
-                    ? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill.BtIconArrowRightFill)
-                    : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
+            React.createElement(ButtonV2.ButtonV2, tslib_es6.__assign({}, cta, { size: "m", buttonStyle: (_b = cta.buttonStyle) !== null && _b !== void 0 ? _b : "secondary", icon: cta.buttonStyle === "compact"
+                    ? ((_c = cta.icon) !== null && _c !== void 0 ? _c : BtIconArrowRightFill.BtIconArrowRightFill)
+                    : cta.icon, iconActive: cta.buttonStyle === "compact"
+                    ? ((_d = cta.iconActive) !== null && _d !== void 0 ? _d : BtIconArrowRightFill.BtIconArrowRightFill)
+                    : cta.iconActive, iconPosition: (_e = cta.iconPosition) !== null && _e !== void 0 ? _e : "beforeText" }))))));
 };
 
 exports.Highlights = Highlights;

package/lib/Highlights/Highlights.mjs

@@ -50,19 +50,19 @@ var HighlightList = function (_a) {
  * Both two and three column options are available.
  */
 var Highlights = function (_a) {
-    var _b, _c, _d;
-    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _e = _a.columns, columns = _e === void 0 ? "2" : _e, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
+    var _b, _c, _d, _e;
+    var heading = _a.heading, headingLevel = _a.headingLevel, id = _a.id, isHeadingWordWrap = _a.isHeadingWordWrap, content = _a.content, listItems = _a.listItems, _f = _a.columns, columns = _f === void 0 ? "2" : _f, cta = _a.cta, props = __rest(_a, ["heading", "headingLevel", "id", "isHeadingWordWrap", "content", "listItems", "columns", "cta"]);
     var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
     return (React__default.createElement("div", __assign({}, filterAttrs(props)),
         React__default.createElement(SectionHeading, { isPadded: true, id: id, "data-testid": "highlights-header", heading: heading, headingLevel: headingLevel, isHeadingWordWrap: isHeadingWordWrap, content: content }),
         React__default.createElement(HighlightList, { listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs, headingLevel: headingLevel }),
         cta && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(VerticalSpace, { size: "24" }),
-            React__default.createElement(ButtonV2, { label: cta.label, href: cta.href, onClick: cta.onClick, target: cta.target, size: "m", ariaLabel: cta.ariaLabel, buttonStyle: cta.buttonStyle, icon: cta.buttonStyle === "compact"
-                    ? ((_b = cta.icon) !== null && _b !== void 0 ? _b : BtIconArrowRightFill)
-                    : undefined, iconActive: cta.buttonStyle === "compact"
-                    ? ((_c = cta.iconActive) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
-                    : undefined, iconPosition: (_d = cta.iconPosition) !== null && _d !== void 0 ? _d : "beforeText" })))));
+            React__default.createElement(ButtonV2, __assign({}, cta, { size: "m", buttonStyle: (_b = cta.buttonStyle) !== null && _b !== void 0 ? _b : "secondary", icon: cta.buttonStyle === "compact"
+                    ? ((_c = cta.icon) !== null && _c !== void 0 ? _c : BtIconArrowRightFill)
+                    : cta.icon, iconActive: cta.buttonStyle === "compact"
+                    ? ((_d = cta.iconActive) !== null && _d !== void 0 ? _d : BtIconArrowRightFill)
+                    : cta.iconActive, iconPosition: (_e = cta.iconPosition) !== null && _e !== void 0 ? _e : "beforeText" }))))));
 };
 
 export { Highlights };

package/lib/ProductCard/ProductCard.cjs

@@ -11,67 +11,45 @@ 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 ProductCardPriceIncrease = require('../_shared/cjs/ProductCardPriceIncrease-BP39clav.cjs');
 
-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 styles$1 = {"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 },
+    return (React.createElement("div", tslib_es6.__assign({ className: styles$1.productCard }, filterAttrs.filterAttrs(props), { role: "group", "aria-labelledby": headingId }),
+        React.createElement("div", { className: styles$1.productCardTop },
+            promoted && (React.createElement("div", { className: styles$1.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("div", { className: styles$1.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("div", { className: styles$1.productCardBottom },
+            divider ? (React.createElement("div", { className: styles$1.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("div", { className: styles$1.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 styles = {"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("ul", { className: styles.benefitList }, benefits.map(function (benefit, index) { return (React.createElement("li", { key: index, className: styles.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.ProductCardPrice = ProductCardPriceIncrease.ProductCardPrice;
+exports.ProductCardPriceIncrease = ProductCardPriceIncrease.ProductCardPriceIncrease;
 exports.ProductCard = ProductCard;
 exports.ProductCardBenefits = ProductCardBenefits;
-exports.ProductCardPrice = ProductCardPrice;
-exports.ProductCardPriceIncrease = ProductCardPriceIncrease;