iotaledger · cvarley100 · Mar 22, 2021 · Mar 22, 2021 · Mar 22, 2021 · Mar 22, 2021
diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
@@ -106,9 +106,6 @@
             :global(::-webkit-scrollbar-thumb) {
                 @apply bg-gray-700;
             }
-            :global(::-webkit-scrollbar-track) {
-                @apply bg-gray-900;
-            }
         }
     }
     ::-webkit-scrollbar {
@@ -119,8 +116,7 @@
         border-radius: 10px;
     }
     ::-webkit-scrollbar-track {
-        @apply bg-gray-100;
-        border-radius: 10px;
+        @apply bg-transparent;
     }
 </style>
 

diff --git a/packages/shared/components/Profile.svelte b/packages/shared/components/Profile.svelte
@@ -32,10 +32,10 @@
             {#if slots}
                 <slot />
             {:else}
-                <Text type="h2" classes="text-white">{getInitials()}</Text>
+                <Text type="h3" classes="text-white">{getInitials()}</Text>
             {/if}
         </div>
-        <Text type="h4" classes="mt-5">{name}</Text>
+        <Text type="h5" classes="mt-5">{name}</Text>
         {#if isDeveloper}
             <div class="bg-gray-500 dark:bg-gray-700 dark:bg-opacity-20 rounded-full px-2 py-1 mt-4">
                 <Text type="p" smaller classes="text-white">{locale('general.dev').toUpperCase()}</Text>

diff --git a/packages/shared/components/SecurityTile.svelte b/packages/shared/components/SecurityTile.svelte
@@ -1,20 +1,39 @@
 <script lang="typescript">
-    import { Icon, Text } from 'shared/components'
+    import { Icon, Text, Toggle } from 'shared/components'
 
     export let icon = 'shield'
     export let title = ''
     export let message = ''
     export let color = 'blue'
     export let classes = ''
+    export let toggle = false
+    export let toggleActive = undefined
+    export let warning = false
     export let onClick = () => {}
 </script>
 
+<style type="text/scss">
+    button:not(.toggle) {
+        @apply h-0;
+        min-height: 139px;
+    }
+</style>
+
 <button
     on:click={() => onClick()}
-    class="flex flex-col flex-wrap text-left rounded-xl px-3 py-3 bg-{color}-50 dark:bg-gray-900 dark:bg-opacity-50 {classes}">
-    <Icon boxed {icon} classes="text-white" boxClasses="mb-2 bg-{color}-600" />
-    <div>
-        <Text>{title}</Text>
-        <Text smaller overrideColor classes="text-{color}-500">{message}</Text>
+    class="relative flex {toggle ? 'flex-row items-center space-x-4' : 'flex-col flex-wrap '} justify-between text-left rounded-xl {toggle ? 'bg-gray-50 p-4' : `bg-${color}-50 px-4 pt-4 pb-5`} dark:bg-gray-900 dark:bg-opacity-50 {classes}"
+    class:toggle>
+    <div class="h-full {toggle ? 'flex flex-row items-center space-x-4' : 'flex flex-col justify-between'} flex-nowrap">
+        <Icon boxed {icon} classes="text-white" boxClasses="{toggle ? 'bg-gray-400' : `mb-2 bg-${color}-500`} dark:bg-gray-900" />
+        <div>
+            <Text smaller bold>{title}</Text>
+            <p class="text-10 leading-120 text-gray-500 {toggle ? 'mt-1' : 'mt-1.5'}">{message}</p>
+        </div>
     </div>
+    {#if toggle}
+        <Toggle active={toggleActive} {color} />
+    {/if}
+    {#if !toggle && warning}
+        <Icon icon="warning-filled" classes="absolute right-4 top-5 {color ? `text-${color}-500` : 'text-yellow-500'}" />
+    {/if}
 </button>
diff --git a/packages/shared/components/icon/Index.svelte b/packages/shared/components/icon/Index.svelte
@@ -9,9 +9,15 @@
     $: selected = icons[icon]
 </script>
 
+<style type="text/scss">
+    .boxed {
+        border-radius: 0.625rem; // TODO: add to tailwind
+    }
+</style>
+
 {#if selected}
     {#if boxed}
-        <div class={`w-8 h-8 flex justify-center items-center rounded-lg ${boxClasses}`}>
+        <div class="boxed w-8 h-8 flex justify-center items-center {boxClasses}">
             <svg
                 data-label="icon"
                 class="flex-shrink-0 {classes}"

diff --git a/packages/shared/components/icon/icons.js b/packages/shared/components/icon/icons.js
@@ -753,6 +753,18 @@ export const icons = {
             },
         ],
     },
+    'warning-filled': {
+        width: 24,
+        height: 24,
+        path: [
+            {
+                d:
+                    'M14.6116 2.62066C13.4632 0.588889 10.5366 0.58889 9.38821 2.62066L1.52991 16.5238C0.399542 18.5237 1.84437 21 4.1416 21H19.8582C22.1554 21 23.6002 18.5237 22.4699 16.5238L14.6116 2.62066ZM12.4125 6.48004C13.0041 6.48004 13.4664 6.99086 13.4076 7.57954L12.8344 13.3113C12.7915 13.7398 12.4309 14.0661 12.0003 14.0661C11.5696 14.0661 11.209 13.7398 11.1662 13.3113L10.593 7.57954C10.5341 6.99086 10.9964 6.48004 11.588 6.48004H12.4125ZM10.4829 17.1006C10.4829 16.2626 11.1622 15.5834 12.0001 15.5834C12.838 15.5834 13.5173 16.2626 13.5173 17.1006C13.5173 17.9385 12.838 18.6178 12.0001 18.6178C11.1622 18.6178 10.4829 17.9385 10.4829 17.1006Z',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+            },
+        ],
+    },
     work: {
         width: 24,
         height: 24,
@@ -941,65 +953,77 @@ export const icons = {
         height: 24,
         path: [
             {
-                d: 'M14 1.5C14 2.32843 13.3284 3 12.5 3C11.6716 3 11 2.32843 11 1.5C11 0.671573 11.6716 0 12.5 0C13.3284 0 14 0.671573 14 1.5Z',
+                d:
+                    'M14 1.5C14 2.32843 13.3284 3 12.5 3C11.6716 3 11 2.32843 11 1.5C11 0.671573 11.6716 0 12.5 0C13.3284 0 14 0.671573 14 1.5Z',
             },
             {
-                d: 'M12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7L12 17Z',
+                d:
+                    'M12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7L12 17Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
             {
-                d: 'M12.5 24C13.3284 24 14 23.3284 14 22.5C14 21.6716 13.3284 21 12.5 21C11.6716 21 11 21.6716 11 22.5C11 23.3284 11.6716 24 12.5 24Z',
+                d:
+                    'M12.5 24C13.3284 24 14 23.3284 14 22.5C14 21.6716 13.3284 21 12.5 21C11.6716 21 11 21.6716 11 22.5C11 23.3284 11.6716 24 12.5 24Z',
             },
             {
-                d: 'M20.9855 5.63604C20.3997 6.22182 19.4499 6.22182 18.8641 5.63604C18.2784 5.05025 18.2784 4.1005 18.8641 3.51472C19.4499 2.92893 20.3997 2.92893 20.9855 3.51472C21.5713 4.1005 21.5713 5.05025 20.9855 5.63604Z',
+                d:
+                    'M20.9855 5.63604C20.3997 6.22182 19.4499 6.22182 18.8641 5.63604C18.2784 5.05025 18.2784 4.1005 18.8641 3.51472C19.4499 2.92893 20.3997 2.92893 20.9855 3.51472C21.5713 4.1005 21.5713 5.05025 20.9855 5.63604Z',
             },
             {
-                d: 'M4.01453 20.4853C4.60032 21.0711 5.55007 21.0711 6.13586 20.4853C6.72164 19.8995 6.72164 18.9498 6.13586 18.364C5.55007 17.7782 4.60032 17.7782 4.01453 18.364C3.42875 18.9498 3.42875 19.8995 4.01453 20.4853Z',
+                d:
+                    'M4.01453 20.4853C4.60032 21.0711 5.55007 21.0711 6.13586 20.4853C6.72164 19.8995 6.72164 18.9498 6.13586 18.364C5.55007 17.7782 4.60032 17.7782 4.01453 18.364C3.42875 18.9498 3.42875 19.8995 4.01453 20.4853Z',
             },
             {
-                d: 'M22.5 13.5C21.6716 13.5 21 12.8284 21 12C21 11.1715 21.6716 10.5 22.5 10.5C23.3284 10.5 24 11.1715 24 12C24 12.8284 23.3284 13.5 22.5 13.5Z',
+                d:
+                    'M22.5 13.5C21.6716 13.5 21 12.8284 21 12C21 11.1715 21.6716 10.5 22.5 10.5C23.3284 10.5 24 11.1715 24 12C24 12.8284 23.3284 13.5 22.5 13.5Z',
             },
             {
-                d: 'M0 11.9997C0 12.8282 0.671573 13.4997 1.5 13.4997C2.32843 13.4997 3 12.8282 3 11.9997C3 11.1713 2.32843 10.4997 1.5 10.4997C0.671573 10.4997 0 11.1713 0 11.9997Z',
+                d:
+                    'M0 11.9997C0 12.8282 0.671573 13.4997 1.5 13.4997C2.32843 13.4997 3 12.8282 3 11.9997C3 11.1713 2.32843 10.4997 1.5 10.4997C0.671573 10.4997 0 11.1713 0 11.9997Z',
             },
             {
-                d: 'M18.3639 20.4852C17.7781 19.8994 17.7781 18.9497 18.3639 18.3639C18.9497 17.7781 19.8995 17.7781 20.4852 18.3639C21.071 18.9497 21.071 19.8994 20.4852 20.4852C19.8995 21.071 18.9497 21.071 18.3639 20.4852Z',
+                d:
+                    'M18.3639 20.4852C17.7781 19.8994 17.7781 18.9497 18.3639 18.3639C18.9497 17.7781 19.8995 17.7781 20.4852 18.3639C21.071 18.9497 21.071 19.8994 20.4852 20.4852C19.8995 21.071 18.9497 21.071 18.3639 20.4852Z',
             },
             {
-                d: 'M3.5148 3.51447C2.92901 4.10026 2.92901 5.05001 3.5148 5.63579C4.10058 6.22158 5.05033 6.22158 5.63612 5.63579C6.2219 5.05001 6.2219 4.10026 5.63612 3.51447C5.05033 2.92869 4.10058 2.92869 3.5148 3.51447Z',
+                d:
+                    'M3.5148 3.51447C2.92901 4.10026 2.92901 5.05001 3.5148 5.63579C4.10058 6.22158 5.05033 6.22158 5.63612 5.63579C6.2219 5.05001 6.2219 4.10026 5.63612 3.51447C5.05033 2.92869 4.10058 2.92869 3.5148 3.51447Z',
             },
-        ]
+        ],
     },
     'theme-dark': {
         width: 24,
         height: 24,
         path: [
             {
-                d: 'M16.7898 15.0238C12.4745 15.0238 8.97629 11.5256 8.97629 7.21037C8.97629 6.99944 8.9847 6.79019 9.00122 6.58298C7.20317 7.6544 6 9.61894 6 11.8611C6 15.2515 8.74847 18 12.1389 18C14.3811 18 16.3456 16.7969 17.4171 14.9989C17.2099 15.0154 17.0007 15.0238 16.7898 15.0238ZM16.7898 13.0238C13.5791 13.0238 10.9763 10.4211 10.9763 7.21037C10.9763 6.71325 11.0387 6.2307 11.1561 5.77013C11.3886 4.85778 10.7859 3.77879 9.88087 4.03959C6.48437 5.01838 4 8.14963 4 11.8611C4 16.3561 7.64392 20 12.1389 20C15.8503 20 18.9815 17.5158 19.9604 14.1195C20.2212 13.2146 19.1413 12.6121 18.2284 12.8445C17.7683 12.9616 17.2863 13.0238 16.7898 13.0238Z',
+                d:
+                    'M16.7898 15.0238C12.4745 15.0238 8.97629 11.5256 8.97629 7.21037C8.97629 6.99944 8.9847 6.79019 9.00122 6.58298C7.20317 7.6544 6 9.61894 6 11.8611C6 15.2515 8.74847 18 12.1389 18C14.3811 18 16.3456 16.7969 17.4171 14.9989C17.2099 15.0154 17.0007 15.0238 16.7898 15.0238ZM16.7898 13.0238C13.5791 13.0238 10.9763 10.4211 10.9763 7.21037C10.9763 6.71325 11.0387 6.2307 11.1561 5.77013C11.3886 4.85778 10.7859 3.77879 9.88087 4.03959C6.48437 5.01838 4 8.14963 4 11.8611C4 16.3561 7.64392 20 12.1389 20C15.8503 20 18.9815 17.5158 19.9604 14.1195C20.2212 13.2146 19.1413 12.6121 18.2284 12.8445C17.7683 12.9616 17.2863 13.0238 16.7898 13.0238Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
-        ]
+        ],
     },
     backspace: {
         width: 20,
         height: 14,
         path: [
             {
-                d: 'M7.41379 0H18.0004C18.5309 0 19.0396 0.210714 19.4146 0.585786C19.7897 0.960859 20.0004 1.46957 20.0004 2V12C20.0004 12.5304 19.7897 13.0391 19.4146 13.4142C19.0396 13.7893 18.5309 14 18.0004 14H7.41379C6.8834 13.9999 6.37477 13.7891 5.99979 13.414L0.292786 7.707C0.105315 7.51947 0 7.26516 0 7C0 6.73484 0.105315 6.48053 0.292786 6.293L5.99979 0.586C6.37477 0.210901 6.8834 0.000113275 7.41379 0ZM7.41379 12H18.0004V2H7.41379L2.41379 7L7.41379 12ZM14.4144 7L15.8284 8.414C16.0106 8.6026 16.1114 8.8552 16.1091 9.1174C16.1068 9.3796 16.0017 9.63041 15.8163 9.81582C15.6308 10.0012 15.38 10.1064 15.1178 10.1087C14.8556 10.111 14.603 10.0102 14.4144 9.828L13.0004 8.414L11.5864 9.828C11.4942 9.92351 11.3838 9.99969 11.2618 10.0521C11.1398 10.1045 11.0086 10.1321 10.8758 10.1333C10.7431 10.1344 10.6114 10.1091 10.4885 10.0588C10.3656 10.0085 10.2539 9.93429 10.16 9.84039C10.0661 9.7465 9.9919 9.63485 9.94162 9.51195C9.89134 9.38906 9.86603 9.25738 9.86719 9.1246C9.86834 8.99182 9.89593 8.8606 9.94834 8.7386C10.0007 8.61659 10.0769 8.50625 10.1724 8.414L11.5864 7L10.1724 5.586C10.0769 5.49375 10.0007 5.38341 9.94834 5.2614C9.89593 5.1394 9.86834 5.00818 9.86719 4.8754C9.86603 4.74262 9.89134 4.61094 9.94162 4.48805C9.9919 4.36515 10.0661 4.2535 10.16 4.15961C10.2539 4.06571 10.3656 3.99146 10.4885 3.94118C10.6114 3.8909 10.7431 3.8656 10.8758 3.86675C11.0086 3.8679 11.1398 3.89549 11.2618 3.9479C11.3838 4.00031 11.4942 4.07649 11.5864 4.172L13.0004 5.586L14.4144 4.172C14.5067 4.07649 14.617 4.00031 14.739 3.9479C14.861 3.89549 14.9923 3.8679 15.125 3.86675C15.2578 3.8656 15.3895 3.8909 15.5124 3.94118C15.6353 3.99146 15.7469 4.06571 15.8408 4.15961C15.9347 4.2535 16.009 4.36515 16.0593 4.48805C16.1095 4.61094 16.1348 4.74262 16.1337 4.8754C16.1325 5.00818 16.1049 5.1394 16.0525 5.2614C16.0001 5.38341 15.9239 5.49375 15.8284 5.586L14.4144 7Z'
-            }
-        ]
+                d:
+                    'M7.41379 0H18.0004C18.5309 0 19.0396 0.210714 19.4146 0.585786C19.7897 0.960859 20.0004 1.46957 20.0004 2V12C20.0004 12.5304 19.7897 13.0391 19.4146 13.4142C19.0396 13.7893 18.5309 14 18.0004 14H7.41379C6.8834 13.9999 6.37477 13.7891 5.99979 13.414L0.292786 7.707C0.105315 7.51947 0 7.26516 0 7C0 6.73484 0.105315 6.48053 0.292786 6.293L5.99979 0.586C6.37477 0.210901 6.8834 0.000113275 7.41379 0ZM7.41379 12H18.0004V2H7.41379L2.41379 7L7.41379 12ZM14.4144 7L15.8284 8.414C16.0106 8.6026 16.1114 8.8552 16.1091 9.1174C16.1068 9.3796 16.0017 9.63041 15.8163 9.81582C15.6308 10.0012 15.38 10.1064 15.1178 10.1087C14.8556 10.111 14.603 10.0102 14.4144 9.828L13.0004 8.414L11.5864 9.828C11.4942 9.92351 11.3838 9.99969 11.2618 10.0521C11.1398 10.1045 11.0086 10.1321 10.8758 10.1333C10.7431 10.1344 10.6114 10.1091 10.4885 10.0588C10.3656 10.0085 10.2539 9.93429 10.16 9.84039C10.0661 9.7465 9.9919 9.63485 9.94162 9.51195C9.89134 9.38906 9.86603 9.25738 9.86719 9.1246C9.86834 8.99182 9.89593 8.8606 9.94834 8.7386C10.0007 8.61659 10.0769 8.50625 10.1724 8.414L11.5864 7L10.1724 5.586C10.0769 5.49375 10.0007 5.38341 9.94834 5.2614C9.89593 5.1394 9.86834 5.00818 9.86719 4.8754C9.86603 4.74262 9.89134 4.61094 9.94162 4.48805C9.9919 4.36515 10.0661 4.2535 10.16 4.15961C10.2539 4.06571 10.3656 3.99146 10.4885 3.94118C10.6114 3.8909 10.7431 3.8656 10.8758 3.86675C11.0086 3.8679 11.1398 3.89549 11.2618 3.9479C11.3838 4.00031 11.4942 4.07649 11.5864 4.172L13.0004 5.586L14.4144 4.172C14.5067 4.07649 14.617 4.00031 14.739 3.9479C14.861 3.89549 14.9923 3.8679 15.125 3.86675C15.2578 3.8656 15.3895 3.8909 15.5124 3.94118C15.6353 3.99146 15.7469 4.06571 15.8408 4.15961C15.9347 4.2535 16.009 4.36515 16.0593 4.48805C16.1095 4.61094 16.1348 4.74262 16.1337 4.8754C16.1325 5.00818 16.1049 5.1394 16.0525 5.2614C16.0001 5.38341 15.9239 5.49375 15.8284 5.586L14.4144 7Z',
+            },
+        ],
     },
     'success-check': {
         width: 38,
         height: 36,
         path: [
             {
-                d: 'M30.6865 10.2201C31.2764 10.8223 31.2483 11.7717 30.6237 12.3405L15.5246 26.0915L8.23344 19.0607C7.62596 18.4749 7.62596 17.5251 8.23344 16.9393C8.84093 16.3536 9.82585 16.3536 10.4333 16.9393L15.5866 21.9086L28.4875 10.1595C29.1121 9.59067 30.0966 9.61779 30.6865 10.2201Z',
+                d:
+                    'M30.6865 10.2201C31.2764 10.8223 31.2483 11.7717 30.6237 12.3405L15.5246 26.0915L8.23344 19.0607C7.62596 18.4749 7.62596 17.5251 8.23344 16.9393C8.84093 16.3536 9.82585 16.3536 10.4333 16.9393L15.5866 21.9086L28.4875 10.1595C29.1121 9.59067 30.0966 9.61779 30.6865 10.2201Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },
-        ]
-    }
+        ],
+    },
 }
diff --git a/packages/shared/components/inputs/Address.svelte b/packages/shared/components/inputs/Address.svelte
@@ -14,7 +14,7 @@
     textarea {
         @apply py-4;
         @apply pr-8;
-        @apply pl-4;
+        @apply pl-3;
         border-radius: 0.625rem; // TODO: add to tailwind
 
         &::placeholder {
@@ -30,8 +30,8 @@
         }
 
         &.floating-active {
-            @apply pt-5;
-            @apply pb-3;
+            @apply pt-6;
+            @apply pb-2;
         }
 
         + floating-label {
@@ -45,11 +45,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
         }
         &:not(:disabled) {
             + floating-label {
@@ -81,11 +81,7 @@
             spellcheck={false}
             maxlength={ADDRESS_LENGTH} />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={address && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={address && label}>{label}</floating-label>
         {/if}
     </address-input>
     {#if error}

diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
@@ -31,7 +31,7 @@
             @apply border;
             @apply border-solid;
             @apply py-4;
-            @apply pl-4;
+            @apply pl-3;
             @apply pr-10;
         }
         &:not(.small) {
@@ -89,8 +89,8 @@
 
         &.floating-active {
             .selection {
-                @apply pt-5;
-                @apply pb-3;
+                @apply pt-6;
+                @apply pb-2;
             }
         }
 
@@ -105,11 +105,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
             &.floating-active {
                 @apply opacity-100;
                 transform: none;
@@ -148,11 +148,7 @@
             height={small ? 16 : 24}
             classes="absolute text-gray-500 fill-current" />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={value && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={value && label}>{label}</floating-label>
         {/if}
     </div>
     <nav

diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
@@ -60,7 +60,7 @@
     input {
         @apply py-4;
         @apply pr-8;
-        @apply pl-4;
+        @apply pl-3;
         border-radius: 0.625rem; // TODO: add to tailwind
 
         &::placeholder {
@@ -76,8 +76,8 @@
         }
 
         &.floating-active {
-            @apply pt-5;
-            @apply pb-3;
+            @apply pt-6;
+            @apply pb-2;
         }
 
         + floating-label {
@@ -91,11 +91,11 @@
             @apply opacity-0;
             @apply pointer-events-none;
             @apply absolute;
-            @apply left-4;
+            @apply left-3;
             @apply select-none;
             @apply whitespace-nowrap;
             @apply w-full;
-            top: 7px;
+            top: 8px;
         }
         &:not(:disabled) {
             + floating-label {
@@ -131,11 +131,7 @@
             {...$$restProps}
             {placeholder} />
         {#if label}
-            <floating-label
-                class="block text-gray-500 text-11 leading-120 overflow-hidden opacity-0 pointer-events-none absolute top-2 left-4 select-none whitespace-nowrap w-full"
-                class:floating-active={value && label}>
-                {label}
-            </floating-label>
+            <floating-label class:floating-active={value && label}>{label}</floating-label>
         {/if}
     </div>
     {#if error}