Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

src/routes/components/Avatar.md

@@ -2,7 +2,7 @@ Avatars are used for project icons and user profile pictures. Low resolution ima
 
 ```svelte example
 <script lang="ts">
-    import Avatar from "omorphia/components/Avatar.svelte";
+    import { Avatar } from "omorphia";
 </script>
 
 <Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />

src/routes/components/Badge.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Badge from "omorphia/components/Badge.svelte";
+    import { Badge } from "omorphia";
 </script>
 
 <Badge color="red" label="Tomato" />

src/routes/components/Button.md

@@ -1,10 +1,31 @@
+### Single example
+
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte";
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
-<Button>Eat cake</Button>
-<Button size="sm" color="primary">Small piece</Button>
-<Button size="lg" color="danger">Big part</Button>
-<Button disabled>Nice try</Button>
+<Button color="primary"><IconDownload /> Download</Button>
+```
+
+### Group example
+
+```svelte example
+<script lang="ts">
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+</script>
+
+<div class="button-group">
+    <Button>Default button</Button>
+    <Button color="raised">Raised button</Button>
+    <Button color="primary">Primary button</Button>
+    <Button color="primary-light">Light primary button</Button>
+    <Button color="danger">Danger button</Button>
+    <Button color="danger-light">Light danger button</Button>
+    <Button color="transparent">Transparent button</Button>
+    <Button disabled>Disabled button</Button>
+    <Button color="primary"><IconDownload /></Button>
+</div>
 ```

src/routes/components/Checkbox.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
 </script>
 
 <Checkbox>Extra components</Checkbox>
@@ -12,7 +12,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
     import IconCarrot from 'virtual:icons/lucide/carrot'
 </script>
 

src/routes/components/CheckboxList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxList from "omorphia/components/CheckboxList.svelte";
+    import { CheckboxList } from "omorphia";
     import IconSquare from 'virtual:icons/lucide/square'
     import IconCircle from 'virtual:icons/lucide/circle'
     import IconTriangle from 'virtual:icons/lucide/triangle'

src/routes/components/CheckboxVirtualList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
+    import { CheckboxVirtualList } from "omorphia";
     import IconStar from 'virtual:icons/heroicons-outline/star'
     import uniqueId from 'lodash.uniqueid'
     

src/routes/components/Chips.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 </script>
 
 <Chips options={[
@@ -22,7 +22,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 
     let foo = 'modpack'
 </script>

src/routes/components/FormField.md

@@ -0,0 +1,10 @@
+```svelte example
+<script lang="ts">
+    import { FormField } from "omorphia";
+    import { TextInput } from "omorphia";
+</script>
+
+<FormField label="Favorite color">
+    <TextInput placeholder="Enter another color..." />
+</FormField>
+```

src/routes/components/NavRow.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import NavRow from "omorphia/components/NavRow.svelte";
+    import { NavRow } from "omorphia";
 </script>
 
 <NavRow

src/routes/components/Pagination.md

@@ -2,7 +2,7 @@ Use pagination to show a set of page numbers and navigation directions to move t
 
 ```svelte example
 <script lang="ts">
-    import Pagination from "omorphia/components/Pagination.svelte"
+    import { Pagination } from "omorphia"
 </script>
 
 <Pagination page={20} count={50} />

src/routes/components/Select.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Select from "omorphia/components/Select.svelte";
+    import { Select } from "omorphia";
     
     let sortMethod = "downloads"
 </script>

src/routes/components/TextInput.md

@@ -0,0 +1,8 @@
+```svelte example
+<script lang="ts">
+    import { TextInput } from "omorphia";
+</script>
+
+<TextInput>Favorite color</TextInput>
+<TextInput placeholder="Enter another color..." />
+```