@automattic/plans-grid-next 1.0.0

package/dist/cjs/hooks/use-grid-size.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const element_1 = require("@wordpress/element");
+const resize_observer_polyfill_1 = tslib_1.__importDefault(require("resize-observer-polyfill"));
+/**
+ * useGridSize returns the current grid size based on the width of the container
+ * and the breakpoints passed through as props.
+ */
+function useGridSize({ containerRef, containerBreakpoints }) {
+    const [gridSize, setGridSize] = (0, element_1.useState)(null);
+    (0, element_1.useLayoutEffect)(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const observer = new resize_observer_polyfill_1.default(([entry]) => {
+            const { width } = entry.contentRect;
+            if (width) {
+                for (const [key, value] of [...containerBreakpoints].reverse()) {
+                    if (width >= value) {
+                        setGridSize(key);
+                        break;
+                    }
+                }
+            }
+        });
+        observer.observe(containerRef.current);
+        return () => observer.disconnect();
+    }, [containerRef, containerBreakpoints]);
+    return gridSize;
+}
+exports.default = useGridSize;
+//# sourceMappingURL=use-grid-size.js.map

package/dist/cjs/hooks/use-grid-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-size.js","sourceRoot":"","sources":["../../../src/hooks/use-grid-size.ts"],"names":[],"mappings":";;;AAAA,gDAA+D;AAC/D,gGAAsD;AAatD;;;GAGG;AACH,SAAwB,WAAW,CAAE,EAAE,YAAY,EAAE,oBAAoB,EAAS;IACjF,MAAM,CAAE,QAAQ,EAAE,WAAW,CAAE,GAAG,IAAA,kBAAQ,EAAmB,IAAI,CAAE,CAAC;IAEpE,IAAA,yBAAe,EAAE,GAAG,EAAE;QACrB,IAAK,CAAE,YAAY,CAAC,OAAO,EAAG,CAAC;YAC9B,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,kCAAc,CAAE,CAAE,CAAE,KAAK,CAAE,EAAG,EAAE;YACpD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;YAEpC,IAAK,KAAK,EAAG,CAAC;gBACb,KAAM,MAAM,CAAE,GAAG,EAAE,KAAK,CAAE,IAAI,CAAE,GAAG,oBAAoB,CAAE,CAAC,OAAO,EAAE,EAAG,CAAC;oBACtE,IAAK,KAAK,IAAI,KAAK,EAAG,CAAC;wBACtB,WAAW,CAAE,GAAG,CAAE,CAAC;wBACnB,MAAM;oBACP,CAAC;gBACF,CAAC;YACF,CAAC;QACF,CAAC,CAAE,CAAC;QAEJ,QAAQ,CAAC,OAAO,CAAE,YAAY,CAAC,OAAO,CAAE,CAAC;QAEzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACpC,CAAC,EAAE,CAAE,YAAY,EAAE,oBAAoB,CAAE,CAAE,CAAC;IAE5C,OAAO,QAAQ,CAAC;AACjB,CAAC;AA3BD,8BA2BC"}

package/dist/cjs/hooks/use-highlight-adjacency-matrix.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const element_1 = require("@wordpress/element");
+const useHighlightAdjacencyMatrix = ({ renderedGridPlans }) => {
+    return (0, element_1.useMemo)(() => {
+        const adjacencyMatrix = {};
+        const highlightIndices = renderedGridPlans.reduce((acc, gridPlan, index) => {
+            if (gridPlan.highlightLabel) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        renderedGridPlans.forEach(({ planSlug }, index) => {
+            adjacencyMatrix[planSlug] = { leftOfHighlight: false, rightOfHighlight: false };
+            highlightIndices.forEach((highlightIndex) => {
+                if (highlightIndex === index - 1) {
+                    adjacencyMatrix[planSlug].rightOfHighlight = true;
+                }
+                if (highlightIndex === index + 1) {
+                    adjacencyMatrix[planSlug].leftOfHighlight = true;
+                }
+            });
+        });
+        if (highlightIndices.length === 1) {
+            adjacencyMatrix[renderedGridPlans[highlightIndices[0]].planSlug].isOnlyHighlight = true;
+        }
+        return adjacencyMatrix;
+    }, [renderedGridPlans]);
+};
+exports.default = useHighlightAdjacencyMatrix;
+//# sourceMappingURL=use-highlight-adjacency-matrix.js.map

package/dist/cjs/hooks/use-highlight-adjacency-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight-adjacency-matrix.js","sourceRoot":"","sources":["../../../src/hooks/use-highlight-adjacency-matrix.ts"],"names":[],"mappings":";;AAAA,gDAA6C;AAgB7C,MAAM,2BAA2B,GAAG,CAAE,EAAE,iBAAiB,EAAS,EAAG,EAAE;IACtE,OAAO,IAAA,iBAAO,EAAE,GAAG,EAAE;QACpB,MAAM,eAAe,GAAG,EAA8B,CAAC;QACvD,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,CAAE,CAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAG,EAAE;YAC7E,IAAK,QAAQ,CAAC,cAAc,EAAG,CAAC;gBAC/B,GAAG,CAAC,IAAI,CAAE,KAAK,CAAE,CAAC;YACnB,CAAC;YACD,OAAO,GAAG,CAAC;QACZ,CAAC,EAAE,EAAc,CAAE,CAAC;QAEpB,iBAAiB,CAAC,OAAO,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAG,EAAE;YACpD,eAAe,CAAE,QAAQ,CAAE,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC;YAElF,gBAAgB,CAAC,OAAO,CAAE,CAAE,cAAc,EAAG,EAAE;gBAC9C,IAAK,cAAc,KAAK,KAAK,GAAG,CAAC,EAAG,CAAC;oBACpC,eAAe,CAAE,QAAQ,CAAE,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBACrD,CAAC;gBACD,IAAK,cAAc,KAAK,KAAK,GAAG,CAAC,EAAG,CAAC;oBACpC,eAAe,CAAE,QAAQ,CAAE,CAAC,eAAe,GAAG,IAAI,CAAC;gBACpD,CAAC;YACF,CAAC,CAAE,CAAC;QACL,CAAC,CAAE,CAAC;QAEJ,IAAK,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAG,CAAC;YACrC,eAAe,CAAE,iBAAiB,CAAE,gBAAgB,CAAE,CAAC,CAAE,CAAE,CAAC,QAAQ,CAAE,CAAC,eAAe,GAAG,IAAI,CAAC;QAC/F,CAAC;QAED,OAAO,eAAe,CAAC;IACxB,CAAC,EAAE,CAAE,iBAAiB,CAAE,CAAE,CAAC;AAC5B,CAAC,CAAC;AAEF,kBAAe,2BAA2B,CAAC"}

package/dist/cjs/hooks/use-is-large-currency.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const element_1 = require("@wordpress/element");
+const i18n_calypso_1 = require("i18n-calypso");
+const LARGE_ADD_ON_CURRENCY_CHAR_THRESHOLD = 7;
+const LARGE_CURRENCY_CHAR_THRESHOLD = 6;
+const LARGE_CURRENCY_COMBINED_CHAR_THRESHOLD = 9;
+function useDisplayPrices(currencyCode, prices, ignoreWhitespace = false) {
+    /**
+     * Prices are represented in smallest units for a currency, and not as prices that
+     * are actually displayed. Ex. $20 is the integer 2000, and not 20. To determine if
+     * the display price is too long, we convert the integer to a display string.
+     */
+    return (0, element_1.useMemo)(() => prices?.map((price) => {
+        const displayPrice = (0, i18n_calypso_1.formatCurrency)(price, currencyCode, {
+            stripZeros: true,
+            isSmallestUnit: true,
+        });
+        return ignoreWhitespace ? displayPrice.replace(/\s/g, '') : displayPrice;
+    }), [currencyCode, prices, ignoreWhitespace]);
+}
+function hasExceededPriceThreshold(displayPrices, isAddOn = false) {
+    const threshold = isAddOn ? LARGE_ADD_ON_CURRENCY_CHAR_THRESHOLD : LARGE_CURRENCY_CHAR_THRESHOLD;
+    return !!displayPrices?.some((price) => price.length > threshold);
+}
+/**
+ * Returns true if the combined length of the display prices exceeds the threshold.
+ * Checks the adjacent pairs in the displayPrices array,
+ * which correspnd to the original-price and discounted-price for each plan.
+ */
+function hasExceededCombinedPriceThreshold(displayPrices) {
+    if (!displayPrices || displayPrices.length < 2) {
+        return false;
+    }
+    for (let i = 0; i < displayPrices.length - 1; i++) {
+        const originalPrice = displayPrices[i];
+        const discountedPrice = displayPrices[i + 1];
+        if (originalPrice.length + discountedPrice.length > LARGE_CURRENCY_COMBINED_CHAR_THRESHOLD) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Hook that returns true if the string representation of any price (discounted/undiscounted)
+ * of any of the plan slugs exceeds 6 characters. For example, $4,000 would be 6 characters.
+ * Additionally, also returns true if the combined discounted / undiscounted prices exceed
+ * 9 characters. For example, $4,000 undiscounted and $30 discounted would be 9 characters.
+ * This is primarily used for lowering the font-size of "large" display prices.
+ */
+function useIsLargeCurrency({ prices, isAddOn = false, currencyCode, ignoreWhitespace = false, }) {
+    /**
+     * Because this hook is primarily used for lowering font-sizes of "large" display prices,
+     * this implementation is non-ideal. It assumes that each character in the display price,
+     * including currency symbols, comma separators, decimal points, etc. are all the same width.
+     *
+     * For the time being, however, this is a good enough approximation and works with our existing
+     * currencies. We'll need to update this in the near future, especially to prevent issues with
+     * newly introduced currencies.
+     *
+     * https://github.com/Automattic/wp-calypso/pull/81537#discussion_r1323182287
+     */
+    const displayPrices = useDisplayPrices(currencyCode, prices, ignoreWhitespace);
+    const exceedsPriceThreshold = hasExceededPriceThreshold(displayPrices, isAddOn);
+    const exceedsCombinedPriceThreshold = hasExceededCombinedPriceThreshold(displayPrices);
+    return isAddOn ? exceedsPriceThreshold : exceedsPriceThreshold || exceedsCombinedPriceThreshold;
+}
+exports.default = useIsLargeCurrency;
+//# sourceMappingURL=use-is-large-currency.js.map

package/dist/cjs/hooks/use-is-large-currency.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-large-currency.js","sourceRoot":"","sources":["../../../src/hooks/use-is-large-currency.ts"],"names":[],"mappings":";;AAAA,gDAA6C;AAC7C,+CAA8C;AAC9C,MAAM,oCAAoC,GAAG,CAAC,CAAC;AAC/C,MAAM,6BAA6B,GAAG,CAAC,CAAC;AACxC,MAAM,sCAAsC,GAAG,CAAC,CAAC;AASjD,SAAS,gBAAgB,CAAE,YAAoB,EAAE,MAAiB,EAAE,gBAAgB,GAAG,KAAK;IAC3F;;;;OAIG;IAEH,OAAO,IAAA,iBAAO,EACb,GAAG,EAAE,CACJ,MAAM,EAAE,GAAG,CAAE,CAAE,KAAK,EAAG,EAAE;QACxB,MAAM,YAAY,GAAG,IAAA,6BAAc,EAAE,KAAK,EAAE,YAAY,EAAE;YACzD,UAAU,EAAE,IAAI;YAChB,cAAc,EAAE,IAAI;SACpB,CAAE,CAAC;QAEJ,OAAO,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAE,KAAK,EAAE,EAAE,CAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAC5E,CAAC,CAAE,EACJ,CAAE,YAAY,EAAE,MAAM,EAAE,gBAAgB,CAAE,CAC1C,CAAC;AACH,CAAC;AAED,SAAS,yBAAyB,CAAE,aAAwB,EAAE,OAAO,GAAG,KAAK;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,6BAA6B,CAAC;IACjG,OAAO,CAAC,CAAE,aAAa,EAAE,IAAI,CAAE,CAAE,KAAK,EAAG,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAE,CAAC;AACxE,CAAC;AAED;;;;GAIG;AACH,SAAS,iCAAiC,CAAE,aAAwB;IACnE,IAAK,CAAE,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAG,CAAC;QACnD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,KAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAG,CAAC;QACrD,MAAM,aAAa,GAAG,aAAa,CAAE,CAAC,CAAE,CAAC;QACzC,MAAM,eAAe,GAAG,aAAa,CAAE,CAAC,GAAG,CAAC,CAAE,CAAC;QAE/C,IAAK,aAAa,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,sCAAsC,EAAG,CAAC;YAC9F,OAAO,IAAI,CAAC;QACb,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC;AACd,CAAC;AAED;;;;;;GAMG;AACH,SAAwB,kBAAkB,CAAE,EAC3C,MAAM,EACN,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,gBAAgB,GAAG,KAAK,GACjB;IACP;;;;;;;;;;OAUG;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAE,YAAY,EAAE,MAAM,EAAE,gBAAgB,CAAE,CAAC;IACjF,MAAM,qBAAqB,GAAG,yBAAyB,CAAE,aAAa,EAAE,OAAO,CAAE,CAAC;IAClF,MAAM,6BAA6B,GAAG,iCAAiC,CAAE,aAAa,CAAE,CAAC;IAEzF,OAAO,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,IAAI,6BAA6B,CAAC;AACjG,CAAC;AAtBD,qCAsBC"}

package/dist/cjs/hooks/use-manage-tooltip-toggle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useManageTooltipToggle = void 0;
+const react_1 = require("react");
+const touch_detect_1 = require("../lib/touch-detect");
+function useManageTooltipToggle() {
+    const [activeTooltipId, setActiveTooltipId] = (0, react_1.useState)('');
+    const isTouch = (0, touch_detect_1.hasTouch)();
+    (0, react_1.useEffect)(() => {
+        if (!isTouch) {
+            return;
+        }
+        // Close all tooltips if the user touches anywhere outside a tooltip container.
+        // Since the plan logos are an SVG, we are checking the event target's parent classes to determine the tooltip container.
+        const closeAllTooltips = (event) => {
+            const eventTarget = event.target;
+            if (!eventTarget.closest('.plans-2023-tooltip__hover-area-container')) {
+                setActiveTooltipId('');
+            }
+        };
+        document.addEventListener('touchstart', closeAllTooltips);
+        return () => {
+            document.removeEventListener('touchstart', closeAllTooltips);
+        };
+    }, [isTouch]);
+    return [activeTooltipId, setActiveTooltipId];
+}
+exports.useManageTooltipToggle = useManageTooltipToggle;
+//# sourceMappingURL=use-manage-tooltip-toggle.js.map

package/dist/cjs/hooks/use-manage-tooltip-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-manage-tooltip-toggle.js","sourceRoot":"","sources":["../../../src/hooks/use-manage-tooltip-toggle.ts"],"names":[],"mappings":";;;AAAA,iCAAsE;AACtE,sDAA+C;AAE/C,SAAgB,sBAAsB;IACrC,MAAM,CAAE,eAAe,EAAE,kBAAkB,CAAE,GAAG,IAAA,gBAAQ,EAAE,EAAE,CAAE,CAAC;IAC/D,MAAM,OAAO,GAAG,IAAA,uBAAQ,GAAE,CAAC;IAE3B,IAAA,iBAAS,EAAE,GAAG,EAAE;QACf,IAAK,CAAE,OAAO,EAAG,CAAC;YACjB,OAAO;QACR,CAAC;QAED,+EAA+E;QAC/E,yHAAyH;QACzH,MAAM,gBAAgB,GAAG,CAAE,KAAiB,EAAG,EAAE;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAiB,CAAC;YAC5C,IAAK,CAAE,WAAW,CAAC,OAAO,CAAE,2CAA2C,CAAE,EAAG,CAAC;gBAC5E,kBAAkB,CAAE,EAAE,CAAE,CAAC;YAC1B,CAAC;QACF,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAE,YAAY,EAAE,gBAAgB,CAAE,CAAC;QAE5D,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAE,YAAY,EAAE,gBAAgB,CAAE,CAAC;QAChE,CAAC,CAAC;IACH,CAAC,EAAE,CAAE,OAAO,CAAE,CAAE,CAAC;IAEjB,OAAO,CAAE,eAAe,EAAE,kBAAkB,CAAE,CAAC;AAChD,CAAC;AA1BD,wDA0BC"}

package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlanPricingInfoFromGridPlans = void 0;
+const element_1 = require("@wordpress/element");
+function usePlanPricingInfoFromGridPlans({ gridPlans, returnMonthly = true, }) {
+    return (0, element_1.useMemo)(() => gridPlans.reduce((acc, gridPlan) => {
+        const { pricing: { originalPrice, discountedPrice, currencyCode }, } = gridPlan;
+        const originalPriceForTerm = originalPrice[returnMonthly ? 'monthly' : 'full'] || 0;
+        const discountedPriceForTerm = discountedPrice[returnMonthly ? 'monthly' : 'full'] || 0;
+        return {
+            prices: [...acc.prices, originalPriceForTerm, discountedPriceForTerm],
+            currencyCode: currencyCode ?? acc.currencyCode,
+        };
+    }, { prices: [], currencyCode: 'USD' }), [gridPlans, returnMonthly]);
+}
+exports.usePlanPricingInfoFromGridPlans = usePlanPricingInfoFromGridPlans;
+//# sourceMappingURL=use-plan-pricing-info-from-grid-plans.js.map

package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-plan-pricing-info-from-grid-plans.js","sourceRoot":"","sources":["../../../src/hooks/use-plan-pricing-info-from-grid-plans.ts"],"names":[],"mappings":";;;AAAA,gDAA6C;AAQ7C,SAAgB,+BAA+B,CAAE,EAChD,SAAS,EACT,aAAa,GAAG,IAAI,GAIpB;IACA,OAAO,IAAA,iBAAO,EACb,GAAG,EAAE,CACJ,SAAS,CAAC,MAAM,CACf,CAAE,GAAgB,EAAE,QAAQ,EAAG,EAAE;QAChC,MAAM,EACL,OAAO,EAAE,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,GACzD,GAAG,QAAQ,CAAC;QAEb,MAAM,oBAAoB,GAAG,aAAa,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAE,IAAI,CAAC,CAAC;QACtF,MAAM,sBAAsB,GAAG,eAAe,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAE,IAAI,CAAC,CAAC;QAE1F,OAAO;YACN,MAAM,EAAE,CAAE,GAAG,GAAG,CAAC,MAAM,EAAE,oBAAoB,EAAE,sBAAsB,CAAE;YACvE,YAAY,EAAE,YAAY,IAAI,GAAG,CAAC,YAAY;SAC9C,CAAC;IACH,CAAC,EACD,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CACnC,EACF,CAAE,SAAS,EAAE,aAAa,CAAE,CAC5B,CAAC;AACH,CAAC;AA3BD,0EA2BC"}

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EFFECTIVE_TERMS_LIST = exports.useRestructuredPlanFeaturesForComparisonGrid = exports.usePlanTypesWithIntent = exports.usePlansFromTypes = exports.usePlanFeaturesForGridPlans = exports.usePlanBillingDescription = exports.useGridPlanForSpotlight = exports.useGridPlansForComparisonGrid = exports.useGridPlansForFeaturesGrid = exports.useGridPlans = exports.useManageTooltipToggle = exports.Plans2023Tooltip = exports.PlanButton = exports.PlanTypeSelector = exports.FeaturesGrid = exports.ComparisonGrid = void 0;
+const tslib_1 = require("tslib");
+const comparison_grid_1 = tslib_1.__importDefault(require("./components/comparison-grid"));
+exports.ComparisonGrid = comparison_grid_1.default;
+const features_grid_1 = tslib_1.__importDefault(require("./components/features-grid"));
+exports.FeaturesGrid = features_grid_1.default;
+const plan_button_1 = tslib_1.__importDefault(require("./components/plan-button"));
+exports.PlanButton = plan_button_1.default;
+const plan_type_selector_1 = tslib_1.__importDefault(require("./components/plan-type-selector"));
+exports.PlanTypeSelector = plan_type_selector_1.default;
+const plans_2023_tooltip_1 = require("./components/plans-2023-tooltip");
+Object.defineProperty(exports, "Plans2023Tooltip", { enumerable: true, get: function () { return plans_2023_tooltip_1.Plans2023Tooltip; } });
+const constants_1 = require("./constants");
+Object.defineProperty(exports, "EFFECTIVE_TERMS_LIST", { enumerable: true, get: function () { return constants_1.EFFECTIVE_TERMS_LIST; } });
+const use_grid_plan_for_spotlight_1 = tslib_1.__importDefault(require("./hooks/data-store/use-grid-plan-for-spotlight"));
+exports.useGridPlanForSpotlight = use_grid_plan_for_spotlight_1.default;
+const use_grid_plans_1 = tslib_1.__importStar(require("./hooks/data-store/use-grid-plans"));
+exports.useGridPlans = use_grid_plans_1.default;
+Object.defineProperty(exports, "usePlanTypesWithIntent", { enumerable: true, get: function () { return use_grid_plans_1.usePlanTypesWithIntent; } });
+const use_grid_plans_for_comparison_grid_1 = tslib_1.__importDefault(require("./hooks/data-store/use-grid-plans-for-comparison-grid"));
+exports.useGridPlansForComparisonGrid = use_grid_plans_for_comparison_grid_1.default;
+const use_grid_plans_for_features_grid_1 = tslib_1.__importDefault(require("./hooks/data-store/use-grid-plans-for-features-grid"));
+exports.useGridPlansForFeaturesGrid = use_grid_plans_for_features_grid_1.default;
+const use_plan_billing_description_1 = tslib_1.__importDefault(require("./hooks/data-store/use-plan-billing-description"));
+exports.usePlanBillingDescription = use_plan_billing_description_1.default;
+const use_plan_features_for_grid_plans_1 = tslib_1.__importDefault(require("./hooks/data-store/use-plan-features-for-grid-plans"));
+exports.usePlanFeaturesForGridPlans = use_plan_features_for_grid_plans_1.default;
+const use_plans_from_types_1 = tslib_1.__importDefault(require("./hooks/data-store/use-plans-from-types"));
+exports.usePlansFromTypes = use_plans_from_types_1.default;
+const use_restructured_plan_features_for_comparison_grid_1 = tslib_1.__importDefault(require("./hooks/data-store/use-restructured-plan-features-for-comparison-grid"));
+exports.useRestructuredPlanFeaturesForComparisonGrid = use_restructured_plan_features_for_comparison_grid_1.default;
+const use_manage_tooltip_toggle_1 = require("./hooks/use-manage-tooltip-toggle");
+Object.defineProperty(exports, "useManageTooltipToggle", { enumerable: true, get: function () { return use_manage_tooltip_toggle_1.useManageTooltipToggle; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;AAAA,2FAA0D;AAwBjD,yBAxBF,yBAAc,CAwBE;AAvBvB,uFAAsD;AAuB7B,uBAvBlB,uBAAY,CAuBkB;AAtBrC,mFAAkD;AAsBO,qBAtBlD,qBAAU,CAsBkD;AArBnE,iGAA+D;AAqBxB,2BArBhC,4BAAgB,CAqBgC;AApBvD,wEAAmE;AAoBE,iGApB5D,qCAAgB,OAoB4D;AAnBrF,2CAAmD;AAwC1C,qGAxCA,gCAAoB,OAwCA;AAvC7B,yHAAqF;AA4BpF,kCA5BM,qCAAuB,CA4BN;AA3BxB,4FAAyF;AAwBxF,uBAxBM,wBAAY,CAwBN;AAOZ,uGA/BsB,uCAAsB,OA+BtB;AA9BvB,uIAAkG;AAyBjG,wCAzBM,4CAA6B,CAyBN;AAxB9B,mIAA8F;AAuB7F,sCAvBM,0CAA2B,CAuBN;AAtB5B,2HAAwF;AAyBvF,oCAzBM,sCAAyB,CAyBN;AAxB1B,mIAA8F;AAyB7F,sCAzBM,0CAA2B,CAyBN;AAxB5B,2GAAwE;AAyBvE,4BAzBM,8BAAiB,CAyBN;AAxBlB,uKAAiI;AA0BhI,uDA1BM,4DAA4C,CA0BN;AAzB7C,iFAA2E;AAgB1E,uGAhBQ,kDAAsB,OAgBR"}

package/dist/cjs/lib/filter-unused-features-object.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Removes features that are not available in any of the visible grid plans.
+ */
+const filterUnusedFeaturesObject = (visibleGridPlans, features) => {
+    if (!visibleGridPlans || !features) {
+        return [];
+    }
+    // Get all unique feature slugs in all gridPlans.
+    const uniqueFeaturesAvailable = new Set(visibleGridPlans
+        .map((gridPlan) => [...gridPlan.features.wpcomFeatures, ...gridPlan.features.jetpackFeatures].map((feature) => feature.getSlug()))
+        .flat());
+    return features.filter((feature) => {
+        return uniqueFeaturesAvailable.has(feature.getSlug());
+    });
+};
+exports.default = filterUnusedFeaturesObject;
+//# sourceMappingURL=filter-unused-features-object.js.map

package/dist/cjs/lib/filter-unused-features-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-unused-features-object.js","sourceRoot":"","sources":["../../../src/lib/filter-unused-features-object.ts"],"names":[],"mappings":";;AAGA;;GAEG;AACH,MAAM,0BAA0B,GAAG,CAClC,gBAA4B,EAC5B,QAAyB,EACP,EAAE;IACpB,IAAK,CAAE,gBAAgB,IAAI,CAAE,QAAQ,EAAG,CAAC;QACxC,OAAO,EAAE,CAAC;IACX,CAAC;IAED,iDAAiD;IACjD,MAAM,uBAAuB,GAAG,IAAI,GAAG,CACtC,gBAAgB;SACd,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE,CACpB,CAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAE,CAAC,GAAG,CAC/E,CAAE,OAAO,EAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAChC,CACD;SACA,IAAI,EAAE,CACR,CAAC;IAEF,OAAO,QAAQ,CAAC,MAAM,CAAE,CAAE,OAAO,EAAG,EAAE;QACrC,OAAO,uBAAuB,CAAC,GAAG,CAAE,OAAO,CAAC,OAAO,EAAE,CAAE,CAAC;IACzD,CAAC,CAAE,CAAC;AACL,CAAC,CAAC;AAEF,kBAAe,0BAA0B,CAAC"}

package/dist/cjs/lib/get-plan-features-object.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// TODO: Temporary until feature definitions are ported to calypso-products package
+const getPlanFeaturesObject = (featuresList, planFeatures) => {
+    if (!planFeatures) {
+        return [];
+    }
+    return planFeatures.map((featuresConst) => featuresList[featuresConst]);
+};
+exports.default = getPlanFeaturesObject;
+//# sourceMappingURL=get-plan-features-object.js.map

package/dist/cjs/lib/get-plan-features-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-plan-features-object.js","sourceRoot":"","sources":["../../../src/lib/get-plan-features-object.ts"],"names":[],"mappings":";;AAEA,mFAAmF;AACnF,MAAM,qBAAqB,GAAG,CAAE,YAAyB,EAAE,YAA8B,EAAG,EAAE;IAC7F,IAAK,CAAE,YAAY,EAAG,CAAC;QACtB,OAAO,EAAE,CAAC;IACX,CAAC;IAED,OAAO,YAAY,CAAC,GAAG,CAAE,CAAE,aAAa,EAAG,EAAE,CAAC,YAAY,CAAE,aAAa,CAAE,CAAE,CAAC;AAC/E,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}

package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPlanPricingInfoFromGridPlans = void 0;
+function getPlanPricingInfoFromGridPlans({ gridPlans, returnMonthly = true, }) {
+    return gridPlans.reduce((acc, gridPlan) => {
+        const { pricing: { originalPrice, discountedPrice, currencyCode }, } = gridPlan;
+        const originalPriceForTerm = originalPrice[returnMonthly ? 'monthly' : 'full'] || 0;
+        const discountedPriceForTerm = discountedPrice[returnMonthly ? 'monthly' : 'full'] || 0;
+        return {
+            prices: [...acc.prices, originalPriceForTerm, discountedPriceForTerm],
+            ...(currencyCode && { currencyCode }),
+        };
+    }, { prices: [], currencyCode: 'USD' });
+}
+exports.getPlanPricingInfoFromGridPlans = getPlanPricingInfoFromGridPlans;
+//# sourceMappingURL=get-plan-pricing-info-from-grid-plans.js.map

package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-plan-pricing-info-from-grid-plans.js","sourceRoot":"","sources":["../../../src/lib/get-plan-pricing-info-from-grid-plans.ts"],"names":[],"mappings":";;;AAOA,SAAgB,+BAA+B,CAAE,EAChD,SAAS,EACT,aAAa,GAAG,IAAI,GAIpB;IACA,OAAO,SAAS,CAAC,MAAM,CACtB,CAAE,GAAgB,EAAE,QAAQ,EAAG,EAAE;QAChC,MAAM,EACL,OAAO,EAAE,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,GACzD,GAAG,QAAQ,CAAC;QAEb,MAAM,oBAAoB,GAAG,aAAa,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAE,IAAI,CAAC,CAAC;QACtF,MAAM,sBAAsB,GAAG,eAAe,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAE,IAAI,CAAC,CAAC;QAE1F,OAAO;YACN,MAAM,EAAE,CAAE,GAAG,GAAG,CAAC,MAAM,EAAE,oBAAoB,EAAE,sBAAsB,CAAE;YACvE,GAAG,CAAE,YAAY,IAAI,EAAE,YAAY,EAAE,CAAE;SACvC,CAAC;IACH,CAAC,EACD,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CACnC,CAAC;AACH,CAAC;AAvBD,0EAuBC"}

package/dist/cjs/lib/is-same-plan.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSamePlan = void 0;
+const calypso_products_1 = require("@automattic/calypso-products");
+function isSamePlan(currentSitePlanSlug, planSlug) {
+    // Handles matching variants of the free plan, like PLAN_P2_FREE and PLAN_JETPACK_FREE
+    return currentSitePlanSlug === calypso_products_1.PLAN_FREE
+        ? (0, calypso_products_1.isFreePlan)(planSlug)
+        : currentSitePlanSlug === planSlug;
+}
+exports.isSamePlan = isSamePlan;
+//# sourceMappingURL=is-same-plan.js.map

package/dist/cjs/lib/is-same-plan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-same-plan.js","sourceRoot":"","sources":["../../../src/lib/is-same-plan.ts"],"names":[],"mappings":";;;AAAA,mEAAoF;AAEpF,SAAgB,UAAU,CAAE,mBAA2B,EAAE,QAAkB;IAC1E,sFAAsF;IACtF,OAAO,mBAAmB,KAAK,4BAAS;QACvC,CAAC,CAAC,IAAA,6BAAU,EAAE,QAAQ,CAAE;QACxB,CAAC,CAAC,mBAAmB,KAAK,QAAQ,CAAC;AACrC,CAAC;AALD,gCAKC"}

package/dist/cjs/lib/sort-plan-properties.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortPlans = void 0;
+const calypso_products_1 = require("@automattic/calypso-products");
+const is_popular_plan_1 = require("../hooks/data-store/is-popular-plan");
+function sortPlans(gridPlans, currentSitePlanProductSlug, isMobile) {
+    let firstPlanIndex = -1;
+    // Try to find the current paid plan in the plans list
+    if (currentSitePlanProductSlug && !(0, calypso_products_1.isFreePlan)(currentSitePlanProductSlug)) {
+        firstPlanIndex = gridPlans.findIndex((gridPlan) => {
+            return gridPlan.planSlug === currentSitePlanProductSlug;
+        });
+    }
+    if (firstPlanIndex < 0) {
+        // Site is on a free plan or the current plan is not in the list. Try to find the popular plan.
+        firstPlanIndex = gridPlans.findIndex(({ planSlug }) => {
+            return (0, is_popular_plan_1.isPopularPlan)(planSlug);
+        });
+        // If the popular plan exists, on mobile, it will be second plan for comparison.
+        if (firstPlanIndex > 0 && isMobile) {
+            firstPlanIndex = firstPlanIndex - 1;
+        }
+    }
+    if (firstPlanIndex < 0) {
+        return gridPlans;
+    }
+    return [
+        // The first plan
+        gridPlans[firstPlanIndex],
+        // Rest of the plans in default order
+        ...gridPlans.slice(firstPlanIndex + 1),
+        // Leftover plans (before the first plan) in descending order of value
+        ...gridPlans.slice(0, firstPlanIndex).sort((planA, planB) => {
+            return ((planB?.pricing.originalPrice.full || 0) - (planA?.pricing.originalPrice.full || 0));
+        }),
+    ].filter((gridPlan) => Boolean(gridPlan));
+}
+exports.sortPlans = sortPlans;
+//# sourceMappingURL=sort-plan-properties.js.map

package/dist/cjs/lib/sort-plan-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-plan-properties.js","sourceRoot":"","sources":["../../../src/lib/sort-plan-properties.ts"],"names":[],"mappings":";;;AAAA,mEAA0D;AAC1D,yEAAoE;AAGpE,SAAgB,SAAS,CACxB,SAAqB,EACrB,0BAA0C,EAC1C,QAAkB;IAElB,IAAI,cAAc,GAAG,CAAC,CAAC,CAAC;IAExB,sDAAsD;IACtD,IAAK,0BAA0B,IAAI,CAAE,IAAA,6BAAU,EAAE,0BAA0B,CAAE,EAAG,CAAC;QAChF,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,QAAQ,EAAG,EAAE;YACpD,OAAO,QAAQ,CAAC,QAAQ,KAAK,0BAA0B,CAAC;QACzD,CAAC,CAAE,CAAC;IACL,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,+FAA+F;QAC/F,cAAc,GAAG,SAAS,CAAC,SAAS,CAAE,CAAE,EAAE,QAAQ,EAAE,EAAG,EAAE;YACxD,OAAO,IAAA,+BAAa,EAAE,QAAQ,CAAE,CAAC;QAClC,CAAC,CAAE,CAAC;QACJ,gFAAgF;QAChF,IAAK,cAAc,GAAG,CAAC,IAAI,QAAQ,EAAG,CAAC;YACtC,cAAc,GAAG,cAAc,GAAG,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED,IAAK,cAAc,GAAG,CAAC,EAAG,CAAC;QAC1B,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,OAAO;QACN,iBAAiB;QACjB,SAAS,CAAE,cAAc,CAAE;QAC3B,qCAAqC;QACrC,GAAG,SAAS,CAAC,KAAK,CAAE,cAAc,GAAG,CAAC,CAAE;QACxC,sEAAsE;QACtE,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,EAAE,cAAc,CAAE,CAAC,IAAI,CAAE,CAAE,KAAK,EAAE,KAAK,EAAG,EAAE;YAChE,OAAO,CACN,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,GAAG,CAAE,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,CACvF,CAAC;QACH,CAAC,CAAE;KACH,CAAC,MAAM,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAE,CAAC;AACjD,CAAC;AAzCD,8BAyCC"}

package/dist/cjs/lib/touch-detect/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasTouch = void 0;
+// eslint-disable-next-line inclusive-language/use-inclusive-words
+/**
+ * This test is for touch events.
+ * It may not accurately detect a touch screen, but may be close enough depending on the use case.
+ * @copyright Modernizr © 2009-2015.
+ * @license MIT
+ * @see https://github.com/Modernizr/Modernizr/blob/master/LICENSE.md
+ * @see https://github.com/Modernizr/Modernizr/blob/HEAD/feature-detects/touchevents.js
+ * @returns {boolean} whether touch screen is available
+ */
+function hasTouch() {
+    /* global DocumentTouch:true */
+    return (window &&
+        ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)));
+}
+exports.hasTouch = hasTouch;
+//# sourceMappingURL=index.js.map

package/dist/cjs/lib/touch-detect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/touch-detect/index.js"],"names":[],"mappings":";;;AAAA,kEAAkE;AAClE;;;;;;;;GAQG;AACH,SAAgB,QAAQ;IACvB,+BAA+B;IAC/B,OAAO,CACN,MAAM;QACN,CAAE,cAAc,IAAI,MAAM,IAAI,CAAE,MAAM,CAAC,aAAa,IAAI,QAAQ,YAAY,aAAa,CAAE,CAAE,CAC7F,CAAC;AACH,CAAC;AAND,4BAMC"}

package/dist/cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/dist/esm/__mocks__/wpcom-proxy-request.js

@@ -0,0 +1,11 @@
+export default async ({ path }) => {
+    const response = await fetch(path);
+    const data = await response.json();
+    return data.body;
+};
+export function canAccessWpcomApis() {
+    return true;
+}
+export function reloadProxy() { }
+export function requestAllBlogsAccess() { }
+//# sourceMappingURL=wpcom-proxy-request.js.map

package/dist/esm/__mocks__/wpcom-proxy-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wpcom-proxy-request.js","sourceRoot":"","sources":["../../../src/__mocks__/wpcom-proxy-request.js"],"names":[],"mappings":"AAAA,eAAe,KAAK,EAAG,EAAE,IAAI,EAAE,EAAG,EAAE;IACnC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAE,IAAI,CAAE,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IACnC,OAAO,IAAI,CAAC,IAAI,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB;IACjC,OAAO,IAAI,CAAC;AACb,CAAC;AAED,MAAM,UAAU,WAAW,KAAI,CAAC;AAEhC,MAAM,UAAU,qBAAqB,KAAI,CAAC"}

package/dist/esm/_media-queries.scss

@@ -0,0 +1,14 @@
+$plans-2023-small-breakpoint: 780px;
+
+/**
+ * @see @automattic/plans-grid-next/src/components/plan-type-selector/style.scss
+ * This introduces mobile only sticky behavior for the plan type selector.
+ *
+ * @deprecated
+ * TODO clk This should migrate to use grid-size on the parent container. As done for features/comparison grid.
+ */
+@mixin plan-type-selector-custom-mobile-breakpoint() {
+	@media (max-width: $plans-2023-small-breakpoint) {
+		@content;
+	}
+}

package/dist/esm/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin plans-grid-large() {
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge &, {
+		@content;
+	}
+}
+
+@mixin plans-grid-medium-large() {
+	.plans-grid-next.is-smedium &,
+	.plans-grid-next.is-medium &,
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge & {
+		@content;
+	}
+}

package/dist/esm/_shared.scss

@@ -0,0 +1,174 @@
+@import "@automattic/onboarding/styles/mixins";
+@import "./mixins";
+@import "./media-queries";
+
+$table-cell-max-width: 344px;
+$mobile-card-max-width: 440px;
+
+/*********************************
+ * Storage Add-On Dropdown parts *
+ *********************************/
+
+.plans-grid-next-storage-feature-label__container {
+	display: flex;
+	gap: 5px;
+	flex-direction: column;
+	align-items: baseline;
+
+	&.is-row {
+		flex-direction: row;
+	}
+
+	/**
+	 * Comparison grid override
+	 * Always render as column/wrapped
+	 */
+	.plans-grid-next-comparison-grid & {
+		flex-direction: column;
+		align-items: center;
+	}
+}
+
+.plans-grid-next-storage-feature-label__offset-price {
+	color: var(--studio-green-50);
+	font-size: $font-body-extra-small;
+	font-weight: 500;
+}
+
+.plans-grid-next-storage-dropdown__addon-offset-price-container {
+	width: 100%;
+	margin-top: 8px;
+	text-align: left;
+
+	.plans-grid-next-storage-dropdown__addon-offset-price {
+		font-size: $font-body-extra-small;
+		font-weight: 500;
+	}
+}
+
+.plans-grid-next-storage-dropdown__option {
+	display: inline-block;
+	line-height: 20px;
+	min-height: 30px;
+	padding-top: 5px;
+	font-size: 0.75rem;
+	text-align: start;
+}
+
+.plans-grid-next-storage-dropdown__option-title, .plans-grid-next-storage-dropdown__option .title {
+	color: var(--color-text);
+	font-weight: 600;
+
+	.plans-grid-next-features-grid__mobile-plan-card & {
+		font-size: 0.875rem;
+	}
+}
+
+.plans-grid-next-storage-dropdown__option-price,
+.plans-grid-next-storage-dropdown__option-per-month {
+	display: inline-block;
+
+	font-size: 0.75rem;
+	font-weight: 500;
+}
+
+.plans-grid-next-storage-dropdown__option-price {
+	margin-left: 4px;
+}
+
+.plans-grid-next-storage-feature-label__volume {
+	color: var(--studio-gray-90);
+	padding: 4px 0;
+	font-weight: 400;
+	line-height: 20px;
+	font-size: $font-body-extra-small;
+
+	&.is-badge {
+		background: #f2f2f2;
+		/* stylelint-disable-next-line */
+		border-radius: 5px;
+		text-align: center;
+		width: fit-content;
+		min-width: 64px;
+
+		.plans-grid-next-comparison-grid & {
+			margin-top: 10px;
+			margin-left: auto;
+			margin-right: auto;
+
+			@include plans-grid-medium-large {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+.plans-grid-next-plan-storage {
+	width: 100%;
+
+	.plan-features-2023-grid__plan-spotlight & {
+		padding-top: 0;
+		padding-bottom: 32px;
+		max-width: $table-cell-max-width;
+	}
+
+	.plans-grid-next-comparison-grid & {
+		width: 100%;
+	}
+
+	/***********************************
+	 * Custom Select Control overrides *
+	 ***********************************/
+
+	.components-custom-select-control {
+		line-height: 0px;
+		font-size: 0.75rem;
+
+		/**************
+	     * 1. General *
+		 **************/
+
+		.components-custom-select-control__label {
+			color: var(--studio-gray-100);
+		}
+
+		.components-custom-select-control__menu {
+			margin-left: 0;
+			box-sizing: border-box;
+		}
+
+		.components-custom-select-control__item {
+			&.is-highlighted {
+				background-color: var(--studio-gray-0);
+			}
+		}
+
+		/*****************************
+		 * 2. Features Grid - mobile *
+		 *****************************/
+
+		.plans-grid-next-features-grid__mobile-plan-card & {
+			.components-custom-select-control__button {
+				height: 40px;
+			}
+		}
+
+		/**********************
+		 * 3. Comparison Grid *
+		 **********************/
+
+		.plans-grid-next-comparison-grid & {
+			width: 100%;
+			label {
+				display: none;
+			}
+
+			.components-custom-select-control__menu {
+				margin-left: 0;
+				li {
+					text-align: left;
+				}
+			}
+		}
+	}
+}