@automattic/plans-grid-next 1.0.2 → 1.0.3

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

@@ -9,13 +9,18 @@
 	background-color: var(--color-surface);
 	justify-content: flex-start;
 	font-weight: 400;
+
+	&.is-woo-hosted-basic-plan {
+		align-items: center;
+		gap: 12px;
+	}
 }
 
 .plan-features-2023-grid__header-logo {
 	padding-left: 20px;
 
 	@include plans-grid-medium-large {
-		margin-top: 36px;
+		margin-top: 32px;
 	}
 
 	.plan-features-2023-grid__table-top & {
@@ -115,10 +120,6 @@
 	}
 }
 
-.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;
@@ -130,9 +131,8 @@
 	.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;
+		border-radius: 4px;
+		padding: 20px 0 20px 0;
 
 		/*
 		 * TODO: Remove/refactor this once we have a better way to handle.
@@ -154,10 +154,42 @@
 				padding-top: 0;
 			}
 		}
+
+		.plan-features-2023-grid__header,
+		.plan-features-2023-grid__header-logo,
+		.plans-grid-next-header-price,
+		.plan-features-2023-grid__header-tagline,
+		.plan-features-2023-grid__header-billing-info,
+		.plan-features-2023-grid__table-item.is-top-buttons,
+		.plan-features-2023-grid__item {
+			padding-inline: 16px;
+		}
+	}
+
+	.plans-grid-next-storage-feature-label__volume {
+		font-size: 14px;
+		font-weight: 500;
 	}
 
 	.plan-features-2023-grid__highlighted-feature .plan-features-2023-grid__item {
-		padding-bottom: 24px;
+		padding-top: 16px;
+	}
+
+	.plan-features-2023-grid__header-title {
+		line-height: normal;
+	}
+
+	.plan-features-2023-grid__table-item .is-experiment-last-feature {
+		margin-block-end: 0;
+	}
+
+	.plan-features-2023-grid__header {
+		padding-block-end: 0;
+	}
+
+	.plan-features-2023-grid__header-tagline {
+		font-size: 14px;
+		padding: 0 20px 16px 20px
 	}
 }
 
@@ -166,7 +198,7 @@
 	color: var(--color-text-subtle);
 	table-layout: fixed;
 	border: 1px solid #e0e0e0;
-	border-radius: 5px; /* stylelint-disable-line */
+	border-radius: 4px;
 	background-color: #fff;
 	margin: 0 auto;
 	border-spacing: 0;
@@ -205,12 +237,25 @@
 	letter-spacing: 0;
 }
 
+.plan-features-2023-grid__header-badge {
+	background-color: var(--studio-blue-5);
+	color: var(--studio-blue-50);
+	border-radius: 3px;
+	display: inline-block;
+	font-size: $font-body-extra-small;
+	font-weight: 500;
+	line-height: 20px;
+	padding: 0 8px;
+	white-space: nowrap;
+}
+
 .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;
+	margin-bottom: 0;
 
 	@include plans-grid-medium-large {
 		font-size: $font-body-small;
@@ -238,6 +283,10 @@
 		font-weight: 600;
 	}
 
+	.is-plan-differentiators-experiment & .has-min-height {
+		min-height: 32px;
+	}
+
 	&.is-top-buttons {
 		padding: 0 20px;
 		@include plans-grid-medium-large {
@@ -251,7 +300,7 @@
 	@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) {
+		&:is(td, th) {
 			border-left: solid 1px #e0e0e0;
 		}
 	}
@@ -270,10 +319,9 @@
 	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;
+	border-radius: 4px;
+	display: flex;
+	justify-content: space-between;
 
 	div.spotlight-plan__buttons  {
 		display: flex;
@@ -318,6 +366,11 @@
 .plans-grid-next-features-grid__feature-group-title {
 	font-weight: 600;
 	color: var(--studio-gray-80);
+
+	&.is-wordpress-hosting {
+		padding-top: 12px;
+		font-size: 12px;
+	}
 }
 
 .plans-grid-next-features-grid__feature-group-row {
@@ -346,13 +399,20 @@
 	flex: 1 0 0;
 	width: 100%;
 
+	.plan-features-2023-grid__ai-website-builder-break {
+		@media ( max-width: 480px ) {
+			display: none;
+		}
+	}
+
 	.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;
-		text-wrap: balance;
+		text-wrap: balance; // Fallback until Safari supports `pretty`.
+		text-wrap: pretty;
 		margin: 0;
 		flex: 1 0 0;
 		width: 100%;
@@ -361,6 +421,12 @@
 			font-weight: 600;
 		}
 
+		// Experiment variants: domain included text gets green color
+		// Applies to variants with "Everything in X, plus:" features (not focused long-list or control)
+		&.is-domain-included-highlight {
+			color: var(--studio-green-60);
+		}
+
 		@include plans-grid-medium-large {
 			font-size: $font-body-extra-small;
 			line-height: 16px;
@@ -383,6 +449,11 @@
 	}
 }
 
+// Pricing differentiators experiment (non-control): extra bottom margin after last feature in column
+.plan-features-2023-grid__table-item .is-experiment-last-feature {
+	margin-block-end: 37px;
+}
+
 .plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
 	border-bottom: solid 1px var(--color-neutral-5);
 
@@ -397,6 +468,10 @@
 	padding: 0 20px 12px;
 	text-align: left;
 
+	.is-plan-differentiators-experiment & {
+		padding-inline-end: 12px;
+	}
+
 	&.plan-features-2023-grid__item-available {
 		display: flex;
 		flex-direction: column;
@@ -478,13 +553,17 @@
 	// the alternative (oveflow: auto) would break the sticky behavior on the headers
 	padding: 1px;
 
+	&.is-small {
+		padding: 0;
+	}
+
 	.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) {
+		// Match both `td` and `th` so the first header cell has its border-left removed too;
+		// the `:is()` keeps the specificity aligned with the rule that adds the border-left above.
+		&:first-of-type:is(td, th) {
 			border-left: none;
 		}
 
@@ -613,3 +692,12 @@
 		}
 	}
 }
+
+// Conditional styles for visual split layout (website-builder and wordpress-hosting intents)
+.plans-features-main__group.is-visual-split-layout {
+	.plans-grid-next-features-grid__feature-group-row {
+		&:last-child > .plan-features-2023-grid__table-item {
+			padding-bottom: 18px;
+		}
+	}
+}

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

@@ -26,7 +26,7 @@ const Table = ({ currentSitePlanSlug, generatedWPComSubdomain, gridPlanForSpotli
     const tableClasses = clsx('plan-features-2023-grid__table', `has-${gridPlansWithoutSpotlight.length}-cols`, {
         'has-highlighted-plan': hasHighlightedPlan,
     });
-    return (_jsxs("table", { className: tableClasses, children: [_jsx("caption", { className: "plan-features-2023-grid__screen-reader-text screen-reader-text", children: translate('Available plans to choose from') }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx(PlanLogos, { renderedGridPlans: gridPlansWithoutSpotlight, isInSignup: isInSignup, options: { isTableCell: true } }) }), _jsx("tr", { children: _jsx(PlanHeaders, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) }), _jsx("tr", { children: _jsx(PlanTagline, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) }), _jsx("tr", { children: _jsx(PlanPrices, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true }, currentSitePlanSlug: currentSitePlanSlug }) }), _jsx("tr", { children: _jsx(BillingTimeframes, { renderedGridPlans: gridPlansWithoutSpotlight, showRefundPeriod: showRefundPeriod, options: { isTableCell: true } }) }), _jsx(StickyContainer, { stickyClass: "is-sticky-top-buttons-row", element: "tr", stickyOffset: stickyRowOffset, zIndex: 2, children: (isStuck) => (_jsx(TopButtons, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isStuck }, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides })) }), _jsx("tr", { children: _jsx(EnterpriseFeatures, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isLogosOnly: enableLogosOnlyForEnterprisePlan } }) }), !enableCategorisedFeatures && (_jsx("tr", { children: _jsx(PreviousFeaturesIncludedTitle, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) })), featureGroups.map((featureGroupSlug, featureGroupIndex) => (_jsx("tr", { className: clsx('plans-grid-next-features-grid__feature-group-row', {
+    return (_jsxs("table", { className: tableClasses, children: [_jsx("caption", { className: "plan-features-2023-grid__screen-reader-text screen-reader-text", children: translate('Available plans to choose from') }), _jsxs("thead", { children: [_jsx("tr", { children: _jsx(PlanLogos, { renderedGridPlans: gridPlansWithoutSpotlight, isInSignup: isInSignup, options: { isTableCell: true } }) }), _jsx("tr", { children: _jsx(PlanHeaders, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isHeader: true, scope: 'col' } }) })] }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx(PlanTagline, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) }), _jsx("tr", { children: _jsx(PlanPrices, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true }, currentSitePlanSlug: currentSitePlanSlug }) }), _jsx("tr", { children: _jsx(BillingTimeframes, { renderedGridPlans: gridPlansWithoutSpotlight, showRefundPeriod: showRefundPeriod, options: { isTableCell: true } }) }), _jsx(StickyContainer, { stickyClass: "is-sticky-top-buttons-row", element: "tr", stickyOffset: stickyRowOffset, zIndex: 2, children: (isStuck) => (_jsx(TopButtons, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isStuck }, isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides })) }), _jsx("tr", { children: _jsx(EnterpriseFeatures, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true, isLogosOnly: enableLogosOnlyForEnterprisePlan } }) }), !enableCategorisedFeatures && (_jsx("tr", { children: _jsx(PreviousFeaturesIncludedTitle, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true } }) })), featureGroups.map((featureGroupSlug, featureGroupIndex) => (_jsx("tr", { className: clsx('plans-grid-next-features-grid__feature-group-row', {
                             'is-first-feature-group-row': featureGroupIndex === 0,
                             'is-reduced-feature-group-spacing': enableReducedFeatureGroupSpacing,
                         }), children: _jsx(PlanFeaturesList, { renderedGridPlans: gridPlansWithoutSpotlight, options: { isTableCell: true }, paidDomainName: paidDomainName, hideUnavailableFeatures: hideUnavailableFeatures, selectedFeature: selectedFeature, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan, featureGroupSlug: featureGroupSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage }) }, featureGroupSlug)))] })] }));

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

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

package/dist/esm/components/features.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getPlanClass, FEATURE_CUSTOM_DOMAIN, isFreePlan } from '@automattic/calypso-products';
+import { getPlanClass, FEATURE_AI_WEBSITE_BUILDER, FEATURE_CUSTOM_DOMAIN, isFreePlan, } from '@automattic/calypso-products';
 import { LoadingPlaceholder } from '@automattic/components';
 import styled from '@emotion/styled';
 import clsx from 'clsx';
@@ -19,6 +19,30 @@ const SubdomainSuggestion = styled.div `
 		overflow: hidden;
 	}
 `;
+// Pricing differentiation pills — colors match @automattic/components Badge type="info-green" (.badge--info-green).
+const FeatureBadge = styled.span `
+	display: inline-flex;
+	padding: 0 6px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	border-radius: 4px;
+	background-color: rgba( 184, 230, 191, 0.64 );
+	color: var( --studio-green-80 );
+	text-align: center;
+	font-size: 11px;
+	font-weight: 600;
+	line-height: inherit;
+	margin-inline-start: 8px;
+	vertical-align: baseline;
+	text-decoration: none;
+	white-space: nowrap;
+
+	@media ( max-width: 480px ) {
+		padding: 0 4px;
+		margin-inline-start: 6px;
+	}
+`;
 const FreePlanCustomDomainFeature = ({ paidDomainName, generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan }) => {
     const translate = useTranslate();
     const isLoading = generatedWPComSubdomain?.isLoading;
@@ -30,7 +54,7 @@ const FreePlanCustomDomainFeature = ({ paidDomainName, generatedWPComSubdomain,
 };
 const PlanFeatures2023GridFeatures = ({ features, planSlug, paidDomainName, generatedWPComSubdomain, hideUnavailableFeatures, selectedFeature, isCustomDomainAllowedOnFreePlan, activeTooltipId, setActiveTooltipId, }) => {
     const translate = useTranslate();
-    const { enableFeatureTooltips } = usePlansGridContext();
+    const { enableFeatureTooltips, gridPlans, isExperimentVariant } = usePlansGridContext();
     return (_jsx(_Fragment, { children: features.map((currentFeature, featureIndex) => {
             if (hideUnavailableFeatures && !currentFeature.availableForCurrentPlan) {
                 return null;
@@ -45,8 +69,22 @@ const PlanFeatures2023GridFeatures = ({ features, planSlug, paidDomainName, gene
                 : currentFeature?.isHighlighted ||
                     (currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN && paidDomainName) ||
                     !currentFeature.availableForCurrentPlan;
+            const featureSlug = currentFeature.getSlug();
+            const shouldBreakAfterAiWebsiteBuilderTitle = gridPlans.length === 6 && featureSlug === FEATURE_AI_WEBSITE_BUILDER;
+            const featuresWithMinHeight = [
+                'support-from-experts',
+                'priority-24-7-support',
+                'upload-video',
+            ];
+            // Apply green styling for domain feature in the rolled-out cohort.
+            const isCustomDomainFeatureWithPaidDomain = currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN &&
+                paidDomainName &&
+                !isFreePlan(planSlug);
+            const shouldHighlightDomainFeature = isCustomDomainFeatureWithPaidDomain && isExperimentVariant;
             const divClasses = clsx('', getPlanClass(planSlug), {
                 'is-last-feature': featureIndex + 1 === features.length,
+                'has-min-height': featuresWithMinHeight.includes(featureSlug),
+                'is-experiment-last-feature': currentFeature.isExperimentLastFeature,
             });
             const spanClasses = clsx('plan-features-2023-grid__item-info', {
                 'is-annual-plan-feature': currentFeature.availableOnlyForAnnualPlans,
@@ -54,15 +92,16 @@ const PlanFeatures2023GridFeatures = ({ features, planSlug, paidDomainName, gene
             });
             const itemTitleClasses = clsx('plan-features-2023-grid__item-title', {
                 'is-bold': isHighlightedFeature,
+                'is-domain-included-highlight': shouldHighlightDomainFeature,
             });
             return (_jsx("div", { className: divClasses, children: _jsx(PlanFeaturesItem, { children: _jsx("span", { className: spanClasses, children: _jsx("span", { className: itemTitleClasses, children: isFreePlanAndCustomDomainFeature ? (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips
                                     ? translate('%s is not included', {
                                         args: [paidDomainName],
                                         comment: '%s is a domain name.',
                                     })
-                                    : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsx(FreePlanCustomDomainFeature, { paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan }, key) })) : (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? currentFeature.getDescription?.() : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsxs(_Fragment, { children: [currentFeature.getTitle({
-                                            domainName: paidDomainName,
-                                        }), currentFeature?.getSubFeatureObjects?.()?.length ? (_jsx("ul", { className: "plan-features-2023-grid__item-sub-feature-list", children: currentFeature.getSubFeatureObjects().map((subFeature) => (_jsx("li", { children: subFeature?.getTitle() }))) })) : null] }) })) }) }, key) }) }, key));
+                                    : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsx(FreePlanCustomDomainFeature, { paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan }, key) })) : (_jsx(Plans2023Tooltip, { text: enableFeatureTooltips ? currentFeature.getDescription?.() : undefined, activeTooltipId: activeTooltipId, setActiveTooltipId: setActiveTooltipId, id: key, children: _jsxs(_Fragment, { children: [_jsxs("span", { className: "plan-features-2023-grid__item-text-content", children: [currentFeature.getTitle({
+                                                    domainName: paidDomainName,
+                                                }), currentFeature.badgeText && (_jsx(FeatureBadge, { children: currentFeature.badgeText }))] }), shouldBreakAfterAiWebsiteBuilderTitle && (_jsx("div", { className: "plan-features-2023-grid__ai-website-builder-break", children: '\u00A0' })), currentFeature?.getSubFeatureObjects?.()?.length ? (_jsx("ul", { className: "plan-features-2023-grid__item-sub-feature-list", children: currentFeature.getSubFeatureObjects().map((subFeature) => (_jsx("li", { children: subFeature?.getTitle() }, subFeature.getSlug()))) })) : null] }) })) }) }, key) }) }, key));
         }) }));
 };
 export default PlanFeatures2023GridFeatures;

package/dist/esm/components/features.js.map

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

package/dist/esm/components/item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function PlanFeaturesItem(props) {
-    return (_jsx("div", { className: "plan-features-2023-grid__item plan-features-2023-grid__item-available", children: _jsx("div", { className: "plan-features-2023-grid__item-info-container", children: props.children }) }));
+    return (_jsx("div", { className: "plan-features-2023-grid__item plan-features-2023-grid__item-available", style: props.style, children: _jsx("div", { className: "plan-features-2023-grid__item-info-container", children: props.children }) }));
 }
 //# sourceMappingURL=item.js.map

package/dist/esm/components/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,gBAAgB,CAAE,KAA+B;IAChE,OAAO,CACN,cAAK,SAAS,EAAC,uEAAuE,YACrF,cAAK,SAAS,EAAC,8CAA8C,YAAG,KAAK,CAAC,QAAQ,GAAQ,GACjF,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,gBAAgB,CAAE,KAAsD;IACvF,OAAO,CACN,cACC,SAAS,EAAC,uEAAuE,EACjF,KAAK,EAAG,KAAK,CAAC,KAAK,YAEnB,cAAK,SAAS,EAAC,8CAA8C,YAAG,KAAK,CAAC,QAAQ,GAAQ,GACjF,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/plan-button/index.js

@@ -6,13 +6,15 @@ import './style.scss';
 // TODO:
 // The prop should simply be declared by extending the
 // props of Button, instead of listing everything needed like this.
-const PlanButton = ({ planSlug, children, classes, href, onClick = () => { }, busy = false, borderless = false, current = false, disabled = false, isStuck = false, isLargeCurrency = false, }) => {
+const PlanButton = ({ planSlug, children, classes, href, onClick = () => { }, busy = false, borderless = false, current = false, disabled = false, isStuck = false, isLargeCurrency = false, ariaLabel, }) => {
     const className = clsx(classes, 'plan-features-2023-grid__actions-button', planSlug ? getPlanClass(planSlug) : 'is-default', {
         'is-current-plan': current,
         'is-stuck': isStuck,
         'is-large-currency': isLargeCurrency,
-    });
-    return (_jsx(Button, { className: className, onClick: onClick, busy: busy, borderless: borderless, disabled: disabled, href: href, children: children }));
+    }, disabled && 'disabled');
+    return (_jsx(Button, { className: className, onClick: onClick, busy: busy, borderless: borderless, disabled: disabled, href: href, "aria-label": ariaLabel, 
+        // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+        tabIndex: 2, children: children }));
 };
 export default PlanButton;
 //# sourceMappingURL=index.js.map

package/dist/esm/components/plan-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/plan-button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAiB,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,QAAQ;AACR,sDAAsD;AACtD,mEAAmE;AACnE,MAAM,UAAU,GAAG,CAAE,EACpB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,eAAe,GAAG,KAAK,GAavB,EAAG,EAAE;IACL,MAAM,SAAS,GAAG,IAAI,CACrB,OAAO,EACP,yCAAyC,EACzC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,YAAY,EAClD;QACC,iBAAiB,EAAE,OAAO;QAC1B,UAAU,EAAE,OAAO;QACnB,mBAAmB,EAAE,eAAe;KACpC,CACD,CAAC;IAEF,OAAO,CACN,KAAC,MAAM,IACN,SAAS,EAAG,SAAS,EACrB,OAAO,EAAG,OAAO,EACjB,IAAI,EAAG,IAAI,EACX,UAAU,EAAG,UAAU,EACvB,QAAQ,EAAG,QAAQ,EACnB,IAAI,EAAG,IAAI,YAET,QAAQ,GACF,CACT,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/plan-button/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAiB,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,QAAQ;AACR,sDAAsD;AACtD,mEAAmE;AACnE,MAAM,UAAU,GAAG,CAAE,EACpB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,eAAe,GAAG,KAAK,EACvB,SAAS,GAcT,EAAG,EAAE;IACL,MAAM,SAAS,GAAG,IAAI,CACrB,OAAO,EACP,yCAAyC,EACzC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,YAAY,EAClD;QACC,iBAAiB,EAAE,OAAO;QAC1B,UAAU,EAAE,OAAO;QACnB,mBAAmB,EAAE,eAAe;KACpC,EACD,QAAQ,IAAI,UAAU,CACtB,CAAC;IAEF,OAAO,CACN,KAAC,MAAM,IACN,SAAS,EAAG,SAAS,EACrB,OAAO,EAAG,OAAO,EACjB,IAAI,EAAG,IAAI,EACX,UAAU,EAAG,UAAU,EACvB,QAAQ,EAAG,QAAQ,EACnB,IAAI,EAAG,IAAI,gBACE,SAAS;QACtB,yDAAyD;QACzD,QAAQ,EAAG,CAAC,YAEV,QAAQ,GACF,CACT,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}