@lobehub/ui 4.3.2 → 4.3.4

package/es/mobile/ChatHeader/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mobile/ChatHeader/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		center: css$1`
       height: 100%;
@@ -10,7 +10,7 @@ const useStyles = createStyles(({ css: css$1, token }) => {
       overflow: hidden;
       flex: none;
       width: 100vw;
-      background: ${token.colorBgLayout};
+      background: ${cssVar$1.colorBgLayout};
     `,
 		inner: css$1`
       position: relative;
@@ -32,7 +32,7 @@ const useStyles = createStyles(({ css: css$1, token }) => {
     `
 	};
 });
-const useTitleStyles = createStyles(({ css: css$1, token }) => ({
+const titleStyles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	desc: css$1`
     overflow: hidden;
 
@@ -40,7 +40,7 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
 
     font-size: 12px;
     line-height: 1;
-    color: ${token.colorTextTertiary};
+    color: ${cssVar$1.colorTextTertiary};
     text-overflow: ellipsis;
     white-space: nowrap;
   `,
@@ -70,5 +70,5 @@ const useTitleStyles = createStyles(({ css: css$1, token }) => ({
 }));
 
 //#endregion
-export { useStyles, useTitleStyles };
+export { styles, titleStyles };
 //# sourceMappingURL=style.mjs.map

package/es/mobile/ChatHeader/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mobile/ChatHeader/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    center: css`\n      height: 100%;\n    `,\n    container: css`\n      overflow: hidden;\n      flex: none;\n      width: 100vw;\n      background: ${token.colorBgLayout};\n    `,\n\n    inner: css`\n      position: relative;\n\n      width: 100%;\n      height: 44px;\n      min-height: 44px;\n      max-height: 44px;\n      padding-block: 0;\n      padding-inline: 6px;\n    `,\n    left: css`\n      justify-content: flex-start;\n      height: 100%;\n    `,\n    right: css`\n      justify-content: flex-end;\n      height: 100%;\n    `,\n  };\n});\n\nexport const useTitleStyles = createStyles(({ css, token }) => ({\n  desc: css`\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ${token.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  tag: css`\n    flex: none;\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleContainer: css`\n    flex: 1;\n  `,\n  titleWithDesc: css`\n    overflow: hidden;\n\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,QAAQ,KAAG;;;EAGX,WAAW,KAAG;;;;oBAIE,MAAM,cAAc;;EAGpC,OAAO,KAAG;;;;;;;;;;EAUV,MAAM,KAAG;;;;EAIT,OAAO,KAAG;;;;EAIX;EACD;AAEF,MAAa,iBAAiB,cAAc,EAAE,YAAK,aAAa;CAC9D,MAAM,KAAG;;;;;;;aAOE,MAAM,kBAAkB;;;;CAInC,KAAK,KAAG;;;CAGR,OAAO,KAAG;;;;;;;;;CASV,gBAAgB,KAAG;;;CAGnB,eAAe,KAAG;;;;;;;;CAQnB,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/mobile/ChatHeader/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    center: css`\n      height: 100%;\n    `,\n    container: css`\n      overflow: hidden;\n      flex: none;\n      width: 100vw;\n      background: ${cssVar.colorBgLayout};\n    `,\n\n    inner: css`\n      position: relative;\n\n      width: 100%;\n      height: 44px;\n      min-height: 44px;\n      max-height: 44px;\n      padding-block: 0;\n      padding-inline: 6px;\n    `,\n    left: css`\n      justify-content: flex-start;\n      height: 100%;\n    `,\n    right: css`\n      justify-content: flex-end;\n      height: 100%;\n    `,\n  };\n});\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  desc: css`\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  tag: css`\n    flex: none;\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleContainer: css`\n    flex: 1;\n  `,\n  titleWithDesc: css`\n    overflow: hidden;\n\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;;;EAGX,WAAW,KAAG;;;;oBAIEA,SAAO,cAAc;;EAGrC,OAAO,KAAG;;;;;;;;;;EAUV,MAAM,KAAG;;;;EAIT,OAAO,KAAG;;;;EAIX;EACD;AAEF,MAAa,cAAc,oBAAoB,EAAE,YAAK,wBAAc;CAClE,MAAM,KAAG;;;;;;;aAOEA,SAAO,kBAAkB;;;;CAIpC,KAAK,KAAG;;;CAGR,OAAO,KAAG;;;;;;;;;CASV,gBAAgB,KAAG;;;CAGnB,eAAe,KAAG;;;;;;;;CAQnB,EAAE"}

package/es/mobile/ChatInputArea/ChatInputArea.mjs

@@ -4,16 +4,16 @@ import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
 import ChatInputAreaInner_default from "../../chat/ChatInputArea/components/ChatInputAreaInner.mjs";
 import SafeArea_default from "../SafeArea/SafeArea.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { useSize } from "ahooks";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
 //#region src/mobile/ChatInputArea/ChatInputArea.tsx
 const ChatInputArea = memo(({ ref, className, style, topAddons, textAreaLeftAddons, textAreaRightAddons, bottomAddons, expand = false, setExpand, onSend, onInput, loading, value, safeArea }) => {
 	const containerRef = useRef(null);
-	const { cx, styles } = useStyles();
 	const size = useSize(containerRef);
 	const [showFullscreen, setShowFullscreen] = useState(false);
 	const [isFocused, setIsFocused] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    >","Flexbox","ActionIcon","ChatInputAreaInner","SafeArea"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  FC,\n  PropsWithChildren,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { useStyles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { cx, styles } = useStyles();\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox gap={8} horizontal justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox align={'flex-end'} className={styles.inner} gap={8} horizontal>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              onClick={() => setExpand?.(!expand)}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,EAAE,IAAI,WAAW,WAAW;CAClC,MAAM,OAAO,QAAQ,aAAa;CAClC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAM;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;AAE1D,iBAAgB;AACd,MAAI,CAAC,MAAM,OAAQ;AACnB,oBAAkB,KAAK,SAAS,GAAG;IAClC,CAAC,KAAK,CAAC;CAEV,MAAMA,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACC;EAAQ,WAAW,OAAO;EAAO,KAAK;;GACrC,qBAACA;IAAQ,KAAK;IAAG;IAAW,SAAS;eAClC,EAAE,oBACF,EAAE;KACK;GACT;GACA,EAAE;GACF,EAAE;;GACK,GAEV,qBAACA;EAAQ,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAAG;;GAC1D,EAAE;GACF;GACA,EAAE;;GACK,EAEd,CAAC,QAAQ,QAAQ,CAClB;CAED,MAAM,aAAa,CAAC,UAAU,CAAC;AAE/B,QACE,qBAACA;EACC,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,UAAU;EACnE,KAAK;EACE;;GAEN,aAAa,oBAACA;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAoB;GAC1F,qBAACA;IACC,WAAW,GAAG,UAAU,OAAO,OAAO;IACtC,KAAK;IACL,OAAO,EAAE,UAAU,YAAY;eAE9B,kBACC,oBAACC;KACC;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,eAAe,YAAY,CAAC,OAAO;KACnC,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;MAAI;KACtD,OAAO,SAAS,EAAE,KAAK,GAAG,GAAG,EAAE;MAC/B,EAEJ,oBAAC;KACe;KACM;KACC;KACV;eAEX,oBAACC;MACC,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;OAAG;MACrD,WAAW,OAAO;MACT;MACT,cAAc,aAAa,MAAM;MACjC,eAAe,aAAa,KAAK;MACxB;MACD;MACH;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;OAAG;MAC/B;MACP,SAAS,SAAS,eAAe;OACjC;MACa;KACT;GACT,gBACC,oBAACF;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAuB;GAEhF,YAAY,CAAC,aAAa,oBAACG,oBAAS,UAAU,WAAY;;GACnD;EAGf;AAED,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"ChatInputArea.mjs","names":["InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    >","Flexbox","ActionIcon","ChatInputAreaInner","SafeArea"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  FC,\n  PropsWithChildren,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox gap={8} horizontal justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox align={'flex-end'} className={styles.inner} gap={8} horizontal>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              onClick={() => setExpand?.(!expand)}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,OAAO,QAAQ,aAAa;CAClC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAM;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;AAE1D,iBAAgB;AACd,MAAI,CAAC,MAAM,OAAQ;AACnB,oBAAkB,KAAK,SAAS,GAAG;IAClC,CAAC,KAAK,CAAC;CAEV,MAAMA,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACC;EAAQ,WAAW,OAAO;EAAO,KAAK;;GACrC,qBAACA;IAAQ,KAAK;IAAG;IAAW,SAAS;eAClC,EAAE,oBACF,EAAE;KACK;GACT;GACA,EAAE;GACF,EAAE;;GACK,GAEV,qBAACA;EAAQ,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAAG;;GAC1D,EAAE;GACF;GACA,EAAE;;GACK,EAEd,CAAC,QAAQ,QAAQ,CAClB;CAED,MAAM,aAAa,CAAC,UAAU,CAAC;AAE/B,QACE,qBAACA;EACC,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,UAAU;EACnE,KAAK;EACE;;GAEN,aAAa,oBAACA;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAoB;GAC1F,qBAACA;IACC,WAAW,GAAG,UAAU,OAAO,OAAO;IACtC,KAAK;IACL,OAAO,EAAE,UAAU,YAAY;eAE9B,kBACC,oBAACC;KACC;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,eAAe,YAAY,CAAC,OAAO;KACnC,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;MAAI;KACtD,OAAO,SAAS,EAAE,KAAK,GAAG,GAAG,EAAE;MAC/B,EAEJ,oBAAC;KACe;KACM;KACC;KACV;eAEX,oBAACC;MACC,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;OAAG;MACrD,WAAW,OAAO;MACT;MACT,cAAc,aAAa,MAAM;MACjC,eAAe,aAAa,KAAK;MACxB;MACD;MACH;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;OAAG;MAC/B;MACP,SAAS,SAAS,eAAe;OACjC;MACa;KACT;GACT,gBACC,oBAACF;IAAQ,OAAO,aAAa,EAAE,GAAG,EAAE,SAAS,QAAQ;cAAG;KAAuB;GAEhF,YAAY,CAAC,aAAa,oBAACG,oBAAS,UAAU,WAAY;;GACnD;EAGf;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/mobile/ChatInputArea/style.mjs

@@ -1,13 +1,13 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mobile/ChatInputArea/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		container: css$1`
       flex: none;
       padding-block: 12px;
-      background: ${token.colorFillQuaternary};
-      border-block-start: 1px solid ${token.colorFillTertiary};
+      border-block-start: 1px solid ${cssVar$1.colorFillTertiary};
+      background: ${cssVar$1.colorFillQuaternary};
     `,
 		expand: css$1`
       position: absolute;
@@ -30,5 +30,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mobile/ChatInputArea/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    container: css`\n      flex: none;\n      padding-block: 12px;\n      background: ${token.colorFillQuaternary};\n      border-block-start: 1px solid ${token.colorFillTertiary};\n    `,\n    expand: css`\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    `,\n    expandButton: css`\n      position: absolute;\n      inset-inline-end: 14px;\n    `,\n    expandTextArea: css`\n      flex: 1;\n    `,\n    inner: css`\n      height: inherit;\n      padding-block: 0;\n      padding-inline: 8px;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,WAAW,KAAG;;;oBAGE,MAAM,oBAAoB;sCACR,MAAM,kBAAkB;;EAE1D,QAAQ,KAAG;;;;;EAKX,cAAc,KAAG;;;;EAIjB,gBAAgB,KAAG;;;EAGnB,OAAO,KAAG;;;;;EAKX;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/mobile/ChatInputArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    container: css`\n      flex: none;\n      padding-block: 12px;\n      border-block-start: 1px solid ${cssVar.colorFillTertiary};\n      background: ${cssVar.colorFillQuaternary};\n    `,\n    expand: css`\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    `,\n    expandButton: css`\n      position: absolute;\n      inset-inline-end: 14px;\n    `,\n    expandTextArea: css`\n      flex: 1;\n    `,\n    inner: css`\n      height: inherit;\n      padding-block: 0;\n      padding-inline: 8px;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,WAAW,KAAG;;;sCAGoBA,SAAO,kBAAkB;oBAC3CA,SAAO,oBAAoB;;EAE3C,QAAQ,KAAG;;;;;EAKX,cAAc,KAAG;;;;EAIjB,gBAAgB,KAAG;;;EAGnB,OAAO,KAAG;;;;;EAKX;EACD"}

package/es/mobile/SafeArea/SafeArea.mjs

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

package/es/mobile/SafeArea/SafeArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SafeArea.mjs","names":["SafeArea: FC<SafeAreaProps>"],"sources":["../../../src/mobile/SafeArea/SafeArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { useStyles } from './style';\nimport { SafeAreaProps } from './type';\n\nconst SafeArea: FC<SafeAreaProps> = ({ position, className, ...rest }) => {\n  const { styles, cx } = useStyles();\n  return <div className={cx(styles.container, styles[position], className)} {...rest} />;\n};\n\nSafeArea.displayName = 'SafeArea';\n\nexport default SafeArea;\n"],"mappings":";;;;;;AAOA,MAAMA,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;CACxE,MAAM,EAAE,QAAQ,OAAO,WAAW;AAClC,QAAO,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,OAAO,WAAW,UAAU;EAAE,GAAI;GAAQ;;AAGxF,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"SafeArea.mjs","names":["SafeArea: FC<SafeAreaProps>"],"sources":["../../../src/mobile/SafeArea/SafeArea.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { styles } from './style';\nimport { SafeAreaProps } from './type';\n\nconst SafeArea: FC<SafeAreaProps> = ({ position, className, ...rest }) => {\n  return <div className={cx(styles.container, styles[position], className)} {...rest} />;\n};\n\nSafeArea.displayName = 'SafeArea';\n\nexport default SafeArea;\n"],"mappings":";;;;;;;AAQA,MAAMA,YAA+B,EAAE,UAAU,WAAW,GAAG,WAAW;AACxE,QAAO,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,OAAO,WAAW,UAAU;EAAE,GAAI;GAAQ;;AAGxF,SAAS,cAAc;AAEvB,uBAAe"}

package/es/mobile/SafeArea/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mobile/SafeArea/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		bottom: css$1`
       padding-block-end: env(safe-area-inset-bottom);
@@ -18,5 +18,5 @@ const useStyles = createStyles(({ css: css$1 }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/mobile/SafeArea/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mobile/SafeArea/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    bottom: css`\n      padding-block-end: env(safe-area-inset-bottom);\n    `,\n    container: css`\n      overflow: hidden;\n      flex: none;\n      width: 100vw;\n    `,\n    top: css`\n      padding-block-start: env(safe-area-inset-top);\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO;EACL,QAAQ,KAAG;;;EAGX,WAAW,KAAG;;;;;EAKd,KAAK,KAAG;;;EAGT;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mobile/SafeArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    bottom: css`\n      padding-block-end: env(safe-area-inset-bottom);\n    `,\n    container: css`\n      overflow: hidden;\n      flex: none;\n      width: 100vw;\n    `,\n    top: css`\n      padding-block-start: env(safe-area-inset-top);\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,QAAQ,KAAG;;;EAGX,WAAW,KAAG;;;;;EAKd,KAAK,KAAG;;;EAGT;EACD"}

package/es/mobile/TabBar/TabBar.mjs

@@ -2,9 +2,10 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import SafeArea_default from "../SafeArea/SafeArea.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 
 //#region src/mobile/TabBar/TabBar.tsx
@@ -14,7 +15,6 @@ const TabBar = memo(({ ref, className, safeArea, items, activeKey, defaultActive
 		onChange,
 		value: activeKey
 	});
-	const { styles, cx } = useStyles();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		as: "footer",
 		className: cx(styles.container, className),

package/es/mobile/TabBar/TabBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.mjs","names":["Flexbox","SafeArea"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { useStyles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n    const { styles, cx } = useStyles();\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          align={'center'}\n          className={cx(styles.inner, className)}\n          horizontal\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;CACD,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACA;EAAQ,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;aAC/E,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC;GACA,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;gBAGnB,oBAACA;MAAQ,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;OACpD,EACV,oBAAC;MAAI,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;OAC1D;OAXD,KAAK,IAYF;KAEZ;IACM,EACT,YAAY,oBAACC,oBAAS,UAAU,WAAY;GACrC;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"TabBar.mjs","names":["Flexbox","SafeArea"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          align={'center'}\n          className={cx(styles.inner, className)}\n          horizontal\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;AAED,QACE,qBAACA;EAAQ,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;aAC/E,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC;GACA,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA;KACC,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;gBAGnB,oBAACA;MAAQ,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;OACpD,EACV,oBAAC;MAAI,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;OAC1D;OAXD,KAAK,IAYF;KAEZ;IACM,EACT,YAAY,oBAACC,oBAAS,UAAU,WAAY;GACrC;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/es/mobile/TabBar/style.mjs

@@ -1,10 +1,10 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/mobile/TabBar/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		active: css$1`
-      color: ${token.colorPrimary};
+      color: ${cssVar$1.colorPrimary};
     `,
 		container: css$1`
       user-select: none;
@@ -13,9 +13,9 @@ const useStyles = createStyles(({ css: css$1, token }) => {
       flex: none;
 
       width: 100vw;
+      border-block-start: 1px solid ${cssVar$1.colorFillTertiary};
 
-      background: ${token.colorBgLayout};
-      border-block-start: 1px solid ${token.colorFillTertiary};
+      background: ${cssVar$1.colorBgLayout};
     `,
 		icon: css$1`
       width: 24px;
@@ -31,7 +31,7 @@ const useStyles = createStyles(({ css: css$1, token }) => {
       cursor: pointer;
       width: 48px;
       height: 48px;
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
     `,
 		title: css$1`
       overflow: hidden;
@@ -49,5 +49,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/mobile/TabBar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/mobile/TabBar/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    active: css`\n      color: ${token.colorPrimary};\n    `,\n    container: css`\n      user-select: none;\n\n      overflow: hidden;\n      flex: none;\n\n      width: 100vw;\n\n      background: ${token.colorBgLayout};\n      border-block-start: 1px solid ${token.colorFillTertiary};\n    `,\n\n    icon: css`\n      width: 24px;\n      height: 24px;\n      font-size: 24px;\n    `,\n    inner: css`\n      position: relative;\n      width: 100%;\n      height: 48px;\n    `,\n    tab: css`\n      cursor: pointer;\n      width: 48px;\n      height: 48px;\n      color: ${token.colorTextDescription};\n    `,\n    title: css`\n      overflow: hidden;\n\n      width: 100%;\n      margin-block-start: -0.125em;\n\n      font-size: 12px;\n      line-height: 1.125em;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,QAAQ,KAAG;eACA,MAAM,aAAa;;EAE9B,WAAW,KAAG;;;;;;;;oBAQE,MAAM,cAAc;sCACF,MAAM,kBAAkB;;EAG1D,MAAM,KAAG;;;;;EAKT,OAAO,KAAG;;;;;EAKV,KAAK,KAAG;;;;eAIG,MAAM,qBAAqB;;EAEtC,OAAO,KAAG;;;;;;;;;;;;EAYX;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/mobile/TabBar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      color: ${cssVar.colorPrimary};\n    `,\n    container: css`\n      user-select: none;\n\n      overflow: hidden;\n      flex: none;\n\n      width: 100vw;\n      border-block-start: 1px solid ${cssVar.colorFillTertiary};\n\n      background: ${cssVar.colorBgLayout};\n    `,\n\n    icon: css`\n      width: 24px;\n      height: 24px;\n      font-size: 24px;\n    `,\n    inner: css`\n      position: relative;\n      width: 100%;\n      height: 48px;\n    `,\n    tab: css`\n      cursor: pointer;\n      width: 48px;\n      height: 48px;\n      color: ${cssVar.colorTextDescription};\n    `,\n    title: css`\n      overflow: hidden;\n\n      width: 100%;\n      margin-block-start: -0.125em;\n\n      font-size: 12px;\n      line-height: 1.125em;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;eACAA,SAAO,aAAa;;EAE/B,WAAW,KAAG;;;;;;;sCAOoBA,SAAO,kBAAkB;;oBAE3CA,SAAO,cAAc;;EAGrC,MAAM,KAAG;;;;;EAKT,OAAO,KAAG;;;;;EAKV,KAAK,KAAG;;;;eAIGA,SAAO,qBAAqB;;EAEvC,OAAO,KAAG;;;;;;;;;;;;EAYX;EACD"}

package/es/storybook/StoryBook/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react0 from "react";
+import * as react19 from "react";
 import { Ref } from "react";
 import { useControls, useCreateStore } from "leva";
 
@@ -10,7 +10,7 @@ interface StoryBookProps extends FlexboxProps {
   noPadding?: boolean;
   ref?: Ref<HTMLDivElement>;
 }
-declare const StoryBook: react0.NamedExoticComponent<StoryBookProps>;
+declare const StoryBook: react19.NamedExoticComponent<StoryBookProps>;
 //#endregion
 export { StoryBook, StoryBookProps, useControls, useCreateStore };
 //# sourceMappingURL=index.d.mts.map

package/es/storybook/StoryBook/index.mjs

@@ -3,24 +3,23 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Center_default from "../../Flex/Center.mjs";
 import DraggablePanel_default from "../../DraggablePanel/index.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 import { LevaPanel, useControls, useCreateStore } from "leva";
 
 //#region src/storybook/StoryBook/index.tsx
 const StoryBook = memo(({ ref, levaStore, noPadding, className, children, ...rest }) => {
 	const { mobile } = useResponsive();
-	const { styles, cx: cx$1 } = useStyles(Boolean(noPadding));
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "stretch",
-		className: cx$1(styles.editor, className),
+		className: cx(styles.editor, className),
 		horizontal: !mobile,
 		justify: "stretch",
 		ref,
 		children: [/* @__PURE__ */ jsx(Center_default, {
-			className: styles.left,
+			className: cx(noPadding ? styles.left : styles.leftWithPadding),
 			flex: 1,
 			...rest,
 			children

package/es/storybook/StoryBook/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","cx","Center","DraggablePanel"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { Ref, memo } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\nimport { Center, Flexbox, FlexboxProps } from '@/Flex';\n\nimport { useStyles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n    const { styles, cx } = useStyles(Boolean(noPadding));\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n      >\n        <Center className={styles.left} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,aAAO,UAAU,QAAQ,UAAU,CAAC;AAEpD,QACE,qBAACA;EACC,OAAO;EACP,WAAWC,KAAG,OAAO,QAAQ,UAAU;EACvC,YAAY,CAAC;EACb,SAAS;EACJ;aAEL,oBAACC;GAAO,WAAW,OAAO;GAAM,MAAM;GAAG,GAAI;GAC1C;IACM,EACT,oBAACC;GACC,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;aAE/B,qBAAC;IAAI,WAAW,OAAO;eACrB,oBAAC;KAAU;KAAK;KAAK,OAAO;KAAW,UAAU;MAAS,EAAC;KACvD;IACS;GACT;EAGf;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"index.mjs","names":["Flexbox","Center","DraggablePanel"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { Ref, memo } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\nimport { Center, Flexbox, FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n      >\n        <Center className={cx(noPadding ? styles.left : styles.leftWithPadding)} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,eAAe;AAElC,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,YAAY,CAAC;EACb,SAAS;EACJ;aAEL,oBAACC;GAAO,WAAW,GAAG,YAAY,OAAO,OAAO,OAAO,gBAAgB;GAAE,MAAM;GAAG,GAAI;GACnF;IACM,EACT,oBAACC;GACC,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;aAE/B,qBAAC;IAAI,WAAW,OAAO;eACrB,oBAAC;KAAU;KAAK;KAAK,OAAO;KAAW,UAAU;MAAS,EAAC;KACvD;IACS;GACT;EAGf;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/storybook/StoryBook/style.mjs

@@ -1,34 +1,37 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/storybook/StoryBook/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, token, responsive }, noPadding) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1, responsive: responsive$1 }) => {
 	return {
 		editor: css$1`
       width: inherit;
       min-height: inherit;
     `,
-		left: cx$1(css$1`
-        position: relative;
-        overflow: auto;
-      `, !noPadding && css$1`
-          padding-block: 40px;
-          padding-inline: 24px;
-        `),
+		left: css$1`
+      position: relative;
+      overflow: auto;
+    `,
+		leftWithPadding: css$1`
+      position: relative;
+      overflow: auto;
+      padding-block: 40px;
+      padding-inline: 24px;
+    `,
 		leva: css$1`
       --leva-sizes-controlWidth: 66%;
-      --leva-colors-elevation1: ${token.colorFillSecondary};
+      --leva-colors-elevation1: ${cssVar$1.colorFillSecondary};
       --leva-colors-elevation2: transparent;
-      --leva-colors-elevation3: ${token.colorFillSecondary};
-      --leva-colors-accent1: ${token.colorPrimary};
-      --leva-colors-accent2: ${token.colorPrimaryHover};
-      --leva-colors-accent3: ${token.colorPrimaryActive};
-      --leva-colors-highlight1: ${token.colorTextTertiary};
-      --leva-colors-highlight2: ${token.colorTextSecondary};
-      --leva-colors-highlight3: ${token.colorText};
-      --leva-colors-vivid1: ${token.colorWarning};
+      --leva-colors-elevation3: ${cssVar$1.colorFillSecondary};
+      --leva-colors-accent1: ${cssVar$1.colorPrimary};
+      --leva-colors-accent2: ${cssVar$1.colorPrimaryHover};
+      --leva-colors-accent3: ${cssVar$1.colorPrimaryActive};
+      --leva-colors-highlight1: ${cssVar$1.colorTextTertiary};
+      --leva-colors-highlight2: ${cssVar$1.colorTextSecondary};
+      --leva-colors-highlight3: ${cssVar$1.colorText};
+      --leva-colors-vivid1: ${cssVar$1.colorWarning};
       --leva-shadows-level1: unset;
       --leva-shadows-level2: unset;
-      --leva-fonts-mono: ${token.fontFamilyCode};
+      --leva-fonts-mono: ${cssVar$1.fontFamilyCode};
 
       overflow: auto;
 
@@ -46,17 +49,17 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, token, responsive }, noP
       }
 
       input:checked + label > svg {
-        stroke: ${token.colorBgLayout};
+        stroke: ${cssVar$1.colorBgLayout};
       }
 
       button {
-        --leva-colors-accent2: ${token.colorFillSecondary};
+        --leva-colors-accent2: ${cssVar$1.colorFillSecondary};
       }
     `,
 		right: css$1`
-      background: ${token.colorBgLayout};
+      background: ${cssVar$1.colorBgLayout};
 
-      ${responsive.mobile} {
+      ${responsive$1.sm} {
         .draggable-panel-fixed {
           width: 100% !important;
         }
@@ -66,5 +69,5 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, token, responsive }, noP
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/storybook/StoryBook/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/storybook/StoryBook/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, css, token, responsive }, noPadding: boolean) => {\n  return {\n    editor: css`\n      width: inherit;\n      min-height: inherit;\n    `,\n    left: cx(\n      css`\n        position: relative;\n        overflow: auto;\n      `,\n      !noPadding &&\n        css`\n          padding-block: 40px;\n          padding-inline: 24px;\n        `,\n    ),\n    leva: css`\n      --leva-sizes-controlWidth: 66%;\n      --leva-colors-elevation1: ${token.colorFillSecondary};\n      --leva-colors-elevation2: transparent;\n      --leva-colors-elevation3: ${token.colorFillSecondary};\n      --leva-colors-accent1: ${token.colorPrimary};\n      --leva-colors-accent2: ${token.colorPrimaryHover};\n      --leva-colors-accent3: ${token.colorPrimaryActive};\n      --leva-colors-highlight1: ${token.colorTextTertiary};\n      --leva-colors-highlight2: ${token.colorTextSecondary};\n      --leva-colors-highlight3: ${token.colorText};\n      --leva-colors-vivid1: ${token.colorWarning};\n      --leva-shadows-level1: unset;\n      --leva-shadows-level2: unset;\n      --leva-fonts-mono: ${token.fontFamilyCode};\n\n      overflow: auto;\n\n      width: 100%;\n      height: 100%;\n      padding-block: 6px;\n      padding-inline: 0;\n\n      > div {\n        background: transparent;\n\n        > div {\n          background: transparent;\n        }\n      }\n\n      input:checked + label > svg {\n        stroke: ${token.colorBgLayout};\n      }\n\n      button {\n        --leva-colors-accent2: ${token.colorFillSecondary};\n      }\n    `,\n    right: css`\n      background: ${token.colorBgLayout};\n\n      ${responsive.mobile} {\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAK,OAAO,cAAc,cAAuB;AAC5F,QAAO;EACL,QAAQ,KAAG;;;;EAIX,MAAMA,KACJ,KAAG;;;SAIH,CAAC,aACC,KAAG;;;UAIN;EACD,MAAM,KAAG;;kCAEqB,MAAM,mBAAmB;;kCAEzB,MAAM,mBAAmB;+BAC5B,MAAM,aAAa;+BACnB,MAAM,kBAAkB;+BACxB,MAAM,mBAAmB;kCACtB,MAAM,kBAAkB;kCACxB,MAAM,mBAAmB;kCACzB,MAAM,UAAU;8BACpB,MAAM,aAAa;;;2BAGtB,MAAM,eAAe;;;;;;;;;;;;;;;;;;kBAkB9B,MAAM,cAAc;;;;iCAIL,MAAM,mBAAmB;;;EAGtD,OAAO,KAAG;oBACM,MAAM,cAAc;;QAEhC,WAAW,OAAO;;;;;;EAMvB;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar","responsive"],"sources":["../../../src/storybook/StoryBook/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  return {\n    editor: css`\n      width: inherit;\n      min-height: inherit;\n    `,\n    left: css`\n      position: relative;\n      overflow: auto;\n    `,\n    leftWithPadding: css`\n      position: relative;\n      overflow: auto;\n      padding-block: 40px;\n      padding-inline: 24px;\n    `,\n    leva: css`\n      --leva-sizes-controlWidth: 66%;\n      --leva-colors-elevation1: ${cssVar.colorFillSecondary};\n      --leva-colors-elevation2: transparent;\n      --leva-colors-elevation3: ${cssVar.colorFillSecondary};\n      --leva-colors-accent1: ${cssVar.colorPrimary};\n      --leva-colors-accent2: ${cssVar.colorPrimaryHover};\n      --leva-colors-accent3: ${cssVar.colorPrimaryActive};\n      --leva-colors-highlight1: ${cssVar.colorTextTertiary};\n      --leva-colors-highlight2: ${cssVar.colorTextSecondary};\n      --leva-colors-highlight3: ${cssVar.colorText};\n      --leva-colors-vivid1: ${cssVar.colorWarning};\n      --leva-shadows-level1: unset;\n      --leva-shadows-level2: unset;\n      --leva-fonts-mono: ${cssVar.fontFamilyCode};\n\n      overflow: auto;\n\n      width: 100%;\n      height: 100%;\n      padding-block: 6px;\n      padding-inline: 0;\n\n      > div {\n        background: transparent;\n\n        > div {\n          background: transparent;\n        }\n      }\n\n      input:checked + label > svg {\n        stroke: ${cssVar.colorBgLayout};\n      }\n\n      button {\n        --leva-colors-accent2: ${cssVar.colorFillSecondary};\n      }\n    `,\n    right: css`\n      background: ${cssVar.colorBgLayout};\n\n      ${responsive.sm} {\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,kBAAQ,+BAAiB;AACxE,QAAO;EACL,QAAQ,KAAG;;;;EAIX,MAAM,KAAG;;;;EAIT,iBAAiB,KAAG;;;;;;EAMpB,MAAM,KAAG;;kCAEqBA,SAAO,mBAAmB;;kCAE1BA,SAAO,mBAAmB;+BAC7BA,SAAO,aAAa;+BACpBA,SAAO,kBAAkB;+BACzBA,SAAO,mBAAmB;kCACvBA,SAAO,kBAAkB;kCACzBA,SAAO,mBAAmB;kCAC1BA,SAAO,UAAU;8BACrBA,SAAO,aAAa;;;2BAGvBA,SAAO,eAAe;;;;;;;;;;;;;;;;;;kBAkB/BA,SAAO,cAAc;;;;iCAINA,SAAO,mBAAmB;;;EAGvD,OAAO,KAAG;oBACMA,SAAO,cAAc;;QAEjCC,aAAW,GAAG;;;;;;EAMnB;EACD"}

package/es/styles/index.d.mts

@@ -1,5 +1,6 @@
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
 import { generateCustomStylish } from "./theme/customStylish.mjs";
+import { staticStylish } from "./theme/customStylishStatic.mjs";
 import { generateCustomToken } from "./theme/customToken.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
-export { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };
+export { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };

package/es/styles/index.mjs

@@ -1,6 +1,7 @@
 import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
 import { generateCustomStylish } from "./theme/customStylish.mjs";
+import { staticStylish } from "./theme/customStylishStatic.mjs";
 import { generateCustomToken } from "./theme/customToken.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
 
-export { findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };
+export { findCustomThemeName, generateColorNeutralPalette, generateColorPalette, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches };

package/es/styles/theme/customStylishStatic.d.mts

@@ -0,0 +1,7 @@
+import { LobeCustomStylish } from "../../types/customStylish.mjs";
+
+//#region src/styles/theme/customStylishStatic.d.ts
+declare const staticStylish: LobeCustomStylish;
+//#endregion
+export { staticStylish };
+//# sourceMappingURL=customStylishStatic.d.mts.map

package/es/styles/theme/customStylishStatic.mjs

@@ -0,0 +1,161 @@
+import { createStaticStyles, keyframes } from "antd-style";
+
+//#region src/styles/theme/customStylishStatic.ts
+/**
+* Static version of custom stylish utilities.
+* This can be used with createStaticStyles for better performance.
+*
+* Note: Some styles that depend on isDarkMode or custom tokens may have limitations.
+* For full dynamic support, use the regular customStylish from './customStylish'.
+*/
+const gradient = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;
+const staticStylish = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	active: css$1`
+    color: ${cssVar$1.colorText};
+    background: ${cssVar$1.colorFillSecondary};
+
+    &:hover {
+      color: ${cssVar$1.colorText};
+      background: ${cssVar$1.colorFill};
+    }
+  `,
+	blur: css$1`
+    backdrop-filter: saturate(150%) blur(10px);
+  `,
+	blurStrong: css$1`
+    backdrop-filter: saturate(150%) blur(36px);
+  `,
+	bottomScrollbar: css$1`
+    ::-webkit-scrollbar {
+      width: 0;
+      height: 4px;
+      background-color: transparent;
+
+      &-thumb {
+        border-radius: 4px;
+        background-color: ${cssVar$1.colorFill};
+        transition: background-color 500ms ${cssVar$1.motionEaseOut};
+      }
+
+      &-corner {
+        display: none;
+        width: 0;
+        height: 0;
+      }
+    }
+  `,
+	disabled: css$1`
+    cursor: not-allowed;
+    opacity: 0.5;
+  `,
+	gradientAnimation: css$1`
+    border-radius: inherit;
+    background-image: linear-gradient(
+      -45deg,
+      ${cssVar$1.gold},
+      ${cssVar$1.magenta},
+      ${cssVar$1.geekblue},
+      ${cssVar$1.cyan}
+    );
+    background-size: 400% 400%;
+    animation: 5s ${gradient} 5s ease infinite;
+  `,
+	noScrollbar: css$1`
+    ::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      background-color: transparent;
+    }
+  `,
+	resetLinkColor: css$1`
+    cursor: pointer;
+    color: ${cssVar$1.colorTextSecondary};
+
+    &:hover {
+      color: ${cssVar$1.colorText};
+    }
+  `,
+	shadow: css$1`
+    box-shadow:
+      0 1px 0 -1px ${cssVar$1.colorBorder},
+      0 1px 2px -0.5px ${cssVar$1.colorBorder},
+      0 2px 2px -1px ${cssVar$1.colorBorderSecondary},
+      0 3px 6px -4px ${cssVar$1.colorBorderSecondary};
+  `,
+	variantBorderless: css$1`
+    border: none;
+    background: none;
+    box-shadow: none;
+
+    &:hover {
+      background: ${cssVar$1.colorFillTertiary};
+    }
+  `,
+	variantBorderlessDanger: css$1`
+    border: none;
+    background: none;
+    box-shadow: none;
+
+    &:hover {
+      background: ${cssVar$1.colorErrorBg};
+      box-shadow: inset 0 0 0 1px ${cssVar$1.colorErrorBg};
+    }
+  `,
+	variantBorderlessWithoutHover: css$1`
+    border: none;
+    background: none;
+    box-shadow: none;
+  `,
+	variantFilled: css$1`
+    background: ${cssVar$1.colorFillTertiary};
+
+    &:hover {
+      background: ${cssVar$1.colorFillSecondary};
+    }
+  `,
+	variantFilledDanger: css$1`
+    background: ${cssVar$1.colorErrorBg};
+
+    &:hover {
+      background: ${cssVar$1.colorErrorBgHover};
+    }
+  `,
+	variantFilledWithoutHover: css$1`
+    background: ${cssVar$1.colorFillTertiary};
+  `,
+	variantOutlined: css$1`
+    border: 1px solid ${cssVar$1.colorBorderSecondary};
+    background: ${cssVar$1.colorBgContainer};
+
+    &:hover {
+      border: 1px solid ${cssVar$1.colorBorder};
+      background: ${cssVar$1.colorBgContainer};
+    }
+  `,
+	variantOutlinedDanger: css$1`
+    border: 1px solid ${cssVar$1.colorErrorBorder};
+
+    &:hover {
+      border: 1px solid ${cssVar$1.colorErrorBorder};
+    }
+  `,
+	variantOutlinedWithoutHover: css$1`
+    border: 1px solid ${cssVar$1.colorBorderSecondary};
+    background: ${cssVar$1.colorBgContainer};
+  `
+}));
+
+//#endregion
+export { staticStylish };
+//# sourceMappingURL=customStylishStatic.mjs.map