diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
index 7650aa1..40e2fe9 100644
--- a/playgrounds/app/src/components/Editor.tsx
+++ b/playgrounds/app/src/components/Editor.tsx
@@ -23,6 +23,7 @@ import {
 import { MagicMoveElement } from 'shiki-magic-move/types'
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuGroupLabel,
@@ -44,7 +45,7 @@ import {
 } from '~/components/ui/slider'
 import clsx from 'clsx'
 import { TbCheck, TbSettings } from 'solid-icons/tb'
-import { Checkbox } from '~/components/ui/checkbox'
+import { SimplerCheckbox } from '~/components/ui/checkbox'
 import { Label } from '~/components/ui/label'
 import {
   Dialog,
@@ -323,9 +324,7 @@ export default function Editor(props: EditorProps) {
                 placeholder="Search a theme..."
                 itemComponent={props => (
                   <ComboboxItem item={props.item}>
-                    <ComboboxItemLabel class="dark:text-black">
-                      {props.item.rawValue}
-                    </ComboboxItemLabel>
+                    <ComboboxItemLabel>{props.item.rawValue}</ComboboxItemLabel>
                     <ComboboxItemIndicator />
                   </ComboboxItem>
                 )}
@@ -372,8 +371,7 @@ export default function Editor(props: EditorProps) {
                     <DropdownMenuSub>
                       <DropdownMenuSubTrigger>Background</DropdownMenuSubTrigger>
                       <DropdownMenuPortal>
-                        <DropdownMenuSubContent class='w-[200px]'>
-
+                        <DropdownMenuSubContent class="w-[200px]">
                           <DropdownMenuSub>
                             <DropdownMenuSubTrigger>Type</DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
@@ -548,7 +546,7 @@ export default function Editor(props: EditorProps) {
                             }}
                           >
                             <Label for="shadow-checkbox">Show Shadow</Label>
-                            <Checkbox id="shadow-checkbox" checked={props.shadowEnabled} />
+                            <SimplerCheckbox id="shadow-checkbox" checked={props.shadowEnabled} />
                           </DropdownMenuItem>
 
                           <DropdownMenuItem
diff --git a/playgrounds/app/src/components/ui/checkbox.tsx b/playgrounds/app/src/components/ui/checkbox.tsx
index f930da9..c490abe 100644
--- a/playgrounds/app/src/components/ui/checkbox.tsx
+++ b/playgrounds/app/src/components/ui/checkbox.tsx
@@ -1,20 +1,20 @@
-import type { ValidComponent } from "solid-js"
-import { Match, splitProps, Switch } from "solid-js"
+import type { ValidComponent } from 'solid-js'
+import { Match, splitProps, Switch } from 'solid-js'
 
-import * as CheckboxPrimitive from "@kobalte/core/checkbox"
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as CheckboxPrimitive from '@kobalte/core/checkbox'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
-type CheckboxRootProps<T extends ValidComponent = "div"> =
+type CheckboxRootProps<T extends ValidComponent = 'div'> =
   CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined }
 
-const Checkbox = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, CheckboxRootProps<T>>
+const Checkbox = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as CheckboxRootProps, ["class"])
+  const [local, others] = splitProps(props as CheckboxRootProps, ['class'])
   return (
-    <CheckboxPrimitive.Root class={cn("items-top group flex space-x-2", local.class)} {...others}>
+    <CheckboxPrimitive.Root class={cn('items-top group flex space-x-2', local.class)} {...others}>
       <CheckboxPrimitive.Input class="peer" />
       <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
         <CheckboxPrimitive.Indicator>
@@ -54,4 +54,49 @@ const Checkbox = <T extends ValidComponent = "div">(
   )
 }
 
-export { Checkbox }
+const SimplerCheckbox = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>,
+) => {
+  const [local, others] = splitProps(props as CheckboxRootProps, ['class'])
+  return (
+    <CheckboxPrimitive.Root class={cn('items-top group flex space-x-2', local.class)} {...others}>
+      <CheckboxPrimitive.Input class="peer" />
+      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-black ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:border-white peer-hover:border-white data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-black data-[indeterminate]:bg-black data-[checked]:text-white data-[indeterminate]:text-white">
+        <CheckboxPrimitive.Indicator>
+          <Switch>
+            <Match when={!others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            </Match>
+            <Match when={others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l14 0" />
+              </svg>
+            </Match>
+          </Switch>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox, SimplerCheckbox }
diff --git a/playgrounds/app/src/components/ui/combobox.tsx b/playgrounds/app/src/components/ui/combobox.tsx
index 8f9facd..b9c9002 100644
--- a/playgrounds/app/src/components/ui/combobox.tsx
+++ b/playgrounds/app/src/components/ui/combobox.tsx
@@ -21,7 +21,7 @@ const ComboboxItem = <T extends ValidComponent = 'li'>(
   return (
     <ComboboxPrimitive.Item
       class={cn(
-        'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-100 data-[highlighted]:text-black data-[disabled]:opacity-50',
         local.class,
       )}
       {...others}
@@ -49,7 +49,7 @@ const ComboboxItemIndicator = <T extends ValidComponent = 'div'>(
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          class="size-4 dark:text-black"
+          class="size-4"
         >
           <path d="M5 12l5 5l10 -10" />
         </svg>
@@ -157,7 +157,7 @@ const ComboboxContent = <T extends ValidComponent = 'div'>(
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Content
         class={cn(
-          'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
+          'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 bg-white text-black',
           local.class,
         )}
         {...others}
diff --git a/playgrounds/app/src/components/ui/dropdown-menu.tsx b/playgrounds/app/src/components/ui/dropdown-menu.tsx
index c7ddd0f..dd79582 100644
--- a/playgrounds/app/src/components/ui/dropdown-menu.tsx
+++ b/playgrounds/app/src/components/ui/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
-import { splitProps } from "solid-js"
+import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'
+import { splitProps } from 'solid-js'
 
-import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu"
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as DropdownMenuPrimitive from '@kobalte/core/dropdown-menu'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
@@ -12,25 +12,25 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (props) => {
+const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = props => {
   return <DropdownMenuPrimitive.Root gutter={4} {...props} />
 }
 
-type DropdownMenuContentProps<T extends ValidComponent = "div"> =
+type DropdownMenuContentProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
     class?: string | undefined
   }
 
-const DropdownMenuContent = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuContentProps<T>>
+const DropdownMenuContent = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuContentProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"])
+  const [, rest] = splitProps(props as DropdownMenuContentProps, ['class'])
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         class={cn(
-          "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show",
-          props.class
+          'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-white p-1 text-black shadow-md data-[expanded]:animate-content-show',
+          props.class,
         )}
         {...rest}
       />
@@ -38,73 +38,73 @@ const DropdownMenuContent = <T extends ValidComponent = "div">(
   )
 }
 
-type DropdownMenuItemProps<T extends ValidComponent = "div"> =
+type DropdownMenuItemProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
     class?: string | undefined
   }
 
-const DropdownMenuItem = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuItemProps<T>>
+const DropdownMenuItem = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuItemProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"])
+  const [, rest] = splitProps(props as DropdownMenuItemProps, ['class'])
   return (
     <DropdownMenuPrimitive.Item
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        props.class
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
       )}
       {...rest}
     />
   )
 }
 
-const DropdownMenuShortcut: Component<ComponentProps<"span">> = (props) => {
-  const [, rest] = splitProps(props, ["class"])
-  return <span class={cn("ml-auto text-xs tracking-widest opacity-60", props.class)} {...rest} />
+const DropdownMenuShortcut: Component<ComponentProps<'span'>> = props => {
+  const [, rest] = splitProps(props, ['class'])
+  return <span class={cn('ml-auto text-xs tracking-widest opacity-60', props.class)} {...rest} />
 }
 
-const DropdownMenuLabel: Component<ComponentProps<"div"> & { inset?: boolean }> = (props) => {
-  const [, rest] = splitProps(props, ["class", "inset"])
+const DropdownMenuLabel: Component<ComponentProps<'div'> & { inset?: boolean }> = props => {
+  const [, rest] = splitProps(props, ['class', 'inset'])
   return (
     <div
-      class={cn("px-2 py-1.5 text-sm font-semibold", props.inset && "pl-8", props.class)}
+      class={cn('px-2 py-1.5 text-sm font-semibold', props.inset && 'pl-8', props.class)}
       {...rest}
     />
   )
 }
 
-type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
+type DropdownMenuSeparatorProps<T extends ValidComponent = 'hr'> =
   DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
     class?: string | undefined
   }
 
-const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
-  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
+const DropdownMenuSeparator = <T extends ValidComponent = 'hr'>(
+  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"])
+  const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ['class'])
   return (
     <DropdownMenuPrimitive.Separator
-      class={cn("-mx-1 my-1 h-px bg-muted", props.class)}
+      class={cn('-mx-1 my-1 h-px bg-muted', props.class)}
       {...rest}
     />
   )
 }
 
-type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
+type DropdownMenuSubTriggerProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
     class?: string | undefined
     children?: JSX.Element
   }
 
-const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>
+const DropdownMenuSubTrigger = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children"])
+  const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, ['class', 'children'])
   return (
     <DropdownMenuPrimitive.SubTrigger
       class={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-        props.class
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-gray-100 data-[state=open]:bg-accent',
+        props.class,
       )}
       {...rest}
     >
@@ -125,41 +125,41 @@ const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
   )
 }
 
-type DropdownMenuSubContentProps<T extends ValidComponent = "div"> =
+type DropdownMenuSubContentProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
     class?: string | undefined
   }
 
-const DropdownMenuSubContent = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>
+const DropdownMenuSubContent = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"])
+  const [, rest] = splitProps(props as DropdownMenuSubContentProps, ['class'])
   return (
     <DropdownMenuPrimitive.SubContent
       class={cn(
-        "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in",
-        props.class
+        'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-white p-1 text-black shadow-md animate-in',
+        props.class,
       )}
       {...rest}
     />
   )
 }
 
-type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+type DropdownMenuCheckboxItemProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
     class?: string | undefined
     children?: JSX.Element
   }
 
-const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
+const DropdownMenuCheckboxItem = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"])
+  const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ['class', 'children'])
   return (
     <DropdownMenuPrimitive.CheckboxItem
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        props.class
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
       )}
       {...rest}
     >
@@ -184,38 +184,38 @@ const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
   )
 }
 
-type DropdownMenuGroupLabelProps<T extends ValidComponent = "span"> =
+type DropdownMenuGroupLabelProps<T extends ValidComponent = 'span'> =
   DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T> & {
     class?: string | undefined
   }
 
-const DropdownMenuGroupLabel = <T extends ValidComponent = "span">(
-  props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>
+const DropdownMenuGroupLabel = <T extends ValidComponent = 'span'>(
+  props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"])
+  const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ['class'])
   return (
     <DropdownMenuPrimitive.GroupLabel
-      class={cn("px-2 py-1.5 text-sm font-semibold", props.class)}
+      class={cn('px-2 py-1.5 text-sm font-semibold', props.class)}
       {...rest}
     />
   )
 }
 
-type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> =
+type DropdownMenuRadioItemProps<T extends ValidComponent = 'div'> =
   DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
     class?: string | undefined
     children?: JSX.Element
   }
 
-const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>
+const DropdownMenuRadioItem = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>,
 ) => {
-  const [, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"])
+  const [, rest] = splitProps(props as DropdownMenuRadioItemProps, ['class', 'children'])
   return (
     <DropdownMenuPrimitive.RadioItem
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        props.class
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
       )}
       {...rest}
     >
@@ -256,5 +256,5 @@ export {
   DropdownMenuGroup,
   DropdownMenuGroupLabel,
   DropdownMenuRadioGroup,
-  DropdownMenuRadioItem
+  DropdownMenuRadioItem,
 }
diff --git a/playgrounds/app/src/components/ui/slider.tsx b/playgrounds/app/src/components/ui/slider.tsx
index c1750d7..692e72d 100644
--- a/playgrounds/app/src/components/ui/slider.tsx
+++ b/playgrounds/app/src/components/ui/slider.tsx
@@ -1,74 +1,77 @@
-import type { JSX, ValidComponent } from "solid-js"
-import { splitProps } from "solid-js"
+import type { JSX, ValidComponent } from 'solid-js'
+import { splitProps } from 'solid-js'
 
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
-import * as SliderPrimitive from "@kobalte/core/slider"
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+import * as SliderPrimitive from '@kobalte/core/slider'
 
-import { cn } from "~/lib/utils"
-import { Label } from "~/components/ui/label"
+import { cn } from '~/lib/utils'
+import { Label } from '~/components/ui/label'
 
-type SliderRootProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderRootProps<T> & {
+type SliderRootProps<T extends ValidComponent = 'div'> = SliderPrimitive.SliderRootProps<T> & {
   class?: string | undefined
 }
 
-const Slider = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, SliderRootProps<T>>
+const Slider = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, SliderRootProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as SliderRootProps, ["class"])
+  const [local, others] = splitProps(props as SliderRootProps, ['class'])
   return (
     <SliderPrimitive.Root
-      class={cn("relative flex w-full touch-none select-none flex-col items-center", local.class)}
+      class={cn('relative flex w-full touch-none select-none flex-col items-center', local.class)}
       {...others}
     />
   )
 }
 
-type SliderTrackProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderTrackProps<T> & {
+type SliderTrackProps<T extends ValidComponent = 'div'> = SliderPrimitive.SliderTrackProps<T> & {
   class?: string | undefined
 }
 
-const SliderTrack = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, SliderTrackProps<T>>
+const SliderTrack = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, SliderTrackProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as SliderTrackProps, ["class"])
+  const [local, others] = splitProps(props as SliderTrackProps, ['class'])
   return (
     <SliderPrimitive.Track
-      class={cn("relative h-2 w-full grow rounded-full bg-secondary", local.class)}
+      class={cn(
+        'relative h-2 w-full grow rounded-full bg-gray-200 focus-visible:bg-black',
+        local.class,
+      )}
       {...others}
     />
   )
 }
 
-type SliderFillProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderFillProps<T> & {
+type SliderFillProps<T extends ValidComponent = 'div'> = SliderPrimitive.SliderFillProps<T> & {
   class?: string | undefined
 }
 
-const SliderFill = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, SliderFillProps<T>>
+const SliderFill = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, SliderFillProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as SliderFillProps, ["class"])
+  const [local, others] = splitProps(props as SliderFillProps, ['class'])
   return (
     <SliderPrimitive.Fill
-      class={cn("absolute h-full rounded-full bg-primary", local.class)}
+      class={cn('absolute h-full rounded-full bg-gray-600 focus-visible:bg-gray-200', local.class)}
       {...others}
     />
   )
 }
 
-type SliderThumbProps<T extends ValidComponent = "span"> = SliderPrimitive.SliderThumbProps<T> & {
+type SliderThumbProps<T extends ValidComponent = 'span'> = SliderPrimitive.SliderThumbProps<T> & {
   class?: string | undefined
   children?: JSX.Element
 }
 
-const SliderThumb = <T extends ValidComponent = "span">(
-  props: PolymorphicProps<T, SliderThumbProps<T>>
+const SliderThumb = <T extends ValidComponent = 'span'>(
+  props: PolymorphicProps<T, SliderThumbProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as SliderThumbProps, ["class", "children"])
+  const [local, others] = splitProps(props as SliderThumbProps, ['class', 'children'])
   return (
     <SliderPrimitive.Thumb
       class={cn(
-        "top-[-6px] block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-        local.class
+        'top-[-6px] block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        local.class,
       )}
       {...others}
     >
@@ -77,14 +80,14 @@ const SliderThumb = <T extends ValidComponent = "span">(
   )
 }
 
-const SliderLabel = <T extends ValidComponent = "label">(
-  props: PolymorphicProps<T, SliderPrimitive.SliderLabelProps<T>>
+const SliderLabel = <T extends ValidComponent = 'label'>(
+  props: PolymorphicProps<T, SliderPrimitive.SliderLabelProps<T>>,
 ) => {
   return <SliderPrimitive.Label as={Label} {...props} />
 }
 
-const SliderValueLabel = <T extends ValidComponent = "label">(
-  props: PolymorphicProps<T, SliderPrimitive.SliderValueLabelProps<T>>
+const SliderValueLabel = <T extends ValidComponent = 'label'>(
+  props: PolymorphicProps<T, SliderPrimitive.SliderValueLabelProps<T>>,
 ) => {
   return <SliderPrimitive.ValueLabel as={Label} {...props} />
 }
diff --git a/playgrounds/app/src/routes/api/authenticated/_middleware.ts b/playgrounds/app/src/routes/api/authenticated/_middleware.ts
new file mode 100644
index 0000000..3e28e14
--- /dev/null
+++ b/playgrounds/app/src/routes/api/authenticated/_middleware.ts
@@ -0,0 +1 @@
+export function middleware(event: APIEvent): Promise<Response> | undefined {}
diff --git a/playgrounds/app/src/routes/api/authenticated/widgets.ts b/playgrounds/app/src/routes/api/authenticated/widgets.ts
new file mode 100644
index 0000000..e69de29