Merge branch 'develop' into feature/tracking

components/TempDesignSystem/Alert/index.tsx

@@ -51,7 +51,7 @@ export default function Alert({
                   <span> {phoneContact.displayText} </span>
                   <Link
                     color="burgundy"
-                    href={`tel:${phoneContact.phoneNumber}`}
+                    href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                   >
                     {phoneContact.phoneNumber}
                   </Link>

components/TempDesignSystem/Form/Phone/index.tsx

@@ -37,7 +37,7 @@ export default function Phone({
   },
 }: PhoneProps) {
   const { formatMessage } = useIntl()
-  const { control, setValue } = useFormContext()
+  const { control, setValue, trigger } = useFormContext()
   const phone = useWatch({ name })
 
   const { field, fieldState, formState } = useController({
@@ -59,6 +59,7 @@ export default function Phone({
       value: phone,
       onChange: (value) => {
         setValue(name, value.phone)
+        trigger(name)
       },
     })
 

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -39,7 +39,7 @@
   width: 100%;
   height: 100vh;
   background-color: var(--Base-Background-Primary-Normal);
-  z-index: 100;
+  z-index: var(--sidepeek-z-index);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
 }
 

components/TempDesignSystem/Text/Body/body.module.css

@@ -80,6 +80,10 @@
   color: var(--UI-Text-High-contrast);
 }
 
+.baseTextMediumContrast {
+  color: var(--Base-Text-Medium-contrast);
+}
+
 .white {
   color: var(--UI-Opacity-White-100);
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -12,6 +12,7 @@ const config = {
       pale: styles.pale,
       red: styles.red,
       textMediumContrast: styles.textMediumContrast,
+      baseTextMediumContrast: styles.baseTextMediumContrast,
       textHighContrast: styles.textHighContrast,
       white: styles.white,
       peach50: styles.peach50,

components/TempDesignSystem/Toasts/index.tsx

@@ -49,7 +49,7 @@ export function Toast({ message, onClose, variant }: ToastsProps) {
 }
 
 export const toast = {
-  success: (message: string, options?: ExternalToast) =>
+  success: (message: React.ReactNode, options?: ExternalToast) =>
     sonnerToast.custom(
       (t) => (
         <Toast
@@ -60,7 +60,7 @@ export const toast = {
       ),
       options
     ),
-  info: (message: string, options?: ExternalToast) =>
+  info: (message: React.ReactNode, options?: ExternalToast) =>
     sonnerToast.custom(
       (t) => (
         <Toast
@@ -71,7 +71,7 @@ export const toast = {
       ),
       options
     ),
-  error: (message: string, options?: ExternalToast) =>
+  error: (message: React.ReactNode, options?: ExternalToast) =>
     sonnerToast.custom(
       (t) => (
         <Toast
@@ -82,7 +82,7 @@ export const toast = {
       ),
       options
     ),
-  warning: (message: string, options?: ExternalToast) =>
+  warning: (message: React.ReactNode, options?: ExternalToast) =>
     sonnerToast.custom(
       (t) => (
         <Toast

components/TempDesignSystem/Toasts/toasts.ts

@@ -5,6 +5,6 @@ import type { VariantProps } from "class-variance-authority"
 export interface ToastsProps
   extends Omit<React.AnchorHTMLAttributes<HTMLDivElement>, "color">,
     VariantProps<typeof toastVariants> {
-  message: string
+  message: React.ReactNode
   onClose: () => void
 }