fix: avoid losing focus on shipping method selection

Author: malessani

components/composite/StepShipping/index.tsx

@@ -240,7 +240,7 @@ export const StepShipping: React.FC<Props> = () => {
                                   <ShippingSummary data-testid="shipping-methods-container">
                                     <StyledShippingMethodRadioButton
                                       data-testid="shipping-method-button"
-                                      className="form-radio mt-0.5 md:mt-0"
+                                      className="form-radio mt-0.5 md:mt-0 peer"
                                       onChange={(params) =>
                                         handleChange(params)
                                       }
@@ -253,7 +253,7 @@ export const StepShipping: React.FC<Props> = () => {
                                           props?.deliveryLeadTimeForShipment
                                         return (
                                           <label
-                                            className="flex flex-col p-3 border rounded cursor-pointer hover:border-primary transition duration-200 ease-in"
+                                            className="flex flex-col p-3 border rounded cursor-pointer hover:border-primary transition duration-200 ease-in peer-checked:border-2 peer-checked:border-primary peer-checked:shadow-md peer-checked:bg-gray-50"
                                             htmlFor={props.htmlFor}
                                           >
                                             <ShippingLineItemTitle>

components/composite/StepShipping/styled.tsx

@@ -15,9 +15,6 @@ export const ShippingTitle = styled.h4`
 `
 export const ShippingSummary = styled.div`
   ${tw`contents`}
-  input:checked + label {
-    ${tw`border-2 border-primary shadow-md bg-gray-50`}
-  }
 `
 export const ShippingSummaryItem = styled.div`
   ${tw`flex flex-1 font-bold ml-2 flex-col md:flex-row`}

package.json

@@ -72,7 +72,7 @@
     "commercelayer"
   ],
   "dependencies": {
-    "@commercelayer/react-components": "^4.6.0",
+    "@commercelayer/react-components": "4.7.1-beta.0",
     "@commercelayer/sdk": "^5.15.0",
     "@faker-js/faker": "^8.1.0",
     "@headlessui/react": "^1.7.17",