feat: guest information form enter details

components/TempDesignSystem/Form/Country/index.tsx

@@ -28,8 +28,10 @@ import type {
 } from "./country"
 
 export default function CountrySelect({
+  className = "",
   label,
   name = "country",
+  readOnly = false,
   registerOptions = {},
 }: CountryProps) {
   const { formatMessage } = useIntl()
@@ -54,12 +56,13 @@ export default function CountrySelect({
   const selectCountryLabel = formatMessage({ id: "Select a country" })
 
   return (
-    <div className={styles.container} ref={setRef}>
+    <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
         aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
-        isRequired={!!registerOptions?.required}
         isInvalid={fieldState.invalid}
+        isReadOnly={readOnly}
+        isRequired={!!registerOptions?.required}
         name={field.name}
         onBlur={field.onBlur}
         onSelectionChange={handleChange}