@eslamdevui/ui 3.3.4 → 4.0.0

package/dist/shared/{ui.CgUuvRXi.mjs → ui.BBlr3wu_.mjs}

@@ -1,16 +1,17 @@
 import { pick } from '../../dist/runtime/utils/index.js';
 import 'node:url';
 import { kebabCase } from 'scule';
-import { addTypeTemplate, addTemplate } from '@nuxt/kit';
-import { defuFn, defu } from 'defu';
-import colors from 'tailwindcss/colors';
 import { genExport } from 'knitwork';
+import colors from 'tailwindcss/colors';
+import { addTypeTemplate, addTemplate, hasNuxtModule } from '@nuxt/kit';
+import { defuFn, defu } from 'defu';
 
 const icons = {
-  arrowUp: "i-lucide-arrow-up",
   arrowDown: "i-lucide-arrow-down",
   arrowLeft: "i-lucide-arrow-left",
   arrowRight: "i-lucide-arrow-right",
+  arrowUp: "i-lucide-arrow-up",
+  caution: "i-lucide-circle-alert",
   check: "i-lucide-check",
   chevronDoubleLeft: "i-lucide-chevrons-left",
   chevronDoubleRight: "i-lucide-chevrons-right",
@@ -19,34 +20,33 @@ const icons = {
   chevronRight: "i-lucide-chevron-right",
   chevronUp: "i-lucide-chevron-up",
   close: "i-lucide-x",
-  ellipsis: "i-lucide-ellipsis",
-  external: "i-lucide-arrow-up-right",
-  file: "i-lucide-file",
-  folder: "i-lucide-folder",
-  folderOpen: "i-lucide-folder-open",
-  loading: "i-lucide-loader-circle",
-  minus: "i-lucide-minus",
-  plus: "i-lucide-plus",
-  reload: "i-lucide-refresh-cw",
-  search: "i-lucide-search",
-  upload: "i-lucide-upload",
-  stop: "i-lucide-circle-stop",
-  caution: "i-lucide-circle-alert",
   copy: "i-lucide-copy",
   copyCheck: "i-lucide-copy-check",
   dark: "i-lucide-moon",
+  ellipsis: "i-lucide-ellipsis",
   error: "i-lucide-circle-x",
+  external: "i-lucide-arrow-up-right",
   eye: "i-lucide-eye",
   eyeOff: "i-lucide-eye-off",
+  file: "i-lucide-file",
+  folder: "i-lucide-folder",
+  folderOpen: "i-lucide-folder-open",
   hash: "i-lucide-hash",
   info: "i-lucide-info",
   light: "i-lucide-sun",
+  loading: "i-lucide-loader-circle",
   menu: "i-lucide-menu",
+  minus: "i-lucide-minus",
   panelClose: "i-lucide-panel-left-close",
   panelOpen: "i-lucide-panel-left-open",
+  plus: "i-lucide-plus",
+  reload: "i-lucide-rotate-ccw",
+  search: "i-lucide-search",
+  stop: "i-lucide-square",
   success: "i-lucide-circle-check",
   system: "i-lucide-monitor",
   tip: "i-lucide-lightbulb",
+  upload: "i-lucide-upload",
   warning: "i-lucide-triangle-alert"
 };
 
@@ -297,14 +297,14 @@ const avatarGroup = {
   }
 };
 
-const buttonGroupVariant = {
-  buttonGroup: {
+const fieldGroupVariant = {
+  fieldGroup: {
     horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
     vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
   }
 };
-const buttonGroupVariantWithRoot = {
-  buttonGroup: {
+const fieldGroupVariantWithRoot = {
+  fieldGroup: {
     horizontal: {
       root: "group has-focus-visible:z-[1]",
       base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
@@ -315,7 +315,7 @@ const buttonGroupVariantWithRoot = {
     }
   }
 };
-const buttonGroup = {
+const fieldGroup$1 = {
   base: "relative",
   variants: {
     size: {
@@ -342,7 +342,7 @@ const badge$1 = (options) => ({
     trailingIcon: "shrink-0"
   },
   variants: {
-    ...buttonGroupVariant,
+    ...fieldGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       neutral: ""
@@ -449,185 +449,165 @@ const badge$1 = (options) => ({
   }
 });
 
-const banner = (options) => {
-  const colors = options.theme.colors || [];
-  return {
-    slots: {
-      root: [
-        "relative z-50 w-full",
-        "transition-colors"
-      ],
-      container: "flex items-center justify-between gap-3 h-12",
-      left: "hidden lg:flex-1 lg:flex lg:items-center",
-      center: "flex items-center gap-1.5 min-w-0",
-      right: "lg:flex-1 flex items-center justify-end",
-      icon: "size-5 shrink-0 text-inverted pointer-events-none",
-      title: "text-sm text-inverted font-medium truncate",
-      actions: "flex gap-1.5 shrink-0 isolate",
-      close: "text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(
-          colors.map((color) => [
-            color,
-            { root: `bg-${color}` }
-          ])
-        ),
-        neutral: { root: "bg-inverted" }
-      },
-      to: {
-        true: ""
+const banner = (options) => ({
+  slots: {
+    root: ["relative z-50 w-full", options.theme.transitions && "transition-colors"],
+    container: "flex items-center justify-between gap-3 h-12",
+    left: "hidden lg:flex-1 lg:flex lg:items-center",
+    center: "flex items-center gap-1.5 min-w-0",
+    right: "lg:flex-1 flex items-center justify-end",
+    icon: "size-5 shrink-0 text-inverted pointer-events-none",
+    title: "text-sm text-inverted font-medium truncate",
+    actions: "flex gap-1.5 shrink-0 isolate",
+    close: "text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `bg-${color}`
+      }])),
+      neutral: {
+        root: "bg-inverted"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        color,
-        to: true,
-        class: {
-          root: `hover:bg-${color}/90`
-        }
-      })),
-      {
-        color: "neutral",
-        to: true,
-        class: {
-          root: "hover:bg-inverted/90"
-        }
-      }
-    ]
-  };
-};
+    to: {
+      true: ""
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    to: true,
+    class: {
+      root: `hover:bg-${color}/90`
+    }
+  })), {
+    color: "neutral",
+    to: true,
+    class: {
+      root: "hover:bg-inverted/90"
+    }
+  }],
+  defaultVariants: {
+    color: "primary"
+  }
+});
 
-const blogPost = (_options) => {
-  return {
-    slots: {
-      root: "relative group/blog-post flex flex-col rounded-lg overflow-hidden",
-      header: "relative overflow-hidden aspect-[16/9] w-full pointer-events-none",
-      body: "min-w-0 flex-1 flex flex-col",
-      footer: "",
-      image: "object-cover object-top w-full h-full",
-      title: "text-xl text-pretty font-semibold text-highlighted",
-      description: "mt-1 text-base text-pretty",
-      authors: "pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5",
-      avatar: "",
-      meta: "flex items-center gap-2 mb-2",
-      date: "text-sm",
-      badge: ""
-    },
-    variants: {
-      orientation: {
-        horizontal: {
-          root: "lg:grid lg:grid-cols-2 lg:items-center gap-x-8",
-          body: "justify-center p-4 sm:p-6 lg:px-0"
-        },
-        vertical: {
-          root: "flex flex-col",
-          body: "p-4 sm:p-6"
-        }
-      },
-      variant: {
-        outline: {
-          root: "bg-default ring ring-default",
-          date: "text-toned",
-          description: "text-muted"
-        },
-        soft: {
-          root: "bg-elevated/50",
-          date: "text-muted",
-          description: "text-toned"
-        },
-        subtle: {
-          root: "bg-elevated/50 ring ring-default",
-          date: "text-muted",
-          description: "text-toned"
-        },
-        ghost: {
-          date: "text-toned",
-          description: "text-muted",
-          header: "shadow-lg rounded-lg"
-        },
-        naked: {
-          root: "p-0 sm:p-0",
-          date: "text-toned",
-          description: "text-muted",
-          header: "shadow-lg rounded-lg"
-        }
-      },
-      to: {
-        true: {
-          root: "transition",
-          image: "transform transition-transform duration-200 group-hover/blog-post:scale-110",
-          avatar: "transform transition-transform duration-200 hover:scale-115"
-        }
+const blogPost = (options) => ({
+  slots: {
+    root: "relative group/blog-post flex flex-col rounded-lg overflow-hidden",
+    header: "relative overflow-hidden aspect-[16/9] w-full pointer-events-none",
+    body: "min-w-0 flex-1 flex flex-col",
+    footer: "",
+    image: "object-cover object-top w-full h-full",
+    title: "text-xl text-pretty font-semibold text-highlighted",
+    description: "mt-1 text-base text-pretty",
+    authors: "pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5",
+    avatar: "",
+    meta: "flex items-center gap-2 mb-2",
+    date: "text-sm",
+    badge: ""
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "lg:grid lg:grid-cols-2 lg:items-center gap-x-8",
+        body: "justify-center p-4 sm:p-6 lg:px-0"
       },
-      image: {
-        true: ""
+      vertical: {
+        root: "flex flex-col",
+        body: "p-4 sm:p-6"
       }
     },
-    compoundVariants: [
-      {
-        variant: "outline",
-        to: true,
-        class: {
-          root: "hover:bg-elevated/50"
-        }
-      },
-      {
-        variant: "soft",
-        to: true,
-        class: {
-          root: "hover:bg-elevated"
-        }
-      },
-      {
-        variant: "subtle",
-        to: true,
-        class: {
-          root: "hover:bg-elevated hover:ring-accented"
-        }
+    variant: {
+      outline: {
+        root: "bg-default ring ring-default",
+        date: "text-toned",
+        description: "text-muted"
       },
-      {
-        variant: "ghost",
-        to: true,
-        class: {
-          root: "hover:bg-elevated/50",
-          header: [
-            "group-hover/blog-post:shadow-none",
-            "transition-all"
-          ]
-        }
+      soft: {
+        root: "bg-elevated/50",
+        date: "text-muted",
+        description: "text-toned"
       },
-      {
-        variant: "ghost",
-        to: true,
-        orientation: "vertical",
-        class: {
-          header: "group-hover/blog-post:rounded-b-none"
-        }
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        date: "text-muted",
+        description: "text-toned"
       },
-      {
-        variant: "ghost",
-        to: true,
-        orientation: "horizontal",
-        class: {
-          header: "group-hover/blog-post:rounded-r-none"
-        }
+      ghost: {
+        date: "text-toned",
+        description: "text-muted",
+        header: "shadow-lg rounded-lg"
       },
-      {
-        orientation: "vertical",
-        image: false,
-        variant: "naked",
-        class: {
-          body: "p-0 sm:p-0"
-        }
+      naked: {
+        root: "p-0 sm:p-0",
+        date: "text-toned",
+        description: "text-muted",
+        header: "shadow-lg rounded-lg"
       }
-    ],
-    defaultVariants: {
-      variant: "outline"
+    },
+    to: {
+      true: {
+        root: [options.theme.transitions && "transition"],
+        image: "transform transition-transform duration-200 group-hover/blog-post:scale-110",
+        avatar: "transform transition-transform duration-200 hover:scale-115"
+      }
+    },
+    image: {
+      true: ""
     }
-  };
-};
+  },
+  compoundVariants: [{
+    variant: "outline",
+    to: true,
+    class: {
+      root: "hover:bg-elevated/50"
+    }
+  }, {
+    variant: "soft",
+    to: true,
+    class: {
+      root: "hover:bg-elevated"
+    }
+  }, {
+    variant: "subtle",
+    to: true,
+    class: {
+      root: "hover:bg-elevated hover:ring-accented"
+    }
+  }, {
+    variant: "ghost",
+    to: true,
+    class: {
+      root: "hover:bg-elevated/50",
+      header: ["group-hover/blog-post:shadow-none", options.theme.transitions && "transition-all"]
+    }
+  }, {
+    variant: "ghost",
+    to: true,
+    orientation: "vertical",
+    class: {
+      header: "group-hover/blog-post:rounded-b-none"
+    }
+  }, {
+    variant: "ghost",
+    to: true,
+    orientation: "horizontal",
+    class: {
+      header: "group-hover/blog-post:rounded-r-none"
+    }
+  }, {
+    orientation: "vertical",
+    image: false,
+    variant: "naked",
+    class: {
+      body: "p-0 sm:p-0"
+    }
+  }],
+  defaultVariants: {
+    variant: "outline"
+  }
+});
 
 const blogPosts = {
   base: "flex flex-col gap-8 lg:gap-y-16",
@@ -690,7 +670,7 @@ const button = (options) => ({
     trailingIcon: "shrink-0"
   },
   variants: {
-    ...buttonGroupVariant,
+    ...fieldGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       neutral: ""
@@ -992,7 +972,7 @@ const changelogVersion = {
     image: "object-cover object-top w-full h-full",
     authors: "flex flex-wrap gap-x-4 gap-y-1.5",
     footer: "border-t border-default pt-5 flex items-center justify-between",
-    indicator: "absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0",
+    indicator: "absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0",
     dot: "size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1",
     dotInner: "size-2 rounded-full bg-primary"
   },
@@ -1024,12 +1004,12 @@ const changelogVersions = {
   slots: {
     root: "relative",
     container: "flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16",
-    indicator: "absolute hidden lg:block overflow-hidden inset-y-3 left-32 h-full w-px bg-border -ml-[8.5px]",
-    beam: "absolute left-0 top-0 w-full bg-primary will-change-[height]"
+    indicator: "absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]",
+    beam: "absolute start-0 top-0 w-full bg-primary will-change-[height]"
   }
 };
 
-const chatMessage = {
+const chatMessage = (options) => ({
   slots: {
     root: "group/message relative w-full",
     container: "relative flex items-start group-data-[role=user]/message:max-w-[75%]",
@@ -1037,11 +1017,8 @@ const chatMessage = {
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    content: "relative text-pretty",
-    actions: [
-      "opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center",
-      "transition-opacity"
-    ]
+    content: "relative text-pretty min-w-0",
+    actions: ["opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center", options.theme.transitions && "transition-opacity"]
   },
   variants: {
     variant: {
@@ -1090,72 +1067,50 @@ const chatMessage = {
       }
     }
   },
-  compoundVariants: [
-    {
-      compact: true,
-      actions: true,
-      class: {
-        container: "pb-8"
-      }
-    },
-    {
-      leading: true,
-      compact: false,
-      side: "left",
-      class: {
-        actions: "left-11"
-      }
-    },
-    {
-      leading: true,
-      compact: true,
-      side: "left",
-      class: {
-        actions: "left-6.5"
-      }
-    },
-    {
-      variant: [
-        "solid",
-        "outline",
-        "soft",
-        "subtle"
-      ],
-      compact: false,
-      class: {
-        content: "px-4 py-3 rounded-lg min-h-12",
-        leading: "mt-2"
-      }
-    },
-    {
-      variant: [
-        "solid",
-        "outline",
-        "soft",
-        "subtle"
-      ],
-      compact: true,
-      class: {
-        content: "px-2 py-1 rounded-lg min-h-8",
-        leading: "mt-1"
-      }
+  compoundVariants: [{
+    compact: true,
+    actions: true,
+    class: {
+      container: "pb-8"
     }
-  ],
+  }, {
+    leading: true,
+    compact: false,
+    side: "left",
+    class: {
+      actions: "left-11"
+    }
+  }, {
+    leading: true,
+    compact: true,
+    side: "left",
+    class: {
+      actions: "left-6.5"
+    }
+  }, {
+    variant: ["solid", "outline", "soft", "subtle"],
+    compact: false,
+    class: {
+      content: "px-4 py-3 rounded-lg min-h-12",
+      leading: "mt-2"
+    }
+  }, {
+    variant: ["solid", "outline", "soft", "subtle"],
+    compact: true,
+    class: {
+      content: "px-2 py-1 rounded-lg min-h-8",
+      leading: "mt-1"
+    }
+  }],
   defaultVariants: {
     variant: "naked"
   }
-};
+});
 
 const chatMessages = {
   slots: {
     root: "w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)",
-    indicator: [
-      "h-6 flex items-center gap-1 py-3",
-      "*:size-2 *:rounded-full *:bg-elevated",
-      "[&>*:nth-child(1)]:animate-[bounce_1s_infinite]",
-      "[&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite]",
-      "[&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"
-    ].join(" "),
+    indicator: "h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]",
     viewport: "absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
     autoScroll: "rounded-full absolute right-1/2 translate-x-1/2 bottom-0"
   },
@@ -1596,300 +1551,37 @@ const container = {
   base: "w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"
 };
 
-const contentNavigation = (options) => {
-  const colors = options.theme.colors || [];
-  const variants = ["pill", "link"];
-  const colorVariants = Object.fromEntries(
-    colors.map((color) => [
-      color,
-      {
-        trigger: `focus-visible:ring-${color}`,
-        link: `focus-visible:before:ring-${color}`
-      }
-    ])
-  );
-  const highlightColorVariants = Object.fromEntries(
-    colors.map((color) => [color, ""])
-  );
-  const compoundVariants = [
-    {
-      highlight: true,
-      level: true,
-      class: {
-        link: [
-          "after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full",
-          "after:transition-colors"
-        ]
-      }
+const contextMenu = (options) => ({
+  slots: {
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+    group: "p-1 isolate",
+    label: "w-full flex items-center font-semibold text-highlighted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0",
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemLabel: "truncate",
+    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
     },
-    ...variants.map((variant) => ({
-      disabled: false,
-      active: false,
-      variant,
-      class: {
-        link: [
-          "hover:text-highlighted data-[state=open]:text-highlighted",
-          "transition-colors",
-          variant === "pill" ? "hover:before:bg-elevated/50" : ""
-        ].filter(Boolean),
-        linkLeadingIcon: [
-          "group-hover:text-default group-data-[state=open]:text-default",
-          "transition-colors before:transition-colors"
-        ]
-      }
-    })),
-    ...colors.flatMap((color) => [
-      ...variants.map((variant) => ({
-        color,
-        variant,
-        active: true,
-        class: {
-          link: color === "neutral" ? "text-highlighted" : `text-${color}`,
-          linkLeadingIcon: `${color === "neutral" ? "text-highlighted" : `text-${color}`} group-data-[state=open]:${color === "neutral" ? "text-highlighted" : `text-${color}`}`
-        }
-      })),
-      {
-        highlightColor: color,
-        highlight: true,
-        level: true,
-        active: true,
-        class: {
-          link: `after:bg-${color === "neutral" ? "inverted" : color}`
-        }
-      }
-    ]),
-    {
-      variant: "pill",
-      active: true,
-      highlight: false,
-      class: {
-        link: "before:bg-elevated"
-      }
-    },
-    {
-      variant: "pill",
-      active: true,
-      highlight: true,
-      class: {
-        link: ["hover:before:bg-elevated/50", "before:transition-colors"]
-      }
-    }
-  ];
-  return {
-    slots: {
-      root: "",
-      content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
-      list: "isolate -mx-2.5 -mt-1.5",
-      item: "",
-      listWithChildren: "ms-5 border-s border-default",
-      itemWithChildren: "flex flex-col data-[state=open]:mb-1.5",
-      trigger: "font-semibold",
-      link: "group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
-      linkLeadingIcon: "shrink-0 size-5",
-      linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-      linkTrailingBadge: "shrink-0",
-      linkTrailingBadgeSize: "sm",
-      linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180",
-      linkTitle: "truncate",
-      linkTitleExternalIcon: "size-3 align-top text-dimmed"
-    },
-    variants: {
-      color: {
-        ...colorVariants,
-        neutral: {
-          trigger: "focus-visible:ring-inverted",
-          link: "focus-visible:before:ring-inverted"
-        }
-      },
-      highlightColor: {
-        ...highlightColorVariants,
-        neutral: ""
-      },
-      variant: Object.fromEntries(variants.map((v) => [v, ""])),
-      active: {
-        true: {
-          link: "font-medium"
-        },
-        false: {
-          link: "text-muted",
-          linkLeadingIcon: "text-dimmed"
-        }
-      },
-      disabled: {
-        true: {
-          link: "cursor-not-allowed opacity-75"
-        }
-      },
-      highlight: {
-        true: {}
-      },
-      level: {
-        true: {
-          item: "ps-1.5 -ms-px",
-          itemWithChildren: "ps-1.5 -ms-px"
-        }
-      }
-    },
-    compoundVariants,
-    defaultVariants: {
-      color: "primary",
-      highlightColor: "primary",
-      variant: "pill"
-    }
-  };
-};
-
-const contentSearch = {
-  slots: {
-    modal: "sm:max-w-3xl sm:h-[28rem]",
-    input: "[&>input]:text-base/5"
-  }
-};
-
-const contentSearchButton = {
-  slots: {
-    base: "",
-    trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
-  }
-};
-
-const contentSurround = {
-  slots: {
-    root: "grid grid-cols-1 sm:grid-cols-2 gap-8",
-    link: [
-      "group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary",
-      "transition-colors"
-    ],
-    linkLeading: [
-      "inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50",
-      "transition"
-    ],
-    linkLeadingIcon: [
-      "size-5 shrink-0 text-highlighted group-hover:text-primary",
-      "transition-[color,translate]"
-    ],
-    linkTitle: "font-medium text-[15px] text-highlighted mb-1 truncate",
-    linkDescription: "text-sm text-muted line-clamp-2"
-  },
-  variants: {
-    direction: {
-      left: {
-        linkLeadingIcon: [
-          "group-active:-translate-x-0.5"
-        ]
-      },
-      right: {
-        link: "text-right",
-        linkLeadingIcon: [
-          "group-active:translate-x-0.5"
-        ]
-      }
-    }
-  }
-};
-
-const contentToc = (options) => ({
-  slots: {
-    root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
-    container: "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
-    top: "",
-    bottom: "mt-6 hidden lg:flex lg:flex-col gap-6",
-    trigger: "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
-    title: "truncate",
-    trailing: "ms-auto inline-flex gap-1.5 items-center",
-    trailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
-    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
-    list: "min-w-0",
-    listWithChildren: "ms-3",
-    item: "min-w-0",
-    itemWithChildren: "",
-    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
-    linkText: "truncate",
-    indicator: "absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full"
-  },
-  variants: {
-    color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      neutral: ""
-    },
-    highlightColor: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        indicator: `bg-${color}`
-      }])),
-      neutral: {
-        indicator: "bg-inverted"
-      }
-    },
-    active: {
-      false: {
-        link: [
-          "text-muted hover:text-default",
-          "transition-colors"
-        ]
-      }
-    },
-    highlight: {
-      true: {
-        list: "ms-2.5 ps-4 border-s border-default",
-        item: "-ms-px"
-      }
-    }
-  },
-  compoundVariants: [
-    ...(options.theme.colors || []).map((color) => ({
-      color: `${color}`,
-      active: true,
-      class: {
-        link: `text-${color}`,
-        linkText: `text-${color}`
-      }
-    })),
-    {
-      color: "neutral",
-      active: true,
-      class: {
-        link: `text-highlighted`,
-        linkLeadingIcon: `text-highlighted`
-      }
-    }
-  ],
-  defaultVariants: {
-    color: "primary",
-    highlightColor: "primary"
-  }
-});
-
-const contextMenu = (options) => ({
-  slots: {
-    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
-    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
-    group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-highlighted",
-    separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75",
-    itemLeadingIcon: "shrink-0",
-    itemLeadingAvatar: "shrink-0",
-    itemLeadingAvatarSize: "",
-    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    itemTrailingIcon: "shrink-0",
-    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
-    itemTrailingKbdsSize: "",
-    itemLabel: "truncate",
-    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
-  },
-  variants: {
-    color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      neutral: ""
-    },
-    active: {
-      true: {
-        item: "text-highlighted before:bg-elevated",
-        itemLeadingIcon: "text-default"
-      },
-      false: {
-        item: ["text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
+    active: {
+      true: {
+        item: "text-highlighted before:bg-elevated",
+        itemLeadingIcon: "text-default"
+      },
+      false: {
+        item: ["text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -2126,7 +1818,7 @@ const drawer = (options) => ({
     },
     inset: {
       true: {
-        content: "rounded-lg after:hidden overflow-hidden"
+        content: "rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]"
       }
     }
   },
@@ -2310,47 +2002,6 @@ const error = {
   }
 };
 
-const footer = {
-  slots: {
-    root: "",
-    top: "py-8 lg:py-12",
-    bottom: "py-8 lg:py-12",
-    container: "py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",
-    left: "flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",
-    center: "mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",
-    right: "lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"
-  }
-};
-
-const footerColumns = {
-  slots: {
-    root: "xl:grid xl:grid-cols-3 xl:gap-8",
-    left: "mb-10 xl:mb-0",
-    center: "flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2",
-    right: "mt-10 xl:mt-0",
-    label: "text-sm font-semibold",
-    list: "mt-6 space-y-4",
-    item: "relative",
-    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
-    linkLeadingIcon: "size-5 shrink-0",
-    linkLabel: "truncate",
-    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed inline-block"
-  },
-  variants: {
-    active: {
-      true: {
-        link: "text-primary font-medium"
-      },
-      false: {
-        link: [
-          "text-muted hover:text-default",
-          "transition-colors"
-        ]
-      }
-    }
-  }
-};
-
 const fileUpload = (options) => ({
   slots: {
     root: "relative flex flex-col",
@@ -2543,6 +2194,44 @@ const fileUpload = (options) => ({
   }
 });
 
+const footer = {
+  slots: {
+    root: "",
+    top: "py-8 lg:py-12",
+    bottom: "py-8 lg:py-12",
+    container: "py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",
+    left: "flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",
+    center: "mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",
+    right: "lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"
+  }
+};
+
+const footerColumns = (options) => ({
+  slots: {
+    root: "xl:grid xl:grid-cols-3 xl:gap-8",
+    left: "mb-10 xl:mb-0",
+    center: "flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2",
+    right: "mt-10 xl:mt-0",
+    label: "text-sm font-semibold",
+    list: "mt-6 space-y-4",
+    item: "relative",
+    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    linkLeadingIcon: "size-5 shrink-0",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed inline-block"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary font-medium"
+      },
+      false: {
+        link: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
+      }
+    }
+  }
+});
+
 const form = {
   base: ""
 };
@@ -2607,7 +2296,7 @@ const header = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
     leadingIcon: "shrink-0 text-dimmed",
     leadingAvatar: "shrink-0",
@@ -2616,7 +2305,7 @@ const input = (options) => ({
     trailingIcon: "shrink-0 text-dimmed"
   },
   variants: {
-    ...buttonGroupVariantWithRoot,
+    ...fieldGroupVariantWithRoot,
     size: {
       xs: {
         base: "px-2 py-1 text-xs gap-1",
@@ -2894,7 +2583,7 @@ const inputNumber = (options) => {
       decrement: "absolute flex items-center"
     },
     variants: {
-      ...buttonGroupVariantWithRoot,
+      ...fieldGroupVariantWithRoot,
       color: {
         ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
         neutral: ""
@@ -3030,16 +2719,16 @@ const inputTags = (options) => {
         }
       },
       variant: (prev) => Object.fromEntries(
-        Object.entries(prev).map(([key, value]) => [key, replaceFocus(value)])
+        Object.entries(prev).map(([key, value]) => [key, replaceFocus$2(value)])
       )
     },
     compoundVariants: (prev) => prev.map((item) => ({
       ...item,
-      class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
+      class: typeof item.class === "string" ? replaceFocus$2(item.class) : item.class
     }))
   }, input(options));
 };
-function replaceFocus(str) {
+function replaceFocus$2(str) {
   return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
 }
 
@@ -3124,29 +2813,86 @@ const main = {
   base: "min-h-[calc(100vh-var(--ui-header-height))]"
 };
 
-const modal = {
+const marquee = {
   slots: {
-    overlay: "fixed inset-0 bg-elevated/75",
-    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
-    header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
-    wrapper: "",
-    body: "flex-1 overflow-y-auto p-4 sm:p-6",
-    footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-highlighted font-semibold",
-    description: "mt-1 text-muted text-sm",
-    close: "absolute top-4 end-4"
+    root: "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
+    content: "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
   },
   variants: {
-    transition: {
-      true: {
-        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
-        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+    orientation: {
+      horizontal: {
+        content: "w-full"
+      },
+      vertical: {
+        content: "h-full"
       }
     },
-    fullscreen: {
+    pauseOnHover: {
       true: {
-        content: "inset-0"
-      },
+        content: "group-hover:[animation-play-state:paused]"
+      }
+    },
+    reverse: {
+      true: {
+        content: "![animation-direction:reverse]"
+      }
+    },
+    overlay: {
+      true: {
+        root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    class: {
+      root: "flex-row",
+      content: "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+    }
+  }, {
+    orientation: "horizontal",
+    overlay: true,
+    class: {
+      root: "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+    }
+  }, {
+    orientation: "vertical",
+    class: {
+      root: "flex-col",
+      content: "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+    }
+  }, {
+    orientation: "vertical",
+    overlay: true,
+    class: {
+      root: "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
+    }
+  }]
+};
+
+const modal = {
+  slots: {
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
+    header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    wrapper: "",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "text-highlighted font-semibold",
+    description: "mt-1 text-muted text-sm",
+    close: "absolute top-4 end-4"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    fullscreen: {
+      true: {
+        content: "inset-0"
+      },
       false: {
         content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden"
       }
@@ -3437,33 +3183,22 @@ const page = {
       true: ""
     }
   },
-  compoundVariants: [
-    {
-      left: true,
-      right: true,
-      class: {
-        center: "lg:col-span-6"
-      }
-    },
-    {
-      left: false,
-      right: false,
-      class: {
-        center: "lg:col-span-10"
-      }
+  compoundVariants: [{
+    left: true,
+    right: true,
+    class: {
+      center: "lg:col-span-6"
     }
-  ]
-};
-
-const pageAccordion = {
-  slots: {
-    base: "",
-    trigger: "text-base",
-    body: "text-base text-muted"
-  }
+  }, {
+    left: false,
+    right: false,
+    class: {
+      center: "lg:col-span-10"
+    }
+  }]
 };
 
-const pageAnchors = {
+const pageAnchors = (options) => ({
   slots: {
     root: "",
     list: "",
@@ -3481,18 +3216,12 @@ const pageAnchors = {
         linkLeading: "bg-primary ring-primary text-inverted"
       },
       false: {
-        link: [
-          "text-muted hover:text-default font-medium",
-          "transition-colors"
-        ],
-        linkLeading: [
-          "bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted",
-          "transition"
-        ]
+        link: ["text-muted hover:text-default font-medium", options.theme.transitions && "transition-colors"],
+        linkLeading: ["bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted", options.theme.transitions && "transition"]
       }
     }
   }
-};
+});
 
 const pageAside = {
   slots: {
@@ -3509,142 +3238,17 @@ const pageBody = {
   base: "mt-8 pb-24 space-y-12"
 };
 
-const pageCard = (_options) => {
-  return {
-    slots: {
-      root: "relative flex rounded-lg",
-      spotlight: "absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90",
-      container: "relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6",
-      wrapper: "flex flex-col flex-1 items-start",
-      header: "mb-4",
-      body: "flex-1",
-      footer: "pt-4 mt-auto",
-      leading: "inline-flex items-center mb-2.5",
-      leadingIcon: "size-5 shrink-0 text-primary",
-      title: "text-base text-pretty font-semibold text-highlighted",
-      description: "text-[15px] text-pretty"
-    },
-    variants: {
-      orientation: {
-        horizontal: {
-          container: "lg:grid-cols-2 lg:items-center"
-        },
-        vertical: {
-          container: ""
-        }
-      },
-      reverse: {
-        true: {
-          wrapper: "lg:order-last"
-        }
-      },
-      variant: {
-        solid: {
-          root: "bg-inverted text-inverted",
-          title: "text-inverted",
-          description: "text-dimmed"
-        },
-        outline: {
-          root: "bg-default ring ring-default",
-          description: "text-muted"
-        },
-        soft: {
-          root: "bg-elevated/50",
-          description: "text-toned"
-        },
-        subtle: {
-          root: "bg-elevated/50 ring ring-default",
-          description: "text-toned"
-        },
-        ghost: {
-          description: "text-muted"
-        },
-        naked: {
-          container: "p-0 sm:p-0",
-          description: "text-muted"
-        }
-      },
-      to: {
-        true: {
-          root: "transition"
-        }
-      },
-      title: {
-        true: {
-          description: "mt-1"
-        }
-      },
-      highlight: {
-        true: {
-          root: "ring-2"
-        }
-      },
-      highlightColor: {
-        primary: {},
-        secondary: {},
-        success: {},
-        info: {},
-        warning: {},
-        error: {},
-        neutral: {}
-      },
-      spotlight: {
-        true: {
-          root: "[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]"
-        }
-      },
-      spotlightColor: {
-        primary: {},
-        secondary: {},
-        success: {},
-        info: {},
-        warning: {},
-        error: {},
-        neutral: {}
-      }
-    },
-    compoundVariants: [
-      { variant: "solid", to: true, class: { root: "hover:bg-inverted/90" } },
-      { variant: "outline", to: true, class: { root: "hover:bg-elevated/50" } },
-      { variant: "soft", to: true, class: { root: "hover:bg-elevated" } },
-      { variant: "subtle", to: true, class: { root: "hover:bg-elevated" } },
-      { variant: "subtle", to: true, highlight: false, class: { root: "hover:ring-accented" } },
-      { variant: "ghost", to: true, class: { root: "hover:bg-elevated/50" } },
-      { highlightColor: "primary", highlight: true, class: { root: "ring-primary" } },
-      { highlightColor: "secondary", highlight: true, class: { root: "ring-secondary" } },
-      { highlightColor: "success", highlight: true, class: { root: "ring-success" } },
-      { highlightColor: "info", highlight: true, class: { root: "ring-info" } },
-      { highlightColor: "warning", highlight: true, class: { root: "ring-warning" } },
-      { highlightColor: "error", highlight: true, class: { root: "ring-error" } },
-      { highlightColor: "neutral", highlight: true, class: { root: "ring-inverted" } },
-      { spotlightColor: "primary", spotlight: true, class: { root: "[--spotlight-color:var(--ui-primary)]" } },
-      { spotlightColor: "secondary", spotlight: true, class: { root: "[--spotlight-color:var(--ui-secondary)]" } },
-      { spotlightColor: "success", spotlight: true, class: { root: "[--spotlight-color:var(--ui-success)]" } },
-      { spotlightColor: "info", spotlight: true, class: { root: "[--spotlight-color:var(--ui-info)]" } },
-      { spotlightColor: "warning", spotlight: true, class: { root: "[--spotlight-color:var(--ui-warning)]" } },
-      { spotlightColor: "error", spotlight: true, class: { root: "[--spotlight-color:var(--ui-error)]" } },
-      { spotlightColor: "neutral", spotlight: true, class: { root: "[--spotlight-color:var(--ui-bg-inverted)]" } }
-    ],
-    defaultVariants: {
-      variant: "outline",
-      highlightColor: "primary",
-      spotlightColor: "primary"
-    }
-  };
-};
-
-const pageColumns = {
-  base: "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
-};
-
 const pageCta = {
   slots: {
     root: "relative isolate rounded-xl overflow-hidden",
     container: "flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
     wrapper: "",
+    header: "",
     title: "text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted",
     description: "text-base sm:text-lg text-muted",
-    links: "mt-8 flex flex-wrap gap-x-6 gap-y-3"
+    body: "mt-8",
+    footer: "mt-8",
+    links: "flex flex-wrap gap-x-6 gap-y-3"
   },
   variants: {
     orientation: {
@@ -3697,6 +3301,167 @@ const pageCta = {
   }
 };
 
+const pageCard = (options) => ({
+  slots: {
+    root: "relative flex rounded-lg",
+    spotlight: "absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90",
+    container: "relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6",
+    wrapper: "flex flex-col flex-1 items-start",
+    header: "mb-4",
+    body: "flex-1",
+    footer: "pt-4 mt-auto",
+    leading: "inline-flex items-center mb-2.5",
+    leadingIcon: "size-5 shrink-0 text-primary",
+    title: "text-base text-pretty font-semibold text-highlighted",
+    description: "text-[15px] text-pretty"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center"
+      },
+      vertical: {
+        container: ""
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "lg:order-last"
+      }
+    },
+    variant: {
+      solid: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
+      },
+      soft: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      },
+      ghost: {
+        description: "text-muted"
+      },
+      naked: {
+        container: "p-0 sm:p-0",
+        description: "text-muted"
+      }
+    },
+    to: {
+      true: {
+        root: [options.theme.transitions && "transition"]
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
+      }
+    },
+    highlight: {
+      true: {
+        root: "ring-2"
+      }
+    },
+    highlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    spotlight: {
+      true: {
+        root: "[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]"
+      }
+    },
+    spotlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [{
+    variant: "solid",
+    to: true,
+    class: {
+      root: "hover:bg-inverted/90"
+    }
+  }, {
+    variant: "outline",
+    to: true,
+    class: {
+      root: "hover:bg-elevated/50"
+    }
+  }, {
+    variant: "soft",
+    to: true,
+    class: {
+      root: "hover:bg-elevated"
+    }
+  }, {
+    variant: "subtle",
+    to: true,
+    class: {
+      root: "hover:bg-elevated"
+    }
+  }, {
+    variant: "subtle",
+    to: true,
+    highlight: false,
+    class: {
+      root: "hover:ring-accented"
+    }
+  }, {
+    variant: "ghost",
+    to: true,
+    class: {
+      root: "hover:bg-elevated/50"
+    }
+  }, ...(options.theme.colors || []).map((highlightColor) => ({
+    highlightColor,
+    highlight: true,
+    class: {
+      root: `ring-${highlightColor}`
+    }
+  })), {
+    highlightColor: "neutral",
+    highlight: true,
+    class: {
+      root: "ring-inverted"
+    }
+  }, ...(options.theme.colors || []).map((spotlightColor) => ({
+    spotlightColor,
+    spotlight: true,
+    class: {
+      root: `[--spotlight-color:var(--ui-${spotlightColor})]`
+    }
+  })), {
+    spotlightColor: "neutral",
+    spotlight: true,
+    class: {
+      root: "[--spotlight-color:var(--ui-bg-inverted)]"
+    }
+  }, {
+    to: true,
+    class: {
+      root: "has-focus-visible:ring-2 has-focus-visible:ring-primary"
+    }
+  }],
+  defaultVariants: {
+    variant: "outline",
+    highlightColor: "primary",
+    spotlightColor: "primary"
+  }
+});
+
+const pageColumns = {
+  base: "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
+};
+
 const pageFeature = {
   slots: {
     root: "relative",
@@ -3752,10 +3517,13 @@ const pageHero = {
     root: "relative isolate",
     container: "flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
     wrapper: "",
+    header: "",
     headline: "mb-4",
     title: "text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted",
     description: "text-lg sm:text-xl/8 text-muted",
-    links: "mt-10 flex flex-wrap gap-x-6 gap-y-3"
+    body: "mt-10",
+    footer: "mt-10",
+    links: "flex flex-wrap gap-x-6 gap-y-3"
   },
   variants: {
     orientation: {
@@ -3789,7 +3557,7 @@ const pageHero = {
   }
 };
 
-const pageLinks = {
+const pageLinks = (options) => ({
   slots: {
     root: "flex flex-col gap-3",
     title: "text-sm font-semibold flex items-center gap-1.5",
@@ -3806,14 +3574,11 @@ const pageLinks = {
         link: "text-primary font-medium"
       },
       false: {
-        link: [
-          "text-muted hover:text-default",
-          "transition-colors"
-        ]
+        link: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
       }
     }
   }
-};
+});
 
 const pageList = {
   base: "relative flex flex-col",
@@ -3840,69 +3605,7 @@ const pageLogos = {
   }
 };
 
-const pageMarquee = {
-  slots: {
-    root: "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
-    content: "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        content: "w-full"
-      },
-      vertical: {
-        content: "h-full"
-      }
-    },
-    pauseOnHover: {
-      true: {
-        content: "group-hover:[animation-play-state:paused]"
-      }
-    },
-    reverse: {
-      true: {
-        content: "[animation-direction:reverse]"
-      }
-    },
-    overlay: {
-      true: {
-        root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      orientation: "horizontal",
-      class: {
-        root: "flex-row",
-        content: "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
-      }
-    },
-    {
-      orientation: "horizontal",
-      overlay: true,
-      class: {
-        root: "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
-      }
-    },
-    {
-      orientation: "vertical",
-      class: {
-        root: "flex-col",
-        content: "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
-      }
-    },
-    {
-      orientation: "vertical",
-      overlay: true,
-      class: {
-        root: "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
-      }
-    }
-  ]
-};
-
-const pageSection = {
+const pageSection = {
   slots: {
     root: "relative isolate",
     container: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
@@ -3955,35 +3658,27 @@ const pageSection = {
     },
     body: {
       true: ""
-    },
-    features: {
-      true: "",
-      false: ""
     }
   },
-  compoundVariants: [
-    {
-      orientation: "vertical",
-      title: true,
-      class: {
-        body: "mt-16"
-      }
-    },
-    {
-      orientation: "vertical",
-      description: true,
-      class: {
-        body: "mt-16"
-      }
-    },
-    {
-      orientation: "vertical",
-      body: true,
-      class: {
-        footer: "mt-16"
-      }
+  compoundVariants: [{
+    orientation: "vertical",
+    title: true,
+    class: {
+      body: "mt-16"
+    }
+  }, {
+    orientation: "vertical",
+    description: true,
+    class: {
+      body: "mt-16"
+    }
+  }, {
+    orientation: "vertical",
+    body: true,
+    class: {
+      footer: "mt-16"
     }
-  ]
+  }]
 };
 
 const pagination = {
@@ -4138,22 +3833,19 @@ const pricingPlan = {
       }
     }
   },
-  compoundVariants: [
-    {
-      orientation: "horizontal",
-      variant: "soft",
-      class: {
-        root: "divide-accented"
-      }
-    },
-    {
-      orientation: "horizontal",
-      variant: "subtle",
-      class: {
-        root: "divide-accented"
-      }
+  compoundVariants: [{
+    orientation: "horizontal",
+    variant: "soft",
+    class: {
+      root: "divide-accented"
     }
-  ],
+  }, {
+    orientation: "horizontal",
+    variant: "subtle",
+    class: {
+      root: "divide-accented"
+    }
+  }],
   defaultVariants: {
     variant: "outline"
   }
@@ -4173,13 +3865,11 @@ const pricingPlans = {
       true: ""
     }
   },
-  compoundVariants: [
-    {
-      compact: false,
-      scale: true,
-      class: "lg:gap-x-13"
-    }
-  ]
+  compoundVariants: [{
+    compact: false,
+    scale: true,
+    class: "lg:gap-x-13"
+  }]
 };
 
 const pricingTable = {
@@ -4239,7 +3929,7 @@ const progress = (options) => ({
     root: "gap-2",
     base: "relative overflow-hidden rounded-full bg-accented",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-dimmed transition-[width] duration-200",
+    status: "flex text-dimmed transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -4308,12 +3998,12 @@ const progress = (options) => ({
       horizontal: {
         root: "w-full flex flex-col",
         base: "w-full",
-        status: "flex-row"
+        status: "flex-row items-center justify-end min-w-fit"
       },
       vertical: {
         root: "h-full flex flex-row-reverse",
         base: "h-full",
-        status: "flex-col"
+        status: "flex-col justify-end min-h-fit"
       }
     },
     inverted: {
@@ -4626,10 +4316,6 @@ const radioGroup = (options) => ({
   }
 });
 
-const scrollToSection = {
-  base: ""
-};
-
 const select = (options) => {
   return defuFn({
     slots: {
@@ -4655,7 +4341,7 @@ const select = (options) => {
       itemLabel: "truncate"
     },
     variants: {
-      ...buttonGroupVariant,
+      ...fieldGroupVariant,
       size: {
         xs: {
           label: "p-1 text-[10px]/3 gap-1",
@@ -4708,9 +4394,16 @@ const select = (options) => {
           empty: "p-2 text-base"
         }
       }
-    }
+    },
+    compoundVariants: (prev) => prev.map((item) => ({
+      ...item,
+      class: typeof item.class === "string" ? replaceFocus$1(item.class) : item.class
+    }))
   }, input(options));
 };
+function replaceFocus$1(str) {
+  return str.replace(/focus-visible:/g, "focus:");
+}
 
 const selectMenu = (options) => {
   return defuFn({
@@ -4718,9 +4411,16 @@ const selectMenu = (options) => {
       input: "border-b border-default",
       focusScope: "flex flex-col min-h-0",
       content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"]
-    }
+    },
+    compoundVariants: (prev) => prev.map((item) => ({
+      ...item,
+      class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
+    }))
   }, select(options));
 };
+function replaceFocus(str) {
+  return str.replace(/focus:/g, "focus-visible:");
+}
 
 const separator = (options) => ({
   slots: {
@@ -5784,7 +5484,7 @@ const tree = (options) => ({
     linkLeadingIcon: "shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-[expanded=true]:rotate-180"
   },
   variants: {
     color: {
@@ -5855,7 +5555,7 @@ const tree = (options) => ({
   }
 });
 
-const user = {
+const user = (options) => ({
   slots: {
     root: "relative group/user",
     wrapper: "",
@@ -5874,14 +5574,8 @@ const user = {
     },
     to: {
       true: {
-        name: [
-          "text-default peer-hover:text-highlighted",
-          "transition-colors"
-        ],
-        description: [
-          "peer-hover:text-toned",
-          "transition-colors"
-        ],
+        name: ["text-default peer-hover:text-highlighted", options.theme.transitions && "transition-colors"],
+        description: ["peer-hover:text-toned", options.theme.transitions && "transition-colors"],
         avatar: "transform transition-transform duration-200 group-hover/user:scale-115"
       },
       false: {
@@ -5943,7 +5637,7 @@ const user = {
   defaultVariants: {
     size: "md"
   }
-};
+});
 
 const theme = {
   __proto__: null,
@@ -5958,7 +5652,6 @@ const theme = {
   blogPosts: blogPosts,
   breadcrumb: breadcrumb,
   button: button,
-  buttonGroup: buttonGroup,
   calendar: calendar,
   card: card$1,
   carousel: carousel,
@@ -5976,11 +5669,6 @@ const theme = {
   colorPicker: colorPicker,
   commandPalette: commandPalette,
   container: container,
-  contentNavigation: contentNavigation,
-  contentSearch: contentSearch,
-  contentSearchButton: contentSearchButton,
-  contentSurround: contentSurround,
-  contentToc: contentToc,
   contextMenu: contextMenu,
   dashboardGroup: dashboardGroup,
   dashboardNavbar: dashboardNavbar,
@@ -5995,6 +5683,7 @@ const theme = {
   drawer: drawer,
   dropdownMenu: dropdownMenu,
   error: error,
+  fieldGroup: fieldGroup$1,
   fileUpload: fileUpload,
   footer: footer,
   footerColumns: footerColumns,
@@ -6008,16 +5697,16 @@ const theme = {
   kbd: kbd$1,
   link: link,
   main: main,
+  marquee: marquee,
   modal: modal,
   navigationMenu: navigationMenu,
   page: page,
-  pageAccordion: pageAccordion,
   pageAnchors: pageAnchors,
   pageAside: pageAside,
   pageBody: pageBody,
+  pageCTA: pageCta,
   pageCard: pageCard,
   pageColumns: pageColumns,
-  pageCta: pageCta,
   pageFeature: pageFeature,
   pageGrid: pageGrid,
   pageHeader: pageHeader,
@@ -6025,7 +5714,6 @@ const theme = {
   pageLinks: pageLinks,
   pageList: pageList,
   pageLogos: pageLogos,
-  pageMarquee: pageMarquee,
   pageSection: pageSection,
   pagination: pagination,
   pinInput: pinInput,
@@ -6035,7 +5723,6 @@ const theme = {
   pricingTable: pricingTable,
   progress: progress,
   radioGroup: radioGroup,
-  scrollToSection: scrollToSection,
   select: select,
   selectMenu: selectMenu,
   separator: separator,
@@ -6055,21 +5742,9 @@ const theme = {
   user: user
 };
 
-const contentTheme = {
-  __proto__: null,
-  contentNavigation: contentNavigation,
-  contentSearch: contentSearch,
-  contentSearchButton: contentSearchButton,
-  contentSurround: contentSurround,
-  contentToc: contentToc
-};
-
-const a = {
-  base: [
-    "text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary",
-    "transition-colors [&>code]:transition-colors"
-  ]
-};
+const a = (options) => ({
+  base: ["text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary", options.theme.transitions && "transition-colors [&>code]:transition-colors"]
+});
 
 const accordion = {
   slots: {
@@ -6090,161 +5765,111 @@ const blockquote = {
   base: "border-s-4 border-accented ps-4 italic"
 };
 
-const callout = (options) => {
-  const colors = options.theme.colors || [];
-  const colorVariants = Object.fromEntries(
-    colors.map((color) => [
-      color,
-      {
+const callout = (options) => ({
+  slots: {
+    base: ["group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 [&>*]:last:!mb-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0", options.theme.transitions && "transition-colors"],
+    icon: ["size-4 shrink-0 align-sub me-1.5", options.theme.transitions && "transition-colors"],
+    externalIcon: ["size-4 align-top absolute right-2 top-2 pointer-events-none", options.theme.transitions && "transition-colors"]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         base: `border border-${color}/25 bg-${color}/10 text-${color}-600 dark:text-${color}-300 [&_a]:text-${color} [&_a]:hover:border-${color} [&_code]:text-${color}-600 dark:[&_code]:text-${color}-300 [&_code]:border-${color}/25 [&_a]:hover:[&>code]:border-${color} [&_a]:hover:[&>code]:text-${color} [&>ul]:marker:text-${color}/50`,
         icon: `text-${color}`,
         externalIcon: `text-${color}-600 dark:text-${color}-300`
+      }])),
+      neutral: {
+        base: "border border-muted bg-muted text-default",
+        icon: "text-highlighted",
+        externalIcon: "text-dimmed"
       }
-    ])
-  );
-  const compoundColorVariants = colors.map((color) => ({
+    },
+    to: {
+      true: "border-dashed"
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     to: true,
     class: {
       base: `hover:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
-  }));
-  return {
-    slots: {
-      base: [
-        "group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 [&>*]:last:!mb-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0",
-        "transition-colors"
-      ],
-      icon: [
-        "size-4 shrink-0 align-sub me-1.5",
-        "transition-colors"
-      ],
-      externalIcon: [
-        "size-4 align-top absolute right-2 top-2 pointer-events-none",
-        "transition-colors"
-      ]
-    },
-    variants: {
-      color: {
-        ...colorVariants,
-        neutral: {
-          base: "border border-muted bg-muted text-default",
-          icon: "text-highlighted",
-          externalIcon: "text-dimmed"
-        }
-      },
-      to: {
-        true: "border-dashed"
-      }
-    },
-    compoundVariants: [
-      ...compoundColorVariants,
-      {
-        color: "neutral",
-        to: true,
-        class: {
-          base: "hover:border-inverted",
-          externalIcon: "group-hover:text-highlighted"
-        }
-      }
-    ],
-    defaultVariants: {
-      color: "neutral"
+  })), {
+    color: "neutral",
+    to: true,
+    class: {
+      base: "hover:border-inverted",
+      externalIcon: "group-hover:text-highlighted"
     }
-  };
-};
+  }],
+  defaultVariants: {
+    color: "neutral"
+  }
+});
 
-const card = (options) => {
-  const colors = options.theme.colors || [];
-  const colorVariants = Object.fromEntries(
-    colors.map((color) => [
-      color,
-      {
+const card = (options) => ({
+  slots: {
+    base: ["group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default", options.theme.transitions && "transition-colors"],
+    icon: "size-6 mb-2 block",
+    title: "text-highlighted font-semibold",
+    description: "text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1",
+    externalIcon: ["size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none", options.theme.transitions && "transition-colors"]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         icon: `text-${color}`
+      }])),
+      neutral: {
+        icon: "text-highlighted"
+      }
+    },
+    to: {
+      true: ""
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
-    ])
-  );
-  const compoundColorVariants = colors.map((color) => ({
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     to: true,
     class: {
       base: `hover:bg-${color}/10 hover:border-${color}`,
       externalIcon: `group-hover:text-${color}`
     }
-  }));
-  return {
-    slots: {
-      base: [
-        "group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default",
-        "transition-colors"
-      ],
-      icon: "size-6 mb-2 block",
-      title: "text-highlighted font-semibold",
-      description: "text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1",
-      externalIcon: [
-        "size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none",
-        "transition-colors"
-      ]
-    },
-    variants: {
-      color: {
-        ...colorVariants,
-        neutral: {
-          icon: "text-highlighted"
-        }
-      },
-      to: {
-        true: ""
-      },
-      title: {
-        true: {
-          description: "mt-1"
-        }
-      }
-    },
-    compoundVariants: [
-      ...compoundColorVariants,
-      {
-        color: "neutral",
-        to: true,
-        class: {
-          base: "hover:bg-elevated/50 hover:border-inverted",
-          externalIcon: "group-hover:text-highlighted"
-        }
-      }
-    ],
-    defaultVariants: {
-      color: "primary"
+  })), {
+    color: "neutral",
+    to: true,
+    class: {
+      base: "hover:bg-elevated/50 hover:border-inverted",
+      externalIcon: "group-hover:text-highlighted"
     }
-  };
-};
+  }],
+  defaultVariants: {
+    color: "primary"
+  }
+});
 
 const cardGroup = {
   base: "grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0"
 };
 
-const code = (options) => {
-  const colors = options.theme.colors || [];
-  const colorVariants = Object.fromEntries(
-    colors.map((color) => [
-      color,
-      `border border-${color}/25 bg-${color}/10 text-${color}`
-    ])
-  );
-  return {
-    base: "px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block",
-    variants: {
-      color: {
-        ...colorVariants,
-        neutral: "border border-muted text-highlighted bg-muted"
-      }
-    },
-    defaultVariants: {
-      color: "neutral"
+const code = (options) => ({
+  base: "px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block",
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `border border-${color}/25 bg-${color}/10 text-${color}`])),
+      neutral: "border border-muted text-highlighted bg-muted"
     }
-  };
-};
+  },
+  defaultVariants: {
+    color: "neutral"
+  }
+});
 
 const codeCollapse = {
   slots: {
@@ -6266,19 +5891,16 @@ const codeCollapse = {
   }
 };
 
-const codeGroup = {
+const codeGroup = (options) => ({
   slots: {
     root: "relative group *:not-first:!my-0 *:not-first:!static my-5",
     list: "relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2",
     indicator: "absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs",
-    trigger: [
-      "relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none",
-      "transition-colors"
-    ],
+    trigger: ["relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none", options.theme.transitions && "transition-colors"],
     triggerIcon: "size-4 shrink-0",
     triggerLabel: "truncate"
   }
-};
+});
 
 const codeIcon = {
   "package.json": "i-vscode-icons-file-type-node",
@@ -6362,7 +5984,7 @@ const codePreview = {
   }
 };
 
-const codeTree = {
+const codeTree = (options) => ({
   slots: {
     root: "relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md",
     list: "isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto",
@@ -6373,7 +5995,7 @@ const codeTree = {
     linkLeadingIcon: "size-4 shrink-0",
     linkLabel: "truncate",
     linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
-    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[expanded=true]:rotate-180",
     content: "overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto"
   },
   variants: {
@@ -6382,27 +6004,21 @@ const codeTree = {
         link: "text-highlighted before:bg-elevated"
       },
       false: {
-        link: [
-          "hover:text-highlighted hover:before:bg-elevated/50",
-          "transition-colors before:transition-colors"
-        ]
+        link: ["hover:text-highlighted hover:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"]
       }
     }
   }
-};
+});
 
-const collapsible = {
+const collapsible = (options) => ({
   slots: {
     root: "my-5",
-    trigger: [
-      "group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none",
-      "transition-colors"
-    ],
+    trigger: ["group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none", options.theme.transitions && "transition-colors"],
     triggerIcon: "size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     triggerLabel: "truncate",
     content: "*:first:mt-2.5 *:last:mb-0 *:my-1.5"
   }
-};
+});
 
 const em = {
   base: ""
@@ -6431,35 +6047,23 @@ const h1 = {
   }
 };
 
-const h2 = {
+const h2 = (options) => ({
   slots: {
-    base: [
-      "relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold",
-      "[&>a>code]:transition-colors"
-    ],
-    leading: [
-      "absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted",
-      "transition"
-    ],
+    base: ["relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
+    leading: ["absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
     leadingIcon: "size-4 shrink-0",
     link: "group lg:ps-2 lg:-ms-2"
   }
-};
+});
 
-const h3 = {
+const h3 = (options) => ({
   slots: {
-    base: [
-      "relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold",
-      "[&>a>code]:transition-colors"
-    ],
-    leading: [
-      "absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted",
-      "transition"
-    ],
+    base: ["relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold", options.theme.transitions && "[&>a>code]:transition-colors"],
+    leading: ["absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted", options.theme.transitions && "transition"],
     leadingIcon: "size-4 shrink-0",
     link: "group lg:ps-2 lg:-ms-2"
   }
-};
+});
 
 const h4 = {
   slots: {
@@ -6477,7 +6081,24 @@ const icon = {
 };
 
 const img = {
-  base: ""
+  slots: {
+    base: "rounded-md w-full",
+    overlay: "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
+    content: "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8"
+  },
+  variants: {
+    zoom: {
+      true: "will-change-transform"
+    },
+    open: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    zoom: true,
+    open: false,
+    class: "cursor-zoom-in"
+  }]
 };
 
 const kbd = {
@@ -6573,7 +6194,7 @@ const ul = {
   base: "list-disc ps-6 my-5 marker:text-(--ui-border-accented)"
 };
 
-const proseTheme = {
+const themeProse = {
   __proto__: null,
   a: a,
   accordion: accordion,
@@ -6618,45 +6239,286 @@ const proseTheme = {
   ul: ul
 };
 
-const themeCollections = {
-  "": theme,
-  // Root theme files
-  "content": contentTheme,
-  "prose": proseTheme
+const contentNavigation = (options) => ({
+  slots: {
+    root: "",
+    content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
+    list: "isolate -mx-2.5 -mt-1.5",
+    item: "",
+    listWithChildren: "ms-5 border-s border-default",
+    itemWithChildren: "flex flex-col data-[state=open]:mb-1.5",
+    trigger: "font-semibold",
+    link: "group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 size-5",
+    linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    linkTrailingBadge: "shrink-0",
+    linkTrailingBadgeSize: "sm",
+    linkTrailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180",
+    linkTitle: "truncate",
+    linkTitleExternalIcon: "size-3 align-top text-dimmed"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        trigger: `focus-visible:ring-${color}`,
+        link: `focus-visible:before:ring-${color}`
+      }])),
+      neutral: {
+        trigger: "focus-visible:ring-inverted",
+        link: "focus-visible:before:ring-inverted"
+      }
+    },
+    highlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      pill: "",
+      link: ""
+    },
+    active: {
+      true: {
+        link: "font-medium"
+      },
+      false: {
+        link: "text-muted",
+        linkLeadingIcon: "text-dimmed"
+      }
+    },
+    disabled: {
+      true: {
+        trigger: "data-[state=open]:text-highlighted"
+      }
+    },
+    highlight: {
+      true: {}
+    },
+    level: {
+      true: {
+        item: "ps-1.5 -ms-px",
+        itemWithChildren: "ps-1.5 -ms-px"
+      }
+    }
+  },
+  compoundVariants: [{
+    highlight: true,
+    level: true,
+    class: {
+      link: ["after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "pill",
+    class: {
+      link: ["hover:text-highlighted hover:before:bg-elevated/50 data-[state=open]:text-highlighted", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
+    }
+  }, ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "pill",
+    active: true,
+    class: {
+      link: `text-${color}`,
+      linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+    }
+  })), {
+    color: "neutral",
+    variant: "pill",
+    active: true,
+    class: {
+      link: "text-highlighted",
+      linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
+    }
+  }, {
+    variant: "pill",
+    active: true,
+    highlight: false,
+    class: {
+      link: "before:bg-elevated"
+    }
+  }, {
+    variant: "pill",
+    active: true,
+    highlight: true,
+    disabled: false,
+    class: {
+      link: ["hover:before:bg-elevated/50", options.theme.transitions && "before:transition-colors"]
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "link",
+    class: {
+      link: ["hover:text-highlighted data-[state=open]:text-highlighted", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-default group-data-[state=open]:text-default", options.theme.transitions && "transition-colors"]
+    }
+  }, ...(options.theme.colors || []).map((color) => ({
+    color,
+    variant: "link",
+    active: true,
+    class: {
+      link: `text-${color}`,
+      linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+    }
+  })), {
+    color: "neutral",
+    variant: "link",
+    active: true,
+    class: {
+      link: "text-highlighted",
+      linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
+    }
+  }, ...(options.theme.colors || []).map((highlightColor) => ({
+    highlightColor,
+    highlight: true,
+    level: true,
+    active: true,
+    class: {
+      link: `after:bg-${highlightColor}`
+    }
+  })), {
+    highlightColor: "neutral",
+    highlight: true,
+    level: true,
+    active: true,
+    class: {
+      link: "after:bg-inverted"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    highlightColor: "primary",
+    variant: "pill"
+  }
+});
+
+const contentSearch = {
+  slots: {
+    modal: "sm:max-w-3xl sm:h-[28rem]",
+    input: "[&>input]:text-base/5"
+  }
+};
+
+const contentSearchButton = {
+  slots: {
+    base: "",
+    trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  }
 };
-function generateVariantDeclarations(variants, result) {
-  return variants.filter((variant) => result.variants?.[variant]).map((variant) => {
-    const keys = Object.keys(result.variants[variant]);
-    return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
-  });
-}
-function processJsonWithVariants(json, variants) {
-  let processedJson = json;
-  for (const variant of variants) {
-    processedJson = processedJson.replace(
-      new RegExp(`("${variant}": "[^"]+")`, "g"),
-      `$1 as typeof ${variant}[number]`
-    );
-    processedJson = processedJson.replace(
-      new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"),
-      (_, before, match, after) => {
-        const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
-        return `${before}${replaced}${after}`;
-      }
-    );
+
+const contentSurround = (options) => ({
+  slots: {
+    root: "grid grid-cols-1 sm:grid-cols-2 gap-8",
+    link: ["group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary", options.theme.transitions && "transition-colors"],
+    linkLeading: ["inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50", options.theme.transitions && "transition"],
+    linkLeadingIcon: ["size-5 shrink-0 text-highlighted group-hover:text-primary", options.theme.transitions && "transition-[color,translate]"],
+    linkTitle: "font-medium text-[15px] text-highlighted mb-1 truncate",
+    linkDescription: "text-sm text-muted line-clamp-2"
+  },
+  variants: {
+    direction: {
+      left: {
+        linkLeadingIcon: [options.theme.transitions && "group-active:-translate-x-0.5"]
+      },
+      right: {
+        link: "text-right",
+        linkLeadingIcon: [options.theme.transitions && "group-active:translate-x-0.5"]
+      }
+    }
   }
-  return processedJson;
-}
-function getTemplates(options, uiConfig) {
+});
+
+const contentToc = (options) => ({
+  slots: {
+    root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
+    container: "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+    top: "",
+    bottom: "hidden lg:flex lg:flex-col gap-6",
+    trigger: "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+    title: "truncate",
+    trailing: "ms-auto inline-flex gap-1.5 items-center",
+    trailingIcon: "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+    list: "min-w-0",
+    listWithChildren: "ms-3",
+    item: "min-w-0",
+    itemWithChildren: "",
+    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+    linkText: "truncate",
+    indicator: "absolute ms-2.5 transition-[translate,height] duration-200 h-(--indicator-size) translate-y-(--indicator-position) w-px rounded-full"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    highlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `bg-${color}`
+      }])),
+      neutral: {
+        indicator: "bg-inverted"
+      }
+    },
+    active: {
+      false: {
+        link: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
+      }
+    },
+    highlight: {
+      true: {
+        list: "ms-2.5 ps-4 border-s border-default",
+        item: "-ms-px"
+      }
+    },
+    body: {
+      true: {
+        bottom: "mt-6"
+      }
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    active: true,
+    class: {
+      link: `text-${color}`,
+      linkLeadingIcon: `text-${color}`
+    }
+  })), {
+    color: "neutral",
+    active: true,
+    class: {
+      link: "text-highlighted",
+      linkLeadingIcon: "text-highlighted"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    highlightColor: "primary"
+  }
+});
+
+const themeContent = {
+  __proto__: null,
+  contentNavigation: contentNavigation,
+  contentSearch: contentSearch,
+  contentSearchButton: contentSearchButton,
+  contentSurround: contentSurround,
+  contentToc: contentToc
+};
+
+function getTemplates(options, uiConfig, nuxt) {
   const templates = [];
-  for (const [folder, themeCollection] of Object.entries(themeCollections)) {
-    for (const [component, template] of Object.entries(themeCollection)) {
-      const folderPath = folder ? `${folder}/` : "";
-      const filename = `ui/${folderPath}${kebabCase(component)}.ts`;
+  let hasProse = false;
+  let hasContent = false;
+  function writeThemeTemplate(theme2, path) {
+    for (const component in theme2) {
       templates.push({
-        filename,
+        filename: `ui/${path ? path + "/" : ""}${kebabCase(component)}.ts`,
         write: true,
         getContents: async () => {
+          const template = theme2[component];
           const result = typeof template === "function" ? template(options) : template;
           if (result?.defaultVariants?.color && options.theme?.defaultVariants?.color) {
             result.defaultVariants.color = options.theme.defaultVariants.color;
@@ -6669,15 +6531,42 @@ function getTemplates(options, uiConfig) {
             return keys.some((key) => key !== "true" && key !== "false");
           }).map(([key]) => key);
           let json = JSON.stringify(result, null, 2);
-          json = processJsonWithVariants(json, variants);
+          for (const variant of variants) {
+            json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+            json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+              const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+              return `${before}${replaced}${after}`;
+            });
+          }
+          function generateVariantDeclarations(variants2) {
+            return variants2.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
+              const keys = Object.keys(result.variants[variant]);
+              return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+            });
+          }
           return [
-            ...generateVariantDeclarations(variants, result),
+            ...generateVariantDeclarations(variants),
             `export default ${json}`
           ].join("\n\n");
         }
       });
     }
   }
+  if (!!nuxt && (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content))) {
+    hasProse = true;
+    const path = "prose";
+    writeThemeTemplate(themeProse, path);
+    templates.push({
+      filename: `ui/${path}/index.ts`,
+      write: true,
+      getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+    });
+  }
+  if (!!nuxt && (hasNuxtModule("@nuxt/content") || options.content)) {
+    hasContent = true;
+    writeThemeTemplate(themeContent, "content");
+  }
+  writeThemeTemplate(theme);
   templates.push({
     filename: "ui.css",
     write: true,
@@ -6752,31 +6641,28 @@ function getTemplates(options, uiConfig) {
     filename: "ui/index.ts",
     write: true,
     getContents: () => {
-      const exports = [];
-      for (const component of Object.keys(theme)) {
-        exports.push(`export { default as ${component} } from './${kebabCase(component)}'`);
+      let contents = Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n");
+      if (hasContent) {
+        contents += "\n";
+        contents += Object.keys(themeContent).map((component) => `export { default as ${component} } from './content/${kebabCase(component)}'`).join("\n");
       }
-      return exports.join("\n");
+      if (hasProse) contents += `
+export * as prose from './prose'
+`;
+      return contents;
     }
   });
-  templates.push({
-    filename: "ui/content/index.ts",
-    write: true,
-    getContents: () => Object.keys(contentTheme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
-  });
-  templates.push({
-    filename: "ui/prose/index.ts",
-    write: true,
-    getContents: () => Object.keys(proseTheme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
-  });
   templates.push({
     filename: "types/ui.d.ts",
-    getContents: () => `import * as ui from '#build/ui'
+    getContents: () => {
+      const iconKeys = Object.keys(uiConfig?.icons || {});
+      const iconUnion = iconKeys.length ? iconKeys.map((i) => JSON.stringify(i)).join(" | ") : "string";
+      return `import * as ui from '#build/ui'
 import type { TVConfig } from '@eslamdevui/ui'
 import type { defaultConfig } from 'tailwind-variants'
 import colors from 'tailwindcss/colors'
 
-const icons = ${JSON.stringify(uiConfig.icons)};
+type IconsConfig = Record<${iconUnion} | (string & {}), string>
 
 type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
 type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
@@ -6786,7 +6672,7 @@ type AppConfigUI = {
     ${options.theme?.colors?.map((color) => `'${color}'?: Color`).join("\n		")}
     neutral?: NeutralColor | (string & {})
   }
-  icons?: Partial<typeof icons>
+  icons?: Partial<IconsConfig>
   tv?: typeof defaultConfig
 } & TVConfig<typeof ui>
 
@@ -6794,14 +6680,15 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     /**
      * Nuxt UI theme configuration
-     * @see https://ui.nuxt.com/getting-started/theme#customize-theme
+     * @see https://ui.nuxt.com/docs/getting-started/theme/components
      */
     ui?: AppConfigUI
   }
 }
 
 export {}
-`
+`;
+    }
   });
   templates.push({
     filename: "ui-image-component.ts",
@@ -6814,7 +6701,7 @@ export {}
   return templates;
 }
 function addTemplates(options, nuxt, resolve) {
-  const templates = getTemplates(options, nuxt.options.appConfig.ui);
+  const templates = getTemplates(options, nuxt.options.appConfig.ui, nuxt);
   for (const template of templates) {
     if (template.filename.endsWith(".d.ts")) {
       addTypeTemplate(template);