From b9ca4a6a79c6c5aa9551a296fc87373e385420d9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 10 Oct 2022 15:02:54 +0200
Subject: [PATCH 1/8] feat: wizard exit confirmation modal

---
 src/lib/layout/wizard.svelte                  | 19 +++++++++++++-
 src/lib/layout/wizardExitModal.svelte         | 26 +++++++++++++++++++
 .../[collection]/createDocument.svelte        |  2 +-
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/layout/wizardExitModal.svelte

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 81ad56cfa..ede92f49b 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -13,14 +13,17 @@
     import { Button, Form } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
     import { createEventDispatcher, type SvelteComponent } from 'svelte';
+    import WizardExitModal from './wizardExitModal.svelte';
 
     export let title: string;
     export let steps: WizardStepsType;
+    export let confirmExit = false;
     export let finalAction = 'Create';
 
     const dispatch = createEventDispatcher();
 
     let currentStep = 1;
+    let showExitModal = false;
 
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
@@ -29,6 +32,14 @@
         }
     }
 
+    function handleExit() {
+        if (confirmExit) {
+            showExitModal = true;
+        } else {
+            wizard.hide();
+        }
+    }
+
     function submit() {
         if (isLastStep) {
             dispatch('finish');
@@ -52,7 +63,7 @@
         <div class="body-text-1">{title}</div>
 
         <slot name="header" />
-        <button class="x-button" aria-label="close wizard" on:click={wizard.hide}>
+        <button class="x-button" aria-label="close wizard" on:click={handleExit}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     </header>
@@ -91,3 +102,9 @@
         </Form>
     </div>
 </section>
+
+{#if showExitModal}
+    <WizardExitModal bind:show={showExitModal} on:exit={() => wizard.hide()}>
+        <slot name="exit">this process</slot>
+    </WizardExitModal>
+{/if}
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
new file mode 100644
index 000000000..d9ab70bd7
--- /dev/null
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+
+    export let show = false;
+    const dispatch = createEventDispatcher();
+
+    function handleSubmit() {
+        dispatch('exit');
+    }
+</script>
+
+<Form noMargin on:submit={handleSubmit}>
+    <Modal bind:show warning>
+        <svelte:fragment slot="header">Exit Process</svelte:fragment>
+        <p>
+            Are you sure you want to exit from <slot />? All data will be deleted. This action is
+            irreversible.
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button secondary submit>Exit</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
index 310158379..567896599 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
@@ -76,4 +76,4 @@
     });
 </script>
 
-<Wizard title="Create document" steps={stepsComponents} on:finish={create} />
+<Wizard confirmExit title="Create document" steps={stepsComponents} on:finish={create} />

From b5b70d2918dc016e8b2a948f02341da72bd4f255 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 10 Oct 2022 15:07:04 +0200
Subject: [PATCH 2/8] fix: remove test argument

---
 .../[database]/collection/[collection]/createDocument.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
index 567896599..310158379 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
@@ -76,4 +76,4 @@
     });
 </script>
 
-<Wizard confirmExit title="Create document" steps={stepsComponents} on:finish={create} />
+<Wizard title="Create document" steps={stepsComponents} on:finish={create} />

From f78c5dd64f2c0dc4d0f7dc78a04b18b67c3db1b4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 10 Oct 2022 17:25:56 +0200
Subject: [PATCH 3/8] feat: optional steps are skippable now

---
 src/lib/components/step.svelte                        |  2 +-
 src/lib/components/steps.svelte                       |  8 ++++++++
 src/lib/layout/wizard.svelte                          | 11 +++++++++--
 .../collection/[collection]/createDocument.svelte     |  3 ++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 95c010536..255d7ca84 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -9,7 +9,7 @@
 <li
     class:steps-item={!isSub}
     class:steps-sub-item={isSub}
-    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
+    aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}>
     {#if isSub}
         <span class="text">{step.text}</span>
     {:else}
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index 5d0d82c24..905e663ab 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -3,18 +3,26 @@
 
     export let steps: {
         text: string;
+        optional: boolean;
         substeps?: {
             text: string;
         }[];
     }[];
     export let currentStep = 1;
     export let currentSub = 1;
+
+    $: firstOptional = steps.findIndex((step) => step.optional);
+
+    //TODO: remove inline styling
 </script>
 
 <ol class="steps">
     {#if steps}
         {#each steps as step, index}
             {@const stepNumber = index + 1}
+            {#if firstOptional === index}
+                <span style="margin-block: 1.5rem;">OPTIONAL</span>
+            {/if}
             <Step
                 bind:currentSub
                 current={currentStep === stepNumber}
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index ede92f49b..fd9bf80e0 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -4,6 +4,7 @@
         {
             label: string;
             component: typeof SvelteComponent;
+            optional?: boolean;
         }
     >;
 </script>
@@ -70,8 +71,10 @@
 
     <aside class="wizard-side">
         <Steps
-            steps={sortedSteps.map(([, { label }]) => ({
-                text: label
+            on:step={submit}
+            steps={sortedSteps.map(([, { label, optional }]) => ({
+                text: label,
+                optional
             }))}
             {currentStep} />
     </aside>
@@ -87,6 +90,10 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
+                    {#if sortedSteps[currentStep - 1][1].optional}
+                        <Button text on:click={() => (isLastStep = true)} submit
+                            >Skip optional steps</Button>
+                    {/if}
                     {#if currentStep === 1}
                         <Button secondary on:click={wizard.hide}>Cancel</Button>
                         <Button submit>Next</Button>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
index 310158379..0e0172813 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
@@ -72,7 +72,8 @@
     });
     stepsComponents.set(2, {
         label: 'Set permissions',
-        component: Step2
+        component: Step2,
+        optional: true
     });
 </script>
 

From 7964de4a3e802a43c71eecb2429cdf4fe67e8518 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Oct 2022 12:47:53 +0200
Subject: [PATCH 4/8] feat: wizard doesn't close when press esc with modal open

---
 src/lib/layout/wizard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index fd9bf80e0..0f7bdf3ca 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -27,7 +27,7 @@
     let showExitModal = false;
 
     function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && !showExitModal) {
             event.preventDefault();
             wizard.hide();
         }

From e096bb7b97f3a47b5bd9603fce59834630207766 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Oct 2022 17:21:35 +0200
Subject: [PATCH 5/8] feat: update optional heading in steps

---
 src/lib/components/steps.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index 905e663ab..e5c456244 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -21,7 +21,7 @@
         {#each steps as step, index}
             {@const stepNumber = index + 1}
             {#if firstOptional === index}
-                <span style="margin-block: 1.5rem;">OPTIONAL</span>
+                <h3 class="eyebrow-heading-3">OPTIONAL</h3>
             {/if}
             <Step
                 bind:currentSub

From a027e7f73f298f3d0657d8e75774b99d605ba4d7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Oct 2022 17:28:12 +0200
Subject: [PATCH 6/8] feat: completed steps are clickable

---
 src/lib/components/step.svelte  | 4 ++++
 src/lib/components/steps.svelte | 6 +++++-
 src/lib/layout/wizard.svelte    | 9 ++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 255d7ca84..44804f323 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -4,11 +4,15 @@
     export let currentSub = 0;
     export let isSub = false;
     export let step: { text: string; substeps?: { text: string }[] };
+
+    //TODO: remove inline styling
 </script>
 
 <li
+    on:click|preventDefault
     class:steps-item={!isSub}
     class:steps-sub-item={isSub}
+    style={`cursor: ${completed ? 'pointer' : 'default'};`}
     aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}>
     {#if isSub}
         <span class="text">{step.text}</span>
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index e5c456244..3658fa45c 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte';
     import Step from './step.svelte';
 
     export let steps: {
@@ -11,6 +12,8 @@
     export let currentStep = 1;
     export let currentSub = 1;
 
+    const dispatch = createEventDispatcher();
+
     $: firstOptional = steps.findIndex((step) => step.optional);
 
     //TODO: remove inline styling
@@ -21,9 +24,10 @@
         {#each steps as step, index}
             {@const stepNumber = index + 1}
             {#if firstOptional === index}
-                <h3 class="eyebrow-heading-3">OPTIONAL</h3>
+                <h3 class="eyebrow-heading-3" style="margin-block: 1.5rem;">OPTIONAL</h3>
             {/if}
             <Step
+                on:click={() => dispatch('step', stepNumber)}
                 bind:currentSub
                 current={currentStep === stepNumber}
                 completed={stepNumber < currentStep}
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 0f7bdf3ca..2b002f5ba 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -41,6 +41,13 @@
         }
     }
 
+    function handleStepClick(e: CustomEvent<number>) {
+        const step = e.detail;
+        if (step < currentStep) {
+            currentStep = step;
+        }
+    }
+
     function submit() {
         if (isLastStep) {
             dispatch('finish');
@@ -71,7 +78,7 @@
 
     <aside class="wizard-side">
         <Steps
-            on:step={submit}
+            on:step={handleStepClick}
             steps={sortedSteps.map(([, { label, optional }]) => ({
                 text: label,
                 optional

From 4fac58d127d4048fa6139296813b605cda124710 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Oct 2022 17:34:05 +0200
Subject: [PATCH 7/8] chore: bump to 0.0.0-61

---
 package-lock.json | 56 +++++++++++++++++++++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3a2289e17..0e9b8d8d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-58",
-                "@aw-labs/ui": "0.0.0-58",
+                "@aw-labs/icons": "0.0.0-61",
+                "@aw-labs/ui": "0.0.0-61",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -79,16 +79,18 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz",
-            "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA=="
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
+            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz",
-            "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==",
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
+            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
             "dependencies": {
-                "@aw-labs/icons": "*"
+                "@aw-labs/icons": "*",
+                "normalize.css": "^8.0.1",
+                "the-new-css-reset": "^1.7.3"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -5888,6 +5890,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
         "node_modules/npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -7148,6 +7155,11 @@
             "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
             "dev": true
         },
+        "node_modules/the-new-css-reset": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz",
+            "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA=="
+        },
         "node_modules/tiny-glob": {
             "version": "0.2.9",
             "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -7776,16 +7788,18 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz",
-            "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA=="
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
+            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz",
-            "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==",
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
+            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
             "requires": {
-                "@aw-labs/icons": "*"
+                "@aw-labs/icons": "*",
+                "normalize.css": "^8.0.1",
+                "the-new-css-reset": "^1.7.3"
             }
         },
         "@babel/code-frame": {
@@ -12161,6 +12175,11 @@
             "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
             "dev": true
         },
+        "normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
         "npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -13056,6 +13075,11 @@
             "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
             "dev": true
         },
+        "the-new-css-reset": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz",
+            "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA=="
+        },
         "tiny-glob": {
             "version": "0.2.9",
             "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
diff --git a/package.json b/package.json
index 7ceaa1092..5d2bde148 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-58",
-        "@aw-labs/ui": "0.0.0-58",
+        "@aw-labs/icons": "0.0.0-61",
+        "@aw-labs/ui": "0.0.0-61",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",

From f32b1b09efec10137269e1c98020f7e3e2d96824 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 12 Oct 2022 17:36:18 +0200
Subject: [PATCH 8/8] fix: layout with new css

---
 src/lib/components/step.svelte  | 40 +++++++++++++++++----------------
 src/lib/components/steps.svelte |  6 ++---
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 44804f323..7d2c5dffd 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -17,26 +17,28 @@
     {#if isSub}
         <span class="text">{step.text}</span>
     {:else}
-        {#if completed}
-            <div class="bullet is-done">
-                <span class="icon-check" aria-hidden="true" />
-            </div>
-        {:else}
-            <div class="bullet" class:is-current={current} />
-        {/if}
-        <div class="step-item-content">
-            <span class="text">{step.text}</span>
-            {#if step?.substeps}
-                <ul class="steps-sub">
-                    {#each step.substeps as subStep, index}
-                        <svelte:self
-                            isSub={true}
-                            step={subStep}
-                            current={currentSub === index}
-                            completed={index < currentSub} />
-                    {/each}
-                </ul>
+        <div class="steps-item-wrapper">
+            {#if completed}
+                <div class="bullet is-done">
+                    <span class="icon-check" aria-hidden="true" />
+                </div>
+            {:else}
+                <div class="bullet" class:is-current={current} />
             {/if}
+            <div class="step-item-content">
+                <span class="text">{step.text}</span>
+                {#if step?.substeps}
+                    <ul class="steps-sub">
+                        {#each step.substeps as subStep, index}
+                            <svelte:self
+                                isSub={true}
+                                step={subStep}
+                                current={currentSub === index}
+                                completed={index < currentSub} />
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
         </div>
     {/if}
 </li>
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index 3658fa45c..7837c3be9 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -15,8 +15,6 @@
     const dispatch = createEventDispatcher();
 
     $: firstOptional = steps.findIndex((step) => step.optional);
-
-    //TODO: remove inline styling
 </script>
 
 <ol class="steps">
@@ -24,7 +22,9 @@
         {#each steps as step, index}
             {@const stepNumber = index + 1}
             {#if firstOptional === index}
-                <h3 class="eyebrow-heading-3" style="margin-block: 1.5rem;">OPTIONAL</h3>
+                <li class="steps-item">
+                    <h3 class="eyebrow-heading-3">OPTIONAL</h3>
+                </li>
             {/if}
             <Step
                 on:click={() => dispatch('step', stepNumber)}