💄(react) disable default Modal text align center

This default behavior was causing lots of troubles when using modals.
For instance the Select value were centered, it was also the case for
most of consumer's component inside modals, forcing the users to
set text-align:left on their side, resulting in additionnal work.
Now we use another approach by using a specific div for the content
we want centered.

packages/react/src/components/Modal/ConfirmationModal.tsx

@@ -33,7 +33,9 @@ export const ConfirmationModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.confirmation.children")}
+      <div className="c__modal__content__text">
+        {children ?? t("components.modals.helpers.confirmation.children")}
+      </div>
     </Modal>
   );
 };

packages/react/src/components/Modal/DeleteConfirmationModal.tsx

@@ -38,7 +38,10 @@ export const DeleteConfirmationModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.delete_confirmation.children")}
+      <div className="c__modal__content__text">
+        {children ??
+          t("components.modals.helpers.delete_confirmation.children")}
+      </div>
     </Modal>
   );
 };

packages/react/src/components/Modal/MessageModal.tsx

@@ -41,7 +41,9 @@ export const MessageModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.disclaimer.children")}
+      <div className="c__modal__content__text">
+        {children ?? t("components.modals.helpers.disclaimer.children")}
+      </div>
     </Modal>
   );
 };

packages/react/src/components/Modal/index.scss

@@ -72,7 +72,6 @@
   }
 
   &__content {
-    text-align: center;
     font-size: var(--c--components--modal--content-font-size);
     font-weight: var(--c--components--modal--content-font-weight);
     color: var(--c--components--modal--content-color);
@@ -80,6 +79,10 @@
     &:focus-visible {
       outline: none;
     }
+
+    &__text {
+      text-align: center;
+    }
   }
 
   &__close {