@nuxt/ui-pro/dist/shared/ui-pro.B6uD94pG.mjs

Ship beautiful web applications at the speed of light with Nuxt UI Pro.

import 'node:url';
import { kebabCase } from 'scule';
import { addTypeTemplate, addTemplate, hasNuxtModule } from '@nuxt/kit';
import { ofetch } from 'ofetch';
import { readPackageJSON, readGitConfig } from 'pkg-types';

const authForm = {
  slots: {
    root: "w-full space-y-6",
    header: "flex flex-col text-center",
    leading: "mb-2",
    leadingIcon: "size-8 shrink-0 inline-block",
    title: "text-xl text-pretty font-semibold text-highlighted",
    description: "mt-1 text-base text-pretty text-muted",
    body: "gap-y-6 flex flex-col",
    providers: "space-y-3",
    checkbox: "",
    select: "",
    password: "w-full",
    otp: "w-full justify-center",
    input: "w-full",
    separator: "",
    form: "space-y-5",
    footer: "text-sm text-center text-muted mt-2"
  }
};

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"
      }
    },
    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) => ({
  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: [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",
  variants: {
    orientation: {
      horizontal: "sm:grid sm:grid-cols-2 lg:grid-cols-3",
      vertical: ""
    }
  }
};

const chatMessage = (options) => ({
  slots: {
    root: "group/message relative w-full",
    container: "relative flex items-start group-data-[role=user]/message:max-w-[75%]",
    leading: "inline-flex items-center justify-center min-h-6",
    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", options.theme.transitions && "transition-opacity"]
  },
  variants: {
    variant: {
      solid: {
        content: "bg-inverted text-inverted"
      },
      outline: {
        content: "bg-default ring ring-default"
      },
      soft: {
        content: "bg-elevated/50"
      },
      subtle: {
        content: "bg-elevated/50 ring ring-default"
      },
      naked: {
        content: ""
      }
    },
    side: {
      left: {
        container: "rtl:justify-end"
      },
      right: {
        container: "ltr:justify-end ms-auto"
      }
    },
    leading: {
      true: ""
    },
    actions: {
      true: ""
    },
    compact: {
      true: {
        root: "scroll-mt-3",
        container: "gap-1.5 pb-3",
        leadingIcon: "size-5",
        leadingAvatarSize: "2xs"
      },
      false: {
        root: "scroll-mt-4 sm:scroll-mt-6",
        container: "gap-3 pb-8",
        leadingIcon: "size-8",
        leadingAvatarSize: "md"
      }
    }
  },
  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]",
    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"
  },
  variants: {
    compact: {
      true: "",
      false: ""
    }
  }
};

const chatPalette = {
  slots: {
    root: "relative flex-1 flex flex-col min-h-0 min-w-0",
    prompt: "px-0 rounded-t-none border-t border-default",
    close: "",
    content: "overflow-y-auto flex-1 flex flex-col py-3"
  }
};

const chatPrompt = {
  slots: {
    root: "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur",
    header: "flex items-center gap-1.5",
    body: "items-start",
    footer: "flex items-center justify-between gap-1.5",
    base: "text-base/5"
  },
  variants: {
    variant: {
      outline: {
        root: "bg-default/75 ring ring-default"
      },
      soft: {
        root: "bg-elevated/50"
      },
      subtle: {
        root: "bg-elevated/50 ring ring-default"
      },
      naked: {
        root: ""
      }
    }
  },
  defaultVariants: {
    variant: "outline"
  }
};

const chatPromptSubmit = {
  slots: {
    base: ""
  }
};

const dashboardGroup = {
  base: "fixed inset-0 flex overflow-hidden"
};

const dashboardNavbar = {
  slots: {
    root: "h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5",
    left: "flex items-center gap-1.5 min-w-0",
    icon: "shrink-0 size-5 self-center me-1.5",
    title: "flex items-center gap-1.5 font-semibold text-highlighted truncate",
    center: "hidden lg:flex",
    right: "flex items-center shrink-0 gap-1.5",
    toggle: ""
  },
  variants: {
    toggleSide: {
      left: {
        toggle: ""
      },
      right: {
        toggle: ""
      }
    }
  }
};

const dashboardPanel = {
  slots: {
    root: "relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r lg:not-last:border-default shrink-0",
    body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6",
    handle: ""
  },
  variants: {
    size: {
      true: {
        root: "w-full lg:w-(--width)"
      },
      false: {
        root: "flex-1"
      }
    }
  }
};

const dashboardResizeHandle = {
  base: "hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5"
};

const dashboardSearch = {
  slots: {
    modal: "sm:max-w-3xl sm:h-[28rem]",
    input: "[&>input]:text-base/5"
  }
};

const dashboardSearchButton = {
  slots: {
    base: "",
    trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
  }
};

const dashboardSidebar = {
  slots: {
    root: "relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0",
    header: "h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4",
    body: "flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2",
    footer: "shrink-0 flex items-center gap-1.5 px-4 py-2",
    toggle: "",
    handle: "",
    content: "lg:hidden",
    overlay: "lg:hidden"
  },
  variants: {
    menu: {
      true: {
        header: "sm:px-6",
        body: "sm:px-6",
        footer: "sm:px-6"
      }
    },
    side: {
      left: {
        root: "border-r border-default"
      },
      right: {
        root: ""
      }
    },
    toggleSide: {
      left: {
        toggle: ""
      },
      right: {
        toggle: "ms-auto"
      }
    }
  }
};

const dashboardSidebarCollapse = {
  base: "hidden lg:flex",
  variants: {
    side: {
      left: "",
      right: ""
    }
  }
};

const dashboardSidebarToggle = {
  base: "lg:hidden",
  variants: {
    side: {
      left: "",
      right: ""
    }
  }
};

const dashboardToolbar = {
  slots: {
    root: "shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
    left: "flex items-center gap-1.5",
    right: "flex items-center gap-1.5"
  }
};

const error = {
  slots: {
    root: "min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center",
    statusCode: "text-base font-semibold text-primary",
    statusMessage: "mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance",
    message: "mt-4 text-lg text-muted text-balance",
    links: "mt-8 flex items-center justify-center gap-6"
  }
};

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 header = {
  slots: {
    root: "bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50",
    container: "flex items-center justify-between gap-3 h-full",
    left: "lg:flex-1 flex items-center gap-1.5",
    center: "hidden lg:flex",
    right: "flex items-center justify-end lg:flex-1 gap-1.5",
    title: "shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5",
    toggle: "lg:hidden",
    content: "lg:hidden",
    overlay: "lg:hidden",
    header: "px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3",
    body: "p-4 sm:p-6 overflow-y-auto"
  },
  variants: {
    toggleSide: {
      left: {
        toggle: "-ms-1.5"
      },
      right: {
        toggle: "-me-1.5"
      }
    }
  }
};

const main = {
  base: "min-h-[calc(100vh-var(--ui-header-height))]"
};

const page = {
  slots: {
    root: "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10",
    left: "lg:col-span-2",
    center: "lg:col-span-8",
    right: "lg:col-span-2 order-first lg:order-last"
  },
  variants: {
    left: {
      true: ""
    },
    right: {
      true: ""
    }
  },
  compoundVariants: [{
    left: true,
    right: true,
    class: {
      center: "lg:col-span-6"
    }
  }, {
    left: false,
    right: false,
    class: {
      center: "lg:col-span-10"
    }
  }]
};

const pageAccordion = {
  slots: {
    base: "",
    trigger: "text-base",
    body: "text-base text-muted"
  }
};

const pageAnchors = (options) => ({
  slots: {
    root: "",
    list: "",
    item: "relative",
    link: "group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary",
    linkLeading: "rounded-md p-1 inline-flex ring-inset ring",
    linkLeadingIcon: "size-4 shrink-0",
    linkLabel: "truncate",
    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed"
  },
  variants: {
    active: {
      true: {
        link: "text-primary font-semibold",
        linkLeading: "bg-primary ring-primary text-inverted"
      },
      false: {
        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: {
    root: "hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5",
    container: "relative",
    top: "sticky -top-8 -mt-8 pointer-events-none z-[1]",
    topHeader: "h-8 bg-default -mx-4 px-4",
    topBody: "bg-default relative pointer-events-auto flex flex-col -mx-4 px-4",
    topFooter: "h-8 bg-gradient-to-b from-default -mx-4 px-4"
  }
};

const pageBody = {
  base: "mt-8 pb-24 space-y-12"
};

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: "",
    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"
  },
  variants: {
    orientation: {
      horizontal: {
        container: "lg:grid-cols-2 lg:items-center",
        description: "text-pretty"
      },
      vertical: {
        container: "",
        title: "text-center",
        description: "text-center text-balance",
        links: "justify-center"
      }
    },
    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"
      },
      naked: {
        description: "text-muted"
      }
    },
    title: {
      true: {
        description: "mt-6"
      }
    }
  },
  defaultVariants: {
    variant: "outline"
  }
};

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)]"
    }
  }],
  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",
    wrapper: "",
    leading: "inline-flex items-center justify-center",
    leadingIcon: "size-5 shrink-0 text-primary",
    title: "text-base text-pretty font-semibold text-highlighted",
    description: "text-[15px] text-pretty text-muted"
  },
  variants: {
    orientation: {
      horizontal: {
        root: "flex items-start gap-2.5",
        leading: "p-0.5"
      },
      vertical: {
        leading: "mb-2.5"
      }
    },
    title: {
      true: {
        description: "mt-1"
      }
    }
  }
};

const pageGrid = {
  base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
};

const pageHeader = {
  slots: {
    root: "relative border-b border-default py-8",
    container: "",
    wrapper: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4",
    headline: "mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5",
    title: "text-3xl sm:text-4xl text-pretty font-bold text-highlighted",
    description: "text-lg text-pretty text-muted",
    links: "flex flex-wrap items-center gap-1.5"
  },
  variants: {
    title: {
      true: {
        description: "mt-4"
      }
    }
  }
};

const pageHero = {
  slots: {
    root: "relative isolate",
    container: "flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
    wrapper: "",
    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"
  },
  variants: {
    orientation: {
      horizontal: {
        container: "lg:grid-cols-2 lg:items-center",
        description: "text-pretty"
      },
      vertical: {
        container: "",
        headline: "justify-center",
        wrapper: "text-center",
        description: "text-balance",
        links: "justify-center"
      }
    },
    reverse: {
      true: {
        wrapper: "order-last"
      }
    },
    headline: {
      true: {
        headline: "font-semibold text-primary flex items-center gap-1.5"
      }
    },
    title: {
      true: {
        description: "mt-6"
      }
    }
  }
};

const pageLinks = (options) => ({
  slots: {
    root: "flex flex-col gap-3",
    title: "text-sm font-semibold flex items-center gap-1.5",
    list: "flex flex-col gap-2",
    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"
  },
  variants: {
    active: {
      true: {
        link: "text-primary font-medium"
      },
      false: {
        link: ["text-muted hover:text-default", options.theme.transitions && "transition-colors"]
      }
    }
  }
});

const pageList = {
  base: "relative flex flex-col",
  variants: {
    divide: {
      true: "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px"
    }
  }
};

const pageLogos = {
  slots: {
    root: "relative overflow-hidden",
    title: "text-lg text-center font-semibold text-highlighted",
    logos: "mt-10",
    logo: "size-10 shrink-0"
  },
  variants: {
    marquee: {
      false: {
        logos: "flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"
      }
    }
  }
};

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 = {
  slots: {
    root: "relative isolate",
    container: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
    wrapper: "",
    headline: "mb-3",
    leading: "flex items-center mb-6",
    leadingIcon: "size-10 shrink-0 text-primary",
    title: "text-3xl sm:text-4xl lg:text-5xl 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",
    features: "mt-8 grid"
  },
  variants: {
    orientation: {
      horizontal: {
        container: "lg:grid-cols-2 lg:items-center",
        description: "text-pretty",
        features: "gap-4"
      },
      vertical: {
        container: "",
        headline: "justify-center",
        leading: "justify-center",
        title: "text-center",
        description: "text-center text-balance",
        links: "justify-center",
        features: "sm:grid-cols-2 lg:grid-cols-3 gap-8"
      }
    },
    reverse: {
      true: {
        wrapper: "lg:order-last"
      }
    },
    headline: {
      true: {
        headline: "font-semibold text-primary flex items-center gap-1.5"
      }
    },
    title: {
      true: {
        description: "mt-6"
      }
    },
    description: {
      true: ""
    },
    features: {
      true: ""
    }
  },
  compoundVariants: [{
    orientation: "vertical",
    title: true,
    class: {
      features: "mt-16"
    }
  }, {
    orientation: "vertical",
    description: true,
    class: {
      features: "mt-16"
    }
  }, {
    orientation: "vertical",
    features: true,
    class: {
      links: "mt-16"
    }
  }]
};

const pricingPlan = {
  slots: {
    root: "relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6",
    header: "",
    body: "flex flex-col min-w-0",
    footer: "flex flex-col gap-6 items-center",
    titleWrapper: "flex items-center gap-3",
    title: "text-highlighted text-2xl sm:text-3xl text-pretty font-semibold",
    description: "text-muted text-base text-pretty mt-2",
    priceWrapper: "flex items-center gap-1",
    price: "text-highlighted text-3xl sm:text-4xl font-semibold",
    discount: "text-muted line-through text-xl sm:text-2xl",
    billing: "flex flex-col justify-between min-w-0",
    billingPeriod: "text-toned truncate text-xs font-medium",
    billingCycle: "text-muted truncate text-xs font-medium",
    features: "flex flex-col gap-3 flex-1 mt-6 grow-0",
    feature: "flex items-center gap-2 min-w-0",
    featureIcon: "size-5 shrink-0 text-primary",
    featureTitle: "text-muted text-sm truncate",
    badge: "",
    button: "",
    tagline: "text-base font-semibold text-default",
    terms: "text-xs/5 text-muted text-center text-balance"
  },
  variants: {
    orientation: {
      horizontal: {
        root: "grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default",
        body: "lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center",
        footer: "lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto",
        features: "lg:grid lg:grid-cols-2 lg:mt-12"
      },
      vertical: {
        footer: "justify-end",
        priceWrapper: "mt-6"
      }
    },
    variant: {
      solid: {
        root: "bg-inverted",
        title: "text-inverted",
        description: "text-dimmed",
        price: "text-inverted",
        discount: "text-dimmed",
        billingCycle: "text-dimmed",
        billingPeriod: "text-dimmed",
        featureTitle: "text-dimmed"
      },
      outline: {
        root: "bg-default ring ring-default"
      },
      soft: {
        root: "bg-elevated/50"
      },
      subtle: {
        root: "bg-elevated/50 ring ring-default"
      }
    },
    highlight: {
      true: {
        root: "ring-2 ring-inset ring-primary"
      }
    },
    scale: {
      true: {
        root: "lg:scale-[1.1] lg:z-[1]"
      }
    }
  },
  compoundVariants: [{
    orientation: "horizontal",
    variant: "soft",
    class: {
      root: "divide-accented"
    }
  }, {
    orientation: "horizontal",
    variant: "subtle",
    class: {
      root: "divide-accented"
    }
  }],
  defaultVariants: {
    variant: "outline"
  }
};

const pricingPlans = {
  base: "flex flex-col gap-y-8",
  variants: {
    orientation: {
      horizontal: "lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]",
      vertical: ""
    },
    compact: {
      false: "gap-x-8"
    },
    scale: {
      true: ""
    }
  },
  compoundVariants: [{
    compact: false,
    scale: true,
    class: "lg:gap-x-13"
  }]
};

const pricingTable = {
  slots: {
    root: "w-full relative",
    table: "w-full table-fixed border-separate border-spacing-x-0 hidden md:table",
    list: "md:hidden flex flex-col gap-6 w-full",
    item: "p-6 flex flex-col border border-default rounded-lg",
    caption: "sr-only",
    thead: "",
    tbody: "",
    tr: "",
    th: "py-4 font-normal text-left border-b border-default",
    td: "px-6 py-4 text-center border-b border-default",
    tier: "p-6 text-left font-normal",
    tierTitleWrapper: "flex items-center gap-3",
    tierTitle: "text-lg font-semibold text-highlighted",
    tierDescription: "text-sm font-normal text-muted mt-1",
    tierBadge: "truncate",
    tierPriceWrapper: "flex items-center gap-1 mt-4",
    tierPrice: "text-highlighted text-3xl sm:text-4xl font-semibold",
    tierDiscount: "text-muted line-through text-xl sm:text-2xl",
    tierBilling: "flex flex-col justify-between min-w-0",
    tierBillingPeriod: "text-toned truncate text-xs font-medium",
    tierBillingCycle: "text-muted truncate text-xs font-medium",
    tierButton: "mt-6",
    tierFeatureIcon: "size-5 shrink-0",
    section: "mt-6 flex flex-col gap-2",
    sectionTitle: "font-semibold text-sm text-highlighted",
    feature: "flex items-center justify-between gap-1",
    featureTitle: "text-sm text-default",
    featureValue: "text-sm text-muted flex justify-center min-w-5"
  },
  variants: {
    section: {
      true: {
        tr: "*:pt-8"
      }
    },
    active: {
      true: {
        tierFeatureIcon: "text-primary"
      }
    },
    highlight: {
      true: {
        tier: "bg-elevated/50 border-x border-t border-default rounded-t-lg",
        td: "bg-elevated/50 border-x border-default",
        item: "bg-elevated/50"
      }
    }
  }
};

const user = (options) => ({
  slots: {
    root: "relative group/user",
    wrapper: "",
    name: "font-medium",
    description: "text-muted",
    avatar: "shrink-0"
  },
  variants: {
    orientation: {
      horizontal: {
        root: "flex items-center"
      },
      vertical: {
        root: "flex flex-col"
      }
    },
    to: {
      true: {
        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: {
        name: "text-highlighted",
        description: ""
      }
    },
    size: {
      "3xs": {
        root: "gap-1",
        wrapper: "flex items-center gap-1",
        name: "text-xs",
        description: "text-xs"
      },
      "2xs": {
        root: "gap-1.5",
        wrapper: "flex items-center gap-1.5",
        name: "text-xs",
        description: "text-xs"
      },
      "xs": {
        root: "gap-1.5",
        wrapper: "flex items-center gap-1.5",
        name: "text-xs",
        description: "text-xs"
      },
      "sm": {
        root: "gap-2",
        name: "text-xs",
        description: "text-xs"
      },
      "md": {
        root: "gap-2",
        name: "text-sm",
        description: "text-xs"
      },
      "lg": {
        root: "gap-2.5",
        name: "text-sm",
        description: "text-sm"
      },
      "xl": {
        root: "gap-2.5",
        name: "text-base",
        description: "text-sm"
      },
      "2xl": {
        root: "gap-3",
        name: "text-base",
        description: "text-base"
      },
      "3xl": {
        root: "gap-3",
        name: "text-lg",
        description: "text-base"
      }
    }
  },
  defaultVariants: {
    size: "md"
  }
});

const theme$1 = {
  __proto__: null,
  authForm: authForm,
  banner: banner,
  blogPost: blogPost,
  blogPosts: blogPosts,
  chatMessage: chatMessage,
  chatMessages: chatMessages,
  chatPalette: chatPalette,
  chatPrompt: chatPrompt,
  chatPromptSubmit: chatPromptSubmit,
  dashboardGroup: dashboardGroup,
  dashboardNavbar: dashboardNavbar,
  dashboardPanel: dashboardPanel,
  dashboardResizeHandle: dashboardResizeHandle,
  dashboardSearch: dashboardSearch,
  dashboardSearchButton: dashboardSearchButton,
  dashboardSidebar: dashboardSidebar,
  dashboardSidebarCollapse: dashboardSidebarCollapse,
  dashboardSidebarToggle: dashboardSidebarToggle,
  dashboardToolbar: dashboardToolbar,
  error: error,
  footer: footer,
  footerColumns: footerColumns,
  header: header,
  main: main,
  page: page,
  pageAccordion: pageAccordion,
  pageAnchors: pageAnchors,
  pageAside: pageAside,
  pageBody: pageBody,
  pageCTA: pageCta,
  pageCard: pageCard,
  pageColumns: pageColumns,
  pageFeature: pageFeature,
  pageGrid: pageGrid,
  pageHeader: pageHeader,
  pageHero: pageHero,
  pageLinks: pageLinks,
  pageList: pageList,
  pageLogos: pageLogos,
  pageMarquee: pageMarquee,
  pageSection: pageSection,
  pricingPlan: pricingPlan,
  pricingPlans: pricingPlans,
  pricingTable: pricingTable,
  user: user
};

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: {
    root: "my-5",
    trigger: "text-base"
  }
};

const accordionItem = {
  base: "pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5"
};

const badge = {
  base: "rounded-full"
};

const blockquote = {
  base: "border-s-4 border-accented ps-4 italic"
};

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"
      }
    },
    to: {
      true: "border-dashed"
    }
  },
  compoundVariants: [...(options.theme.colors || []).map((color) => ({
    color,
    to: true,
    class: {
      base: `hover:border-${color}`,
      externalIcon: `group-hover:text-${color}`
    }
  })), {
    color: "neutral",
    to: true,
    class: {
      base: "hover:border-inverted",
      externalIcon: "group-hover:text-highlighted"
    }
  }],
  defaultVariants: {
    color: "neutral"
  }
});

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"
      }
    }
  },
  compoundVariants: [...(options.theme.colors || []).map((color) => ({
    color,
    to: true,
    class: {
      base: `hover:bg-${color}/10 hover:border-${color}`,
      externalIcon: `group-hover:text-${color}`
    }
  })), {
    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) => ({
  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: {
    root: "relative [&_pre]:h-[200px]",
    footer: "h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center",
    trigger: "group",
    triggerIcon: "group-data-[state=open]:rotate-180"
  },
  variants: {
    open: {
      true: {
        root: "[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12"
      },
      false: {
        root: "[&_pre]:overflow-hidden",
        footer: "bg-gradient-to-t from-muted"
      }
    }
  }
};

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", options.theme.transitions && "transition-colors"],
    triggerIcon: "size-4 shrink-0",
    triggerLabel: "truncate"
  }
});

const codeIcon = {
  "package.json": "i-vscode-icons-file-type-node",
  "tsconfig.json": "i-vscode-icons-file-type-tsconfig",
  ".npmrc": "i-vscode-icons-file-type-npm",
  ".editorconfig": "i-vscode-icons-file-type-editorconfig",
  ".eslintrc": "i-vscode-icons-file-type-eslint",
  ".eslintrc.cjs": "i-vscode-icons-file-type-eslint",
  ".eslintignore": "i-vscode-icons-file-type-eslint",
  "eslint.config.js": "i-vscode-icons-file-type-eslint",
  "eslint.config.mjs": "i-vscode-icons-file-type-eslint",
  "eslint.config.cjs": "i-vscode-icons-file-type-eslint",
  ".gitignore": "i-vscode-icons-file-type-git",
  "yarn.lock": "i-vscode-icons-file-type-yarn",
  ".env": "i-vscode-icons-file-type-dotenv",
  ".env.example": "i-vscode-icons-file-type-dotenv",
  ".vscode/settings.json": "i-vscode-icons-file-type-vscode",
  "nuxt": "i-vscode-icons-file-type-nuxt",
  ".nuxtrc": "i-vscode-icons-file-type-nuxt",
  ".nuxtignore": "i-vscode-icons-file-type-nuxt",
  "nuxt.config.js": "i-vscode-icons-file-type-nuxt",
  "nuxt.config.ts": "i-vscode-icons-file-type-nuxt",
  "nuxt.schema.ts": "i-vscode-icons-file-type-nuxt",
  "tailwind.config.js": "i-vscode-icons-file-type-tailwind",
  "tailwind.config.ts": "i-vscode-icons-file-type-tailwind",
  "vue": "i-vscode-icons-file-type-vue",
  "ts": "i-vscode-icons-file-type-typescript",
  "tsx": "i-vscode-icons-file-type-typescript",
  "mjs": "i-vscode-icons-file-type-js",
  "cjs": "i-vscode-icons-file-type-js",
  "js": "i-vscode-icons-file-type-js",
  "jsx": "i-vscode-icons-file-type-js",
  "md": "i-vscode-icons-file-type-markdown",
  "py": "i-vscode-icons-file-type-python",
  "cs": "i-vscode-icons-file-type-csharp",
  "asm": "i-vscode-icons-file-type-assembly",
  "f": "i-vscode-icons-file-type-fortran",
  "hs": "i-vscode-icons-file-type-haskell",
  "fs": "i-vscode-icons-file-type-fsharp",
  "kt": "i-vscode-icons-file-type-kotlin",
  "rs": "i-vscode-icons-file-type-rust",
  "rb": "i-vscode-icons-file-type-ruby",
  "lsp": "i-vscode-icons-file-type-lisp",
  "ps1": "i-vscode-icons-file-type-powershell",
  "psd1": "i-vscode-icons-file-type-powershell",
  "psm1": "i-vscode-icons-file-type-powershell",
  "go": "i-vscode-icons-file-type-go",
  "gleam": "i-vscode-icons-file-type-gleam",
  "bicep": "i-vscode-icons-file-type-bicep",
  "bicepparam": "i-vscode-icons-file-type-bicep",
  "exs": "i-vscode-icons-file-type-elixir",
  "erl": "i-vscode-icons-file-type-erlang",
  "sbt": "i-vscode-icons-file-type-scala",
  "h": "i-vscode-icons-file-type-cppheader",
  "ino": "i-vscode-icons-file-type-arduino",
  "pl": "i-vscode-icons-file-type-perl",
  "jl": "i-vscode-icons-file-type-julia",
  "dart": "i-vscode-icons-file-type-dartlang",
  "ico": "i-vscode-icons-file-type-favicon",
  "npm": "i-vscode-icons-file-type-npm",
  "pnpm": "i-vscode-icons-file-type-pnpm",
  "npx": "i-vscode-icons-file-type-npm",
  "yarn": "i-vscode-icons-file-type-yarn",
  "bun": "i-vscode-icons-file-type-bun",
  "yml": "i-vscode-icons-file-type-yaml",
  "terminal": "i-lucide-terminal"
};

const codePreview = {
  slots: {
    root: "my-5",
    preview: "flex justify-center border border-muted relative p-4 rounded-md",
    code: "[&>div>pre]:rounded-t-none [&>div]:my-0"
  },
  variants: {
    code: {
      true: {
        preview: "border-b-0 rounded-b-none"
      }
    }
  }
};

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",
    item: "",
    listWithChildren: "ms-4.5 border-s border-default",
    itemWithChildren: "ps-1.5 -ms-px",
    link: "relative group peer 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: "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",
    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: {
    active: {
      true: {
        link: "text-highlighted before:bg-elevated"
      },
      false: {
        link: ["hover:text-highlighted hover:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"]
      }
    }
  }
});

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", 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: ""
};

const field = {
  slots: {
    root: "my-5",
    container: "flex items-center gap-3 font-mono text-sm",
    name: "font-semibold text-primary",
    wrapper: "flex-1 flex items-center gap-1.5 text-xs",
    required: "rounded-sm bg-error/10 text-error px-1.5 py-0.5",
    type: "rounded-sm bg-elevated text-toned px-1.5 py-0.5",
    description: "mt-3 text-muted text-sm [&_code]:text-xs/4"
  }
};

const fieldGroup = {
  base: "my-5 divide-y divide-default *:not-last:pb-5"
};

const h1 = {
  slots: {
    base: "text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)",
    link: "inline-flex items-center gap-2"
  }
};

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", 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 = (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", 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: {
    base: "text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary",
    link: ""
  }
};

const hr = {
  base: "border-t border-default my-12"
};

const icon = {
  base: "size-4 shrink-0 align-sub"
};

const img = {
  base: ""
};

const kbd = {
  base: "align-text-top"
};

const li = {
  base: "my-1.5 ps-1.5 leading-7 [&>ul]:my-0"
};

const ol = {
  base: "list-decimal ps-6 my-5 marker:text-muted"
};

const p = {
  base: "my-5 leading-7 text-pretty"
};

const pre = {
  slots: {
    root: "relative my-5 group",
    header: "flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3",
    filename: "text-default text-sm/6",
    icon: "size-4 shrink-0",
    copy: "absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition",
    base: "group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:o