Updated components

src/components/Box/Box.tsx

@@ -9,6 +9,7 @@ interface Props {
   padding?: string
   background?: string
   width?: string
+  class?: string
 }
 
 export default (props: Props) => {

src/components/Button/Button.tsx

@@ -1,7 +1,8 @@
+
 import './Button.sass'
-import { Show, Switch, Match, type JSXElement } from 'solid-js'
-import { A } from '@solidjs/router'
+import type { JSXElement } from 'solid-js'
 import { Row } from '../index'
+import { Show, Switch, Match } from 'solid-js/web'
 
 interface Props {
   label?: string
@@ -14,6 +15,9 @@ interface Props {
   width?: number
   wide?: boolean
   icon?: (props: { size?: number }) => JSXElement
+  children?: JSXElement
+  background?: string
+  color?: string
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -37,24 +41,24 @@ export default (props: Props) => {
       <Show when={props.to}>
         <Switch>
           <Match when={props.design}>
-            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
+            <a href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 <Show when={props.icon}>
                   <span>{Icon && <Icon size={24} />}</span>
                 </Show>
                 {props.label || 'Click Me!'}
               </button>
-            </A>
+            </a>
           </Match>
           <Match when={!props.design}>
-            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
+            <a href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 <Show when={props.icon}>
                   <span>{Icon && <Icon size={24} />}</span>
                 </Show>
                 {props.label || 'Click Me!'}
               </button>
-            </A>
+            </a>
           </Match>
         </Switch>
       </Show>

src/components/Combobox/Combobox.tsx

@@ -20,7 +20,7 @@ export default (props: Props) => {
         placeholder={props.placeholder}
         value={props.value}
         onChange={props.onChange}
-        itemComponent={(props) => (
+        itemComponent={(props: any) => (
           <Combobox.Item item={props.item} class="combobox__item">
             <Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
             <Combobox.ItemIndicator class="combobox__item-indicator">

src/components/Display/Display.tsx

@@ -1,5 +1,6 @@
 import './Display.sass'
-import { type JSXElement, Switch, Match } from 'solid-js'
+import { Switch, Match } from 'solid-js/web'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement

src/components/Input/Input.tsx

@@ -1,6 +1,7 @@
 import './Input.sass'
 import { TextField } from '@kobalte/core/text-field'
-import { Show, type Setter } from 'solid-js'
+import { Show } from 'solid-js/web'
+import type { Setter } from 'solid-js'
 
 interface Props {
   label?: string

src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import './Link.sass'
-import { A } from '@solidjs/router'
+// import { A } from '@solidjs/router'
 
 interface Props {
   to: string
@@ -10,9 +10,9 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <A href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : ''}>
+      <a href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : ''}>
         {props.children}
-      </A>
+      </a>
     </>
   )
 }

src/components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import './Modal.sass'
-import { type JSXElement, Show } from 'solid-js'
+import type { JSXElement } from 'solid-js'
+import { Show } from 'solid-js/web'
 
 interface Props {
   children: JSXElement

src/components/Modal/ModalButton.tsx

@@ -1,5 +1,6 @@
 import './Modal.sass'
-import { type JSXElement, Show, createSignal } from 'solid-js'
+import { type JSXElement, createSignal } from 'solid-js'
+import { Show } from 'solid-js/web'
 import Button from '../Button/Button'
 
 interface Props {

src/components/Page/Page.tsx

@@ -1,5 +1,5 @@
 import './Page.sass'
-import { Show } from 'solid-js'
+import { Show } from 'solid-js/web'
 
 interface Props {
   children?: any

src/components/Radio/Radio.tsx

@@ -1,6 +1,7 @@
 import './Radio.sass'
 import { RadioGroup } from '@kobalte/core/radio-group'
-import { type Setter, For, Show } from 'solid-js'
+import { For, Show } from 'solid-js/web'
+import type { Setter } from 'solid-js'
 
 interface Props {
   label?: string
@@ -19,7 +20,7 @@ export default (props: Props) => {
 
         <div class="radio-group__items" role="presentation" style={`gap: ${props.gap || 1}rem`}>
           <For each={props.data}>
-            {(item) => (
+            {(item: any) => (
               <RadioGroup.Item value={item} class="radio">
                 <RadioGroup.ItemInput class="radio__input" />
                 <RadioGroup.ItemControl class="radio__control">

src/components/Row/Row.tsx

@@ -1,5 +1,6 @@
 import './Row.sass'
-import { Show, type JSXElement } from 'solid-js'
+import { Show } from 'solid-js/web'
+import type { JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement

src/components/Table/Table.tsx

@@ -55,7 +55,7 @@ export default () => {
           </tr>
         </thead>
         <tbody>
-          {updatedList().map((item) => (
+          {updatedList().map((item: any) => (
             <tr>
               <td>{item.slice(0, 1)}</td>
             </tr>