diff --git a/app.tsx b/app.tsx
index a0ec74a..feacf3a 100644
--- a/app.tsx
+++ b/app.tsx
@@ -11,6 +11,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
+  Skeleton,
   Toaster,
   toastError,
 } from '@/components'
@@ -18,8 +19,8 @@ import React from 'react'
 
 const App = () => {
   return (
-    <div className='h-screen w-full flex items-center justify-center gap-8'>
-      <Button
+    <div className='h-screen w-full flex flex-col justify-center items-center gap-8'>
+      {/* <Button
         onClick={() =>
           toastError({
             title: 'Uspjeh',
@@ -41,15 +42,44 @@ const App = () => {
           <SelectItem value='item-2'>Item 2</SelectItem>
           <SelectItem value='item-3'>Item 3</SelectItem>
         </SelectContent>
-      </Select>
-      <NavigationMenu>
+      </Select> */}
+      <NavigationMenu className='z-30' viewportProps={{ className: 'bg-mode-accent' }}>
         <NavigationMenuItem value='AEF'>
-          <NavigationMenuTrigger>Trigger</NavigationMenuTrigger>
+          <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger>
+          <NavigationMenuContent className='bg-mode-accent'>
+            <div className='w-[300px]'>
+              Content that is displayed Some othe content that is displayed eaf ae faef eaaef aefk
+              peaf piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p Some othe content
+              that is displayed eaf ae faef eaaef aefk peaf piajef pieaj pifjpiaejf pieaj piaej paei
+              jpaeijeaip jeapij p Some othe content that is displayed eaf ae faef eaaef aefk peaf
+              piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value='aef'>
+          <NavigationMenuTrigger>Trigger 2</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <div className='min-w-[200px]'>Content je najbolji jel tak</div>
+            <div className='min-w-[400px]'>
+              Some othe content that is displayed eaf ae faef eaaef aefk peaf piajef pieaj
+              pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p displayed eaf ae faef eaaef aefk peaf
+              piajef pieaj pifjpiaejf pieaj piaej paei jpaeijeaip jeapij p Some othe content that is
+              displayed
+            </div>
           </NavigationMenuContent>
         </NavigationMenuItem>
       </NavigationMenu>
+      <div className='relative z-20'>Text bellow popover</div>
+      <Select>
+        <SelectTrigger className='w-[200px]'>Select</SelectTrigger>
+        <SelectContent hasScroll>
+          {Array.from({ length: 20 }).map((_, index) => (
+            <SelectItem value={index}>{index}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className='grid gap-4'>
+        <Skeleton className='h-[40px] w-[200px]' />
+      </div>
       <Toaster />
     </div>
   )
diff --git a/src/components/_shared/utils/get-animation-style-variables.ts b/src/components/_shared/utils/get-animation-style-variables.ts
index 748ad8d..38d8f43 100644
--- a/src/components/_shared/utils/get-animation-style-variables.ts
+++ b/src/components/_shared/utils/get-animation-style-variables.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-type AnimationStyleVariaiables = {
+type AnimationStyleVariables = {
   animationDuration?: number | undefined
   animationInDuration?: number | undefined
   animationOutDuration?: number | undefined
@@ -27,7 +27,7 @@ type AnimationStyleDefaultTimingFunctions = {
   defaultAnimationOutTimingFunction: React.CSSProperties['animationTimingFunction']
 }
 
-type GetAnimationStyleVariablesProps = AnimationStyleVariaiables &
+type GetAnimationStyleVariablesProps = AnimationStyleVariables &
   (AnimationStyleDefaultDuration | AnimationStyleDefaultDurations) &
   (AnimationStyleDefaultTimingFunction | AnimationStyleDefaultTimingFunctions) &
   Record<string, unknown>
@@ -76,4 +76,4 @@ function getAnimationStyleVariables(props: GetAnimationStyleVariablesProps) {
 
 export { getAnimationStyleVariables }
 
-export type { AnimationStyleVariaiables }
+export type { AnimationStyleVariables }
diff --git a/src/components/accordion/types/accordion-content.ts b/src/components/accordion/types/accordion-content.ts
index e01cdce..143bc38 100644
--- a/src/components/accordion/types/accordion-content.ts
+++ b/src/components/accordion/types/accordion-content.ts
@@ -3,7 +3,7 @@ import { Simplify } from '@renderui/types'
 import React from 'react'
 
 import { AsChildProp } from '@/components/_shared/types/as-child'
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 
 type AccordionContentPrimitiveType = typeof AccordionContentPrimitive
 
@@ -14,7 +14,7 @@ type AccordionContentPrimitiveProps = React.ComponentPropsWithoutRef<AccordionCo
 type AccordionContentChildrenContainerProps = {
   childrenContainerProps?: Simplify<React.ComponentPropsWithoutRef<'div'> & AsChildProp>
   animationDuration?: number
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type AccordionContentProps = Simplify<
   AccordionContentPrimitiveProps & AccordionContentChildrenContainerProps
diff --git a/src/components/button/classes/button-variafnts.ts b/src/components/button/classes/button-variafnts.ts
deleted file mode 100644
index c456322..0000000
--- a/src/components/button/classes/button-variafnts.ts
+++ /dev/null
@@ -1,1720 +0,0 @@
-import { cva } from '@renderui/utils'
-
-const sharedColorVariants = {
-  'brand': [],
-  'destructive': [],
-  'help': [],
-  'info': [],
-  'mode': [],
-  'mode-accent': [],
-  'mode-contrast': [],
-  'mode-contrast-accent': [],
-  'neutral': [],
-  'primary': [],
-  'secondary': [],
-  'success': [],
-  'warning': [],
-} as const
-
-const buttonVariants = cva(['render-ui-button box-border'], {
-  variants: {
-    variant: {
-      unstyled: [],
-      base: [],
-      ghost: [],
-      blink: [],
-      solid: [],
-      shadow: [],
-      border: [],
-      business: [],
-      fill: [],
-      fade: [],
-      mute: [],
-      light: [],
-      twilight: [],
-    },
-    color: sharedColorVariants,
-    shadow: {
-      none: [],
-      sm: [],
-      base: [],
-      md: [],
-      lg: [],
-      xl: [],
-      inner: [],
-    },
-    fit: {
-      true: 'w-fit',
-      false: '',
-    },
-    textShadow: {},
-    size: {
-      xs: ['py-1', 'px-2', 'text-xs', 'font-medium'],
-      sm: ['py-1.5', 'px-3', 'text-xs', 'font-medium'],
-      base: ['py-2', 'px-4', 'text-sm', 'font-medium'],
-      md: ['py-2', 'px-5', 'text-base', 'font-medium'],
-      lg: ['py-2', 'px-8', 'text-lg', 'font-semibold'],
-      xl: ['py-2', 'px-10', 'text-xl', 'font-semibold'],
-      icon: ['p-0.5', 'min-w-[1.5rem]', 'h-fit', 'aspect-square', 'font-medium'],
-      auto: ['h-auto', 'w-auto', 'p-0', 'font-medium'],
-    },
-    shape: {
-      'inline-flex': ['inline-flex', 'items-center', 'justify-center', 'gap-2'],
-      'inline-block': ['inline-block', 'items-center', 'justify-center', 'gap-2'],
-      'block': ['block', 'h-full', 'w-full'],
-    },
-    hasRingOnAnyFocus: {
-      false: [],
-      true: [],
-    },
-    hasDefaultHoverStyles: {
-      false: [],
-      true: [],
-    },
-    hasDefaultPressedStyles: {
-      false: [],
-      true: [],
-    },
-    hasDefaultFocusStyles: {
-      false: [],
-      true: [],
-    },
-    hasDefaultFocusVisibleStyles: {
-      false: [],
-      true: [],
-    },
-    hasContentOnLoading: {
-      true: [],
-      false: [],
-    },
-    hasLowerOpacityOnLoading: {
-      true: [],
-      false: [],
-    },
-    hasHoverEffectOnMobilePressed: {
-      true: [],
-      false: [],
-    },
-    isLoading: {
-      true: [],
-      false: [],
-    },
-  },
-  compoundVariants: [
-    // Foundation
-    {
-      className: [
-        'render-ui-button',
-        'group',
-        'select-none',
-        'subpixel-antialiased',
-        'appearance-none',
-      ],
-    },
-
-    // Keyboard focus styles
-    {
-      hasDefaultFocusVisibleStyles: true,
-      className: [
-        'outline-none',
-        'ring-ring-color',
-        'ring-offset-background',
-        'data-[focus-visible=true]:ring-ring-width',
-        'data-[focus-visible=true]:ring-offset-offset',
-      ],
-    },
-
-    // Defaults
-    {
-      className: [
-        'relative',
-        'overflow-hidden',
-        'rounded',
-        'transition-[box-shadow,background-color]',
-        'duration-fast',
-        'whitespace-nowrap',
-        'cursor-pointer',
-        'disabled:opacity-40',
-        'disabled:cursor-not-allowed',
-        'motion-reduce:transition-none',
-        'data-[loading=true]:cursor-default',
-      ],
-    },
-    {
-      hasDefaultPressedStyles: true,
-      className: 'data-[pressed=true]:scale-active-pressed-scale',
-    },
-    {
-      hasLowerOpacityOnLoading: true,
-      className: ['data-[loading=true]:opacity-70'],
-    },
-    {
-      hasContentOnLoading: false,
-      isLoading: true,
-      className: [
-        '!text-transparent',
-        '[&_.render-ui-loader-dot]:visible',
-        '[&_.render-ui-loader]:visible',
-        '[&_.render-ui-ripple]:visible',
-        '[&_.render-ui-sub-layer]:visible',
-        '[&_>_*]:invisible',
-        '[&]:[transition:all_150ms,color_0s]',
-        '[&_*]:[transition:all_150ms,color_0s]',
-      ],
-    },
-    {
-      variant: ['border', 'fill', 'fade'],
-      className: [
-        'before:content-[""]',
-        'before:absolute',
-        'before:inset-0',
-        'before:inline-block',
-        'before:ring-[1px]',
-        'before:rounded-[inherit]',
-        'before:ring-inset',
-        'before:ring-offset-0',
-      ],
-    },
-    {
-      variant: ['shadow'],
-      className: 'shadow-lg',
-    },
-
-    // Shadow prop
-    {
-      shadow: ['none'],
-      className: 'shadow-none',
-    },
-    {
-      shadow: ['sm'],
-      className: 'shadow-sm',
-    },
-    {
-      shadow: ['base'],
-      className: 'shadow',
-    },
-    {
-      shadow: ['md'],
-      className: 'shadow-md',
-    },
-    {
-      shadow: ['lg'],
-      className: 'shadow-lg',
-    },
-    {
-      shadow: ['xl'],
-      className: 'shadow-xl',
-    },
-    {
-      shadow: ['inner'],
-      className: 'shadow-inner',
-    },
-
-    // Variant shared
-    {
-      variant: ['base', 'ghost', 'blink', 'border', 'fade'],
-      className: 'bg-transparent',
-    },
-    {
-      color: [
-        'brand',
-        'destructive',
-        'help',
-        'info',
-        'mode',
-        'mode-accent',
-        'neutral',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-      ],
-      variant: ['fade', 'mute'],
-      className: ['bg-mode-accent'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: [
-        'brand',
-        'destructive',
-        'help',
-        'info',
-        'mode',
-        'mode-contrast',
-        'mode-accent',
-        'mode-contrast-accent',
-        'neutral',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-      ],
-      variant: ['fade', 'mute'],
-      className: ['data-[hover=true]:bg-mode-accent/80'],
-    },
-    {
-      color: ['mode-contrast', 'mode-contrast-accent'],
-      variant: ['fade', 'mute'],
-      className: ['bg-mode-contrast-accent'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: ['mode-contrast', 'mode-contrast-accent'],
-      variant: ['fade', 'mute'],
-      className: ['data-[hover=true]:bg-mode-contrast-accent/80'],
-    },
-    {
-      variant: ['fade'],
-      className: ['border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      variant: ['mute'],
-      className: ['data-[hover=true]:border-neutral/40'],
-    },
-
-    // Mode variants
-    {
-      color: 'mode',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-mode/10'],
-    },
-    {
-      color: 'mode',
-      variant: ['shadow'],
-      className: ['shadow-mode/30'],
-    },
-    {
-      color: 'mode',
-      variant: ['border', 'fill'],
-      className: ['border-mode/70', 'data-[hover=true]:border-mode'],
-    },
-    {
-      color: 'mode',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-mode',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-mode/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-mode', 'data-[hover=true]:text-mode-foreground'],
-    },
-    {
-      color: 'mode',
-      variant: ['solid', 'shadow'],
-      className: ['bg-mode', 'text-mode-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-mode/[90%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-mode/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-mode-foreground', 'data-[hover=true]:bg-mode'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: ['fade', 'mute'],
-      className: ['data-[hover=true]:text-mode/90'],
-    },
-    {
-      color: 'mode',
-      variant: 'light',
-      className: 'bg-mode/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'light',
-      className: ['data-[hover=true]:bg-mode/20'],
-    },
-    {
-      color: 'mode',
-      variant: 'twilight',
-      className: ['bg-mode/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-mode-foreground', 'data-[hover=true]:bg-mode'],
-    },
-
-    // Mode contrast variants
-    {
-      color: 'mode-contrast',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-mode-contrast/10'],
-    },
-    {
-      color: 'mode-contrast',
-      variant: ['shadow'],
-      className: ['shadow-mode-contrast/30'],
-    },
-    {
-      color: 'mode-contrast',
-      variant: ['border', 'fill'],
-      className: ['border-mode-contrast/70', 'data-[hover=true]:border-mode-contrast'],
-    },
-    {
-      color: 'mode-contrast',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-mode-contrast',
-    },
-    {
-      color: 'mode-contrast',
-      variant: ['solid', 'shadow'],
-      className: 'text-mode-contrast-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-mode-contrast/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'blink',
-      className: [
-        'data-[hover=true]:bg-mode-contrast',
-        'data-[hover=true]:text-mode-contrast-foreground',
-      ],
-    },
-    {
-      color: 'mode-contrast',
-      variant: ['solid', 'shadow'],
-      className: ['bg-mode-contrast', 'text-mode-contrast-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-mode-contrast/[90%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-mode-contrast/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'fill',
-      className: [
-        'data-[hover=true]:text-mode-contrast-foreground',
-        'data-[hover=true]:bg-mode-contrast',
-      ],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: ['fade', 'mute'],
-      className: ['data-[hover=true]:text-mode-contrast/90'],
-    },
-    {
-      color: 'mode-contrast',
-      variant: 'light',
-      className: 'bg-mode-contrast/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-mode-contrast/[20%]',
-    },
-    {
-      color: 'mode-contrast',
-      variant: 'twilight',
-      className: ['bg-mode-contrast/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast',
-      variant: 'twilight',
-      className: [
-        'data-[hover=true]:text-mode-contrast-foreground',
-        'data-[hover=true]:bg-mode-contrast',
-      ],
-    },
-
-    // Mode accent variants
-    {
-      color: 'mode-accent',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-mode-contrast/10'],
-    },
-    {
-      color: 'mode-accent',
-      variant: ['shadow'],
-      className: ['shadow-mode-accent/30'],
-    },
-    {
-      color: 'mode-accent',
-      variant: ['border', 'fill'],
-      className: ['border-mode-accent/70', 'data-[hover=true]:border-mode-accent'],
-    },
-    {
-      color: 'mode-accent',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'light', 'twilight'],
-      className: 'text-mode-accent',
-    },
-    {
-      color: 'mode-accent',
-      variant: ['solid', 'shadow'],
-      className: 'text-mode-accent-foreground',
-    },
-    {
-      variant: ['fade', 'mute'],
-      className: 'text-mode',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-mode-accent/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'blink',
-      className: [
-        'data-[hover=true]:bg-mode-accent',
-        'data-[hover=true]:text-mode-accent-foreground',
-      ],
-    },
-    {
-      color: 'mode-accent',
-      variant: ['solid', 'shadow'],
-      className: ['bg-mode-accent', 'text-mode-accent-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-mode-accent/90'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-mode-accent/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'fill',
-      className: [
-        'data-[hover=true]:text-mode-accent-foreground',
-        'data-[hover=true]:bg-mode-accent',
-      ],
-    },
-    {
-      color: 'mode-accent',
-      variant: ['fade', 'mute'],
-      className: ['bg-mode-accent'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: ['fade', 'mute'],
-      className: ['data-[hover=true]:text-mode/90', 'data-[hover=true]:bg-mode-accent/90'],
-    },
-    {
-      color: 'mode-accent',
-      variant: 'fade',
-      className: ['border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'fade',
-      className: ['data-[hover=true]:border-neutral/[40%]'],
-    },
-    {
-      color: 'mode-accent',
-      variant: 'light',
-      className: 'bg-mode-accent/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-mode-accent/20',
-    },
-    {
-      color: 'mode-accent',
-      variant: 'twilight',
-      className: ['bg-mode-accent/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-accent',
-      variant: 'twilight',
-      className: [
-        'data-[hover=true]:text-mode-accent-foreground',
-        'data-[hover=true]:bg-mode-accent',
-      ],
-    },
-
-    // Mode contrast accent variants
-    {
-      color: 'mode-contrast-accent',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-mode-contrast-accent/10'],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['shadow'],
-      className: ['shadow-mode-contrast-accent/30'],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['border', 'fill'],
-      className: [
-        'border-mode-contrast-accent/70',
-        'data-[hover=true]:border-mode-contrast-accent',
-      ],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-mode-contrast-accent',
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['solid', 'shadow'],
-      className: 'text-mode-contrast-accent-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-mode-contrast-accent/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'blink',
-      className: [
-        'data-[hover=true]:bg-mode-contrast-accent',
-        'data-[hover=true]:text-mode-contrast-accent-foreground',
-      ],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['solid', 'shadow'],
-      className: ['bg-mode-contrast-accent', 'text-mode-contrast-accent-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-mode-contrast-accent/90'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-mode-contrast-accent/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'fill',
-      className: [
-        'data-[hover=true]:text-mode-contrast-accent-foreground',
-        'data-[hover=true]:bg-mode-contrast-accent',
-      ],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: ['fade', 'mute'],
-      className: [
-        'bg-mode-accent',
-        'data-[hover=true]:text-mode-contrast/90',
-        'data-[hover=true]:bg-mode-accent/90',
-      ],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: 'fade',
-      className: ['border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'fade',
-      className: ['data-[hover=true]:border-neutral/[40%]'],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: 'light',
-      className: ['bg-mode-contrast-accent/[15%]'],
-    },
-    {
-      color: 'mode-contrast-accent',
-      variant: 'twilight',
-      className: ['bg-mode-contrast-accent/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'mode-contrast-accent',
-      variant: 'twilight',
-      className: [
-        'data-[hover=true]:text-mode-contrast-accent-foreground',
-        'data-[hover=true]:bg-mode-contrast-accent',
-      ],
-    },
-
-    // Neutral variants
-    {
-      color: 'neutral',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-neutral/10'],
-    },
-    {
-      color: 'neutral',
-      variant: ['shadow'],
-      className: ['shadow-neutral/30'],
-    },
-    {
-      color: 'neutral',
-      variant: ['border', 'fill'],
-      className: ['border-neutral/70', 'data-[hover=true]:border-neutral'],
-    },
-    {
-      color: 'neutral',
-      variant: ['base', 'ghost', 'blink', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-neutral',
-    },
-    {
-      color: 'neutral',
-      variant: ['solid', 'shadow', 'border', 'fill'],
-      className: 'text-neutral-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-neutral/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-neutral', 'data-[hover=true]:text-neutral-foreground'],
-    },
-    {
-      color: 'neutral',
-      variant: ['solid', 'shadow'],
-      className: ['bg-neutral', 'text-neutral-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-neutral/90',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-neutral/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-neutral-foreground', 'data-[hover=true]:bg-neutral'],
-    },
-    {
-      color: 'neutral',
-      variant: 'fade',
-      className: ['bg-neutral-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-neutral/[75%]',
-        'data-[hover=true]:bg-neutral-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'neutral',
-      variant: 'mute',
-      className: ['bg-neutral-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'mute',
-      className: [
-        'data-[hover=true]:text-neutral/[75%]',
-        'data-[hover=true]:bg-neutral-accent/[45%]',
-      ],
-    },
-    {
-      color: 'neutral',
-      variant: 'light',
-      className: 'bg-neutral/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-neutral/20',
-    },
-    {
-      color: 'neutral',
-      variant: 'twilight',
-      className: ['bg-neutral/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'neutral',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-neutral-foreground', 'data-[hover=true]:bg-neutral'],
-    },
-
-    // Primary variants
-    {
-      color: 'primary',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-primary/10'],
-    },
-    {
-      color: 'primary',
-      variant: ['shadow'],
-      className: ['shadow-primary/30'],
-    },
-    {
-      color: 'primary',
-      variant: ['border', 'fill'],
-      className: ['before:ring-primary/70', 'data-[hover=true]:before:ring-primary'],
-    },
-    {
-      color: 'primary',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-primary',
-    },
-    {
-      color: 'primary',
-      variant: ['solid', 'shadow'],
-      className: 'text-primary-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-primary/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-primary', 'data-[hover=true]:text-primary-foreground'],
-    },
-    {
-      color: 'primary',
-      variant: ['solid', 'shadow'],
-      className: ['bg-primary', 'text-primary-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-primary/90',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-primary/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-primary-foreground', 'data-[hover=true]:bg-primary'],
-    },
-    {
-      color: 'primary',
-      variant: 'fade',
-      className: ['bg-mode-accent', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-primary/90',
-        'data-[hover=true]:bg-mode-accent/90',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'primary',
-      variant: 'mute',
-      className: ['bg-mode-accent'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-primary/90', 'data-[hover=true]:bg-mode-accent/90'],
-    },
-    {
-      color: 'primary',
-      variant: 'light',
-      className: 'bg-primary/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-primary/20',
-    },
-    {
-      color: 'primary',
-      variant: 'twilight',
-      className: ['bg-primary/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'primary',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-primary-foreground', 'data-[hover=true]:bg-primary'],
-    },
-
-    // Secondary variants
-    {
-      color: 'secondary',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-secondary/10'],
-    },
-    {
-      color: 'secondary',
-      variant: ['shadow'],
-      className: ['shadow-secondary/30'],
-    },
-    {
-      color: 'secondary',
-      variant: ['border', 'fill'],
-      className: ['before:ring-secondary/70', 'data-[hover=true]:before:ring-secondary'],
-    },
-    {
-      color: 'secondary',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-secondary',
-    },
-    {
-      color: 'secondary',
-      variant: ['solid', 'shadow'],
-      className: 'text-secondary-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-secondary/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-secondary', 'data-[hover=true]:text-secondary-foreground'],
-    },
-    {
-      color: 'secondary',
-      variant: ['solid', 'shadow'],
-      className: ['bg-secondary', 'text-secondary-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-secondary/90'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-secondary/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-secondary-foreground', 'data-[hover=true]:bg-secondary'],
-    },
-    {
-      color: 'secondary',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-secondary/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'secondary',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'mute',
-      className: [
-        'data-[hover=true]:text-secondary/[75%]',
-        'data-[hover=true]:bg-mode-accent/[45%]',
-      ],
-    },
-    {
-      color: 'secondary',
-      variant: 'light',
-      className: 'bg-secondary/[15%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-secondary/20',
-    },
-    {
-      color: 'secondary',
-      variant: 'twilight',
-      className: ['bg-secondary/[15%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'secondary',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-secondary-foreground', 'data-[hover=true]:bg-secondary'],
-    },
-
-    // Destructive variants
-    {
-      color: 'destructive',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-destructive/10'],
-    },
-    {
-      color: 'destructive',
-      variant: ['shadow'],
-      className: ['shadow-destructive/30'],
-    },
-    {
-      color: 'destructive',
-      variant: ['border', 'fill'],
-      className: ['before:ring-destructive/70', 'data-[hover=true]:before:ring-destructive'],
-    },
-    {
-      color: 'destructive',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-destructive',
-    },
-    {
-      color: 'destructive',
-      variant: ['solid', 'shadow'],
-      className: 'text-destructive-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-destructive/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'blink',
-      className: [
-        'data-[hover=true]:bg-destructive',
-        'data-[hover=true]:text-destructive-foreground',
-      ],
-    },
-    {
-      color: 'destructive',
-      variant: ['solid', 'shadow'],
-      className: ['bg-destructive', 'text-destructive-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: ['solid', 'shadow'],
-      className: ['data-[hover=true]:bg-destructive/[85%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-destructive/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'fill',
-      className: [
-        'data-[hover=true]:text-destructive-foreground',
-        'data-[hover=true]:bg-destructive',
-      ],
-    },
-    {
-      color: 'destructive',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-destructive/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'destructive',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'mute',
-      className: [
-        'data-[hover=true]:text-destructive/[75%]',
-        'data-[hover=true]:bg-mode-accent/[45%]',
-      ],
-    },
-    {
-      color: 'destructive',
-      variant: 'light',
-      className: 'bg-destructive/20',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-destructive/30',
-    },
-    {
-      color: 'destructive',
-      variant: 'twilight',
-      className: ['bg-destructive/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'destructive',
-      variant: 'twilight',
-      className: [
-        'data-[hover=true]:text-destructive-foreground',
-        'data-[hover=true]:bg-destructive',
-      ],
-    },
-
-    // Success variants
-    {
-      color: 'success',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-success/10'],
-    },
-    {
-      color: 'success',
-      variant: ['shadow'],
-      className: ['shadow-success/30'],
-    },
-    {
-      color: 'success',
-      variant: ['border', 'fill'],
-      className: ['before:ring-success/70', 'data-[hover=true]:before:ring-success'],
-    },
-    {
-      color: 'success',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-success',
-    },
-    {
-      color: 'success',
-      variant: ['solid', 'shadow'],
-      className: 'text-success-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-success/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-success', 'data-[hover=true]:text-success-foreground'],
-    },
-    {
-      color: 'success',
-      variant: ['solid', 'shadow'],
-      className: ['bg-success', 'text-success-foreground', 'data-[hover=true]:bg-success/[85%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-success/[85%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-success/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-success-foreground', 'data-[hover=true]:bg-success'],
-    },
-    {
-      color: 'success',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-success/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-success/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'success',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-success/[75%]', 'data-[hover=true]:bg-mode-accent/[45%]'],
-    },
-    {
-      color: 'success',
-      variant: 'light',
-      className: ['bg-success/20', 'data-[hover=true]:bg-success/30'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-success/30',
-    },
-    {
-      color: 'success',
-      variant: 'twilight',
-      className: ['bg-success/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'success',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-success-foreground', 'data-[hover=true]:bg-success'],
-    },
-
-    // Warning variants
-    {
-      color: 'warning',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-warning/10'],
-    },
-    {
-      color: 'warning',
-      variant: ['shadow'],
-      className: ['shadow-warning/30'],
-    },
-    {
-      color: 'warning',
-      variant: ['border', 'fill'],
-      className: ['before:ring-warning/70', 'data-[hover=true]:before:ring-warning'],
-    },
-    {
-      color: 'warning',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-warning',
-    },
-    {
-      color: 'warning',
-      variant: ['solid', 'shadow'],
-      className: 'text-warning-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-warning/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-warning', 'data-[hover=true]:text-warning-foreground'],
-    },
-    {
-      color: 'warning',
-      variant: ['solid', 'shadow'],
-      className: ['bg-warning', 'text-warning-foreground'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-warning/[85%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-warning/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-warning-foreground', 'data-[hover=true]:bg-warning'],
-    },
-    {
-      color: 'warning',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-warning/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'warning',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-warning/[75%]', 'data-[hover=true]:bg-mode-accent/[45%]'],
-    },
-    {
-      color: 'warning',
-      variant: 'light',
-      className: ['bg-warning/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-warning/30',
-    },
-    {
-      color: 'warning',
-      variant: 'twilight',
-      className: ['bg-warning/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'warning',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-warning-foreground', 'data-[hover=true]:bg-warning'],
-    },
-
-    // Info variants
-    {
-      color: 'info',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-info/10'],
-    },
-    {
-      color: 'info',
-      variant: ['shadow'],
-      className: ['shadow-info/30'],
-    },
-    {
-      color: 'info',
-      variant: ['border', 'fill'],
-      className: ['before:ring-info/70', 'data-[hover=true]:before:ring-info'],
-    },
-    {
-      color: 'info',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-info',
-    },
-    {
-      color: 'info',
-      variant: ['solid', 'shadow'],
-      className: 'text-info-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-info/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-info', 'data-[hover=true]:text-info-foreground'],
-    },
-    {
-      color: 'info',
-      variant: ['solid', 'shadow'],
-      className: ['bg-info', 'text-info-foreground', 'data-[hover=true]:bg-info/[85%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-info/[85%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-info/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-info-foreground', 'data-[hover=true]:bg-info'],
-    },
-    {
-      color: 'info',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-info/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'info',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-info/[75%]', 'data-[hover=true]:bg-mode-accent/[45%]'],
-    },
-    {
-      color: 'info',
-      variant: 'light',
-      className: 'bg-info/20',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-info/30',
-    },
-    {
-      color: 'info',
-      variant: 'twilight',
-      className: ['bg-info/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'info',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-info-foreground', 'data-[hover=true]:bg-info'],
-    },
-
-    // Help variants
-    {
-      color: 'help',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-help/10'],
-    },
-    {
-      color: 'help',
-      variant: ['shadow'],
-      className: ['shadow-help/30'],
-    },
-    {
-      color: 'help',
-      variant: ['border', 'fill'],
-      className: ['before:ring-help/70', 'data-[hover=true]:before:ring-help'],
-    },
-    {
-      color: 'help',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-help',
-    },
-    {
-      color: 'help',
-      variant: ['solid', 'shadow'],
-      className: 'text-help-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-help/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-help', 'data-[hover=true]:text-help-foreground'],
-    },
-    {
-      color: 'help',
-      variant: ['solid', 'shadow'],
-      className: ['bg-help', 'text-help-foreground', 'data-[hover=true]:bg-help/[85%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-help/[85%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-help/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-help-foreground', 'data-[hover=true]:bg-help'],
-    },
-    {
-      color: 'help',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-help/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'help',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-help/[75%]', 'data-[hover=true]:bg-mode-accent/[45%]'],
-    },
-    {
-      color: 'help',
-      variant: 'light',
-      className: 'bg-help/20',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-help/30',
-    },
-    {
-      color: 'help',
-      variant: 'twilight',
-      className: ['bg-help/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'help',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-help-foreground', 'data-[hover=true]:bg-help'],
-    },
-
-    // Brand variants
-    {
-      color: 'brand',
-      variant: ['solid', 'border', 'fill', 'light', 'twilight'],
-      className: ['shadow-brand/10'],
-    },
-    {
-      color: 'brand',
-      variant: ['shadow'],
-      className: ['shadow-brand/30'],
-    },
-    {
-      color: 'brand',
-      variant: ['border', 'fill'],
-      className: ['before:ring-brand/70', 'data-[hover=true]:before:ring-brand'],
-    },
-    {
-      color: 'brand',
-      variant: ['base', 'ghost', 'blink', 'border', 'fill', 'fade', 'mute', 'light', 'twilight'],
-      className: 'text-brand',
-    },
-    {
-      color: 'brand',
-      variant: ['solid', 'shadow'],
-      className: 'text-brand-foreground',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'ghost',
-      className: ['data-[hover=true]:bg-brand/10'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'blink',
-      className: ['data-[hover=true]:bg-brand', 'data-[hover=true]:text-brand-foreground'],
-    },
-    {
-      color: 'brand',
-      variant: ['solid', 'shadow'],
-      className: ['bg-brand', 'text-brand-foreground', 'data-[hover=true]:bg-brand/[85%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: ['solid', 'shadow'],
-      className: 'data-[hover=true]:bg-brand/[85%]',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'border',
-      className: ['data-[hover=true]:bg-brand/[5%]'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'fill',
-      className: ['data-[hover=true]:text-brand-foreground', 'data-[hover=true]:bg-brand'],
-    },
-    {
-      color: 'brand',
-      variant: 'fade',
-      className: ['bg-mode-accent/50', 'border-neutral/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'fade',
-      className: [
-        'data-[hover=true]:text-brand/[75%]',
-        'data-[hover=true]:bg-mode-accent/[40%]',
-        'data-[hover=true]:border-neutral/[40%]',
-      ],
-    },
-    {
-      color: 'brand',
-      variant: 'mute',
-      className: ['bg-mode-accent/50'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'mute',
-      className: ['data-[hover=true]:text-brand/[75%]', 'data-[hover=true]:bg-mode-accent/[45%]'],
-    },
-    {
-      color: 'brand',
-      variant: 'light',
-      className: 'bg-brand/20',
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'light',
-      className: 'data-[hover=true]:bg-brand/30',
-    },
-    {
-      color: 'brand',
-      variant: 'twilight',
-      className: ['bg-brand/20'],
-    },
-    {
-      hasDefaultHoverStyles: true,
-      color: 'brand',
-      variant: 'twilight',
-      className: ['data-[hover=true]:text-brand-foreground', 'data-[hover=true]:bg-brand'],
-    },
-    {
-      hasRingOnAnyFocus: true,
-      className: ['data-[focus=true]:ring-ring-width', 'data-[focus=true]:ring-offset-offset'],
-    },
-  ],
-  defaultVariants: {
-    color: 'mode-contrast',
-    variant: 'solid',
-    shape: 'inline-flex',
-    size: 'base',
-    hasDefaultPressedStyles: true,
-    hasDefaultFocusStyles: true,
-    hasDefaultHoverStyles: true,
-    hasDefaultFocusVisibleStyles: true,
-    hasRingOnAnyFocus: false,
-    hasLowerOpacityOnLoading: false,
-    hasContentOnLoading: true,
-  },
-})
-
-export { buttonVariants }
diff --git a/src/components/collapsible/types/collapsible-content.ts b/src/components/collapsible/types/collapsible-content.ts
index f351c6a..e6f9943 100644
--- a/src/components/collapsible/types/collapsible-content.ts
+++ b/src/components/collapsible/types/collapsible-content.ts
@@ -1,4 +1,4 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { CollapsibleContent as CollapsibleContentPrimitive } from '@radix-ui/react-collapsible'
 import { Simplify } from '@renderui/types'
 
@@ -11,7 +11,7 @@ type CollapsibleContentPrimitiveProps =
 
 type CollapsibleCustomProps = {
   hasDefaultAnimation?: boolean
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type CollapsibleContentProps = Simplify<CollapsibleContentPrimitiveProps & CollapsibleCustomProps>
 
diff --git a/src/components/dialog/types/dialog-content.ts b/src/components/dialog/types/dialog-content.ts
index 77360c9..6194975 100644
--- a/src/components/dialog/types/dialog-content.ts
+++ b/src/components/dialog/types/dialog-content.ts
@@ -6,7 +6,7 @@ import { Simplify } from '@renderui/types'
 import React from 'react'
 
 import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { ButtonProps } from '@/components/button'
 
 type DialogContentPrimitiveType = typeof DialogContentPrimitive
@@ -24,6 +24,6 @@ type DialogContentRenderUIProps = {
 }
 
 type DialogContentProps = Simplify<DialogContentPrimitiveProps & DialogContentRenderUIProps> &
-  AnimationStyleVariaiables
+  AnimationStyleVariables
 
 export type { DialogContentProps, DialogContentRef }
diff --git a/src/components/heading/classes/heading-classes.ts b/src/components/heading/classes/heading-classes.ts
index 72281eb..dbca333 100644
--- a/src/components/heading/classes/heading-classes.ts
+++ b/src/components/heading/classes/heading-classes.ts
@@ -6,22 +6,25 @@ import { textOverflowVariants } from '@/components/_shared/variants/text-overflo
 import { textShadowVariants } from '@/components/_shared/variants/text-shadow'
 import { textSizeVariants } from '@/components/_shared/variants/text-size'
 
-const headingClasses = cva('render-ui-heading box-border text-mode-contrast', {
-  variants: {
-    as: {
-      h1: ['text-4xl', 'font-bold', 'tracking-tight'],
-      h2: ['text-3xl', 'font-bold', 'tracking-tight'],
-      h3: ['text-2xl', 'font-bold', 'tracking-tight'],
-      h4: ['text-xl', 'font-bold', 'tracking-tight'],
-      h5: ['text-lg', 'font-bold', 'tracking-tight'],
-      h6: ['text-base', 'font-bold', 'tracking-tight'],
+const headingClasses = cva(
+  'render-ui-heading box-border text-mode-contrast font-bold tracking-tight',
+  {
+    variants: {
+      as: {
+        h1: ['text-4xl'],
+        h2: ['text-3xl'],
+        h3: ['text-2xl'],
+        h4: ['text-xl'],
+        h5: ['text-lg'],
+        h6: ['text-base'],
+      },
+      size: textSizeVariants,
+      textBreak: textBreakVariants,
+      shadow: textShadowVariants,
+      overflow: textOverflowVariants,
+      letterSpacing: letterSpacingVariants,
     },
-    size: textSizeVariants,
-    textBreak: textBreakVariants,
-    shadow: textShadowVariants,
-    overflow: textOverflowVariants,
-    letterSpacing: letterSpacingVariants,
   },
-})
+)
 
 export { headingClasses }
diff --git a/src/components/navigation-menu/components/navigation-menu-content.tsx b/src/components/navigation-menu/components/navigation-menu-content.tsx
index 2a6652d..6795a0a 100644
--- a/src/components/navigation-menu/components/navigation-menu-content.tsx
+++ b/src/components/navigation-menu/components/navigation-menu-content.tsx
@@ -32,7 +32,7 @@ const NavigationMenuContent = React.forwardRef<
         ...getAnimationStyleVariables({
           ...props,
           defaultAnimationInDuration: 300,
-          defaultAnimationOutDuration: 200,
+          defaultAnimationOutDuration: 300,
           defaultAnimationTimingFunction: 'ease',
         }),
         ...style,
diff --git a/src/components/navigation-menu/components/navigation-menu.tsx b/src/components/navigation-menu/components/navigation-menu.tsx
index 2b5d841..4202321 100644
--- a/src/components/navigation-menu/components/navigation-menu.tsx
+++ b/src/components/navigation-menu/components/navigation-menu.tsx
@@ -96,7 +96,7 @@ const NavigationMenu = React.forwardRef<NavigationMenuRef, NavigationMenuProps>(
             ...getAnimationStyleVariables({
               ...props,
               defaultAnimationInDuration: 300,
-              defaultAnimationOutDuration: 200,
+              defaultAnimationOutDuration: 300,
               defaultAnimationTimingFunction: 'ease',
             }),
             ...viewportStyle,
diff --git a/src/components/navigation-menu/constants/constants.ts b/src/components/navigation-menu/constants/constants.ts
index 1df602d..e5d13c7 100644
--- a/src/components/navigation-menu/constants/constants.ts
+++ b/src/components/navigation-menu/constants/constants.ts
@@ -14,7 +14,7 @@ const DEFAULT_NAVIGATION_MENU_VIEWPORT_CONTAINER_CLASSNAME =
   'render-ui-navigation-menu-viewport-container absolute z-10 left-0 top-full flex w-fit justify-center perspective-[2000px]'
 
 const DEFAULT_NAVIGATION_MENU_VIEWPORT_CLASSNAME =
-  'render-ui-navigation-menu-viewport relative z-10 flex-1 mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-mode shadow-even-xl [&]:shadow-mode-contrast/20 dark:border-[1px] dark:border-mode-accent [&]:dark:shadow-mode-contrast/[1%] transition-all duration-fast data-[state=closed]:animate-navigation-menu-scale-out data-[state=open]:animate-navigation-menu-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]'
+  'render-ui-navigation-menu-viewport relative z-10 flex-1 mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-mode shadow-even-xl [&]:shadow-mode-contrast/20 dark:border-[1px] dark:border-mode-accent [&]:dark:shadow-mode-contrast/[1%] transition-[width,height] duration-medium data-[state=closed]:animate-navigation-menu-scale-out data-[state=open]:animate-navigation-menu-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]'
 
 const DEFAULT_NAVIGATION_MENU_ITEM_CLASSNAME = 'render-ui-navigation-menu-item'
 
diff --git a/src/components/navigation-menu/types/navigation-menu-content.ts b/src/components/navigation-menu/types/navigation-menu-content.ts
index 6d29308..90e0bef 100644
--- a/src/components/navigation-menu/types/navigation-menu-content.ts
+++ b/src/components/navigation-menu/types/navigation-menu-content.ts
@@ -1,4 +1,4 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { NavigationMenuContent as NavigationMenuContentPrimitive } from '@radix-ui/react-navigation-menu'
 import React from 'react'
 
@@ -7,6 +7,6 @@ type NavigationMenuContentPrimitiveType = typeof NavigationMenuContentPrimitive
 type NavigationMenuContentRef = React.ElementRef<NavigationMenuContentPrimitiveType>
 
 type NavigationMenuContentProps =
-  React.ComponentPropsWithoutRef<NavigationMenuContentPrimitiveType> & AnimationStyleVariaiables
+  React.ComponentPropsWithoutRef<NavigationMenuContentPrimitiveType> & AnimationStyleVariables
 
 export type { NavigationMenuContentProps, NavigationMenuContentRef }
diff --git a/src/components/navigation-menu/types/navigation-menu.ts b/src/components/navigation-menu/types/navigation-menu.ts
index 1220a3c..e1e5612 100644
--- a/src/components/navigation-menu/types/navigation-menu.ts
+++ b/src/components/navigation-menu/types/navigation-menu.ts
@@ -1,4 +1,4 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import {
   NavigationMenu as NavigationMenuPrimitive,
   NavigationMenuIndicator as NavigationMenuIndicatorPrimitive,
@@ -56,7 +56,7 @@ type NavigationMenuRenderUIProps = {
   indicatorRef?: React.Ref<NavigationMenuIndicatorRef>
   indicatorArrowProps?: NavigationMenuIndicatorArrowProps
   indicatorArrowRef?: React.Ref<NavigationMenuIndicatorArrowRef>
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type NavigationMenuProps = Simplify<NavigationMenuPrimitiveProps & NavigationMenuRenderUIProps>
 
diff --git a/src/components/overlay/types/overlay.ts b/src/components/overlay/types/overlay.ts
index 98a0c80..6577df7 100644
--- a/src/components/overlay/types/overlay.ts
+++ b/src/components/overlay/types/overlay.ts
@@ -1,10 +1,10 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { DialogOverlay as OverlayPrimitive } from '@radix-ui/react-dialog'
 
 type OverlayPrimitiveType = typeof OverlayPrimitive
 
 type OverlayRef = React.ElementRef<OverlayPrimitiveType>
 
-type OverlayProps = React.ComponentPropsWithRef<OverlayPrimitiveType> & AnimationStyleVariaiables
+type OverlayProps = React.ComponentPropsWithRef<OverlayPrimitiveType> & AnimationStyleVariables
 
 export type { OverlayProps, OverlayRef }
diff --git a/src/components/popover/types/popover-content.ts b/src/components/popover/types/popover-content.ts
index b79208b..ede4c7c 100644
--- a/src/components/popover/types/popover-content.ts
+++ b/src/components/popover/types/popover-content.ts
@@ -1,4 +1,4 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import {
   PopoverArrow as PopoverArrowPrimitive,
   PopoverContent as PopoverContentPrimitive,
@@ -19,6 +19,6 @@ type PopoverContentProps = React.ComponentPropsWithoutRef<PopoverContentPrimitiv
   hasTriggerMaxHeight?: boolean
   hasArrow?: boolean
   arrowProps?: React.ComponentPropsWithoutRef<typeof PopoverArrowPrimitive>
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 export type { PopoverContentProps, PopoverContentRef }
diff --git a/src/components/sheet/types/sheet-content.ts b/src/components/sheet/types/sheet-content.ts
index 9e748c7..f545831 100644
--- a/src/components/sheet/types/sheet-content.ts
+++ b/src/components/sheet/types/sheet-content.ts
@@ -7,7 +7,7 @@ import React from 'react'
 
 import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
 import { NonNullableVariantProps } from '@/components/_shared/types/variants'
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { ButtonProps } from '@/components/button'
 import { OverlayProps } from '@/components/overlay'
 import { sheetClasses } from '@/components/sheet/classes/sheet-classes'
@@ -24,7 +24,7 @@ type SheetContentRenderUIProps = NonNullableVariantProps<typeof sheetClasses> &
   closeButtonProps?: ButtonProps
   closeButtonIconProps?: React.ComponentPropsWithoutRef<typeof CrossSmallIcon>
   hasCloseButton?: boolean
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type SheetContentProps = Simplify<SheetContentPrimitiveProps & SheetContentRenderUIProps>
 
diff --git a/src/components/skeleton/components/skeleton.tsx b/src/components/skeleton/components/skeleton.tsx
index 8de7dc0..f111516 100644
--- a/src/components/skeleton/components/skeleton.tsx
+++ b/src/components/skeleton/components/skeleton.tsx
@@ -3,20 +3,44 @@ import React from 'react'
 
 import { SkeletonProps, SkeletonRef } from '@/components/skeleton/types/skeleton'
 import { getMergedClassName } from '@/components/skeleton/utils/get-merged-class-name'
+import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 
 const Skeleton = React.forwardRef<SkeletonRef, SkeletonProps>((props, ref) => {
-  const { asChild, className, count, variant = 'slide', type = 'static',  ...restProps } = props
+  const {
+    asChild,
+    className,
+    style,
+    count,
+    variant = 'slide',
+    type = 'static',
+    ...restProps
+  } = props
+
+  const Component = polymorphic(asChild, 'div')
 
   const mergedClassName = getMergedClassName(className, variant, type)
 
-  const Component = polymorphic(asChild, 'div')
+  const mergedStyle = {
+    ...style,
+    ...getAnimationStyleVariables({
+      ...props,
+      defaultAnimationDuration: 1500,
+      defaultAnimationTimingFunction: 'ease',
+    }),
+  }
 
   return count ? (
     Array.from({ length: count }, (_, index) => (
-      <Component key={index} ref={ref} className={mergedClassName} {...restProps} />
+      <Component
+        key={index}
+        ref={ref}
+        className={mergedClassName}
+        style={mergedStyle}
+        {...restProps}
+      />
     ))
   ) : (
-    <Component ref={ref} className={mergedClassName} {...restProps} />
+    <Component ref={ref} className={mergedClassName} style={mergedStyle} {...restProps} />
   )
 })
 
diff --git a/src/components/skeleton/types/skeleton.ts b/src/components/skeleton/types/skeleton.ts
index 82c0bd5..56c6e33 100644
--- a/src/components/skeleton/types/skeleton.ts
+++ b/src/components/skeleton/types/skeleton.ts
@@ -1,17 +1,18 @@
 import { Simplify } from '@renderui/types'
 
 import { AsChildProp } from '@/components/_shared/types/as-child'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 
 type SkeletonRef = React.ElementRef<'div'>
 
 type SkeletonPrimitiveProps = React.ComponentPropsWithoutRef<'div'>
 
-type SkeletonRenderUIProps = {
+type SkeletonRenderCustomProps = {
   variant?: 'pulse' | 'slide'
   type?: 'static' | 'layer'
   count?: number
-}
+} & Pick<AnimationStyleVariables, 'animationDuration' | 'animationTimingFunction'>
 
-type SkeletonProps = Simplify<SkeletonPrimitiveProps & SkeletonRenderUIProps & AsChildProp>
+type SkeletonProps = Simplify<SkeletonPrimitiveProps & SkeletonRenderCustomProps & AsChildProp>
 
 export type { SkeletonProps, SkeletonRef }
diff --git a/src/components/skeleton/utils/get-merged-class-name.ts b/src/components/skeleton/utils/get-merged-class-name.ts
index 6c6299c..1a1c93a 100644
--- a/src/components/skeleton/utils/get-merged-class-name.ts
+++ b/src/components/skeleton/utils/get-merged-class-name.ts
@@ -11,7 +11,7 @@ function getMergedClassName(
     'render-ui-skeletion rounded bg-mode-accent overflow-hidden',
     variant === 'pulse'
       ? 'animate-[pulse_1500ms_infinite]'
-      : 'relative isolate w-full before:content-[""] before:absolute before:inline-block before:inset-0 before:z-[1] before:rounded-[inherit] before:animate-[slide_1500ms_infinite] before:bg-gradient-to-r before:from-transparent before:via-skeleton before:to-transparent',
+      : 'relative isolate w-full before:content-[""] before:absolute before:inline-block before:inset-0 before:z-[1] before:rounded-[inherit] before:animate-slide before:bg-gradient-to-r before:from-transparent before:via-skeleton before:to-transparent',
     type === 'layer' ? 'absolute inset-0 size-full rounded-[inherit] overflow-hidden z-[2]' : '',
     className,
   )
diff --git a/src/components/tooltip/types/tooltip-content.ts b/src/components/tooltip/types/tooltip-content.ts
index 1e8968a..8b5200d 100644
--- a/src/components/tooltip/types/tooltip-content.ts
+++ b/src/components/tooltip/types/tooltip-content.ts
@@ -1,4 +1,4 @@
-import { AnimationStyleVariaiables } from '@/components/_shared/utils/get-animation-style-variables'
+import { AnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import {
   TooltipArrow as TooltipArrowPrimitive,
   TooltipContent as TooltipContentPrimitive,
@@ -15,7 +15,7 @@ type TooltipContentPrimitiveProps = React.ComponentPropsWithoutRef<TooltipConten
 type TooltioContentRenderUIProps = {
   hasArrow?: boolean
   arrowProps?: React.ComponentPropsWithoutRef<typeof TooltipArrowPrimitive>
-} & AnimationStyleVariaiables
+} & AnimationStyleVariables
 
 type TooltipContentProps = Simplify<TooltipContentPrimitiveProps & TooltioContentRenderUIProps>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b9914d2..fa34e8b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -203,7 +203,7 @@ const config: Config = {
           '100%': { opacity: '0', transform: 'translateX(-200px)' },
         },
         'navigation-menu-scale-in': {
-          '0%': { opacity: '0', transform: 'rotateX(-30deg) scale(0.9)' },
+          '0%': { opacity: '0', transform: 'rotateX(-10deg) scale(0.9)' },
           '100%': { opacity: '1', transform: 'rotateX(0deg) scale(1)' },
         },
         'navigation-menu-scale-out': {
@@ -394,6 +394,7 @@ const config: Config = {
           'overlay-fade-in var(--animation-in-duration) var(--animation-in-timing-function)',
         'overlay-fade-out':
           'overlay-fade-out var(--animation-out-duration) var(--animation-out-timing-function)',
+        'slide': 'slide var(--animation-in-duration) var(--animation-in-timing-function) infinite',
         'infinite-progress': 'infinite-progress 1.25s linear infinite',
         'ripple-animation': 'ripple-animation 0.5s linear forwards',
         'blink': 'blink 1s both infinite',