Folder restructure

src/Accordion/Accordion.jsx → src/components/Accordion/Accordion.jsx

@@ -1,6 +1,6 @@
 import { useState, Children, isValidElement, cloneElement } from "react";
-import { radiusOptions, surfaceColorOptions, childSurfaceColorOptions, textOptions } from "../util/classOptions.js";
-import { useTheme } from "../Context/ThemeContext.jsx";
+import { radiusOptions, surfaceColorOptions, childSurfaceColorOptions, textOptions } from "../../context/classOptions";
+import { useTheme } from "../../context/ThemeContext.jsx";
 import { twMerge, twJoin } from "tailwind-merge";
 
 export default function Accordion({ themeClass = useTheme(), radiusClass = 'round', className, children, onChange = null, initialExpanded = [], accordion = true, flush = false }) {

src/components/Avatar/Avatar.jsx

@@ -0,0 +1,18 @@
+
+
+const Avatar = (props) => {
+    return (
+        <div class={`flex flex-row max-w-48 h-full group cursor-pointer ${props.class}`} >
+            <i class="bi bi-person-circle flex justify-center items-center my-auto mx-2 shadow-md text-opacity-80 group-hover:ring-1 group-hover:ring-info transition-all rounded-full text-4xl size-9"></i>
+            <div class="flex flex-col flex-grow m-auto text-center overflow-hidden">
+                <div class="font-bold text-sm break-all">{props.name}</div>
+                <div class=" font-semibold text-xs truncate">{props.company}</div>
+            </div>
+            <div class="flex items-center mx-4">
+                <i class="bi bi-caret-down-fill text-xs"></i>
+            </div>
+        </div>
+    )
+};
+
+export default Avatar;

src/Button/Button.jsx → src/components/Button/Button.jsx

@@ -1,6 +1,6 @@
-import { buttonColorOptions, radiusOptions, sizeOptions } from "../util/classOptions";
+import { buttonColorOptions, radiusOptions, sizeOptions } from "../../context/classOptions";
 import { LoadingIcon } from "../Icon/Icon.jsx";
-import { useTheme } from "../Context/ThemeContext.jsx";
+import { useTheme } from "../../context/ThemeContext.jsx";
 
 export const Button = (props) => {
     const themeColor = useTheme();

src/Button/LeadingButton.jsx → src/components/Button/LeadingButton.jsx

@@ -1,5 +1,5 @@
-import { buttonColorOptions, radiusOptions, sizeOptions } from "../util/classOptions.js";
-import { useTheme } from "../Context/ThemeContext.jsx";
+import { buttonColorOptions, radiusOptions, sizeOptions } from "../../context/classOptions.js";
+import { useTheme } from "../../context/ThemeContext.jsx";
 
 export const LeadingButton = (props) => {
     const themeColor = useTheme();

src/Button/PillButton.jsx → src/components/Button/PillButton.jsx

@@ -1,6 +1,6 @@
-import { buttonColorOptions, radiusOptions, sizeOptions } from "../util/classOptions";
+import { buttonColorOptions, radiusOptions, sizeOptions } from "../../context/classOptions";
+import { useTheme } from "../../context/ThemeContext.jsx";
 import { LoadingIcon } from "../Icon/Icon.jsx";
-import { useTheme } from "../Context/ThemeContext.jsx";
 
 export const PillButton = (props) => {
     const themeColor = useTheme();

src/Button/ShapeButton.jsx → src/components/Button/ShapeButton.jsx

@@ -1,5 +1,5 @@
-import { buttonColorOptions, radiusOptions } from "../util/classOptions.js";
-import { useTheme } from "../Context/ThemeContext.jsx";
+import { buttonColorOptions, radiusOptions } from "../../context/classOptions.js";
+import { useTheme } from "../../context/ThemeContext.jsx";
 
 export const ShapeButton = (props) => {
     const themeColor = useTheme();

src/Card/Card.jsx → src/components/Card/Card.jsx

@@ -1,5 +1,5 @@
-import { surfaceColorOptions, textOptions, radiusOptions } from "../util/classOptions.js";
-import { useTheme } from "../Context/ThemeContext.jsx";
+import { surfaceColorOptions, textOptions, radiusOptions } from "../../context/classOptions.js";
+import { useTheme } from "../../context/ThemeContext.jsx";
 import { twMerge } from "tailwind-merge";
 
 export default function Card({ ref, themeClass = useTheme(), radiusClass = 'round', className, children }) {

src/Card/Card.stories.jsx → src/components/Card/Card.stories.jsx

@@ -7,7 +7,7 @@ import { LeadingButton } from "../Button/LeadingButton";
 import { Icon } from "../Icon/Icon";
 import { Follower } from "../Textual/Follower";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
-import "../util/styles.css";
+import "../../resources/styles.css";
 
 export default {
     args: {

src/Icon/Icon.jsx → src/components/Icon/Icon.jsx

@@ -1,5 +1,4 @@
-import { cloneElement } from "react";
-import { loadingOptions } from "../util/classOptions";
+import { loadingOptions } from "../../context/classOptions";
 
 export const Icon = ({ icons, loading, loadingClass }) => {
     return (