@stigg/react-sdk 4.4.0 → 4.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0",
+  "version": "4.4.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import { PricingType, BillingAddress, ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
@@ -94,9 +94,10 @@ export function CheckoutContainer({
     </>
   );
 
-  const stripeElementsMode: StripeClientSecret | StripeManualMode = setupIntentClientSecret
-    ? { clientSecret: setupIntentClientSecret }
-    : { mode: 'setup', currency: 'usd' };
+  const stripeElementsMode: StripeClientSecret | StripeManualMode = useMemo(
+    () => (setupIntentClientSecret ? { clientSecret: setupIntentClientSecret } : { mode: 'setup', currency: 'usd' }),
+    [setupIntentClientSecret],
+  );
 
   return (
     <Elements

package/src/components/checkout/components/InputField.tsx

@@ -19,4 +19,7 @@ export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => (
     color: theme.stigg.palette.text.primary,
     ...theme.stigg.typography.body,
   },
+  '& .Mui-error': {
+    fontFamily: theme.stigg.typography.fontFamily,
+  },
 }));

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -25,11 +25,10 @@ export const StyledStepButton = styled(Button)(() => ({
 
 export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
   $disabled?: boolean;
-  $shouldStroke?: boolean;
   $shouldFill?: boolean;
-}>(({ theme, $disabled, $shouldStroke = true, $shouldFill }) => ({
+}>(({ theme, $disabled, $shouldFill }) => ({
   circle: {
-    stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
+    stroke: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
     fill: $shouldFill ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
   },
 }));

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -37,7 +37,6 @@ export const CheckoutProgressBar = () => {
                         <StyledIcon
                           icon={isCompleted ? checkedIcon : 'OutlinedCircle'}
                           $disabled={isDisabled}
-                          $shouldStroke={(isCompleted && !isDisabled) || isDisabled}
                           $shouldFill={isCompleted}
                         />
                       }