updated to use Layout

Author: lohanidamodar

src/lib/components/billing/paymentModal.svelte

@@ -102,10 +102,8 @@
     onSubmit={handleSubmit}>
     <slot />
     {#if showState}
-        <div class="state-element">
-            <!-- input select for state picker -->
-            <StatePicker card={paymentMethod} bind:state />
-        </div>
+        <!-- input select for state picker -->
+        <StatePicker card={paymentMethod} bind:state />
     {:else}
         <InputText
             id="name"

src/lib/components/billing/statePicker.svelte

@@ -9,7 +9,7 @@
     export let card: PaymentMethod | null = null;
 </script>
 
-<div class="state-picker-container">
+<Layout.Stack direction="column" gap="s">
     {#if card}
         <Card.Base variant="secondary" padding="s">
             <Layout.Stack direction="row" alignItems="center" gap="s">
@@ -32,6 +32,7 @@
 
     <InputSelect
         bind:value={state}
+        required
         label="State"
         placeholder="Select a state"
         id="state-picker"
@@ -40,12 +41,4 @@
             value: state.abbreviation,
             id: state.abbreviation.toLowerCase()
         }))} />
-</div>
-
-<style>
-    .state-picker-container {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-</style>
+</Layout.Stack>