@reshape-biotech/design-system 1.2.6 → 1.2.7

package/dist/components/icons/custom/Halo.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
-	import type { IconColor } from '..';
-	import { textColor } from '../../../tokens';
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
 
-	let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+  let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
 </script>
 
 <svg
-	width={size}
-	height={size}
-	viewBox="0 0 16 16"
-	fill={textColor[color]}
-	xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill={textColor[color]}
+  xmlns="http://www.w3.org/2000/svg"
 >
-	<path
-		d="M5.75676 2.08573C5.74306 2.18334 5.74874 2.28269 5.77346 2.37811C5.82345 2.5705 5.94776 2.73518 6.1191 2.83596C6.29043 2.93675 6.49477 2.96539 6.68721 2.91561C7.54813 2.69363 8.45129 2.69363 9.31221 2.91561C9.40845 2.94307 9.50922 2.951 9.60857 2.93892C9.70793 2.92684 9.80386 2.89499 9.89071 2.84526C9.97757 2.79553 10.0536 2.72892 10.1143 2.64935C10.175 2.56978 10.2192 2.47887 10.2442 2.38196C10.2692 2.28506 10.2746 2.18412 10.26 2.08511C10.2455 1.98609 10.2112 1.89099 10.1593 1.80542C10.1074 1.71985 10.0389 1.64553 9.95779 1.58685C9.87672 1.52817 9.78472 1.48631 9.68721 1.46373C8.58036 1.17794 7.41906 1.17794 6.31221 1.46373C6.21677 1.48834 6.12711 1.53153 6.04837 1.59081C5.96962 1.6501 5.90334 1.72432 5.8533 1.80925C5.80327 1.89417 5.77046 1.98812 5.75676 2.08573Z"
-	/>
-	<path
-		d="M1.49596 6.19373C1.80219 5.0925 2.3828 4.08697 3.18346 3.27123C3.25245 3.20093 3.3346 3.14491 3.42524 3.10636C3.51587 3.06781 3.61321 3.0475 3.7117 3.04657C3.81019 3.04564 3.9079 3.06412 3.99924 3.10095C4.09059 3.13778 4.17379 3.19225 4.24409 3.26123C4.31438 3.33022 4.37041 3.41237 4.40895 3.50301C4.4475 3.59364 4.46782 3.69098 4.46875 3.78947C4.46968 3.88796 4.4512 3.98567 4.41437 4.07701C4.37753 4.16836 4.32307 4.25156 4.25409 4.32186C3.63135 4.95586 3.17975 5.73756 2.94159 6.59373C2.89785 6.75179 2.80352 6.89116 2.67303 6.99049C2.54254 7.08983 2.38308 7.14366 2.21909 7.14373C2.15152 7.14367 2.08427 7.13463 2.01909 7.11686C1.9241 7.09062 1.83522 7.04593 1.75752 6.98533C1.67982 6.92474 1.61482 6.84942 1.56624 6.76369C1.51766 6.67796 1.48645 6.5835 1.47439 6.4857C1.46233 6.38791 1.46966 6.28869 1.49596 6.19373Z"
-	/>
-	<path
-		d="M2.58493 8.96394C2.75673 9.05872 2.88454 9.21706 2.94096 9.40498C3.17786 10.2612 3.62816 11.0433 4.24971 11.6781C4.37681 11.8218 4.444 12.0088 4.43747 12.2005C4.43095 12.3922 4.3512 12.5742 4.21463 12.7089C4.07806 12.8436 3.89505 12.9209 3.70324 12.9248C3.51144 12.9287 3.32543 12.859 3.18346 12.73C2.3824 11.9141 1.80175 10.908 1.49596 9.80623C1.44741 9.61612 1.47529 9.41456 1.57362 9.24476C1.67195 9.07497 1.83291 8.95048 2.02197 8.89798C2.21102 8.84548 2.41313 8.86916 2.58493 8.96394Z"
-	/>
-	<path
-		d="M6.68721 13.0844C7.54809 13.3066 8.45133 13.3066 9.31221 13.0844C9.40845 13.0569 9.50922 13.049 9.60857 13.061C9.70793 13.0731 9.80386 13.105 9.89071 13.1547C9.97757 13.2044 10.0536 13.271 10.1143 13.3506C10.175 13.4302 10.2192 13.5211 10.2442 13.618C10.2692 13.7149 10.2746 13.8158 10.26 13.9149C10.2455 14.0139 10.2112 14.109 10.1593 14.1945C10.1074 14.2801 10.0389 14.3544 9.95779 14.4131C9.87672 14.4718 9.78472 14.5137 9.68721 14.5362C8.58036 14.822 7.41906 14.822 6.31221 14.5362C6.21471 14.5137 6.1227 14.4718 6.04163 14.4131C5.96055 14.3544 5.89204 14.2801 5.84013 14.1945C5.78823 14.109 5.75397 14.0139 5.73939 13.9149C5.7248 13.8158 5.73018 13.7149 5.75521 13.618C5.78024 13.5211 5.82441 13.4302 5.88512 13.3506C5.94583 13.271 6.02186 13.2044 6.10871 13.1547C6.19557 13.105 6.2915 13.0731 6.39085 13.061C6.4902 13.049 6.59097 13.0569 6.68721 13.0844Z"
-	/>
-	<path
-		d="M13.4142 8.95472C13.5866 8.85668 13.7909 8.83093 13.9822 8.88311H13.9816C14.0768 8.90907 14.1659 8.95357 14.2439 9.01405C14.3219 9.07454 14.3872 9.14982 14.436 9.23557C14.4848 9.32133 14.5163 9.41588 14.5285 9.5138C14.5407 9.61173 14.5335 9.7111 14.5072 9.80623C14.2008 10.9076 13.6203 11.9133 12.8197 12.7294C12.6803 12.8712 12.4902 12.9519 12.2913 12.9537C12.0924 12.9555 11.901 12.8781 11.7591 12.7387C11.6172 12.5993 11.5365 12.4093 11.5347 12.2104C11.533 12.0115 11.6103 11.82 11.7497 11.6781C12.3724 11.0441 12.824 10.2624 13.0622 9.40623C13.1152 9.2151 13.2418 9.05276 13.4142 8.95472Z"
-	/>
-	<path
-		d="M13.4151 7.03602C13.2433 6.94124 13.1155 6.7829 13.0591 6.59498H13.0585C12.8216 5.73874 12.3713 4.95663 11.7497 4.32186C11.675 4.25309 11.615 4.16986 11.5733 4.07721C11.5317 3.98456 11.5094 3.88442 11.5076 3.78287C11.5059 3.68132 11.5247 3.58047 11.5631 3.48643C11.6015 3.3924 11.6586 3.30714 11.7309 3.23584C11.8033 3.16453 11.8893 3.10865 11.9839 3.0716C12.0785 3.03455 12.1796 3.01709 12.2811 3.02028C12.3826 3.02347 12.4824 3.04725 12.5745 3.09017C12.6665 3.1331 12.7489 3.19427 12.8166 3.26998C13.6176 4.0859 14.1983 5.09195 14.5041 6.19373C14.5526 6.38384 14.5248 6.5854 14.4264 6.7552C14.3281 6.92499 14.1671 7.04948 13.9781 7.10198C13.789 7.15448 13.5869 7.1308 13.4151 7.03602Z"
-	/>
-	<path
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M7.99976 4.25C5.92869 4.25 4.24976 5.92893 4.24976 8C4.24976 10.0711 5.92869 11.75 7.99976 11.75C10.0708 11.75 11.7498 10.0711 11.7498 8C11.7498 5.92893 10.0708 4.25 7.99976 4.25ZM5.74976 8C5.74976 6.75736 6.75712 5.75 7.99976 5.75C9.2424 5.75 10.2498 6.75736 10.2498 8C10.2498 9.24264 9.2424 10.25 7.99976 10.25C6.75712 10.25 5.74976 9.24264 5.74976 8Z"
-	/>
+  <path
+    d="M5.75676 2.08573C5.74306 2.18334 5.74874 2.28269 5.77346 2.37811C5.82345 2.5705 5.94776 2.73518 6.1191 2.83596C6.29043 2.93675 6.49477 2.96539 6.68721 2.91561C7.54813 2.69363 8.45129 2.69363 9.31221 2.91561C9.40845 2.94307 9.50922 2.951 9.60857 2.93892C9.70793 2.92684 9.80386 2.89499 9.89071 2.84526C9.97757 2.79553 10.0536 2.72892 10.1143 2.64935C10.175 2.56978 10.2192 2.47887 10.2442 2.38196C10.2692 2.28506 10.2746 2.18412 10.26 2.08511C10.2455 1.98609 10.2112 1.89099 10.1593 1.80542C10.1074 1.71985 10.0389 1.64553 9.95779 1.58685C9.87672 1.52817 9.78472 1.48631 9.68721 1.46373C8.58036 1.17794 7.41906 1.17794 6.31221 1.46373C6.21677 1.48834 6.12711 1.53153 6.04837 1.59081C5.96962 1.6501 5.90334 1.72432 5.8533 1.80925C5.80327 1.89417 5.77046 1.98812 5.75676 2.08573Z"
+  />
+  <path
+    d="M1.49596 6.19373C1.80219 5.0925 2.3828 4.08697 3.18346 3.27123C3.25245 3.20093 3.3346 3.14491 3.42524 3.10636C3.51587 3.06781 3.61321 3.0475 3.7117 3.04657C3.81019 3.04564 3.9079 3.06412 3.99924 3.10095C4.09059 3.13778 4.17379 3.19225 4.24409 3.26123C4.31438 3.33022 4.37041 3.41237 4.40895 3.50301C4.4475 3.59364 4.46782 3.69098 4.46875 3.78947C4.46968 3.88796 4.4512 3.98567 4.41437 4.07701C4.37753 4.16836 4.32307 4.25156 4.25409 4.32186C3.63135 4.95586 3.17975 5.73756 2.94159 6.59373C2.89785 6.75179 2.80352 6.89116 2.67303 6.99049C2.54254 7.08983 2.38308 7.14366 2.21909 7.14373C2.15152 7.14367 2.08427 7.13463 2.01909 7.11686C1.9241 7.09062 1.83522 7.04593 1.75752 6.98533C1.67982 6.92474 1.61482 6.84942 1.56624 6.76369C1.51766 6.67796 1.48645 6.5835 1.47439 6.4857C1.46233 6.38791 1.46966 6.28869 1.49596 6.19373Z"
+  />
+  <path
+    d="M2.58493 8.96394C2.75673 9.05872 2.88454 9.21706 2.94096 9.40498C3.17786 10.2612 3.62816 11.0433 4.24971 11.6781C4.37681 11.8218 4.444 12.0088 4.43747 12.2005C4.43095 12.3922 4.3512 12.5742 4.21463 12.7089C4.07806 12.8436 3.89505 12.9209 3.70324 12.9248C3.51144 12.9287 3.32543 12.859 3.18346 12.73C2.3824 11.9141 1.80175 10.908 1.49596 9.80623C1.44741 9.61612 1.47529 9.41456 1.57362 9.24476C1.67195 9.07497 1.83291 8.95048 2.02197 8.89798C2.21102 8.84548 2.41313 8.86916 2.58493 8.96394Z"
+  />
+  <path
+    d="M6.68721 13.0844C7.54809 13.3066 8.45133 13.3066 9.31221 13.0844C9.40845 13.0569 9.50922 13.049 9.60857 13.061C9.70793 13.0731 9.80386 13.105 9.89071 13.1547C9.97757 13.2044 10.0536 13.271 10.1143 13.3506C10.175 13.4302 10.2192 13.5211 10.2442 13.618C10.2692 13.7149 10.2746 13.8158 10.26 13.9149C10.2455 14.0139 10.2112 14.109 10.1593 14.1945C10.1074 14.2801 10.0389 14.3544 9.95779 14.4131C9.87672 14.4718 9.78472 14.5137 9.68721 14.5362C8.58036 14.822 7.41906 14.822 6.31221 14.5362C6.21471 14.5137 6.1227 14.4718 6.04163 14.4131C5.96055 14.3544 5.89204 14.2801 5.84013 14.1945C5.78823 14.109 5.75397 14.0139 5.73939 13.9149C5.7248 13.8158 5.73018 13.7149 5.75521 13.618C5.78024 13.5211 5.82441 13.4302 5.88512 13.3506C5.94583 13.271 6.02186 13.2044 6.10871 13.1547C6.19557 13.105 6.2915 13.0731 6.39085 13.061C6.4902 13.049 6.59097 13.0569 6.68721 13.0844Z"
+  />
+  <path
+    d="M13.4142 8.95472C13.5866 8.85668 13.7909 8.83093 13.9822 8.88311H13.9816C14.0768 8.90907 14.1659 8.95357 14.2439 9.01405C14.3219 9.07454 14.3872 9.14982 14.436 9.23557C14.4848 9.32133 14.5163 9.41588 14.5285 9.5138C14.5407 9.61173 14.5335 9.7111 14.5072 9.80623C14.2008 10.9076 13.6203 11.9133 12.8197 12.7294C12.6803 12.8712 12.4902 12.9519 12.2913 12.9537C12.0924 12.9555 11.901 12.8781 11.7591 12.7387C11.6172 12.5993 11.5365 12.4093 11.5347 12.2104C11.533 12.0115 11.6103 11.82 11.7497 11.6781C12.3724 11.0441 12.824 10.2624 13.0622 9.40623C13.1152 9.2151 13.2418 9.05276 13.4142 8.95472Z"
+  />
+  <path
+    d="M13.4151 7.03602C13.2433 6.94124 13.1155 6.7829 13.0591 6.59498H13.0585C12.8216 5.73874 12.3713 4.95663 11.7497 4.32186C11.675 4.25309 11.615 4.16986 11.5733 4.07721C11.5317 3.98456 11.5094 3.88442 11.5076 3.78287C11.5059 3.68132 11.5247 3.58047 11.5631 3.48643C11.6015 3.3924 11.6586 3.30714 11.7309 3.23584C11.8033 3.16453 11.8893 3.10865 11.9839 3.0716C12.0785 3.03455 12.1796 3.01709 12.2811 3.02028C12.3826 3.02347 12.4824 3.04725 12.5745 3.09017C12.6665 3.1331 12.7489 3.19427 12.8166 3.26998C13.6176 4.0859 14.1983 5.09195 14.5041 6.19373C14.5526 6.38384 14.5248 6.5854 14.4264 6.7552C14.3281 6.92499 14.1671 7.04948 13.9781 7.10198C13.789 7.15448 13.5869 7.1308 13.4151 7.03602Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99976 4.25C5.92869 4.25 4.24976 5.92893 4.24976 8C4.24976 10.0711 5.92869 11.75 7.99976 11.75C10.0708 11.75 11.7498 10.0711 11.7498 8C11.7498 5.92893 10.0708 4.25 7.99976 4.25ZM5.74976 8C5.74976 6.75736 6.75712 5.75 7.99976 5.75C9.2424 5.75 10.2498 6.75736 10.2498 8C10.2498 9.24264 9.2424 10.25 7.99976 10.25C6.75712 10.25 5.74976 9.24264 5.74976 8Z"
+  />
 </svg>

package/dist/components/icons/custom/Well.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
-	import type { IconColor } from '..';
-	import { textColor } from '../../../tokens';
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
 
-	let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+  let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
 </script>
 
 <svg
-	width={size}
-	height={size}
-	viewBox="0 0 16 16"
-	fill={textColor[color]}
-	xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill={textColor[color]}
+  xmlns="http://www.w3.org/2000/svg"
 >
-	<path
-		d="M6.5 10.25C6.5 10.6642 6.16421 11 5.75 11C5.33579 11 5 10.6642 5 10.25C5 9.83579 5.33579 9.5 5.75 9.5C6.16421 9.5 6.5 9.83579 6.5 10.25Z"
-	/>
-	<path
-		d="M10.5 8C11.0523 8 11.5 7.55228 11.5 7C11.5 6.44772 11.0523 6 10.5 6C9.94771 6 9.5 6.44772 9.5 7C9.5 7.55228 9.94771 8 10.5 8Z"
-	/>
-	<path
-		d="M11 10.25C11 10.9404 10.4404 11.5 9.75 11.5C9.05964 11.5 8.5 10.9404 8.5 10.25C8.5 9.55964 9.05964 9 9.75 9C10.4404 9 11 9.55964 11 10.25Z"
-	/>
-	<path
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M6.25 4.25C5.14543 4.25 4.25 5.14543 4.25 6.25C4.25 7.35457 5.14543 8.25 6.25 8.25C7.35457 8.25 8.25 7.35457 8.25 6.25C8.25 5.14543 7.35457 4.25 6.25 4.25ZM5.75 6.25C5.75 5.97386 5.97386 5.75 6.25 5.75C6.52614 5.75 6.75 5.97386 6.75 6.25C6.75 6.52614 6.52614 6.75 6.25 6.75C5.97386 6.75 5.75 6.52614 5.75 6.25Z"
-	/>
-	<path
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M1.25 7.99766C1.25127 4.27081 4.27286 1.25 8 1.25C11.7271 1.25 14.7486 4.27069 14.75 7.99743L14.75 8L14.7499 8.04138C14.7277 11.7367 11.7362 14.728 8.04081 14.7499C8.01175 14.7501 7.98269 14.75 7.95362 14.7498C4.24846 14.7249 1.25229 11.7148 1.25 8.00426L1.25 7.99766ZM8 13.25C6.96165 13.25 5.94662 12.9421 5.08326 12.3652C4.2199 11.7883 3.547 10.9684 3.14964 10.0091C2.75228 9.04978 2.64831 7.99418 2.85088 6.97578C3.05345 5.95738 3.55347 5.02191 4.28769 4.28769C5.02192 3.55346 5.95738 3.05345 6.97578 2.85088C7.30274 2.78584 7.63354 2.7524 7.96375 2.75012L8 2.75L8.03076 2.75009C8.70653 2.75405 9.3786 2.88848 10.0091 3.14963C10.9684 3.54699 11.7883 4.2199 12.3652 5.08326C12.9348 5.93567 13.2422 6.93595 13.2499 7.96054L13.25 8C13.2485 9.39193 12.6949 10.7264 11.7107 11.7107C10.7264 12.6949 9.39193 13.2485 8 13.25Z"
-	/>
+  <path
+    d="M6.5 10.25C6.5 10.6642 6.16421 11 5.75 11C5.33579 11 5 10.6642 5 10.25C5 9.83579 5.33579 9.5 5.75 9.5C6.16421 9.5 6.5 9.83579 6.5 10.25Z"
+  />
+  <path
+    d="M10.5 8C11.0523 8 11.5 7.55228 11.5 7C11.5 6.44772 11.0523 6 10.5 6C9.94771 6 9.5 6.44772 9.5 7C9.5 7.55228 9.94771 8 10.5 8Z"
+  />
+  <path
+    d="M11 10.25C11 10.9404 10.4404 11.5 9.75 11.5C9.05964 11.5 8.5 10.9404 8.5 10.25C8.5 9.55964 9.05964 9 9.75 9C10.4404 9 11 9.55964 11 10.25Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.25 4.25C5.14543 4.25 4.25 5.14543 4.25 6.25C4.25 7.35457 5.14543 8.25 6.25 8.25C7.35457 8.25 8.25 7.35457 8.25 6.25C8.25 5.14543 7.35457 4.25 6.25 4.25ZM5.75 6.25C5.75 5.97386 5.97386 5.75 6.25 5.75C6.52614 5.75 6.75 5.97386 6.75 6.25C6.75 6.52614 6.52614 6.75 6.25 6.75C5.97386 6.75 5.75 6.52614 5.75 6.25Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.25 7.99766C1.25127 4.27081 4.27286 1.25 8 1.25C11.7271 1.25 14.7486 4.27069 14.75 7.99743L14.75 8L14.7499 8.04138C14.7277 11.7367 11.7362 14.728 8.04081 14.7499C8.01175 14.7501 7.98269 14.75 7.95362 14.7498C4.24846 14.7249 1.25229 11.7148 1.25 8.00426L1.25 7.99766ZM8 13.25C6.96165 13.25 5.94662 12.9421 5.08326 12.3652C4.2199 11.7883 3.547 10.9684 3.14964 10.0091C2.75228 9.04978 2.64831 7.99418 2.85088 6.97578C3.05345 5.95738 3.55347 5.02191 4.28769 4.28769C5.02192 3.55346 5.95738 3.05345 6.97578 2.85088C7.30274 2.78584 7.63354 2.7524 7.96375 2.75012L8 2.75L8.03076 2.75009C8.70653 2.75405 9.3786 2.88848 10.0091 3.14963C10.9684 3.54699 11.7883 4.2199 12.3652 5.08326C12.9348 5.93567 13.2422 6.93595 13.2499 7.96054L13.25 8C13.2485 9.39193 12.6949 10.7264 11.7107 11.7107C10.7264 12.6949 9.39193 13.2485 8 13.25Z"
+  />
 </svg>

package/dist/components/icons/index.js

@@ -232,7 +232,7 @@ export const iconMap = {
     Warning,
     WarningCircle,
     WifiSlash,
-    X
+    X,
 };
 export function renderIcon(iconName) {
     const Icon = iconMap[iconName];

package/dist/components/image/Image.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { SkeletonLoader } from '../skeleton-loader/';
-	import Logo from '../logo/Logo.svelte';
+  import { onMount } from 'svelte';
+  import { SkeletonLoader } from '../skeleton-loader/';
+  import Logo from '../logo/Logo.svelte';
 
-	interface Props {
-		src: string;
-		alt: string;
-	}
+  interface Props {
+    src: string;
+    alt: string;
+  }
 
-	let { src, alt }: Props = $props();
+  let { src, alt }: Props = $props();
 
-	let loaded = $state(false);
-	let failed = $state(false);
-	let loading = $state(false);
+  let loaded = $state(false);
+  let failed = $state(false);
+  let loading = $state(false);
 
-	onMount(() => {
-		const img = new Image();
-		img.src = src;
-		loading = true;
+  onMount(() => {
+    const img = new Image();
+    img.src = src;
+    loading = true;
 
-		img.onload = () => {
-			loading = false;
-			loaded = true;
-		};
-		img.onerror = () => {
-			loading = false;
-			failed = true;
-		};
-	});
+    img.onload = () => {
+      loading = false;
+      loaded = true;
+    };
+    img.onerror = () => {
+      loading = false;
+      failed = true;
+    };
+  });
 </script>
 
 <div class="h-full w-full">
-	{#if loaded}
-		<img {src} {alt} class="h-full w-full object-cover" />
-	{:else if failed}
-		<div class="flex h-full w-full items-center justify-center bg-neutral-darker">
-			<Logo color="white" size="lg" />
-		</div>
-	{:else if loading}
-		<div class="flex h-full flex-grow flex-col content-center justify-center">
-			<SkeletonLoader>
-				{#snippet children({ Skeleton, SkeletonImage })}
-					<!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
-					<Skeleton class=" h-full w-full rounded-s-lg bg-[#D9E6E9]">
-						<SkeletonImage />
-					</Skeleton>
-				{/snippet}
-			</SkeletonLoader>
-		</div>
-	{/if}
+  {#if loaded}
+    <img {src} {alt} class="h-full w-full object-cover" />
+  {:else if failed}
+    <div class="flex h-full w-full items-center justify-center bg-neutral-darker">
+      <Logo color="white" size="lg" />
+    </div>
+  {:else if loading}
+    <div class="flex h-full flex-grow flex-col content-center justify-center">
+      <SkeletonLoader>
+        {#snippet children({ Skeleton, SkeletonImage })}
+          <!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
+          <Skeleton class=" h-full w-full rounded-s-lg bg-[#D9E6E9]">
+            <SkeletonImage />
+          </Skeleton>
+        {/snippet}
+      </SkeletonLoader>
+    </div>
+  {/if}
 </div>
 
 <style>

package/dist/components/input/Input.stories.svelte

@@ -1,25 +1,25 @@
 <script module>
-	import Input from './Input.svelte';
+  import Input from './Input.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Input,
-		title: 'Design System/Input',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3169&t=sCuBI8dX6K6NjNR6-0'
-			}
-		}
-	});
+  const { Story } = defineMeta({
+    component: Input,
+    title: 'Design System/Input',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3169&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
 
-	let value = '';
-	let email = 'bob@foo.com';
-	let password = 'wordpass';
+  let value = '';
+  let email = 'bob@foo.com';
+  let password = 'wordpass';
 
-	let textareaValue = '';
+  let textareaValue = '';
 </script>
 
 <Story name="Base" args={{ autofocus: true, value: 'Hello' }} />
@@ -29,59 +29,59 @@
 <Story name="Small" args={{ size: 'sm' }} />
 
 <Story name="Login" asChild>
-	<div class="flex flex-col gap-2">
-		<Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
-		<Input bind:value={password} label="Password" id="password-select" type="password" required />
-	</div>
+  <div class="flex flex-col gap-2">
+    <Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
+    <Input bind:value={password} label="Password" id="password-select" type="password" required />
+  </div>
 </Story>
 
 <Story
-	name="Textarea"
-	args={{ label: 'Description', type: 'textarea', placeholder: 'Add a description...' }}
+  name="Textarea"
+  args={{ label: 'Description', type: 'textarea', placeholder: 'Add a description...' }}
 />
 
 <Story name="Prefix" asChild>
-	<Input value="Bob">
-		{#snippet prefix()}
-			<div>Mr.</div>
-		{/snippet}
-	</Input>
+  <Input value="Bob">
+    {#snippet prefix()}
+      <div>Mr.</div>
+    {/snippet}
+  </Input>
 </Story>
 
 <Story name="Suffix" asChild>
-	<Input value="30">
-		{#snippet suffix()}
-			<div>± 1°C</div>
-		{/snippet}
-	</Input>
+  <Input value="30">
+    {#snippet suffix()}
+      <div>± 1°C</div>
+    {/snippet}
+  </Input>
 </Story>
 
 <Story name="Prefix & Suffix" asChild>
-	<Input value="9001">
-		{#snippet prefix()}
-			<div>$</div>
-		{/snippet}
-		{#snippet suffix()}
-			<div>🔥</div>
-		{/snippet}
-	</Input>
+  <Input value="9001">
+    {#snippet prefix()}
+      <div>$</div>
+    {/snippet}
+    {#snippet suffix()}
+      <div>🔥</div>
+    {/snippet}
+  </Input>
 </Story>
 
 <Story name="Validation" asChild>
-	<Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
-		{#snippet prefix({ valid })}
-			<div>
-				{#if valid}
-					😊
-				{:else}
-					😔
-				{/if}
-			</div>
-		{/snippet}
-		{#snippet error()}
-			<p class="pt-2 text-error">Oh no! Too many characters!</p>
-		{/snippet}
-	</Input>
+  <Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
+    {#snippet prefix({ valid })}
+      <div>
+        {#if valid}
+          😊
+        {:else}
+          😔
+        {/if}
+      </div>
+    {/snippet}
+    {#snippet error()}
+      <p class="pt-2 text-error">Oh no! Too many characters!</p>
+    {/snippet}
+  </Input>
 </Story>
 
 <Story name="Clearable" args={{ clearable: true, value: 'Focus me, then click away' }} />