fix: radio and checkbox alignment

Author: ivan-dalmet

app/components/form/field-checkbox/docs.stories.tsx

@@ -139,7 +139,7 @@ export const CustomCheckbox = () => {
                 <button
                   type="button"
                   {...props}
-                  className="flex w-full justify-between outline-none"
+                  className="flex w-full items-center justify-between outline-none"
                 >
                   <span className="font-medium">I love bears</span>
                   <span

app/components/form/field-radio-group/docs.stories.tsx

@@ -203,7 +203,7 @@ export const WithCustomRadio = () => {
                       <button
                         type="button"
                         {...props}
-                        className="flex w-full justify-between outline-none"
+                        className="flex w-full items-center justify-between outline-none"
                       >
                         <span className="font-medium">{label}</span>
                         <span

app/components/ui/checkbox.stories.tsx

@@ -47,7 +47,7 @@ export const CustomCheckbox = () => {
           <button
             type="button"
             {...props}
-            className="flex w-full justify-between outline-none"
+            className="flex w-full items-center justify-between outline-none"
           >
             <span className="font-medium">I love bears</span>
             <span

app/components/ui/checkbox.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
-const labelVariants = cva('flex items-center gap-2.5 text-primary', {
+const labelVariants = cva('flex items-start gap-2.5 text-primary', {
   variants: {
     size: {
       default: 'text-sm',

app/components/ui/radio-group.stories.tsx

@@ -132,7 +132,7 @@ export const WithCustomRadio = () => {
                 <button
                   type="button"
                   {...props}
-                  className="flex w-full justify-between outline-none"
+                  className="flex w-full items-center justify-between outline-none"
                 >
                   <span className="font-medium">{label}</span>
                   <span

app/components/ui/radio-group.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
-const labelVariants = cva('flex items-center gap-2.5 text-primary', {
+const labelVariants = cva('flex items-start gap-2.5 text-primary', {
   variants: {
     size: {
       default: 'text-sm',