@automattic/plans-grid-next 1.0.0

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getPlanClass, isWpcomEnterpriseGridPlan } from '@automattic/calypso-products';
+import { FoldableCard } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import { PlanFeaturesItem } from '../item';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import ClientLogoList from './client-logo-list';
+const EnterpriseFeatures = ({ renderedGridPlans, options }) => {
+    const { featureGroupMap, enableCategorisedFeatures, enterpriseFeaturesList } = usePlansGridContext();
+    const translate = useTranslate();
+    const isTableCell = options?.isTableCell;
+    const CardContainer = (props) => {
+        const { children, className, ...otherProps } = props;
+        return isTableCell ? (_jsx("div", { className: className, ...otherProps, children: children })) : (_jsx(FoldableCard, { className: clsx('plans-grid-next-features-grid__mobile-plan-card-foldable-container', className), header: translate('Show all features'), ...otherProps, compact: true, clickableHeader: true, children: children }));
+    };
+    return renderedGridPlans.map(({ planSlug, features: { wpcomFeatures, jetpackFeatures } }) => {
+        const planClassName = getPlanClass(planSlug);
+        const shouldRenderLogos = isWpcomEnterpriseGridPlan(planSlug);
+        const shouldCoverFullColumn = (wpcomFeatures.length === 0 && jetpackFeatures.length === 0) || enableCategorisedFeatures;
+        const rowspanProp = isTableCell && shouldRenderLogos
+            ? {
+                ...(shouldCoverFullColumn && {
+                    /**
+                     * The rowSpan should be:
+                     * - the number of feature groups + 2 (1 this row + 1 row of storage) in case of feature categories,
+                     * - otherwise: 4 (1 this row + 1 row of features + 1 row of storage + 1 row for the "everything in ... plus" part)
+                     */
+                    rowSpan: enableCategorisedFeatures ? Object.values(featureGroupMap).length + 2 : 4,
+                }),
+            }
+            : {};
+        return (_jsx(PlanDivOrTdContainer, { isTableCell: options?.isTableCell, className: "plan-features-2023-grid__table-item", ...rowspanProp, children: shouldRenderLogos && (_jsxs(_Fragment, { children: [_jsx("div", { className: "plan-features-2023-grid__item", children: _jsx(ClientLogoList, { className: "plan-features-2023-grid__item-logos" }) }), !options?.isLogosOnly && (_jsxs(CardContainer, { children: [_jsx("div", { className: clsx('plan-features-2023-grid__common-title', planClassName), children: translate('High performance platform, with:') }), enterpriseFeaturesList?.map((title, index) => (_jsx(PlanFeaturesItem, { children: _jsx("span", { className: "plan-features-2023-grid__item-info is-available", children: _jsx("span", { className: "plan-features-2023-grid__item-title", children: title }) }) }, index)))] }))] })) }, planSlug));
+    });
+};
+export default EnterpriseFeatures;
+//# sourceMappingURL=enterprise-features.js.map

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

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

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

@@ -0,0 +1,127 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPlanClass, isWpcomEnterpriseGridPlan, isFreePlan, FEATURE_GROUP_STORAGE, } from '@automattic/calypso-products';
+import { FoldableCard } from '@automattic/components';
+import { useRef, useMemo } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import PlansGridContextProvider, { usePlansGridContext } from '../../grid-context';
+import useGridSize from '../../hooks/use-grid-size';
+import { PlanFeaturesItem } from '../item';
+import { PlanStorage } from '../shared/storage';
+import BillingTimeframes from './billing-timeframes';
+import EnterpriseFeatures from './enterprise-features';
+import MobileFreeDomain from './mobile-free-domain';
+import PlanFeaturesList from './plan-features-list';
+import PlanHeaders from './plan-headers';
+import PlanLogos from './plan-logos';
+import PlanPrices from './plan-prices';
+import PlanTagline from './plan-tagline';
+import PreviousFeaturesIncludedTitle from './previous-features-included-title';
+import SpotlightPlan from './spotlight-plan';
+import Table from './table';
+import TopButtons from './top-buttons';
+import './style.scss';
+const CardContainer = (props) => {
+    const { children, planSlug, ...otherProps } = props;
+    return isWpcomEnterpriseGridPlan(planSlug) ? (_jsx("div", { ...otherProps, children: children })) : (_jsx(FoldableCard, { ...otherProps, compact: true, clickableHeader: true, children: children }));
+};
+const FeaturesContainer = (props) => {
+    const { children, gridPlan, featureGroups } = props;
+    const { enableCategorisedFeatures, enableLogosOnlyForEnterprisePlan, enableReducedFeatureGroupSpacing, } = usePlansGridContext();
+    return (_jsxs(_Fragment, { children: [_jsx(EnterpriseFeatures, { renderedGridPlans: [gridPlan], options: { isLogosOnly: enableLogosOnlyForEnterprisePlan } }), !enableCategorisedFeatures && (_jsx(PreviousFeaturesIncludedTitle, { renderedGridPlans: [gridPlan] })), featureGroups.map((featureGroupSlug) => (_jsx("div", { className: clsx('plans-grid-next-features-grid__feature-group-row', {
+                    'is-reduced-feature-group-spacing': enableReducedFeatureGroupSpacing,
+                }), children: children(featureGroupSlug) }, featureGroupSlug)))] }));
+};
+const MobileView = ({ currentSitePlanSlug, generatedWPComSubdomain, gridPlanForSpotlight, renderedGridPlans, hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan, isInSignup, onStorageAddOnClick, paidDomainName, planActionOverrides, selectedFeature, showUpgradeableStorage, enableShowAllFeaturesButton, }) => {
+    const translate = useTranslate();
+    const { featureGroupMap } = usePlansGridContext();
+    const featureGroups = useMemo(() => Object.keys(featureGroupMap).filter((key) => FEATURE_GROUP_STORAGE !== key), [featureGroupMap]);
+    const storageFeatureGroup = featureGroupMap[FEATURE_GROUP_STORAGE];
+    return renderedGridPlans
+        .reduce((acc, gridPlan) => {
+        // Bring the spotlight plan to the top
+        if (gridPlanForSpotlight?.planSlug === gridPlan.planSlug) {
+            return [gridPlan].concat(acc);
+        }
+        return acc.concat(gridPlan);
+    }, [])
+        .map((gridPlan, index) => {
+        const planCardClasses = clsx('plans-grid-next-features-grid__mobile-plan-card', getPlanClass(gridPlan.planSlug));
+        const isNotFreePlan = !isFreePlan(gridPlan.planSlug);
+        const isEnterprisePlan = isWpcomEnterpriseGridPlan(gridPlan.planSlug);
+        const featuresEl = (_jsx(FeaturesContainer, { gridPlan: gridPlan, featureGroups: featureGroups, children: (featureGroupSlug) => (_jsx(PlanFeaturesList, { renderedGridPlans: [gridPlan], selectedFeature: selectedFeature, paidDomainName: paidDomainName, hideUnavailableFeatures: hideUnavailableFeatures, generatedWPComSubdomain: generatedWPComSubdomain, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan, featureGroupSlug: featureGroupSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })) }));
+        const planCardJsx = (_jsxs("div", { className: planCardClasses, children: [_jsx(PlanLogos, { renderedGridPlans: [gridPlan], isInSignup: false }), _jsx(PlanHeaders, { renderedGridPlans: [gridPlan] }), isNotFreePlan && isInSignup && _jsx(PlanTagline, { renderedGridPlans: [gridPlan] }), isNotFreePlan && (_jsx(PlanPrices, { renderedGridPlans: [gridPlan], currentSitePlanSlug: currentSitePlanSlug })), isNotFreePlan && _jsx(BillingTimeframes, { renderedGridPlans: [gridPlan] }), _jsx(MobileFreeDomain, { gridPlan: gridPlan, paidDomainName: paidDomainName }), storageFeatureGroup && !isEnterprisePlan && (_jsxs(_Fragment, { children: [_jsx(PlanFeaturesItem, { children: _jsx("h2", { className: "plans-grid-next-features-grid__feature-group-title", children: storageFeatureGroup?.getTitle() }) }), _jsx("div", { className: "plan-features-2023-grid__highlighted-feature", children: _jsx(PlanFeaturesItem, { children: _jsx(PlanStorage, { planSlug: gridPlan.planSlug, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage }) }) })] })), _jsx(TopButtons, { renderedGridPlans: [gridPlan], isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides }), enableShowAllFeaturesButton ? (_jsx(CardContainer, { header: translate('Show all features'), planSlug: gridPlan.planSlug, className: "plans-grid-next-features-grid__mobile-plan-card-foldable-container", expanded: selectedFeature &&
+                        gridPlan.features.wpcomFeatures.some((feature) => feature.getSlug() === selectedFeature), children: featuresEl }, `${gridPlan.planSlug}-${index}`)) : (_jsx("div", { className: "plans-grid-next-features-grid__mobile-plan-card-no-foldable-container", children: featuresEl }))] }, `${gridPlan.planSlug}-${index}`));
+        return planCardJsx;
+    });
+};
+const TabletView = ({ currentSitePlanSlug, generatedWPComSubdomain, gridPlanForSpotlight, hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan, isInSignup, onStorageAddOnClick, paidDomainName, planActionOverrides, renderedGridPlans, selectedFeature, showRefundPeriod, showUpgradeableStorage, stickyRowOffset, }) => {
+    const gridPlansWithoutSpotlight = !gridPlanForSpotlight
+        ? renderedGridPlans
+        : renderedGridPlans.filter(({ planSlug }) => gridPlanForSpotlight.planSlug !== planSlug);
+    const numberOfPlansToShowOnTop = 4 === gridPlansWithoutSpotlight.length ? 4 : 3;
+    const plansForTopRow = gridPlansWithoutSpotlight.slice(0, numberOfPlansToShowOnTop);
+    const plansForBottomRow = gridPlansWithoutSpotlight.slice(numberOfPlansToShowOnTop);
+    const tableProps = {
+        currentSitePlanSlug,
+        generatedWPComSubdomain,
+        gridPlanForSpotlight,
+        hideUnavailableFeatures,
+        isCustomDomainAllowedOnFreePlan,
+        isInSignup,
+        onStorageAddOnClick,
+        paidDomainName,
+        planActionOverrides,
+        selectedFeature,
+        showRefundPeriod,
+        showUpgradeableStorage,
+        stickyRowOffset,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "plan-features-2023-grid__table-top", children: _jsx(Table, { renderedGridPlans: plansForTopRow, ...tableProps }) }), plansForBottomRow.length > 0 && (_jsx("div", { className: "plan-features-2023-grid__table-bottom", children: _jsx(Table, { renderedGridPlans: plansForBottomRow, ...tableProps }) }))] }));
+};
+// TODO
+// Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
+// More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
+const FeaturesGrid = ({ currentSitePlanSlug, generatedWPComSubdomain, gridPlanForSpotlight, gridPlans, gridSize, hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan, isInSignup, onStorageAddOnClick, paidDomainName, planActionOverrides, selectedFeature, showRefundPeriod, showUpgradeableStorage, stickyRowOffset, enableShowAllFeaturesButton, }) => {
+    const spotlightPlanProps = {
+        currentSitePlanSlug,
+        gridPlanForSpotlight,
+        isInSignup,
+        onStorageAddOnClick,
+        planActionOverrides,
+        selectedFeature,
+        showUpgradeableStorage,
+    };
+    const planFeaturesProps = {
+        ...spotlightPlanProps,
+        generatedWPComSubdomain,
+        hideUnavailableFeatures,
+        isCustomDomainAllowedOnFreePlan,
+        paidDomainName,
+        renderedGridPlans: gridPlans,
+        showRefundPeriod,
+    };
+    return (_jsxs("div", { className: "plans-grid-next-features-grid", children: ['small' !== gridSize && _jsx(SpotlightPlan, { ...spotlightPlanProps }), _jsx("div", { className: "plan-features", children: _jsx("div", { className: "plan-features-2023-grid__content", children: _jsxs("div", { children: ['large' === gridSize && (_jsx("div", { className: "plan-features-2023-grid__desktop-view", children: _jsx(Table, { ...planFeaturesProps, stickyRowOffset: stickyRowOffset }) })), 'medium' === gridSize && (_jsx("div", { className: "plan-features-2023-grid__tablet-view", children: _jsx(TabletView, { ...planFeaturesProps, stickyRowOffset: stickyRowOffset }) })), 'small' === gridSize && (_jsx("div", { className: "plan-features-2023-grid__mobile-view", children: _jsx(MobileView, { ...planFeaturesProps, enableShowAllFeaturesButton: enableShowAllFeaturesButton }) }))] }) }) })] }));
+};
+const WrappedFeaturesGrid = (props) => {
+    const { siteId, intent, gridPlans, useCheckPlanAvailabilityForPurchase, useAction, recordTracksEvent, allFeaturesList, coupon, isInAdmin, className, enableFeatureTooltips, enableCategorisedFeatures, enableStorageAsBadge, enableReducedFeatureGroupSpacing, enableLogosOnlyForEnterprisePlan, featureGroupMap = {}, hideFeatureGroupTitles, enterpriseFeaturesList, enableTermSavingsPriceDisplay, } = props;
+    const gridContainerRef = useRef(null);
+    const gridBreakpoints = useMemo(() => new Map([
+        ['small', 0],
+        ['medium', 740],
+        ['large', isInAdmin ? 1180 : 1320], // 1320 to fit Enterpreneur plan, 1180 to work in admin
+    ]), [isInAdmin]);
+    // TODO: this will be deprecated along side removing the wrapper component
+    const gridSize = useGridSize({
+        containerRef: gridContainerRef,
+        containerBreakpoints: gridBreakpoints,
+    });
+    const classNames = clsx('plans-grid-next', className, {
+        'is-small': 'small' === gridSize,
+        'is-medium': 'medium' === gridSize,
+        'is-large': 'large' === gridSize,
+    });
+    return (_jsx("div", { ref: gridContainerRef, className: classNames, children: _jsx(PlansGridContextProvider, { intent: intent, siteId: siteId, gridPlans: gridPlans, coupon: coupon, useCheckPlanAvailabilityForPurchase: useCheckPlanAvailabilityForPurchase, useAction: useAction, recordTracksEvent: recordTracksEvent, allFeaturesList: allFeaturesList, enableFeatureTooltips: enableFeatureTooltips, enableCategorisedFeatures: enableCategorisedFeatures, enableStorageAsBadge: enableStorageAsBadge, enableReducedFeatureGroupSpacing: enableReducedFeatureGroupSpacing, enableLogosOnlyForEnterprisePlan: enableLogosOnlyForEnterprisePlan, hideFeatureGroupTitles: hideFeatureGroupTitles, featureGroupMap: featureGroupMap, enterpriseFeaturesList: enterpriseFeaturesList, enableTermSavingsPriceDisplay: enableTermSavingsPriceDisplay, children: _jsx(FeaturesGrid, { ...props, gridSize: gridSize ?? undefined }) }) }));
+};
+export default WrappedFeaturesGrid;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/features-grid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,YAAY,EACZ,yBAAyB,EACzB,UAAU,EAEV,qBAAqB,GACrB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,wBAAwB,EAAE,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAC/E,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,UAAU,MAAM,eAAe,CAAC;AASvC,OAAO,cAAc,CAAC;AAkBtB,MAAM,aAAa,GAAG,CACrB,KAAyE,EACxE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEpD,OAAO,yBAAyB,CAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,CAC9C,iBAAU,UAAU,YAAK,QAAQ,GAAQ,CACzC,CAAC,CAAC,CAAC,CACH,KAAC,YAAY,OAAM,UAAU,EAAG,OAAO,QAAC,eAAe,kBACpD,QAAQ,GACI,CACf,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAE,KAI3B,EAAG,EAAE;IACL,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,EACL,yBAAyB,EACzB,gCAAgC,EAChC,gCAAgC,GAChC,GAAG,mBAAmB,EAAE,CAAC;IAE1B,OAAO,CACN,8BACC,KAAC,kBAAkB,IAClB,iBAAiB,EAAG,CAAE,QAAQ,CAAE,EAChC,OAAO,EAAG,EAAE,WAAW,EAAE,gCAAgC,EAAE,GAC1D,EACA,CAAE,yBAAyB,IAAI,CAChC,KAAC,6BAA6B,IAAC,iBAAiB,EAAG,CAAE,QAAQ,CAAE,GAAK,CACpE,EACC,aAAa,CAAC,GAAG,CAAE,CAAE,gBAAkC,EAAG,EAAE,CAAC,CAC9D,cACC,SAAS,EAAG,IAAI,CAAE,kDAAkD,EAAE;oBACrE,kCAAkC,EAAE,gCAAgC;iBACpE,CAAE,YAGD,QAAQ,CAAE,gBAAgB,CAAE,IAFxB,gBAAgB,CAGjB,CACN,CAAE,IACD,CACH,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAE,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,+BAA+B,EAC/B,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,sBAAsB,EACtB,2BAA2B,GACV,EAAG,EAAE;IACtB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,OAAO,CAC5B,GAAG,EAAE,CACJ,MAAM,CAAC,IAAI,CAAE,eAAe,CAAE,CAAC,MAAM,CACpC,CAAE,GAAG,EAAG,EAAE,CAAC,qBAAqB,KAAK,GAAG,CAClB,EACxB,CAAE,eAAe,CAAE,CACnB,CAAC;IACF,MAAM,mBAAmB,GAAG,eAAe,CAAE,qBAAqB,CAAE,CAAC;IAErE,OAAO,iBAAiB;SACtB,MAAM,CAAE,CAAE,GAAG,EAAE,QAAQ,EAAG,EAAE;QAC5B,sCAAsC;QACtC,IAAK,oBAAoB,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,EAAG,CAAC;YAC5D,OAAO,CAAE,QAAQ,CAAE,CAAC,MAAM,CAAE,GAAG,CAAE,CAAC;QACnC,CAAC;QACD,OAAO,GAAG,CAAC,MAAM,CAAE,QAAQ,CAAE,CAAC;IAC/B,CAAC,EAAE,EAAgB,CAAE;SACpB,GAAG,CAAE,CAAE,QAAQ,EAAE,KAAK,EAAG,EAAE;QAC3B,MAAM,eAAe,GAAG,IAAI,CAC3B,iDAAiD,EACjD,YAAY,CAAE,QAAQ,CAAC,QAAQ,CAAE,CACjC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAE,UAAU,CAAE,QAAQ,CAAC,QAAQ,CAAE,CAAC;QACxD,MAAM,gBAAgB,GAAG,yBAAyB,CAAE,QAAQ,CAAC,QAAQ,CAAE,CAAC;QACxE,MAAM,UAAU,GAAG,CAClB,KAAC,iBAAiB,IAAC,QAAQ,EAAG,QAAQ,EAAG,aAAa,EAAG,aAAa,YACnE,CAAE,gBAAkC,EAAG,EAAE,CAAC,CAC3C,KAAC,gBAAgB,IAChB,iBAAiB,EAAG,CAAE,QAAQ,CAAE,EAChC,eAAe,EAAG,eAAe,EACjC,cAAc,EAAG,cAAc,EAC/B,uBAAuB,EAAG,uBAAuB,EACjD,uBAAuB,EAAG,uBAAuB,EACjD,+BAA+B,EAAG,+BAA+B,EACjE,gBAAgB,EAAG,gBAAgB,EACnC,mBAAmB,EAAG,mBAAmB,EACzC,sBAAsB,EAAG,sBAAsB,GAC9C,CACF,GACkB,CACpB,CAAC;QAEF,MAAM,WAAW,GAAG,CACnB,eAAK,SAAS,EAAG,eAAe,aAC/B,KAAC,SAAS,IAAC,iBAAiB,EAAG,CAAE,QAAQ,CAAE,EAAG,UAAU,EAAG,KAAK,GAAK,EACrE,KAAC,WAAW,IAAC,iBAAiB,EAAG,CAAE,QAAQ,CAAE,GAAK,EAChD,aAAa,IAAI,UAAU,IAAI,KAAC,WAAW,IAAC,iBAAiB,EAAG,CAAE,QAAQ,CAAE,GAAK,EACjF,aAAa,IAAI,CAClB,KAAC,UAAU,IACV,iBAAiB,EAAG,CAAE,QAAQ,CAAE,EAChC,mBAAmB,EAAG,mBAAmB,GACxC,CACF,EACC,aAAa,IAAI,KAAC,iBAAiB,IAAC,iBAAiB,EAAG,CAAE,QAAQ,CAAE,GAAK,EAC3E,KAAC,gBAAgB,IAAC,QAAQ,EAAG,QAAQ,EAAG,cAAc,EAAG,cAAc,GAAK,EAC1E,mBAAmB,IAAI,CAAE,gBAAgB,IAAI,CAC9C,8BACC,KAAC,gBAAgB,cAChB,aAAI,SAAS,EAAC,oDAAoD,YAC/D,mBAAmB,EAAE,QAAQ,EAAE,GAC7B,GACa,EACnB,cAAK,SAAS,EAAC,8CAA8C,YAC5D,KAAC,gBAAgB,cAChB,KAAC,WAAW,IACX,QAAQ,EAAG,QAAQ,CAAC,QAAQ,EAC5B,mBAAmB,EAAG,mBAAmB,EACzC,sBAAsB,EAAG,sBAAsB,GAC9C,GACgB,GACd,IACJ,CACH,EACD,KAAC,UAAU,IACV,iBAAiB,EAAG,CAAE,QAAQ,CAAE,EAChC,UAAU,EAAG,UAAU,EACvB,mBAAmB,EAAG,mBAAmB,EACzC,mBAAmB,EAAG,mBAAmB,GACxC,EACA,2BAA2B,CAAC,CAAC,CAAC,CAC/B,KAAC,aAAa,IACb,MAAM,EAAG,SAAS,CAAE,mBAAmB,CAAE,EACzC,QAAQ,EAAG,QAAQ,CAAC,QAAQ,EAE5B,SAAS,EAAC,oEAAoE,EAC9E,QAAQ,EACP,eAAe;wBACf,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CACnC,CAAE,OAAO,EAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,eAAe,CACpD,YAGA,UAAU,IATN,GAAI,QAAQ,CAAC,QAAS,IAAK,KAAM,EAAE,CAU1B,CAChB,CAAC,CAAC,CAAC,CACH,cAAK,SAAS,EAAC,uEAAuE,YACnF,UAAU,GACP,CACN,KAvDuC,GAAI,QAAQ,CAAC,QAAS,IAAK,KAAM,EAAE,CAwDtE,CACN,CAAC;QACF,OAAO,WAAW,CAAC;IACpB,CAAC,CAAE,CAAC;AACN,CAAC,CAAC;AAmBF,MAAM,UAAU,GAAG,CAAE,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,uBAAuB,EACvB,+BAA+B,EAC/B,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,GACE,EAAG,EAAE;IACtB,MAAM,yBAAyB,GAAG,CAAE,oBAAoB;QACvD,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,KAAK,QAAQ,CAAE,CAAC;IAC9F,MAAM,wBAAwB,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,MAAM,cAAc,GAAG,yBAAyB,CAAC,KAAK,CAAE,CAAC,EAAE,wBAAwB,CAAE,CAAC;IACtF,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAK,CAAE,wBAAwB,CAAE,CAAC;IACtF,MAAM,UAAU,GAAG;QAClB,mBAAmB;QACnB,uBAAuB;QACvB,oBAAoB;QACpB,uBAAuB;QACvB,+BAA+B;QAC/B,UAAU;QACV,mBAAmB;QACnB,cAAc;QACd,mBAAmB;QACnB,eAAe;QACf,gBAAgB;QAChB,sBAAsB;QACtB,eAAe;KACf,CAAC;IAEF,OAAO,CACN,8BACC,cAAK,SAAS,EAAC,oCAAoC,YAClD,KAAC,KAAK,IAAC,iBAAiB,EAAG,cAAc,KAAQ,UAAU,GAAK,GAC3D,EACJ,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,cAAK,SAAS,EAAC,uCAAuC,YACrD,KAAC,KAAK,IAAC,iBAAiB,EAAG,iBAAiB,KAAQ,UAAU,GAAK,GAC9D,CACN,IACC,CACH,CAAC;AACH,CAAC,CAAC;AAEF,OAAO;AACP,yHAAyH;AACzH,qFAAqF;AACrF,MAAM,YAAY,GAAG,CAAE,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,SAAS,EACT,QAAQ,EACR,uBAAuB,EACvB,+BAA+B,EAC/B,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,2BAA2B,GACR,EAAG,EAAE;IACxB,MAAM,kBAAkB,GAAG;QAC1B,mBAAmB;QACnB,oBAAoB;QACpB,UAAU;QACV,mBAAmB;QACnB,mBAAmB;QACnB,eAAe;QACf,sBAAsB;KACtB,CAAC;IAEF,MAAM,iBAAiB,GAAG;QACzB,GAAG,kBAAkB;QACrB,uBAAuB;QACvB,uBAAuB;QACvB,+BAA+B;QAC/B,cAAc;QACd,iBAAiB,EAAE,SAAS;QAC5B,gBAAgB;KAChB,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAC,+BAA+B,aAC3C,OAAO,KAAK,QAAQ,IAAI,KAAC,aAAa,OAAM,kBAAkB,GAAK,EACrE,cAAK,SAAS,EAAC,eAAe,YAC7B,cAAK,SAAS,EAAC,kCAAkC,YAChD,0BACG,OAAO,KAAK,QAAQ,IAAI,CACzB,cAAK,SAAS,EAAC,uCAAuC,YACrD,KAAC,KAAK,OAAM,iBAAiB,EAAG,eAAe,EAAG,eAAe,GAAK,GACjE,CACN,EACC,QAAQ,KAAK,QAAQ,IAAI,CAC1B,cAAK,SAAS,EAAC,sCAAsC,YACpD,KAAC,UAAU,OAAM,iBAAiB,EAAG,eAAe,EAAG,eAAe,GAAK,GACtE,CACN,EACC,OAAO,KAAK,QAAQ,IAAI,CACzB,cAAK,SAAS,EAAC,sCAAsC,YACpD,KAAC,UAAU,OACL,iBAAiB,EACtB,2BAA2B,EAAG,2BAA2B,GACxD,GACG,CACN,IACI,GACD,GACD,IACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAE,KAAgC,EAAG,EAAE;IAClE,MAAM,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,mCAAmC,EACnC,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,SAAS,EACT,SAAS,EACT,qBAAqB,EACrB,yBAAyB,EACzB,oBAAoB,EACpB,gCAAgC,EAChC,gCAAgC,EAChC,eAAe,GAAG,EAAE,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,6BAA6B,GAC7B,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IAE1D,MAAM,eAAe,GAAG,OAAO,CAC9B,GAAG,EAAE,CACJ,IAAI,GAAG,CAAE;QACR,CAAE,OAAO,EAAE,CAAC,CAAE;QACd,CAAE,QAAQ,EAAE,GAAG,CAAE;QACjB,CAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAE,EAAE,uDAAuD;KAC7F,CAAE,EACJ,CAAE,SAAS,CAAE,CACb,CAAC;IAEF,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,WAAW,CAAE;QAC7B,YAAY,EAAE,gBAAgB;QAC9B,oBAAoB,EAAE,eAAe;KACrC,CAAE,CAAC;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAE,iBAAiB,EAAE,SAAS,EAAE;QACtD,UAAU,EAAE,OAAO,KAAK,QAAQ;QAChC,WAAW,EAAE,QAAQ,KAAK,QAAQ;QAClC,UAAU,EAAE,OAAO,KAAK,QAAQ;KAChC,CAAE,CAAC;IAEJ,OAAO,CACN,cAAK,GAAG,EAAG,gBAAgB,EAAG,SAAS,EAAG,UAAU,YACnD,KAAC,wBAAwB,IACxB,MAAM,EAAG,MAAM,EACf,MAAM,EAAG,MAAM,EACf,SAAS,EAAG,SAAS,EACrB,MAAM,EAAG,MAAM,EACf,mCAAmC,EAAG,mCAAmC,EACzE,SAAS,EAAG,SAAS,EACrB,iBAAiB,EAAG,iBAAiB,EACrC,eAAe,EAAG,eAAe,EACjC,qBAAqB,EAAG,qBAAqB,EAC7C,yBAAyB,EAAG,yBAAyB,EACrD,oBAAoB,EAAG,oBAAoB,EAC3C,gCAAgC,EAAG,gCAAgC,EACnE,gCAAgC,EAAG,gCAAgC,EACnE,sBAAsB,EAAG,sBAAsB,EAC/C,eAAe,EAAG,eAAe,EACjC,sBAAsB,EAAG,sBAAsB,EAC/C,6BAA6B,EAAG,6BAA6B,YAE7D,KAAC,YAAY,OAAM,KAAK,EAAG,QAAQ,EAAG,QAAQ,IAAI,SAAS,GAAK,GACtC,GACtB,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/esm/components/features-grid/index.stories.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFeaturesList, getPlanFeaturesGroupedForFeaturesGrid, getPlanFeaturesGroupedForComparisonGrid, } from '@automattic/calypso-products';
+import { FeaturesGrid, useGridPlanForSpotlight, useGridPlansForFeaturesGrid, } from '../..';
+const ComponentWrapper = (props) => {
+    const gridPlans = useGridPlansForFeaturesGrid({
+        eligibleForFreeHostingTrial: true,
+        hasRedeemedDomainCredit: undefined,
+        hiddenPlans: undefined,
+        isDisplayingPlansNeededForFeature: false,
+        isSubdomainNotGenerated: false,
+        selectedFeature: undefined,
+        selectedPlan: undefined,
+        reflectStorageSelectionInPlanPrices: false,
+        term: 'TERM_ANNUALLY',
+        useFreeTrialPlanSlugs: undefined,
+        // Mirror values from props
+        siteId: props.siteId,
+        intent: props.intent,
+        coupon: props.coupon,
+        allFeaturesList: props.allFeaturesList,
+        isInSignup: props.isInSignup,
+        showLegacyStorageFeature: props.showLegacyStorageFeature,
+        useCheckPlanAvailabilityForPurchase: props.useCheckPlanAvailabilityForPurchase,
+    });
+    const gridPlanForSpotlight = useGridPlanForSpotlight({
+        gridPlans,
+        siteId: props.siteId,
+        intent: props.intent,
+        isSpotlightOnCurrentPlan: true,
+    });
+    const featureGroupMap = getPlanFeaturesGroupedForFeaturesGrid();
+    return (gridPlans && (_jsx(FeaturesGrid, { ...props, gridPlans: gridPlans, gridPlanForSpotlight: 'gridPlanForSpotlight' in props ? props.gridPlanForSpotlight : gridPlanForSpotlight, featureGroupMap: featureGroupMap })));
+};
+const defaultProps = {
+    allFeaturesList: getFeaturesList(),
+    coupon: undefined,
+    currentSitePlanSlug: undefined,
+    generatedWPComSubdomain: {
+        isLoading: false,
+        result: { domain_name: 'zzz.wordpress.com' },
+    },
+    hideUnavailableFeatures: false,
+    isCustomDomainAllowedOnFreePlan: false,
+    isInAdmin: false,
+    isInSignup: true,
+    onStorageAddOnClick: () => { },
+    planActionOverrides: undefined,
+    recordTracksEvent: () => { },
+    showLegacyStorageFeature: false,
+    showRefundPeriod: false,
+    showUpgradeableStorage: true,
+    siteId: undefined,
+    stickyRowOffset: 0,
+    useCheckPlanAvailabilityForPurchase: () => ({}),
+    useAction: () => ({
+        primary: {
+            text: 'test',
+            callback: () => { },
+            status: 'enabled',
+        },
+        postButtonText: '',
+    }),
+    enableCategorisedFeatures: true,
+    enableStorageAsBadge: false,
+    enableReducedFeatureGroupSpacing: true,
+    enableLogosOnlyForEnterprisePlan: true,
+    hideFeatureGroupTitles: true,
+};
+const meta = {
+    title: 'FeaturesGrid',
+    component: ComponentWrapper,
+};
+export default meta;
+export const PlansInAdmin = {
+    name: 'Default in admin',
+    args: {
+        ...defaultProps,
+        intent: 'plans-default-wpcom',
+        siteId: 222597060,
+        isInAdmin: true,
+        isInSignup: false,
+    },
+};
+export const PlansInSignup = {
+    name: 'Default in signup',
+    args: {
+        ...defaultProps,
+        intent: 'plans-default-wpcom',
+        isInSignup: true,
+    },
+};
+export const CategorizedFeatures = {
+    name: 'Categorized features grid',
+    args: {
+        ...PlansInSignup.args,
+        gridPlanForSpotlight: undefined,
+        // to better show the effect of the categories, here we use the one from the comparison grid instead
+        featureGroupMap: getPlanFeaturesGroupedForComparisonGrid(),
+        enableCategorisedFeatures: true,
+    },
+};
+export const CuratedPlanMixByIntent = {
+    name: 'Curated plan mix configured by intent',
+    args: {
+        ...defaultProps,
+        intent: 'plans-newsletter',
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/features-grid/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/features-grid/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,eAAe,EACf,qCAAqC,EACrC,uCAAuC,GACvC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACN,YAAY,EAEZ,uBAAuB,EACvB,2BAA2B,GAC3B,MAAM,OAAO,CAAC;AAGf,MAAM,gBAAgB,GAAG,CAAE,KAAqD,EAAG,EAAE;IACpF,MAAM,SAAS,GAAG,2BAA2B,CAAE;QAC9C,2BAA2B,EAAE,IAAI;QACjC,uBAAuB,EAAE,SAAS;QAClC,WAAW,EAAE,SAAS;QACtB,iCAAiC,EAAE,KAAK;QACxC,uBAAuB,EAAE,KAAK;QAC9B,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,mCAAmC,EAAE,KAAK;QAC1C,IAAI,EAAE,eAAe;QACrB,qBAAqB,EAAE,SAAS;QAEhC,2BAA2B;QAC3B,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,eAAe;QACtC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,wBAAwB,EAAE,KAAK,CAAC,wBAAwB;QACxD,mCAAmC,EAAE,KAAK,CAAC,mCAAmC;KAC9E,CAAE,CAAC;IAEJ,MAAM,oBAAoB,GAAG,uBAAuB,CAAE;QACrD,SAAS;QACT,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,wBAAwB,EAAE,IAAI;KAC9B,CAAE,CAAC;IAEJ,MAAM,eAAe,GAAG,qCAAqC,EAAE,CAAC;IAEhE,OAAO,CACN,SAAS,IAAI,CACZ,KAAC,YAAY,OACP,KAAK,EACV,SAAS,EAAG,SAAS,EACrB,oBAAoB,EACnB,sBAAsB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAEpF,eAAe,EAAG,eAAe,GAChC,CACF,CACD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG;IACpB,eAAe,EAAE,eAAe,EAAE;IAClC,MAAM,EAAE,SAAS;IACjB,mBAAmB,EAAE,SAAS;IAC9B,uBAAuB,EAAE;QACxB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,EAAE,WAAW,EAAE,mBAAmB,EAAE;KAC5C;IACD,uBAAuB,EAAE,KAAK;IAC9B,+BAA+B,EAAE,KAAK;IACtC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC3B,wBAAwB,EAAE,KAAK;IAC/B,gBAAgB,EAAE,KAAK;IACvB,sBAAsB,EAAE,IAAI;IAC5B,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,CAAC;IAClB,mCAAmC,EAAE,GAAG,EAAE,CAAC,CAAE,EAAE,CAAE;IACjD,SAAS,EAAE,GAAG,EAAE,CAAC,CAAE;QAClB,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,MAAM,EAAE,SAAkB;SAC1B;QACD,cAAc,EAAE,EAAE;KAClB,CAAE;IACH,yBAAyB,EAAE,IAAI;IAC/B,oBAAoB,EAAE,KAAK;IAC3B,gCAAgC,EAAE,IAAI;IACtC,gCAAgC,EAAE,IAAI;IACtC,sBAAsB,EAAE,IAAI;CAC5B,CAAC;AAEF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,gBAAgB;CACe,CAAC;AAE5C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE;QACL,GAAG,YAAY;QACf,MAAM,EAAE,qBAAqB;QAC7B,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,KAAK;KACjB;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE;QACL,GAAG,YAAY;QACf,MAAM,EAAE,qBAAqB;QAC7B,UAAU,EAAE,IAAI;KAChB;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAClC,IAAI,EAAE,2BAA2B;IACjC,IAAI,EAAE;QACL,GAAG,aAAa,CAAC,IAAI;QACrB,oBAAoB,EAAE,SAAS;QAE/B,oGAAoG;QACpG,eAAe,EAAE,uCAAuC,EAAE;QAC1D,yBAAyB,EAAE,IAAI;KAC/B;CACe,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACrC,IAAI,EAAE,uCAAuC;IAC7C,IAAI,EAAE;QACL,GAAG,YAAY;QACf,MAAM,EAAE,kBAAkB;KAC1B;CACe,CAAC"}

package/dist/esm/components/features-grid/mobile-free-domain.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FEATURE_CUSTOM_DOMAIN, isWooExpressPlan, isWpComFreePlan, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
+import { useTranslate } from 'i18n-calypso';
+import { PlanFeaturesItem } from '../item';
+const MobileFreeDomain = ({ gridPlan: { planSlug, isMonthlyPlan, features }, paidDomainName, }) => {
+    const translate = useTranslate();
+    if (isMonthlyPlan || isWpComFreePlan(planSlug) || isWpcomEnterpriseGridPlan(planSlug)) {
+        return null;
+    }
+    // Remove the custom domain feature for Woo Express plans with introductory offer.
+    if (isWooExpressPlan(planSlug) &&
+        !features.wpcomFeatures.some((feature) => feature.getSlug() === FEATURE_CUSTOM_DOMAIN)) {
+        return null;
+    }
+    const displayText = paidDomainName
+        ? translate('%(paidDomainName)s is included', {
+            args: { paidDomainName },
+        })
+        : translate('Free domain for one year');
+    return (_jsx("div", { className: "plan-features-2023-grid__highlighted-feature", children: _jsx(PlanFeaturesItem, { children: _jsx("span", { className: "plan-features-2023-grid__item-info is-annual-plan-feature is-available", children: _jsx("span", { className: "plan-features-2023-grid__item-title is-bold", children: displayText }) }) }) }));
+};
+export default MobileFreeDomain;
+//# sourceMappingURL=mobile-free-domain.js.map

package/dist/esm/components/features-grid/mobile-free-domain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-free-domain.js","sourceRoot":"","sources":["../../../../src/components/features-grid/mobile-free-domain.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,yBAAyB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,MAAM,gBAAgB,GAAG,CAAE,EAC1B,QAAQ,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EAC/C,cAAc,GACS,EAAG,EAAE;IAC5B,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,IAAK,aAAa,IAAI,eAAe,CAAE,QAAQ,CAAE,IAAI,yBAAyB,CAAE,QAAQ,CAAE,EAAG,CAAC;QAC7F,OAAO,IAAI,CAAC;IACb,CAAC;IAED,kFAAkF;IAClF,IACC,gBAAgB,CAAE,QAAQ,CAAE;QAC5B,CAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAE,CAAE,OAAO,EAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,qBAAqB,CAAE,EAC1F,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,WAAW,GAAG,cAAc;QACjC,CAAC,CAAC,SAAS,CAAE,gCAAgC,EAAE;YAC7C,IAAI,EAAE,EAAE,cAAc,EAAE;SACvB,CAAE;QACL,CAAC,CAAC,SAAS,CAAE,0BAA0B,CAAE,CAAC;IAE3C,OAAO,CACN,cAAK,SAAS,EAAC,8CAA8C,YAC5D,KAAC,gBAAgB,cAChB,eAAM,SAAS,EAAC,wEAAwE,YACvF,eAAM,SAAS,EAAC,6CAA6C,YAAG,WAAW,GAAS,GAC9E,GACW,GACd,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/components/features-grid/plan-features-list.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isWpcomEnterpriseGridPlan, FEATURE_GROUP_STORAGE, FEATURE_GROUP_ALL_FEATURES, } from '@automattic/calypso-products';
+import { JetpackLogo } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
+import { usePlansGridContext } from '../../grid-context';
+import { useManageTooltipToggle } from '../../hooks/use-manage-tooltip-toggle';
+import PlanFeatures2023GridFeatures from '../features';
+import { PlanFeaturesItem } from '../item';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import { Plans2023Tooltip } from '../plans-2023-tooltip';
+import { PlanStorage } from '../shared/storage';
+const PlanFeaturesList = ({ generatedWPComSubdomain, hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan, options, paidDomainName, renderedGridPlans, selectedFeature, featureGroupSlug, onStorageAddOnClick, showUpgradeableStorage = false, }) => {
+    const [activeTooltipId, setActiveTooltipId] = useManageTooltipToggle();
+    const translate = useTranslate();
+    const { featureGroupMap, hideFeatureGroupTitles } = usePlansGridContext();
+    const featureGroup = featureGroupSlug && featureGroupMap[featureGroupSlug];
+    /**
+     * This is a pretty critical and fragile, as it filters out the enterprise plan.
+     * If the plan sits anywhere else but the tail/end, it will most likely break the grid (render wrong parts at wrong places).
+     */
+    const plansWithFeatures = useMemo(() => {
+        return renderedGridPlans.filter((gridPlan) => !isWpcomEnterpriseGridPlan(gridPlan.planSlug));
+    }, [renderedGridPlans]);
+    return plansWithFeatures.map(({ planSlug, features: { wpcomFeatures, jetpackFeatures } }, mapIndex) => {
+        // This is temporary. Ideally all feature-groups will include the included features.
+        const filteredWpcomFeatures = featureGroup?.slug === FEATURE_GROUP_ALL_FEATURES
+            ? wpcomFeatures
+            : wpcomFeatures.filter((feature) => featureGroup?.getFeatures().includes(feature.getSlug()));
+        /**
+         * 1. Storage group is still it's own thing, with no actual features associated. It will join the rest in a follow-up.
+         */
+        if (FEATURE_GROUP_STORAGE === featureGroup?.slug) {
+            return (_jsxs(PlanDivOrTdContainer, { isTableCell: options?.isTableCell, className: "plan-features-2023-grid__table-item", children: [!hideFeatureGroupTitles && (_jsx(PlanFeaturesItem, { children: _jsx("h2", { className: "plans-grid-next-features-grid__feature-group-title", children: featureGroup?.getTitle() }) })), _jsx(PlanFeaturesItem, { children: _jsx(PlanStorage, { planSlug: planSlug, options: { isTableCell: true }, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage }) })] }, `${planSlug}-${mapIndex}`));
+        }
+        /**
+         * 2. Render a placeholder to keep the grid (table) aligned.
+         */
+        if (!filteredWpcomFeatures.length) {
+            if (options?.isTableCell) {
+                return (_jsx(PlanDivOrTdContainer, { isTableCell: true, className: "plan-features-2023-grid__table-item" }, `${planSlug}-${mapIndex}`));
+            }
+            // No placeholder required if the element is not a part of the table.
+            return null;
+        }
+        /**
+         * 3. Everything else gets rendered as usual.
+         */
+        return (_jsxs(PlanDivOrTdContainer, { isTableCell: options?.isTableCell, className: "plan-features-2023-grid__table-item", children: [!hideFeatureGroupTitles && featureGroup?.getTitle() && (_jsx(PlanFeaturesItem, { children: _jsx("h2", { className: "plans-grid-next-features-grid__feature-group-title", children: featureGroup.getTitle() }) })), _jsx(PlanFeatures2023GridFeatures, { features: filteredWpcomFeatures, planSlug: planSlug, paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, hideUnavailableFeatures: hideUnavailableFeatures, selectedFeature: selectedFeature, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId }), jetpackFeatures.length !== 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "plan-features-2023-grid__jp-logo", children: _jsx(Plans2023Tooltip, { text: translate('Security, performance, and growth tools—powered by Jetpack.'), setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, id: `${planSlug}-jp-logo-${mapIndex}`, children: _jsx(JetpackLogo, { size: 16 }) }) }, "jp-logo"), _jsx(PlanFeatures2023GridFeatures, { features: jetpackFeatures, planSlug: planSlug, paidDomainName: paidDomainName, generatedWPComSubdomain: generatedWPComSubdomain, hideUnavailableFeatures: hideUnavailableFeatures, isCustomDomainAllowedOnFreePlan: isCustomDomainAllowedOnFreePlan, setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId })] }))] }, `${planSlug}-${mapIndex}`));
+    });
+};
+export default PlanFeaturesList;
+//# sourceMappingURL=plan-features-list.js.map

package/dist/esm/components/features-grid/plan-features-list.js.map

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

package/dist/esm/components/features-grid/plan-headers.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getPlanClass } from '@automattic/calypso-products';
+import clsx from 'clsx';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+const PlanHeaders = ({ options, renderedGridPlans }) => {
+    return renderedGridPlans.map(({ planSlug, planTitle }) => {
+        const headerClasses = clsx('plan-features-2023-grid__header', getPlanClass(planSlug));
+        return (_jsx(PlanDivOrTdContainer, { className: "plan-features-2023-grid__table-item", isTableCell: options?.isTableCell, children: _jsx("header", { className: headerClasses, children: _jsx("h4", { className: "plan-features-2023-grid__header-title", children: planTitle }) }) }, planSlug));
+    });
+};
+export default PlanHeaders;
+//# sourceMappingURL=plan-headers.js.map

package/dist/esm/components/features-grid/plan-headers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-headers.js","sourceRoot":"","sources":["../../../../src/components/features-grid/plan-headers.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAS5D,MAAM,WAAW,GAAG,CAAE,EAAE,OAAO,EAAE,iBAAiB,EAAoB,EAAG,EAAE;IAC1E,OAAO,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAG,EAAE;QAC3D,MAAM,aAAa,GAAG,IAAI,CAAE,iCAAiC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAE,CAAC;QAE1F,OAAO,CACN,KAAC,oBAAoB,IAEpB,SAAS,EAAC,qCAAqC,EAC/C,WAAW,EAAG,OAAO,EAAE,WAAW,YAElC,iBAAQ,SAAS,EAAG,aAAa,YAChC,aAAI,SAAS,EAAC,uCAAuC,YAAG,SAAS,GAAO,GAChE,IANH,QAAQ,CAOQ,CACvB,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/components/features-grid/plan-logos.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PlanLogo from '../plan-logo';
+const PlanLogos = ({ isInSignup, options, renderedGridPlans }) => {
+    return renderedGridPlans.map(({ planSlug }, index) => {
+        return (_jsx(PlanLogo, { planSlug: planSlug, planIndex: index, renderedGridPlans: renderedGridPlans, isInSignup: isInSignup, isTableCell: options?.isTableCell }, planSlug));
+    });
+};
+export default PlanLogos;
+//# sourceMappingURL=plan-logos.js.map

package/dist/esm/components/features-grid/plan-logos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-logos.js","sourceRoot":"","sources":["../../../../src/components/features-grid/plan-logos.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,cAAc,CAAC;AAUpC,MAAM,SAAS,GAAG,CAAE,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAkB,EAAG,EAAE;IAClF,OAAO,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAG,EAAE;QACvD,OAAO,CACN,KAAC,QAAQ,IAER,QAAQ,EAAG,QAAQ,EACnB,SAAS,EAAG,KAAK,EACjB,iBAAiB,EAAG,iBAAiB,EACrC,UAAU,EAAG,UAAU,EACvB,WAAW,EAAG,OAAO,EAAE,WAAW,IAL5B,QAAQ,CAMb,CACF,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/esm/components/features-grid/plan-prices.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import HeaderPrice from '../shared/header-price';
+import HeaderPriceContextProvider from '../shared/header-price/header-price-context';
+const PlanPrices = ({ currentSitePlanSlug, options, renderedGridPlans }) => {
+    return (_jsx(HeaderPriceContextProvider, { children: renderedGridPlans.map(({ planSlug }) => {
+            return (_jsx(PlanDivOrTdContainer, { scope: "col", className: "plan-features-2023-grid__table-item plan-price", isTableCell: options?.isTableCell, children: _jsx(HeaderPrice, { planSlug: planSlug, currentSitePlanSlug: currentSitePlanSlug, visibleGridPlans: renderedGridPlans }) }, planSlug));
+        }) }));
+};
+export default PlanPrices;
+//# sourceMappingURL=plan-prices.js.map

package/dist/esm/components/features-grid/plan-prices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-prices.js","sourceRoot":"","sources":["../../../../src/components/features-grid/plan-prices.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,0BAA0B,MAAM,6CAA6C,CAAC;AAUrF,MAAM,UAAU,GAAG,CAAE,EAAE,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAmB,EAAG,EAAE;IAC7F,OAAO,CACN,KAAC,0BAA0B,cACxB,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;YAC3C,OAAO,CACN,KAAC,oBAAoB,IACpB,KAAK,EAAC,KAAK,EAEX,SAAS,EAAC,gDAAgD,EAC1D,WAAW,EAAG,OAAO,EAAE,WAAW,YAElC,KAAC,WAAW,IACX,QAAQ,EAAG,QAAQ,EACnB,mBAAmB,EAAG,mBAAmB,EACzC,gBAAgB,EAAG,iBAAiB,GACnC,IARI,QAAQ,CASQ,CACvB,CAAC;QACH,CAAC,CAAE,GACyB,CAC7B,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/components/features-grid/plan-tagline.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PlanDivOrTdContainer from '../plan-div-td-container';
+const PlanTagline = ({ options, renderedGridPlans }) => {
+    return renderedGridPlans.map(({ planSlug, tagline }) => {
+        return (_jsx(PlanDivOrTdContainer, { className: "plan-features-2023-grid__table-item", isTableCell: options?.isTableCell, children: _jsx("div", { className: "plan-features-2023-grid__header-tagline", children: tagline }) }, planSlug));
+    });
+};
+export default PlanTagline;
+//# sourceMappingURL=plan-tagline.js.map

package/dist/esm/components/features-grid/plan-tagline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-tagline.js","sourceRoot":"","sources":["../../../../src/components/features-grid/plan-tagline.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAS5D,MAAM,WAAW,GAAG,CAAE,EAAE,OAAO,EAAE,iBAAiB,EAAoB,EAAG,EAAE;IAC1E,OAAO,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAG,EAAE;QACzD,OAAO,CACN,KAAC,oBAAoB,IAEpB,SAAS,EAAC,qCAAqC,EAC/C,WAAW,EAAG,OAAO,EAAE,WAAW,YAElC,cAAK,SAAS,EAAC,yCAAyC,YAAG,OAAO,GAAQ,IAJpE,QAAQ,CAKQ,CACvB,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/components/features-grid/previous-features-included-title.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getPlanClass, isWpComFreePlan, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
+import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+const PreviousFeaturesIncludedTitle = ({ renderedGridPlans, options, }) => {
+    const translate = useTranslate();
+    /**
+     * This is a pretty critical and fragile, as it filters out the enterprise plan.
+     * If the plan sits anywhere else but the tail/end, it will most likely break the grid (render wrong parts at wrong places).
+     */
+    const plansWithFeatures = useMemo(() => {
+        return renderedGridPlans.filter((gridPlan) => !isWpcomEnterpriseGridPlan(gridPlan.planSlug));
+    }, [renderedGridPlans]);
+    const { gridPlans } = usePlansGridContext();
+    return plansWithFeatures.map(({ planSlug }) => {
+        const shouldShowFeatureTitle = !isWpComFreePlan(planSlug);
+        const indexInGridPlansForFeaturesGrid = gridPlans.findIndex(({ planSlug: slug }) => slug === planSlug);
+        const previousProductName = indexInGridPlansForFeaturesGrid > 0
+            ? gridPlans[indexInGridPlansForFeaturesGrid - 1].productNameShort
+            : null;
+        const title = previousProductName &&
+            translate('Everything in %(planShortName)s, plus:', {
+                args: { planShortName: previousProductName },
+            });
+        const classes = clsx('plan-features-2023-grid__common-title', getPlanClass(planSlug));
+        return (_jsx(PlanDivOrTdContainer, { isTableCell: options?.isTableCell, className: "plan-features-2023-grid__table-item", children: shouldShowFeatureTitle && _jsx("div", { className: classes, children: title }) }, planSlug));
+    });
+};
+export default PreviousFeaturesIncludedTitle;
+//# sourceMappingURL=previous-features-included-title.js.map

package/dist/esm/components/features-grid/previous-features-included-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"previous-features-included-title.js","sourceRoot":"","sources":["../../../../src/components/features-grid/previous-features-included-title.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,YAAY,EACZ,eAAe,EACf,yBAAyB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAS5D,MAAM,6BAA6B,GAAG,CAAE,EACvC,iBAAiB,EACjB,OAAO,GAC6B,EAAG,EAAE;IACzC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC;;;OAGG;IACH,MAAM,iBAAiB,GAAG,OAAO,CAAE,GAAG,EAAE;QACvC,OAAO,iBAAiB,CAAC,MAAM,CAC9B,CAAE,QAAQ,EAAG,EAAE,CAAC,CAAE,yBAAyB,CAAE,QAAQ,CAAC,QAAQ,CAAE,CAChE,CAAC;IACH,CAAC,EAAE,CAAE,iBAAiB,CAAE,CAAE,CAAC;IAE3B,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAE5C,OAAO,iBAAiB,CAAC,GAAG,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;QAChD,MAAM,sBAAsB,GAAG,CAAE,eAAe,CAAE,QAAQ,CAAE,CAAC;QAC7D,MAAM,+BAA+B,GAAG,SAAS,CAAC,SAAS,CAC1D,CAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAG,EAAE,CAAC,IAAI,KAAK,QAAQ,CAC3C,CAAC;QACF,MAAM,mBAAmB,GACxB,+BAA+B,GAAG,CAAC;YAClC,CAAC,CAAC,SAAS,CAAE,+BAA+B,GAAG,CAAC,CAAE,CAAC,gBAAgB;YACnE,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,KAAK,GACV,mBAAmB;YACnB,SAAS,CAAE,wCAAwC,EAAE;gBACpD,IAAI,EAAE,EAAE,aAAa,EAAE,mBAAmB,EAAE;aAC5C,CAAE,CAAC;QACL,MAAM,OAAO,GAAG,IAAI,CAAE,uCAAuC,EAAE,YAAY,CAAE,QAAQ,CAAE,CAAE,CAAC;QAE1F,OAAO,CACN,KAAC,oBAAoB,IAEpB,WAAW,EAAG,OAAO,EAAE,WAAW,EAClC,SAAS,EAAC,qCAAqC,YAE7C,sBAAsB,IAAI,cAAK,SAAS,EAAG,OAAO,YAAK,KAAK,GAAQ,IAJhE,QAAQ,CAKQ,CACvB,CAAC;IACH,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/dist/esm/components/features-grid/spotlight-plan.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FEATURE_GROUP_STORAGE, getPlanClass, isFreePlan } from '@automattic/calypso-products';
+import clsx from 'clsx';
+import BillingTimeframes from './billing-timeframes';
+import PlanFeaturesList from './plan-features-list';
+import PlanHeaders from './plan-headers';
+import PlanLogos from './plan-logos';
+import PlanPrices from './plan-prices';
+import PlanTagline from './plan-tagline';
+import TopButtons from './top-buttons';
+import './spotlight-plan.scss';
+const SpotlightPlan = ({ currentSitePlanSlug, gridPlanForSpotlight, isInSignup, onStorageAddOnClick, planActionOverrides, showUpgradeableStorage, }) => {
+    if (!gridPlanForSpotlight) {
+        return null;
+    }
+    const spotlightPlanClasses = clsx('plan-features-2023-grid__plan-spotlight', getPlanClass(gridPlanForSpotlight.planSlug));
+    const isNotFreePlan = !isFreePlan(gridPlanForSpotlight.planSlug);
+    return (_jsxs("div", { className: spotlightPlanClasses, children: [_jsxs("div", { children: [_jsx(PlanLogos, { renderedGridPlans: [gridPlanForSpotlight], isInSignup: false }), _jsx(PlanHeaders, { renderedGridPlans: [gridPlanForSpotlight] }), isNotFreePlan && _jsx(PlanTagline, { renderedGridPlans: [gridPlanForSpotlight] }), isNotFreePlan && (_jsx(PlanPrices, { renderedGridPlans: [gridPlanForSpotlight], currentSitePlanSlug: currentSitePlanSlug })), isNotFreePlan && _jsx(BillingTimeframes, { renderedGridPlans: [gridPlanForSpotlight] }), _jsx(PlanFeaturesList, { renderedGridPlans: [gridPlanForSpotlight], featureGroupSlug: FEATURE_GROUP_STORAGE, onStorageAddOnClick: onStorageAddOnClick, showUpgradeableStorage: showUpgradeableStorage })] }), _jsx("div", { className: "spotlight-plan__buttons", children: _jsx(TopButtons, { renderedGridPlans: [gridPlanForSpotlight], isInSignup: isInSignup, currentSitePlanSlug: currentSitePlanSlug, planActionOverrides: planActionOverrides }) })] }));
+};
+export default SpotlightPlan;
+//# sourceMappingURL=spotlight-plan.js.map

package/dist/esm/components/features-grid/spotlight-plan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight-plan.js","sourceRoot":"","sources":["../../../../src/components/features-grid/spotlight-plan.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE/F,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,uBAAuB,CAAC;AAc/B,MAAM,aAAa,GAAG,CAAE,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,GACF,EAAG,EAAE;IACzB,IAAK,CAAE,oBAAoB,EAAG,CAAC;QAC9B,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,oBAAoB,GAAG,IAAI,CAChC,yCAAyC,EACzC,YAAY,CAAE,oBAAoB,CAAC,QAAQ,CAAE,CAC7C,CAAC;IAEF,MAAM,aAAa,GAAG,CAAE,UAAU,CAAE,oBAAoB,CAAC,QAAQ,CAAE,CAAC;IAEpE,OAAO,CACN,eAAK,SAAS,EAAG,oBAAoB,aACpC,0BACC,KAAC,SAAS,IAAC,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,EAAG,UAAU,EAAG,KAAK,GAAK,EACjF,KAAC,WAAW,IAAC,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,GAAK,EAC5D,aAAa,IAAI,KAAC,WAAW,IAAC,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,GAAK,EAC/E,aAAa,IAAI,CAClB,KAAC,UAAU,IACV,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,EAC5C,mBAAmB,EAAG,mBAAmB,GACxC,CACF,EACC,aAAa,IAAI,KAAC,iBAAiB,IAAC,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,GAAK,EACvF,KAAC,gBAAgB,IAChB,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,EAC5C,gBAAgB,EAAG,qBAAqB,EACxC,mBAAmB,EAAG,mBAAmB,EACzC,sBAAsB,EAAG,sBAAsB,GAC9C,IACG,EACN,cAAK,SAAS,EAAC,yBAAyB,YACvC,KAAC,UAAU,IACV,iBAAiB,EAAG,CAAE,oBAAoB,CAAE,EAC5C,UAAU,EAAG,UAAU,EACvB,mBAAmB,EAAG,mBAAmB,EACzC,mBAAmB,EAAG,mBAAmB,GACxC,GACG,IACD,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/components/features-grid/spotlight-plan.scss

@@ -0,0 +1,5 @@
+.plan-features-2023-grid__plan-spotlight {
+	.plans-grid-next-action-button {
+		width: 200px;
+	}
+}