From 0364a4b89e91eca5d54bf0dba13fce20feb5bfcb Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sat, 3 May 2025 22:26:29 -0500
Subject: [PATCH 01/28] pricing card layout tweaks

---
 .../PricingTable/PricingTableDefault.tsx      | 108 ++++++++++--------
 1 file changed, 60 insertions(+), 48 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 7cf0dec27b5..84abe07e4c5 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -63,6 +63,7 @@ export function PricingTableDefault({
           '--column-width': 'max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))',
           display: 'grid',
           gridTemplateColumns: 'repeat(auto-fit, minmax(var(--column-width), 1fr))',
+          gridTemplateRows: 'auto 1fr',
           gap: `var(--grid-gap-y, var(--grid-gap, ${t.space.$4})) var(--grid-gap, ${t.space.$4})`,
           alignItems: 'stretch',
           width: '100%',
@@ -130,8 +131,10 @@ function Card(props: CardProps) {
       elementDescriptor={descriptors.pricingTableCard}
       elementId={descriptors.pricingTableCard.setId(slug)}
       sx={t => ({
-        display: 'flex',
-        flexDirection: 'column',
+        display: 'grid',
+        gap: 0,
+        gridTemplateRows: 'subgrid',
+        gridRow: 'span 2',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,
@@ -152,52 +155,60 @@ function Card(props: CardProps) {
         planPeriod={planPeriod}
         setPlanPeriod={setPlanPeriod}
       />
-      <ReversibleContainer reverse={ctaPosition === 'top'}>
-        {!collapseFeatures ? (
-          <Box
-            elementDescriptor={descriptors.pricingTableCardFeatures}
-            sx={t => ({
-              display: 'flex',
-              flexDirection: 'column',
-              flex: '1',
-              padding: hasFeatures ? (isCompact ? t.space.$3 : t.space.$4) : 0,
-              backgroundColor: hasFeatures ? t.colors.$colorBackground : undefined,
-              borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
-              borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
-            })}
-            data-variant={isCompact ? 'compact' : 'default'}
-          >
-            <CardFeaturesList
-              plan={plan}
-              isCompact={isCompact}
-              showPlanDetails={showPlanDetails}
-            />
-          </Box>
-        ) : null}
-        {(!plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming) && (
-          <Box
-            elementDescriptor={descriptors.pricingTableCardAction}
-            sx={t => ({
-              marginTop: 'auto',
-              padding: isCompact ? t.space.$3 : t.space.$4,
-              borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
-              borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
-              background: undefined,
-            })}
-          >
-            <Button
-              block
-              textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
-              {...buttonPropsForPlan({ plan, isCompact })}
-              onClick={event => {
-                onSelect(plan, event);
-              }}
-            />
-          </Box>
-        )}
-      </ReversibleContainer>
+      <Box
+        sx={{
+          gridRow: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <ReversibleContainer reverse={ctaPosition === 'top'}>
+          {!collapseFeatures ? (
+            <Box
+              elementDescriptor={descriptors.pricingTableCardFeatures}
+              sx={t => ({
+                display: 'flex',
+                flexDirection: 'column',
+                flex: '1',
+                padding: hasFeatures ? (isCompact ? t.space.$3 : t.space.$4) : 0,
+                backgroundColor: hasFeatures ? t.colors.$colorBackground : undefined,
+                borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
+                borderTopStyle: t.borderStyles.$solid,
+                borderTopColor: t.colors.$neutralAlpha100,
+              })}
+              data-variant={isCompact ? 'compact' : 'default'}
+            >
+              <CardFeaturesList
+                plan={plan}
+                isCompact={isCompact}
+                showPlanDetails={showPlanDetails}
+              />
+            </Box>
+          ) : null}
+          {(!plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming) && (
+            <Box
+              elementDescriptor={descriptors.pricingTableCardAction}
+              sx={t => ({
+                marginTop: 'auto',
+                padding: isCompact ? t.space.$3 : t.space.$4,
+                borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
+                borderTopStyle: t.borderStyles.$solid,
+                borderTopColor: t.colors.$neutralAlpha100,
+                background: undefined,
+              })}
+            >
+              <Button
+                block
+                textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
+                {...buttonPropsForPlan({ plan, isCompact })}
+                onClick={event => {
+                  onSelect(plan, event);
+                }}
+              />
+            </Box>
+          )}
+        </ReversibleContainer>
+      </Box>
     </Box>
   );
 }
@@ -244,6 +255,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
       sx={t => ({
         width: '100%',
         padding: isCompact ? t.space.$3 : t.space.$4,
+        gridRow: 1,
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >

From 515ea886fa297ce368ae9d44d40e296c0e41ef3d Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 12:08:45 -0500
Subject: [PATCH 02/28] subgrid layout work

---
 .../PricingTable/PricingTableDefault.tsx      | 68 ++++++-------------
 .../src/ui/contexts/components/Plans.tsx      |  2 +-
 packages/localizations/src/en-US.ts           |  6 +-
 packages/types/src/localization.ts            |  1 +
 4 files changed, 24 insertions(+), 53 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 84abe07e4c5..eb431426029 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -8,7 +8,6 @@ import * as React from 'react';
 
 import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
 import {
-  Badge,
   Box,
   Button,
   Col,
@@ -108,9 +107,7 @@ function Card(props: CardProps) {
 
   const ctaPosition = pricingTableProps.ctaPosition || 'bottom';
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
-  const { id, slug, features } = plan;
-  const totalFeatures = features.length;
-  const hasFeatures = totalFeatures > 0;
+  const { id, slug } = plan;
 
   const { buttonPropsForPlan, isDefaultPlanImplicitlyActiveOrUpcoming } = usePlansContext();
 
@@ -134,7 +131,7 @@ function Card(props: CardProps) {
         display: 'grid',
         gap: 0,
         gridTemplateRows: 'subgrid',
-        gridRow: 'span 2',
+        gridRow: 'span 6',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,
@@ -157,9 +154,10 @@ function Card(props: CardProps) {
       />
       <Box
         sx={{
-          gridRow: 2,
-          display: 'flex',
-          flexDirection: 'column',
+          display: 'grid',
+          gap: 0,
+          gridRow: 'span 2',
+          gridTemplateRows: 'subgrid',
         }}
       >
         <ReversibleContainer reverse={ctaPosition === 'top'}>
@@ -170,11 +168,12 @@ function Card(props: CardProps) {
                 display: 'flex',
                 flexDirection: 'column',
                 flex: '1',
-                padding: hasFeatures ? (isCompact ? t.space.$3 : t.space.$4) : 0,
-                backgroundColor: hasFeatures ? t.colors.$colorBackground : undefined,
-                borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
+                padding: isCompact ? t.space.$3 : t.space.$4,
+                backgroundColor: t.colors.$colorBackground,
+                borderTopWidth: t.borderWidths.$normal,
                 borderTopStyle: t.borderStyles.$solid,
                 borderTopColor: t.colors.$neutralAlpha100,
+                gridRow: !plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming ? 'auto' : 'span 2',
               })}
               data-variant={isCompact ? 'compact' : 'default'}
             >
@@ -191,7 +190,7 @@ function Card(props: CardProps) {
               sx={t => ({
                 marginTop: 'auto',
                 padding: isCompact ? t.space.$3 : t.space.$4,
-                borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
+                borderTopWidth: t.borderWidths.$normal,
                 borderTopStyle: t.borderStyles.$solid,
                 borderTopColor: t.colors.$neutralAlpha100,
                 background: undefined,
@@ -242,12 +241,6 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
     return planPeriod === 'annual' ? plan.annualMonthlyAmountFormatted : plan.amountFormatted;
   }, [annualMonthlyAmount, planPeriod, plan.amountFormatted, plan.annualMonthlyAmountFormatted]);
 
-  const { activeOrUpcomingSubscription, isDefaultPlanImplicitlyActiveOrUpcoming, subscriptions } = usePlansContext();
-  const subscription = activeOrUpcomingSubscription(plan);
-  const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault;
-
-  const showBadge = !!subscription || isImplicitlyActiveOrUpcoming;
-
   return (
     <Box
       ref={ref}
@@ -255,7 +248,9 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
       sx={t => ({
         width: '100%',
         padding: isCompact ? t.space.$3 : t.space.$4,
-        gridRow: 1,
+        display: 'grid',
+        gridRow: 'span 4',
+        gridTemplateRows: 'subgrid',
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >
@@ -272,39 +267,11 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           marginBlockEnd: t.space.$3,
         })}
       >
-        {showBadge ? (
-          <Span
-            elementDescriptor={descriptors.pricingTableCardBadgeContainer}
-            sx={{
-              flex: '0 0 auto',
-            }}
-          >
-            {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (
-              <Badge
-                elementDescriptor={descriptors.pricingTableCardBadge}
-                localizationKey={localizationKeys('badge__currentPlan')}
-                colorScheme={'secondary'}
-              />
-            ) : (
-              <Badge
-                elementDescriptor={descriptors.pricingTableCardBadge}
-                localizationKey={
-                  subscription
-                    ? localizationKeys('badge__startsAt', {
-                        date: subscription.periodStart,
-                      })
-                    : localizationKeys('badge__upcomingPlan')
-                }
-                colorScheme={'primary'}
-              />
-            )}
-          </Span>
-        ) : null}
         <Heading
           elementDescriptor={descriptors.pricingTableCardTitle}
           as='h2'
           textVariant={isCompact ? 'h3' : 'h2'}
-          sx={{ flex: '1 1 auto' }}
+          sx={{ flex: '1 1 auto', gridRow: 1 }}
         >
           {name}
         </Heading>
@@ -314,6 +281,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           elementDescriptor={descriptors.pricingTableCardDescription}
           variant='subtitle'
           colorScheme='secondary'
+          sx={{ gridRow: 2 }}
         >
           {plan.description}
         </Text>
@@ -326,6 +294,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         sx={t => ({
           marginTop: isCompact ? t.space.$2 : t.space.$3,
           columnGap: t.space.$1x5,
+          gridRow: 3,
         })}
       >
         <Text
@@ -399,6 +368,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           sx={t => ({
             display: 'flex',
             marginTop: t.space.$3,
+            gridRow: 4,
           })}
         >
           <SegmentedControl.Root
@@ -448,7 +418,7 @@ const CardFeaturesList = React.forwardRef<HTMLDivElement, CardFeaturesListProps>
       elementDescriptor={descriptors.pricingTableCardFeatures}
       sx={t => ({
         display: 'grid',
-        flex: '1',
+        flex: 1,
         rowGap: isCompact ? t.space.$2 : t.space.$3,
       })}
     >
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index d61d22eccf1..12f5ab7752f 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -152,7 +152,7 @@ export const usePlansContext = () => {
           : // If there are no active or grace period subscriptions, show the get started button
             ctx.subscriptions.length > 0
             ? localizationKeys('__experimental_commerce.switchPlan')
-            : localizationKeys('__experimental_commerce.getStarted'),
+            : localizationKeys('__experimental_commerce.subscribe'),
         variant: isCompact || !!subscription ? 'bordered' : 'solid',
         colorScheme: isCompact || !!subscription ? 'secondary' : 'primary',
       };
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index be67bbac93e..ac89f07b252 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -29,7 +29,7 @@ export const enUS: LocalizationResource = {
     manage: 'Manage',
     manageSubscription: 'Manage subscription',
     month: 'Month',
-    reSubscribe: 'Re-subscribe',
+    reSubscribe: 'Resubscribe',
     seeAllFeatures: 'See all features',
     switchPlan: 'Switch to this plan',
     switchToAnnual: 'Switch to annual',
@@ -37,7 +37,7 @@ export const enUS: LocalizationResource = {
   },
   backButton: 'Back',
   badge__canceledEndsAt: "Canceled • Ends {{ date | shortDate('en-US') }}",
-  badge__currentPlan: 'Current Plan',
+  badge__currentPlan: 'Current plan',
   badge__default: 'Default',
   badge__endsAt: "Ends {{ date | shortDate('en-US') }}",
   badge__expired: 'Expired',
@@ -714,7 +714,7 @@ export const enUS: LocalizationResource = {
       subscriptionsSection: {
         actionLabel__default: 'Manage',
       },
-      title: 'Billing & Payments',
+      title: 'Billing',
     },
     backupCodePage: {
       actionLabel__copied: 'Copied!',
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index b398e7c30cd..00e3b818838 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -113,6 +113,7 @@ type _LocalizationResource = {
     cancelSubscription: LocalizationValue;
     keepSubscription: LocalizationValue;
     reSubscribe: LocalizationValue;
+    subscribe: LocalizationValue;
     switchPlan: LocalizationValue;
     switchToAnnual: LocalizationValue;
     billedAnnually: LocalizationValue;

From f2435572c471b0b5610622746843643dc3392a22 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 15:12:36 -0500
Subject: [PATCH 03/28] wip

---
 .../PricingTable/PricingTableDefault.tsx      | 34 ++++++-------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index eb431426029..85ad05078b1 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -249,39 +249,27 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         width: '100%',
         padding: isCompact ? t.space.$3 : t.space.$4,
         display: 'grid',
+        gap: 0,
         gridRow: 'span 4',
         gridTemplateRows: 'subgrid',
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >
-      <Box
-        elementDescriptor={descriptors.pricingTableCardBadgeTitleContainer}
-        sx={t => ({
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row-reverse',
-          alignItems: 'baseline',
-          justifyContent: 'flex-end',
-          flexWrap: 'wrap',
-          gap: t.space.$3,
-          marginBlockEnd: t.space.$3,
-        })}
+      <Heading
+        elementDescriptor={descriptors.pricingTableCardTitle}
+        as='h2'
+        textVariant={isCompact ? 'h3' : 'h2'}
+        sx={{
+          gridRow: !isCompact && plan.description ? 'auto' : 'span 2',
+        }}
       >
-        <Heading
-          elementDescriptor={descriptors.pricingTableCardTitle}
-          as='h2'
-          textVariant={isCompact ? 'h3' : 'h2'}
-          sx={{ flex: '1 1 auto', gridRow: 1 }}
-        >
-          {name}
-        </Heading>
-      </Box>
+        {name}
+      </Heading>
       {!isCompact && plan.description ? (
         <Text
           elementDescriptor={descriptors.pricingTableCardDescription}
           variant='subtitle'
           colorScheme='secondary'
-          sx={{ gridRow: 2 }}
         >
           {plan.description}
         </Text>
@@ -294,7 +282,6 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         sx={t => ({
           marginTop: isCompact ? t.space.$2 : t.space.$3,
           columnGap: t.space.$1x5,
-          gridRow: 3,
         })}
       >
         <Text
@@ -368,7 +355,6 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           sx={t => ({
             display: 'flex',
             marginTop: t.space.$3,
-            gridRow: 4,
           })}
         >
           <SegmentedControl.Root

From e33d70139f407c1c7fb7cb2709d0f1dfe57f7cd1 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:14:01 -0500
Subject: [PATCH 04/28] new pricing card layout

---
 .../PricingTable/PricingTableDefault.tsx      | 312 +++++++++---------
 .../ui/customizables/elementDescriptors.ts    |   3 +
 packages/clerk-js/src/ui/elements/Switch.tsx  | 118 +++++++
 packages/clerk-js/src/ui/elements/index.ts    |   1 +
 .../clerk-js/src/ui/foundations/shadows.ts    |   2 +
 packages/localizations/src/en-US.ts           |   1 +
 packages/types/src/appearance.ts              |   3 +
 packages/types/src/localization.ts            |   1 +
 8 files changed, 276 insertions(+), 165 deletions(-)
 create mode 100644 packages/clerk-js/src/ui/elements/Switch.tsx

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 85ad05078b1..ad78db8bc43 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -19,12 +19,9 @@ import {
   SimpleButton,
   Span,
   Text,
-  useAppearance,
 } from '../../customizables';
-import { ReversibleContainer, SegmentedControl } from '../../elements';
-import { usePrefersReducedMotion } from '../../hooks';
-import { Check, InformationCircle, Plus } from '../../icons';
-import type { ThemableCssProp } from '../../styledSystem';
+import { Switch } from '../../elements';
+import { Check, Plus } from '../../icons';
 import { common, InternalThemeProvider } from '../../styledSystem';
 import { colors, getClosestProfileScrollBox } from '../../utils';
 interface PricingTableDefaultProps {
@@ -102,14 +99,20 @@ interface CardProps {
 function Card(props: CardProps) {
   const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
   const clerk = useClerk();
-  const { mode = 'mounted' } = usePricingTableContext();
+  const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
 
-  const ctaPosition = pricingTableProps.ctaPosition || 'bottom';
+  const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
   const { id, slug } = plan;
 
-  const { buttonPropsForPlan, isDefaultPlanImplicitlyActiveOrUpcoming } = usePlansContext();
+  const { buttonPropsForPlan, isDefaultPlanImplicitlyActiveOrUpcoming, activeOrUpcomingSubscription, subscriptions } =
+    usePlansContext();
+
+  const subscription = activeOrUpcomingSubscription(plan);
+  const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault;
+
+  const showStatusRow = !!subscription || isImplicitlyActiveOrUpcoming;
 
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -131,7 +134,7 @@ function Card(props: CardProps) {
         display: 'grid',
         gap: 0,
         gridTemplateRows: 'subgrid',
-        gridRow: 'span 6',
+        gridRow: 'span 4',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,
@@ -154,59 +157,92 @@ function Card(props: CardProps) {
       />
       <Box
         sx={{
-          display: 'grid',
+          display: 'flex',
+          flexDirection: 'column',
           gap: 0,
-          gridRow: 'span 2',
-          gridTemplateRows: 'subgrid',
         }}
       >
-        <ReversibleContainer reverse={ctaPosition === 'top'}>
-          {!collapseFeatures ? (
-            <Box
-              elementDescriptor={descriptors.pricingTableCardFeatures}
-              sx={t => ({
-                display: 'flex',
-                flexDirection: 'column',
-                flex: '1',
-                padding: isCompact ? t.space.$3 : t.space.$4,
-                backgroundColor: t.colors.$colorBackground,
-                borderTopWidth: t.borderWidths.$normal,
-                borderTopStyle: t.borderStyles.$solid,
-                borderTopColor: t.colors.$neutralAlpha100,
-                gridRow: !plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming ? 'auto' : 'span 2',
-              })}
-              data-variant={isCompact ? 'compact' : 'default'}
-            >
-              <CardFeaturesList
-                plan={plan}
-                isCompact={isCompact}
-                showPlanDetails={showPlanDetails}
+        {!collapseFeatures ? (
+          <Box
+            elementDescriptor={descriptors.pricingTableCardFeatures}
+            sx={t => ({
+              display: 'flex',
+              flexDirection: 'column',
+              flex: '1',
+              padding: isCompact ? t.space.$3 : t.space.$4,
+              backgroundColor: t.colors.$colorBackground,
+              borderTopWidth: t.borderWidths.$normal,
+              borderTopStyle: t.borderStyles.$solid,
+              borderTopColor: t.colors.$neutralAlpha100,
+            })}
+            data-variant={isCompact ? 'compact' : 'default'}
+          >
+            <CardFeaturesList
+              plan={plan}
+              isCompact={isCompact}
+              showPlanDetails={showPlanDetails}
+            />
+          </Box>
+        ) : null}
+
+        {showStatusRow && (
+          <Box
+            sx={t => ({
+              padding: t.space.$1,
+              borderTopWidth: t.borderWidths.$normal,
+              borderTopStyle: t.borderStyles.$solid,
+              borderTopColor: t.colors.$neutralAlpha100,
+            })}
+          >
+            {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (
+              <Text
+                elementDescriptor={descriptors.pricingTableCardBadge}
+                variant='caption'
+                colorScheme='body'
+                localizationKey={localizationKeys('badge__currentPlan')}
+                sx={{ textAlign: 'center' }}
               />
-            </Box>
-          ) : null}
-          {(!plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming) && (
-            <Box
-              elementDescriptor={descriptors.pricingTableCardAction}
-              sx={t => ({
-                marginTop: 'auto',
-                padding: isCompact ? t.space.$3 : t.space.$4,
-                borderTopWidth: t.borderWidths.$normal,
-                borderTopStyle: t.borderStyles.$solid,
-                borderTopColor: t.colors.$neutralAlpha100,
-                background: undefined,
-              })}
-            >
-              <Button
-                block
-                textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
-                {...buttonPropsForPlan({ plan, isCompact })}
-                onClick={event => {
-                  onSelect(plan, event);
-                }}
+            ) : (
+              <Text
+                elementDescriptor={descriptors.pricingTableCardBadge}
+                variant='caption'
+                colorScheme='body'
+                localizationKey={
+                  subscription
+                    ? localizationKeys('badge__startsAt', {
+                        date: subscription.periodStart,
+                      })
+                    : localizationKeys('badge__upcomingPlan')
+                }
+                sx={{ textAlign: 'center' }}
               />
-            </Box>
-          )}
-        </ReversibleContainer>
+            )}
+          </Box>
+        )}
+
+        {(!plan.isDefault || !isDefaultPlanImplicitlyActiveOrUpcoming) && (
+          <Box
+            elementDescriptor={descriptors.pricingTableCardAction}
+            sx={t => ({
+              marginTop: 'auto',
+              padding: isCompact ? t.space.$3 : t.space.$4,
+              borderTopWidth: t.borderWidths.$normal,
+              borderTopStyle: t.borderStyles.$solid,
+              borderTopColor: t.colors.$neutralAlpha100,
+              background: undefined,
+              order: ctaPosition === 'top' ? -1 : undefined,
+            })}
+          >
+            <Button
+              block
+              textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
+              {...buttonPropsForPlan({ plan, isCompact })}
+              onClick={event => {
+                onSelect(plan, event);
+              }}
+            />
+          </Box>
+        )}
       </Box>
     </Box>
   );
@@ -224,16 +260,9 @@ interface CardHeaderProps {
 }
 
 const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref) => {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const { animations: layoutAnimations } = useAppearance().parsedLayout;
   const { plan, isCompact, planPeriod, setPlanPeriod } = props;
   const { name, annualMonthlyAmount } = plan;
-  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
-  const pricingTableCardFeePeriodNoticeAnimation: ThemableCssProp = t => ({
-    transition: isMotionSafe
-      ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`
-      : 'none',
-  });
+
   const getPlanFee = React.useMemo(() => {
     if (annualMonthlyAmount <= 0) {
       return plan.amountFormatted;
@@ -249,39 +278,39 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         width: '100%',
         padding: isCompact ? t.space.$3 : t.space.$4,
         display: 'grid',
-        gap: 0,
-        gridRow: 'span 4',
+        gap: t.space.$1,
+        gridRow: 'span 3',
         gridTemplateRows: 'subgrid',
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >
-      <Heading
-        elementDescriptor={descriptors.pricingTableCardTitle}
-        as='h2'
-        textVariant={isCompact ? 'h3' : 'h2'}
-        sx={{
-          gridRow: !isCompact && plan.description ? 'auto' : 'span 2',
-        }}
-      >
-        {name}
-      </Heading>
-      {!isCompact && plan.description ? (
-        <Text
-          elementDescriptor={descriptors.pricingTableCardDescription}
-          variant='subtitle'
-          colorScheme='secondary'
+      <Box>
+        <Heading
+          elementDescriptor={descriptors.pricingTableCardTitle}
+          as='h2'
+          textVariant={isCompact ? 'h3' : 'h2'}
         >
-          {plan.description}
-        </Text>
-      ) : null}
+          {name}
+        </Heading>
+        {!isCompact && plan.description ? (
+          <Text
+            elementDescriptor={descriptors.pricingTableCardDescription}
+            variant='subtitle'
+            colorScheme='secondary'
+          >
+            {plan.description}
+          </Text>
+        ) : null}
+      </Box>
+
       <Flex
         elementDescriptor={descriptors.pricingTableCardFeeContainer}
         data-variant={isCompact ? 'compact' : 'default'}
         align='center'
         wrap='wrap'
         sx={t => ({
-          marginTop: isCompact ? t.space.$2 : t.space.$3,
           columnGap: t.space.$1x5,
+          marginTop: t.space.$1,
         })}
       >
         <Text
@@ -292,89 +321,42 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           {plan.currencySymbol}
           {getPlanFee}
         </Text>
+        {!plan.isDefault ? (
+          <Text
+            elementDescriptor={descriptors.pricingTableCardFeePeriod}
+            variant='caption'
+            colorScheme='secondary'
+            sx={t => ({
+              textTransform: 'lowercase',
+              ':before': {
+                content: '"/"',
+                marginInlineEnd: t.space.$1,
+              },
+            })}
+            localizationKey={localizationKeys('__experimental_commerce.month')}
+          />
+        ) : null}
+      </Flex>
+
+      {annualMonthlyAmount > 0 && setPlanPeriod ? (
+        <Box elementDescriptor={descriptors.pricingTableCardPeriodToggle}>
+          <Switch
+            checked={planPeriod === 'annual'}
+            onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}
+            title={localizationKeys('__experimental_commerce.billedAnnually')}
+          />
+        </Box>
+      ) : (
         <Text
-          elementDescriptor={descriptors.pricingTableCardFeePeriod}
+          elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}
           variant='caption'
           colorScheme='secondary'
-          sx={t => ({
-            textTransform: 'lowercase',
-            ':before': {
-              content: '"/"',
-              marginInlineEnd: t.space.$1,
-            },
-          })}
-          localizationKey={localizationKeys('__experimental_commerce.month')}
+          localizationKey={plan.isDefault ? undefined : localizationKeys('__experimental_commerce.billedMonthlyOnly')}
+          sx={{
+            alignSelf: 'center',
+          }}
         />
-        {annualMonthlyAmount > 0 ? (
-          <Box
-            elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}
-            sx={[
-              _ => ({
-                width: '100%',
-                display: 'grid',
-                gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',
-              }),
-              pricingTableCardFeePeriodNoticeAnimation,
-            ]}
-            // @ts-ignore - Needed until React 19 support
-            inert={planPeriod !== 'annual' ? 'true' : undefined}
-          >
-            <Box
-              elementDescriptor={descriptors.pricingTableCardFeePeriodNoticeInner}
-              sx={{
-                overflow: 'hidden',
-                minHeight: 0,
-              }}
-            >
-              <Text
-                elementDescriptor={descriptors.pricingTableCardFeePeriodNoticeLabel}
-                variant='caption'
-                colorScheme='secondary'
-                sx={t => ({
-                  width: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  columnGap: t.space.$1,
-                })}
-              >
-                <Icon
-                  icon={InformationCircle}
-                  colorScheme='neutral'
-                  size='sm'
-                  aria-hidden
-                />{' '}
-                <Span localizationKey={localizationKeys('__experimental_commerce.billedAnnually')} />
-              </Text>
-            </Box>
-          </Box>
-        ) : null}
-      </Flex>
-      {plan.hasBaseFee && annualMonthlyAmount > 0 && setPlanPeriod ? (
-        <Box
-          elementDescriptor={descriptors.pricingTableCardPeriodToggle}
-          sx={t => ({
-            display: 'flex',
-            marginTop: t.space.$3,
-          })}
-        >
-          <SegmentedControl.Root
-            aria-label='Set pay period'
-            value={planPeriod}
-            onChange={value => setPlanPeriod(value as __experimental_CommerceSubscriptionPlanPeriod)}
-          >
-            <SegmentedControl.Button
-              value='month'
-              // TODO(@Commerce): needs localization
-              text='Monthly'
-            />
-            <SegmentedControl.Button
-              value='annual'
-              // TODO(@Commerce): needs localization
-              text='Annually'
-            />
-          </SegmentedControl.Root>
-        </Box>
-      ) : null}
+      )}
     </Box>
   );
 });
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index e7b2601a08d..283e33ea458 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -311,6 +311,9 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'segmentedControlRoot',
   'segmentedControlButton',
 
+  'switchRoot',
+  'switchThumb',
+
   'alert',
   'alertIcon',
   'alertText',
diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx
new file mode 100644
index 00000000000..8129ee76753
--- /dev/null
+++ b/packages/clerk-js/src/ui/elements/Switch.tsx
@@ -0,0 +1,118 @@
+import React, { forwardRef, useState } from 'react';
+
+import type { LocalizationKey } from '../customizables';
+import { descriptors, Flex, Text } from '../customizables';
+
+interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  title?: string | LocalizationKey;
+}
+
+export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
+  (
+    {
+      checked: controlledChecked,
+      defaultChecked,
+      onChange,
+      disabled = false,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      title,
+    },
+    ref,
+  ) => {
+    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+
+    const handleToggle = (_: React.MouseEvent | React.KeyboardEvent) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalChecked(!checked);
+      }
+      onChange?.(!checked);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        handleToggle(e);
+      }
+    };
+
+    return (
+      <Flex
+        direction='row'
+        align='center'
+        as='div'
+        ref={ref}
+        tabIndex={disabled ? -1 : 0}
+        role='switch'
+        aria-checked={checked}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        elementDescriptor={descriptors.switchRoot}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        sx={{
+          width: 'fit-content',
+          userSelect: 'none',
+        }}
+      >
+        <Flex
+          as='div'
+          align='center'
+          sx={t => ({
+            width: 24,
+            height: 16,
+            alignItems: 'center',
+            position: 'relative',
+            backgroundColor: checked ? t.colors.$primary500 : t.colors.$neutralAlpha150,
+            borderRadius: 999,
+            transition: 'background-color 0.2s',
+            opacity: disabled ? 0.6 : 1,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            outline: 'none',
+            boxSizing: 'border-box',
+            boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.06) inset',
+          })}
+        >
+          <Flex
+            as='span'
+            elementDescriptor={descriptors.switchThumb}
+            sx={t => ({
+              position: 'absolute',
+              left: checked ? 10 : 2,
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              backgroundColor: t.colors.$colorBackground,
+              boxShadow: t.shadows.$switchControl,
+              transition: 'left 0.2s',
+              zIndex: 1,
+            })}
+          />
+        </Flex>
+        {title && (
+          <Text
+            variant='caption'
+            colorScheme='secondary'
+            localizationKey={title}
+            sx={{
+              marginLeft: 8,
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              userSelect: 'none',
+            }}
+          />
+        )}
+      </Flex>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';
diff --git a/packages/clerk-js/src/ui/elements/index.ts b/packages/clerk-js/src/ui/elements/index.ts
index 6914c722e5a..aa2272771e5 100644
--- a/packages/clerk-js/src/ui/elements/index.ts
+++ b/packages/clerk-js/src/ui/elements/index.ts
@@ -50,6 +50,7 @@ export * from './Section';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './SuccessPage';
+export * from './Switch';
 export * from './Tabs';
 export * from './TagInput';
 export * from './ThreeDotsMenu';
diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/clerk-js/src/ui/foundations/shadows.ts
index 3c1327b06b0..490215ff011 100644
--- a/packages/clerk-js/src/ui/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui/foundations/shadows.ts
@@ -12,4 +12,6 @@ export const shadows = Object.freeze({
   badge: '0px 2px 0px -1px rgba(0, 0, 0, 0.04)',
   tableBodyShadow: '0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
   segmentedControl: '0px 1px 2px 0px rgba(0, 0, 0, 0.08)',
+  switchControl:
+    '0px 2px 2px -1px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.06)',
 } as const);
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index ac89f07b252..58b29a5e02d 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -5,6 +5,7 @@ export const enUS: LocalizationResource = {
   __experimental_commerce: {
     availableFeatures: 'Available features',
     billedAnnually: 'Billed annually',
+    billedMonthlyOnly: 'Only billed monthly',
     cancelSubscription: 'Cancel subscription',
     checkout: {
       description__paymentSuccessful: 'Your new subscription is all set.',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 56209fc7eaf..56548641cf8 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -282,6 +282,9 @@ export type ElementsConfig = {
   segmentedControlRoot: WithOptions;
   segmentedControlButton: WithOptions;
 
+  switchRoot: WithOptions;
+  switchThumb: WithOptions;
+
   avatarBox: WithOptions;
   avatarImage: WithOptions;
   avatarImageActions: WithOptions;
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 00e3b818838..51eaf527736 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -117,6 +117,7 @@ type _LocalizationResource = {
     switchPlan: LocalizationValue;
     switchToAnnual: LocalizationValue;
     billedAnnually: LocalizationValue;
+    billedMonthlyOnly: LocalizationValue;
     accountFunds: LocalizationValue;
     defaultFreePlanActive: LocalizationValue;
     viewFeatures: LocalizationValue;

From a677398c73d46dc7d3ed214b23e6867bb3c608e6 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:20:42 -0500
Subject: [PATCH 05/28] changeset

---
 .changeset/old-cobras-change.md           | 7 +++++++
 packages/clerk-js/bundlewatch.config.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/old-cobras-change.md

diff --git a/.changeset/old-cobras-change.md b/.changeset/old-cobras-change.md
new file mode 100644
index 00000000000..5c5bfd49239
--- /dev/null
+++ b/.changeset/old-cobras-change.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Adjusts the layout of the `PricingTable` plan cards
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 09f6fd140cf..729d3673b25 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "68KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "102.5KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "103KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

From 0a8db5e2d3ab7cfc4b0e926f5021b7bc3484d191 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:27:31 -0500
Subject: [PATCH 06/28] dedupe

---
 pnpm-lock.yaml | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 57b3317070a..3515ecd7102 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,82 +3486,66 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -14123,7 +14107,6 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From a4c63a7db6267940813db64c8a9bb166c873537c Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:32:02 -0500
Subject: [PATCH 07/28] revert lockfile

---
 pnpm-lock.yaml | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3515ecd7102..9dcd0e62cfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,66 +3486,82 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -3839,7 +3855,6 @@ packages:
 
   '@oxc-parser/wasm@0.60.0':
     resolution: {integrity: sha512-Dkf9/D87WGBCW3L0+1DtpAfL4SrNsgeRvxwjpKCtbH7Kf6K+pxrT0IridaJfmWKu1Ml+fDvj+7HEyBcfUC/TXQ==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   '@oxc-project/types@0.56.5':
     resolution: {integrity: sha512-skY3kOJwp22W4RkaadH1hZ3hqFHjkRrIIE0uQ4VUg+/Chvbl+2pF+B55IrIk2dgsKXS57YEUsJuN6I6s4rgFjA==}
@@ -14107,6 +14122,7 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From 7798e212f7fe585f1e761f91e39a5ff539c6b297 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 22:10:39 -0500
Subject: [PATCH 08/28] feedback tweaks

---
 .../PricingTable/PricingTableDefault.tsx       | 17 +++++++++++++----
 .../src/ui/contexts/components/Plans.tsx       |  2 +-
 packages/localizations/src/en-US.ts            |  1 +
 packages/types/src/localization.ts             |  1 +
 pnpm-lock.yaml                                 | 18 +-----------------
 5 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index ad78db8bc43..f381f4eab7b 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -309,7 +309,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         align='center'
         wrap='wrap'
         sx={t => ({
-          columnGap: t.space.$1x5,
+          columnGap: t.space.$1,
           marginTop: t.space.$1,
         })}
       >
@@ -330,7 +330,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
               textTransform: 'lowercase',
               ':before': {
                 content: '"/"',
-                marginInlineEnd: t.space.$1,
+                marginInlineEnd: t.space.$0x25,
               },
             })}
             localizationKey={localizationKeys('__experimental_commerce.month')}
@@ -339,7 +339,12 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
       </Flex>
 
       {annualMonthlyAmount > 0 && setPlanPeriod ? (
-        <Box elementDescriptor={descriptors.pricingTableCardPeriodToggle}>
+        <Box
+          elementDescriptor={descriptors.pricingTableCardPeriodToggle}
+          sx={t => ({
+            marginTop: t.space.$1,
+          })}
+        >
           <Switch
             checked={planPeriod === 'annual'}
             onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}
@@ -351,7 +356,11 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}
           variant='caption'
           colorScheme='secondary'
-          localizationKey={plan.isDefault ? undefined : localizationKeys('__experimental_commerce.billedMonthlyOnly')}
+          localizationKey={
+            plan.isDefault
+              ? localizationKeys('__experimental_commerce.alwaysFree')
+              : localizationKeys('__experimental_commerce.billedMonthlyOnly')
+          }
           sx={{
             alignSelf: 'center',
           }}
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 12f5ab7752f..26c94601c94 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -72,7 +72,7 @@ export const PlansContextProvider = ({ children }: PropsWithChildren) => {
     <PlansContext.Provider
       value={{
         componentName: 'Plans',
-        plans: plans || [],
+        plans: plans && subscriptions ? plans : [],
         subscriptions: subscriptions?.data || [],
         isLoading: isLoadingSubscriptions || isLoadingPlans || false,
         revalidate,
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 58b29a5e02d..71e957a4d8f 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -6,6 +6,7 @@ export const enUS: LocalizationResource = {
     availableFeatures: 'Available features',
     billedAnnually: 'Billed annually',
     billedMonthlyOnly: 'Only billed monthly',
+    alwaysFree: 'Always free',
     cancelSubscription: 'Cancel subscription',
     checkout: {
       description__paymentSuccessful: 'Your new subscription is all set.',
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 51eaf527736..969ab226865 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -118,6 +118,7 @@ type _LocalizationResource = {
     switchToAnnual: LocalizationValue;
     billedAnnually: LocalizationValue;
     billedMonthlyOnly: LocalizationValue;
+    alwaysFree: LocalizationValue;
     accountFunds: LocalizationValue;
     defaultFreePlanActive: LocalizationValue;
     viewFeatures: LocalizationValue;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9dcd0e62cfb..3515ecd7102 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,82 +3486,66 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -3855,6 +3839,7 @@ packages:
 
   '@oxc-parser/wasm@0.60.0':
     resolution: {integrity: sha512-Dkf9/D87WGBCW3L0+1DtpAfL4SrNsgeRvxwjpKCtbH7Kf6K+pxrT0IridaJfmWKu1Ml+fDvj+7HEyBcfUC/TXQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   '@oxc-project/types@0.56.5':
     resolution: {integrity: sha512-skY3kOJwp22W4RkaadH1hZ3hqFHjkRrIIE0uQ4VUg+/Chvbl+2pF+B55IrIk2dgsKXS57YEUsJuN6I6s4rgFjA==}
@@ -14122,7 +14107,6 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From 6d2d75ebfd6c277832750e9bf85fb9c5ab111475 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 22:30:08 -0500
Subject: [PATCH 09/28] feedback for switch

---
 .../PricingTable/PricingTableDefault.tsx      |  2 +-
 packages/clerk-js/src/ui/elements/Switch.tsx  | 62 ++++++++-----------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index f381f4eab7b..f2ac6c6f524 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -348,7 +348,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
           <Switch
             checked={planPeriod === 'annual'}
             onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}
-            title={localizationKeys('__experimental_commerce.billedAnnually')}
+            label={localizationKeys('__experimental_commerce.billedAnnually')}
           />
         </Box>
       ) : (
diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx
index 8129ee76753..c768993ab16 100644
--- a/packages/clerk-js/src/ui/elements/Switch.tsx
+++ b/packages/clerk-js/src/ui/elements/Switch.tsx
@@ -1,7 +1,8 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useId, useState } from 'react';
 
 import type { LocalizationKey } from '../customizables';
 import { descriptors, Flex, Text } from '../customizables';
+import { common } from '../styledSystem';
 
 interface SwitchProps {
   checked?: boolean;
@@ -9,26 +10,15 @@ interface SwitchProps {
   onChange?: (checked: boolean) => void;
   disabled?: boolean;
   'aria-label'?: string;
-  'aria-labelledby'?: string;
-  title?: string | LocalizationKey;
+  label?: string | LocalizationKey;
 }
 
 export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
-  (
-    {
-      checked: controlledChecked,
-      defaultChecked,
-      onChange,
-      disabled = false,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby,
-      title,
-    },
-    ref,
-  ) => {
+  ({ checked: controlledChecked, defaultChecked, onChange, disabled = false, 'aria-label': ariaLabel, label }, ref) => {
     const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
     const isControlled = controlledChecked !== undefined;
     const checked = isControlled ? controlledChecked : internalChecked;
+    const labelId = useId();
 
     const handleToggle = (_: React.MouseEvent | React.KeyboardEvent) => {
       if (disabled) return;
@@ -50,26 +40,21 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
         direction='row'
         align='center'
         as='div'
-        ref={ref}
-        tabIndex={disabled ? -1 : 0}
-        role='switch'
-        aria-checked={checked}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
-        elementDescriptor={descriptors.switchRoot}
-        onClick={handleToggle}
-        onKeyDown={handleKeyDown}
-        sx={{
-          width: 'fit-content',
-          userSelect: 'none',
-        }}
       >
         <Flex
           as='div'
-          align='center'
+          ref={ref}
+          tabIndex={disabled ? -1 : 0}
+          role='switch'
+          aria-checked={checked}
+          aria-label={ariaLabel}
+          aria-labelledby={label && !ariaLabel ? labelId : undefined}
+          elementDescriptor={descriptors.switchRoot}
+          onClick={handleToggle}
+          onKeyDown={handleKeyDown}
           sx={t => ({
-            width: 24,
-            height: 16,
+            width: t.sizes.$6,
+            height: t.sizes.$4,
             alignItems: 'center',
             position: 'relative',
             backgroundColor: checked ? t.colors.$primary500 : t.colors.$neutralAlpha150,
@@ -80,6 +65,7 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
             outline: 'none',
             boxSizing: 'border-box',
             boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.06) inset',
+            ...common.focusRing(t),
           })}
         >
           <Flex
@@ -87,22 +73,24 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
             elementDescriptor={descriptors.switchThumb}
             sx={t => ({
               position: 'absolute',
-              left: checked ? 10 : 2,
-              width: 12,
-              height: 12,
+              left: t.sizes.$0x5,
+              width: t.sizes.$3,
+              height: t.sizes.$3,
               borderRadius: '50%',
               backgroundColor: t.colors.$colorBackground,
               boxShadow: t.shadows.$switchControl,
-              transition: 'left 0.2s',
+              transform: `translateX(${checked ? t.sizes.$2 : 0})`,
+              transition: 'transform 0.2s',
               zIndex: 1,
             })}
           />
         </Flex>
-        {title && (
+        {label && (
           <Text
+            id={labelId}
             variant='caption'
             colorScheme='secondary'
-            localizationKey={title}
+            localizationKey={label}
             sx={{
               marginLeft: 8,
               cursor: disabled ? 'not-allowed' : 'pointer',

From 972599a973897491bd535e4183f709708b89ed08 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sat, 3 May 2025 22:26:29 -0500
Subject: [PATCH 10/28] pricing card layout tweaks

---
 .../src/ui/components/PricingTable/PricingTableDefault.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index f2ac6c6f524..5d920abdb19 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -134,7 +134,7 @@ function Card(props: CardProps) {
         display: 'grid',
         gap: 0,
         gridTemplateRows: 'subgrid',
-        gridRow: 'span 4',
+        gridRow: 'span 2',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,

From 9e70a10eac0d401bd858251675ee15ae32cb8339 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 12:08:45 -0500
Subject: [PATCH 11/28] subgrid layout work

# Conflicts:
#	packages/localizations/src/en-US.ts
---
 .../src/ui/components/PricingTable/PricingTableDefault.tsx      | 2 +-
 packages/localizations/src/en-US.ts                             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 5d920abdb19..552b690c28c 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -134,7 +134,7 @@ function Card(props: CardProps) {
         display: 'grid',
         gap: 0,
         gridTemplateRows: 'subgrid',
-        gridRow: 'span 2',
+        gridRow: 'span 6',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 71e957a4d8f..23e28281bc8 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -33,6 +33,7 @@ export const enUS: LocalizationResource = {
     month: 'Month',
     reSubscribe: 'Resubscribe',
     seeAllFeatures: 'See all features',
+    subscribe: 'Subscribe',
     switchPlan: 'Switch to this plan',
     switchToAnnual: 'Switch to annual',
     viewFeatures: 'View features',

From 4c6de4ee76f30b521ca19900a6228098a52fb3cc Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:14:01 -0500
Subject: [PATCH 12/28] new pricing card layout

---
 .../src/ui/components/PricingTable/PricingTableDefault.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 552b690c28c..f2ac6c6f524 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -134,7 +134,7 @@ function Card(props: CardProps) {
         display: 'grid',
         gap: 0,
         gridTemplateRows: 'subgrid',
-        gridRow: 'span 6',
+        gridRow: 'span 4',
         background: common.mergedColorsBackground(
           colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$neutralAlpha50,

From 8d39f2749d2090a2d3d6371b3dc99399e6dfda4d Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 17:32:02 -0500
Subject: [PATCH 13/28] revert lockfile

---
 pnpm-lock.yaml | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3515ecd7102..9dcd0e62cfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,66 +3486,82 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -3839,7 +3855,6 @@ packages:
 
   '@oxc-parser/wasm@0.60.0':
     resolution: {integrity: sha512-Dkf9/D87WGBCW3L0+1DtpAfL4SrNsgeRvxwjpKCtbH7Kf6K+pxrT0IridaJfmWKu1Ml+fDvj+7HEyBcfUC/TXQ==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   '@oxc-project/types@0.56.5':
     resolution: {integrity: sha512-skY3kOJwp22W4RkaadH1hZ3hqFHjkRrIIE0uQ4VUg+/Chvbl+2pF+B55IrIk2dgsKXS57YEUsJuN6I6s4rgFjA==}
@@ -14107,6 +14122,7 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From ccf5ff2698d79f63bab273656f47d31d133db699 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 4 May 2025 22:10:39 -0500
Subject: [PATCH 14/28] feedback tweaks

---
 pnpm-lock.yaml | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9dcd0e62cfb..3515ecd7102 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,82 +3486,66 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -3855,6 +3839,7 @@ packages:
 
   '@oxc-parser/wasm@0.60.0':
     resolution: {integrity: sha512-Dkf9/D87WGBCW3L0+1DtpAfL4SrNsgeRvxwjpKCtbH7Kf6K+pxrT0IridaJfmWKu1Ml+fDvj+7HEyBcfUC/TXQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   '@oxc-project/types@0.56.5':
     resolution: {integrity: sha512-skY3kOJwp22W4RkaadH1hZ3hqFHjkRrIIE0uQ4VUg+/Chvbl+2pF+B55IrIk2dgsKXS57YEUsJuN6I6s4rgFjA==}
@@ -14122,7 +14107,6 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
-    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From 493b5163fb9297813167858401ea2e55dd0dcb20 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 11:39:47 +0300
Subject: [PATCH 15/28] chore(clerk-js): Remove suscriptions check from
 PlansContext provider

---
 packages/clerk-js/src/ui/contexts/components/Plans.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 26c94601c94..12f5ab7752f 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -72,7 +72,7 @@ export const PlansContextProvider = ({ children }: PropsWithChildren) => {
     <PlansContext.Provider
       value={{
         componentName: 'Plans',
-        plans: plans && subscriptions ? plans : [],
+        plans: plans || [],
         subscriptions: subscriptions?.data || [],
         isLoading: isLoadingSubscriptions || isLoadingPlans || false,
         revalidate,

From ecfdb8cc93cea871e5923122f7c769827afcc620 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 11:49:33 +0300
Subject: [PATCH 16/28] chore(repo): Deduplicate

---
 pnpm-lock.yaml | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3515ecd7102..57b3317070a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3486,66 +3486,82 @@ packages:
   '@miniflare/cache@2.14.4':
     resolution: {integrity: sha512-ayzdjhcj+4mjydbNK7ZGDpIXNliDbQY4GPcY2KrYw0v1OSUdj5kZUkygD09fqoGRfAks0d91VelkyRsAXX8FQA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/core@2.14.4':
     resolution: {integrity: sha512-FMmZcC1f54YpF4pDWPtdQPIO8NXfgUxCoR9uyrhxKJdZu7M6n8QKopPVNuaxR40jcsdxb7yKoQoFWnHfzJD9GQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/d1@2.14.4':
     resolution: {integrity: sha512-pMBVq9XWxTDdm+RRCkfXZP+bREjPg1JC8s8C0JTovA9OGmLQXqGTnFxIaS9vf1d8k3uSUGhDzPTzHr0/AUW1gA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/durable-objects@2.14.4':
     resolution: {integrity: sha512-+JrmHP6gHHrjxV8S3axVw5lGHLgqmAGdcO/1HJUPswAyJEd3Ah2YnKhpo+bNmV4RKJCtEq9A2hbtVjBTD2YzwA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/html-rewriter@2.14.4':
     resolution: {integrity: sha512-GB/vZn7oLbnhw+815SGF+HU5EZqSxbhIa3mu2L5MzZ2q5VOD5NHC833qG8c2GzDPhIaZ99ITY+ZJmbR4d+4aNQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/kv@2.14.4':
     resolution: {integrity: sha512-QlERH0Z+klwLg0xw+/gm2yC34Nnr/I0GcQ+ASYqXeIXBwjqOtMBa3YVQnocaD+BPy/6TUtSpOAShHsEj76R2uw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/queues@2.14.4':
     resolution: {integrity: sha512-aXQ5Ik8Iq1KGMBzGenmd6Js/jJgqyYvjom95/N9GptCGpiVWE5F0XqC1SL5rCwURbHN+aWY191o8XOFyY2nCUA==}
     engines: {node: '>=16.7'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/r2@2.14.4':
     resolution: {integrity: sha512-4ctiZWh7Ty7LB3brUjmbRiGMqwyDZgABYaczDtUidblo2DxX4JZPnJ/ZAyxMPNJif32kOJhcg6arC2hEthR9Sw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/runner-vm@2.14.4':
     resolution: {integrity: sha512-Nog0bB9SVhPbZAkTWfO4lpLAUsBXKEjlb4y+y66FJw77mPlmPlVdpjElCvmf8T3VN/pqh83kvELGM+/fucMf4g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared-test-environment@2.14.4':
     resolution: {integrity: sha512-FdU2/8wEd00vIu+MfofLiHcfZWz+uCbE2VTL85KpyYfBsNGAbgRtzFMpOXdoXLqQfRu6MBiRwWpb2FbMrBzi7g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/shared@2.14.4':
     resolution: {integrity: sha512-upl4RSB3hyCnITOFmRZjJj4A72GmkVrtfZTilkdq5Qe5TTlzsjVeDJp7AuNUM9bM8vswRo+N5jOiot6O4PVwwQ==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/sites@2.14.4':
     resolution: {integrity: sha512-O5npWopi+fw9W9Ki0gy99nuBbgDva/iXy8PDC4dAXDB/pz45nISDqldabk0rL2t4W2+lY6LXKzdOw+qJO1GQTA==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-file@2.14.4':
     resolution: {integrity: sha512-JxcmX0hXf4cB0cC9+s6ZsgYCq+rpyUKRPCGzaFwymWWplrO3EjPVxKCcMxG44jsdgsII6EZihYUN2J14wwCT7A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/storage-memory@2.14.4':
     resolution: {integrity: sha512-9jB5BqNkMZ3SFjbPFeiVkLi1BuSahMhc/W1Y9H0W89qFDrrD+z7EgRgDtHTG1ZRyi9gIlNtt9qhkO1B6W2qb2A==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/watcher@2.14.4':
     resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@miniflare/web-sockets@2.14.4':
     resolution: {integrity: sha512-stTxvLdJ2IcGOs76AnvGYAzGvx8JvQPRxC5DW0P5zdAAnhL33noqb5LKdPt3P37BKp9FzBKZHuihQI9oVqwm0g==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
 
   '@modelcontextprotocol/sdk@1.7.0':
     resolution: {integrity: sha512-IYPe/FLpvF3IZrd/f5p5ffmWhMc3aEMuM2wGJASDqC2Ge7qatVCdbfPx3n/5xFeb19xN0j/911M2AaFuircsWA==}
@@ -14107,6 +14123,7 @@ packages:
   vitest-environment-miniflare@2.14.4:
     resolution: {integrity: sha512-DzwQWdY42sVYR6aUndw9FdCtl/i0oh3NkbkQpw+xq5aYQw5eiJn5kwnKaKQEWaoBe8Cso71X2i1EJGvi1jZ2xw==}
     engines: {node: '>=16.13'}
+    deprecated: Miniflare v2 is no longer supported. Please upgrade to Miniflare v4
     peerDependencies:
       vitest: '>=0.23.0'
 

From d8913df044aa390f4142a0b4b673221284523ab9 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 12:00:48 +0300
Subject: [PATCH 17/28] chore(clerk-js): Fix pricing table layout shift

---
 .../clerk-js/src/ui/contexts/components/Plans.tsx     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 12f5ab7752f..ec94597c8a7 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -32,7 +32,7 @@ export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscri
 export const PlansContextProvider = ({ children }: PropsWithChildren) => {
   const { __experimental_commerce } = useClerk();
   const { organization } = useOrganization();
-  const { user } = useUser();
+  const { user, isSignedIn } = useUser();
   const subscriberType = useSubscriberTypeContext();
   const {
     data: subscriptions,
@@ -68,11 +68,18 @@ export const PlansContextProvider = ({ children }: PropsWithChildren) => {
     revalidateInvoices();
   }, [revalidateInvoices, revalidatePlans, revalidateSubscriptions]);
 
+  const isLoaded = useMemo(() => {
+    if (isSignedIn) {
+      return isLoadingSubscriptions === false && isLoadingPlans === false;
+    }
+    return isLoadingPlans === false;
+  }, [isLoadingPlans, isLoadingSubscriptions, isSignedIn]);
+
   return (
     <PlansContext.Provider
       value={{
         componentName: 'Plans',
-        plans: plans || [],
+        plans: isLoaded ? (plans ?? []) : [],
         subscriptions: subscriptions?.data || [],
         isLoading: isLoadingSubscriptions || isLoadingPlans || false,
         revalidate,

From 0bbd74786a0bc642510931ce09c79bc46d105c4a Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 12:18:30 +0300
Subject: [PATCH 18/28] chore(clerk-js): Bundlewatch increase

---
 packages/clerk-js/bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 729d3673b25..0c6154cc81d 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "68KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "103KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "104KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

From 65ef192eb4c13758f64b551490a40b79d445f7e0 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 12:52:52 +0300
Subject: [PATCH 19/28] fix(clerk-js): Don't show status row if user is not
 signed in on Pricing table

---
 .../src/ui/components/PricingTable/PricingTableDefault.tsx   | 5 +++--
 .../src/playwright/unstable/page-objects/pricingTable.ts     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index f2ac6c6f524..fa6bb1301b9 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { useClerk, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriptionPlanPeriod,
@@ -99,6 +99,7 @@ interface CardProps {
 function Card(props: CardProps) {
   const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
   const clerk = useClerk();
+  const { isSignedIn } = useUser();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
 
@@ -112,7 +113,7 @@ function Card(props: CardProps) {
   const subscription = activeOrUpcomingSubscription(plan);
   const isImplicitlyActiveOrUpcoming = isDefaultPlanImplicitlyActiveOrUpcoming && plan.isDefault;
 
-  const showStatusRow = !!subscription || isImplicitlyActiveOrUpcoming;
+  const showStatusRow = !!subscription || (isImplicitlyActiveOrUpcoming && isSignedIn);
 
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
diff --git a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
index e3e426ac417..3d7c00dc850 100644
--- a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
@@ -16,7 +16,7 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     },
     startCheckout: async ({ planSlug, shouldSwitch }: { planSlug: string; shouldSwitch?: boolean }) => {
       const targetButtonName =
-        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? 'Get started' : /get|switch/i;
+        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? 'Subscribe' : /get|switch/i;
       await page.locator(`.cl-pricingTableCard__${planSlug}`).getByRole('button', { name: targetButtonName }).click();
     },
   };

From b1b773fb55a3e08070c7b8167ca490299c7b27aa Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 14:03:40 +0300
Subject: [PATCH 20/28] ci fixes

---
 integration/tests/pricing-table.test.ts               | 11 +++++++----
 .../playwright/unstable/page-objects/pricingTable.ts  | 10 ++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index 84e9be11fa8..eadbc7fab9d 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -28,12 +28,13 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await expect(u.po.page.getByRole('heading', { name: 'Pro' })).toBeVisible();
   });
 
-  test('when signed out, clicking get started button navigates to sign in page', async ({ page, context }) => {
+  test('when signed out, clicking subscribe button navigates to sign in page', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
+    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
+    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
     await u.po.signIn.waitForMounted();
     await expect(u.po.page.getByText('Checkout')).toBeHidden();
   });
@@ -45,7 +46,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
+    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
+    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
     await u.po.checkout.waitForMounted();
     await expect(u.po.page.getByText('Checkout')).toBeVisible();
   });
@@ -57,7 +59,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
+    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
+    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
     await u.po.checkout.waitForMounted();
     await u.po.checkout.fillTestCard();
     await u.po.checkout.clickPayOrSubscribe();
diff --git a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
index 3d7c00dc850..d7561e37d97 100644
--- a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
@@ -16,8 +16,14 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     },
     startCheckout: async ({ planSlug, shouldSwitch }: { planSlug: string; shouldSwitch?: boolean }) => {
       const targetButtonName =
-        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? 'Subscribe' : /get|switch/i;
-      await page.locator(`.cl-pricingTableCard__${planSlug}`).getByRole('button', { name: targetButtonName }).click();
+        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? 'Subscribe' : /get|switch|subscribe/i;
+
+      await page
+        .locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardAction`)
+        .getByRole('button', {
+          name: targetButtonName,
+        })
+        .click();
     },
   };
   return self;

From ef20a7d5f28cef67dbd2822f3b00710690f3e4a9 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 14:25:49 +0300
Subject: [PATCH 21/28] e2e fixes

---
 package.json                                                    | 2 +-
 .../src/playwright/unstable/page-objects/pricingTable.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a9f8baaa9e1..4d711d37472 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "test:integration:ap-flows": "pnpm test:integration:base --grep @ap-flows",
     "test:integration:astro": "E2E_APP_ID=astro.* pnpm test:integration:base --grep @astro",
     "test:integration:base": "pnpm playwright test --config integration/playwright.config.ts",
-    "test:integration:billing": "E2E_APP_ID=withBilling.* pnpm test:integration:base --grep @billing",
+    "test:integration:billing": "E2E_APP_ID=withBilling.next.appRouter pnpm test:integration:base --grep @billing",
     "test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts",
     "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts",
     "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements",
diff --git a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
index d7561e37d97..7a2fc9bd560 100644
--- a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
@@ -16,7 +16,7 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     },
     startCheckout: async ({ planSlug, shouldSwitch }: { planSlug: string; shouldSwitch?: boolean }) => {
       const targetButtonName =
-        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? 'Subscribe' : /get|switch|subscribe/i;
+        shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? /subscribe/i : /get|switch|subscribe/i;
 
       await page
         .locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardAction`)

From e3d6e26b5d463f07ac964e3ed727389794116e47 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 14:42:13 +0300
Subject: [PATCH 22/28] remove next constraing for billing e2e tests

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4d711d37472..a9f8baaa9e1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "test:integration:ap-flows": "pnpm test:integration:base --grep @ap-flows",
     "test:integration:astro": "E2E_APP_ID=astro.* pnpm test:integration:base --grep @astro",
     "test:integration:base": "pnpm playwright test --config integration/playwright.config.ts",
-    "test:integration:billing": "E2E_APP_ID=withBilling.next.appRouter pnpm test:integration:base --grep @billing",
+    "test:integration:billing": "E2E_APP_ID=withBilling.* pnpm test:integration:base --grep @billing",
     "test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts",
     "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts",
     "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements",

From 642cd0fead463767a92637e120f156d8241e0c32 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 16:10:23 +0300
Subject: [PATCH 23/28] fix(e2e): Fix checkout and pricing table helpers

---
 integration/tests/pricing-table.test.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index eadbc7fab9d..9f825443bb3 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -33,8 +33,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
-    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
+    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
     await u.po.signIn.waitForMounted();
     await expect(u.po.page.getByText('Checkout')).toBeHidden();
   });
@@ -46,8 +45,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
-    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
+    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
     await u.po.checkout.waitForMounted();
     await expect(u.po.page.getByText('Checkout')).toBeVisible();
   });
@@ -59,8 +57,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.page.goToRelative('/pricing-table');
 
     await u.po.pricingTable.waitForMounted();
-    // await u.po.pricingTable.startCheckout({ planSlug: 'plus' }); - This is not working consistently for some reason
-    await u.po.page.locator(`.cl-pricingTableCard__plus .cl-pricingTableCardAction`).getByRole('button').click();
+    await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
     await u.po.checkout.waitForMounted();
     await u.po.checkout.fillTestCard();
     await u.po.checkout.clickPayOrSubscribe();
@@ -104,7 +101,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.pricingTable.clickManageSubscription();
     await u.po.page.getByRole('button', { name: 'Cancel subscription' }).click();
     await u.po.page.getByRole('alertdialog').getByRole('button', { name: 'Cancel subscription' }).click();
-    await expect(u.po.page.getByRole('button', { name: 'Re-subscribe' }).first()).toBeVisible();
+    await expect(u.po.page.getByRole('button', { name: 'Resubscribe' }).first()).toBeVisible();
   });
 
   test.describe('in UserProfile', () => {

From 8424c307db2ce0b87eb5ad810edf9860c49eba01 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 5 May 2025 09:49:16 -0400
Subject: [PATCH 24/28] refactor(clerk-js,types): Handle switch feedback
 (#5830)

---
 .../ui/customizables/elementDescriptors.ts    |  2 +
 packages/clerk-js/src/ui/elements/Switch.tsx  | 61 ++++++++++---------
 .../clerk-js/src/ui/styledSystem/common.ts    | 19 ++++--
 packages/types/src/appearance.ts              |  2 +
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 283e33ea458..f2ed2bdabe9 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -312,7 +312,9 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'segmentedControlButton',
 
   'switchRoot',
+  'switchIndicator',
   'switchThumb',
+  'switchLabel',
 
   'alert',
   'alertIcon',
diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx
index c768993ab16..f7e979a5036 100644
--- a/packages/clerk-js/src/ui/elements/Switch.tsx
+++ b/packages/clerk-js/src/ui/elements/Switch.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useId, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import type { LocalizationKey } from '../customizables';
 import { descriptors, Flex, Text } from '../customizables';
@@ -14,44 +14,49 @@ interface SwitchProps {
 }
 
 export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
-  ({ checked: controlledChecked, defaultChecked, onChange, disabled = false, 'aria-label': ariaLabel, label }, ref) => {
+  ({ checked: controlledChecked, defaultChecked, onChange, disabled = false, label }, ref) => {
     const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
     const isControlled = controlledChecked !== undefined;
     const checked = isControlled ? controlledChecked : internalChecked;
-    const labelId = useId();
 
-    const handleToggle = (_: React.MouseEvent | React.KeyboardEvent) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       if (disabled) return;
       if (!isControlled) {
-        setInternalChecked(!checked);
-      }
-      onChange?.(!checked);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === ' ' || e.key === 'Enter') {
-        e.preventDefault();
-        handleToggle(e);
+        setInternalChecked(e.target.checked);
       }
+      onChange?.(e.target.checked);
     };
 
     return (
       <Flex
+        ref={ref}
+        elementDescriptor={descriptors.switchRoot}
         direction='row'
         align='center'
-        as='div'
+        as='label'
+        sx={t => ({
+          width: 'fit-content',
+          '&:has(input:focus-visible) > span': {
+            ...common.focusRingStyles(t),
+          },
+        })}
       >
-        <Flex
-          as='div'
-          ref={ref}
-          tabIndex={disabled ? -1 : 0}
+        {/* The order of the elements is important here for the focus ring to work. The input is visually hidden, so the focus ring is applied to the span. */}
+        <input
+          type='checkbox'
           role='switch'
-          aria-checked={checked}
-          aria-label={ariaLabel}
-          aria-labelledby={label && !ariaLabel ? labelId : undefined}
-          elementDescriptor={descriptors.switchRoot}
-          onClick={handleToggle}
-          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          defaultChecked={defaultChecked}
+          checked={checked}
+          onChange={handleChange}
+          style={{
+            ...common.visuallyHidden(),
+          }}
+        />
+        <Flex
+          elementDescriptor={descriptors.switchIndicator}
+          as='span'
+          data-checked={checked}
           sx={t => ({
             width: t.sizes.$6,
             height: t.sizes.$4,
@@ -65,7 +70,6 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
             outline: 'none',
             boxSizing: 'border-box',
             boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.06) inset',
-            ...common.focusRing(t),
           })}
         >
           <Flex
@@ -87,15 +91,14 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
         </Flex>
         {label && (
           <Text
-            id={labelId}
             variant='caption'
             colorScheme='secondary'
             localizationKey={label}
-            sx={{
-              marginLeft: 8,
+            sx={t => ({
+              paddingInlineStart: t.sizes.$2,
               cursor: disabled ? 'not-allowed' : 'pointer',
               userSelect: 'none',
-            }}
+            })}
           />
         )}
       </Flex>
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index b60230e10c2..471711397ab 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -130,15 +130,21 @@ const borderColor = (t: InternalTheme, props?: any) => {
   } as const;
 };
 
+const focusRingStyles = (t: InternalTheme) => {
+  return {
+    '&::-moz-focus-inner': { border: '0' },
+    WebkitTapHighlightColor: 'transparent',
+    boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$neutralAlpha200),
+    transitionProperty: t.transitionProperty.$common,
+    transitionTimingFunction: t.transitionTiming.$common,
+    transitionDuration: t.transitionDuration.$focusRing,
+  } as const;
+};
+
 const focusRing = (t: InternalTheme) => {
   return {
     '&:focus': {
-      '&::-moz-focus-inner': { border: '0' },
-      WebkitTapHighlightColor: 'transparent',
-      boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$neutralAlpha200),
-      transitionProperty: t.transitionProperty.$common,
-      transitionTimingFunction: t.transitionTiming.$common,
-      transitionDuration: t.transitionDuration.$focusRing,
+      ...focusRingStyles(t),
     },
   } as const;
 };
@@ -198,6 +204,7 @@ const visuallyHidden = () =>
 export const common = {
   textVariants,
   borderVariants,
+  focusRingStyles,
   focusRing,
   disabled,
   borderColor,
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 56548641cf8..159392ee94d 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -283,7 +283,9 @@ export type ElementsConfig = {
   segmentedControlButton: WithOptions;
 
   switchRoot: WithOptions;
+  switchIndicator: WithOptions;
   switchThumb: WithOptions;
+  switchLabel: WithOptions;
 
   avatarBox: WithOptions;
   avatarImage: WithOptions;

From a0071a5677fd8365c0b909046b0c862397f8c93e Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 5 May 2025 10:31:39 -0400
Subject: [PATCH 25/28] chore(clerk-js,types): Cleanup PricingTableDefault
 descriptors (#5832)

---
 .../PricingTable/PricingTableDefault.tsx      |  9 +++++---
 .../ui/customizables/elementDescriptors.ts    | 12 +++++-----
 packages/types/src/appearance.ts              | 22 +++++++++----------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index fa6bb1301b9..99140af518f 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -157,6 +157,7 @@ function Card(props: CardProps) {
         setPlanPeriod={setPlanPeriod}
       />
       <Box
+        elementDescriptor={descriptors.pricingTableCardBody}
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -188,6 +189,7 @@ function Card(props: CardProps) {
 
         {showStatusRow && (
           <Box
+            elementDescriptor={descriptors.pricingTableCardStatusRow}
             sx={t => ({
               padding: t.space.$1,
               borderTopWidth: t.borderWidths.$normal,
@@ -197,7 +199,7 @@ function Card(props: CardProps) {
           >
             {subscription?.status === 'active' || (isImplicitlyActiveOrUpcoming && subscriptions.length === 0) ? (
               <Text
-                elementDescriptor={descriptors.pricingTableCardBadge}
+                elementDescriptor={descriptors.pricingTableCardStatus}
                 variant='caption'
                 colorScheme='body'
                 localizationKey={localizationKeys('badge__currentPlan')}
@@ -205,7 +207,7 @@ function Card(props: CardProps) {
               />
             ) : (
               <Text
-                elementDescriptor={descriptors.pricingTableCardBadge}
+                elementDescriptor={descriptors.pricingTableCardStatus}
                 variant='caption'
                 colorScheme='body'
                 localizationKey={
@@ -235,6 +237,7 @@ function Card(props: CardProps) {
             })}
           >
             <Button
+              elementDescriptor={descriptors.pricingTableCardActionButton}
               block
               textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
               {...buttonPropsForPlan({ plan, isCompact })}
@@ -285,7 +288,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >
-      <Box>
+      <Box elementDescriptor={descriptors.pricingTableCardTitleContainer}>
         <Heading
           elementDescriptor={descriptors.pricingTableCardTitle}
           as='h2'
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index f2ed2bdabe9..4575bb3a936 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -243,26 +243,24 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'pricingTable',
   'pricingTableCard',
   'pricingTableCardHeader',
+  'pricingTableCardTitleContainer',
   'pricingTableCardTitle',
   'pricingTableCardDescription',
-  'pricingTableCardBadgeTitleContainer',
-  'pricingTableCardAvatar',
-  'pricingTableCardBadgeContainer',
-  'pricingTableCardBadge',
+  'pricingTableCardBody',
+  'pricingTableCardStatusRow',
+  'pricingTableCardStatus',
   'pricingTableCardFeatures',
   'pricingTableCardFeaturesList',
   'pricingTableCardFeaturesListItem',
   'pricingTableCardFeaturesListItemContent',
   'pricingTableCardFeaturesListItemTitle',
-  'pricingTableCardFeaturesListItemDescription',
   'pricingTableCardAction',
+  'pricingTableCardActionButton',
   'pricingTableCardPeriodToggle',
   'pricingTableCardFeeContainer',
   'pricingTableCardFee',
   'pricingTableCardFeePeriod',
   'pricingTableCardFeePeriodNotice',
-  'pricingTableCardFeePeriodNoticeInner',
-  'pricingTableCardFeePeriodNoticeLabel',
 
   'pricingTableMatrix',
   'pricingTableMatrixTable',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 159392ee94d..292fa51a751 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -375,26 +375,24 @@ export type ElementsConfig = {
   pricingTable: WithOptions;
   pricingTableCard: WithOptions<string>;
   pricingTableCardHeader: WithOptions;
-  pricingTableCardBadgeTitleContainer: WithOptions;
-  pricingTableCardAvatar: WithOptions;
-  pricingTableCardBadgeContainer: WithOptions;
-  pricingTableCardBadge: WithOptions;
+  pricingTableCardTitleContainer: WithOptions;
   pricingTableCardTitle: WithOptions;
   pricingTableCardDescription: WithOptions;
+  pricingTableCardFeeContainer: WithOptions;
+  pricingTableCardFee: WithOptions;
+  pricingTableCardFeePeriod: WithOptions;
+  pricingTableCardPeriodToggle: WithOptions;
+  pricingTableCardFeePeriodNotice: WithOptions;
+  pricingTableCardBody: WithOptions;
   pricingTableCardFeatures: WithOptions;
   pricingTableCardFeaturesList: WithOptions<string>;
   pricingTableCardFeaturesListItem: WithOptions<string>;
   pricingTableCardFeaturesListItemContent: WithOptions;
   pricingTableCardFeaturesListItemTitle: WithOptions;
-  pricingTableCardFeaturesListItemDescription: WithOptions;
+  pricingTableCardStatusRow: WithOptions;
+  pricingTableCardStatus: WithOptions;
   pricingTableCardAction: WithOptions;
-  pricingTableCardPeriodToggle: WithOptions;
-  pricingTableCardFeeContainer: WithOptions;
-  pricingTableCardFee: WithOptions;
-  pricingTableCardFeePeriod: WithOptions;
-  pricingTableCardFeePeriodNotice: WithOptions;
-  pricingTableCardFeePeriodNoticeInner: WithOptions;
-  pricingTableCardFeePeriodNoticeLabel: WithOptions;
+  pricingTableCardActionButton: WithOptions;
 
   pricingTableMatrix: WithOptions;
   pricingTableMatrixTable: WithOptions;

From 8f508d280bc17530ec41b646f78626268c52783e Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 May 2025 18:29:52 +0300
Subject: [PATCH 26/28] chore(e2e): Fix e2e tests

---
 integration/tests/pricing-table.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index 9f825443bb3..365a0d44611 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -101,7 +101,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.pricingTable.clickManageSubscription();
     await u.po.page.getByRole('button', { name: 'Cancel subscription' }).click();
     await u.po.page.getByRole('alertdialog').getByRole('button', { name: 'Cancel subscription' }).click();
-    await expect(u.po.page.getByRole('button', { name: 'Resubscribe' }).first()).toBeVisible();
+    await expect(u.po.page.getByRole('button', { name: /resubscribe|re-subscribe/i }).first()).toBeVisible();
   });
 
   test.describe('in UserProfile', () => {

From 038225d2b22aa8ee74cbcf139d591ca2fa25fc4b Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 5 May 2025 11:36:38 -0400
Subject: [PATCH 27/28] use span

---
 packages/clerk-js/src/ui/elements/Switch.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx
index f7e979a5036..dacab613f06 100644
--- a/packages/clerk-js/src/ui/elements/Switch.tsx
+++ b/packages/clerk-js/src/ui/elements/Switch.tsx
@@ -91,6 +91,7 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
         </Flex>
         {label && (
           <Text
+            as='span'
             variant='caption'
             colorScheme='secondary'
             localizationKey={label}

From de54484064ba16e02bac22ff0070fe576c3b14c8 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 5 May 2025 11:38:18 -0400
Subject: [PATCH 28/28] update selector

---
 packages/clerk-js/src/ui/elements/Switch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/elements/Switch.tsx b/packages/clerk-js/src/ui/elements/Switch.tsx
index dacab613f06..a9fb9ffb50f 100644
--- a/packages/clerk-js/src/ui/elements/Switch.tsx
+++ b/packages/clerk-js/src/ui/elements/Switch.tsx
@@ -36,7 +36,7 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
         as='label'
         sx={t => ({
           width: 'fit-content',
-          '&:has(input:focus-visible) > span': {
+          '&:has(input:focus-visible) > input + span': {
             ...common.focusRingStyles(t),
           },
         })}