@cryptlex/web-components 6.6.27 → 6.6.29

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n    OverlayTriggerStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-elevation-1 transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => {\n    // TODO: Remove once https://github.com/adobe/react-spectrum/pull/9772 is released\n    const state = useContext(OverlayTriggerStateContext);\n    if (!state?.isOpen) return null;\n\n    return (\n        <AriaModalOverlay\n            isDismissable={isDismissable}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'fixed inset-0 z-50 bg-background/80',\n                    /* Exiting */\n                    'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                    /* Entering */\n                    'data-[entering]:animate-in',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n};\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side, className: 'h-full p-6' })\n                        : [\n                              'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border rounded-md bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                          ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-2 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'neutral'}\n                                    onPress={renderProps.close}\n                                    className=\"rounded-full\"\n                                >\n                                    <IcClose />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n    /** Opens the dialog with the provided content */\n    openDialog: (content: ReactNode) => void;\n    /** Closes the dialog */\n    closeDialog: () => void;\n    /** Whether the dialog is currently open */\n    isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n *   <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n *   const { openDialog } = useControlledDialog();\n *   return (\n *     <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n *       Open Dialog\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n    const [isOpen, setIsOpen] = useState(false);\n    const [content, setContent] = useState<ReactNode>(null);\n\n    const openDialog = (dialogContent: ReactNode) => {\n        setContent(dialogContent);\n        setIsOpen(true);\n    };\n\n    const closeDialog = () => {\n        setIsOpen(false);\n    };\n\n    return (\n        <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n            {children}\n            <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n                <DialogOverlay isDismissable>\n                    <DialogContent>{content}</DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        </ControlledDialogContext.Provider>\n    );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n *   return (\n *     <Button onPress={() => openDialog(\n *       <DialogHeader>\n *         <DialogTitle>Confirm</DialogTitle>\n *       </DialogHeader>\n *     )}>\n *       Open\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function useControlledDialog() {\n    const context = useContext(ControlledDialogContext);\n    if (!context) {\n        throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n    }\n    return context;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","useContext","OverlayTriggerStateContext","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","createContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n    OverlayTriggerStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-elevation-1 transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => {\n    // TODO: Remove once https://github.com/adobe/react-spectrum/pull/9772 is released\n    const state = useContext(OverlayTriggerStateContext);\n    if (!state?.isOpen) return null;\n\n    return (\n        <AriaModalOverlay\n            isDismissable={isDismissable}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'fixed inset-0 z-50 bg-background/90',\n                    /* Exiting */\n                    'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                    /* Entering */\n                    'data-[entering]:animate-in',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n};\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side })\n                        : [\n                              'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border rounded-md bg-elevation-1 duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                          ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-2 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'ghost'}\n                                    onPress={renderProps.close}\n                                    className=\"!rounded-full\"\n                                >\n                                    <IcClose />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col p-icon border-b gap-y-2 text-center sm:text-left', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames(\n                'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 p-icon border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Body section of the dialog\n */\nexport function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-2 p-icon', className)} {...props} />;\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n    /** Opens the dialog with the provided content */\n    openDialog: (content: ReactNode) => void;\n    /** Closes the dialog */\n    closeDialog: () => void;\n    /** Whether the dialog is currently open */\n    isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n *   <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n *   const { openDialog } = useControlledDialog();\n *   return (\n *     <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n *       Open Dialog\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n    const [isOpen, setIsOpen] = useState(false);\n    const [content, setContent] = useState<ReactNode>(null);\n\n    const openDialog = (dialogContent: ReactNode) => {\n        setContent(dialogContent);\n        setIsOpen(true);\n    };\n\n    const closeDialog = () => {\n        setIsOpen(false);\n    };\n\n    return (\n        <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n            {children}\n            <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n                <DialogOverlay isDismissable>\n                    <DialogContent>{content}</DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        </ControlledDialogContext.Provider>\n    );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n *   return (\n *     <Button onPress={() => openDialog(\n *       <DialogHeader>\n *         <DialogTitle>Confirm</DialogTitle>\n *       </DialogHeader>\n *     )}>\n *       Open\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function useControlledDialog() {\n    const context = useContext(ControlledDialogContext);\n    if (!context) {\n        throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n    }\n    return context;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","useContext","OverlayTriggerStateContext","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogBody","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","createContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}

package/dist/components/form.d.ts

@@ -90,4 +90,6 @@ export declare function FormSection({ className, ...props }: React.ComponentProp
  */
 export declare function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>): import("react/jsx-runtime").JSX.Element;
 export declare function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
-export declare function FormLayout({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function FormLayout({ className, preview, ...props }: React.ComponentProps<'div'> & {
+    preview?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/form.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as a,Fragment as c,jsx as r}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as u,composeRenderProps as m,Label as f,Text as p,Button as b}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{Card as g,CardHeader as x,CardTitle as F}from"./card.js";import{IcInfo as v,IcError as h}from"./icons.js";import"clsx";import"react";const N=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(f,{className:i(N(),t),...e})}function j({className:t,children:e,...n}){return a(p,{className:i("body-sm text-muted leading-tight",t),...n,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function w({className:t,children:e,...n}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...n,children:[e,r(h,{className:"inline size-2 align-text-top ms-0.5"})]})}const z=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function k({className:t,variant:e,...n}){return r(u,{className:m(t,o=>i(z({variant:e}),o)),...n})}function B({label:t,description:e,errorMessage:n,children:o,requiredIndicator:d,htmlFor:s}){return a(c,{children:[t&&a(y,{htmlFor:s,children:[t,d&&r("sup",{className:"text-destructive",children:"*"})]}),o,e&&r(j,{children:e}),n&&r(w,{htmlFor:s,children:n})]})}function D({className:t,...e}){return r(b,{className:m(t,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...e})}function A({className:t,onSubmit:e,...n}){return r("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...n})}function H({className:t,...e}){return r(g,{className:i("gap-input",t),...e})}function P({className:t,...e}){return r(x,{children:r(F,{className:i(t,"!body-base text-muted"),...e})})}function R({className:t,...e}){return r("nav",{className:i("flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function q({className:t,...e}){return r("div",{className:"grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",...e})}export{k as FieldGroup,A as Form,R as FormActionFooter,B as FormField,D as FormFieldButton,j as FormFieldDescription,w as FormFieldError,y as FormFieldLabel,q as FormLayout,H as FormSection,P as FormSectionTitle,z as fieldGroupVariants,N as labelVariants};
+"use client";import{jsxs as a,Fragment as c,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as u,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{Card as b,CardHeader as x,CardTitle as h}from"./card.js";import{IcInfo as v,IcError as F}from"./icons.js";import"clsx";import"react";const N=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(f,{className:i(N(),t),...e})}function k({className:t,children:e,...n}){return a(p,{className:i("body-sm text-muted leading-tight",t),...n,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function j({className:t,children:e,...n}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...n,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const w=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function V({className:t,variant:e,...n}){return r(u,{className:m(t,o=>i(w({variant:e}),o)),...n})}function B({label:t,description:e,errorMessage:n,children:o,requiredIndicator:d,htmlFor:l}){return a(c,{children:[t&&a(y,{htmlFor:l,children:[t,d&&r("sup",{className:"text-destructive",children:"*"})]}),o,e&&r(k,{children:e}),n&&r(j,{htmlFor:l,children:n})]})}function D({className:t,...e}){return r(g,{className:m(t,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...e})}function A({className:t,onSubmit:e,...n}){return r("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...n})}function H({className:t,...e}){return r(b,{className:i("gap-input",t),...e})}function P({className:t,...e}){return r(x,{children:r(h,{className:i(t,"!body-base text-muted"),...e})})}function R({className:t,...e}){return r("nav",{className:i("flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function q({className:t,preview:e,...n}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:i("grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",t),...n}),e&&r("div",{className:"lg:sticky lg:top-header lg:shrink-0",children:e})]})}export{V as FieldGroup,A as Form,R as FormActionFooter,B as FormField,D as FormFieldButton,k as FormFieldDescription,j as FormFieldError,y as FormFieldLabel,q as FormLayout,H as FormSection,P as FormSectionTitle,w as fieldGroupVariants,N as labelVariants};
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { Card, CardHeader, CardTitle } from './card';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n\n                // Blur the active input field.\n                (document?.activeElement as HTMLElement)?.blur();\n\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'div'>) {\n    return <Card className={classNames('gap-input', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return (\n        <CardHeader>\n            <CardTitle className={classNames(className, '!body-base text-muted')} {...props} />\n        </CardHeader>\n    );\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={'grid grid-cols-1 gap-input mt-icon my-header max-w-3xl'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","Card","FormSectionTitle","CardHeader","CardTitle","FormActionFooter","FormLayout"],"mappings":"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"}
+{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { Card, CardHeader, CardTitle } from './card';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n\n                // Blur the active input field.\n                (document?.activeElement as HTMLElement)?.blur();\n\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'div'>) {\n    return <Card className={classNames('gap-input', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return (\n        <CardHeader>\n            <CardTitle className={classNames(className, '!body-base text-muted')} {...props} />\n        </CardHeader>\n    );\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({\n    className,\n    preview,\n    ...props\n}: React.ComponentProps<'div'> & { preview?: React.ReactNode }) {\n    return (\n        <div className=\"flex flex-col gap-icon lg:flex-row lg:items-start\">\n            <div\n                className={classNames('grid grid-cols-1 gap-input mt-icon my-header max-w-3xl', className)}\n                {...props}\n            />\n            {preview && <div className=\"lg:sticky lg:top-header lg:shrink-0\">{preview}</div>}\n        </div>\n    );\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","Card","FormSectionTitle","CardHeader","CardTitle","FormActionFooter","FormLayout","preview"],"mappings":"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"}

package/dist/utilities/shiki.js

@@ -1,2 +1,2 @@
-const e=o=>`var(--color-${o})`,t={bg:e("elevation-1"),fg:e("neutral-9"),comment:e("neutral-5"),keyword:e("primary-9"),function:e("primary-8"),importExport:e("primary-8"),punctuationLight:e("primary-8"),thisSuper:e("primary-7"),functionCall:e("primary-7"),builtinFunction:e("primary-6"),typeClass:e("secondary-9"),number:e("secondary-8"),constant:e("secondary-8"),enumMember:e("secondary-8"),colon:e("secondary-8"),typeAnnotation:e("secondary-7"),namespace:e("secondary-7"),property:e("secondary-6"),typeParam:e("secondary-6"),stringQuote:e("success-10"),string:e("success-9"),stringTemplate:e("success-8"),templateExprDelim:e("success-7"),regex:e("destructive-9"),invalid:e("destructive-9"),regexCharClass:e("destructive-8"),decorator:e("destructive-7"),hash:e("destructive-7"),computedKey:e("destructive-7"),regexQuantifier:e("destructive-7"),regexFlag:e("destructive-6"),deprecated:e("destructive-6"),variable:e("neutral-9"),operator:e("neutral-9"),parameter:e("neutral-8"),arrow:e("neutral-8"),spreadRest:e("neutral-8")},n=[{settings:{background:t.bg,foreground:t.fg}},{scope:["comment","punctuation.definition.comment","string.comment","comment.block","comment.line","comment.block.documentation"],settings:{foreground:t.comment,fontStyle:"italic"}},{scope:["keyword","keyword.control","keyword.control.flow","keyword.control.conditional","keyword.control.loop","keyword.control.trycatch","keyword.control.switch","keyword.control.return","keyword.control.throw","keyword.control.await","keyword.control.async","keyword.other","storage.type","storage.modifier"],settings:{foreground:t.keyword,fontStyle:"bold"}},{scope:["keyword.control.import","keyword.control.export","keyword.control.from","keyword.control.as","keyword.control.default","keyword.control.module"],settings:{foreground:t.importExport,fontStyle:"bold"}},{scope:["keyword.operator","keyword.operator.assignment","keyword.operator.assignment.compound","keyword.operator.comparison","keyword.operator.logical","keyword.operator.bitwise","keyword.operator.arithmetic","keyword.operator.ternary","keyword.operator.optional","keyword.operator.nullcoalescing","keyword.operator.type","keyword.operator.expression","keyword.operator.pipe"],settings:{foreground:t.operator,fontStyle:"bold"}},{scope:["keyword.operator.arrow","keyword.operator.scope-resolution","punctuation.separator.arrow","punctuation.definition.arrow"],settings:{foreground:t.arrow,fontStyle:"bold"}},{scope:["keyword.operator.spread","keyword.operator.rest","keyword.operator.optional-chaining","punctuation.accessor.optional"],settings:{foreground:t.spreadRest,fontStyle:"bold"}},{scope:["keyword.operator.new","keyword.operator.delete","keyword.operator.typeof","keyword.operator.instanceof","keyword.operator.void","keyword.operator.in","keyword.operator.of"],settings:{foreground:t.keyword,fontStyle:"bold italic"}},{scope:["variable.language.this","variable.language.super","variable.language.self","variable.language.cls","variable.language.special"],settings:{foreground:t.thisSuper,fontStyle:"bold italic"}},{scope:["string","string.quoted.single","string.quoted.double","string.quoted.other","string.interpolated","string.other"],settings:{foreground:t.string}},{scope:["string.quoted.backtick","string.template","string.template.ts","string.template.js"],settings:{foreground:t.stringTemplate}},{scope:["punctuation.definition.string.begin","punctuation.definition.string.end","punctuation.definition.template.begin","punctuation.definition.template.end","storage.type.string","punctuation.definition.string.begin.css","punctuation.definition.string.end.css"],settings:{foreground:t.stringQuote,fontStyle:"bold"}},{scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","meta.template.expression punctuation.definition.block"],settings:{foreground:t.templateExprDelim,fontStyle:"bold"}},{scope:["string.regexp","constant.regexp"],settings:{foreground:t.regex}},{scope:["string.regexp punctuation.definition.character-class","string.regexp meta.character-class","string.regexp constant.character.escape"],settings:{foreground:t.regexCharClass}},{scope:["string.regexp keyword.operator.quantifier","keyword.operator.quantifier.regexp"],settings:{foreground:t.regexQuantifier,fontStyle:"bold"}},{scope:["string.regexp keyword.other.regex.flags","punctuation.definition.regex.flags","keyword.other.regex.flags"],settings:{foreground:t.regexFlag,fontStyle:"italic"}},{scope:["constant.numeric","constant.numeric.integer","constant.numeric.float","constant.numeric.hex","constant.numeric.binary","constant.numeric.octal","constant.numeric.decimal","constant.numeric.scientific","constant.numeric.css"],settings:{foreground:t.number,fontStyle:"bold"}},{scope:["constant.language","constant.language.boolean","constant.language.boolean.true","constant.language.boolean.false","constant.language.null","constant.language.undefined","constant.language.infinity","constant.language.nan","constant.language.nil","constant.language.none","constant.other.boolean"],settings:{foreground:t.constant,fontStyle:"bold italic"}},{scope:["constant.character","constant.character.escape","constant.character.unicode","constant.other","constant.other.symbol","constant.other.key","constant.other.color"],settings:{foreground:t.constant}},{scope:["entity.name.function","meta.function entity.name.function","meta.method entity.name.function","meta.function.declaration entity.name.function"],settings:{foreground:t.function,fontStyle:"bold"}},{scope:["meta.function-call entity.name.function","meta.function-call.generic entity.name.function","support.function","support.function.dom","support.function.console"],settings:{foreground:t.functionCall}},{scope:["support.function.builtin","support.function.string","support.function.array","support.function.math","support.function.date","support.function.object","support.function.json","support.function.promise"],settings:{foreground:t.builtinFunction}},{scope:["entity.name.type","entity.name.type.interface","entity.name.type.alias","entity.name.type.enum","entity.name.class","entity.name.class.forward-decl","support.type","support.class","support.type.object","support.class.builtin","entity.other.inherited-class"],settings:{foreground:t.typeClass,fontStyle:"bold"}},{scope:["meta.type.annotation","meta.return.type","support.type.primitive","support.type.builtin","entity.name.type.primitive","keyword.type"],settings:{foreground:t.typeAnnotation}},{scope:["keyword.operator.expression.typeof","keyword.operator.expression.keyof","keyword.operator.expression.infer","keyword.operator.expression.satisfies","keyword.operator.expression.is","keyword.operator.type.annotation"],settings:{foreground:t.typeClass,fontStyle:"bold italic"}},{scope:["entity.name.type.type-parameter","variable.type.type-parameter","meta.type.parameters entity.name.type"],settings:{foreground:t.typeParam,fontStyle:"italic"}},{scope:["variable.other.enummember","constant.other.enum","meta.enum variable"],settings:{foreground:t.enumMember,fontStyle:"bold"}},{scope:["entity.name.namespace","entity.name.module","entity.name.section","storage.type.namespace","storage.type.module"],settings:{foreground:t.namespace}},{scope:["meta.decorator","meta.decorator punctuation.decorator","entity.name.function.decorator","punctuation.decorator","storage.type.annotation"],settings:{foreground:t.decorator,fontStyle:"bold italic"}},{scope:["variable","variable.other","variable.other.readwrite","variable.other.constant","variable.other.global","variable.other.local"],settings:{foreground:t.variable}},{scope:["variable.parameter","variable.parameter.function","meta.function.parameters variable.parameter","meta.arrow.parameters variable.parameter"],settings:{foreground:t.parameter}},{scope:["variable.other.property","variable.other.object.property","support.type.property-name","meta.object-literal.key","meta.object.key"],settings:{foreground:t.property}},{scope:["meta.computed.key","meta.objectliteral meta.template.expression"],settings:{foreground:t.computedKey,fontStyle:"bold"}},{scope:["punctuation.terminator","punctuation.terminator.statement","punctuation.separator","punctuation.separator.comma","punctuation.separator.period","punctuation.separator.dot","punctuation.separator.namespace","punctuation.separator.continuation","punctuation.accessor","punctuation.accessor.dot","meta.delimiter.object.comma","meta.delimiter.array.comma"],settings:{foreground:t.punctuationLight,fontStyle:"bold"}},{scope:["punctuation.separator.key-value","punctuation.separator.colon","punctuation.separator.type-annotation","punctuation.separator.dictionary.key-value","punctuation.definition.binding-pattern.object","punctuation.separator.case-statements"],settings:{foreground:t.colon,fontStyle:"bold"}},{scope:["punctuation.definition.id.css","punctuation.definition.entity.css","punctuation.definition.hash","entity.other.attribute-name.id.css punctuation","punctuation.definition.interpolation.begin","punctuation.definition.interpolation.end","punctuation.definition.directive","punctuation.definition.preprocessor","comment.line.number-sign punctuation.definition.comment"],settings:{foreground:t.hash,fontStyle:"bold"}},{scope:["invalid","invalid.illegal"],settings:{foreground:t.invalid,fontStyle:"bold underline"}},{scope:["invalid.deprecated"],settings:{foreground:t.deprecated,fontStyle:"strikethrough"}}],r={name:"shiki",settings:n};export{r as shikiTheme};
+const e=o=>`var(--color-${o})`,t={bg:e("elevation-1"),fg:e("neutral-9"),comment:e("neutral-5"),keyword:e("primary-9"),function:e("primary-8"),importExport:e("primary-8"),punctuationLight:e("primary-8"),thisSuper:e("primary-7"),functionCall:e("primary-7"),builtinFunction:e("primary-6"),typeClass:e("warning-9"),number:e("warning-8"),constant:e("warning-8"),enumMember:e("warning-8"),colon:e("warning-8"),typeAnnotation:e("warning-7"),namespace:e("warning-7"),property:e("warning-6"),typeParam:e("warning-6"),stringQuote:e("success-10"),string:e("success-9"),stringTemplate:e("success-8"),templateExprDelim:e("success-7"),regex:e("destructive-9"),invalid:e("destructive-9"),regexCharClass:e("destructive-8"),decorator:e("destructive-7"),hash:e("destructive-7"),computedKey:e("destructive-7"),regexQuantifier:e("destructive-7"),regexFlag:e("destructive-6"),deprecated:e("destructive-6"),variable:e("neutral-9"),operator:e("neutral-9"),parameter:e("neutral-8"),arrow:e("neutral-8"),spreadRest:e("neutral-8")},n=[{settings:{background:t.bg,foreground:t.fg}},{scope:["comment","punctuation.definition.comment","string.comment","comment.block","comment.line","comment.block.documentation"],settings:{foreground:t.comment,fontStyle:"italic"}},{scope:["keyword","keyword.control","keyword.control.flow","keyword.control.conditional","keyword.control.loop","keyword.control.trycatch","keyword.control.switch","keyword.control.return","keyword.control.throw","keyword.control.await","keyword.control.async","keyword.other","storage.type","storage.modifier"],settings:{foreground:t.keyword,fontStyle:"bold"}},{scope:["keyword.control.import","keyword.control.export","keyword.control.from","keyword.control.as","keyword.control.default","keyword.control.module"],settings:{foreground:t.importExport,fontStyle:"bold"}},{scope:["keyword.operator","keyword.operator.assignment","keyword.operator.assignment.compound","keyword.operator.comparison","keyword.operator.logical","keyword.operator.bitwise","keyword.operator.arithmetic","keyword.operator.ternary","keyword.operator.optional","keyword.operator.nullcoalescing","keyword.operator.type","keyword.operator.expression","keyword.operator.pipe"],settings:{foreground:t.operator,fontStyle:"bold"}},{scope:["keyword.operator.arrow","keyword.operator.scope-resolution","punctuation.separator.arrow","punctuation.definition.arrow"],settings:{foreground:t.arrow,fontStyle:"bold"}},{scope:["keyword.operator.spread","keyword.operator.rest","keyword.operator.optional-chaining","punctuation.accessor.optional"],settings:{foreground:t.spreadRest,fontStyle:"bold"}},{scope:["keyword.operator.new","keyword.operator.delete","keyword.operator.typeof","keyword.operator.instanceof","keyword.operator.void","keyword.operator.in","keyword.operator.of"],settings:{foreground:t.keyword,fontStyle:"bold italic"}},{scope:["variable.language.this","variable.language.super","variable.language.self","variable.language.cls","variable.language.special"],settings:{foreground:t.thisSuper,fontStyle:"bold italic"}},{scope:["string","string.quoted.single","string.quoted.double","string.quoted.other","string.interpolated","string.other"],settings:{foreground:t.string}},{scope:["string.quoted.backtick","string.template","string.template.ts","string.template.js"],settings:{foreground:t.stringTemplate}},{scope:["punctuation.definition.string.begin","punctuation.definition.string.end","punctuation.definition.template.begin","punctuation.definition.template.end","storage.type.string","punctuation.definition.string.begin.css","punctuation.definition.string.end.css"],settings:{foreground:t.stringQuote,fontStyle:"bold"}},{scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","meta.template.expression punctuation.definition.block"],settings:{foreground:t.templateExprDelim,fontStyle:"bold"}},{scope:["string.regexp","constant.regexp"],settings:{foreground:t.regex}},{scope:["string.regexp punctuation.definition.character-class","string.regexp meta.character-class","string.regexp constant.character.escape"],settings:{foreground:t.regexCharClass}},{scope:["string.regexp keyword.operator.quantifier","keyword.operator.quantifier.regexp"],settings:{foreground:t.regexQuantifier,fontStyle:"bold"}},{scope:["string.regexp keyword.other.regex.flags","punctuation.definition.regex.flags","keyword.other.regex.flags"],settings:{foreground:t.regexFlag,fontStyle:"italic"}},{scope:["constant.numeric","constant.numeric.integer","constant.numeric.float","constant.numeric.hex","constant.numeric.binary","constant.numeric.octal","constant.numeric.decimal","constant.numeric.scientific","constant.numeric.css"],settings:{foreground:t.number,fontStyle:"bold"}},{scope:["constant.language","constant.language.boolean","constant.language.boolean.true","constant.language.boolean.false","constant.language.null","constant.language.undefined","constant.language.infinity","constant.language.nan","constant.language.nil","constant.language.none","constant.other.boolean"],settings:{foreground:t.constant,fontStyle:"bold italic"}},{scope:["constant.character","constant.character.escape","constant.character.unicode","constant.other","constant.other.symbol","constant.other.key","constant.other.color"],settings:{foreground:t.constant}},{scope:["entity.name.function","meta.function entity.name.function","meta.method entity.name.function","meta.function.declaration entity.name.function"],settings:{foreground:t.function,fontStyle:"bold"}},{scope:["meta.function-call entity.name.function","meta.function-call.generic entity.name.function","support.function","support.function.dom","support.function.console"],settings:{foreground:t.functionCall}},{scope:["support.function.builtin","support.function.string","support.function.array","support.function.math","support.function.date","support.function.object","support.function.json","support.function.promise"],settings:{foreground:t.builtinFunction}},{scope:["entity.name.type","entity.name.type.interface","entity.name.type.alias","entity.name.type.enum","entity.name.class","entity.name.class.forward-decl","support.type","support.class","support.type.object","support.class.builtin","entity.other.inherited-class"],settings:{foreground:t.typeClass,fontStyle:"bold"}},{scope:["meta.type.annotation","meta.return.type","support.type.primitive","support.type.builtin","entity.name.type.primitive","keyword.type"],settings:{foreground:t.typeAnnotation}},{scope:["keyword.operator.expression.typeof","keyword.operator.expression.keyof","keyword.operator.expression.infer","keyword.operator.expression.satisfies","keyword.operator.expression.is","keyword.operator.type.annotation"],settings:{foreground:t.typeClass,fontStyle:"bold italic"}},{scope:["entity.name.type.type-parameter","variable.type.type-parameter","meta.type.parameters entity.name.type"],settings:{foreground:t.typeParam,fontStyle:"italic"}},{scope:["variable.other.enummember","constant.other.enum","meta.enum variable"],settings:{foreground:t.enumMember,fontStyle:"bold"}},{scope:["entity.name.namespace","entity.name.module","entity.name.section","storage.type.namespace","storage.type.module"],settings:{foreground:t.namespace}},{scope:["meta.decorator","meta.decorator punctuation.decorator","entity.name.function.decorator","punctuation.decorator","storage.type.annotation"],settings:{foreground:t.decorator,fontStyle:"bold italic"}},{scope:["variable","variable.other","variable.other.readwrite","variable.other.constant","variable.other.global","variable.other.local"],settings:{foreground:t.variable}},{scope:["variable.parameter","variable.parameter.function","meta.function.parameters variable.parameter","meta.arrow.parameters variable.parameter"],settings:{foreground:t.parameter}},{scope:["variable.other.property","variable.other.object.property","support.type.property-name","meta.object-literal.key","meta.object.key"],settings:{foreground:t.property}},{scope:["meta.computed.key","meta.objectliteral meta.template.expression"],settings:{foreground:t.computedKey,fontStyle:"bold"}},{scope:["punctuation.terminator","punctuation.terminator.statement","punctuation.separator","punctuation.separator.comma","punctuation.separator.period","punctuation.separator.dot","punctuation.separator.namespace","punctuation.separator.continuation","punctuation.accessor","punctuation.accessor.dot","meta.delimiter.object.comma","meta.delimiter.array.comma"],settings:{foreground:t.punctuationLight,fontStyle:"bold"}},{scope:["punctuation.separator.key-value","punctuation.separator.colon","punctuation.separator.type-annotation","punctuation.separator.dictionary.key-value","punctuation.definition.binding-pattern.object","punctuation.separator.case-statements"],settings:{foreground:t.colon,fontStyle:"bold"}},{scope:["punctuation.definition.id.css","punctuation.definition.entity.css","punctuation.definition.hash","entity.other.attribute-name.id.css punctuation","punctuation.definition.interpolation.begin","punctuation.definition.interpolation.end","punctuation.definition.directive","punctuation.definition.preprocessor","comment.line.number-sign punctuation.definition.comment"],settings:{foreground:t.hash,fontStyle:"bold"}},{scope:["invalid","invalid.illegal"],settings:{foreground:t.invalid,fontStyle:"bold underline"}},{scope:["invalid.deprecated"],settings:{foreground:t.deprecated,fontStyle:"strikethrough"}}],r={name:"shiki",settings:n};export{r as shikiTheme};
 //# sourceMappingURL=shiki.js.map

package/dist/utilities/shiki.js.map

@@ -1 +1 @@
-{"version":3,"file":"shiki.js","sources":["../../lib/utilities/shiki.ts"],"sourcesContent":["import type { ThemeRegistration } from 'shiki';\n\nconst v = (token: string) => `var(--color-${token})`;\n\nconst palette = {\n    bg: v('elevation-1'),\n    fg: v('neutral-9'),\n    comment: v('neutral-5'),\n    keyword: v('primary-9'),\n    function: v('primary-8'),\n    tag: v('primary-8'),\n    importExport: v('primary-8'),\n    punctuationLight: v('primary-8'),\n    tagBracket: v('primary-7'),\n    thisSuper: v('primary-7'),\n    cssProperty: v('primary-7'),\n    cssAtRule: v('primary-7'),\n    shellBuiltin: v('primary-7'),\n    functionCall: v('primary-7'),\n    jsonKey: v('primary-7'),\n    yamlKey: v('primary-7'),\n    mdHeading: v('primary-9'),\n    mdLink: v('primary-7'),\n    builtinFunction: v('primary-6'),\n    goBuiltin: v('primary-6'),\n    typeClass: v('secondary-9'),\n    cssIdSelector: v('secondary-9'),\n    mdBold: v('secondary-9'),\n    number: v('secondary-8'),\n    constant: v('secondary-8'),\n    enumMember: v('secondary-8'),\n    cssSelector: v('secondary-8'),\n    colon: v('secondary-8'),\n    typeAnnotation: v('secondary-7'),\n    namespace: v('secondary-7'),\n    cssPseudo: v('secondary-7'),\n    yamlTag: v('secondary-7'),\n    rustLifetime: v('secondary-7'),\n    shellVar: v('secondary-7'),\n    pythonMagic: v('secondary-7'),\n    rustMacro: v('secondary-8'),\n    scssMixin: v('secondary-8'),\n    property: v('secondary-6'),\n    typeParam: v('secondary-6'),\n    attribute: v('secondary-6'),\n    cssVariable: v('secondary-6'),\n    mdBullet: v('secondary-6'),\n    stringQuote: v('success-10'),\n    string: v('success-9'),\n    stringTemplate: v('success-8'),\n    cssValue: v('success-8'),\n    pythonFStr: v('success-8'),\n    templateExprDelim: v('success-7'),\n    cssUnit: v('success-7'),\n    mdItalic: v('success-7'),\n    regex: v('destructive-9'),\n    invalid: v('destructive-9'),\n    regexCharClass: v('destructive-8'),\n    cssImportant: v('destructive-8'),\n    decorator: v('destructive-7'),\n    hash: v('destructive-7'),\n    jsxExprDelim: v('destructive-7'),\n    computedKey: v('destructive-7'),\n    yamlAnchor: v('destructive-7'),\n    shellFlag: v('destructive-7'),\n    mdCode: v('destructive-7'),\n    regexQuantifier: v('destructive-7'),\n    regexFlag: v('destructive-6'),\n    deprecated: v('destructive-6'),\n    rustAttr: v('destructive-6'),\n    yamlAlias: v('destructive-6'),\n    variable: v('neutral-9'),\n    operator: v('neutral-9'),\n    parameter: v('neutral-8'),\n    arrow: v('neutral-8'),\n    spreadRest: v('neutral-8'),\n    mdBlockquote: v('neutral-5'),\n    mdHr: v('neutral-4'),\n} as const;\n\nconst settings: ThemeRegistration['settings'] = [\n    { settings: { background: palette.bg, foreground: palette.fg } },\n    {\n        scope: [\n            'comment',\n            'punctuation.definition.comment',\n            'string.comment',\n            'comment.block',\n            'comment.line',\n            'comment.block.documentation',\n        ],\n        settings: { foreground: palette.comment, fontStyle: 'italic' },\n    },\n\n    // Keywords — control / storage\n    {\n        scope: [\n            'keyword',\n            'keyword.control',\n            'keyword.control.flow',\n            'keyword.control.conditional',\n            'keyword.control.loop',\n            'keyword.control.trycatch',\n            'keyword.control.switch',\n            'keyword.control.return',\n            'keyword.control.throw',\n            'keyword.control.await',\n            'keyword.control.async',\n            'keyword.other',\n            'storage.type',\n            'storage.modifier',\n        ],\n        settings: { foreground: palette.keyword, fontStyle: 'bold' },\n    },\n\n    // import / export / from / as / default\n    {\n        scope: [\n            'keyword.control.import',\n            'keyword.control.export',\n            'keyword.control.from',\n            'keyword.control.as',\n            'keyword.control.default',\n            'keyword.control.module',\n        ],\n        settings: { foreground: palette.importExport, fontStyle: 'bold' },\n    },\n\n    // Operators\n    {\n        scope: [\n            'keyword.operator',\n            'keyword.operator.assignment',\n            'keyword.operator.assignment.compound',\n            'keyword.operator.comparison',\n            'keyword.operator.logical',\n            'keyword.operator.bitwise',\n            'keyword.operator.arithmetic',\n            'keyword.operator.ternary',\n            'keyword.operator.optional',\n            'keyword.operator.nullcoalescing',\n            'keyword.operator.type',\n            'keyword.operator.expression',\n            'keyword.operator.pipe',\n        ],\n        settings: { foreground: palette.operator, fontStyle: 'bold' },\n    },\n\n    // => ::\n    {\n        scope: [\n            'keyword.operator.arrow',\n            'keyword.operator.scope-resolution',\n            'punctuation.separator.arrow',\n            'punctuation.definition.arrow',\n        ],\n        settings: { foreground: palette.arrow, fontStyle: 'bold' },\n    },\n\n    // ... ?.\n    {\n        scope: [\n            'keyword.operator.spread',\n            'keyword.operator.rest',\n            'keyword.operator.optional-chaining',\n            'punctuation.accessor.optional',\n        ],\n        settings: { foreground: palette.spreadRest, fontStyle: 'bold' },\n    },\n\n    // new delete typeof instanceof void in of\n    {\n        scope: [\n            'keyword.operator.new',\n            'keyword.operator.delete',\n            'keyword.operator.typeof',\n            'keyword.operator.instanceof',\n            'keyword.operator.void',\n            'keyword.operator.in',\n            'keyword.operator.of',\n        ],\n        settings: { foreground: palette.keyword, fontStyle: 'bold italic' },\n    },\n\n    // this / super / self / cls\n    {\n        scope: [\n            'variable.language.this',\n            'variable.language.super',\n            'variable.language.self',\n            'variable.language.cls',\n            'variable.language.special',\n        ],\n        settings: { foreground: palette.thisSuper, fontStyle: 'bold italic' },\n    },\n\n    // Strings — single / double\n    {\n        scope: [\n            'string',\n            'string.quoted.single',\n            'string.quoted.double',\n            'string.quoted.other',\n            'string.interpolated',\n            'string.other',\n        ],\n        settings: { foreground: palette.string },\n    },\n\n    // Template literals — backtick body\n    {\n        scope: ['string.quoted.backtick', 'string.template', 'string.template.ts', 'string.template.js'],\n        settings: { foreground: palette.stringTemplate },\n    },\n\n    // Quote delimiters  \"  '  `\n    {\n        scope: [\n            'punctuation.definition.string.begin',\n            'punctuation.definition.string.end',\n            'punctuation.definition.template.begin',\n            'punctuation.definition.template.end',\n            'storage.type.string',\n            'punctuation.definition.string.begin.css',\n            'punctuation.definition.string.end.css',\n        ],\n        settings: { foreground: palette.stringQuote, fontStyle: 'bold' },\n    },\n\n    // Template ${ } delimiters\n    {\n        scope: [\n            'punctuation.definition.template-expression.begin',\n            'punctuation.definition.template-expression.end',\n            'meta.template.expression punctuation.definition.block',\n        ],\n        settings: { foreground: palette.templateExprDelim, fontStyle: 'bold' },\n    },\n\n    // RegExp\n    {\n        scope: ['string.regexp', 'constant.regexp'],\n        settings: { foreground: palette.regex },\n    },\n    {\n        scope: [\n            'string.regexp punctuation.definition.character-class',\n            'string.regexp meta.character-class',\n            'string.regexp constant.character.escape',\n        ],\n        settings: { foreground: palette.regexCharClass },\n    },\n    {\n        scope: ['string.regexp keyword.operator.quantifier', 'keyword.operator.quantifier.regexp'],\n        settings: { foreground: palette.regexQuantifier, fontStyle: 'bold' },\n    },\n    {\n        scope: [\n            'string.regexp keyword.other.regex.flags',\n            'punctuation.definition.regex.flags',\n            'keyword.other.regex.flags',\n        ],\n        settings: { foreground: palette.regexFlag, fontStyle: 'italic' },\n    },\n\n    // Numbers\n    {\n        scope: [\n            'constant.numeric',\n            'constant.numeric.integer',\n            'constant.numeric.float',\n            'constant.numeric.hex',\n            'constant.numeric.binary',\n            'constant.numeric.octal',\n            'constant.numeric.decimal',\n            'constant.numeric.scientific',\n            'constant.numeric.css',\n        ],\n        settings: { foreground: palette.number, fontStyle: 'bold' },\n    },\n\n    // Boolean / null / undefined / Infinity / NaN\n    {\n        scope: [\n            'constant.language',\n            'constant.language.boolean',\n            'constant.language.boolean.true',\n            'constant.language.boolean.false',\n            'constant.language.null',\n            'constant.language.undefined',\n            'constant.language.infinity',\n            'constant.language.nan',\n            'constant.language.nil',\n            'constant.language.none',\n            'constant.other.boolean',\n        ],\n        settings: { foreground: palette.constant, fontStyle: 'bold italic' },\n    },\n\n    // Other constants — escapes, symbols\n    {\n        scope: [\n            'constant.character',\n            'constant.character.escape',\n            'constant.character.unicode',\n            'constant.other',\n            'constant.other.symbol',\n            'constant.other.key',\n            'constant.other.color',\n        ],\n        settings: { foreground: palette.constant },\n    },\n\n    // Function declarations\n    {\n        scope: [\n            'entity.name.function',\n            'meta.function entity.name.function',\n            'meta.method entity.name.function',\n            'meta.function.declaration entity.name.function',\n        ],\n        settings: { foreground: palette.function, fontStyle: 'bold' },\n    },\n\n    // Function calls\n    {\n        scope: [\n            'meta.function-call entity.name.function',\n            'meta.function-call.generic entity.name.function',\n            'support.function',\n            'support.function.dom',\n            'support.function.console',\n        ],\n        settings: { foreground: palette.functionCall },\n    },\n\n    // Built-in functions\n    {\n        scope: [\n            'support.function.builtin',\n            'support.function.string',\n            'support.function.array',\n            'support.function.math',\n            'support.function.date',\n            'support.function.object',\n            'support.function.json',\n            'support.function.promise',\n        ],\n        settings: { foreground: palette.builtinFunction },\n    },\n\n    // Types / classes / interfaces\n    {\n        scope: [\n            'entity.name.type',\n            'entity.name.type.interface',\n            'entity.name.type.alias',\n            'entity.name.type.enum',\n            'entity.name.class',\n            'entity.name.class.forward-decl',\n            'support.type',\n            'support.class',\n            'support.type.object',\n            'support.class.builtin',\n            'entity.other.inherited-class',\n        ],\n        settings: { foreground: palette.typeClass, fontStyle: 'bold' },\n    },\n\n    // Type annotations / return types\n    {\n        scope: [\n            'meta.type.annotation',\n            'meta.return.type',\n            'support.type.primitive',\n            'support.type.builtin',\n            'entity.name.type.primitive',\n            'keyword.type',\n        ],\n        settings: { foreground: palette.typeAnnotation },\n    },\n\n    // typeof keyof infer satisfies is\n    {\n        scope: [\n            'keyword.operator.expression.typeof',\n            'keyword.operator.expression.keyof',\n            'keyword.operator.expression.infer',\n            'keyword.operator.expression.satisfies',\n            'keyword.operator.expression.is',\n            'keyword.operator.type.annotation',\n        ],\n        settings: { foreground: palette.typeClass, fontStyle: 'bold italic' },\n    },\n\n    // Generic type params <T>\n    {\n        scope: [\n            'entity.name.type.type-parameter',\n            'variable.type.type-parameter',\n            'meta.type.parameters entity.name.type',\n        ],\n        settings: { foreground: palette.typeParam, fontStyle: 'italic' },\n    },\n\n    // Enum members\n    {\n        scope: ['variable.other.enummember', 'constant.other.enum', 'meta.enum variable'],\n        settings: { foreground: palette.enumMember, fontStyle: 'bold' },\n    },\n\n    // Namespaces / modules\n    {\n        scope: [\n            'entity.name.namespace',\n            'entity.name.module',\n            'entity.name.section',\n            'storage.type.namespace',\n            'storage.type.module',\n        ],\n        settings: { foreground: palette.namespace },\n    },\n\n    // Decorators (all languages)\n    {\n        scope: [\n            'meta.decorator',\n            'meta.decorator punctuation.decorator',\n            'entity.name.function.decorator',\n            'punctuation.decorator',\n            'storage.type.annotation',\n        ],\n        settings: { foreground: palette.decorator, fontStyle: 'bold italic' },\n    },\n\n    // Variables\n    {\n        scope: [\n            'variable',\n            'variable.other',\n            'variable.other.readwrite',\n            'variable.other.constant',\n            'variable.other.global',\n            'variable.other.local',\n        ],\n        settings: { foreground: palette.variable },\n    },\n\n    // Parameters\n    {\n        scope: [\n            'variable.parameter',\n            'variable.parameter.function',\n            'meta.function.parameters variable.parameter',\n            'meta.arrow.parameters variable.parameter',\n        ],\n        settings: { foreground: palette.parameter },\n    },\n\n    // Object properties\n    {\n        scope: [\n            'variable.other.property',\n            'variable.other.object.property',\n            'support.type.property-name',\n            'meta.object-literal.key',\n            'meta.object.key',\n        ],\n        settings: { foreground: palette.property },\n    },\n\n    // Computed keys [key]\n    {\n        scope: ['meta.computed.key', 'meta.objectliteral meta.template.expression'],\n        settings: { foreground: palette.computedKey, fontStyle: 'bold' },\n    },\n\n    // Commas , semicolons ; dots .\n    {\n        scope: [\n            'punctuation.terminator',\n            'punctuation.terminator.statement',\n            'punctuation.separator',\n            'punctuation.separator.comma',\n            'punctuation.separator.period',\n            'punctuation.separator.dot',\n            'punctuation.separator.namespace',\n            'punctuation.separator.continuation',\n            'punctuation.accessor',\n            'punctuation.accessor.dot',\n            'meta.delimiter.object.comma',\n            'meta.delimiter.array.comma',\n        ],\n        settings: { foreground: palette.punctuationLight, fontStyle: 'bold' },\n    },\n\n    // Colons :\n    {\n        scope: [\n            'punctuation.separator.key-value',\n            'punctuation.separator.colon',\n            'punctuation.separator.type-annotation',\n            'punctuation.separator.dictionary.key-value',\n            'punctuation.definition.binding-pattern.object',\n            'punctuation.separator.case-statements',\n        ],\n        settings: { foreground: palette.colon, fontStyle: 'bold' },\n    },\n\n    // Hash #\n    {\n        scope: [\n            'punctuation.definition.id.css',\n            'punctuation.definition.entity.css',\n            'punctuation.definition.hash',\n            'entity.other.attribute-name.id.css punctuation',\n            'punctuation.definition.interpolation.begin',\n            'punctuation.definition.interpolation.end',\n            'punctuation.definition.directive',\n            'punctuation.definition.preprocessor',\n            'comment.line.number-sign punctuation.definition.comment',\n        ],\n        settings: { foreground: palette.hash, fontStyle: 'bold' },\n    },\n\n    // Errors\n\n    {\n        scope: ['invalid', 'invalid.illegal'],\n        settings: { foreground: palette.invalid, fontStyle: 'bold underline' },\n    },\n\n    {\n        scope: ['invalid.deprecated'],\n        settings: { foreground: palette.deprecated, fontStyle: 'strikethrough' },\n    },\n];\n\nexport const shikiTheme: ThemeRegistration = {\n    name: 'shiki',\n    settings,\n};\n"],"names":["v","token","palette","settings","shikiTheme"],"mappings":"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"}
+{"version":3,"file":"shiki.js","sources":["../../lib/utilities/shiki.ts"],"sourcesContent":["import type { ThemeRegistration } from 'shiki';\n\nconst v = (token: string) => `var(--color-${token})`;\n\nconst palette = {\n    bg: v('elevation-1'),\n    fg: v('neutral-9'),\n    comment: v('neutral-5'),\n    keyword: v('primary-9'),\n    function: v('primary-8'),\n    tag: v('primary-8'),\n    importExport: v('primary-8'),\n    punctuationLight: v('primary-8'),\n    tagBracket: v('primary-7'),\n    thisSuper: v('primary-7'),\n    cssProperty: v('primary-7'),\n    cssAtRule: v('primary-7'),\n    shellBuiltin: v('primary-7'),\n    functionCall: v('primary-7'),\n    jsonKey: v('primary-7'),\n    yamlKey: v('primary-7'),\n    mdHeading: v('primary-9'),\n    mdLink: v('primary-7'),\n    builtinFunction: v('primary-6'),\n    goBuiltin: v('primary-6'),\n    typeClass: v('warning-9'),\n    cssIdSelector: v('warning-9'),\n    mdBold: v('warning-9'),\n    number: v('warning-8'),\n    constant: v('warning-8'),\n    enumMember: v('warning-8'),\n    cssSelector: v('warning-8'),\n    colon: v('warning-8'),\n    typeAnnotation: v('warning-7'),\n    namespace: v('warning-7'),\n    cssPseudo: v('warning-7'),\n    yamlTag: v('warning-7'),\n    rustLifetime: v('warning-7'),\n    shellVar: v('warning-7'),\n    pythonMagic: v('warning-7'),\n    rustMacro: v('warning-8'),\n    scssMixin: v('warning-8'),\n    property: v('warning-6'),\n    typeParam: v('warning-6'),\n    attribute: v('warning-6'),\n    cssVariable: v('warning-6'),\n    mdBullet: v('warning-6'),\n    stringQuote: v('success-10'),\n    string: v('success-9'),\n    stringTemplate: v('success-8'),\n    cssValue: v('success-8'),\n    pythonFStr: v('success-8'),\n    templateExprDelim: v('success-7'),\n    cssUnit: v('success-7'),\n    mdItalic: v('success-7'),\n    regex: v('destructive-9'),\n    invalid: v('destructive-9'),\n    regexCharClass: v('destructive-8'),\n    cssImportant: v('destructive-8'),\n    decorator: v('destructive-7'),\n    hash: v('destructive-7'),\n    jsxExprDelim: v('destructive-7'),\n    computedKey: v('destructive-7'),\n    yamlAnchor: v('destructive-7'),\n    shellFlag: v('destructive-7'),\n    mdCode: v('destructive-7'),\n    regexQuantifier: v('destructive-7'),\n    regexFlag: v('destructive-6'),\n    deprecated: v('destructive-6'),\n    rustAttr: v('destructive-6'),\n    yamlAlias: v('destructive-6'),\n    variable: v('neutral-9'),\n    operator: v('neutral-9'),\n    parameter: v('neutral-8'),\n    arrow: v('neutral-8'),\n    spreadRest: v('neutral-8'),\n    mdBlockquote: v('neutral-5'),\n    mdHr: v('neutral-4'),\n} as const;\n\nconst settings: ThemeRegistration['settings'] = [\n    { settings: { background: palette.bg, foreground: palette.fg } },\n    {\n        scope: [\n            'comment',\n            'punctuation.definition.comment',\n            'string.comment',\n            'comment.block',\n            'comment.line',\n            'comment.block.documentation',\n        ],\n        settings: { foreground: palette.comment, fontStyle: 'italic' },\n    },\n\n    // Keywords — control / storage\n    {\n        scope: [\n            'keyword',\n            'keyword.control',\n            'keyword.control.flow',\n            'keyword.control.conditional',\n            'keyword.control.loop',\n            'keyword.control.trycatch',\n            'keyword.control.switch',\n            'keyword.control.return',\n            'keyword.control.throw',\n            'keyword.control.await',\n            'keyword.control.async',\n            'keyword.other',\n            'storage.type',\n            'storage.modifier',\n        ],\n        settings: { foreground: palette.keyword, fontStyle: 'bold' },\n    },\n\n    // import / export / from / as / default\n    {\n        scope: [\n            'keyword.control.import',\n            'keyword.control.export',\n            'keyword.control.from',\n            'keyword.control.as',\n            'keyword.control.default',\n            'keyword.control.module',\n        ],\n        settings: { foreground: palette.importExport, fontStyle: 'bold' },\n    },\n\n    // Operators\n    {\n        scope: [\n            'keyword.operator',\n            'keyword.operator.assignment',\n            'keyword.operator.assignment.compound',\n            'keyword.operator.comparison',\n            'keyword.operator.logical',\n            'keyword.operator.bitwise',\n            'keyword.operator.arithmetic',\n            'keyword.operator.ternary',\n            'keyword.operator.optional',\n            'keyword.operator.nullcoalescing',\n            'keyword.operator.type',\n            'keyword.operator.expression',\n            'keyword.operator.pipe',\n        ],\n        settings: { foreground: palette.operator, fontStyle: 'bold' },\n    },\n\n    // => ::\n    {\n        scope: [\n            'keyword.operator.arrow',\n            'keyword.operator.scope-resolution',\n            'punctuation.separator.arrow',\n            'punctuation.definition.arrow',\n        ],\n        settings: { foreground: palette.arrow, fontStyle: 'bold' },\n    },\n\n    // ... ?.\n    {\n        scope: [\n            'keyword.operator.spread',\n            'keyword.operator.rest',\n            'keyword.operator.optional-chaining',\n            'punctuation.accessor.optional',\n        ],\n        settings: { foreground: palette.spreadRest, fontStyle: 'bold' },\n    },\n\n    // new delete typeof instanceof void in of\n    {\n        scope: [\n            'keyword.operator.new',\n            'keyword.operator.delete',\n            'keyword.operator.typeof',\n            'keyword.operator.instanceof',\n            'keyword.operator.void',\n            'keyword.operator.in',\n            'keyword.operator.of',\n        ],\n        settings: { foreground: palette.keyword, fontStyle: 'bold italic' },\n    },\n\n    // this / super / self / cls\n    {\n        scope: [\n            'variable.language.this',\n            'variable.language.super',\n            'variable.language.self',\n            'variable.language.cls',\n            'variable.language.special',\n        ],\n        settings: { foreground: palette.thisSuper, fontStyle: 'bold italic' },\n    },\n\n    // Strings — single / double\n    {\n        scope: [\n            'string',\n            'string.quoted.single',\n            'string.quoted.double',\n            'string.quoted.other',\n            'string.interpolated',\n            'string.other',\n        ],\n        settings: { foreground: palette.string },\n    },\n\n    // Template literals — backtick body\n    {\n        scope: ['string.quoted.backtick', 'string.template', 'string.template.ts', 'string.template.js'],\n        settings: { foreground: palette.stringTemplate },\n    },\n\n    // Quote delimiters  \"  '  `\n    {\n        scope: [\n            'punctuation.definition.string.begin',\n            'punctuation.definition.string.end',\n            'punctuation.definition.template.begin',\n            'punctuation.definition.template.end',\n            'storage.type.string',\n            'punctuation.definition.string.begin.css',\n            'punctuation.definition.string.end.css',\n        ],\n        settings: { foreground: palette.stringQuote, fontStyle: 'bold' },\n    },\n\n    // Template ${ } delimiters\n    {\n        scope: [\n            'punctuation.definition.template-expression.begin',\n            'punctuation.definition.template-expression.end',\n            'meta.template.expression punctuation.definition.block',\n        ],\n        settings: { foreground: palette.templateExprDelim, fontStyle: 'bold' },\n    },\n\n    // RegExp\n    {\n        scope: ['string.regexp', 'constant.regexp'],\n        settings: { foreground: palette.regex },\n    },\n    {\n        scope: [\n            'string.regexp punctuation.definition.character-class',\n            'string.regexp meta.character-class',\n            'string.regexp constant.character.escape',\n        ],\n        settings: { foreground: palette.regexCharClass },\n    },\n    {\n        scope: ['string.regexp keyword.operator.quantifier', 'keyword.operator.quantifier.regexp'],\n        settings: { foreground: palette.regexQuantifier, fontStyle: 'bold' },\n    },\n    {\n        scope: [\n            'string.regexp keyword.other.regex.flags',\n            'punctuation.definition.regex.flags',\n            'keyword.other.regex.flags',\n        ],\n        settings: { foreground: palette.regexFlag, fontStyle: 'italic' },\n    },\n\n    // Numbers\n    {\n        scope: [\n            'constant.numeric',\n            'constant.numeric.integer',\n            'constant.numeric.float',\n            'constant.numeric.hex',\n            'constant.numeric.binary',\n            'constant.numeric.octal',\n            'constant.numeric.decimal',\n            'constant.numeric.scientific',\n            'constant.numeric.css',\n        ],\n        settings: { foreground: palette.number, fontStyle: 'bold' },\n    },\n\n    // Boolean / null / undefined / Infinity / NaN\n    {\n        scope: [\n            'constant.language',\n            'constant.language.boolean',\n            'constant.language.boolean.true',\n            'constant.language.boolean.false',\n            'constant.language.null',\n            'constant.language.undefined',\n            'constant.language.infinity',\n            'constant.language.nan',\n            'constant.language.nil',\n            'constant.language.none',\n            'constant.other.boolean',\n        ],\n        settings: { foreground: palette.constant, fontStyle: 'bold italic' },\n    },\n\n    // Other constants — escapes, symbols\n    {\n        scope: [\n            'constant.character',\n            'constant.character.escape',\n            'constant.character.unicode',\n            'constant.other',\n            'constant.other.symbol',\n            'constant.other.key',\n            'constant.other.color',\n        ],\n        settings: { foreground: palette.constant },\n    },\n\n    // Function declarations\n    {\n        scope: [\n            'entity.name.function',\n            'meta.function entity.name.function',\n            'meta.method entity.name.function',\n            'meta.function.declaration entity.name.function',\n        ],\n        settings: { foreground: palette.function, fontStyle: 'bold' },\n    },\n\n    // Function calls\n    {\n        scope: [\n            'meta.function-call entity.name.function',\n            'meta.function-call.generic entity.name.function',\n            'support.function',\n            'support.function.dom',\n            'support.function.console',\n        ],\n        settings: { foreground: palette.functionCall },\n    },\n\n    // Built-in functions\n    {\n        scope: [\n            'support.function.builtin',\n            'support.function.string',\n            'support.function.array',\n            'support.function.math',\n            'support.function.date',\n            'support.function.object',\n            'support.function.json',\n            'support.function.promise',\n        ],\n        settings: { foreground: palette.builtinFunction },\n    },\n\n    // Types / classes / interfaces\n    {\n        scope: [\n            'entity.name.type',\n            'entity.name.type.interface',\n            'entity.name.type.alias',\n            'entity.name.type.enum',\n            'entity.name.class',\n            'entity.name.class.forward-decl',\n            'support.type',\n            'support.class',\n            'support.type.object',\n            'support.class.builtin',\n            'entity.other.inherited-class',\n        ],\n        settings: { foreground: palette.typeClass, fontStyle: 'bold' },\n    },\n\n    // Type annotations / return types\n    {\n        scope: [\n            'meta.type.annotation',\n            'meta.return.type',\n            'support.type.primitive',\n            'support.type.builtin',\n            'entity.name.type.primitive',\n            'keyword.type',\n        ],\n        settings: { foreground: palette.typeAnnotation },\n    },\n\n    // typeof keyof infer satisfies is\n    {\n        scope: [\n            'keyword.operator.expression.typeof',\n            'keyword.operator.expression.keyof',\n            'keyword.operator.expression.infer',\n            'keyword.operator.expression.satisfies',\n            'keyword.operator.expression.is',\n            'keyword.operator.type.annotation',\n        ],\n        settings: { foreground: palette.typeClass, fontStyle: 'bold italic' },\n    },\n\n    // Generic type params <T>\n    {\n        scope: [\n            'entity.name.type.type-parameter',\n            'variable.type.type-parameter',\n            'meta.type.parameters entity.name.type',\n        ],\n        settings: { foreground: palette.typeParam, fontStyle: 'italic' },\n    },\n\n    // Enum members\n    {\n        scope: ['variable.other.enummember', 'constant.other.enum', 'meta.enum variable'],\n        settings: { foreground: palette.enumMember, fontStyle: 'bold' },\n    },\n\n    // Namespaces / modules\n    {\n        scope: [\n            'entity.name.namespace',\n            'entity.name.module',\n            'entity.name.section',\n            'storage.type.namespace',\n            'storage.type.module',\n        ],\n        settings: { foreground: palette.namespace },\n    },\n\n    // Decorators (all languages)\n    {\n        scope: [\n            'meta.decorator',\n            'meta.decorator punctuation.decorator',\n            'entity.name.function.decorator',\n            'punctuation.decorator',\n            'storage.type.annotation',\n        ],\n        settings: { foreground: palette.decorator, fontStyle: 'bold italic' },\n    },\n\n    // Variables\n    {\n        scope: [\n            'variable',\n            'variable.other',\n            'variable.other.readwrite',\n            'variable.other.constant',\n            'variable.other.global',\n            'variable.other.local',\n        ],\n        settings: { foreground: palette.variable },\n    },\n\n    // Parameters\n    {\n        scope: [\n            'variable.parameter',\n            'variable.parameter.function',\n            'meta.function.parameters variable.parameter',\n            'meta.arrow.parameters variable.parameter',\n        ],\n        settings: { foreground: palette.parameter },\n    },\n\n    // Object properties\n    {\n        scope: [\n            'variable.other.property',\n            'variable.other.object.property',\n            'support.type.property-name',\n            'meta.object-literal.key',\n            'meta.object.key',\n        ],\n        settings: { foreground: palette.property },\n    },\n\n    // Computed keys [key]\n    {\n        scope: ['meta.computed.key', 'meta.objectliteral meta.template.expression'],\n        settings: { foreground: palette.computedKey, fontStyle: 'bold' },\n    },\n\n    // Commas , semicolons ; dots .\n    {\n        scope: [\n            'punctuation.terminator',\n            'punctuation.terminator.statement',\n            'punctuation.separator',\n            'punctuation.separator.comma',\n            'punctuation.separator.period',\n            'punctuation.separator.dot',\n            'punctuation.separator.namespace',\n            'punctuation.separator.continuation',\n            'punctuation.accessor',\n            'punctuation.accessor.dot',\n            'meta.delimiter.object.comma',\n            'meta.delimiter.array.comma',\n        ],\n        settings: { foreground: palette.punctuationLight, fontStyle: 'bold' },\n    },\n\n    // Colons :\n    {\n        scope: [\n            'punctuation.separator.key-value',\n            'punctuation.separator.colon',\n            'punctuation.separator.type-annotation',\n            'punctuation.separator.dictionary.key-value',\n            'punctuation.definition.binding-pattern.object',\n            'punctuation.separator.case-statements',\n        ],\n        settings: { foreground: palette.colon, fontStyle: 'bold' },\n    },\n\n    // Hash #\n    {\n        scope: [\n            'punctuation.definition.id.css',\n            'punctuation.definition.entity.css',\n            'punctuation.definition.hash',\n            'entity.other.attribute-name.id.css punctuation',\n            'punctuation.definition.interpolation.begin',\n            'punctuation.definition.interpolation.end',\n            'punctuation.definition.directive',\n            'punctuation.definition.preprocessor',\n            'comment.line.number-sign punctuation.definition.comment',\n        ],\n        settings: { foreground: palette.hash, fontStyle: 'bold' },\n    },\n\n    // Errors\n\n    {\n        scope: ['invalid', 'invalid.illegal'],\n        settings: { foreground: palette.invalid, fontStyle: 'bold underline' },\n    },\n\n    {\n        scope: ['invalid.deprecated'],\n        settings: { foreground: palette.deprecated, fontStyle: 'strikethrough' },\n    },\n];\n\nexport const shikiTheme: ThemeRegistration = {\n    name: 'shiki',\n    settings,\n};\n"],"names":["v","token","palette","settings","shikiTheme"],"mappings":"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"}

package/lib/index.css

@@ -8,100 +8,92 @@
 
     /* Colors */
     --color-*: initial;
-    --color-primary-1: var(--primary-1);
-    --color-primary-2: var(--primary-2);
-    --color-primary-3: var(--primary-3);
-    --color-primary-4: var(--primary-4);
-    --color-primary-5: var(--primary-5);
-    --color-primary-6: var(--primary-6);
-    --color-primary-7: var(--primary-7);
-    --color-primary-8: var(--primary-8);
-    --color-primary-9: var(--primary-9);
-    --color-primary-10: var(--primary-10);
-
-    --color-secondary-1: var(--secondary-1);
-    --color-secondary-2: var(--secondary-2);
-    --color-secondary-3: var(--secondary-3);
-    --color-secondary-4: var(--secondary-4);
-    --color-secondary-5: var(--secondary-5);
-    --color-secondary-6: var(--secondary-6);
-    --color-secondary-7: var(--secondary-7);
-    --color-secondary-8: var(--secondary-8);
-    --color-secondary-9: var(--secondary-9);
-    --color-secondary-10: var(--secondary-10);
-
-    --color-neutral-1: var(--neutral-1);
-    --color-neutral-2: var(--neutral-2);
-    --color-neutral-3: var(--neutral-3);
-    --color-neutral-4: var(--neutral-4);
-    --color-neutral-5: var(--neutral-5);
-    --color-neutral-6: var(--neutral-6);
-    --color-neutral-7: var(--neutral-7);
-    --color-neutral-8: var(--neutral-8);
-    --color-neutral-9: var(--neutral-9);
-    --color-neutral-10: var(--neutral-10);
-
-    --color-destructive-1: var(--destructive-1);
-    --color-destructive-2: var(--destructive-2);
-    --color-destructive-3: var(--destructive-3);
-    --color-destructive-4: var(--destructive-4);
-    --color-destructive-5: var(--destructive-5);
-    --color-destructive-6: var(--destructive-6);
-    --color-destructive-7: var(--destructive-7);
-    --color-destructive-8: var(--destructive-8);
-    --color-destructive-9: var(--destructive-9);
-    --color-destructive-10: var(--destructive-10);
-
-    --color-success-1: var(--success-1);
-    --color-success-2: var(--success-2);
-    --color-success-3: var(--success-3);
-    --color-success-4: var(--success-4);
-    --color-success-5: var(--success-5);
-    --color-success-6: var(--success-6);
-    --color-success-7: var(--success-7);
-    --color-success-8: var(--success-8);
-    --color-success-9: var(--success-9);
-    --color-success-10: var(--success-10);
-
-    --color-warning-1: var(--warning-1);
-    --color-warning-2: var(--warning-2);
-    --color-warning-3: var(--warning-3);
-    --color-warning-4: var(--warning-4);
-    --color-warning-5: var(--warning-5);
-    --color-warning-6: var(--warning-6);
-    --color-warning-7: var(--warning-7);
-    --color-warning-8: var(--warning-8);
-    --color-warning-9: var(--warning-9);
-    --color-warning-10: var(--warning-10);
-
-    --color-foreground: var(--color-neutral-9);
-    --color-background: var(--color-neutral-2);
-    --color-elevation-1: var(--color-neutral-1);
-
-    --color-primary: var(--color-primary-7);
-    --color-primary-foreground: var(--color-neutral-2);
-    --color-secondary: var(--color-secondary-7);
-    --color-secondary-foreground: var(--color-neutral-2);
-    --color-muted: var(--color-neutral-7);
-    --color-muted-foreground: var(--color-neutral-4);
-    --color-accent: var(--color-neutral-7);
-    --color-accent-foreground: var(--color-neutral-2);
-    --color-destructive: var(--color-destructive-7);
-    --color-destructive-foreground: var(--color-neutral-2);
-    --color-success: var(--color-success-7);
-    --color-success-foreground: var(--color-neutral-2);
-    --color-warning: var(--color-warning-7);
-    --color-warning-foreground: var(--color-neutral-2);
-
-    --color-border: var(--color-neutral-4);
+    --color-primary-50: var(--primary-50);
+    --color-primary-100: var(--primary-100);
+    --color-primary-200: var(--primary-200);
+    --color-primary-300: var(--primary-300);
+    --color-primary-400: var(--primary-400);
+    --color-primary-500: var(--primary-500);
+    --color-primary-600: var(--primary-600);
+    --color-primary-700: var(--primary-700);
+    --color-primary-800: var(--primary-800);
+    --color-primary-900: var(--primary-900);
+    --color-primary-950: var(--primary-950);
+
+    --color-neutral-50: var(--neutral-50);
+    --color-neutral-100: var(--neutral-100);
+    --color-neutral-200: var(--neutral-200);
+    --color-neutral-300: var(--neutral-300);
+    --color-neutral-400: var(--neutral-400);
+    --color-neutral-500: var(--neutral-500);
+    --color-neutral-600: var(--neutral-600);
+    --color-neutral-700: var(--neutral-700);
+    --color-neutral-800: var(--neutral-800);
+    --color-neutral-900: var(--neutral-900);
+    --color-neutral-950: var(--neutral-950);
+
+    --color-destructive-50: var(--destructive-50);
+    --color-destructive-100: var(--destructive-100);
+    --color-destructive-200: var(--destructive-200);
+    --color-destructive-300: var(--destructive-300);
+    --color-destructive-400: var(--destructive-400);
+    --color-destructive-500: var(--destructive-500);
+    --color-destructive-600: var(--destructive-600);
+    --color-destructive-700: var(--destructive-700);
+    --color-destructive-800: var(--destructive-800);
+    --color-destructive-900: var(--destructive-900);
+    --color-destructive-950: var(--destructive-950);
+
+    --color-success-50: var(--success-50);
+    --color-success-100: var(--success-100);
+    --color-success-200: var(--success-200);
+    --color-success-300: var(--success-300);
+    --color-success-400: var(--success-400);
+    --color-success-500: var(--success-500);
+    --color-success-600: var(--success-600);
+    --color-success-700: var(--success-700);
+    --color-success-800: var(--success-800);
+    --color-success-900: var(--success-900);
+    --color-success-950: var(--success-950);
+
+    --color-warning-50: var(--warning-50);
+    --color-warning-100: var(--warning-100);
+    --color-warning-200: var(--warning-200);
+    --color-warning-300: var(--warning-300);
+    --color-warning-400: var(--warning-400);
+    --color-warning-500: var(--warning-500);
+    --color-warning-600: var(--warning-600);
+    --color-warning-700: var(--warning-700);
+    --color-warning-800: var(--warning-800);
+    --color-warning-900: var(--warning-900);
+    --color-warning-950: var(--warning-950);
+
+    --color-foreground: var(--color-neutral-900);
+    --color-background: var(--color-neutral-100);
+    --color-elevation-1: var(--color-neutral-50);
+
+    --color-primary: var(--color-primary-500);
+    --color-primary-foreground: var(--color-elevation-1);
+    --color-muted: var(--color-neutral-700);
+    --color-muted-foreground: var(--color-neutral-400);
+    --color-accent: var(--color-neutral-700);
+    --color-accent-foreground: var(--color-elevation-1);
+    --color-destructive: var(--color-destructive-500);
+    --color-destructive-foreground: var(--color-elevation-1);
+    --color-success: var(--color-success-500);
+    --color-success-foreground: var(--color-elevation-1);
+    --color-warning: var(--color-warning-500);
+    --color-warning-foreground: var(--color-elevation-1);
+
+    --color-border: var(--color-neutral-400);
     --color-input: var(--color-border);
-    --color-ring: var(--color-neutral-5);
+    --color-ring: var(--color-neutral-500);
 
-    --color-chart-1: var(--color-primary-5);
-    --color-chart-2: var(--color-primary-6);
-    --color-chart-3: var(--color-warning-5);
-    --color-chart-4: var(--color-warning-6);
-    --color-chart-5: var(--color-neutral-6);
+    --color-chart-1: var(--color-primary-500);
+    --color-chart-2: var(--color-primary-600);
+    --color-chart-3: var(--color-warning-500);
+    --color-chart-4: var(--color-warning-600);
+    --color-chart-5: var(--color-neutral-600);
 
     --spacing-input: --spacing(9);
     --spacing-icon: --spacing(4);
@@ -314,19 +306,13 @@
     @apply border border-destructive text-destructive-foreground bg-destructive;
 }
 @utility btn-destructive-neutral {
-    @apply text-destructive bg-destructive/20;
-}
-@utility btn-secondary {
-    @apply border border-secondary text-secondary-foreground bg-secondary;
-}
-@utility btn-secondary-neutral {
-    @apply text-secondary bg-secondary/20;
+    @apply text-destructive bg-destructive/20 border border-destructive;
 }
 @utility btn-neutral {
     @apply border border-input text-accent bg-elevation-1;
 }
 @utility btn-primary-neutral {
-    @apply text-primary bg-primary/20;
+    @apply border border-primary text-primary bg-primary/20;
 }
 @utility btn-ghost {
     @apply bg-transparent focus:bg-accent/20 hover:bg-accent/20;
@@ -411,6 +397,13 @@
         @apply bg-background text-foreground;
     }
 
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --color-background: var(--color-neutral-50);
+            --color-elevation-1: var(--color-neutral-100);
+        }
+    }
+
     .tw-prose a {
         @apply link;
     }