@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/EditorSlashMenu/atoms.mjs

@@ -1,20 +1,22 @@
 "use client";
-import { useAppElement } from "../ThemeProvider/AppElementContext.mjs";
-import { styles } from "../base-ui/DropdownMenu/sharedStyle.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
+import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 //#region src/EditorSlashMenu/atoms.tsx
 const mergeStateClassName = (base, className) => {
-	if (typeof className === "function") return (state) => cx(base, className(state));
-	return cx(base, className);
+	if (typeof className === "function") return (state) => clsx$1(base, className(state));
+	return clsx$1(base, className);
 };
+const sx = (styles) => stylex.props(styles).className ?? "";
 const EditorSlashMenuRoot = Autocomplete.Root;
 const EditorSlashMenuList = ({ ref, className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.List, {
 		...rest,
-		className: mergeStateClassName(cx(styles$1.list), className),
+		className: mergeStateClassName(sx(styles.list), className),
 		ref
 	});
 };
@@ -31,25 +33,25 @@ const EditorSlashMenuPositioner = ({ className, align, positionMethod, side, sid
 	return /* @__PURE__ */ jsx(Autocomplete.Positioner, {
 		...rest,
 		align: align ?? "start",
-		className: mergeStateClassName(styles.positioner, className),
 		positionMethod: positionMethod ?? "fixed",
 		side: side ?? "bottom",
-		sideOffset: sideOffset ?? 6
+		sideOffset: sideOffset ?? 6,
+		className: mergeStateClassName(clsx$1(sx(menuStyles.positioner), menuClassNames.positioner), className)
 	});
 };
 EditorSlashMenuPositioner.displayName = "EditorSlashMenuPositioner";
 const EditorSlashMenuPopup = ({ className, initialFocus = false, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Popup, {
 		...rest,
-		className: mergeStateClassName(styles.popup, className),
-		initialFocus
+		initialFocus,
+		className: mergeStateClassName(clsx$1(sx(menuStyles.popup), menuClassNames.popup), className)
 	});
 };
 EditorSlashMenuPopup.displayName = "EditorSlashMenuPopup";
 const EditorSlashMenuItem = ({ className, danger, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Item, {
 		...rest,
-		className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx$1(sx([menuStyles.item, danger && menuStyles.danger]), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuItem.displayName = "EditorSlashMenuItem";
@@ -57,49 +59,49 @@ const EditorSlashMenuGroup = Autocomplete.Group;
 const EditorSlashMenuGroupLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
 		...rest,
-		className: (state) => cx(styles.groupLabel, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx$1(sx(menuStyles.groupLabel), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuGroupLabel.displayName = "EditorSlashMenuGroupLabel";
 const EditorSlashMenuEmpty = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
 		...rest,
-		className: (state) => cx(styles.item, styles.empty, typeof className === "function" ? className(state) : className)
+		className: (state) => clsx$1(sx([menuStyles.item, menuStyles.empty]), typeof className === "function" ? className(state) : className)
 	});
 };
 EditorSlashMenuEmpty.displayName = "EditorSlashMenuEmpty";
 const EditorSlashMenuItemContent = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: cx(styles.itemContent, className)
+		className: clsx$1(sx(menuStyles.itemContent), className)
 	});
 };
 EditorSlashMenuItemContent.displayName = "EditorSlashMenuItemContent";
 const EditorSlashMenuItemIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.icon, className)
+		className: clsx$1(sx(menuStyles.icon), menuClassNames.icon, className)
 	});
 };
 EditorSlashMenuItemIcon.displayName = "EditorSlashMenuItemIcon";
 const EditorSlashMenuItemLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.label, className)
+		className: clsx$1(sx(menuStyles.label), menuClassNames.label, className)
 	});
 };
 EditorSlashMenuItemLabel.displayName = "EditorSlashMenuItemLabel";
 const EditorSlashMenuItemExtra = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cx(styles.extra, className)
+		className: clsx$1(sx(menuStyles.extra), className)
 	});
 };
 EditorSlashMenuItemExtra.displayName = "EditorSlashMenuItemExtra";
 const EditorSlashMenuHiddenInput = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Input, {
 		...rest,
-		className: mergeStateClassName(cx(styles$1.hiddenInput), className)
+		className: mergeStateClassName(sx(styles.hiddenInput), className)
 	});
 };
 EditorSlashMenuHiddenInput.displayName = "EditorSlashMenuHiddenInput";

package/es/EditorSlashMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport const EditorSlashMenuRoot = Autocomplete.Root;\nexport const EditorSlashMenuList = ({\n  ref,\n  className,\n  ...rest\n}: React.ComponentProps<typeof Autocomplete.List> & {\n  ref?: React.RefObject<HTMLDivElement | null>;\n}) => {\n  return (\n    <Autocomplete.List\n      {...rest}\n      className={mergeStateClassName(cx(styles.list), className as any) as any}\n      ref={ref}\n    />\n  );\n};\nEditorSlashMenuList.displayName = 'EditorSlashMenuList';\n\nexport type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const EditorSlashMenuPortal = ({ container, ...rest }: EditorSlashMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Autocomplete.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\nEditorSlashMenuPortal.displayName = 'EditorSlashMenuPortal';\n\nexport type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;\n\nexport const EditorSlashMenuPositioner = ({\n  className,\n  align,\n  positionMethod,\n  side,\n  sideOffset,\n  ...rest\n}: EditorSlashMenuPositionerProps) => {\n  return (\n    <Autocomplete.Positioner\n      {...rest}\n      align={align ?? 'start'}\n      className={mergeStateClassName(menuStyles.positioner, className as any) as any}\n      positionMethod={positionMethod ?? 'fixed'}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n    />\n  );\n};\nEditorSlashMenuPositioner.displayName = 'EditorSlashMenuPositioner';\n\nexport type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;\n\nexport const EditorSlashMenuPopup = ({\n  className,\n  initialFocus = false,\n  ...rest\n}: EditorSlashMenuPopupProps) => {\n  return (\n    <Autocomplete.Popup\n      {...rest}\n      className={mergeStateClassName(menuStyles.popup, className as any) as any}\n      initialFocus={initialFocus}\n    />\n  );\n};\nEditorSlashMenuPopup.displayName = 'EditorSlashMenuPopup';\n\nexport type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {\n  danger?: boolean;\n};\n\nexport const EditorSlashMenuItem = ({ className, danger, ...rest }: EditorSlashMenuItemProps) => {\n  return (\n    <Autocomplete.Item\n      {...rest}\n      className={(state) =>\n        cx(\n          menuStyles.item,\n          danger && menuStyles.danger,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuItem.displayName = 'EditorSlashMenuItem';\n\nexport type EditorSlashMenuGroupProps = React.ComponentProps<typeof Autocomplete.Group>;\nexport const EditorSlashMenuGroup = Autocomplete.Group;\n\nexport type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;\n\nexport const EditorSlashMenuGroupLabel = ({\n  className,\n  ...rest\n}: EditorSlashMenuGroupLabelProps) => {\n  return (\n    <Autocomplete.GroupLabel\n      {...rest}\n      className={(state) =>\n        cx(menuStyles.groupLabel, typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\nEditorSlashMenuGroupLabel.displayName = 'EditorSlashMenuGroupLabel';\n\nexport type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;\n\nexport const EditorSlashMenuEmpty = ({ className, ...rest }: EditorSlashMenuEmptyProps) => {\n  return (\n    <Autocomplete.Empty\n      {...rest}\n      className={(state) =>\n        cx(\n          menuStyles.item,\n          menuStyles.empty,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuEmpty.displayName = 'EditorSlashMenuEmpty';\n\nexport type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\nexport const EditorSlashMenuItemContent = ({\n  className,\n  ...rest\n}: EditorSlashMenuItemContentProps) => {\n  return <div {...rest} className={cx(menuStyles.itemContent, className)} />;\n};\nEditorSlashMenuItemContent.displayName = 'EditorSlashMenuItemContent';\n\nexport type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemIcon = ({ className, ...rest }: EditorSlashMenuItemIconProps) => {\n  return <span {...rest} className={cx(menuStyles.icon, className)} />;\n};\nEditorSlashMenuItemIcon.displayName = 'EditorSlashMenuItemIcon';\n\nexport type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemLabel = ({ className, ...rest }: EditorSlashMenuItemLabelProps) => {\n  return <span {...rest} className={cx(menuStyles.label, className)} />;\n};\nEditorSlashMenuItemLabel.displayName = 'EditorSlashMenuItemLabel';\n\nexport type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemExtra = ({ className, ...rest }: EditorSlashMenuItemExtraProps) => {\n  return <span {...rest} className={cx(menuStyles.extra, className)} />;\n};\nEditorSlashMenuItemExtra.displayName = 'EditorSlashMenuItemExtra';\n\nexport type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;\nexport const EditorSlashMenuHiddenInput = ({\n  className,\n  ...rest\n}: EditorSlashMenuHiddenInputProps) => {\n  return (\n    <Autocomplete.Input\n      {...rest}\n      className={mergeStateClassName(cx(styles.hiddenInput), className as any) as any}\n    />\n  );\n};\nEditorSlashMenuHiddenInput.displayName = 'EditorSlashMenuHiddenInput';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/EditorSlashMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\n\nimport { useAppElement } from '@/ConfigProvider';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { type styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: Parameters<typeof styleProps>[0]) => stylex.props(styles).className ?? '';\n\nexport const EditorSlashMenuRoot = Autocomplete.Root;\nexport const EditorSlashMenuList = ({\n  ref,\n  className,\n  ...rest\n}: React.ComponentProps<typeof Autocomplete.List> & {\n  ref?: React.RefObject<HTMLDivElement | null>;\n}) => {\n  return (\n    <Autocomplete.List\n      {...rest}\n      className={mergeStateClassName(sx(styles.list), className as any) as any}\n      ref={ref}\n    />\n  );\n};\nEditorSlashMenuList.displayName = 'EditorSlashMenuList';\n\nexport type EditorSlashMenuPortalProps = React.ComponentProps<typeof Autocomplete.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const EditorSlashMenuPortal = ({ container, ...rest }: EditorSlashMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Autocomplete.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\nEditorSlashMenuPortal.displayName = 'EditorSlashMenuPortal';\n\nexport type EditorSlashMenuPositionerProps = React.ComponentProps<typeof Autocomplete.Positioner>;\n\nexport const EditorSlashMenuPositioner = ({\n  className,\n  align,\n  positionMethod,\n  side,\n  sideOffset,\n  ...rest\n}: EditorSlashMenuPositionerProps) => {\n  return (\n    <Autocomplete.Positioner\n      {...rest}\n      align={align ?? 'start'}\n      positionMethod={positionMethod ?? 'fixed'}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      className={\n        mergeStateClassName(\n          clsx(sx(menuStyles.positioner), menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\nEditorSlashMenuPositioner.displayName = 'EditorSlashMenuPositioner';\n\nexport type EditorSlashMenuPopupProps = React.ComponentProps<typeof Autocomplete.Popup>;\n\nexport const EditorSlashMenuPopup = ({\n  className,\n  initialFocus = false,\n  ...rest\n}: EditorSlashMenuPopupProps) => {\n  return (\n    <Autocomplete.Popup\n      {...rest}\n      initialFocus={initialFocus}\n      className={\n        mergeStateClassName(\n          clsx(sx(menuStyles.popup), menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\nEditorSlashMenuPopup.displayName = 'EditorSlashMenuPopup';\n\nexport type EditorSlashMenuItemProps = React.ComponentProps<typeof Autocomplete.Item> & {\n  danger?: boolean;\n};\n\nexport const EditorSlashMenuItem = ({ className, danger, ...rest }: EditorSlashMenuItemProps) => {\n  return (\n    <Autocomplete.Item\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx([menuStyles.item, danger && menuStyles.danger]),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuItem.displayName = 'EditorSlashMenuItem';\n\nexport type EditorSlashMenuGroupProps = React.ComponentProps<typeof Autocomplete.Group>;\nexport const EditorSlashMenuGroup = Autocomplete.Group;\n\nexport type EditorSlashMenuGroupLabelProps = React.ComponentProps<typeof Autocomplete.GroupLabel>;\n\nexport const EditorSlashMenuGroupLabel = ({\n  className,\n  ...rest\n}: EditorSlashMenuGroupLabelProps) => {\n  return (\n    <Autocomplete.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuGroupLabel.displayName = 'EditorSlashMenuGroupLabel';\n\nexport type EditorSlashMenuEmptyProps = React.ComponentProps<typeof Autocomplete.Empty>;\n\nexport const EditorSlashMenuEmpty = ({ className, ...rest }: EditorSlashMenuEmptyProps) => {\n  return (\n    <Autocomplete.Empty\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx([menuStyles.item, menuStyles.empty]),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\nEditorSlashMenuEmpty.displayName = 'EditorSlashMenuEmpty';\n\nexport type EditorSlashMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\nexport const EditorSlashMenuItemContent = ({\n  className,\n  ...rest\n}: EditorSlashMenuItemContentProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.itemContent), className)} />;\n};\nEditorSlashMenuItemContent.displayName = 'EditorSlashMenuItemContent';\n\nexport type EditorSlashMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemIcon = ({ className, ...rest }: EditorSlashMenuItemIconProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.icon), menuClassNames.icon, className)} />;\n};\nEditorSlashMenuItemIcon.displayName = 'EditorSlashMenuItemIcon';\n\nexport type EditorSlashMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemLabel = ({ className, ...rest }: EditorSlashMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label), menuClassNames.label, className)} />;\n};\nEditorSlashMenuItemLabel.displayName = 'EditorSlashMenuItemLabel';\n\nexport type EditorSlashMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\nexport const EditorSlashMenuItemExtra = ({ className, ...rest }: EditorSlashMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\nEditorSlashMenuItemExtra.displayName = 'EditorSlashMenuItemExtra';\n\nexport type EditorSlashMenuHiddenInputProps = React.ComponentProps<typeof Autocomplete.Input>;\nexport const EditorSlashMenuHiddenInput = ({\n  className,\n  ...rest\n}: EditorSlashMenuHiddenInputProps) => {\n  return (\n    <Autocomplete.Input\n      {...rest}\n      className={mergeStateClassName(sx(styles.hiddenInput), className as any) as any}\n    />\n  );\n};\nEditorSlashMenuHiddenInput.displayName = 'EditorSlashMenuHiddenInput';\n"],"mappings":"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"}

package/es/EditorSlashMenu/style.mjs

@@ -1,27 +1,25 @@
-"use client";
-import { createStaticStyles } from "antd-style";
 //#region src/EditorSlashMenu/style.ts
-const styles = createStaticStyles(({ css }) => ({
-	hiddenInput: css`
-    position: absolute;
-
-    overflow: hidden;
-
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-
-    white-space: nowrap;
-
-    clip: rect(0, 0, 0, 0);
-  `,
-	list: css`
-    overflow: auto;
-    max-height: 320px;
-  `
-}));
+const styles = {
+	hiddenInput: {
+		kogj98: "lbkdpibf",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kVQacm: "lbb3r6kr",
+		kMcinP: "lbzpqnlu",
+		kVAEAm: "lb10l6tqk",
+		khDVqt: "lbuxw1ft",
+		kZKoxP: "lbjm9jq1",
+		kzqmXN: "lb1i1rx1s",
+		$$css: true
+	},
+	list: {
+		kVQacm: "lbysyzu8",
+		kskxy: "lb1sslpiy",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/EditorSlashMenu/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EditorSlashMenu/style.ts"],"sourcesContent":["'use client';\n\nimport { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  // Optional hidden input for keyboard navigation (opt-in).\n  hiddenInput: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n\n    white-space: nowrap;\n\n    clip: rect(0, 0, 0, 0);\n  `,\n  list: css`\n    overflow: auto;\n    max-height: 320px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CAErD,aAAa,GAAG;;;;;;;;;;;;;;;CAehB,MAAM,GAAG;;;;AAIX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/EditorSlashMenu/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  hiddenInput: {\n    margin: -1,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 0,\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n    height: 1,\n    width: 1,\n  },\n  list: {\n    overflow: 'auto',\n    maxHeight: 320,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,OAAO;CACT;AACF"}

package/es/EditorSlashMenu/type.d.mts

@@ -1,8 +1,8 @@
 import React from "react";
 import { AutocompleteRootChangeEventDetails } from "@base-ui/react/autocomplete";
 //#region src/EditorSlashMenu/type.d.ts
-type EditorSlashMenuItemValue = string;
-type EditorSlashMenuOption = {
+export type EditorSlashMenuItemValue = string;
+export type EditorSlashMenuOption = {
   /** Render danger style (red) */
   danger?: boolean;
   /** Whether the item is disabled */
@@ -18,19 +18,18 @@ type EditorSlashMenuOption = {
   /** Unique id of the command */
   value: EditorSlashMenuItemValue;
 };
-type EditorSlashMenuGroup = {
+export type EditorSlashMenuGroup = {
   items: EditorSlashMenuOption[];
   /** Optional group title */
   label?: string;
 };
-type EditorSlashMenuItems = Array<EditorSlashMenuOption | EditorSlashMenuGroup>;
-type EditorSlashMenuOnOpenChange = (open: boolean, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuOnValueChange = (value: string, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuOnSelect = (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;
-type EditorSlashMenuValueToString = (item: EditorSlashMenuOption) => string;
-type EditorSlashMenuRenderItem = (item: EditorSlashMenuOption) => React.ReactNode;
-type EditorSlashMenuRenderGroupLabel = (label: string) => React.ReactNode;
-type EditorSlashMenuPlacement = 'top' | 'bottom';
+export type EditorSlashMenuItems = Array<EditorSlashMenuOption | EditorSlashMenuGroup>;
+export type EditorSlashMenuOnOpenChange = (open: boolean, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuOnValueChange = (value: string, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuOnSelect = (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;
+export type EditorSlashMenuValueToString = (item: EditorSlashMenuOption) => string;
+export type EditorSlashMenuRenderItem = (item: EditorSlashMenuOption) => React.ReactNode;
+export type EditorSlashMenuRenderGroupLabel = (label: string) => React.ReactNode;
+export type EditorSlashMenuPlacement = 'top' | 'bottom';
 //#endregion
-export { EditorSlashMenuGroup, EditorSlashMenuItemValue, EditorSlashMenuItems, EditorSlashMenuOnOpenChange, EditorSlashMenuOnSelect, EditorSlashMenuOnValueChange, EditorSlashMenuOption, EditorSlashMenuPlacement, EditorSlashMenuRenderGroupLabel, EditorSlashMenuRenderItem, EditorSlashMenuValueToString };
 //# sourceMappingURL=type.d.mts.map

package/es/EmojiPicker/AvatarUploader.mjs

@@ -1,17 +1,17 @@
 "use client";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../Icon/Icon.mjs";
+import Button from "../Button/Button.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
-import Icon from "../Icon/Icon.mjs";
-import Text from "../Text/Text.mjs";
-import Button from "../base-ui/Button/Button.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import UploadDragger from "../base-ui/Upload/UploadDragger.mjs";
-import Tag from "../base-ui/Tag/Tag.mjs";
+import Text from "../Text/Text.mjs";
+import Tag from "../Tag/Tag.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
-import { ToastHost, toast } from "../base-ui/Toast/imperative.mjs";
+import { ToastHost, toast } from "../Toast/imperative.mjs";
+import UploadDragger from "../Upload/UploadDragger.mjs";
 import { memo, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar } from "antd-style";
 import { ChevronLeftIcon, ImageUpIcon } from "lucide-react";
 import AvatarEditor from "react-avatar-editor";
 //#region src/EmojiPicker/AvatarUploader.tsx

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/base-ui/Button';\nimport Tag from '@/base-ui/Tag';\nimport { toast, ToastHost } from '@/base-ui/Toast';\nimport { UploadDragger } from '@/base-ui/Upload';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\nconst ACCEPTED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);\n\nconst readAsDataURL = (file: File, onLoad: (dataUrl: string) => void) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onLoad(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const handleFiles = useCallback(\n      ([file]: File[]) => {\n        if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {\n          toast.error(fileTypeErrorText);\n          return;\n        }\n        readAsDataURL(file, setPreviewImage);\n      },\n      [fileTypeErrorText],\n    );\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <UploadDragger maxCount={1} onFiles={handleFiles}>\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </UploadDragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n        <ToastHost />\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,uCAAuB,IAAI,IAAI;CAAC;CAAc;CAAa;CAAa;AAAY,CAAC;AAE3F,MAAM,iBAAiB,MAAY,WAAsC;CACvE,MAAM,SAAS,IAAI,WAAW;CAC9B,OAAO,cAAc,IAAI;CACzB,OAAO,iBAAiB,cAAc;EACpC,OAAO,OAAO,OAAO,MAAM,CAAC;CAC9B,CAAC;AACH;AAEA,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,IAAI;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAEhD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,2BAA2B;CAC/E,MAAM,kBAAkB,OAAO,eAAe,EAAE,yBAAyB;CACzE,MAAM,gBAAgB,OAAO,aAAa,EAAE,uBAAuB;CAEnE,MAAM,cAAc,aACjB,CAAC,UAAkB;EAClB,IAAI,CAAC,qBAAqB,IAAI,KAAK,IAAI,GAAG;GACxC,MAAM,MAAM,iBAAiB;GAC7B;EACF;EACA,cAAc,MAAM,eAAe;CACrC,GACA,CAAC,iBAAiB,CACpB;CAEA,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,SAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,uBAAuB;EAE3D,SADgB,aAAa,UACd,CAAC;EAEhB,IAAI,CAAC,UAAU;EAGf,aAAa,QACV,SAAS;GACR,IAAI,MAEF,SAAS,IADQ,KAAK,CAAC,IAAI,GAAG,eAAe,EAAE,MAAM,aAAa,CACtD,CAAC;EAEjB,GACA,cACA,GACF;CACF;CAEA,OACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EAA9D,UAAA;GACG,CAAC,gBACA,oBAAC,eAAD;IAAe,UAAU;IAAG,SAAS;IACnC,UAAA,qBAAC,QAAD;KAAQ,KAAK;KAAI,QAAQ;KAAc,OAAO;KAA9C,UAAA;MACE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAsB,MAAM;OAAa,MAAM;MAAK,CAAA;MACxE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAqB,UAAA;MAAsB,CAAA;MAC/D,qBAAC,QAAD;OAAQ,YAAA;OAAW,KAAK;OAAxB,UAAA;QACE,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,OAAS,CAAA;OACR;;KACF;;GACK,CAAA;GAEhB,gBACC,qBAAC,QAAD;IAAQ,KAAK;IAAG,OAAO,EAAE,UAAU,WAAW;IAAG,OAAO;IAAxD,UAAA,CACE,oBAAC,cAAD;KACE,QAAQ;KACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;KAC9D,QAAQ;KACR,OAAO;KACP,KAAK;KACL,OAAO;IACR,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,KAAK;KAAG,OAAO,EAAE,UAAU,WAAW;KAAG,OAAO;KAApE,UAAA,CACE,oBAAC,QAAD;MACE,MAAM;MACN,OAAO,EAAE,MAAM,OAAO;MACtB,eAAe,gBAAgB,EAAE;KAClC,CAAA,GACD,oBAAC,QAAD;MAAQ,OAAO;OAAE,MAAM;OAAG,YAAY;MAAI;MAAG,MAAM;MAAW,SAAS;MACpE,UAAA;KACK,CAAA,CACD;IACH,CAAA,CAAA;;GAEV,oBAAC,WAAD,CAAY,CAAA;EACL;;AAEb,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { toast, ToastHost } from '@/Toast';\nimport { UploadDragger } from '@/Upload';\n\nimport { type AvatarUploaderProps } from './type';\n\nconst ACCEPTED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);\n\nconst readAsDataURL = (file: File, onLoad: (dataUrl: string) => void) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onLoad(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const handleFiles = useCallback(\n      ([file]: File[]) => {\n        if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {\n          toast.error(fileTypeErrorText);\n          return;\n        }\n        readAsDataURL(file, setPreviewImage);\n      },\n      [fileTypeErrorText],\n    );\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <UploadDragger maxCount={1} onFiles={handleFiles}>\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </UploadDragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n        <ToastHost />\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,uCAAuB,IAAI,IAAI;CAAC;CAAc;CAAa;CAAa;AAAY,CAAC;AAE3F,MAAM,iBAAiB,MAAY,WAAsC;CACvE,MAAM,SAAS,IAAI,WAAW;CAC9B,OAAO,cAAc,IAAI;CACzB,OAAO,iBAAiB,cAAc;EACpC,OAAO,OAAO,OAAO,MAAM,CAAC;CAC9B,CAAC;AACH;AAEA,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,IAAI;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAEhD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,2BAA2B;CAC/E,MAAM,kBAAkB,OAAO,eAAe,EAAE,yBAAyB;CACzE,MAAM,gBAAgB,OAAO,aAAa,EAAE,uBAAuB;CAEnE,MAAM,cAAc,aACjB,CAAC,UAAkB;EAClB,IAAI,CAAC,qBAAqB,IAAI,KAAK,IAAI,GAAG;GACxC,MAAM,MAAM,iBAAiB;GAC7B;EACF;EACA,cAAc,MAAM,eAAe;CACrC,GACA,CAAC,iBAAiB,CACpB;CAEA,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,SAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,uBAAuB;EAE3D,SADgB,aAAa,UACd,CAAC;EAEhB,IAAI,CAAC,UAAU;EAGf,aAAa,QACV,SAAS;GACR,IAAI,MAEF,SAAS,IADQ,KAAK,CAAC,IAAI,GAAG,eAAe,EAAE,MAAM,aAAa,CACtD,CAAC;EAEjB,GACA,cACA,GACF;CACF;CAEA,OACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EAA9D,UAAA;GACG,CAAC,gBACA,oBAAC,eAAD;IAAe,UAAU;IAAG,SAAS;IACnC,UAAA,qBAAC,QAAD;KAAQ,KAAK;KAAI,QAAQ;KAAc,OAAO;KAA9C,UAAA;MACE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAsB,MAAM;OAAa,MAAM;MAAK,CAAA;MACxE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAqB,UAAA;MAAsB,CAAA;MAC/D,qBAAC,QAAD;OAAQ,YAAA;OAAW,KAAK;OAAxB,UAAA;QACE,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,OAAS,CAAA;OACR;;KACF;;GACK,CAAA;GAEhB,gBACC,qBAAC,QAAD;IAAQ,KAAK;IAAG,OAAO,EAAE,UAAU,WAAW;IAAG,OAAO;IAAxD,UAAA,CACE,oBAAC,cAAD;KACE,QAAQ;KACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;KAC9D,QAAQ;KACR,OAAO;KACP,KAAK;KACL,OAAO;IACR,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,KAAK;KAAG,OAAO,EAAE,UAAU,WAAW;KAAG,OAAO;KAApE,UAAA,CACE,oBAAC,QAAD;MACE,MAAM;MACN,OAAO,EAAE,MAAM,OAAO;MACtB,eAAe,gBAAgB,EAAE;KAClC,CAAA,GACD,oBAAC,QAAD;MAAQ,OAAO;OAAE,MAAM;OAAG,YAAY;MAAI;MAAG,MAAM;MAAW,SAAS;MACpE,UAAA;KACK,CAAA,CACD;IACH,CAAA,CAAA;;GAEV,oBAAC,WAAD,CAAY,CAAA;EACL;;AAEb,CACF;AAEA,eAAe,cAAc"}

package/es/EmojiPicker/EmojiPicker.mjs

@@ -1,32 +1,35 @@
 "use client";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
-import { Tooltip } from "../base-ui/Tooltip/Tooltip.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useTheme } from "../styles/theme/scope.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import Popover from "../base-ui/Popover/Popover.mjs";
-import Avatar from "../base-ui/Avatar/index.mjs";
-import Tabs from "../base-ui/Tabs/Tabs.mjs";
+import Avatar from "../Avatar/index.mjs";
+import Popover from "../Popover/Popover.mjs";
 import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
+import Tabs from "../Tabs/Tabs.mjs";
 import AvatarUploader from "./AvatarUploader.mjs";
+import { loadEmojiData } from "./loadEmojiData.mjs";
 import { styles } from "./style.mjs";
+import { useEmojiMartI18n } from "./useEmojiMartI18n.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useTheme } from "antd-style";
-import useMergeState from "use-merge-value";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
 import chroma from "chroma-js";
-import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { getLobeIconCDN } from "@lobehub/icons/es/features/getLobeIconCDN";
 import { toc } from "@lobehub/icons/es/toc";
-import useSWR from "swr";
 //#region src/EmojiPicker/EmojiPicker.tsx
 const DEFAULT_AVATAR = "🤖";
 const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, allowModelAvatar, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
 	const ref = useRef(null);
 	const { t } = useTranslation(emojiPicker_default);
-	const [visible, setVisible] = useMergeState(defaultOpen, {
+	const [visible, setVisible] = useControlledState(defaultOpen, {
 		defaultValue: defaultOpen,
 		onChange: onOpenChange,
 		value: open
@@ -37,14 +40,8 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		"--emoji-picker-rgb-accent": chroma(theme.colorPrimary).rgb().join(", "),
 		"--emoji-picker-rgb-background": chroma(theme.colorBgElevated).rgb().join(", ")
 	}), [theme.colorPrimary, theme.colorBgElevated]);
-	const { data: i18n } = useSWR(locale, async () => await import(
-		/* @vite-ignore */
-		`@emoji-mart/data/i18n/${locale.split("-")[0]}.json`
-), {
-		revalidateOnFocus: false,
-		revalidateOnMount: false
-	});
-	const [ava, setAva] = useMergeState(defaultAvatar, {
+	const i18n = useEmojiMartI18n(locale);
+	const [ava, setAva] = useControlledState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,
 		value
@@ -111,20 +108,19 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 	].filter(Boolean);
 	const showTabs = allowDelete || items && items.length > 1;
 	const content = /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(styles.picker, popupClassName),
 		ref,
-		style: {
+		...styleProps(styles.picker, clsx$1("lobe-emoji-picker", popupClassName), {
 			minWidth: 310,
 			paddingTop: showTabs ? 4 : 0,
 			...pickerCssVariables,
 			...popupStyle
-		},
+		}),
 		...contentProps,
 		children: [
 			showTabs && /* @__PURE__ */ jsxs(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: styles.tabs,
+				...stylex.props(styles.tabs),
 				justify: "space-between",
 				paddingInline: 10,
 				children: [/* @__PURE__ */ jsx(Tabs, {
@@ -132,10 +128,10 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 					items,
 					variant: "square",
 					classNames: {
-						indicator: styles.tabsIndicator,
-						list: styles.tabsList,
-						root: styles.tabsRoot,
-						tab: styles.tab
+						indicator: "lobe-emoji-picker-tabs-indicator",
+						list: "lobe-emoji-picker-tabs-list",
+						root: "lobe-emoji-picker-tabs-root",
+						tab: "lobe-emoji-picker-tab"
 					},
 					onChange: (key) => setTab(key)
 				}), allowDelete && /* @__PURE__ */ jsx(ActionIcon, {
@@ -153,7 +149,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 			}),
 			tab === "emoji" && /* @__PURE__ */ jsx(Picker, {
 				custom: mergedCustomEmojis,
-				data,
+				data: loadEmojiData,
 				i18n,
 				icons: "outline",
 				locale: locale.split("-")[0],
@@ -177,15 +173,15 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		]
 	});
 	return /* @__PURE__ */ jsx(Popover, {
-		className: cx(styles.popover),
+		className: "lobe-emoji-picker-popover",
 		content,
 		defaultOpen,
 		open: visible,
 		placement: "bottom",
 		trigger: "click",
 		classNames: {
-			content: styles.popover,
-			root: styles.positioner
+			content: "lobe-emoji-picker-popover",
+			root: "lobe-emoji-picker-positioner"
 		},
 		onOpenChange: (v) => {
 			if (loading) return;
@@ -194,7 +190,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		...popupProps,
 		children: customRender ? customRender(ava) : /* @__PURE__ */ jsx(Avatar, {
 			avatar: ava,
-			className: cx(styles.root, className),
+			className: clsx$1("lobe-emoji-picker-avatar", className),
 			loading,
 			shape,
 			...rest

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN } from '@lobehub/icons/es/features/getLobeIconCDN';\nimport { toc } from '@lobehub/icons/es/toc';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Avatar from '@/base-ui/Avatar';\nimport Tabs, { type TabsProps } from '@/base-ui/Tabs';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useMergeState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () =>\n        await import(/* @vite-ignore */ `@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n      { revalidateOnFocus: false, revalidateOnMount: false },\n    );\n\n    const [ava, setAva] = useMergeState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        className={cx(styles.picker, popupClassName)}\n        ref={ref}\n        style={{\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        }}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styles.tabs}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              items={items}\n              variant={'square'}\n              classNames={{\n                indicator: styles.tabsIndicator,\n                list: styles.tabsList,\n                root: styles.tabsRoot,\n                tab: styles.tab,\n              }}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className={cx(styles.popover)}\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: styles.popover,\n          root: styles.positioner,\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={cx(styles.root, className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox","clsx"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN } from '@lobehub/icons/es/features/getLobeIconCDN';\nimport { toc } from '@lobehub/icons/es/toc';\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport clsx from 'clsx';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { loadEmojiData } from './loadEmojiData';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\nimport { useEmojiMartI18n } from './useEmojiMartI18n';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useControlledState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const i18n = useEmojiMartI18n(locale);\n\n    const [ava, setAva] = useControlledState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        ref={ref}\n        {...styleProps(styles.picker, clsx('lobe-emoji-picker', popupClassName), {\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        })}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            {...stylex.props(styles.tabs)}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              items={items}\n              variant={'square'}\n              classNames={{\n                indicator: 'lobe-emoji-picker-tabs-indicator',\n                list: 'lobe-emoji-picker-tabs-list',\n                root: 'lobe-emoji-picker-tabs-root',\n                tab: 'lobe-emoji-picker-tab',\n              }}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={loadEmojiData}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className=\"lobe-emoji-picker-popover\"\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: 'lobe-emoji-picker-popover',\n          root: 'lobe-emoji-picker-positioner',\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={clsx('lobe-emoji-picker-avatar', className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

package/es/EmojiPicker/loadEmojiData.mjs

@@ -0,0 +1,6 @@
+//#region src/EmojiPicker/loadEmojiData.ts
+const loadEmojiData = () => import("@emoji-mart/data").then((module) => module.default);
+//#endregion
+export { loadEmojiData };
+
+//# sourceMappingURL=loadEmojiData.mjs.map

package/es/EmojiPicker/loadEmojiData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadEmojiData.mjs","names":[],"sources":["../../src/EmojiPicker/loadEmojiData.ts"],"sourcesContent":["// `@emoji-mart/data` resolves to a JSON file, which Node only loads with an import attribute,\n// so it stays out of the static graph and loads when the picker opens.\nexport const loadEmojiData = (): Promise<unknown> =>\n  import('@emoji-mart/data').then((module) => module.default);\n"],"mappings":";AAEA,MAAa,sBACX,OAAO,mBAAmB,CAAC,MAAM,WAAW,OAAO,OAAO"}

package/es/EmojiPicker/style.mjs

@@ -1,68 +1,16 @@
-import { createStaticStyles } from "antd-style";
 //#region src/EmojiPicker/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	picker: css`
-    position: relative;
-
-    em-emoji-picker {
-      --rgb-accent: var(--emoji-picker-rgb-accent, 0, 0, 0);
-      --shadow: none;
-      --rgb-background: var(--emoji-picker-rgb-background, 255, 255, 255);
-      --border-radius: 0;
-    }
-  `,
-	popover: css`
-    overflow: hidden;
-    padding: 0;
-  `,
-	positioner: css`
-    width: fit-content !important;
-  `,
-	root: css`
-    position: relative;
-    transition: background 150ms ${cssVar.motionEaseOut};
-
-    &:hover {
-      background: ${cssVar.colorFillSecondary};
-    }
-  `,
-	tab: css`
-    && {
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border-radius: ${cssVar.borderRadius};
-
-      transition: background-color 100ms ease-out;
-    }
-
-    &&:hover:not([data-disabled]) {
-      background: ${cssVar.colorFillTertiary};
-    }
-  `,
-	tabs: css`
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-  `,
-	tabsIndicator: css`
-    && {
-      height: 3px;
-      border-start-start-radius: 3px;
-      border-start-end-radius: 3px;
-    }
-  `,
-	tabsList: css`
-    && {
-      gap: 8px;
-      padding: 4px;
-      box-shadow: none;
-    }
-  `,
-	tabsRoot: css`
-    && {
-      width: auto;
-    }
-  `
-}));
+const styles = {
+	picker: {
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	tabs: {
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };