Update Billing Provider and Refactor Pricing UI

Updated the billing provider in the environment configuration to use 'stripe' instead of 'lemon-squeezy'. Multiple changes were also made to UI components related to pricing, including better data handling for different billing tiers and enhanced visualization of selected options. These revisions aim to both enhance the user experience and ensure compatibility with the new billing provider.

packages/billing/gateway/src/components/pricing-table.tsx

@@ -386,13 +386,16 @@ function PlanIntervalSwitcher(
       {props.intervals.map((plan, index) => {
         const selected = plan === props.interval;
 
-        const className = cn('focus:!ring-0 !outline-none', {
-          'rounded-r-none border-r-transparent': index === 0,
-          'rounded-l-none': index === props.intervals.length - 1,
-          ['hover:bg-muted']: !selected,
-          ['font-semibold cursor-default bg-muted hover:bg-muted hover:text-initial']:
-            selected,
-        });
+        const className = cn(
+          'focus:!ring-0 !outline-none animate-in transition-all fade-in',
+          {
+            'rounded-r-none border-r-transparent': index === 0,
+            'rounded-l-none': index === props.intervals.length - 1,
+            ['hover:text-current hover:bg-muted']: !selected,
+            ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
+              selected,
+          },
+        );
 
         return (
           <Button
@@ -403,7 +406,7 @@ function PlanIntervalSwitcher(
           >
             <span className={'flex items-center space-x-1'}>
               <If condition={selected}>
-                <CheckCircle className={'animate-in fade-in h-4'} />
+                <CheckCircle className={'animate-in fade-in zoom-in-90 h-4'} />
               </If>
 
               <span className={'capitalize'}>