@lobehub/ui 4.3.2 → 4.3.3

package/es/icons/lucideExtra/GroupBotIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react86 from "react";
-import * as lucide_react7 from "lucide-react";
+import * as react81 from "react";
+import * as lucide_react4 from "lucide-react";
 
 //#region src/icons/lucideExtra/GroupBotIcon.d.ts
-declare const GroupBotIcon: react86.ForwardRefExoticComponent<Omit<lucide_react7.LucideProps, "ref"> & react86.RefAttributes<SVGSVGElement>>;
+declare const GroupBotIcon: react81.ForwardRefExoticComponent<Omit<lucide_react4.LucideProps, "ref"> & react81.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GroupBotIcon };
 //# sourceMappingURL=GroupBotIcon.d.mts.map

package/es/icons/lucideExtra/GroupBotSquareIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react96 from "react";
-import * as lucide_react12 from "lucide-react";
+import * as react85 from "react";
+import * as lucide_react6 from "lucide-react";
 
 //#region src/icons/lucideExtra/GroupBotSquareIcon.d.ts
-declare const GroupBotSquareIcon: react96.ForwardRefExoticComponent<Omit<lucide_react12.LucideProps, "ref"> & react96.RefAttributes<SVGSVGElement>>;
+declare const GroupBotSquareIcon: react85.ForwardRefExoticComponent<Omit<lucide_react6.LucideProps, "ref"> & react85.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { GroupBotSquareIcon };
 //# sourceMappingURL=GroupBotSquareIcon.d.mts.map

package/es/icons/lucideExtra/LeftClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react98 from "react";
-import * as lucide_react13 from "lucide-react";
+import * as react89 from "react";
+import * as lucide_react8 from "lucide-react";
 
 //#region src/icons/lucideExtra/LeftClickIcon.d.ts
-declare const LeftClickIcon: react98.ForwardRefExoticComponent<Omit<lucide_react13.LucideProps, "ref"> & react98.RefAttributes<SVGSVGElement>>;
+declare const LeftClickIcon: react89.ForwardRefExoticComponent<Omit<lucide_react8.LucideProps, "ref"> & react89.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { LeftClickIcon };
 //# sourceMappingURL=LeftClickIcon.d.mts.map

package/es/icons/lucideExtra/LeftDoubleClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react92 from "react";
-import * as lucide_react10 from "lucide-react";
+import * as react77 from "react";
+import * as lucide_react2 from "lucide-react";
 
 //#region src/icons/lucideExtra/LeftDoubleClickIcon.d.ts
-declare const LeftDoubleClickIcon: react92.ForwardRefExoticComponent<Omit<lucide_react10.LucideProps, "ref"> & react92.RefAttributes<SVGSVGElement>>;
+declare const LeftDoubleClickIcon: react77.ForwardRefExoticComponent<Omit<lucide_react2.LucideProps, "ref"> & react77.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { LeftDoubleClickIcon };
 //# sourceMappingURL=LeftDoubleClickIcon.d.mts.map

package/es/icons/lucideExtra/McpIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react78 from "react";
-import * as lucide_react3 from "lucide-react";
+import * as react87 from "react";
+import * as lucide_react7 from "lucide-react";
 
 //#region src/icons/lucideExtra/McpIcon.d.ts
-declare const McpIcon: react78.ForwardRefExoticComponent<Omit<lucide_react3.LucideProps, "ref"> & react78.RefAttributes<SVGSVGElement>>;
+declare const McpIcon: react87.ForwardRefExoticComponent<Omit<lucide_react7.LucideProps, "ref"> & react87.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { McpIcon };
 //# sourceMappingURL=McpIcon.d.mts.map

package/es/icons/lucideExtra/ProviderIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react80 from "react";
-import * as lucide_react4 from "lucide-react";
+import * as react91 from "react";
+import * as lucide_react9 from "lucide-react";
 
 //#region src/icons/lucideExtra/ProviderIcon.d.ts
-declare const ProviderIcon: react80.ForwardRefExoticComponent<Omit<lucide_react4.LucideProps, "ref"> & react80.RefAttributes<SVGSVGElement>>;
+declare const ProviderIcon: react91.ForwardRefExoticComponent<Omit<lucide_react9.LucideProps, "ref"> & react91.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { ProviderIcon };
 //# sourceMappingURL=ProviderIcon.d.mts.map

package/es/icons/lucideExtra/RightClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react84 from "react";
-import * as lucide_react6 from "lucide-react";
+import * as react97 from "react";
+import * as lucide_react12 from "lucide-react";
 
 //#region src/icons/lucideExtra/RightClickIcon.d.ts
-declare const RightClickIcon: react84.ForwardRefExoticComponent<Omit<lucide_react6.LucideProps, "ref"> & react84.RefAttributes<SVGSVGElement>>;
+declare const RightClickIcon: react97.ForwardRefExoticComponent<Omit<lucide_react12.LucideProps, "ref"> & react97.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { RightClickIcon };
 //# sourceMappingURL=RightClickIcon.d.mts.map

package/es/icons/lucideExtra/RightDoubleClickIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react88 from "react";
-import * as lucide_react8 from "lucide-react";
+import * as react93 from "react";
+import * as lucide_react10 from "lucide-react";
 
 //#region src/icons/lucideExtra/RightDoubleClickIcon.d.ts
-declare const RightDoubleClickIcon: react88.ForwardRefExoticComponent<Omit<lucide_react8.LucideProps, "ref"> & react88.RefAttributes<SVGSVGElement>>;
+declare const RightDoubleClickIcon: react93.ForwardRefExoticComponent<Omit<lucide_react10.LucideProps, "ref"> & react93.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { RightDoubleClickIcon };
 //# sourceMappingURL=RightDoubleClickIcon.d.mts.map

package/es/icons/lucideExtra/ShapesUploadIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react90 from "react";
-import * as lucide_react9 from "lucide-react";
+import * as react95 from "react";
+import * as lucide_react11 from "lucide-react";
 
 //#region src/icons/lucideExtra/ShapesUploadIcon.d.ts
-declare const ShapesUploadIcon: react90.ForwardRefExoticComponent<Omit<lucide_react9.LucideProps, "ref"> & react90.RefAttributes<SVGSVGElement>>;
+declare const ShapesUploadIcon: react95.ForwardRefExoticComponent<Omit<lucide_react11.LucideProps, "ref"> & react95.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { ShapesUploadIcon };
 //# sourceMappingURL=ShapesUploadIcon.d.mts.map

package/es/icons/lucideExtra/TreeDownRightIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react94 from "react";
-import * as lucide_react11 from "lucide-react";
+import * as react99 from "react";
+import * as lucide_react13 from "lucide-react";
 
 //#region src/icons/lucideExtra/TreeDownRightIcon.d.ts
-declare const TreeDownRightIcon: react94.ForwardRefExoticComponent<Omit<lucide_react11.LucideProps, "ref"> & react94.RefAttributes<SVGSVGElement>>;
+declare const TreeDownRightIcon: react99.ForwardRefExoticComponent<Omit<lucide_react13.LucideProps, "ref"> & react99.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { TreeDownRightIcon };
 //# sourceMappingURL=TreeDownRightIcon.d.mts.map

package/es/icons/lucideExtra/TreeUpDownRightIcon.d.mts

@@ -1,8 +1,8 @@
-import * as react76 from "react";
-import * as lucide_react2 from "lucide-react";
+import * as react83 from "react";
+import * as lucide_react5 from "lucide-react";
 
 //#region src/icons/lucideExtra/TreeUpDownRightIcon.d.ts
-declare const TreeUpDownRightIcon: react76.ForwardRefExoticComponent<Omit<lucide_react2.LucideProps, "ref"> & react76.RefAttributes<SVGSVGElement>>;
+declare const TreeUpDownRightIcon: react83.ForwardRefExoticComponent<Omit<lucide_react5.LucideProps, "ref"> & react83.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { TreeUpDownRightIcon };
 //# sourceMappingURL=TreeUpDownRightIcon.d.mts.map

package/es/index.d.mts

@@ -228,6 +228,7 @@ import { SortableList } from "./SortableList/SortableList.mjs";
 import "./SortableList/index.mjs";
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
 import { generateCustomStylish } from "./styles/theme/customStylish.mjs";
+import { staticStylish } from "./styles/theme/customStylishStatic.mjs";
 import { generateCustomToken } from "./styles/theme/customToken.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
 import "./styles/index.mjs";
@@ -251,4 +252,4 @@ import { LayoutSidebarInner } from "./Layout/components/LayoutSidebarInner.mjs";
 import { LayoutToc } from "./Layout/components/LayoutToc.mjs";
 import Layout from "./Layout/index.mjs";
 import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
-export { A, AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, ColorPalettes, ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, ColorToken, type Config, ConfigProvider, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type MenuItemType as DropdownMenuItemType, type DropdownProps, EditableText, type EditableTextProps, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, ImgProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, LobeCustomStylish, LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, type ModalProps, MotionComponent, type MotionComponentType, MotionProvider, NeutralColors, NeutralColorsObj, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Input$1 as Select, type SelectProps, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, SpanProps, SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, Typography, type TypographyProps, Video, type VideoProps, combineKeys, copyToClipboard, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, mermaidThemes, neutralColors, neutralColorsSwatches, preprocessMarkdownContent, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, useCdnFn, useMotionComponent, useTranslation };
+export { A, AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, ColorPalettes, ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, ColorToken, type Config, ConfigProvider, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type MenuItemType as DropdownMenuItemType, type DropdownProps, EditableText, type EditableTextProps, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, ImgProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, LobeCustomStylish, LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, type ModalProps, MotionComponent, type MotionComponentType, MotionProvider, NeutralColors, NeutralColorsObj, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Input$1 as Select, type SelectProps, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, SpanProps, SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, Typography, type TypographyProps, Video, type VideoProps, combineKeys, copyToClipboard, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, mermaidThemes, neutralColors, neutralColorsSwatches, preprocessMarkdownContent, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, useCdnFn, useMotionComponent, useTranslation };

package/es/index.mjs

@@ -5,12 +5,20 @@ import A_default from "./A/index.mjs";
 import Accordion_default from "./Accordion/Accordion.mjs";
 import FlexBasic_default from "./Flex/FlexBasic.mjs";
 import Center_default from "./Flex/Center.mjs";
+import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
+import { generateCustomStylish } from "./styles/theme/customStylish.mjs";
+import { staticStylish } from "./styles/theme/customStylishStatic.mjs";
+import { generateCustomToken } from "./styles/theme/customToken.mjs";
+import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
 import Block_default from "./Block/Block.mjs";
 import { KeyMapEnum } from "./Hotkey/const.mjs";
 import { IconProvider } from "./Icon/components/IconProvider.mjs";
 import Icon_default from "./Icon/Icon.mjs";
 import { combineKeys } from "./Hotkey/utils.mjs";
 import Hotkey_default from "./Hotkey/Hotkey.mjs";
+import Meta_default from "./ThemeProvider/Meta.mjs";
+import FontLoader_default from "./FontLoader/index.mjs";
+import ThemeProvider_default from "./ThemeProvider/ThemeProvider.mjs";
 import Tooltip_default from "./Tooltip/Tooltip.mjs";
 import TooltipGroup_default from "./Tooltip/TooltipGroup.mjs";
 import Text_default from "./Text/Text.mjs";
@@ -57,7 +65,6 @@ import Tag_default from "./Tag/Tag.mjs";
 import EmojiPicker_default from "./EmojiPicker/EmojiPicker.mjs";
 import Empty_default from "./Empty/Empty.mjs";
 import FileTypeIcon_default from "./FileTypeIcon/FileTypeIcon.mjs";
-import FontLoader_default from "./FontLoader/index.mjs";
 import Footer_default from "./Footer/Footer.mjs";
 import FormGroup_default from "./Form/components/FormGroup.mjs";
 import FormTitle_default from "./Form/components/FormTitle.mjs";
@@ -117,14 +124,8 @@ import SkeletonTags_default from "./Skeleton/SkeletonTags.mjs";
 import Skeleton_default from "./Skeleton/index.mjs";
 import SliderWithInput_default from "./SliderWithInput/SliderWithInput.mjs";
 import SortableList_default from "./SortableList/SortableList.mjs";
-import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
-import { generateCustomStylish } from "./styles/theme/customStylish.mjs";
-import { generateCustomToken } from "./styles/theme/customToken.mjs";
-import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
-import Meta_default from "./ThemeProvider/Meta.mjs";
-import ThemeProvider_default from "./ThemeProvider/ThemeProvider.mjs";
 import ThemeSwitch_default from "./ThemeSwitch/ThemeSwitch.mjs";
 import Toc_default from "./Toc/Toc.mjs";
 import { ErrorBoundary } from "react-error-boundary";
 
-export { A_default as A, Accordion_default as Accordion, AccordionItem_default as AccordionItem, ActionIcon_default as ActionIcon, ActionIconGroup_default as ActionIconGroup, Alert_default as Alert, Select_default as AutoComplete, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Block_default as Block, Burger_default as Burger, Button_default as Button, Center_default as Center, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, CodeEditor_default as CodeEditor, Collapse_default as Collapse, ColorSwatches_default as ColorSwatches, ConfigProvider_default as ConfigProvider, CopyButton_default as CopyButton, DatePicker_default as DatePicker, DownloadButton_default as DownloadButton, DraggablePanel_default as DraggablePanel, DraggablePanelBody_default as DraggablePanelBody, DraggablePanelContainer_default as DraggablePanelContainer, DraggablePanelFooter_default as DraggablePanelFooter, DraggablePanelHeader_default as DraggablePanelHeader, DraggableSideNav_default as DraggableSideNav, Drawer_default as Drawer, Dropdown_default as Dropdown, EditableText_default as EditableText, EmojiPicker_default as EmojiPicker, Empty_default as Empty, ErrorBoundary, FileTypeIcon_default as FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji_default as FluentEmoji, FontLoader_default as FontLoader, Footer_default as Footer, Form_default as Form, FormGroup_default as FormGroup, FormItem_default as FormItem, FormModal_default as FormModal, FormSubmitFooter_default as FormSubmitFooter, FormTitle_default as FormTitle, Grid_default as Grid, GroupAvatar_default as GroupAvatar, GuideCard_default as GuideCard, Header_default as Header, Highlighter_default as Highlighter, Hotkey_default as Hotkey, HotkeyInput_default as HotkeyInput, I18nProvider, Icon_default as Icon, IconProvider, Image_default as Image, ImageSelect_default as ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOPT_default as InputOPT, InputPassword_default as InputPassword, KeyMapEnum, Layout_default as Layout, LayoutFooter_default as LayoutFooter, LayoutHeader_default as LayoutHeader, LayoutMain_default as LayoutMain, LayoutSidebar_default as LayoutSidebar, LayoutSidebarInner_default as LayoutSidebarInner, LayoutToc_default as LayoutToc, List_default as List, ListItem_default as ListItem, I18nProvider as LobeUIProvider, Markdown_default as Markdown, MaskShadow_default as MaskShadow, MaterialFileTypeIcon_default as MaterialFileTypeIcon, Menu_default as Menu, Mermaid_default as Mermaid, Meta_default as Meta, Modal_default as Modal, MotionComponent, MotionProvider, PreviewGroup_default as PreviewGroup, ScrollShadow_default as ScrollShadow, SearchBar_default as SearchBar, SearchResultCards_default as SearchResultCards, Segmented_default as Segmented, Select_default$1 as Select, SideNav_default as SideNav, Skeleton_default as Skeleton, SkeletonAvatar_default as SkeletonAvatar, SkeletonBlock_default as SkeletonBlock, SkeletonButton_default as SkeletonButton, SkeletonParagraph_default as SkeletonParagraph, SkeletonTags_default as SkeletonTags, SkeletonTitle_default as SkeletonTitle, SliderWithInput_default as SliderWithInput, Snippet_default as Snippet, SortableList_default as SortableList, SyntaxHighlighter_default as SyntaxHighlighter, SyntaxMermaid_default as SyntaxMermaid, Tabs_default as Tabs, Tag_default as Tag, Text_default as Text, TextArea_default as TextArea, ThemeProvider_default as ThemeProvider, ThemeSwitch_default as ThemeSwitch, Toc_default as Toc, Tooltip_default as Tooltip, TooltipGroup_default as TooltipGroup, Typography_default as Typography, Video_default as Video, combineKeys, copyToClipboard, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, mermaidThemes, neutralColors, neutralColorsSwatches, preprocessMarkdownContent, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, useCdnFn, useMotionComponent, useTranslation };
+export { A_default as A, Accordion_default as Accordion, AccordionItem_default as AccordionItem, ActionIcon_default as ActionIcon, ActionIconGroup_default as ActionIconGroup, Alert_default as Alert, Select_default as AutoComplete, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Block_default as Block, Burger_default as Burger, Button_default as Button, Center_default as Center, Checkbox_default as Checkbox, CheckboxGroup_default as CheckboxGroup, CodeEditor_default as CodeEditor, Collapse_default as Collapse, ColorSwatches_default as ColorSwatches, ConfigProvider_default as ConfigProvider, CopyButton_default as CopyButton, DatePicker_default as DatePicker, DownloadButton_default as DownloadButton, DraggablePanel_default as DraggablePanel, DraggablePanelBody_default as DraggablePanelBody, DraggablePanelContainer_default as DraggablePanelContainer, DraggablePanelFooter_default as DraggablePanelFooter, DraggablePanelHeader_default as DraggablePanelHeader, DraggableSideNav_default as DraggableSideNav, Drawer_default as Drawer, Dropdown_default as Dropdown, EditableText_default as EditableText, EmojiPicker_default as EmojiPicker, Empty_default as Empty, ErrorBoundary, FileTypeIcon_default as FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji_default as FluentEmoji, FontLoader_default as FontLoader, Footer_default as Footer, Form_default as Form, FormGroup_default as FormGroup, FormItem_default as FormItem, FormModal_default as FormModal, FormSubmitFooter_default as FormSubmitFooter, FormTitle_default as FormTitle, Grid_default as Grid, GroupAvatar_default as GroupAvatar, GuideCard_default as GuideCard, Header_default as Header, Highlighter_default as Highlighter, Hotkey_default as Hotkey, HotkeyInput_default as HotkeyInput, I18nProvider, Icon_default as Icon, IconProvider, Image_default as Image, ImageSelect_default as ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOPT_default as InputOPT, InputPassword_default as InputPassword, KeyMapEnum, Layout_default as Layout, LayoutFooter_default as LayoutFooter, LayoutHeader_default as LayoutHeader, LayoutMain_default as LayoutMain, LayoutSidebar_default as LayoutSidebar, LayoutSidebarInner_default as LayoutSidebarInner, LayoutToc_default as LayoutToc, List_default as List, ListItem_default as ListItem, I18nProvider as LobeUIProvider, Markdown_default as Markdown, MaskShadow_default as MaskShadow, MaterialFileTypeIcon_default as MaterialFileTypeIcon, Menu_default as Menu, Mermaid_default as Mermaid, Meta_default as Meta, Modal_default as Modal, MotionComponent, MotionProvider, PreviewGroup_default as PreviewGroup, ScrollShadow_default as ScrollShadow, SearchBar_default as SearchBar, SearchResultCards_default as SearchResultCards, Segmented_default as Segmented, Select_default$1 as Select, SideNav_default as SideNav, Skeleton_default as Skeleton, SkeletonAvatar_default as SkeletonAvatar, SkeletonBlock_default as SkeletonBlock, SkeletonButton_default as SkeletonButton, SkeletonParagraph_default as SkeletonParagraph, SkeletonTags_default as SkeletonTags, SkeletonTitle_default as SkeletonTitle, SliderWithInput_default as SliderWithInput, Snippet_default as Snippet, SortableList_default as SortableList, SyntaxHighlighter_default as SyntaxHighlighter, SyntaxMermaid_default as SyntaxMermaid, Tabs_default as Tabs, Tag_default as Tag, Text_default as Text, TextArea_default as TextArea, ThemeProvider_default as ThemeProvider, ThemeSwitch_default as ThemeSwitch, Toc_default as Toc, Tooltip_default as Tooltip, TooltipGroup_default as TooltipGroup, Typography_default as Typography, Video_default as Video, combineKeys, copyToClipboard, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, mermaidThemes, neutralColors, neutralColorsSwatches, preprocessMarkdownContent, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, useCdnFn, useMotionComponent, useTranslation };

package/es/mdx/Callout/index.mjs

@@ -2,38 +2,39 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon_default from "../../Icon/Icon.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useTheme } from "antd-style";
 import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from "lucide-react";
 
 //#region src/mdx/Callout/index.tsx
 const Callout = ({ children, type = "info", className, style, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
+	const theme = useTheme();
 	const typeConfig = useMemo(() => ({
 		error: {
 			background: theme.colorErrorFillTertiary,
-			color: theme.colorError,
+			color: cssVar.colorError,
 			icon: AlertOctagon
 		},
 		important: {
 			background: theme.purpleFillTertiary,
-			color: theme.purple,
+			color: cssVar.purple,
 			icon: MessageSquareWarning
 		},
 		info: {
 			background: theme.colorInfoFillTertiary,
-			color: theme.colorInfo,
+			color: cssVar.colorInfo,
 			icon: Info
 		},
 		tip: {
 			background: theme.colorSuccessFillTertiary,
-			color: theme.colorSuccess,
+			color: cssVar.colorSuccess,
 			icon: Lightbulb
 		},
 		warning: {
 			background: theme.colorWarningFillTertiary,
-			color: theme.colorWarning,
+			color: cssVar.colorWarning,
 			icon: AlertTriangle
 		}
 	}), [theme]);

package/es/mdx/Callout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Callout: FC<CalloutProps>","Flexbox","Icon"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { FC, useMemo } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\n\nexport interface CalloutProps extends FlexboxProps {\n  type?: 'tip' | 'error' | 'important' | 'info' | 'warning';\n}\n\nconst Callout: FC<CalloutProps> = ({ children, type = 'info', className, style, ...rest }) => {\n  const { cx, styles, theme } = useStyles();\n\n  const typeConfig = useMemo(\n    () => ({\n      error: {\n        background: theme.colorErrorFillTertiary,\n        color: theme.colorError,\n        icon: AlertOctagon,\n      },\n      important: {\n        background: theme.purpleFillTertiary,\n        color: theme.purple,\n        icon: MessageSquareWarning,\n      },\n      info: {\n        background: theme.colorInfoFillTertiary,\n        color: theme.colorInfo,\n        icon: Info,\n      },\n      tip: {\n        background: theme.colorSuccessFillTertiary,\n        color: theme.colorSuccess,\n        icon: Lightbulb,\n      },\n      warning: {\n        background: theme.colorWarningFillTertiary,\n        color: theme.colorWarning,\n        icon: AlertTriangle,\n      },\n    }),\n    [theme],\n  );\n\n  const selectedType = typeConfig?.[type] || typeConfig.info;\n\n  const { icon, color, background } = selectedType;\n\n  return (\n    <Flexbox\n      align={'flex-start'}\n      className={cx(styles.container, className)}\n      horizontal\n      style={{\n        background: background,\n        boxShadow: `0 0 0 1px ${background} inset`,\n        color,\n        ...style,\n      }}\n      {...rest}\n    >\n      <Icon icon={icon} size={{ size: '1.2em' }} style={{ marginBlock: '0.25em' }} />\n      <div className={cx(styles.content, type === 'info' && styles.underlineAnchor)}>\n        <div>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,WAA6B,EAAE,UAAU,OAAO,QAAQ,WAAW,OAAO,GAAG,WAAW;CAC5F,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CAEzC,MAAM,aAAa,eACV;EACL,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,MAAM;GACb,MAAM;GACP;EACD,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,MAAM;GACb,MAAM;GACP;EACD,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,MAAM;GACb,MAAM;GACP;EACD,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,MAAM;GACb,MAAM;GACP;EACD,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,MAAM;GACb,MAAM;GACP;EACF,GACD,CAAC,MAAM,CACR;CAID,MAAM,EAAE,MAAM,OAAO,eAFA,aAAa,SAAS,WAAW;AAItD,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C;EACA,OAAO;GACO;GACZ,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;GACJ;EACD,GAAI;aAEJ,oBAACC;GAAW;GAAM,MAAM,EAAE,MAAM,SAAS;GAAE,OAAO,EAAE,aAAa,UAAU;IAAI,EAC/E,oBAAC;GAAI,WAAW,GAAG,OAAO,SAAS,SAAS,UAAU,OAAO,gBAAgB;aAC3E,oBAAC,SAAK,WAAe;IACjB;GACE;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}
+{"version":3,"file":"index.mjs","names":["Callout: FC<CalloutProps>","Flexbox","Icon"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { FC, useMemo } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\n\nexport interface CalloutProps extends FlexboxProps {\n  type?: 'tip' | 'error' | 'important' | 'info' | 'warning';\n}\n\nconst Callout: FC<CalloutProps> = ({ children, type = 'info', className, style, ...rest }) => {\n  const theme = useTheme();\n  const typeConfig = useMemo(\n    () => ({\n      error: {\n        background: theme.colorErrorFillTertiary,\n        color: cssVar.colorError,\n        icon: AlertOctagon,\n      },\n      important: {\n        background: theme.purpleFillTertiary,\n        color: cssVar.purple,\n        icon: MessageSquareWarning,\n      },\n      info: {\n        background: theme.colorInfoFillTertiary,\n        color: cssVar.colorInfo,\n        icon: Info,\n      },\n      tip: {\n        background: theme.colorSuccessFillTertiary,\n        color: cssVar.colorSuccess,\n        icon: Lightbulb,\n      },\n      warning: {\n        background: theme.colorWarningFillTertiary,\n        color: cssVar.colorWarning,\n        icon: AlertTriangle,\n      },\n    }),\n    [theme],\n  );\n\n  const selectedType = typeConfig?.[type] || typeConfig.info;\n\n  const { icon, color, background } = selectedType;\n\n  return (\n    <Flexbox\n      align={'flex-start'}\n      className={cx(styles.container, className)}\n      horizontal\n      style={{\n        background: background,\n        boxShadow: `0 0 0 1px ${background} inset`,\n        color,\n        ...style,\n      }}\n      {...rest}\n    >\n      <Icon icon={icon} size={{ size: '1.2em' }} style={{ marginBlock: '0.25em' }} />\n      <div className={cx(styles.content, type === 'info' && styles.underlineAnchor)}>\n        <div>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;AAeA,MAAMA,WAA6B,EAAE,UAAU,OAAO,QAAQ,WAAW,OAAO,GAAG,WAAW;CAC5F,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa,eACV;EACL,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACF,GACD,CAAC,MAAM,CACR;CAID,MAAM,EAAE,MAAM,OAAO,eAFA,aAAa,SAAS,WAAW;AAItD,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C;EACA,OAAO;GACO;GACZ,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;GACJ;EACD,GAAI;aAEJ,oBAACC;GAAW;GAAM,MAAM,EAAE,MAAM,SAAS;GAAE,OAAO,EAAE,aAAa,UAAU;IAAI,EAC/E,oBAAC;GAAI,WAAW,GAAG,OAAO,SAAS,SAAS,UAAU,OAAO,gBAAgB;aAC3E,oBAAC,SAAK,WAAe;IACjB;GACE;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/mdx/Callout/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mdx/Callout/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		container: css$1`
       --lobe-markdown-margin-multiple: 1;
@@ -12,7 +12,6 @@ const useStyles = createStyles(({ css: css$1 }) => {
       margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
       padding-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
       padding-inline: 1em;
-
       border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
     `,
 		content: css$1`
@@ -35,5 +34,5 @@ const useStyles = createStyles(({ css: css$1 }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/mdx/Callout/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Callout/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      gap: 0.75em;\n\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-inline: 1em;\n\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    `,\n    content: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * -1em);\n\n      > div {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      }\n\n      p {\n        color: inherit !important;\n      }\n    `,\n    underlineAnchor: css`\n      a {\n        text-decoration: underline;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO;EACL,WAAW,KAAG;;;;;;;;;;;;EAYd,SAAS,KAAG;;;;;;;;;;;EAWZ,iBAAiB,KAAG;;;;;EAKrB;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Callout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      gap: 0.75em;\n\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    `,\n    content: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * -1em);\n\n      > div {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      }\n\n      p {\n        color: inherit !important;\n      }\n    `,\n    underlineAnchor: css`\n      a {\n        text-decoration: underline;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,WAAW,KAAG;;;;;;;;;;;EAWd,SAAS,KAAG;;;;;;;;;;;EAWZ,iBAAiB,KAAG;;;;;EAKrB;EACD"}

package/es/mdx/Cards/Card.mjs

@@ -7,15 +7,10 @@ import Icon_default from "../../Icon/Icon.mjs";
 import Img_default from "../../Img/index.mjs";
 import Tag_default from "../../Tag/Tag.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createStyles } from "antd-style";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/mdx/Cards/Card.tsx
-const useStyles = createStyles(({ css: css$1, cx: cx$1, token }) => {
-	const icon = cx$1(css$1`
-    margin-block: 0.1em;
-    opacity: 0.5;
-    transition: opacity 0.2s ${token.motionEaseInOut};
-  `);
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		card: css$1`
       --lobe-markdown-header-multiple: 0.2;
@@ -23,7 +18,7 @@ const useStyles = createStyles(({ css: css$1, cx: cx$1, token }) => {
 
       overflow: hidden;
       height: 100%;
-      color: ${token.colorText};
+      color: ${cssVar$1.colorText};
 
       h3,
       p {
@@ -31,16 +26,16 @@ const useStyles = createStyles(({ css: css$1, cx: cx$1, token }) => {
       }
 
       p {
-        color: ${token.colorTextDescription};
-        transition: color 0.2s ${token.motionEaseInOut};
+        color: ${cssVar$1.colorTextDescription};
+        transition: color 0.2s ${cssVar$1.motionEaseInOut};
       }
 
       &:hover {
         p {
-          color: ${token.colorTextSecondary};
+          color: ${cssVar$1.colorTextSecondary};
         }
 
-        .${icon} {
+        .mdx-card-icon {
           opacity: 1;
         }
       }
@@ -49,16 +44,19 @@ const useStyles = createStyles(({ css: css$1, cx: cx$1, token }) => {
       width: 100%;
       padding: 1.4em;
     `,
-		icon
+		icon: css$1`
+      margin-block: 0.1em;
+      opacity: 0.5;
+      transition: opacity 0.2s ${cssVar$1.motionEaseInOut};
+    `
 	};
 });
 const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, className, image, variant = "filled", ...rest }) => {
-	const { cx: cx$1, styles } = useStyles();
 	return /* @__PURE__ */ jsx(A_default, {
 		href,
 		children: /* @__PURE__ */ jsxs(Block_default, {
 			align: "flex-start",
-			className: cx$1(styles.card, className),
+			className: cx(styles.card, className),
 			clickable: true,
 			variant,
 			...rest,
@@ -98,7 +96,7 @@ const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, clas
 					gap: "0.75em",
 					horizontal: true,
 					children: [!image && icon && /* @__PURE__ */ jsx(Icon_default, {
-						className: styles.icon,
+						className: cx(styles.icon, "mdx-card-icon"),
 						icon,
 						size: { size: "1.5em" },
 						...iconProps

package/es/mdx/Cards/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["cx","Card: FC<CardProps>","A","Block","Img","Flexbox","Tag","Icon"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles } from 'antd-style';\nimport { FC } from 'react';\n\nimport A from '@/A';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\nimport Tag, { type TagProps } from '@/Tag';\n\nconst useStyles = createStyles(({ css, cx, token }) => {\n  const icon = cx(css`\n    margin-block: 0.1em;\n    opacity: 0.5;\n    transition: opacity 0.2s ${token.motionEaseInOut};\n  `);\n\n  return {\n    card: css`\n      --lobe-markdown-header-multiple: 0.2;\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      height: 100%;\n      color: ${token.colorText};\n\n      h3,\n      p {\n        margin-block: 0 !important;\n      }\n\n      p {\n        color: ${token.colorTextDescription};\n        transition: color 0.2s ${token.motionEaseInOut};\n      }\n\n      &:hover {\n        p {\n          color: ${token.colorTextSecondary};\n        }\n\n        .${icon} {\n          opacity: 1;\n        }\n      }\n    `,\n    content: css`\n      width: 100%;\n      padding: 1.4em;\n    `,\n    icon,\n  };\n});\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  const { cx, styles } = useStyles();\n\n  return (\n    <A href={href}>\n      <Block\n        align={'flex-start'}\n        className={cx(styles.card, className)}\n        clickable\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            className={styles.content}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          align={desc ? 'flex-start' : 'center'}\n          className={styles.content}\n          gap={'0.75em'}\n          horizontal\n        >\n          {!image && icon && (\n            <Icon className={styles.icon} icon={icon} size={{ size: '1.5em' }} {...iconProps} />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAY,cAAc,EAAE,YAAK,UAAI,YAAY;CACrD,MAAM,OAAOA,KAAG,KAAG;;;+BAGU,MAAM,gBAAgB;IACjD;AAEF,QAAO;EACL,MAAM,KAAG;;;;;;eAME,MAAM,UAAU;;;;;;;;iBAQd,MAAM,qBAAqB;iCACX,MAAM,gBAAgB;;;;;mBAKpC,MAAM,mBAAmB;;;WAGjC,KAAK;;;;;EAKZ,SAAS,KAAG;;;;EAIZ;EACD;EACD;AAaF,MAAMC,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,MAAM,EAAE,UAAI,WAAW,WAAW;AAElC,QACE,oBAACC;EAAQ;YACP,qBAACC;GACC,OAAO;GACP,WAAWH,KAAG,OAAO,MAAM,UAAU;GACrC;GACS;GACT,GAAI;;IAEH,SACC,oBAACI;KACC,KAAK;KACL,QAAQ;KACR,KAAK;KACL,OAAO;MAAE,QAAQ;MAAQ,OAAO;MAAQ;KACxC,OAAO;MACP;IAEH,OACC,oBAACC;KACC,OAAO;KACP,WAAW,OAAO;KAClB,OAAO;MAAE,eAAe;MAAS,YAAY;MAAS;eAEtD,oBAACC;MACC,OAAO;MACP,OAAO;OACL,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;OAChB;gBAEA;OACG;MACE;IAEZ,qBAACD;KACC,OAAO,OAAO,eAAe;KAC7B,WAAW,OAAO;KAClB,KAAK;KACL;gBAEC,CAAC,SAAS,QACT,oBAACE;MAAK,WAAW,OAAO;MAAY;MAAM,MAAM,EAAE,MAAM,SAAS;MAAE,GAAI;OAAa,EAEtF,qBAACF;MAAQ,KAAK;iBACZ,oBAAC,kBAAI,QAAW,EACf,QAAQ,oBAAC,iBAAG,OAAS;OACd;MACF;;IACJ;GACN;;AAIR,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"Card.mjs","names":["cssVar","Card: FC<CardProps>","A","Block","Img","Flexbox","Tag","Icon"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { FC } from 'react';\n\nimport A from '@/A';\nimport Block, { type BlockProps } from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\nimport Img from '@/Img';\nimport Tag, { type TagProps } from '@/Tag';\n\nconst styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    card: css`\n      --lobe-markdown-header-multiple: 0.2;\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n      height: 100%;\n      color: ${cssVar.colorText};\n\n      h3,\n      p {\n        margin-block: 0 !important;\n      }\n\n      p {\n        color: ${cssVar.colorTextDescription};\n        transition: color 0.2s ${cssVar.motionEaseInOut};\n      }\n\n      &:hover {\n        p {\n          color: ${cssVar.colorTextSecondary};\n        }\n\n        .mdx-card-icon {\n          opacity: 1;\n        }\n      }\n    `,\n    content: css`\n      width: 100%;\n      padding: 1.4em;\n    `,\n    icon: css`\n      margin-block: 0.1em;\n      opacity: 0.5;\n      transition: opacity 0.2s ${cssVar.motionEaseInOut};\n    `,\n  };\n});\n\nexport interface CardProps extends Omit<BlockProps, 'children'> {\n  desc?: string;\n  href?: string;\n  icon?: IconProps['icon'];\n  iconProps?: Omit<IconProps, 'icon'>;\n  image?: string;\n  tag?: string;\n  tagColor?: TagProps['color'];\n  title: string;\n}\n\nconst Card: FC<CardProps> = ({\n  tag,\n  tagColor = 'blue',\n  icon,\n  title,\n  desc,\n  href,\n  iconProps,\n  className,\n  image,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <A href={href}>\n      <Block\n        align={'flex-start'}\n        className={cx(styles.card, className)}\n        clickable\n        variant={variant}\n        {...rest}\n      >\n        {image && (\n          <Img\n            alt={title}\n            height={100}\n            src={image}\n            style={{ height: 'auto', width: '100%' }}\n            width={250}\n          />\n        )}\n        {tag && (\n          <Flexbox\n            align={'flex-start'}\n            className={styles.content}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n          >\n            <Tag\n              color={tagColor}\n              style={{\n                borderRadius: '1em',\n                fontSize: '0.8em',\n                fontWeight: 500,\n                paddingBlock: '0.1em',\n                paddingInline: '0.6em',\n              }}\n            >\n              {tag}\n            </Tag>\n          </Flexbox>\n        )}\n        <Flexbox\n          align={desc ? 'flex-start' : 'center'}\n          className={styles.content}\n          gap={'0.75em'}\n          horizontal\n        >\n          {!image && icon && (\n            <Icon\n              className={cx(styles.icon, 'mdx-card-icon')}\n              icon={icon}\n              size={{ size: '1.5em' }}\n              {...iconProps}\n            />\n          )}\n          <Flexbox gap={'0.2em'}>\n            <h3>{title}</h3>\n            {desc && <p>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AACrD,QAAO;EACL,MAAM,KAAG;;;;;;eAMEA,SAAO,UAAU;;;;;;;;iBAQfA,SAAO,qBAAqB;iCACZA,SAAO,gBAAgB;;;;;mBAKrCA,SAAO,mBAAmB;;;;;;;;EAQzC,SAAS,KAAG;;;;EAIZ,MAAM,KAAG;;;iCAGoBA,SAAO,gBAAgB;;EAErD;EACD;AAaF,MAAMC,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;AACJ,QACE,oBAACC;EAAQ;YACP,qBAACC;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,UAAU;GACrC;GACS;GACT,GAAI;;IAEH,SACC,oBAACC;KACC,KAAK;KACL,QAAQ;KACR,KAAK;KACL,OAAO;MAAE,QAAQ;MAAQ,OAAO;MAAQ;KACxC,OAAO;MACP;IAEH,OACC,oBAACC;KACC,OAAO;KACP,WAAW,OAAO;KAClB,OAAO;MAAE,eAAe;MAAS,YAAY;MAAS;eAEtD,oBAACC;MACC,OAAO;MACP,OAAO;OACL,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;OAChB;gBAEA;OACG;MACE;IAEZ,qBAACD;KACC,OAAO,OAAO,eAAe;KAC7B,WAAW,OAAO;KAClB,KAAK;KACL;gBAEC,CAAC,SAAS,QACT,oBAACE;MACC,WAAW,GAAG,OAAO,MAAM,gBAAgB;MACrC;MACN,MAAM,EAAE,MAAM,SAAS;MACvB,GAAI;OACJ,EAEJ,qBAACF;MAAQ,KAAK;iBACZ,oBAAC,kBAAI,QAAW,EACf,QAAQ,oBAAC,iBAAG,OAAS;OACd;MACF;;IACJ;GACN;;AAIR,KAAK,cAAc;AAEnB,mBAAe"}

package/es/mdx/Cards/index.mjs

@@ -1,12 +1,12 @@
 'use client';
 
 import Grid_default from "../../Grid/Grid.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/mdx/Cards/index.tsx
 const Cards = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(Grid_default, {
 		className: cx(styles.container, className),
 		maxItemWidth,

package/es/mdx/Cards/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Cards: FC<CardsProps>","Grid"],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\n\nimport { useStyles } from './style';\n\nexport type CardsProps = GridProps;\n\nconst Cards: FC<CardsProps> = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return (\n    <Grid\n      className={cx(styles.container, className)}\n      maxItemWidth={maxItemWidth}\n      rows={rows}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nCards.displayName = 'MdxCards';\n\nexport default Cards;\n"],"mappings":";;;;;;;AAUA,MAAMA,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;CAChG,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACR;EACN,GAAI;EAEH;GACI;;AAIX,MAAM,cAAc;AAEpB,oBAAe"}
+{"version":3,"file":"index.mjs","names":["Cards: FC<CardsProps>","Grid"],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\n\nimport { styles } from './style';\n\nexport type CardsProps = GridProps;\n\nconst Cards: FC<CardsProps> = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {\n  return (\n    <Grid\n      className={cx(styles.container, className)}\n      maxItemWidth={maxItemWidth}\n      rows={rows}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nCards.displayName = 'MdxCards';\n\nexport default Cards;\n"],"mappings":";;;;;;;;AAWA,MAAMA,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;AAChG,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC5B;EACR;EACN,GAAI;EAEH;GACI;;AAIX,MAAM,cAAc;AAEpB,oBAAe"}

package/es/mdx/Cards/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mdx/Cards/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return { container: css$1`
       margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
 
@@ -12,5 +12,5 @@ const useStyles = createStyles(({ css: css$1 }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/mdx/Cards/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Cards/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n      > div {\n        margin: 0 !important;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO,EACL,WAAW,KAAG;;;;;;OAOf;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/Cards/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n      > div {\n        margin: 0 !important;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,WAAW,KAAG;;;;;;OAOf;EACD"}

package/es/mdx/FileTree/Folder.mjs

@@ -2,29 +2,14 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon_default from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createStyles } from "antd-style";
 import { FolderIcon, FolderOpen } from "lucide-react";
 
 //#region src/mdx/FileTree/Folder.tsx
-const useStyles = createStyles(({ css: css$1, token }) => {
-	return {
-		folder: css$1`
-      cursor: pointer;
-
-      &:hover {
-        color: ${token.colorText};
-      }
-    `,
-		folderChildren: css$1`
-      padding-inline-start: 1em;
-    `
-	};
-});
 const Folder = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {
 	const [open, setOpen] = useState(defaultOpen);
-	const { styles } = useStyles();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		...rest,
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {

package/es/mdx/FileTree/Folder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Folder.mjs","names":["Folder: FC<FolderProps>","Flexbox","Icon"],"sources":["../../../src/mdx/FileTree/Folder.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles } from 'antd-style';\nimport { FolderIcon, FolderOpen } from 'lucide-react';\nimport { FC, useState } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\n\nconst useStyles = createStyles(({ css, token }) => {\n  return {\n    folder: css`\n      cursor: pointer;\n\n      &:hover {\n        color: ${token.colorText};\n      }\n    `,\n    folderChildren: css`\n      padding-inline-start: 1em;\n    `,\n  };\n});\n\nexport interface FolderProps extends FlexboxProps {\n  defaultOpen?: boolean;\n  icon?: IconProps['icon'];\n  name: string;\n}\n\nconst Folder: FC<FolderProps> = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const { styles } = useStyles();\n  return (\n    <Flexbox {...rest}>\n      <Flexbox\n        align={'center'}\n        className={styles.folder}\n        gap={4}\n        horizontal\n        onClick={() => setOpen(!open)}\n      >\n        <Icon icon={open ? FolderOpen : icon} />\n        <span>{name}</span>\n      </Flexbox>\n      {open && <Flexbox className={styles.folderChildren}>{children}</Flexbox>}\n    </Flexbox>\n  );\n};\n\nFolder.displayName = 'MdxFolder';\n\nexport default Folder;\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,cAAc,EAAE,YAAK,YAAY;AACjD,QAAO;EACL,QAAQ,KAAG;;;;iBAIE,MAAM,UAAU;;;EAG7B,gBAAgB,KAAG;;;EAGpB;EACD;AAQF,MAAMA,UAA2B,EAAE,MAAM,aAAa,OAAO,YAAY,UAAU,GAAG,WAAW;CAC/F,MAAM,CAAC,MAAM,WAAW,SAAS,YAAY;CAC7C,MAAM,EAAE,WAAW,WAAW;AAC9B,QACE,qBAACC;EAAQ,GAAI;aACX,qBAACA;GACC,OAAO;GACP,WAAW,OAAO;GAClB,KAAK;GACL;GACA,eAAe,QAAQ,CAAC,KAAK;cAE7B,oBAACC,gBAAK,MAAM,OAAO,aAAa,OAAQ,EACxC,oBAAC,oBAAM,OAAY;IACX,EACT,QAAQ,oBAACD;GAAQ,WAAW,OAAO;GAAiB;IAAmB;GAChE;;AAId,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Folder.mjs","names":["Folder: FC<FolderProps>","Flexbox","Icon"],"sources":["../../../src/mdx/FileTree/Folder.tsx"],"sourcesContent":["'use client';\n\nimport { FolderIcon, FolderOpen } from 'lucide-react';\nimport { FC, useState } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { styles } from './style';\n\nexport interface FolderProps extends FlexboxProps {\n  defaultOpen?: boolean;\n  icon?: IconProps['icon'];\n  name: string;\n}\n\nconst Folder: FC<FolderProps> = ({ name, defaultOpen, icon = FolderIcon, children, ...rest }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  return (\n    <Flexbox {...rest}>\n      <Flexbox\n        align={'center'}\n        className={styles.folder}\n        gap={4}\n        horizontal\n        onClick={() => setOpen(!open)}\n      >\n        <Icon icon={open ? FolderOpen : icon} />\n        <span>{name}</span>\n      </Flexbox>\n      {open && <Flexbox className={styles.folderChildren}>{children}</Flexbox>}\n    </Flexbox>\n  );\n};\n\nFolder.displayName = 'MdxFolder';\n\nexport default Folder;\n"],"mappings":";;;;;;;;;;AAgBA,MAAMA,UAA2B,EAAE,MAAM,aAAa,OAAO,YAAY,UAAU,GAAG,WAAW;CAC/F,MAAM,CAAC,MAAM,WAAW,SAAS,YAAY;AAC7C,QACE,qBAACC;EAAQ,GAAI;aACX,qBAACA;GACC,OAAO;GACP,WAAW,OAAO;GAClB,KAAK;GACL;GACA,eAAe,QAAQ,CAAC,KAAK;cAE7B,oBAACC,gBAAK,MAAM,OAAO,aAAa,OAAQ,EACxC,oBAAC,oBAAM,OAAY;IACX,EACT,QAAQ,oBAACD;GAAQ,WAAW,OAAO;GAAiB;IAAmB;GAChE;;AAId,OAAO,cAAc;AAErB,qBAAe"}

package/es/mdx/FileTree/index.mjs

@@ -1,11 +1,11 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/mdx/FileTree/index.tsx
 const FileTree = ({ children, className, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(styles.container, className),
 		...rest,

package/es/mdx/FileTree/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["FileTree: FC<FileTreeProps>"],"sources":["../../../src/mdx/FileTree/index.tsx"],"sourcesContent":["'use client';\n\nimport { FC } from 'react';\n\nimport { DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type FileTreeProps = DivProps;\n\nconst FileTree: FC<FileTreeProps> = ({ children, className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return (\n    <div className={cx(styles.container, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nFileTree.displayName = 'MdxFileTree';\n\nexport default FileTree;\n"],"mappings":";;;;;;AAUA,MAAMA,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;CACxE,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;EAClD;GACG;;AAIV,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"index.mjs","names":["FileTree: FC<FileTreeProps>"],"sources":["../../../src/mdx/FileTree/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { FC } from 'react';\n\nimport { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport type FileTreeProps = DivProps;\n\nconst FileTree: FC<FileTreeProps> = ({ children, className, ...rest }) => {\n  return (\n    <div className={cx(styles.container, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nFileTree.displayName = 'MdxFileTree';\n\nexport default FileTree;\n"],"mappings":";;;;;;;AAWA,MAAMA,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;AACxE,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;EAClD;GACG;;AAIV,SAAS,cAAc;AAEvB,uBAAe"}

package/es/mdx/FileTree/style.mjs

@@ -1,19 +1,31 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mdx/FileTree/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
-	return { container: css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	return {
+		container: css$1`
       margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
       padding-block: 0.75em;
       padding-inline: 1em;
+      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
 
-      color: ${token.colorTextSecondary};
+      color: ${cssVar$1.colorTextSecondary};
 
-      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
       box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);
-    ` };
+    `,
+		folder: css$1`
+      cursor: pointer;
+
+      &:hover {
+        color: ${cssVar$1.colorText};
+      }
+    `,
+		folderChildren: css$1`
+      padding-inline-start: 1em;
+    `
+	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/mdx/FileTree/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mdx/FileTree/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\n\n      color: ${token.colorTextSecondary};\n\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO,EACL,WAAW,KAAG;;;;;eAKH,MAAM,mBAAmB;;;;OAKrC;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/mdx/FileTree/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    container: css`\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      color: ${cssVar.colorTextSecondary};\n\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    `,\n    folder: css`\n      cursor: pointer;\n\n      &:hover {\n        color: ${cssVar.colorText};\n      }\n    `,\n    folderChildren: css`\n      padding-inline-start: 1em;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,WAAW,KAAG;;;;;;eAMHA,SAAO,mBAAmB;;;;EAIrC,QAAQ,KAAG;;;;iBAIEA,SAAO,UAAU;;;EAG9B,gBAAgB,KAAG;;;EAGpB;EACD"}