@lobehub/ui 5.57.3 → 6.0.0-beta.2

package/es/types/citation.d.mts

@@ -1,10 +1,9 @@
 //#region src/types/citation.d.ts
-interface CitationItem {
+export interface CitationItem {
   alt?: string;
   summary?: string;
   title?: string;
   url: string;
 }
 //#endregion
-export { CitationItem };
 //# sourceMappingURL=citation.d.mts.map

package/es/types/customStylish.d.mts

@@ -1,5 +1,5 @@
 //#region src/types/customStylish.d.ts
-interface LobeCustomStylish {
+export interface LobeCustomStylish {
   active: string;
   blur: string;
   blurStrong: string;
@@ -20,5 +20,4 @@ interface LobeCustomStylish {
   variantOutlinedWithoutHover: string;
 }
 //#endregion
-export { LobeCustomStylish };
 //# sourceMappingURL=customStylish.d.mts.map

package/es/types/customToken.d.mts

@@ -1,20 +1,20 @@
 //#region src/types/customToken.d.ts
 declare const PresetColors: readonly ["red", "volcano", "orange", "gold", "yellow", "lime", "green", "cyan", "blue", "geekblue", "purple", "magenta", "gray"];
 declare const PresetSystemColors: readonly ["Error", "Warning", "Success", "Info"];
-type PresetColorKey = (typeof PresetColors)[number];
-type PresetSystemColorKey = (typeof PresetSystemColors)[number];
-type PresetColorType = Record<PresetColorKey, string>;
-type PresetSystemColorType = Record<PresetSystemColorKey, string>;
+export type PresetColorKey = (typeof PresetColors)[number];
+export type PresetSystemColorKey = (typeof PresetSystemColors)[number];
+export type PresetColorType = Record<PresetColorKey, string>;
+export type PresetSystemColorType = Record<PresetSystemColorKey, string>;
 type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 type ColorTokenKey = 'Fill' | 'FillSecondary' | 'FillTertiary' | 'FillQuaternary' | 'Bg' | 'BgHover' | 'Border' | 'BorderSecondary' | 'BorderHover' | 'Hover' | '' | 'Active' | 'TextHover' | 'Text' | 'TextActive';
 type SystemColorTokenKey = 'Fill' | 'FillSecondary' | 'FillTertiary' | 'FillQuaternary';
-type ColorToken = { [key in `${keyof PresetColorType}${ColorTokenKey}`]: string; };
-type SystemColorToken = { [key in `color${keyof PresetSystemColorType}${SystemColorTokenKey}`]: string; };
-type ColorPalettes = { [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string; };
-type ColorPalettesAlpha = { [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string; };
-interface LobeCustomToken extends ColorPalettes, ColorPalettesAlpha, ColorToken, SystemColorToken {
+export type ColorToken = { [key in `${keyof PresetColorType}${ColorTokenKey}`]: string; };
+export type SystemColorToken = { [key in `color${keyof PresetSystemColorType}${SystemColorTokenKey}`]: string; };
+export type ColorPalettes = { [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string; };
+export type ColorPalettesAlpha = { [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string; };
+export interface LobeCustomToken extends ColorPalettes, ColorPalettesAlpha, ColorToken, SystemColorToken {
   colorBgContainerSecondary: string;
 }
 //#endregion
-export { ColorPalettes, ColorPalettesAlpha, ColorToken, LobeCustomToken, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, SystemColorToken };
+export {};
 //# sourceMappingURL=customToken.d.mts.map

package/es/types/index.d.mts

@@ -1,16 +1,17 @@
 import { LobeCustomStylish } from "./customStylish.mjs";
 import { ColorPalettes, ColorPalettesAlpha, ColorToken, LobeCustomToken, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, SystemColorToken } from "./customToken.mjs";
 import { Trigger } from "./trigger.mjs";
-import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+import { AnchorHTMLAttributes, HTMLAttributes, ImgHTMLAttributes } from "react";
 //#region src/types/index.d.ts
-type DivProps = HTMLAttributes<HTMLDivElement>;
-type VideoProps = HTMLAttributes<HTMLVideoElement>;
-type SvgProps = HTMLAttributes<SVGSVGElement>;
-type ImgProps = HTMLAttributes<HTMLImageElement>;
-type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
-type InputProps = HTMLAttributes<HTMLInputElement>;
-type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;
-type SpanProps = HTMLAttributes<HTMLSpanElement>;
+export type DivProps = HTMLAttributes<HTMLDivElement>;
+export type VideoProps = HTMLAttributes<HTMLVideoElement>;
+export type SvgProps = HTMLAttributes<SVGSVGElement>;
+export type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
+export type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export type InputProps = HTMLAttributes<HTMLInputElement>;
+export type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;
+export type SpanProps = HTMLAttributes<HTMLSpanElement>;
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
 //#endregion
-export { AProps, ColorPalettes, ColorPalettesAlpha, ColorToken, DivProps, ImgProps, InputProps, LobeCustomStylish, LobeCustomToken, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, SpanProps, SvgProps, SystemColorToken, TextAreaProps, Trigger, VideoProps };
+export { ColorPalettes, ColorPalettesAlpha, ColorToken, LobeCustomStylish, LobeCustomToken, PresetColorKey, PresetColorType, PresetSystemColorKey, PresetSystemColorType, SystemColorToken, Trigger };
 //# sourceMappingURL=index.d.mts.map

package/es/types/index.mjs

@@ -0,0 +1 @@
+export {};

package/es/types/trigger.d.mts

@@ -2,7 +2,6 @@
 /**
  * Common trigger type for components that support hover/click interactions
  */
-type Trigger = 'hover' | 'click' | 'both' | ('hover' | 'click')[];
+export type Trigger = 'hover' | 'click' | 'both' | ('hover' | 'click')[];
 //#endregion
-export { Trigger };
 //# sourceMappingURL=trigger.d.mts.map

package/es/utils/copyToClipboard.d.mts

@@ -1,5 +1,4 @@
 //#region src/utils/copyToClipboard.d.ts
-declare const copyToClipboard: (text: string) => Promise<void>;
+export declare const copyToClipboard: (text: string) => Promise<void>;
 //#endregion
-export { copyToClipboard };
 //# sourceMappingURL=copyToClipboard.d.mts.map

package/es/utils/dom.d.mts

@@ -1,15 +1,14 @@
 //#region src/utils/dom.d.ts
-declare const preventDefault: <T extends {
+export declare const preventDefault: <T extends {
   preventDefault: () => void;
 }>(event: T) => void;
-declare const stopPropagation: <T extends {
+export declare const stopPropagation: <T extends {
   stopPropagation: () => void;
 }>(event: T) => void;
-declare const preventDefaultAndStopPropagation: <T extends {
+export declare const preventDefaultAndStopPropagation: <T extends {
   preventBaseUIHandler?: () => void;
   preventDefault: () => void;
   stopPropagation: () => void;
 }>(event: T) => void;
 //#endregion
-export { preventDefault, preventDefaultAndStopPropagation, stopPropagation };
 //# sourceMappingURL=dom.d.mts.map

package/es/utils/genCdnUrl.d.mts

@@ -1,12 +1,11 @@
 //#region src/utils/genCdnUrl.d.ts
-type CDN = 'aliyun' | 'unpkg';
-interface CdnApi {
+export type CDN = 'aliyun' | 'unpkg';
+export interface CdnApi {
   path: string;
   pkg: string;
   proxy?: CDN;
   version?: string;
 }
-declare const genCdnUrl: ({ pkg, version, path, proxy }: CdnApi) => string;
+export declare const genCdnUrl: ({ pkg, version, path, proxy }: CdnApi) => string;
 //#endregion
-export { CDN, CdnApi, genCdnUrl };
 //# sourceMappingURL=genCdnUrl.d.mts.map

package/es/utils/parseTrigger.d.mts

@@ -4,10 +4,9 @@ import "../types/index.mjs";
 /**
  * Parses trigger prop to determine hover and click behavior
  */
-declare function parseTrigger(trigger: Trigger): {
+export declare function parseTrigger(trigger: Trigger): {
   openOnClick: boolean;
   openOnHover: boolean;
 };
 //#endregion
-export { parseTrigger };
 //# sourceMappingURL=parseTrigger.d.mts.map

package/es/utils/placement.d.mts

@@ -4,9 +4,9 @@ import { Placement } from "@floating-ui/react";
  * Base UI uses a small set of string literal unions for alignment and side.
  * We re-declare them here to avoid importing internal/non-exported Base UI paths.
  */
-type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
-type Align = 'start' | 'center' | 'end';
-type PlacementConfig = {
+export type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
+export type Align = 'start' | 'center' | 'end';
+export type PlacementConfig = {
   align: Align;
   side: Side;
 };
@@ -21,7 +21,7 @@ type Placement$1 = 'top' | 'topLeft' | 'topCenter' | 'topRight' | 'bottom' | 'bo
  * Map of placement values to Base UI placement config
  * Used by Popover and DropdownMenu components
  */
-declare const placementMap: Record<Placement$1, PlacementConfig>;
+export declare const placementMap: Record<Placement$1, PlacementConfig>;
 /**
  * Convert unified Placement to Floating UI placement format
  * Used by Tooltip component which uses @floating-ui/react
@@ -29,7 +29,7 @@ declare const placementMap: Record<Placement$1, PlacementConfig>;
  * @param placement - Unified placement value
  * @returns Floating UI placement (e.g., 'top-start', 'bottom-end')
  */
-declare const toFloatingUIPlacement: (placement?: Placement$1) => Placement;
+export declare const toFloatingUIPlacement: (placement?: Placement$1) => Placement;
 //#endregion
-export { Align, Placement$1 as Placement, PlacementConfig, Side, placementMap, toFloatingUIPlacement };
+export { Placement$1 as Placement };
 //# sourceMappingURL=placement.d.mts.map

package/es/utils/smoothCorners.d.mts

@@ -3,7 +3,7 @@ import { CSSProperties } from "react";
 /**
  * Predefined smooth corners masks for common corner values
  */
-declare const SMOOTH_CORNER_MASKS: {
+export declare const SMOOTH_CORNER_MASKS: {
   readonly circle: string;
   readonly ios: string;
   readonly sharp: string;
@@ -12,5 +12,4 @@ declare const SMOOTH_CORNER_MASKS: {
   readonly squircle: string;
 };
 //#endregion
-export { SMOOTH_CORNER_MASKS };
 //# sourceMappingURL=smoothCorners.d.mts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.57.3",
+  "version": "6.0.0-beta.2",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -77,34 +77,17 @@
       "types": "./es/storybook/index.d.mts",
       "import": "./es/storybook/index.mjs"
     },
-    "./base-ui": {
-      "types": "./es/base-ui/index.d.mts",
-      "import": "./es/base-ui/index.mjs"
-    },
-    "./base-ui/form": {
-      "types": "./es/base-ui/FormKit/index.d.mts",
-      "import": "./es/base-ui/FormKit/index.mjs"
-    },
     "./eslint": {
       "types": "./es/eslint/index.d.mts",
       "import": "./es/eslint/index.mjs"
     },
-    "./static-css": {
-      "types": "./es/static-css/index.d.mts",
-      "import": "./es/static-css/index.mjs"
-    },
-    "./static-css/emit": {
-      "types": "./es/static-css/emit/index.d.mts",
-      "import": "./es/static-css/emit/index.mjs"
-    },
-    "./static-css/runtime": {
-      "types": "./es/static-css/runtime/index.d.mts",
-      "import": "./es/static-css/runtime/index.mjs"
-    },
-    "./static-css/vite": {
-      "types": "./es/static-css/vite/index.d.mts",
-      "import": "./es/static-css/vite/index.mjs"
+    "./form": {
+      "types": "./es/FormKit/index.d.mts",
+      "import": "./es/FormKit/index.mjs"
     },
+    "./global.css": "./es/global.css",
+    "./theme.css": "./es/theme.css",
+    "./style.css": "./es/style.css",
     "./es/*": {
       "types": "./es/*.d.mts",
       "import": "./es/*.mjs"
@@ -117,8 +100,9 @@
     "es"
   ],
   "scripts": {
-    "build": "tsdown && npm run build:packages",
+    "build": "tsdown && tsx ./scripts/buildThemeCss.ts && tsx ./scripts/checkStylexBuild.ts && npm run build:packages",
     "build:packages": "tsx ./scripts/build.ts",
+    "build:stylex-vars": "tsx ./scripts/buildStylexVars.ts",
     "build:watch": "tsdown --watch",
     "ci": "npm run lint:circular && npm run lint && npm run type-check",
     "clean": "rm -r es lib dist coverage .eslintcache node_modules/.cache",
@@ -145,7 +129,6 @@
     "type-check": "lobedocs typegen && tsc --noEmit && tsc --noEmit -p tsconfig.site.json"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^2.1.2",
     "@base-ui/react": "1.8.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -153,7 +136,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@emotion/css": "^11.13.5",
     "@emotion/is-prop-valid": "^1.4.0",
+    "@emotion/serialize": "^1.3.3",
     "@floating-ui/react": "^0.27.19",
     "@giscus/react": "^3.1.0",
     "@lobehub/streamdown": "^1.3.0",
@@ -165,10 +150,10 @@
     "@shikijs/stream": "^4.3.1",
     "@shikijs/transformers": "^4.3.1",
     "@splinetool/runtime": "1.12.98",
+    "@stylexjs/stylex": "0.19.1",
     "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-table": "^9.2.4",
     "ahooks": "^3.9.7",
-    "antd-style": "^4.1.0",
     "beautiful-mermaid": "^1.1.3",
     "chroma-js": "^3.2.0",
     "class-variance-authority": "^0.7.1",
@@ -186,15 +171,10 @@
     "leva": "^0.10.1",
     "lucide-react": "^1.24.0",
     "marked": "^18.0.6",
-    "motion": "^12.0.0",
+    "motion": "^13.0.0 || ^14.0.0",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "query-string": "^9.4.1",
-    "rc-collapse": "^4.0.0",
-    "rc-footer": "^0.6.8",
-    "rc-image": "^7.12.0",
-    "rc-input-number": "^9.5.0",
-    "rc-menu": "^9.16.1",
     "re-resizable": "^6.11.2",
     "react-avatar-editor": "^15.1.0",
     "react-error-boundary": "^6.1.2",
@@ -227,10 +207,9 @@
     "virtua": "^0.52.0"
   },
   "peerDependencies": {
-    "@lobehub/fluent-emoji": "^4.0.0",
-    "@lobehub/icons": "^5.0.0",
-    "antd": "^6.1.1",
-    "motion": "^12.0.0",
+    "@lobehub/fluent-emoji": "^5.0.0-beta.1",
+    "@lobehub/icons": "^6.0.0-beta.1",
+    "motion": "^13.0.0 || ^14.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/es/Accordion/AccordionItem.d.mts

@@ -1,6 +0,0 @@
-import { AccordionItemProps } from "./type.mjs";
-//#region src/Accordion/AccordionItem.d.ts
-declare const AccordionItem: import("react").NamedExoticComponent<AccordionItemProps>;
-//#endregion
-export { AccordionItem as default };
-//# sourceMappingURL=AccordionItem.d.mts.map

package/es/Accordion/AccordionItem.mjs

@@ -1,340 +0,0 @@
-"use client";
-import { useMotionComponent } from "../MotionProvider/index.mjs";
-import { useAccordionConfig, useAccordionItemState } from "./context.mjs";
-import { styles } from "./style.mjs";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Block from "../Block/Block.mjs";
-import Text from "../Text/Text.mjs";
-import { stopPropagation } from "../utils/dom.mjs";
-import ArrowIcon from "./ArrowIcon.mjs";
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import { AnimatePresence } from "motion/react";
-import useMergeState from "use-merge-value";
-//#region src/Accordion/AccordionItem.tsx
-const motionContainerStyle = { overflow: "hidden" };
-const AccordionStaticContent = memo(({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {
-	if (keepContentMounted) return /* @__PURE__ */ jsx("div", {
-		className,
-		role: "region",
-		style: {
-			display: isOpen ? "block" : "none",
-			...style
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			className: contentInnerClassName,
-			children
-		})
-	});
-	if (!isOpen) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		role: "region",
-		style,
-		children: /* @__PURE__ */ jsx("div", {
-			className: contentInnerClassName,
-			children
-		})
-	});
-});
-AccordionStaticContent.displayName = "AccordionStaticContent";
-const AccordionMotionContent = memo(({ contextMotionProps, className, style, children, contentInnerClassName, isOpen, skipInitialAnimation }) => {
-	const Motion = useMotionComponent();
-	const motionProps = useMemo(() => ({
-		animate: "enter",
-		exit: "exit",
-		initial: skipInitialAnimation ? false : "exit",
-		variants: {
-			enter: {
-				height: "auto",
-				opacity: 1,
-				transition: {
-					duration: .2,
-					ease: [
-						.4,
-						0,
-						.2,
-						1
-					]
-				}
-			},
-			exit: {
-				height: 0,
-				opacity: 0,
-				transition: {
-					duration: .2,
-					ease: [
-						.4,
-						0,
-						.2,
-						1
-					]
-				}
-			}
-		},
-		...contextMotionProps
-	}), [contextMotionProps, skipInitialAnimation]);
-	return /* @__PURE__ */ jsx(AnimatePresence, {
-		initial: false,
-		children: isOpen ? /* @__PURE__ */ jsx(Motion.div, {
-			...motionProps,
-			style: motionContainerStyle,
-			children: /* @__PURE__ */ jsx("div", {
-				className,
-				role: "region",
-				style,
-				children: /* @__PURE__ */ jsx("div", {
-					className: contentInnerClassName,
-					children
-				})
-			})
-		}) : null
-	});
-});
-AccordionMotionContent.displayName = "AccordionMotionContent";
-const AccordionItemContent = memo(({ disableAnimation, isOpen, keepContentMounted, className, style, children, contentInnerClassName, contextMotionProps, skipInitialAnimation }) => {
-	if (disableAnimation || !keepContentMounted) return /* @__PURE__ */ jsx(AccordionStaticContent, {
-		className,
-		contentInnerClassName,
-		isOpen,
-		keepContentMounted,
-		style,
-		children
-	});
-	return /* @__PURE__ */ jsx(AccordionMotionContent, {
-		className,
-		contentInnerClassName,
-		contextMotionProps,
-		isOpen,
-		skipInitialAnimation,
-		style,
-		children
-	});
-});
-AccordionItemContent.displayName = "AccordionItemContent";
-const AccordionItem = memo(({ itemKey, title, children, action, alwaysShowAction = false, disabled = false, allowExpand = true, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper, defaultExpand, expand, onExpandChange }) => {
-	const itemStateContext = useAccordionItemState();
-	const configContext = useAccordionConfig();
-	const isStandalone = expand !== void 0 || defaultExpand !== void 0;
-	const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState(defaultExpand ?? false, {
-		onChange: onExpandChange,
-		value: expand
-	});
-	const contextHideIndicator = configContext?.hideIndicator;
-	const contextIndicatorPlacement = configContext?.indicatorPlacement;
-	const contextKeepContentMounted = configContext?.keepContentMounted;
-	const contextDisableAnimation = configContext?.disableAnimation;
-	const contextMotionProps = configContext?.motionProps;
-	const contextVariant = configContext?.variant ?? "borderless";
-	const isInitialRenderRef = useRef(true);
-	useEffect(() => {
-		isInitialRenderRef.current = false;
-	}, []);
-	const isDirectContextItem = itemStateContext?.itemKey === itemKey;
-	let isOpen = false;
-	if (isStandalone) isOpen = isExpandedStandalone;
-	else if (itemStateContext) isOpen = isDirectContextItem ? itemStateContext.isOpen : itemStateContext.isOpen || itemStateContext.isOpenKey(itemKey);
-	const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;
-	const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? "start";
-	const keepContentMounted = contextKeepContentMounted ?? true;
-	const disableAnimation = contextDisableAnimation ?? false;
-	const variant = customVariant || contextVariant;
-	const contextOnToggle = useCallback(() => {
-		if (!itemStateContext) return;
-		if (itemStateContext.itemKey === itemKey) {
-			itemStateContext.onToggle();
-			return;
-		}
-		itemStateContext.onToggleNestedKey(itemKey);
-	}, [itemStateContext, itemKey]);
-	const handleToggle = useCallback(() => {
-		if (!allowExpand) return;
-		if (!disabled) {
-			if (isStandalone) setIsExpandedStandalone(!isExpandedStandalone);
-			else if (contextOnToggle) contextOnToggle();
-		}
-	}, [
-		allowExpand,
-		disabled,
-		isStandalone,
-		setIsExpandedStandalone,
-		isExpandedStandalone,
-		contextOnToggle
-	]);
-	const handleKeyDown = useCallback((e) => {
-		if (!allowExpand || disabled) return;
-		switch (e.key) {
-			case "Enter":
-			case " ":
-				e.preventDefault();
-				handleToggle();
-		}
-	}, [
-		allowExpand,
-		disabled,
-		handleToggle
-	]);
-	const preventTitleTextSelection = useCallback((e) => {
-		if (e?.detail > 1) e.preventDefault();
-	}, []);
-	const indicator = useMemo(() => {
-		if (!allowExpand || hideIndicatorFinal) return null;
-		if (customIndicator) {
-			if (typeof customIndicator === "function") return /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cx(styles.indicator, classNames?.indicator),
-				style: customStyles?.indicator,
-				children: customIndicator({
-					isDisabled: disabled,
-					isOpen
-				})
-			});
-			return /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cx(styles.indicator, classNames?.indicator),
-				style: customStyles?.indicator,
-				children: customIndicator
-			});
-		}
-		return /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: cx(styles.indicator, classNames?.indicator),
-			style: customStyles?.indicator,
-			children: /* @__PURE__ */ jsx(ArrowIcon, { className: cx(styles.icon, isOpen && styles.iconRotate) })
-		});
-	}, [
-		allowExpand,
-		hideIndicatorFinal,
-		customIndicator,
-		disabled,
-		isOpen,
-		classNames,
-		customStyles
-	]);
-	const skipInitialAnimation = isInitialRenderRef.current && isOpen;
-	const contentClassName = useMemo(() => cx("accordion-content", styles.content, classNames?.content), [classNames?.content]);
-	const titleNode = useMemo(() => typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
-		ellipsis: true,
-		className: classNames?.title,
-		style: customStyles?.title,
-		children: title
-	}) : title, [
-		title,
-		classNames?.title,
-		customStyles?.title
-	]);
-	const actionNode = useMemo(() => action && /* @__PURE__ */ jsx(FlexBasic_default, {
-		horizontal: true,
-		align: "center",
-		flex: "none",
-		gap: 4,
-		style: customStyles?.action,
-		className: cx("accordion-action", styles.action, alwaysShowAction && styles.actionVisible, classNames?.action),
-		onClick: stopPropagation,
-		children: action
-	}), [
-		action,
-		alwaysShowAction,
-		classNames?.action,
-		customStyles?.action
-	]);
-	const headerElement = useMemo(() => {
-		const header = /* @__PURE__ */ jsx(Block, {
-			horizontal: true,
-			className: cx("accordion-header", styles.header, classNames?.header),
-			clickable: !disabled && allowExpand,
-			gap: 4,
-			justify: "space-between",
-			padding,
-			paddingBlock,
-			paddingInline,
-			ref,
-			variant: customVariant || variant,
-			style: {
-				alignItems: "center",
-				cursor: disabled ? "not-allowed" : allowExpand ? "pointer" : "default",
-				opacity: disabled ? .5 : void 0,
-				overflow: "hidden",
-				width: "100%",
-				...customStyles?.header
-			},
-			onClick: handleToggle,
-			onKeyDown: handleKeyDown,
-			children: indicatorPlacementFinal === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				className: styles.titleWrapper,
-				flex: 1,
-				gap: 2,
-				style: { overflow: "hidden" },
-				onDoubleClick: preventTitleTextSelection,
-				onMouseDown: preventTitleTextSelection,
-				children: [titleNode, indicator]
-			}), /* @__PURE__ */ jsx(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				flex: "none",
-				gap: 4,
-				children: actionNode
-			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				className: styles.titleWrapper,
-				flex: 1,
-				gap: 2,
-				style: { overflow: "hidden" },
-				onDoubleClick: preventTitleTextSelection,
-				onMouseDown: preventTitleTextSelection,
-				children: titleNode
-			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
-				horizontal: true,
-				align: "center",
-				flex: "none",
-				gap: 4,
-				children: [actionNode, indicator]
-			})] })
-		});
-		if (headerWrapper) return headerWrapper(header);
-		return header;
-	}, [
-		classNames?.header,
-		disabled,
-		allowExpand,
-		padding,
-		paddingBlock,
-		paddingInline,
-		ref,
-		customVariant,
-		variant,
-		customStyles?.header,
-		handleToggle,
-		handleKeyDown,
-		indicatorPlacementFinal,
-		preventTitleTextSelection,
-		titleNode,
-		indicator,
-		actionNode,
-		headerWrapper
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("accordion-item", styles.item, classNames?.base),
-		style: customStyles?.base,
-		children: [headerElement, /* @__PURE__ */ jsx(AccordionItemContent, {
-			className: contentClassName,
-			contentInnerClassName: styles.contentInner,
-			contextMotionProps,
-			disableAnimation: !!disableAnimation,
-			isOpen,
-			keepContentMounted: !!keepContentMounted,
-			skipInitialAnimation,
-			style: customStyles?.content,
-			children
-		})]
-	});
-});
-AccordionItem.displayName = "AccordionItem";
-//#endregion
-export { AccordionItem as default };
-
-//# sourceMappingURL=AccordionItem.mjs.map