@automattic/plans-grid-next 1.0.0

package/dist/cjs/components/features-grid/style.scss

@@ -0,0 +1,630 @@
+@import "../../shared";
+
+.plan-features-2023-grid__header {
+	display: flex;
+	position: relative;
+	align-items: flex-start;
+	padding-inline: 20px 0;
+	padding-block: 0 8px;
+	background-color: var(--color-surface);
+	justify-content: flex-start;
+	font-weight: 400;
+}
+
+.plan-features-2023-grid__header-logo {
+	padding-left: 20px;
+
+	@include plans-grid-medium-large {
+		margin-top: 36px;
+	}
+
+	.plan-features-2023-grid__table-top & {
+		@include plans-grid-large {
+			margin-top: 62px;
+		}
+	}
+}
+
+.plan-features-2023-grid__plan-logo {
+	margin-bottom: 9px;
+}
+
+.plan-features-2023-grid__header-text {
+	flex: 1;
+	padding: 6px 0 0;
+}
+
+.plan-features-2023-grid__actions-signup-plan-text {
+	display: block;
+}
+
+.plan-features-2023-grid__actions-downgrade-context-mobile {
+	font-size: $font-body-extra-small;
+	margin-top: 10px;
+}
+
+.plans-grid-next-features-grid__mobile-plan-card-foldable-container {
+	&.foldable-card.card {
+		box-shadow: unset;
+		margin-top: 24px;
+
+		.foldable-card__main {
+			font-weight: 500;
+			font-size: $font-body-small;
+			letter-spacing: -0.24px;
+			line-height: 20px;
+
+			* {
+				color: inherit;
+			}
+
+			.foldable-card__expand .gridicon {
+				width: 14px;
+				fill: currentColor;
+			}
+		}
+
+		&.is-compact .foldable-card__header {
+			padding: 0 20px;
+		}
+
+		&.is-expanded {
+			margin-top: 24px;
+
+			.foldable-card__content {
+				border-top: none;
+				padding: 12px 0 0;
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-free-plan & {
+			.foldable-card__main {
+				color: var(--studio-blue-50);
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-personal-plan & {
+			.foldable-card__main {
+				color: var(--studio-blue-60);
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-premium-plan & {
+			.foldable-card__main {
+				color: var(--studio-blue-70);
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-business-plan & {
+			.foldable-card__main {
+				color: var(--studio-woocommerce-purple-50);
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-ecommerce-plan & {
+			.foldable-card__main {
+				color: var(--studio-woocommerce-purple-60);
+			}
+		}
+
+		.plans-grid-next-features-grid__mobile-plan-card.is-wpcom-enterprise-plan & {
+			.foldable-card__main {
+				color: var(--studio-gray-80);
+			}
+		}
+	}
+}
+
+.plans-grid-next-features-grid__mobile-plan-card-no-foldable-container {
+	margin-top: 24px;
+}
+
+.plan-features-2023-grid__mobile-view {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 20px;
+	margin: 0 auto;
+	max-width: $mobile-card-max-width;
+
+	.plans-grid-next-features-grid__mobile-plan-card {
+		background-color: var(--studio-white);
+		border: 1px solid #e0e0e0;
+		/* stylelint-disable-next-line */
+		border-radius: 5px;
+		padding: 38px 0 20px 0;
+
+		/*
+		 * TODO: Remove/refactor this once we have a better way to handle.
+		 * .is-section-plans refers to external context.
+		 */
+		@include plans-grid-medium-large {
+			.is-section-plans & {
+				margin-left: 0;
+				margin-right: 0;
+			}
+		}
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+
+		.plan-features-2023-grid__table-item {
+			.plans-grid-next-plan-storage {
+				padding-top: 0;
+			}
+		}
+	}
+
+	.plan-features-2023-grid__highlighted-feature .plan-features-2023-grid__item {
+		padding-bottom: 24px;
+	}
+}
+
+.plan-features-2023-grid__table {
+	font-size: $font-body-small;
+	color: var(--color-text-subtle);
+	table-layout: fixed;
+	border: 1px solid #e0e0e0;
+	border-radius: 5px; /* stylelint-disable-line */
+	background-color: #fff;
+	margin: 0 auto;
+	border-spacing: 0;
+	width: 100%;
+
+	&.has-highlighted-plan {
+		// margin (not padding) to not break internal borders/layout
+		margin-top: 35px; // enough to cover `plans-grid__popular-badge` repositioning (top: -35px)
+	}
+
+	&.has-1-cols {
+		max-width: $table-cell-max-width;
+	}
+
+	&.has-2-cols {
+		max-width: $table-cell-max-width * 2;
+	}
+
+	&.has-3-cols {
+		max-width: $table-cell-max-width * 3;
+	}
+
+	&.has-4-cols {
+		max-width: $table-cell-max-width * 4;
+	}
+}
+
+.plan-features-2023-grid__header-title {
+	margin-top: 0;
+	margin-bottom: 5px;
+	font-size: $font-title-large;
+	line-height: 0.7;
+	color: var(--studio-gray-100);
+	font-weight: 400;
+	@include onboarding-font-recoleta;
+	letter-spacing: 0;
+}
+
+.plan-features-2023-grid__header-tagline {
+	font-size: $font-body;
+	line-height: 24px;
+	color: var(--studio-gray-80);
+	font-weight: 400;
+	padding: 0 20px 24px 20px;
+
+	@include plans-grid-medium-large {
+		font-size: $font-body-small;
+		line-height: 20px;
+	}
+
+	@include plans-grid-large {
+		font-size: 0.813rem; /* stylelint-disable-line */
+		line-height: 16px;
+		padding-bottom: 8px;
+		min-height: 50px;
+	}
+}
+
+.plan-features-2023-grid__table-item {
+	text-align: left;
+	transition: opacity 0.05s;
+	border: none;
+	background-color: var(--color-surface);
+	position: relative;
+	vertical-align: top;
+
+	.is-bold {
+		font-weight: 600;
+	}
+
+	&.is-top-buttons {
+		padding: 0 20px;
+		@include plans-grid-medium-large {
+			padding-top: 16px;
+			padding-bottom: 16px;
+		}
+	}
+
+	@include plans-grid-medium-large {
+		// The .plan-features-2023-grid__table-item is used to render the plan spotlight which doesn't
+		// use a table layout, but borders are only appropriate in table layout.
+		&:is(td) {
+			border-left: solid 1px #e0e0e0;
+		}
+	}
+}
+
+.plan-features-2023-grid__desktop-view,
+.plan-features-2023-grid__tablet-view {
+	.plan-features-2023-grid__table-item {
+		max-width: $table-cell-max-width;
+	}
+}
+
+.plan-features-2023-grid__plan-spotlight {
+	background-color: var(--studio-white);
+	position: relative;
+	max-width: 100%;
+	margin-bottom: 64px;
+	border: 1px solid #e0e0e0;
+	/* stylelint-disable-next-line scales/radii */
+	border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+
+	div.spotlight-plan__buttons  {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	div.plan-features-2023-grid__table-item {
+		border: none;
+
+		&.plan-features-2023-grid__header-billing-info {
+			padding-bottom: 16px;
+
+			@include plans-grid-medium-large {
+				padding-bottom: 16px;
+			}
+		}
+
+		&.popular-plan-parent-class .plan-features-2023-grid__popular-badge {
+			padding-bottom: 23px;
+			@include plans-grid-medium-large {
+				position: unset;
+				border: none;
+			}
+		}
+
+		.plan-features-2023-grid__header-title {
+			margin-top: 24px;
+		}
+
+		.plan-features-2023-grid__header-tagline {
+			min-height: 0;
+			padding-bottom: 16px;
+		}
+
+		.plan-features-2023-grid__header-logo {
+			display: none;
+		}
+	}
+}
+
+.plans-grid-next-features-grid__feature-group-title {
+	font-weight: 600;
+	color: var(--studio-gray-80);
+}
+
+.plans-grid-next-features-grid__feature-group-row {
+	> .plan-features-2023-grid__table-item {
+		padding-top: 24px;
+	}
+
+	/**
+	 * This is only relevant to match the styling for the Enterprise plan's parter logos,
+	 * which should probably be cleaned-up/refactored instead
+	 */
+	&.is-first-feature-group-row > .plan-features-2023-grid__table-item {
+		@include plans-grid-medium-large {
+			padding-top: 14px;
+		}
+	}
+
+	&.is-reduced-feature-group-spacing > .plan-features-2023-grid__table-item {
+		padding-top: 0;
+	}
+}
+
+.plan-features-2023-grid__item-info {
+	display: flex;
+	flex-direction: column;
+	flex: 1 0 0;
+	width: 100%;
+
+	.plan-features-2023-grid__item-title {
+		color: var(--studio-gray-80);
+		font-size: $font-body-small;
+		font-weight: 400;
+		line-height: 20px;
+		overflow-wrap: break-word;
+		margin: 0;
+		flex: 1 0 0;
+		width: 100%;
+
+		&.is-bold {
+			font-weight: 600;
+		}
+
+		@include plans-grid-medium-large {
+			font-size: $font-body-extra-small;
+			line-height: 16px;
+		}
+	}
+
+	&:not(.is-available) {
+		color: var(--studio-gray-20);
+
+		.plan-features-2023-grid__item-title {
+			text-decoration: line-through;
+		}
+	}
+
+	.plan-features-2023-grid__item-sub-feature-list {
+		margin-bottom: 0;
+		& > li {
+			margin-top: 8px;
+		}
+	}
+}
+
+.plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
+	border-bottom: solid 1px var(--color-neutral-5);
+
+	&.is-last-feature {
+		.plan-features-2023-grid__item-info {
+			padding-bottom: 30px;
+		}
+	}
+}
+
+.plan-features-2023-grid__item {
+	padding: 0 20px 12px;
+	text-align: left;
+
+	&.plan-features-2023-grid__item-available {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+
+		& .plan-features-2023-grid__item-info-container {
+			display: flex;
+		}
+	}
+
+	.plan-features-2023-grid__common-title + & {
+		padding-top: 24px;
+
+		@include plans-grid-medium-large {
+			padding-top: 14px;
+		}
+	}
+}
+
+.plan-features-2023-grid__item-logos {
+	padding-top: 28px;
+
+	@include plans-grid-medium-large {
+		margin-right: -16px;
+		padding-top: 18px;
+	}
+}
+
+.plan-features-2023-grid__content {
+	.plan-features-2023-grid__table-bottom {
+		margin-top: 54px;
+	}
+}
+
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.plan-features-2023-grid__table-item {
+	.plan-features-2023-grid__common-title {
+		@include plans-grid-medium-large {
+			margin-top: 20px;
+			font-size: $font-body-extra-small;
+		}
+	}
+
+	&.plan-features-2023-grid__header-billing-info {
+		@include plans-grid-medium-large {
+			padding-bottom: 0;
+		}
+
+		.plans-grid-next__billing-timeframe-vip-price {
+			@include plans-grid-medium-large {
+				font-size: $font-body-small;
+				line-height: 20px;
+			}
+
+			@include plans-grid-large {
+				font-size: $font-body-extra-small;
+				line-height: 16px;
+			}
+		}
+	}
+
+	&.popular-plan-parent-class {
+		.plan-features-2023-grid__popular-badge {
+			@include plans-grid-medium-large {
+				position: absolute;
+				top: -35px; // at -35px this covers the top border of the table, including its top-right radius, as intended
+				right: -1px;
+				border-color: #e0e0e0;
+				border-width: 1px 1px 0 1px;
+				/* stylelint-disable-next-line scales/radii */
+				border-radius: 5px 5px 0 0;
+				border-style: solid;
+				padding-top: 20px;
+				margin-bottom: 0;
+
+				.plans-grid__plan-pill {
+					transform: translate(20px, 0);
+				}
+			}
+		}
+	}
+}
+
+/**
+ * TODO clk consolidate with the rest above
+ */
+.plans-grid-next {
+	// insignificant padding important to prevent parent/child margins from collapsing
+	// creates a barrier between parent/child elements
+	// the alternative (oveflow: auto) would break the sticky behavior on the headers
+	padding: 1px;
+
+	.plan-features-2023-grid__table-item {
+		border-right: none;
+		background-color: transparent;
+
+		// The extra `:is(td)` is needed so this rule is at the same specificity as the rule
+		// which originally added the border-left, which uses an `:is` selector.
+		&:first-of-type:is(td) {
+			border-left: none;
+		}
+
+		&.plan-features-2023-grid__header-billing-info {
+			color: var(--studio-gray-50);
+			font-weight: 400;
+			font-size: $font-body-extra-small;
+			padding: 0 19px 24px 20px;
+
+			.plans-grid-next__billing-timeframe-vip-price {
+				font-size: $font-body;
+				line-height: 24px;
+				font-weight: 400;
+				color: var(--studio-gray-80);
+			}
+		}
+
+		&.popular-plan-parent-class {
+			position: relative;
+
+			.plan-features-2023-grid__popular-badge {
+				margin-bottom: 24px;
+				width: 100%;
+				background: #fff;
+				color: #fff;
+				padding: 0 0 17px;
+
+				.plans-grid__plan-pill {
+					font-family: Inter, $sans;
+					font-size: 0.75rem;
+					font-weight: 500;
+					color: var(--studio-white);
+					letter-spacing: 0.2px;
+					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+					line-height: 1.25rem;
+					padding: 0 9px;
+					right: unset;
+					left: unset;
+					top: unset;
+					bottom: 0;
+					border-radius: 4px;
+					background-color: var(--studio-gray-80);
+					transform: translate(20px, -50px);
+					text-transform: unset;
+				}
+
+				&:not(.with-plan-logo) {
+					.plans-grid__plan-pill {
+						transform: translate(20px, 0);
+					}
+				}
+
+				&.is-current-plan {
+					color: unset;
+					.plans-grid__plan-pill {
+						background: #e0e0e0;
+						color: var(--studio-gray-100);
+					}
+				}
+			}
+
+			&.is-left-of-highlight {
+				&:not(.is-last-in-row) {
+					.plan-features-2023-grid__popular-badge {
+						border-top-right-radius: 0;
+					}
+				}
+			}
+			&.is-right-of-highlight {
+				&:not(.is-first-in-row) {
+					.plan-features-2023-grid__popular-badge {
+						border-top-left-radius: 0;
+					}
+				}
+			}
+		}
+
+		.plan-features-2023-grid__jp-logo {
+			padding: 24px 0 6px 20px;
+		}
+
+		&.plans-grid-next-plan-storage {
+			padding: 24px 20px 38px 20px;
+		}
+
+		.plan-features-2023-grid__common-title {
+			font-weight: 600;
+			font-size: $font-body-small;
+			padding: 0 20px;
+
+			&.is-personal-plan {
+				color: var(--studio-blue-60);
+			}
+
+			&.is-premium-plan {
+				color: var(--studio-blue-70);
+			}
+
+			&.is-business-plan {
+				color: var(--studio-woocommerce-purple-50);
+			}
+
+			&.is-ecommerce-plan {
+				color: var(--studio-woocommerce-purple-60);
+			}
+
+			&.is-wpcom-enterprise-grid-plan {
+				color: var(--studio-gray-80);
+			}
+		}
+	}
+
+	.is-sticky-top-buttons-row {
+		.is-top-buttons.plan-features-2023-grid__table-item {
+			border: none;
+			background-color: #f9f9f9;
+			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04);
+		}
+	}
+
+	.plan-features-2023-grid__header {
+		background-color: transparent;
+	}
+
+	.plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
+		border-bottom: none;
+	}
+
+	.plan-features-2023-grid__item.plan-features-2023-grid__item-available {
+		.plan-features-2023-grid__item-annual-plan-container
+		.plan-features-2023-grid__item-annual-plan {
+			color: var(--studio-orange-40);
+		}
+	}
+}

package/dist/cjs/components/features-grid/table.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_1 = require("@wordpress/element");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const grid_context_1 = require("../../grid-context");
+const sticky_container_1 = require("../sticky-container");
+const billing_timeframes_1 = tslib_1.__importDefault(require("./billing-timeframes"));
+const enterprise_features_1 = tslib_1.__importDefault(require("./enterprise-features"));
+const plan_features_list_1 = tslib_1.__importDefault(require("./plan-features-list"));
+const plan_headers_1 = tslib_1.__importDefault(require("./plan-headers"));
+const plan_logos_1 = tslib_1.__importDefault(require("./plan-logos"));
+const plan_prices_1 = tslib_1.__importDefault(require("./plan-prices"));
+const plan_tagline_1 = tslib_1.__importDefault(require("./plan-tagline"));
+const previous_features_included_title_1 = tslib_1.__importDefault(require("./previous-features-included-title"));
+const top_buttons_1 = tslib_1.__importDefault(require("./top-buttons"));
+const Table = ({ currentSitePlanSlug, generatedWPComSubdomain, gridPlanForSpotlight, hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan, isInSignup, onStorageAddOnClick, paidDomainName, planActionOverrides, renderedGridPlans, selectedFeature, showRefundPeriod, showUpgradeableStorage, stickyRowOffset, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const { featureGroupMap, enableCategorisedFeatures, enableLogosOnlyForEnterprisePlan, enableReducedFeatureGroupSpacing, } = (0, grid_context_1.usePlansGridContext)();
+    const featureGroups = (0, element_1.useMemo)(() => Object.keys(featureGroupMap), [featureGroupMap]);
+    // Do not render the spotlight plan if it exists
+    const gridPlansWithoutSpotlight = (0, element_1.useMemo)(() => !gridPlanForSpotlight
+        ? renderedGridPlans
+        : renderedGridPlans.filter(({ planSlug }) => gridPlanForSpotlight.planSlug !== planSlug), [renderedGridPlans, gridPlanForSpotlight]);
+    // Search for a plan with a highlight label. Some margin is applied in the stylesheet to cover the badges/labels
+    const hasHighlightedPlan = gridPlansWithoutSpotlight.some(({ highlightLabel }) => !!highlightLabel);
+    const tableClasses = (0, clsx_1.default)('plan-features-2023-grid__table', `has-${gridPlansWithoutSpotlight.length}-cols`, {
+        'has-highlighted-plan': hasHighlightedPlan,
+    });
+    return ((0, jsx_runtime_1.jsxs)("table", { className: tableClasses, children: [(0, jsx_runtime_1.jsx)("caption", { className: "plan-features-2023-grid__screen-reader-text screen-reader-text", children: translate('Available plans to choose from') }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(plan_logos_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, isInSignup: isInSignup, options: { isTableCell: true } }) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(plan_headers_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(plan_tagline_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(plan_prices_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true }, currentSitePlanSlug: currentSitePlanSlug }) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(billing_timeframes_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, showRefundPeriod: showRefundPeriod, options: { isTableCell: true } }) }), (0, jsx_runtime_1.jsx)(sticky_container_1.StickyContainer, { stickyClass: "is-sticky-top-buttons-row", element: "tr", stickyOffset: stickyRowOffset, zIndex: 2, children: (isStuck) => ((0, jsx_runtime_1.jsx)(top_buttons_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isStuck }, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides })) }), (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(enterprise_features_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isLogosOnly: enableLogosOnlyForEnterprisePlan } }) }), !enableCategorisedFeatures && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(previous_features_included_title_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) })), featureGroups.map((featureGroupSlug, featureGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, clsx_1.default)('plans-grid-next-features-grid__feature-group-row', {
+                            'is-first-feature-group-row': featureGroupIndex === 0,
+                            'is-reduced-feature-group-spacing': enableReducedFeatureGroupSpacing,
+                        }), children: (0, jsx_runtime_1.jsx)(plan_features_list_1.default, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true }, paidDomainName: paidDomainName, hideUnavailableFeatures: hideUnavailableFeatures, selectedFeature: selectedFeature, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan, featureGroupSlug: featureGroupSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage }) }, featureGroupSlug)))] })] }));
+};
+exports.default = Table;
+//# sourceMappingURL=table.js.map

package/dist/cjs/components/features-grid/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/features-grid/table.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/features-grid/top-buttons.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const plan_div_td_container_1 = tslib_1.__importDefault(require("../plan-div-td-container"));
+const action_button_1 = tslib_1.__importDefault(require("../shared/action-button"));
+const TopButtons = ({ currentSitePlanSlug, isInSignup, options, planActionOverrides, renderedGridPlans, }) => {
+    return renderedGridPlans.map(({ planSlug, availableForPurchase, isMonthlyPlan }) => {
+        const classes = (0, clsx_1.default)('plan-features-2023-grid__table-item', 'is-top-buttons');
+        return ((0, jsx_runtime_1.jsx)(plan_div_td_container_1.default, { className: classes, isTableCell: options?.isTableCell, children: (0, jsx_runtime_1.jsx)(action_button_1.default, { availableForPurchase: availableForPurchase, isInSignup: isInSignup, isMonthlyPlan: isMonthlyPlan, planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides, showMonthlyPrice: true, isStuck: options?.isStuck || false, visibleGridPlans: renderedGridPlans }) }, planSlug));
+    });
+};
+exports.default = TopButtons;
+//# sourceMappingURL=top-buttons.js.map

package/dist/cjs/components/features-grid/top-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-buttons.js","sourceRoot":"","sources":["../../../../src/components/features-grid/top-buttons.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwB;AAExB,6FAA4D;AAC5D,oFAAmD;AAanD,MAAM,UAAU,GAAG,CAAE,EACpB,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,iBAAiB,GACA,EAAG,EAAE;IACtB,OAAO,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAE,aAAa,EAAE,EAAG,EAAE;QACrF,MAAM,OAAO,GAAG,IAAA,cAAI,EAAE,qCAAqC,EAAE,gBAAgB,CAAE,CAAC;QAEhF,OAAO,CACN,uBAAC,+BAAoB,IAEpB,SAAS,EAAG,OAAO,EACnB,WAAW,EAAG,OAAO,EAAE,WAAW,YAElC,uBAAC,uBAAY,IACZ,oBAAoB,EAAG,oBAAoB,EAC3C,UAAU,EAAG,UAAU,EACvB,aAAa,EAAG,aAAa,EAC7B,QAAQ,EAAG,QAAQ,EACnB,mBAAmB,EAAG,mBAAmB,EACzC,mBAAmB,EAAG,mBAAmB,EACzC,gBAAgB,QAChB,OAAO,EAAG,OAAO,EAAE,OAAO,IAAI,KAAK,EACnC,gBAAgB,EAAG,iBAAiB,GACnC,IAdI,QAAQ,CAeQ,CACvB,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}