@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/index.mjs

@@ -18,7 +18,11 @@ import { KeyMapEnum } from "./Hotkey/const.mjs";
 import FlexBasic_default from "./Flex/FlexBasic.mjs";
 import Center from "./Flex/Center.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./styles/theme/generateColorPalette.mjs";
+import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
+import { isCustomPrimaryColor } from "./styles/theme/customPrimary.mjs";
 import { createLobeToken } from "./styles/theme/createLobeToken.mjs";
+import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./styles/css.mjs";
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
 import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./styles/theme/scope.mjs";
 import { combineKeys } from "./Hotkey/utils.mjs";
 import Hotkey from "./Hotkey/Hotkey.mjs";
@@ -79,11 +83,8 @@ import { PatchDiff } from "./CodeDiff/PatchDiff.mjs";
 import { highlighterThemes } from "./Highlighter/const.mjs";
 import SyntaxHighlighter from "./Highlighter/SyntaxHighlighter/index.mjs";
 import CodeEditor from "./CodeEditor/CodeEditor.mjs";
-import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./styles/css.mjs";
 import { createGlobalStyle } from "./styles/createGlobalStyle.mjs";
-import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./styles/customTheme.mjs";
 import { staticStylish } from "./styles/theme/customStylishStatic.mjs";
-import { getGlobalCss, getThemeCss } from "./styles/theme/themeCss.mjs";
 import Collapsible from "./Collapsible/Collapsible.mjs";
 import { PopoverArrowIcon } from "./Popover/ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./Popover/PopoverPortal.mjs";
@@ -95,6 +96,8 @@ import PopoverGroup from "./Popover/PopoverGroup.mjs";
 import { sliderStyles } from "./Slider/style.mjs";
 import Slider from "./Slider/Slider.mjs";
 import SliderWithInput from "./Slider/SliderWithInput.mjs";
+import { SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue } from "./Select/atoms.mjs";
+import Select from "./Select/Select.mjs";
 import ColorPicker from "./ColorPicker/ColorPicker.mjs";
 import ColorSwatches from "./ColorSwatches/ColorSwatches.mjs";
 import { closeContextMenu, setContextMenuInterceptor, showContextMenu, updateContextMenuItems } from "./ContextMenu/store.mjs";
@@ -102,8 +105,12 @@ import { ContextMenuHost } from "./ContextMenu/ContextMenuHost.mjs";
 import { ContextMenuTrigger } from "./ContextMenu/ContextMenuTrigger.mjs";
 import { copyToClipboard } from "./utils/copyToClipboard.mjs";
 import CopyButton from "./CopyButton/CopyButton.mjs";
+import { createPickerLocale, datePickerLocaleEnUS, datePickerLocaleZhCN } from "./DatePicker/locale.mjs";
+import generatePicker from "./DatePicker/generatePicker.mjs";
 import DatePicker from "./DatePicker/DatePicker.mjs";
 import DateRangePicker from "./DatePicker/DateRangePicker.mjs";
+import DayjsDatePicker from "./DatePicker/DayjsDatePicker.mjs";
+import DayjsDateRangePicker from "./DatePicker/DayjsDateRangePicker.mjs";
 import Descriptions from "./Descriptions/Descriptions.mjs";
 import Divider from "./Divider/Divider.mjs";
 import DownloadButton from "./DownloadButton/DownloadButton.mjs";
@@ -147,8 +154,6 @@ import Grid from "./Grid/Grid.mjs";
 import GroupAvatar from "./GroupAvatar/GroupAvatar.mjs";
 import GuideCard from "./GuideCard/GuideCard.mjs";
 import Header from "./Header/Header.mjs";
-import { SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue } from "./Select/atoms.mjs";
-import Select from "./Select/Select.mjs";
 import { Highlighter } from "./Highlighter/Highlighter.mjs";
 import { preprocessMarkdownContent } from "./hooks/useMarkdown/utils.mjs";
 import HotkeyInput from "./HotkeyInput/HotkeyInput.mjs";
@@ -180,6 +185,7 @@ import Mermaid from "./Mermaid/Mermaid.mjs";
 import Snippet from "./Snippet/Snippet.mjs";
 import ScrollShadow from "./ScrollShadow/ScrollShadow.mjs";
 import SearchResultCards from "./Markdown/components/SearchResultCards/index.mjs";
+import { useVideo, useVideoPlayer, useVideoState } from "./Video/useVideo.mjs";
 import Video from "./Video/index.mjs";
 import { rehypeCustomFootnotes } from "./Markdown/plugins/rehypeCustomFootnotes.mjs";
 import { rehypeKatexDir } from "./Markdown/plugins/rehypeKatexDir.mjs";
@@ -206,12 +212,14 @@ import SortableList from "./SortableList/SortableList.mjs";
 import { formatStatisticValue } from "./Statistic/formatValue.mjs";
 import Statistic from "./Statistic/Statistic.mjs";
 import Steps from "./Steps/Steps.mjs";
-import Table from "./Table/Table.mjs";
-import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, toggleGroupStyles } from "./ToggleGroup/atoms.mjs";
-import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
+import { TableCell, TableExpandedRow, TableHeaderCell, TableRow } from "./Table/atoms/cells.mjs";
+import { TableBody, TableColGroup, TableContainer, TableElement, TableFooter, TableHeader, TableRoot, TableScroll, TableSummaryFoot, TableTitle } from "./Table/atoms/layout.mjs";
 import { styles as styles$3 } from "./Tree/style.mjs";
 import { conductCheck, flattenVisible, getAllKeys } from "./Tree/utils.mjs";
 import Tree from "./Tree/Tree.mjs";
+import Table from "./Table/Table.mjs";
+import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, toggleGroupStyles } from "./ToggleGroup/atoms.mjs";
+import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
 import { rehypeStreamAnimated } from "@lobehub/streamdown";
 import { ErrorBoundary } from "react-error-boundary";
-export { A, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, ActionIconGroup, Alert, Anchor, AutoComplete, Avatar, AvatarGroup, Badge, Block, Breadcrumb, Burger, Button, CLASSNAMES, Carousel, Center, Checkbox_default as Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapsible, ColorPicker, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, Descriptions, Divider, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle, DraggableSideNav, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FloatingPanel, FloatingSheet, FluentEmoji, FocusScope, FontLoader, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOTP, InputPassword_default as InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, LobeThemeScript, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Mermaid, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, MotionComponent, MotionProvider, Pagination, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, Progress, QRCode, Radio, RadioGroup, Rate, Result, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Slider, SliderWithInput, Snippet, SortableList, Spin, SplitButton, Statistic, Steps, Switch, SwitchIcon, SwitchRoot, SwitchThumb, SyntaxHighlighter, SyntaxMermaid, Table, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea_default as TextArea, ThemeScope, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, Tree, Typography, Upload, UploadDragger, Video, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createStaticStyles, css, cssVar, cx, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, getActiveScopeId, getAllKeys, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation };
+export { A, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, ActionIconGroup, Alert, Anchor, AutoComplete, Avatar, AvatarGroup, Badge, Block, Breadcrumb, Burger, Button, CLASSNAMES, Carousel, Center, Checkbox_default as Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapsible, ColorPicker, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, DayjsDatePicker, DayjsDateRangePicker, Descriptions, Divider, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle, DraggableSideNav, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FloatingPanel, FloatingSheet, FluentEmoji, FocusScope, FontLoader, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input_default as Input, InputNumber_default as InputNumber, InputOTP, InputPassword_default as InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, LobeThemeScript, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Mermaid, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, MotionComponent, MotionProvider, Pagination, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, Progress, QRCode, Radio, RadioGroup, Rate, Result, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Slider, SliderWithInput, Snippet, SortableList, Spin, SplitButton, Statistic, Steps, Switch, SwitchIcon, SwitchRoot, SwitchThumb, SyntaxHighlighter, SyntaxMermaid, Table, TableBody, TableCell, TableColGroup, TableContainer, TableElement, TableExpandedRow, TableFooter, TableHeader, TableHeaderCell, TableRoot, TableRow, TableScroll, TableSummaryFoot, TableTitle, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea_default as TextArea, ThemeScope, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, Tree, Typography, Upload, UploadDragger, Video, accordionStyles, actionIconStyles, alertStyles, styles as autoCompleteStyles, backdropTransition, buttonPaddingInline, buttonStyles, checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, combineKeys, conductCheck, confirmModal, controlHeight, copyToClipboard, createGlobalStyle, createLobeToken, createModal, createModalSystem, createPickerLocale, createStaticStyles, css, cssVar, cx, datePickerLocaleEnUS, datePickerLocaleZhCN, drawerBackdropTransition, extractStaticStyle, findCustomThemeName, flattenVisible, focusScopeItem, styles$1 as focusScopeStyles, formatStatisticValue, genCdnUrl, generateColorNeutralPalette, generateColorPalette, generatePicker, getActiveScopeId, getAllKeys, getCustomPrimaryCss, getDrawerMotionConfig, getFloatingCollisionPadding, getGlobalCss, getItemKey, getItemLabel, getLastFocusedItem, getThemeCss, hasAnyIcon, hasCheckboxAndIcon, highlighterThemes, containsScript as htmlPreviewContainsScript, injectGlobal, inputClassNames as inputStyles, rootVariants as inputVariants, installGlobalFocusRing, isCustomPrimaryColor, isFullHtmlDocument, isHtmlContentClosed, keyframes, staticStylish as lobeStaticStylish, styles$2 as menuSharedStyles, mermaidThemes, modalMotionConfig, neutralColors, neutralColorsSwatches, notifyScopeItemFocus, parseTrigger, placementMap, preprocessMarkdownContent, presetColors, presetSystemColors, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, radioStyles, registerScope, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, renderIcon, responsive, setActiveScope, setContextMenuInterceptor, setFloatingCollisionPadding, setLastFocusedItem, setLobeTheme, showContextMenu, sliderStyles, stopPropagation, switchStyles, tabsStyles, groupStyles as textGroupStyles, textStyles, variants as textVariants, toFloatingUIPlacement, toast, toggleGroupStyles, styles$3 as treeStyles, updateContextMenuItems, useAccordionContext, useActiveScopeId, useAppElement, useCdnFn, useDirection, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFocusScopeActive, useFocusScopeId, useFormContext, useImagePreview, useModalActions, useModalContext, useModalOpen, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useResponsive, useScopeArrowNav, useScopeSwitcher, useSwitchContext, useTabsContext, useTheme, useThemeMode, useToast, useTranslation, useVideo, useVideoPlayer, useVideoState };

package/es/internal/menu/itemInterface.d.mts

@@ -67,4 +67,5 @@ export interface RcMenuDividerType extends Omit<ItemSharedProps, 'ref'> {
 }
 export type RcItemType = RcSubMenuType | RcMenuItemType | RcMenuItemGroupType | RcMenuDividerType | null;
 //#endregion
+export {};
 //# sourceMappingURL=itemInterface.d.mts.map

package/es/internal/menu/renderUtils.d.mts

@@ -33,4 +33,5 @@ export declare const renderIcon: (icon: MenuItemType["icon"], size?: IconSize) =
 export declare const hasAnyIcon: (items: BaseMenuItemType[], recursive?: boolean) => boolean;
 export declare const hasCheckboxAndIcon: (items: BaseMenuItemType[]) => boolean;
 //#endregion
+export {};
 //# sourceMappingURL=renderUtils.d.mts.map

package/es/internal/overflow/OverflowList.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/internal/overflow/OverflowList.tsx
+const fitCount = (widths, restWidth, containerWidth) => {
+	if (containerWidth <= 0) return 0;
+	if (widths.reduce((sum, width) => sum + width, 0) <= containerWidth) return widths.length;
+	let used = restWidth;
+	let count = 0;
+	for (const width of widths) {
+		if (used + width > containerWidth) break;
+		used += width;
+		count += 1;
+	}
+	return count;
+};
+const hiddenStyle = {
+	insetBlockStart: 0,
+	insetInlineStart: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	visibility: "hidden"
+};
+const OverflowList = ({ classNames, data, itemKey, maxCount, renderItem, renderRest }) => {
+	const responsive = maxCount === "responsive";
+	const rootRef = useRef(null);
+	const [fitted, setFitted] = useState(data.length);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!responsive || !root) return;
+		const measure = () => {
+			const items = [...root.querySelectorAll(":scope > [data-overflow-item]")];
+			const rest = root.querySelector(":scope > [data-overflow-rest]");
+			setFitted(fitCount(items.map((item) => item.getBoundingClientRect().width), rest?.getBoundingClientRect().width ?? 0, root.clientWidth));
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [responsive, data]);
+	const count = responsive ? Math.min(fitted, data.length) : typeof maxCount === "number" ? Math.min(Math.max(maxCount, 0), data.length) : data.length;
+	const rendered = responsive ? data : data.slice(0, count);
+	const omitted = data.slice(count);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames?.root,
+		ref: rootRef,
+		style: { position: "relative" },
+		children: [rendered.map((item, index) => {
+			const hidden = index >= count;
+			return /* @__PURE__ */ jsx("div", {
+				"aria-hidden": hidden || void 0,
+				className: classNames?.item,
+				"data-overflow-item": "",
+				style: hidden ? hiddenStyle : void 0,
+				children: renderItem(item, index)
+			}, itemKey(item, index));
+		}), (omitted.length > 0 || responsive) && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": omitted.length === 0 || void 0,
+			className: clsx$1(classNames?.item, classNames?.rest),
+			"data-overflow-rest": "",
+			style: omitted.length === 0 ? hiddenStyle : void 0,
+			children: renderRest(omitted.length > 0 ? omitted : data)
+		})]
+	});
+};
+//#endregion
+export { OverflowList, fitCount };
+
+//# sourceMappingURL=OverflowList.mjs.map

package/es/internal/overflow/OverflowList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowList.mjs","names":["clsx"],"sources":["../../../src/internal/overflow/OverflowList.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type Key, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nexport const fitCount = (widths: number[], restWidth: number, containerWidth: number) => {\n  if (containerWidth <= 0) return 0;\n  const total = widths.reduce((sum, width) => sum + width, 0);\n  if (total <= containerWidth) return widths.length;\n  let used = restWidth;\n  let count = 0;\n  for (const width of widths) {\n    if (used + width > containerWidth) break;\n    used += width;\n    count += 1;\n  }\n  return count;\n};\n\nexport interface OverflowListProps<T> {\n  classNames?: { item?: string; rest?: string; root?: string };\n  data: T[];\n  itemKey: (item: T, index: number) => Key;\n  maxCount?: number | 'responsive';\n  renderItem: (item: T, index: number) => ReactNode;\n  renderRest: (omitted: T[]) => ReactNode;\n}\n\nconst hiddenStyle = {\n  insetBlockStart: 0,\n  insetInlineStart: 0,\n  pointerEvents: 'none',\n  position: 'absolute',\n  visibility: 'hidden',\n} as const;\n\nexport const OverflowList = <T,>({\n  classNames,\n  data,\n  itemKey,\n  maxCount,\n  renderItem,\n  renderRest,\n}: OverflowListProps<T>) => {\n  const responsive = maxCount === 'responsive';\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [fitted, setFitted] = useState(data.length);\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!responsive || !root) return;\n    const measure = () => {\n      const items = [...root.querySelectorAll<HTMLElement>(':scope > [data-overflow-item]')];\n      const rest = root.querySelector<HTMLElement>(':scope > [data-overflow-rest]');\n      setFitted(\n        fitCount(\n          items.map((item) => item.getBoundingClientRect().width),\n          rest?.getBoundingClientRect().width ?? 0,\n          root.clientWidth,\n        ),\n      );\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [responsive, data]);\n\n  const count = responsive\n    ? Math.min(fitted, data.length)\n    : typeof maxCount === 'number'\n      ? Math.min(Math.max(maxCount, 0), data.length)\n      : data.length;\n  const rendered = responsive ? data : data.slice(0, count);\n  const omitted = data.slice(count);\n\n  return (\n    <div className={classNames?.root} ref={rootRef} style={{ position: 'relative' }}>\n      {rendered.map((item, index) => {\n        const hidden = index >= count;\n        return (\n          <div\n            aria-hidden={hidden || undefined}\n            className={classNames?.item}\n            data-overflow-item=\"\"\n            key={itemKey(item, index)}\n            style={hidden ? hiddenStyle : undefined}\n          >\n            {renderItem(item, index)}\n          </div>\n        );\n      })}\n      {(omitted.length > 0 || responsive) && (\n        <div\n          aria-hidden={omitted.length === 0 || undefined}\n          className={clsx(classNames?.item, classNames?.rest)}\n          data-overflow-rest=\"\"\n          style={omitted.length === 0 ? hiddenStyle : undefined}\n        >\n          {renderRest(omitted.length > 0 ? omitted : data)}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,MAAa,YAAY,QAAkB,WAAmB,mBAA2B;CACvF,IAAI,kBAAkB,GAAG,OAAO;CAEhC,IADc,OAAO,QAAQ,KAAK,UAAU,MAAM,OAAO,CACjD,KAAK,gBAAgB,OAAO,OAAO;CAC3C,IAAI,OAAO;CACX,IAAI,QAAQ;CACZ,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,OAAO,QAAQ,gBAAgB;EACnC,QAAQ;EACR,SAAS;CACX;CACA,OAAO;AACT;AAWA,MAAM,cAAc;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,UAAU;CACV,YAAY;AACd;AAEA,MAAa,gBAAoB,EAC/B,YACA,MACA,SACA,UACA,YACA,iBAC0B;CAC1B,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM;CAEhD,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,cAAc,CAAC,MAAM;EAC1B,MAAM,gBAAgB;GACpB,MAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,+BAA+B,CAAC;GACrF,MAAM,OAAO,KAAK,cAA2B,+BAA+B;GAC5E,UACE,SACE,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,KAAK,GACtD,MAAM,sBAAsB,CAAC,CAAC,SAAS,GACvC,KAAK,WACP,CACF;EACF;EACA,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,YAAY,IAAI,CAAC;CAErB,MAAM,QAAQ,aACV,KAAK,IAAI,QAAQ,KAAK,MAAM,IAC5B,OAAO,aAAa,WAClB,KAAK,IAAI,KAAK,IAAI,UAAU,CAAC,GAAG,KAAK,MAAM,IAC3C,KAAK;CACX,MAAM,WAAW,aAAa,OAAO,KAAK,MAAM,GAAG,KAAK;CACxD,MAAM,UAAU,KAAK,MAAM,KAAK;CAEhC,OACE,qBAAC,OAAD;EAAK,WAAW,YAAY;EAAM,KAAK;EAAS,OAAO,EAAE,UAAU,WAAW;EAA9E,UAAA,CACG,SAAS,KAAK,MAAM,UAAU;GAC7B,MAAM,SAAS,SAAS;GACxB,OACE,oBAAC,OAAD;IACE,eAAa,UAAU,KAAA;IACvB,WAAW,YAAY;IACvB,sBAAmB;IAEnB,OAAO,SAAS,cAAc,KAAA;IAE7B,UAAA,WAAW,MAAM,KAAK;GACpB,GAJE,QAAQ,MAAM,KAAK,CAIrB;EAET,CAAC,IACC,QAAQ,SAAS,KAAK,eACtB,oBAAC,OAAD;GACE,eAAa,QAAQ,WAAW,KAAK,KAAA;GACrC,WAAWA,OAAK,YAAY,MAAM,YAAY,IAAI;GAClD,sBAAmB;GACnB,OAAO,QAAQ,WAAW,IAAI,cAAc,KAAA;GAE3C,UAAA,WAAW,QAAQ,SAAS,IAAI,UAAU,IAAI;EAC5C,CAAA,CAEJ;;AAET"}

package/es/internal/virtual/VirtualScrollArea.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { styleProps } from "../../styles/stylex/props.mjs";
+import { useMergeRefs } from "../../utils/mergeRefs.mjs";
 import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewportImpl } from "../../ScrollArea/atoms.mjs";
 import { Children, cloneElement, useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMergeRefs } from "react-merge-refs";
 import { Virtualizer } from "virtua";
 //#region src/internal/virtual/VirtualScrollArea.tsx
 const styles = {

package/es/internal/virtual/VirtualScrollArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/internal/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Children,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewportImpl,\n  type ScrollAreaViewportProps,\n} from '@/ScrollArea/atoms';\nimport { styleProps } from '@/styles/stylex/props';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = stylex.create({\n  root: {\n    marginInline: 'calc(-1 * var(--lobe-virtual-scroll-inset, 0px))',\n    display: 'flex',\n    flexBasis: '0%',\n    flexDirection: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    minHeight: 0,\n  },\n  viewport: {\n    paddingInline: 'var(--lobe-virtual-scroll-inset, 0)',\n    flexBasis: '0%',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'auto',\n    minHeight: 0,\n  },\n});\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewportImpl\n      tabIndex={-1}\n      {...viewportProps}\n      ref={mergedViewportRef}\n      xstyle={styles.viewport}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot\n      data-virtual=\"\"\n      {...rest}\n      className={styleProps(styles.root, className as string).className}\n    >\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAIA,MAAM,oBAAoB;AAgB1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CACxE,MAAM,OAAO,oBAAC,aAAD;EAAuB;EAAuB;EAAa,KAAK;EAAgB,WAAW;EAAa,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAC9K;CACU,CAAA;CACf,MAAM,kBAAkB,oBAAC,wBAAD;EAAwB,UAAU;EAAI,GAAI;EAAe,KAAK;EAAmB,QAAQ,OAAO;CAAW,CAAA;CACnI,OAAO,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,WAAW,OAAO,MAAM,SAAmB,CAAC,CAAC;EAAlG,UAAA,CACF,aAAa,YAAY,iBAAiB;GAC3C,UAAU;GACV,GAAI,YAAY,EACd,QAAQ,gBACV;EACF,CAAC,GACC,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AACpB;AACA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CACL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}
+{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/internal/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Children,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewportImpl,\n  type ScrollAreaViewportProps,\n} from '@/ScrollArea/atoms';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = stylex.create({\n  root: {\n    marginInline: 'calc(-1 * var(--lobe-virtual-scroll-inset, 0px))',\n    display: 'flex',\n    flexBasis: '0%',\n    flexDirection: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    minHeight: 0,\n  },\n  viewport: {\n    paddingInline: 'var(--lobe-virtual-scroll-inset, 0)',\n    flexBasis: '0%',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'auto',\n    minHeight: 0,\n  },\n});\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewportImpl\n      tabIndex={-1}\n      {...viewportProps}\n      ref={mergedViewportRef}\n      xstyle={styles.viewport}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot\n      data-virtual=\"\"\n      {...rest}\n      className={styleProps(styles.root, className as string).className}\n    >\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAIA,MAAM,oBAAoB;AAgB1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CACxE,MAAM,OAAO,oBAAC,aAAD;EAAuB;EAAuB;EAAa,KAAK;EAAgB,WAAW;EAAa,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAC9K;CACU,CAAA;CACf,MAAM,kBAAkB,oBAAC,wBAAD;EAAwB,UAAU;EAAI,GAAI;EAAe,KAAK;EAAmB,QAAQ,OAAO;CAAW,CAAA;CACnI,OAAO,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,WAAW,OAAO,MAAM,SAAmB,CAAC,CAAC;EAAlG,UAAA,CACF,aAAa,YAAY,iBAAiB;GAC3C,UAAU;GACV,GAAI,YAAY,EACd,QAAQ,gBACV;EACF,CAAC,GACC,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AACpB;AACA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CACL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}

package/es/mdx/Callout/index.mjs

@@ -7,7 +7,7 @@ import { useTheme } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from "lucide-react";
 //#region src/mdx/Callout/index.tsx
@@ -59,7 +59,7 @@ const Callout = ({ children, type = "info", className, style, ...rest }) => {
 			size: { size: "1.2em" },
 			style: { marginBlock: "0.25em" }
 		}), /* @__PURE__ */ jsx("div", {
-			...styleProps(styles.content, clsx("lobe-mdx-callout-content", type === "info" && "lobe-mdx-callout-underline")),
+			...styleProps(styles.content, clsx$1("lobe-mdx-callout-content", type === "info" && "lobe-mdx-callout-underline")),
 			children: /* @__PURE__ */ jsx("div", {
 				...stylex.props(styles.inner),
 				children

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\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      horizontal\n      align={'flex-start'}\n      gap={'0.75em'}\n      paddingBlock={'calc(var(--lobe-markdown-margin-multiple) * 1em)'}\n      paddingInline={'1em'}\n      {...styleProps(styles.container, className, {\n        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\n        {...styleProps(\n          styles.content,\n          clsx('lobe-mdx-callout-content', type === 'info' && 'lobe-mdx-callout-underline'),\n        )}\n      >\n        <div {...stylex.props(styles.inner)}>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAA6B,EACjC,UACA,OAAO,QACP,WACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,eAAe;EAChC,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;CACF,IAAI,CAAC,KAAK,CAAC;CAEX,MAAM,EACJ,MACA,OACA,eAJmB,aAAa,SAAS,WAAW;CAMtD,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAc,KAAK;EAAU,cAAc;EAAoD,eAAe;EAAO,GAAI,WAAW,OAAO,WAAW,WAAW;GACjM;GACA,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;EACL,CAAC;EAAG,GAAI;EALD,UAAA,CAMH,oBAAC,MAAD;GAAY;GAAM,MAAM,EACxB,MAAM,QACR;GAAG,OAAO,EACR,aAAa,SACf;EAAI,CAAA,GACF,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,SAAS,KAAK,4BAA4B,SAAS,UAAU,4BAA4B,CAAC;GACnH,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA;EACjD,CAAA,CACE;;AACb;AACA,QAAQ,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox","clsx"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\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      horizontal\n      align={'flex-start'}\n      gap={'0.75em'}\n      paddingBlock={'calc(var(--lobe-markdown-margin-multiple) * 1em)'}\n      paddingInline={'1em'}\n      {...styleProps(styles.container, className, {\n        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\n        {...styleProps(\n          styles.content,\n          clsx('lobe-mdx-callout-content', type === 'info' && 'lobe-mdx-callout-underline'),\n        )}\n      >\n        <div {...stylex.props(styles.inner)}>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAA6B,EACjC,UACA,OAAO,QACP,WACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,eAAe;EAChC,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;EACA,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;EACR;CACF,IAAI,CAAC,KAAK,CAAC;CAEX,MAAM,EACJ,MACA,OACA,eAJmB,aAAa,SAAS,WAAW;CAMtD,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAc,KAAK;EAAU,cAAc;EAAoD,eAAe;EAAO,GAAI,WAAW,OAAO,WAAW,WAAW;GACjM;GACA,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;EACL,CAAC;EAAG,GAAI;EALD,UAAA,CAMH,oBAAC,MAAD;GAAY;GAAM,MAAM,EACxB,MAAM,QACR;GAAG,OAAO,EACR,aAAa,SACf;EAAI,CAAA,GACF,oBAAC,OAAD;GAAK,GAAI,WAAW,OAAO,SAASC,OAAK,4BAA4B,SAAS,UAAU,4BAA4B,CAAC;GACnH,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA;EACjD,CAAA,CACE;;AACb;AACA,QAAQ,cAAc"}

package/es/mdx/Cards/Card.mjs

@@ -9,7 +9,7 @@ import Tag from "../../Tag/Tag.mjs";
 import { cardMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/mdx/Cards/Card.tsx
 const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, className, image, variant = "filled", ...rest }) => {
@@ -19,7 +19,7 @@ const Card = ({ tag, tagColor = "blue", icon, title, desc, href, iconProps, clas
 			clickable: true,
 			align: "flex-start",
 			height: "100%",
-			...styleProps([styles.card, cardMarker], clsx("lobe-mdx-card", className)),
+			...styleProps([styles.card, cardMarker], clsx$1("lobe-mdx-card", className)),
 			variant,
 			...rest,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { 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 { styleProps } from '@/styles/stylex/props';\nimport Tag, { type TagProps } from '@/Tag';\n\nimport { cardMarker } from './marker.stylex';\nimport { styles } from './style';\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        clickable\n        align={'flex-start'}\n        height={'100%'}\n        {...styleProps([styles.card, cardMarker], clsx('lobe-mdx-card', className))}\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            padding={'1.4em'}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n            width={'100%'}\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          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          gap={'0.75em'}\n          padding={'1.4em'}\n          width={'100%'}\n        >\n          {!image && icon && (\n            <Icon\n              {...styleProps(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 {...stylex.props(styles.desc)}>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OAAO,oBAAC,GAAD;EAAS;EACZ,UAAA,qBAAC,OAAD;GAAO,WAAA;GAAU,OAAO;GAAc,QAAQ;GAAQ,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,GAAG,KAAK,iBAAiB,SAAS,CAAC;GAAY;GAAS,GAAI;GAAzJ,UAAA;IACG,SAAS,oBAAC,KAAD;KAAK,KAAK;KAAO,QAAQ;KAAK,KAAK;KAAO,OAAO;MAC3D,QAAQ;MACR,OAAO;KACT;KAAG,OAAO;IAAM,CAAA;IACb,OAAO,oBAACA,mBAAD;KAAS,OAAO;KAAc,SAAS;KAAS,OAAO;MAC/D,eAAe;MACf,YAAY;KACd;KAAG,OAAO;KACJ,UAAA,oBAAC,KAAD;MAAK,OAAO;MAAU,OAAO;OAC/B,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MACO,UAAA;KACE,CAAA;IACE,CAAA;IACX,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO,OAAO,eAAe;KAAU,KAAK;KAAU,SAAS;KAAS,OAAO;KAAnG,UAAA,CACG,CAAC,SAAS,QAAQ,oBAAC,MAAD;MAAM,GAAI,WAAW,OAAO,MAAM,eAAe;MAAS;MAAM,MAAM,EACzF,MAAM,QACR;MAAG,GAAI;KAAY,CAAA,GACjB,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,IAAI;OAAI,UAAA;MAAQ,CAAA,CAC7C;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AACP;AACA,KAAK,cAAc"}
+{"version":3,"file":"Card.mjs","names":["clsx","Flexbox"],"sources":["../../../src/mdx/Cards/Card.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { 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 { styleProps } from '@/styles/stylex/props';\nimport Tag, { type TagProps } from '@/Tag';\n\nimport { cardMarker } from './marker.stylex';\nimport { styles } from './style';\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        clickable\n        align={'flex-start'}\n        height={'100%'}\n        {...styleProps([styles.card, cardMarker], clsx('lobe-mdx-card', className))}\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            padding={'1.4em'}\n            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}\n            width={'100%'}\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          horizontal\n          align={desc ? 'flex-start' : 'center'}\n          gap={'0.75em'}\n          padding={'1.4em'}\n          width={'100%'}\n        >\n          {!image && icon && (\n            <Icon\n              {...styleProps(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 {...stylex.props(styles.desc)}>{desc}</p>}\n          </Flexbox>\n        </Flexbox>\n      </Block>\n    </A>\n  );\n};\n\nCard.displayName = 'MdxCard';\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,QAAuB,EAC3B,KACA,WAAW,QACX,MACA,OACA,MACA,MACA,WACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OAAO,oBAAC,GAAD;EAAS;EACZ,UAAA,qBAAC,OAAD;GAAO,WAAA;GAAU,OAAO;GAAc,QAAQ;GAAQ,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,GAAGA,OAAK,iBAAiB,SAAS,CAAC;GAAY;GAAS,GAAI;GAAzJ,UAAA;IACG,SAAS,oBAAC,KAAD;KAAK,KAAK;KAAO,QAAQ;KAAK,KAAK;KAAO,OAAO;MAC3D,QAAQ;MACR,OAAO;KACT;KAAG,OAAO;IAAM,CAAA;IACb,OAAO,oBAACC,mBAAD;KAAS,OAAO;KAAc,SAAS;KAAS,OAAO;MAC/D,eAAe;MACf,YAAY;KACd;KAAG,OAAO;KACJ,UAAA,oBAAC,KAAD;MAAK,OAAO;MAAU,OAAO;OAC/B,cAAc;OACd,UAAU;OACV,YAAY;OACZ,cAAc;OACd,eAAe;MACjB;MACO,UAAA;KACE,CAAA;IACE,CAAA;IACX,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO,OAAO,eAAe;KAAU,KAAK;KAAU,SAAS;KAAS,OAAO;KAAnG,UAAA,CACG,CAAC,SAAS,QAAQ,oBAAC,MAAD;MAAM,GAAI,WAAW,OAAO,MAAM,eAAe;MAAS;MAAM,MAAM,EACzF,MAAM,QACR;MAAG,GAAI;KAAY,CAAA,GACjB,qBAACA,mBAAD;MAAS,KAAK;MAAd,UAAA,CACE,oBAAC,MAAD,EAAA,UAAK,MAAU,CAAA,GACd,QAAQ,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,IAAI;OAAI,UAAA;MAAQ,CAAA,CAC7C;KACF,CAAA,CAAA;;GACJ;;CACN,CAAA;AACP;AACA,KAAK,cAAc"}

package/es/mdx/Cards/index.mjs

@@ -3,11 +3,11 @@ import { styleProps } from "../../styles/stylex/props.mjs";
 import Grid from "../../Grid/Grid.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/mdx/Cards/index.tsx
 const Cards = ({ children, className, maxItemWidth = 250, rows = 3, ...rest }) => {
 	return /* @__PURE__ */ jsx(Grid, {
-		...styleProps(styles.container, clsx("lobe-mdx-cards", className)),
+		...styleProps(styles.container, clsx$1("lobe-mdx-cards", className)),
 		maxItemWidth,
 		rows,
 		...rest,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\nimport { styleProps } from '@/styles/stylex/props';\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      {...styleProps(styles.container, clsx('lobe-mdx-cards', 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":";;;;;;;AAcA,MAAM,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;CAChG,OACE,oBAAC,MAAD;EACE,GAAI,WAAW,OAAO,WAAW,KAAK,kBAAkB,SAAS,CAAC;EACpD;EACR;EACN,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Cards/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Grid, { type GridProps } from '@/Grid';\nimport { styleProps } from '@/styles/stylex/props';\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      {...styleProps(styles.container, clsx('lobe-mdx-cards', 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":";;;;;;;AAcA,MAAM,SAAyB,EAAE,UAAU,WAAW,eAAe,KAAK,OAAO,GAAG,GAAG,WAAW;CAChG,OACE,oBAAC,MAAD;EACE,GAAI,WAAW,OAAO,WAAWA,OAAK,kBAAkB,SAAS,CAAC;EACpD;EACR;EACN,GAAI;EAEH;CACG,CAAA;AAEV;AAEA,MAAM,cAAc"}

package/es/mdx/Mdx/index.mjs

@@ -11,7 +11,7 @@ import mdxComponents from "../mdxComponents/index.mjs";
 import CodeBlock from "../mdxComponents/CodeBlock.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import jsxRuntime, { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { rehypeGithubAlerts } from "rehype-github-alerts";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -84,7 +84,7 @@ const Mdx = memo(({ children, className, style, fullFeaturedCodeBlock = true, en
 	]);
 	if (!escapedContent || !MDXContent) return fallback;
 	return /* @__PURE__ */ jsx(Typography, {
-		className: clsx(enableLatex && styles.latex, isChatMode && styles.chat, className),
+		className: clsx$1(enableLatex && styles.latex, isChatMode && styles.chat, className),
 		"data-code-type": "mdx",
 		fontSize,
 		headerMultiple,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport clsx from 'clsx';\nimport { memo, type ReactNode, useEffect, useMemo, useState } from 'react';\nimport jsxDevRuntime from 'react/jsx-dev-runtime';\nimport jsxRuntime from 'react/jsx-runtime';\nimport { rehypeGithubAlerts } from 'rehype-github-alerts';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { type Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { rehypeKatex } from '@/Markdown/plugins/rehypeKatex';\nimport { styles } from '@/Markdown/style';\n\nimport mdxComponents from '../mdxComponents';\nimport CodeBlock from '../mdxComponents/CodeBlock';\nimport Image from '../mdxComponents/Image';\nimport Video from '../mdxComponents/Video';\n\nconst runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;\n\nexport interface MdxProps extends Omit<TypographyProps, 'children'> {\n  children: string;\n  components?: any[];\n  enableImageGallery?: boolean;\n  enableLatex?: boolean;\n  enableMermaid?: boolean;\n  fallback?: ReactNode;\n  fullFeaturedCodeBlock?: boolean;\n  onDoubleClick?: () => void;\n  rehypePlugins?: Pluggable[];\n  remarkPlugins?: Pluggable[];\n  variant?: 'normal' | 'chat';\n}\n\nconst Mdx = memo<MdxProps>(\n  ({\n    children,\n    className,\n    style,\n    fullFeaturedCodeBlock = true,\n    enableImageGallery,\n    enableLatex = true,\n    enableMermaid = true,\n    rehypePlugins,\n    remarkPlugins,\n    components = {},\n    fallback = null,\n    fontSize,\n    headerMultiple,\n    lineHeight,\n    marginMultiple,\n    variant,\n    ...rest\n  }) => {\n    const escapedContent = useMarkdownContent(children);\n\n    const isChatMode = variant === 'chat';\n\n    const [MDXContent, setMDXContent] = useState<any>(() => () => null);\n\n    const innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];\n    const memoRehypePlugins = useMemo(\n      () =>\n        [rehypeGithubAlerts, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(\n          Boolean,\n        ) as any,\n      [enableLatex, ...innerRehypePlugins],\n    );\n\n    const innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];\n    const memoRemarkPlugins = useMemo(\n      () => [remarkGfm, enableLatex && remarkMath, ...innerRemarkPlugins].filter(Boolean) as any,\n      [enableLatex, ...innerRemarkPlugins],\n    );\n\n    const memoComponents = useMemo(() => {\n      const list: any = {};\n      Object.entries({\n        ...mdxComponents,\n        img: Image,\n        pre: (props: any) => (\n          <CodeBlock\n            {...props}\n            enableMermaid={enableMermaid}\n            fullFeatured={fullFeaturedCodeBlock}\n          />\n        ),\n        video: Video,\n        ...components,\n      }).forEach(([key, Render]: any) => {\n        list[key] = (props: any) => <Render {...props} />;\n      });\n      return list;\n    }, [components, enableMermaid, fullFeaturedCodeBlock]);\n\n    useEffect(() => {\n      if (!escapedContent) return;\n      (async () => {\n        try {\n          const { default: Content } = await evaluate(escapedContent, {\n            ...runtime,\n            development: process.env.NODE_ENV !== 'production',\n            rehypePlugins: memoRehypePlugins,\n            remarkPlugins: memoRemarkPlugins,\n          });\n          setMDXContent(() => Content);\n        } catch (error: any) {\n          // @ts-ignore\n          setMDXContent(() => () => (\n            <Alert\n              description={String(error?.message as string)}\n              title={'Error compiling MDX'}\n              type=\"error\"\n              style={{\n                width: '100%',\n              }}\n            />\n          ));\n          console.error('Error compiling MDX:', error);\n        }\n      })();\n    }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);\n\n    if (!escapedContent || !MDXContent) return fallback;\n\n    return (\n      <Typography\n        className={clsx(enableLatex && styles.latex, isChatMode && styles.chat, className)}\n        data-code-type=\"mdx\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        style={style}\n        {...rest}\n      >\n        <PreviewGroup enable={enableImageGallery}>\n          <MDXContent components={memoComponents} />\n        </PreviewGroup>\n      </Typography>\n    );\n  },\n);\n\nMdx.displayName = 'Mdx';\n\nexport default Mdx;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,QAAQ,IAAI,aAAa,eAAe,aAAa;AAgBrE,MAAM,MAAM,MACT,EACC,UACA,WACA,OACA,wBAAwB,MACxB,oBACA,cAAc,MACd,gBAAgB,MAChB,eACA,eACA,aAAa,CAAC,GACd,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,QAAQ;CAElD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,IAAI;CAElE,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;CAAkB,CAAC,CAAC,OACtE,OACF,GACF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;CAAkB,CAAC,CAAC,OAAO,OAAO,GAClF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,OAAY,CAAC;EACnB,OAAO,QAAQ;GACb,GAAG;GACH,KAAK;GACL,MAAM,UACJ,oBAAC,WAAD;IACE,GAAI;IACW;IACf,cAAc;GACf,CAAA;GAEH,OAAO;GACP,GAAG;EACL,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;GACjC,KAAK,QAAQ,UAAe,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;EAClD,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAY;EAAe;CAAqB,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;IACjB,CAAC;IACD,oBAAoB,OAAO;GAC7B,SAAS,OAAY;IAEnB,0BACE,oBAAC,OAAD;KACE,aAAa,OAAO,OAAO,OAAiB;KAC5C,OAAO;KACP,MAAK;KACL,OAAO,EACL,OAAO,OACT;IACD,CAAA,CACF;IACD,QAAQ,MAAM,wBAAwB,KAAK;GAC7C;EACF,EAAA,CAAG;CACL,GAAG;EAAC;EAAgB;EAAmB;CAAiB,CAAC;CAEzD,IAAI,CAAC,kBAAkB,CAAC,YAAY,OAAO;CAE3C,OACE,oBAAC,YAAD;EACE,WAAW,KAAK,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,SAAS;EACjF,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;EAEJ,UAAA,oBAAC,cAAD;GAAc,QAAQ;GACpB,UAAA,oBAAC,YAAD,EAAY,YAAY,eAAiB,CAAA;EAC7B,CAAA;CACJ,CAAA;AAEhB,CACF;AAEA,IAAI,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport clsx from 'clsx';\nimport { memo, type ReactNode, useEffect, useMemo, useState } from 'react';\nimport jsxDevRuntime from 'react/jsx-dev-runtime';\nimport jsxRuntime from 'react/jsx-runtime';\nimport { rehypeGithubAlerts } from 'rehype-github-alerts';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { type Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { rehypeKatex } from '@/Markdown/plugins/rehypeKatex';\nimport { styles } from '@/Markdown/style';\n\nimport mdxComponents from '../mdxComponents';\nimport CodeBlock from '../mdxComponents/CodeBlock';\nimport Image from '../mdxComponents/Image';\nimport Video from '../mdxComponents/Video';\n\nconst runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;\n\nexport interface MdxProps extends Omit<TypographyProps, 'children'> {\n  children: string;\n  components?: any[];\n  enableImageGallery?: boolean;\n  enableLatex?: boolean;\n  enableMermaid?: boolean;\n  fallback?: ReactNode;\n  fullFeaturedCodeBlock?: boolean;\n  onDoubleClick?: () => void;\n  rehypePlugins?: Pluggable[];\n  remarkPlugins?: Pluggable[];\n  variant?: 'normal' | 'chat';\n}\n\nconst Mdx = memo<MdxProps>(\n  ({\n    children,\n    className,\n    style,\n    fullFeaturedCodeBlock = true,\n    enableImageGallery,\n    enableLatex = true,\n    enableMermaid = true,\n    rehypePlugins,\n    remarkPlugins,\n    components = {},\n    fallback = null,\n    fontSize,\n    headerMultiple,\n    lineHeight,\n    marginMultiple,\n    variant,\n    ...rest\n  }) => {\n    const escapedContent = useMarkdownContent(children);\n\n    const isChatMode = variant === 'chat';\n\n    const [MDXContent, setMDXContent] = useState<any>(() => () => null);\n\n    const innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];\n    const memoRehypePlugins = useMemo(\n      () =>\n        [rehypeGithubAlerts, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(\n          Boolean,\n        ) as any,\n      [enableLatex, ...innerRehypePlugins],\n    );\n\n    const innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];\n    const memoRemarkPlugins = useMemo(\n      () => [remarkGfm, enableLatex && remarkMath, ...innerRemarkPlugins].filter(Boolean) as any,\n      [enableLatex, ...innerRemarkPlugins],\n    );\n\n    const memoComponents = useMemo(() => {\n      const list: any = {};\n      Object.entries({\n        ...mdxComponents,\n        img: Image,\n        pre: (props: any) => (\n          <CodeBlock\n            {...props}\n            enableMermaid={enableMermaid}\n            fullFeatured={fullFeaturedCodeBlock}\n          />\n        ),\n        video: Video,\n        ...components,\n      }).forEach(([key, Render]: any) => {\n        list[key] = (props: any) => <Render {...props} />;\n      });\n      return list;\n    }, [components, enableMermaid, fullFeaturedCodeBlock]);\n\n    useEffect(() => {\n      if (!escapedContent) return;\n      (async () => {\n        try {\n          const { default: Content } = await evaluate(escapedContent, {\n            ...runtime,\n            development: process.env.NODE_ENV !== 'production',\n            rehypePlugins: memoRehypePlugins,\n            remarkPlugins: memoRemarkPlugins,\n          });\n          setMDXContent(() => Content);\n        } catch (error: any) {\n          // @ts-ignore\n          setMDXContent(() => () => (\n            <Alert\n              description={String(error?.message as string)}\n              title={'Error compiling MDX'}\n              type=\"error\"\n              style={{\n                width: '100%',\n              }}\n            />\n          ));\n          console.error('Error compiling MDX:', error);\n        }\n      })();\n    }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);\n\n    if (!escapedContent || !MDXContent) return fallback;\n\n    return (\n      <Typography\n        className={clsx(enableLatex && styles.latex, isChatMode && styles.chat, className)}\n        data-code-type=\"mdx\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        style={style}\n        {...rest}\n      >\n        <PreviewGroup enable={enableImageGallery}>\n          <MDXContent components={memoComponents} />\n        </PreviewGroup>\n      </Typography>\n    );\n  },\n);\n\nMdx.displayName = 'Mdx';\n\nexport default Mdx;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,QAAQ,IAAI,aAAa,eAAe,aAAa;AAgBrE,MAAM,MAAM,MACT,EACC,UACA,WACA,OACA,wBAAwB,MACxB,oBACA,cAAc,MACd,gBAAgB,MAChB,eACA,eACA,aAAa,CAAC,GACd,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,QAAQ;CAElD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,IAAI;CAElE,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;CAAkB,CAAC,CAAC,OACtE,OACF,GACF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;CAAkB,CAAC,CAAC,OAAO,OAAO,GAClF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,OAAY,CAAC;EACnB,OAAO,QAAQ;GACb,GAAG;GACH,KAAK;GACL,MAAM,UACJ,oBAAC,WAAD;IACE,GAAI;IACW;IACf,cAAc;GACf,CAAA;GAEH,OAAO;GACP,GAAG;EACL,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;GACjC,KAAK,QAAQ,UAAe,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;EAClD,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAY;EAAe;CAAqB,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;IACjB,CAAC;IACD,oBAAoB,OAAO;GAC7B,SAAS,OAAY;IAEnB,0BACE,oBAAC,OAAD;KACE,aAAa,OAAO,OAAO,OAAiB;KAC5C,OAAO;KACP,MAAK;KACL,OAAO,EACL,OAAO,OACT;IACD,CAAA,CACF;IACD,QAAQ,MAAM,wBAAwB,KAAK;GAC7C;EACF,EAAA,CAAG;CACL,GAAG;EAAC;EAAgB;EAAmB;CAAiB,CAAC;CAEzD,IAAI,CAAC,kBAAkB,CAAC,YAAY,OAAO;CAE3C,OACE,oBAAC,YAAD;EACE,WAAWA,OAAK,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,SAAS;EACjF,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;EAEJ,UAAA,oBAAC,cAAD;GAAc,QAAQ;GACpB,UAAA,oBAAC,YAAD,EAAY,YAAY,eAAiB,CAAA;EAC7B,CAAA;CACJ,CAAA;AAEhB,CACF;AAEA,IAAI,cAAc"}

package/es/mdx/Steps/index.mjs

@@ -2,11 +2,11 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/mdx/Steps/index.tsx
 const Steps = ({ children, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		...styleProps(styles.container, clsx("lobe-mdx-steps", className)),
+		...styleProps(styles.container, clsx$1("lobe-mdx-steps", className)),
 		...rest,
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nconst Steps: FC<DivProps> = ({ children, className, ...rest }) => {\n  return (\n    <div {...styleProps(styles.container, clsx('lobe-mdx-steps', className))} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSteps.displayName = 'MdxSteps';\n\nexport default Steps;\n"],"mappings":";;;;;;AAYA,MAAM,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CAChE,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,KAAK,kBAAkB,SAAS,CAAC;EAAG,GAAI;EAC3E;CACE,CAAA;AAET;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/mdx/Steps/index.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { styles } from './style';\n\nconst Steps: FC<DivProps> = ({ children, className, ...rest }) => {\n  return (\n    <div {...styleProps(styles.container, clsx('lobe-mdx-steps', className))} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSteps.displayName = 'MdxSteps';\n\nexport default Steps;\n"],"mappings":";;;;;;AAYA,MAAM,SAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CAChE,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAWA,OAAK,kBAAkB,SAAS,CAAC;EAAG,GAAI;EAC3E;CACE,CAAA;AAET;AAEA,MAAM,cAAc"}

package/es/mdx/mdxComponents/Pre.mjs

@@ -5,12 +5,12 @@ import HtmlPreview from "../../HtmlPreview/HtmlPreview.mjs";
 import Mermaid from "../../Mermaid/Mermaid.mjs";
 import Snippet from "../../Snippet/Snippet.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/mdx/mdxComponents/Pre.tsx
 const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_LANG, children, className, style, variant = "filled", icon, theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Highlighter, {
 		allowChangeLanguage,
-		className: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fileName,
 		fullFeatured,
 		icon,
@@ -24,7 +24,7 @@ const Pre = ({ fullFeatured, fileName, allowChangeLanguage, language = FALLBACK_
 };
 const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, variant = "filled", ...rest }) => {
 	return /* @__PURE__ */ jsx(Snippet, {
-		className: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		"data-code-type": "highlighter",
 		language,
 		style,
@@ -36,7 +36,7 @@ const PreSingleLine = ({ language = FALLBACK_LANG, children, className, style, v
 const PreMermaid = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(Mermaid, {
 		animated,
-		className: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fullFeatured,
 		style,
 		theme,
@@ -48,7 +48,7 @@ const PreMermaid = ({ animated, fullFeatured, children, className, style, varian
 const PreHtmlPreview = ({ animated, fullFeatured, children, className, style, variant = "filled", theme, ...rest }) => {
 	return /* @__PURE__ */ jsx(HtmlPreview, {
 		animated,
-		className: clsx("lobe-mdx-pre", className),
+		className: clsx$1("lobe-mdx-pre", className),
 		fullFeatured,
 		style,
 		theme,

package/es/mdx/mdxComponents/Pre.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pre.mjs","names":[],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport HtmlPreview, { type HtmlPreviewProps } from '@/HtmlPreview';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={clsx('lobe-mdx-pre', className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={clsx('lobe-mdx-pre', className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nexport const PreHtmlPreview: FC<HtmlPreviewProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <HtmlPreview\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </HtmlPreview>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;AAeA,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACuB;EACrB,WAAW,KAAK,gBAAgB,SAAS;EAC/B;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACE,WAAW,KAAK,gBAAgB,SAAS;EACzC,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACY;EACV,WAAW,KAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,kBAAwC,EACnD,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACY;EACV,WAAW,KAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,IAAI,cAAc"}
+{"version":3,"file":"Pre.mjs","names":["clsx"],"sources":["../../../src/mdx/mdxComponents/Pre.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport type { FC } from 'react';\n\nimport Highlighter, { type HighlighterProps } from '@/Highlighter';\nimport { FALLBACK_LANG } from '@/Highlighter/const';\nimport HtmlPreview, { type HtmlPreviewProps } from '@/HtmlPreview';\nimport Mermaid, { type MermaidProps } from '@/Mermaid';\nimport Snippet, { type SnippetProps } from '@/Snippet';\n\nexport type PreProps = HighlighterProps;\n\nexport const Pre: FC<PreProps> = ({\n  fullFeatured,\n  fileName,\n  allowChangeLanguage,\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  icon,\n  theme,\n  ...rest\n}) => {\n  return (\n    <Highlighter\n      allowChangeLanguage={allowChangeLanguage}\n      className={clsx('lobe-mdx-pre', className)}\n      fileName={fileName}\n      fullFeatured={fullFeatured}\n      icon={icon}\n      language={language}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Highlighter>\n  );\n};\n\nexport const PreSingleLine: FC<SnippetProps> = ({\n  language = FALLBACK_LANG,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  ...rest\n}) => {\n  return (\n    <Snippet\n      className={clsx('lobe-mdx-pre', className)}\n      data-code-type=\"highlighter\"\n      language={language}\n      style={style}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Snippet>\n  );\n};\n\nexport const PreMermaid: FC<MermaidProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <Mermaid\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </Mermaid>\n  );\n};\n\nexport const PreHtmlPreview: FC<HtmlPreviewProps> = ({\n  animated,\n  fullFeatured,\n  children,\n  className,\n  style,\n  variant = 'filled',\n  theme,\n  ...rest\n}) => {\n  return (\n    <HtmlPreview\n      animated={animated}\n      className={clsx('lobe-mdx-pre', className)}\n      fullFeatured={fullFeatured}\n      style={style}\n      theme={theme}\n      variant={variant}\n      {...rest}\n    >\n      {children}\n    </HtmlPreview>\n  );\n};\n\nPre.displayName = 'MdxPre';\n\nexport default Pre;\n"],"mappings":";;;;;;;;;AAeA,MAAa,OAAqB,EAChC,cACA,UACA,qBACA,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,MACA,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACuB;EACrB,WAAWA,OAAK,gBAAgB,SAAS;EAC/B;EACI;EACR;EACI;EACH;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,MAAa,iBAAmC,EAC9C,WAAW,eACX,UACA,WACA,OACA,UAAU,UACV,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACE,WAAWA,OAAK,gBAAgB,SAAS;EACzC,kBAAe;EACL;EACH;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,cAAgC,EAC3C,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,SAAD;EACY;EACV,WAAWA,OAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAa,kBAAwC,EACnD,UACA,cACA,UACA,WACA,OACA,UAAU,UACV,OACA,GAAG,WACC;CACJ,OACE,oBAAC,aAAD;EACY;EACV,WAAWA,OAAK,gBAAgB,SAAS;EAC3B;EACP;EACA;EACE;EACT,GAAI;EAEH;CACU,CAAA;AAEjB;AAEA,IAAI,cAAc"}

package/es/mdx/mdxComponents/Video.d.mts

@@ -1,4 +1,5 @@
-import { VideoProps as VideoProps$1 } from "../../Video/index.mjs";
+import { VideoProps as VideoProps$1 } from "../../Video/type.mjs";
+import "../../Video/index.mjs";
 import { FC } from "react";
 //#region src/mdx/mdxComponents/Video.d.ts
 export type VideoProps = VideoProps$1;

package/es/mdx/mdxComponents/Video.mjs

@@ -2,9 +2,11 @@
 import Video$1 from "../../Video/index.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/mdx/mdxComponents/Video.tsx
-const Video = ({ style, ...rest }) => {
+const toLength = (value) => typeof value === "string" && /^\d+$/.test(value) ? Number(value) : value;
+const Video = ({ height, style, width, ...rest }) => {
 	return /* @__PURE__ */ jsx(Video$1, {
-		preview: false,
+		height: toLength(height),
+		width: toLength(width),
 		style: {
 			borderRadius: "calc(var(--lobe-markdown-border-radius) * 1px)",
 			marginBlock: "calc(var(--lobe-markdown-margin-multiple) * 1em)",
@@ -13,7 +15,7 @@ const Video = ({ style, ...rest }) => {
 		...rest
 	});
 };
-Video.displayName = "MdxVdieo";
+Video.displayName = "MdxVideo";
 //#endregion
 export { Video as default };
 

package/es/mdx/mdxComponents/Video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.mjs","names":["LobeVideo"],"sources":["../../../src/mdx/mdxComponents/Video.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport LobeVideo, { type VideoProps as LobeVideoProps } from '@/Video';\n\nexport type VideoProps = LobeVideoProps;\n\nconst Video: FC<VideoProps> = ({ style, ...rest }) => {\n  return (\n    <LobeVideo\n      preview={false}\n      style={{\n        borderRadius: 'calc(var(--lobe-markdown-border-radius) * 1px)',\n        marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nVideo.displayName = 'MdxVdieo';\n\nexport default Video;\n"],"mappings":";;;;AAQA,MAAM,SAAyB,EAAE,OAAO,GAAG,WAAW;CACpD,OACE,oBAACA,SAAD;EACE,SAAS;EACT,OAAO;GACL,cAAc;GACd,aAAa;GACb,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Video.mjs","names":["LobeVideo"],"sources":["../../../src/mdx/mdxComponents/Video.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\n\nimport LobeVideo, { type VideoProps as LobeVideoProps } from '@/Video';\n\nexport type VideoProps = LobeVideoProps;\n\nconst toLength = (value?: number | string) =>\n  typeof value === 'string' && /^\\d+$/.test(value) ? Number(value) : value;\n\nconst Video: FC<VideoProps> = ({ height, style, width, ...rest }) => {\n  return (\n    <LobeVideo\n      height={toLength(height)}\n      width={toLength(width)}\n      style={{\n        borderRadius: 'calc(var(--lobe-markdown-border-radius) * 1px)',\n        marginBlock: 'calc(var(--lobe-markdown-margin-multiple) * 1em)',\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nVideo.displayName = 'MdxVideo';\n\nexport default Video;\n"],"mappings":";;;;AAQA,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,QAAQ,KAAK,KAAK,IAAI,OAAO,KAAK,IAAI;AAErE,MAAM,SAAyB,EAAE,QAAQ,OAAO,OAAO,GAAG,WAAW;CACnE,OACE,oBAACA,SAAD;EACE,QAAQ,SAAS,MAAM;EACvB,OAAO,SAAS,KAAK;EACrB,OAAO;GACL,cAAc;GACd,aAAa;GACb,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,cAAc"}

package/es/mobile/ChatInputArea/ChatInputArea.mjs

@@ -2,13 +2,13 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { useSize } from "../../hooks/useSize.mjs";
 import ChatInputAreaInner from "../../chat/ChatInputArea/components/ChatInputAreaInner.mjs";
 import SafeArea from "../SafeArea/SafeArea.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { useSize } from "ahooks";
 //#region src/mobile/ChatInputArea/ChatInputArea.tsx
 const ChatInputArea = memo(({ ref, className, style, topAddons, textAreaLeftAddons, textAreaRightAddons, bottomAddons, expand = false, setExpand, onSend, onInput, loading, value, safeArea }) => {
 	const containerRef = useRef(null);

package/es/mobile/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox gap={8} height={'inherit'} paddingInline={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} gap={8} height={'inherit'} paddingInline={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        flex={'none'}\n        gap={12}\n        height={expand ? '100%' : undefined}\n        paddingBlock={12}\n        width={expand ? '100%' : undefined}\n        {...styleProps([styles.container, expand && styles.expand], className, style)}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          height={expand ? '100%' : undefined}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n          width={expand ? '100%' : undefined}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={{ insetInlineEnd: 14, position: 'absolute', ...(expand ? { top: 6 } : {}) }}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              loading={loading}\n              ref={ref}\n              style={{ flex: 1, minHeight: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAnD,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAjF,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,MAAM;EACN,KAAK;EACL,QAAQ,SAAS,SAAS,KAAA;EAC1B,cAAc;EACd,OAAO,SAAS,SAAS,KAAA;EACzB,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,MAAM,GAAG,WAAW,KAAK;EAN9E,UAAA;GAQG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,QAAQ,SAAS,SAAS,KAAA;IAC1B,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAC9B,OAAO,SAAS,SAAS,KAAA;IAJ3B,UAAA,CAMG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO;MAAE,gBAAgB;MAAI,UAAU;MAAY,GAAI,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAAG;KACjF,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MAC3C;MACJ;MACL,OAAO;OAAE,MAAM;OAAG,WAAW;OAAI,cAAc;MAAE;MAC1C;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport { useSize } from '@/hooks/useSize';\nimport SafeArea from '@/mobile/SafeArea';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox gap={8} height={'inherit'} paddingInline={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} gap={8} height={'inherit'} paddingInline={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        flex={'none'}\n        gap={12}\n        height={expand ? '100%' : undefined}\n        paddingBlock={12}\n        width={expand ? '100%' : undefined}\n        {...styleProps([styles.container, expand && styles.expand], className, style)}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          height={expand ? '100%' : undefined}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n          width={expand ? '100%' : undefined}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={{ insetInlineEnd: 14, position: 'absolute', ...(expand ? { top: 6 } : {}) }}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              loading={loading}\n              ref={ref}\n              style={{ flex: 1, minHeight: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAnD,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAjF,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,MAAM;EACN,KAAK;EACL,QAAQ,SAAS,SAAS,KAAA;EAC1B,cAAc;EACd,OAAO,SAAS,SAAS,KAAA;EACzB,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,MAAM,GAAG,WAAW,KAAK;EAN9E,UAAA;GAQG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,QAAQ,SAAS,SAAS,KAAA;IAC1B,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAC9B,OAAO,SAAS,SAAS,KAAA;IAJ3B,UAAA,CAMG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO;MAAE,gBAAgB;MAAI,UAAU;MAAY,GAAI,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAAG;KACjF,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MAC3C;MACJ;MACL,OAAO;OAAE,MAAM;OAAG,WAAW;OAAI,cAAc;MAAE;MAC1C;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}