Upgrade chakra ui v3

Author: alexvuong

packages/extension-chakra-storefront/src/components/action-card/index.jsx

@@ -39,7 +39,7 @@ const ActionCard = ({children, onEdit, onRemove, editBtnRef, ...props}) => {
             {...props}
         >
             {showLoading && <LoadingSpinner />}
-            <Stack spacing={3}>
+            <Stack gap={3}>
                 <Box>{children}</Box>
                 <Stack direction="row" spacing={4}>
                     {onEdit && (

packages/extension-chakra-storefront/src/components/error/index.jsx

@@ -89,7 +89,7 @@ const Error = (props) => {
                                 </Box>
                             )}
                         </Box>
-                        <Stack direction={['column', 'row']} spacing={4} width={['100%', 'auto']}>
+                        <Stack direction={['column', 'row']} gap={4} width={['100%', 'auto']}>
                             <Button
                                 variant="outline"
                                 bg="white"

packages/extension-chakra-storefront/src/components/forms/address-fields.jsx

@@ -31,7 +31,7 @@ const AddressFields = ({form, prefix = '', formTitleAriaLabel = defaultFormTitle
 
     return (
         <Stack
-            spacing={5}
+            gap={5}
             aria-label={intl.formatMessage(formTitleAriaLabel)}
             tabIndex="0"
             ref={addressFormRef}

packages/extension-chakra-storefront/src/components/forms/credit-card-fields.jsx

@@ -60,7 +60,7 @@ const CreditCardFields = ({form, prefix = ''}) => {
 
     return (
         <Box>
-            <Stack spacing={5}>
+            <Stack gap={5}>
                 <Field
                     {...fields.number}
                     formLabel={

packages/extension-chakra-storefront/src/components/forms/form-action-buttons.jsx

@@ -22,7 +22,7 @@ const FormActionButtons = ({
     onCancel = () => {}
 }) => {
     return (
-        <Stack direction={{base: 'column', lg: 'row-reverse'}} spacing={4}>
+        <Stack direction={{base: 'column', lg: 'row-reverse'}} gap={4}>
             <Button type="submit" minWidth={28} {...saveButtonProps}>
                 {saveButtonLabel ? (
                     <FormattedMessage {...saveButtonLabel} />

packages/extension-chakra-storefront/src/components/forms/login-fields.jsx

@@ -13,7 +13,7 @@ import Field from '../../components/field'
 const LoginFields = ({form, prefix = ''}) => {
     const fields = useLoginFields({form, prefix})
     return (
-        <Stack spacing={5}>
+        <Stack gap={5}>
             <Field {...fields.email} />
             <Field {...fields.password} />
         </Stack>

packages/extension-chakra-storefront/src/components/forms/password-requirements.jsx

@@ -51,7 +51,7 @@ const PasswordRequirements = ({value}) => {
     const pwValidations = validatePassword(value)
 
     return (
-        <Stack spacing={2}>
+        <Stack gap={2}>
             <PasswordRequirement isValid={pwValidations.hasMinChars}>
                 <FormattedMessage
                     id="password_requirements.error.eight_letter_minimum"

packages/extension-chakra-storefront/src/components/forms/post-checkout-registration-fields.jsx

@@ -17,7 +17,7 @@ const PostCheckoutRegistrationFields = ({form, prefix = ''}) => {
 
     return (
         <Box>
-            <Stack spacing={5}>
+            <Stack gap={5}>
                 <Field {...fields.email} />
 
                 <Stack spacing={3} paddingBottom={2}>

packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx

@@ -14,7 +14,7 @@ const ProfileFields = ({form, prefix = ''}) => {
     const fields = useProfileFields({form, prefix})
 
     return (
-        <Stack spacing={5}>
+        <Stack gap={5}>
             <SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
                 <Field {...fields.firstName} />
                 <Field {...fields.lastName} />

packages/extension-chakra-storefront/src/components/forms/registration-fields.jsx

@@ -16,12 +16,12 @@ const RegistrationFields = ({form, prefix = ''}) => {
     const password = form.watch('password')
 
     return (
-        <Stack spacing={5}>
+        <Stack gap={5}>
             <Field {...fields.firstName} />
             <Field {...fields.lastName} />
             <Field {...fields.email} />
 
-            <Stack spacing={3} pb={2}>
+            <Stack gap={3} pb={2}>
                 <Field {...fields.password} />
                 <PasswordRequirements value={password} />
             </Stack>