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

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { Input, type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAACA,eAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACC,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ControlInput.mjs","names":["Flexbox","Input"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { Input, type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = useEventCallback(() => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    });\n\n    const handleReset = useEventCallback(() => setInput(value || ''));\n\n    const dirty = value !== input;\n    const resetText = texts?.reset || 'Reset';\n    const submitText = texts?.submit || 'Submit';\n\n    const suffix = useMemo(\n      () =>\n        dirty ? (\n          <Flexbox\n            horizontal\n            gap={2}\n            style={{\n              marginRight: -4,\n              zIndex: 1,\n            }}\n          >\n            <ActionIcon\n              icon={RotateCcw}\n              size=\"small\"\n              title={resetText}\n              onClick={(e) => {\n                e.preventDefault();\n                handleReset();\n              }}\n            />\n            <ActionIcon\n              icon={submitIcon || Save}\n              size=\"small\"\n              title={submitText}\n              variant={'filled'}\n              onClick={(e) => {\n                e.preventDefault();\n                handleUpload();\n              }}\n            />\n          </Flexbox>\n        ) : (\n          <span />\n        ),\n      [dirty, handleReset, handleUpload, resetText, submitIcon, submitText],\n    );\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        suffix={suffix}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,uBAAuB;EAC1C,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB,CAAC;CAED,MAAM,cAAc,uBAAuB,SAAS,SAAS,EAAE,CAAC;CAEhE,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,OAAO,SAAS;CAClC,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,SAAS,cAEX,QACE,qBAACA,mBAAD;EACE,YAAA;EACA,KAAK;EACL,OAAO;GACL,aAAa;GACb,QAAQ;EACV;EANF,UAAA,CAQE,oBAAC,YAAD;GACE,MAAM;GACN,MAAK;GACL,OAAO;GACP,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,YAAY;GACd;EACD,CAAA,GACD,oBAAC,YAAD;GACE,MAAM,cAAc;GACpB,MAAK;GACL,OAAO;GACP,SAAS;GACT,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,aAAa;GACf;EACD,CAAA,CACM;CAET,CAAA,IAAA,oBAAC,QAAD,CAAO,CAAA,GAEX;EAAC;EAAO;EAAa;EAAc;EAAW;EAAY;CAAU,CACtE;CAEA,OACE,oBAACC,eAAD;EACE,WAAA;EACK;EACG;EACR,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACS;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/EditableText.mjs

@@ -1,12 +1,12 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { cx } from "../styles/css.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import ControlInput from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Edit3 } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/EditableText/EditableText.tsx
 const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEditingChange, onChangeEnd, onFocus, onBlur, className, inputProps, onValueChanging, gap = 8, style, size = "small", styles, classNames, variant = "borderless", ...rest }) => {

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { cx } from '@/styles';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/styles';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/EditorSlashMenu/atoms.mjs

@@ -3,13 +3,13 @@ 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 clsx from "clsx";
+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) => clsx(base, className(state));
-	return clsx(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;
@@ -36,7 +36,7 @@ const EditorSlashMenuPositioner = ({ className, align, positionMethod, side, sid
 		positionMethod: positionMethod ?? "fixed",
 		side: side ?? "bottom",
 		sideOffset: sideOffset ?? 6,
-		className: mergeStateClassName(clsx(sx(menuStyles.positioner), menuClassNames.positioner), className)
+		className: mergeStateClassName(clsx$1(sx(menuStyles.positioner), menuClassNames.positioner), className)
 	});
 };
 EditorSlashMenuPositioner.displayName = "EditorSlashMenuPositioner";
@@ -44,14 +44,14 @@ const EditorSlashMenuPopup = ({ className, initialFocus = false, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.Popup, {
 		...rest,
 		initialFocus,
-		className: mergeStateClassName(clsx(sx(menuStyles.popup), menuClassNames.popup), className)
+		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) => clsx(sx([menuStyles.item, danger && menuStyles.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";
@@ -59,42 +59,42 @@ const EditorSlashMenuGroup = Autocomplete.Group;
 const EditorSlashMenuGroupLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
 		...rest,
-		className: (state) => clsx(sx(menuStyles.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) => clsx(sx([menuStyles.item, menuStyles.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: clsx(sx(menuStyles.itemContent), className)
+		className: clsx$1(sx(menuStyles.itemContent), className)
 	});
 };
 EditorSlashMenuItemContent.displayName = "EditorSlashMenuItemContent";
 const EditorSlashMenuItemIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: clsx(sx(menuStyles.icon), menuClassNames.icon, className)
+		className: clsx$1(sx(menuStyles.icon), menuClassNames.icon, className)
 	});
 };
 EditorSlashMenuItemIcon.displayName = "EditorSlashMenuItemIcon";
 const EditorSlashMenuItemLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: clsx(sx(menuStyles.label), menuClassNames.label, className)
+		className: clsx$1(sx(menuStyles.label), menuClassNames.label, className)
 	});
 };
 EditorSlashMenuItemLabel.displayName = "EditorSlashMenuItemLabel";
 const EditorSlashMenuItemExtra = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: clsx(sx(menuStyles.extra), className)
+		className: clsx$1(sx(menuStyles.extra), className)
 	});
 };
 EditorSlashMenuItemExtra.displayName = "EditorSlashMenuItemExtra";

package/es/EditorSlashMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"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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"}
+{"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/EmojiPicker/EmojiPicker.mjs

@@ -5,25 +5,25 @@ 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 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 clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 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/index.js";
-import { toc } from "@lobehub/icons/es/toc.js";
-import useSWR from "swr";
+import { getLobeIconCDN } from "@lobehub/icons/es/features/getLobeIconCDN";
+import { toc } from "@lobehub/icons/es/toc";
 //#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 }) => {
@@ -40,13 +40,7 @@ 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 i18n = useEmojiMartI18n(locale);
 	const [ava, setAva] = useControlledState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,
@@ -115,7 +109,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 	const showTabs = allowDelete || items && items.length > 1;
 	const content = /* @__PURE__ */ jsxs(FlexBasic_default, {
 		ref,
-		...styleProps(styles.picker, clsx("lobe-emoji-picker", popupClassName), {
+		...styleProps(styles.picker, clsx$1("lobe-emoji-picker", popupClassName), {
 			minWidth: 310,
 			paddingTop: showTabs ? 4 : 0,
 			...pickerCssVariables,
@@ -155,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],
@@ -196,7 +190,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		...popupProps,
 		children: customRender ? customRender(ava) : /* @__PURE__ */ jsx(Avatar, {
 			avatar: ava,
-			className: clsx("lobe-emoji-picker-avatar", 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","useMergeState","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 * 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';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\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 { 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 { 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        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={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=\"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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"}
+{"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/useEmojiMartI18n.mjs

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+//#region src/EmojiPicker/useEmojiMartI18n.ts
+const unwrapDefault = (value) => value && typeof value === "object" && "default" in value ? value.default : value;
+const createEmojiMartI18nLoader = (load) => {
+	const cache = /* @__PURE__ */ new Map();
+	const useEmojiMartI18n = (locale) => {
+		const language = locale.split("-")[0];
+		const [loaded, setLoaded] = useState();
+		useEffect(() => {
+			let active = true;
+			let pending = cache.get(language);
+			if (!pending) {
+				pending = load(language);
+				cache.set(language, pending);
+			}
+			pending.then((value) => {
+				if (active) setLoaded({
+					language,
+					value: unwrapDefault(value)
+				});
+			}, () => {});
+			return () => {
+				active = false;
+			};
+		}, [language]);
+		return loaded?.language === language ? loaded.value : void 0;
+	};
+	return useEmojiMartI18n;
+};
+const useEmojiMartI18n = createEmojiMartI18nLoader((language) => import(
+	/* @vite-ignore */
+	`@emoji-mart/data/i18n/${language}.json`
+));
+//#endregion
+export { createEmojiMartI18nLoader, useEmojiMartI18n };
+
+//# sourceMappingURL=useEmojiMartI18n.mjs.map

package/es/EmojiPicker/useEmojiMartI18n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmojiMartI18n.mjs","names":[],"sources":["../../src/EmojiPicker/useEmojiMartI18n.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype LoadI18n = (language: string) => Promise<unknown>;\n\nconst unwrapDefault = (value: unknown): unknown =>\n  value && typeof value === 'object' && 'default' in value ? value.default : value;\n\nexport const createEmojiMartI18nLoader = (load: LoadI18n) => {\n  const cache = new Map<string, Promise<unknown>>();\n\n  const useEmojiMartI18n = (locale: string): unknown => {\n    const language = locale.split('-')[0];\n    const [loaded, setLoaded] = useState<{ language: string; value: unknown }>();\n\n    useEffect(() => {\n      let active = true;\n      let pending = cache.get(language);\n      if (!pending) {\n        pending = load(language);\n        cache.set(language, pending);\n      }\n      pending.then(\n        (value) => {\n          if (active) setLoaded({ language, value: unwrapDefault(value) });\n        },\n        () => {},\n      );\n      return () => {\n        active = false;\n      };\n    }, [language]);\n\n    return loaded?.language === language ? loaded.value : undefined;\n  };\n\n  return useEmojiMartI18n;\n};\n\nexport const useEmojiMartI18n = createEmojiMartI18nLoader(\n  (language) => import(/* @vite-ignore */ `@emoji-mart/data/i18n/${language}.json`),\n);\n"],"mappings":";;AAIA,MAAM,iBAAiB,UACrB,SAAS,OAAO,UAAU,YAAY,aAAa,QAAQ,MAAM,UAAU;AAE7E,MAAa,6BAA6B,SAAmB;CAC3D,MAAM,wBAAQ,IAAI,IAA8B;CAEhD,MAAM,oBAAoB,WAA4B;EACpD,MAAM,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;EACnC,MAAM,CAAC,QAAQ,aAAa,SAA+C;EAE3E,gBAAgB;GACd,IAAI,SAAS;GACb,IAAI,UAAU,MAAM,IAAI,QAAQ;GAChC,IAAI,CAAC,SAAS;IACZ,UAAU,KAAK,QAAQ;IACvB,MAAM,IAAI,UAAU,OAAO;GAC7B;GACA,QAAQ,MACL,UAAU;IACT,IAAI,QAAQ,UAAU;KAAE;KAAU,OAAO,cAAc,KAAK;IAAE,CAAC;GACjE,SACM,CAAC,CACT;GACA,aAAa;IACX,SAAS;GACX;EACF,GAAG,CAAC,QAAQ,CAAC;EAEb,OAAO,QAAQ,aAAa,WAAW,OAAO,QAAQ,KAAA;CACxD;CAEA,OAAO;AACT;AAEA,MAAa,mBAAmB,2BAC7B,aAAa;;CAA0B,yBAAyB,SAAS;CAC5E"}

package/es/FileTypeIcon/type.d.mts

@@ -12,4 +12,5 @@ export interface FileTypeIconProps extends IconProps {
   variant?: 'color' | 'mono';
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/FloatingPanel/FloatingPanel.mjs

@@ -5,7 +5,7 @@ import { styles } from "./style.mjs";
 import { ToastDodge } from "./ToastDodge.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } 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 { X } from "lucide-react";
 //#region src/FloatingPanel/FloatingPanel.tsx
@@ -271,7 +271,7 @@ const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classN
 				"aria-label": ariaLabel,
 				className: classNames?.wrapper,
 				motionProps: resolvedMotionProps,
-				panelClassName: clsx(className, classNames?.panel),
+				panelClassName: clsx$1(className, classNames?.panel),
 				panelXstyle: [s.panel, isTop && s.panelTop],
 				popupStyle,
 				width: activeResizeSize?.width ?? width,

package/es/FloatingPanel/FloatingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../src/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { ModalRootProps } from '../Modal';\nimport { ModalBackdrop, ModalPortal, ModalRoot } from '../Modal';\nimport {\n  ModalCloseImpl,\n  ModalContentImpl,\n  ModalFooterImpl,\n  ModalHeaderImpl,\n  ModalPopupImpl,\n  ModalTitleImpl,\n} from '../Modal/atoms';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopupImpl\n            aria-label={ariaLabel}\n            className={classNames?.wrapper}\n            motionProps={resolvedMotionProps}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelXstyle={[s.panel, isTop && s.panelTop]}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            xstyle={s.wrapper}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  {...styleProps(\n                    [s.resizeHandle, getResizeHandleClassName(s, handle)],\n                    classNames?.resizeHandle,\n                    semanticStyles?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeaderImpl\n                className={classNames?.header}\n                style={semanticStyles?.header}\n                xstyle={s.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitleImpl\n                    className={classNames?.title}\n                    style={semanticStyles?.title}\n                    xstyle={s.title}\n                  >\n                    {title}\n                  </ModalTitleImpl>\n                ) : (\n                  <span />\n                )}\n                <div {...stylex.props(s.headerActions)}>\n                  {actions && (\n                    <div\n                      {...styleProps(s.actions, classNames?.actions, semanticStyles?.actions)}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalCloseImpl\n                      aria-label={closeLabel}\n                      className={classNames?.close}\n                      style={semanticStyles?.close}\n                      xstyle={s.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalCloseImpl>\n                  )}\n                </div>\n              </ModalHeaderImpl>\n            )}\n            <ModalContentImpl\n              className={classNames?.body}\n              style={semanticStyles?.body}\n              xstyle={s.body}\n            >\n              {children}\n            </ModalContentImpl>\n            {footer && (\n              <ModalFooterImpl\n                className={classNames?.footer}\n                style={semanticStyles?.footer}\n                xstyle={s.footer}\n              >\n                {footer}\n              </ModalFooterImpl>\n            )}\n          </ModalPopupImpl>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}
+{"version":3,"file":"FloatingPanel.mjs","names":["clsx"],"sources":["../../src/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { ModalRootProps } from '../Modal';\nimport { ModalBackdrop, ModalPortal, ModalRoot } from '../Modal';\nimport {\n  ModalCloseImpl,\n  ModalContentImpl,\n  ModalFooterImpl,\n  ModalHeaderImpl,\n  ModalPopupImpl,\n  ModalTitleImpl,\n} from '../Modal/atoms';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopupImpl\n            aria-label={ariaLabel}\n            className={classNames?.wrapper}\n            motionProps={resolvedMotionProps}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelXstyle={[s.panel, isTop && s.panelTop]}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            xstyle={s.wrapper}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  {...styleProps(\n                    [s.resizeHandle, getResizeHandleClassName(s, handle)],\n                    classNames?.resizeHandle,\n                    semanticStyles?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeaderImpl\n                className={classNames?.header}\n                style={semanticStyles?.header}\n                xstyle={s.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitleImpl\n                    className={classNames?.title}\n                    style={semanticStyles?.title}\n                    xstyle={s.title}\n                  >\n                    {title}\n                  </ModalTitleImpl>\n                ) : (\n                  <span />\n                )}\n                <div {...stylex.props(s.headerActions)}>\n                  {actions && (\n                    <div\n                      {...styleProps(s.actions, classNames?.actions, semanticStyles?.actions)}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalCloseImpl\n                      aria-label={closeLabel}\n                      className={classNames?.close}\n                      style={semanticStyles?.close}\n                      xstyle={s.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalCloseImpl>\n                  )}\n                </div>\n              </ModalHeaderImpl>\n            )}\n            <ModalContentImpl\n              className={classNames?.body}\n              style={semanticStyles?.body}\n              xstyle={s.body}\n            >\n              {children}\n            </ModalContentImpl>\n            {footer && (\n              <ModalFooterImpl\n                className={classNames?.footer}\n                style={semanticStyles?.footer}\n                xstyle={s.footer}\n              >\n                {footer}\n              </ModalFooterImpl>\n            )}\n          </ModalPopupImpl>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}

package/es/FloatingPanel/style.mjs

@@ -1,5 +1,6 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 //#region src/FloatingPanel/style.ts
-const dodge = `608ms linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)`;
+const dodge = `608ms ${cssVar.motionSpringSnappy}`;
 `${dodge}${dodge}${dodge}${dodge}`;
 const styles = {
 	actions: {
@@ -156,7 +157,7 @@ const styles = {
 	},
 	wrapper: {
 		kVQacm: "lbb3r6kr",
-		kmkexE: "lbon1zjq",
+		kmkexE: "lbchz62r",
 		kIyJzY: "lb12w9bfk",
 		k1ekBW: "lb4wkmsb",
 		kAMwcw: "lb7v8fk2",

package/es/FloatingPanel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingPanel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst dodgeDuration = '608ms';\nconst dodgeEase =\n  'linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst dodge = `${dodgeDuration} ${dodgeEase}`;\nconst wrapperTransition = `padding-block-end ${dodge}, padding-block-start ${dodge}, padding-inline-end ${dodge}, padding-inline-start ${dodge}`;\nconst handleActive = ':is(:hover, :focus-visible)';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  body: {\n    flex: '1',\n    paddingInline: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n  close: {\n    borderRadius: 8,\n    marginInlineEnd: -4,\n    position: 'static',\n    height: 32,\n    width: 32,\n  },\n  footer: {\n    flex: 'none',\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  header: {\n    flex: 'none',\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    minHeight: 48,\n  },\n  headerActions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    borderRadius: 12,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    transformOrigin: '100% 100%',\n    maxHeight: 'calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px))',\n    width: 'calc(100dvw - 32px)',\n  },\n  panelTop: {\n    transformOrigin: '100% 0',\n  },\n  resizeHandle: {\n    'backgroundColor': 'transparent',\n    'position': 'absolute',\n    'touchAction': 'none',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: 999,\n      transition: 'opacity 120ms ease',\n      backgroundColor: cssVar.colorPrimary,\n      content: '\"\"',\n      opacity: { default: 0, [handleActive]: 0.55 },\n      position: 'absolute',\n    },\n  },\n  resizeHandleBottom: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockEnd': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockEnd: 3,\n      height: 2,\n    },\n  },\n  resizeHandleBottomLeft: {\n    cursor: 'nesw-resize',\n    insetBlockEnd: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleBottomRight: {\n    cursor: 'nwse-resize',\n    insetBlockEnd: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleLeft: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineStart': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineStart: 3,\n      width: 2,\n    },\n  },\n  resizeHandleRight: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineEnd': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineEnd: 3,\n      width: 2,\n    },\n  },\n  resizeHandleTop: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockStart': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockStart: 3,\n      height: 2,\n    },\n  },\n  resizeHandleTopLeft: {\n    cursor: 'nwse-resize',\n    insetBlockStart: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleTopRight: {\n    cursor: 'nesw-resize',\n    insetBlockStart: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  title: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  wrapper: {\n    overflow: 'hidden',\n    transition: wrapperTransition,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    transitionProperty: { default: null, [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: null, [reducedMotion]: 'ease' },\n  },\n});\n"],"mappings":";AAMA,MAAM,QAAQ;AACY,GAAqB,QAA8B,QAA6B,QAA+B;AAEzI,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,yBAAyB;EACvB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingPanel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst dodgeDuration = '608ms';\nconst dodgeEase = cssVar.motionSpringSnappy;\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst dodge = `${dodgeDuration} ${dodgeEase}`;\nconst wrapperTransition = `padding-block-end ${dodge}, padding-block-start ${dodge}, padding-inline-end ${dodge}, padding-inline-start ${dodge}`;\nconst handleActive = ':is(:hover, :focus-visible)';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  body: {\n    flex: '1',\n    paddingInline: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n  close: {\n    borderRadius: 8,\n    marginInlineEnd: -4,\n    position: 'static',\n    height: 32,\n    width: 32,\n  },\n  footer: {\n    flex: 'none',\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  header: {\n    flex: 'none',\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    minHeight: 48,\n  },\n  headerActions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    borderRadius: 12,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    transformOrigin: '100% 100%',\n    maxHeight: 'calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px))',\n    width: 'calc(100dvw - 32px)',\n  },\n  panelTop: {\n    transformOrigin: '100% 0',\n  },\n  resizeHandle: {\n    'backgroundColor': 'transparent',\n    'position': 'absolute',\n    'touchAction': 'none',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: 999,\n      transition: 'opacity 120ms ease',\n      backgroundColor: cssVar.colorPrimary,\n      content: '\"\"',\n      opacity: { default: 0, [handleActive]: 0.55 },\n      position: 'absolute',\n    },\n  },\n  resizeHandleBottom: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockEnd': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockEnd: 3,\n      height: 2,\n    },\n  },\n  resizeHandleBottomLeft: {\n    cursor: 'nesw-resize',\n    insetBlockEnd: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleBottomRight: {\n    cursor: 'nwse-resize',\n    insetBlockEnd: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleLeft: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineStart': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineStart: 3,\n      width: 2,\n    },\n  },\n  resizeHandleRight: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineEnd': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineEnd: 3,\n      width: 2,\n    },\n  },\n  resizeHandleTop: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockStart': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockStart: 3,\n      height: 2,\n    },\n  },\n  resizeHandleTopLeft: {\n    cursor: 'nwse-resize',\n    insetBlockStart: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleTopRight: {\n    cursor: 'nesw-resize',\n    insetBlockStart: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  title: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  wrapper: {\n    overflow: 'hidden',\n    transition: wrapperTransition,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    transitionProperty: { default: null, [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: null, [reducedMotion]: 'ease' },\n  },\n});\n"],"mappings":";;AAMA,MAAM,QAAQ,SAFI,OAAO;AAGC,GAAqB,QAA8B,QAA6B,QAA+B;AAEzI,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,yBAAyB;EACvB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Form/Form.mjs

@@ -17,7 +17,9 @@ const serializeForm = (form) => {
 	const entries = [...new FormData(form).entries()].filter(([, value]) => typeof value === "string");
 	return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));
 };
-const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, ...rest }) => {
+const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, compact, itemPadding, ...rest }) => {
+	const resolvedGap = gap ?? (compact ? 12 : void 0);
+	const resolvedItemPadding = itemPadding ?? (compact ? 10 : void 0);
 	const { mobile } = useResponsive();
 	const formRef = useRef(null);
 	const [submitLoading, setSubmitLoading] = useState(false);
@@ -124,7 +126,9 @@ const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, it
 				rootStyles.root,
 				variant === "borderless" && rootStyles.borderless
 			], className, {
-				gap,
+				gap: resolvedGap,
+				...resolvedGap === void 0 ? void 0 : { "--lobe-form-gap": typeof resolvedGap === "number" ? `${resolvedGap}px` : resolvedGap },
+				...resolvedItemPadding === void 0 ? void 0 : { "--lobe-form-item-padding-block": typeof resolvedItemPadding === "number" ? `${resolvedItemPadding}px` : resolvedItemPadding },
 				...style
 			}),
 			onFormSubmit: async (values, eventDetails) => {