feat(SW-350): Update design for booking widget

components/Forms/BookingWidget/index.tsx

@@ -7,6 +7,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import FormContent from "./FormContent"
+import { bookingWidgetVariants } from "./variants"
 
 import styles from "./form.module.css"
 
@@ -15,10 +16,14 @@ import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidg
 
 const formId = "booking-widget"
 
-export default function Form({ locations }: BookingWidgetFormProps) {
+export default function Form({ locations, type }: BookingWidgetFormProps) {
   const intl = useIntl()
   const router = useRouter()
 
+  const classNames = bookingWidgetVariants({
+    type,
+  })
+
   const { formState, handleSubmit, register } =
     useFormContext<BookingWidgetSchema>()
 
@@ -31,7 +36,7 @@ export default function Form({ locations }: BookingWidgetFormProps) {
   }
 
   return (
-    <section className={styles.section}>
+    <section className={classNames}>
       <form
         onSubmit={handleSubmit(onSubmit)}
         className={styles.form}
@@ -45,7 +50,6 @@ export default function Form({ locations }: BookingWidgetFormProps) {
         disabled={!formState.isValid}
         form={formId}
         intent="primary"
-        size="small"
         theme="base"
         type="submit"
       >