From e2f9d88cd740b6d6376f0276bacc62aa6ced5dae Mon Sep 17 00:00:00 2001
From: Claire Olmstead <olmsteadclaire@gmail.com>
Date: Tue, 26 Nov 2024 10:00:01 -0800
Subject: [PATCH] respond to comments

---
 package-lock.json                | 17 -----------------
 package.json                     |  1 -
 src/lib/atoms/FormElement.svelte |  7 +++++--
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index da8289b..bd92913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@melt-ui/svelte": "^0.86.2",
         "@storybook/addons": "^7.6.17",
         "bits-ui": "^0.21.16",
         "clsx": "^2.1.1",
@@ -932,22 +931,6 @@
         "react": ">=16"
       }
     },
-    "node_modules/@melt-ui/svelte": {
-      "version": "0.86.2",
-      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.86.2.tgz",
-      "integrity": "sha512-wRVN603oIt1aXvx2QRmKqVDJgTScSvr/WJLLokkD8c4QzHgn6pfpPtUKmhV6Dvkk+OY89OG/1Irkd6ouA50Ztw==",
-      "dependencies": {
-        "@floating-ui/core": "^1.3.1",
-        "@floating-ui/dom": "^1.4.5",
-        "@internationalized/date": "^3.5.0",
-        "dequal": "^2.0.3",
-        "focus-trap": "^7.5.2",
-        "nanoid": "^5.0.4"
-      },
-      "peerDependencies": {
-        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.118"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index ffda947..ca72226 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,6 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "@melt-ui/svelte": "^0.86.2",
     "@storybook/addons": "^7.6.17",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
diff --git a/src/lib/atoms/FormElement.svelte b/src/lib/atoms/FormElement.svelte
index 07729c5..133ce00 100644
--- a/src/lib/atoms/FormElement.svelte
+++ b/src/lib/atoms/FormElement.svelte
@@ -5,10 +5,13 @@
   export let isRequired = false;
   export let description = '';
   export let error: string | undefined;
+
+  const labelNoSpaces = label.split(' ').join('');
+  const id = `form-element-${labelNoSpaces}`;
 </script>
 
 <div class="flex flex-col gap-f4">
-  <label class="form-item-label" for="form-element">
+  <label class="form-item-label" for={id}>
     {label}
     {#if isRequired}
       <span class="text-error">*</span>
@@ -19,7 +22,7 @@
     <span class="form-item-description">{description}</span>
   {/if}
 
-  <div class="flex items-center gap-f12" id="form-element">
+  <div class="flex items-center gap-f12" {id}>
     <slot />
 
     {#if error}