@lobehub/ui 4.3.2 → 4.3.3

package/es/Input/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":["AntInput"],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({ ref, variant, shadow, className, resize = false, style, ...rest }) => {\n    const { styles, cx, theme } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n              underlined: null,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <AntInput.TextArea\n        className={cx(\n          variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        style={{\n          resize: resize ? undefined : 'none',\n          ...style,\n        }}\n        variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;AASA,MAAM,WAAW,MACd,EAAE,KAAK,SAAS,QAAQ,WAAW,SAAS,OAAO,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,QAAQ,OACT;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACnB,YAAY;IACb;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,QACE,oBAACA,MAAS;EACR,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACI;EACL,OAAO;GACL,QAAQ,SAAS,SAAY;GAC7B,GAAG;GACJ;EACD,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAGP;AAED,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"TextArea.mjs","names":["AntInput"],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({ ref, variant, shadow, className, resize = false, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntInput.TextArea\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        style={{\n          resize: resize ? undefined : 'none',\n          ...style,\n        }}\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;AASA,MAAM,WAAW,MACd,EAAE,KAAK,SAAS,QAAQ,WAAW,SAAS,OAAO,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS;EACR,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,OAAO;GACL,QAAQ,SAAS,SAAY;GAC7B,GAAG;GACJ;EACD,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAGP;AAED,SAAS,cAAc;AAEvB,uBAAe"}

package/es/Input/style.mjs

@@ -1,64 +1,96 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Input/style.ts
-const useStyles = createStyles(({ cx: cx$1, token, css: css$1, stylish, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		borderless: css$1`
-      &.${prefixCls}-input {
-        ${stylish.variantBorderless}
+      &[class*='ant-input'] {
+        ${staticStylish.variantBorderless}
         &:hover {
-          ${stylish.variantBorderlessWithoutHover}
+          ${staticStylish.variantBorderlessWithoutHover}
         }
       }
     `,
 		borderlessOPT: css$1`
-      &.${prefixCls}-otp {
-        .${prefixCls}-otp-input {
-          ${stylish.variantBorderless};
+      &[class*='ant-otp'] {
+        [class*='ant-otp-input'] {
+          ${staticStylish.variantBorderless};
         }
       }
     `,
-		filled: cx$1(stylish.variantFilled, css$1`
+		filled: cx(staticStylish.variantFilled, css$1`
         &:focus-within {
-          ${stylish.variantFilledWithoutHover}
+          ${staticStylish.variantFilledWithoutHover}
         }
       `),
 		filledOPT: css$1`
-      &.${prefixCls}-otp {
-        .${prefixCls}-otp-input {
-          ${stylish.variantFilled};
+      &[class*='ant-otp'] {
+        [class*='ant-otp-input'] {
+          ${staticStylish.variantFilled};
         }
       }
     `,
-		outlined: stylish.variantOutlined,
+		outlined: staticStylish.variantOutlined,
 		outlinedOPT: css$1`
-      &.${prefixCls}-otp {
-        .${prefixCls}-otp-input {
-          ${stylish.variantOutlined};
+      &[class*='ant-otp'] {
+        [class*='ant-otp-input'] {
+          ${staticStylish.variantOutlined};
         }
       }
     `,
 		root: css$1``,
 		rootOPT: css$1`
-      &.${prefixCls}-otp {
-        .${prefixCls}-otp-input {
+      &[class*='ant-otp'] {
+        [class*='ant-otp-input'] {
           &:focus-within {
-            border-color: ${token.colorBorder};
+            border-color: ${cssVar$1.colorBorder};
           }
         }
       }
     `,
-		shadow: stylish.shadow,
+		shadow: staticStylish.shadow,
 		shadowOPT: css$1`
-      &.${prefixCls}-otp {
-        .${prefixCls}-otp-input {
-          ${stylish.shadow};
+      &[class*='ant-otp'] {
+        [class*='ant-otp-input'] {
+          ${staticStylish.shadow};
         }
       }
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { shadow: false },
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless,
+			underlined: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
+const variantsOPT = cva(styles.rootOPT, {
+	defaultVariants: { shadow: false },
+	variants: {
+		variant: {
+			filled: styles.filledOPT,
+			outlined: styles.outlinedOPT,
+			borderless: styles.borderlessOPT,
+			underlined: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadowOPT
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants, variantsOPT };
 //# sourceMappingURL=style.mjs.map

package/es/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Input/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, token, css, stylish, prefixCls }) => {\n  return {\n    borderless: css`\n      &.${prefixCls}-input {\n        ${stylish.variantBorderless}\n        &:hover {\n          ${stylish.variantBorderlessWithoutHover}\n        }\n      }\n    `,\n    borderlessOPT: css`\n      &.${prefixCls}-otp {\n        .${prefixCls}-otp-input {\n          ${stylish.variantBorderless};\n        }\n      }\n    `,\n    filled: cx(\n      stylish.variantFilled,\n      css`\n        &:focus-within {\n          ${stylish.variantFilledWithoutHover}\n        }\n      `,\n    ),\n\n    filledOPT: css`\n      &.${prefixCls}-otp {\n        .${prefixCls}-otp-input {\n          ${stylish.variantFilled};\n        }\n      }\n    `,\n    outlined: stylish.variantOutlined,\n    outlinedOPT: css`\n      &.${prefixCls}-otp {\n        .${prefixCls}-otp-input {\n          ${stylish.variantOutlined};\n        }\n      }\n    `,\n    root: css``,\n    rootOPT: css`\n      &.${prefixCls}-otp {\n        .${prefixCls}-otp-input {\n          &:focus-within {\n            border-color: ${token.colorBorder};\n          }\n        }\n      }\n    `,\n    shadow: stylish.shadow,\n    shadowOPT: css`\n      &.${prefixCls}-otp {\n        .${prefixCls}-otp-input {\n          ${stylish.shadow};\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,OAAO,YAAK,SAAS,gBAAgB;AAChF,QAAO;EACL,YAAY,KAAG;UACT,UAAU;UACV,QAAQ,kBAAkB;;YAExB,QAAQ,8BAA8B;;;;EAI9C,eAAe,KAAG;UACZ,UAAU;WACT,UAAU;YACT,QAAQ,kBAAkB;;;;EAIlC,QAAQA,KACN,QAAQ,eACR,KAAG;;YAEG,QAAQ,0BAA0B;;QAGzC;EAED,WAAW,KAAG;UACR,UAAU;WACT,UAAU;YACT,QAAQ,cAAc;;;;EAI9B,UAAU,QAAQ;EAClB,aAAa,KAAG;UACV,UAAU;WACT,UAAU;YACT,QAAQ,gBAAgB;;;;EAIhC,MAAM,KAAG;EACT,SAAS,KAAG;UACN,UAAU;WACT,UAAU;;4BAEO,MAAM,YAAY;;;;;EAK1C,QAAQ,QAAQ;EAChB,WAAW,KAAG;UACR,UAAU;WACT,UAAU;YACT,QAAQ,OAAO;;;;EAIxB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Input/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: css`\n      &[class*='ant-input'] {\n        ${lobeStaticStylish.variantBorderless}\n        &:hover {\n          ${lobeStaticStylish.variantBorderlessWithoutHover}\n        }\n      }\n    `,\n    borderlessOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantBorderless};\n        }\n      }\n    `,\n    filled: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        &:focus-within {\n          ${lobeStaticStylish.variantFilledWithoutHover}\n        }\n      `,\n    ),\n\n    filledOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantFilled};\n        }\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    outlinedOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantOutlined};\n        }\n      }\n    `,\n    root: css``,\n    rootOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          &:focus-within {\n            border-color: ${cssVar.colorBorder};\n          }\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n    shadowOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.shadow};\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const variantsOPT = cva(styles.rootOPT, {\n  defaultVariants: {\n    shadow: false,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filledOPT,\n      outlined: styles.outlinedOPT,\n      borderless: styles.borderlessOPT,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadowOPT,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAY,KAAG;;UAETA,cAAkB,kBAAkB;;YAElCA,cAAkB,8BAA8B;;;;EAIxD,eAAe,KAAG;;;YAGVA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GACNA,cAAkB,eAClB,KAAG;;YAEGA,cAAkB,0BAA0B;;QAGnD;EAED,WAAW,KAAG;;;YAGNA,cAAkB,cAAc;;;;EAIxC,UAAUA,cAAkB;EAC5B,aAAa,KAAG;;;YAGRA,cAAkB,gBAAgB;;;;EAI1C,MAAM,KAAG;EACT,SAAS,KAAG;;;;4BAIYC,SAAO,YAAY;;;;;EAK3C,QAAQD,cAAkB;EAC1B,WAAW,KAAG;;;YAGNA,cAAkB,OAAO;;;;EAIlC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC;AAEF,MAAa,cAAc,IAAI,OAAO,SAAS;CAC7C,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Layout/Layout.mjs

@@ -1,57 +1,60 @@
 'use client';
 
 import DraggablePanel_default from "../DraggablePanel/index.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import LayoutFooter_default from "./components/LayoutFooter.mjs";
 import LayoutHeader_default from "./components/LayoutHeader.mjs";
 import LayoutMain_default from "./components/LayoutMain.mjs";
 import LayoutSidebar_default from "./components/LayoutSidebar.mjs";
 import LayoutSidebarInner_default from "./components/LayoutSidebarInner.mjs";
 import LayoutToc_default from "./components/LayoutToc.mjs";
-import { memo, useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsive } from "antd-style";
 
 //#region src/Layout/Layout.tsx
 const Layout = memo(({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {
-	const { styles } = useStyles(headerHeight);
+	const cssVariables = useMemo(() => ({ "--layout-header-height": `${headerHeight}px` }), [headerHeight]);
 	const { mobile, laptop } = useResponsive();
 	const [expand, setExpand] = useState(true);
 	useEffect(() => {
 		setExpand(Boolean(laptop));
 	}, [laptop]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		helmet,
-		header && /* @__PURE__ */ jsxs(LayoutHeader_default, {
-			headerHeight,
-			children: [header, mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, { children: toc })]
-		}),
-		/* @__PURE__ */ jsxs(LayoutMain_default, { children: [
-			!mobile && !sidebar && /* @__PURE__ */ jsx("nav", { style: { width: tocWidth } }),
-			!mobile && sidebar && /* @__PURE__ */ jsx(LayoutSidebar_default, {
+	return /* @__PURE__ */ jsxs("div", {
+		style: cssVariables,
+		children: [
+			helmet,
+			header && /* @__PURE__ */ jsxs(LayoutHeader_default, {
 				headerHeight,
-				children: /* @__PURE__ */ jsx(DraggablePanel_default, {
-					expand,
-					maxWidth: asideWidth,
-					onExpandChange: setExpand,
-					placement: "left",
-					children: /* @__PURE__ */ jsx(LayoutSidebarInner_default, {
-						headerHeight,
-						children: sidebar
+				children: [header, mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, { children: toc })]
+			}),
+			/* @__PURE__ */ jsxs(LayoutMain_default, { children: [
+				!mobile && !sidebar && /* @__PURE__ */ jsx("nav", { style: { width: tocWidth } }),
+				!mobile && sidebar && /* @__PURE__ */ jsx(LayoutSidebar_default, {
+					headerHeight,
+					children: /* @__PURE__ */ jsx(DraggablePanel_default, {
+						expand,
+						maxWidth: asideWidth,
+						onExpandChange: setExpand,
+						placement: "left",
+						children: /* @__PURE__ */ jsx(LayoutSidebarInner_default, {
+							headerHeight,
+							children: sidebar
+						})
 					})
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: styles.content,
+					children
+				}),
+				!mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, {
+					tocWidth,
+					children: toc
 				})
-			}),
-			/* @__PURE__ */ jsx("section", {
-				className: styles.content,
-				children
-			}),
-			!mobile && toc && /* @__PURE__ */ jsx(LayoutToc_default, {
-				tocWidth,
-				children: toc
-			})
-		] }),
-		footer && /* @__PURE__ */ jsx(LayoutFooter_default, { children: footer })
-	] });
+			] }),
+			footer && /* @__PURE__ */ jsx(LayoutFooter_default, { children: footer })
+		]
+	});
 });
 var Layout_default = Layout;
 

package/es/Layout/Layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.mjs","names":["LayoutHeader","LayoutToc","LayoutMain","LayoutSidebar","DraggablePanel","LayoutSidebarInner","LayoutFooter"],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { useStyles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    const { styles } = useStyles(headerHeight);\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                onExpandChange={setExpand}\n                placement=\"left\"\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAC/F,MAAM,EAAE,WAAW,UAAU,aAAa;CAC1C,MAAM,EAAE,QAAQ,WAAW,eAAe;CAC1C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,iBAAgB;AACd,YAAU,QAAQ,OAAO,CAAC;IACzB,CAAC,OAAO,CAAC;AAEZ,QACE;EACG;EACA,UACC,qBAACA;GAA2B;cACzB,QACA,UAAU,OAAO,oBAACC,+BAAW,MAAgB;IACjC;EAEjB,qBAACC;GACE,CAAC,UAAU,CAAC,WAAW,oBAAC,SAAI,OAAO,EAAE,OAAO,UAAU,GAAI;GAC1D,CAAC,UAAU,WACV,oBAACC;IAA4B;cAC3B,oBAACC;KACS;KACR,UAAU;KACV,gBAAgB;KAChB,WAAU;eAEV,oBAACC;MAAiC;gBAAe;OAA6B;MAC/D;KACH;GAElB,oBAAC;IAAQ,WAAW,OAAO;IAAU;KAAmB;GACvD,CAAC,UAAU,OAAO,oBAACJ;IAAoB;cAAW;KAAgB;MACxD;EACZ,UAAU,oBAACK,kCAAc,SAAsB;KAC/C;EAGR;AAED,qBAAe"}
+{"version":3,"file":"Layout.mjs","names":["LayoutHeader","LayoutToc","LayoutMain","LayoutSidebar","DraggablePanel","LayoutSidebarInner","LayoutFooter"],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                onExpandChange={setExpand}\n                placement=\"left\"\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAE/F,MAAM,eAAe,eACZ,EACL,0BAA0B,GAAG,aAAa,KAC3C,GACD,CAAC,aAAa,CACf;CACD,MAAM,EAAE,QAAQ,WAAW,eAAe;CAC1C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,iBAAgB;AACd,YAAU,QAAQ,OAAO,CAAC;IACzB,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC;EAAI,OAAO;;GACT;GACA,UACC,qBAACA;IAA2B;eACzB,QACA,UAAU,OAAO,oBAACC,+BAAW,MAAgB;KACjC;GAEjB,qBAACC;IACE,CAAC,UAAU,CAAC,WAAW,oBAAC,SAAI,OAAO,EAAE,OAAO,UAAU,GAAI;IAC1D,CAAC,UAAU,WACV,oBAACC;KAA4B;eAC3B,oBAACC;MACS;MACR,UAAU;MACV,gBAAgB;MAChB,WAAU;gBAEV,oBAACC;OAAiC;iBAAe;QAA6B;OAC/D;MACH;IAElB,oBAAC;KAAQ,WAAW,OAAO;KAAU;MAAmB;IACvD,CAAC,UAAU,OAAO,oBAACJ;KAAoB;eAAW;MAAgB;OACxD;GACZ,UAAU,oBAACK,kCAAc,SAAsB;;GAC5C;EAGX;AAED,qBAAe"}

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react35 from "react";
+import * as react3 from "react";
 
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: react35.NamedExoticComponent<DivProps>;
+declare const LayoutFooter: react3.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutFooter };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutFooter.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutFooter.tsx
 const LayoutFooter = memo(({ children, className, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx("footer", {
 		className: cx(styles.footer, className),
 		...rest,

package/es/Layout/components/LayoutFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return (\n    <footer className={cx(styles.footer, className)} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;;AAOA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;CACxF,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAAC;EAAO,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAE,GAAI;EAClD;GACM;EAEX;AAEF,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  return (\n    <footer className={cx(styles.footer, className)} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;;;AAQA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;AACxF,QACE,oBAAC;EAAO,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAE,GAAI;EAClD;GACM;EAEX;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Layout/components/LayoutHeader.d.mts

@@ -1,8 +1,8 @@
 import { LayoutHeaderProps } from "../type.mjs";
-import * as react36 from "react";
+import * as react2 from "react";
 
 //#region src/Layout/components/LayoutHeader.d.ts
-declare const LayoutHeader: react36.NamedExoticComponent<LayoutHeaderProps>;
+declare const LayoutHeader: react2.NamedExoticComponent<LayoutHeaderProps>;
 //#endregion
 export { LayoutHeader };
 //# sourceMappingURL=LayoutHeader.d.mts.map

package/es/Layout/components/LayoutHeader.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutHeader.tsx
 const LayoutHeader = memo(({ headerHeight, children, className, style, ...rest }) => {
-	const { cx, styles } = useStyles(headerHeight);
 	return /* @__PURE__ */ jsx("header", {
 		className: cx(styles.header, className),
 		style: {

package/es/Layout/components/LayoutHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutHeader.mjs","names":[],"sources":["../../../src/Layout/components/LayoutHeader.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutHeaderProps } from '../type';\n\nexport const LayoutHeader = memo<LayoutHeaderProps>(\n  ({ headerHeight, children, className, style, ...rest }) => {\n    const { cx, styles } = useStyles(headerHeight);\n    return (\n      <header\n        className={cx(styles.header, className)}\n        style={{\n          height: headerHeight,\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </header>\n    );\n  },\n);\n\nLayoutHeader.displayName = 'LayoutHeader';\n\nexport default LayoutHeader;\n"],"mappings":";;;;;;;AAOA,MAAa,eAAe,MACzB,EAAE,cAAc,UAAU,WAAW,OAAO,GAAG,WAAW;CACzD,MAAM,EAAE,IAAI,WAAW,UAAU,aAAa;AAC9C,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,OAAO;GACL,QAAQ;GACR,GAAG;GACJ;EACD,GAAI;EAEH;GACM;EAGd;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"LayoutHeader.mjs","names":[],"sources":["../../../src/Layout/components/LayoutHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutHeaderProps } from '../type';\n\nexport const LayoutHeader = memo<LayoutHeaderProps>(\n  ({ headerHeight, children, className, style, ...rest }) => {\n    return (\n      <header\n        className={cx(styles.header, className)}\n        style={{\n          height: headerHeight,\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </header>\n    );\n  },\n);\n\nLayoutHeader.displayName = 'LayoutHeader';\n\nexport default LayoutHeader;\n"],"mappings":";;;;;;;;AAQA,MAAa,eAAe,MACzB,EAAE,cAAc,UAAU,WAAW,OAAO,GAAG,WAAW;AACzD,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,OAAO;GACL,QAAQ;GACR,GAAG;GACJ;EACD,GAAI;EAEH;GACM;EAGd;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Layout/components/LayoutMain.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react38 from "react";
+import * as react5 from "react";
 
 //#region src/Layout/components/LayoutMain.d.ts
-declare const LayoutMain: react38.NamedExoticComponent<DivProps>;
+declare const LayoutMain: react5.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutMain };
 //# sourceMappingURL=LayoutMain.d.mts.map

package/es/Layout/components/LayoutMain.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutMain.tsx
 const LayoutMain = memo(({ children, className, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx("main", {
 		className: cx(styles.main, className),
 		...rest,

package/es/Layout/components/LayoutMain.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutMain.mjs","names":[],"sources":["../../../src/Layout/components/LayoutMain.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutMainProps } from '../type';\n\nexport const LayoutMain = memo<LayoutMainProps>(({ children, className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return (\n    <main className={cx(styles.main, className)} {...rest}>\n      {children}\n    </main>\n  );\n});\n\nLayoutMain.displayName = 'LayoutMain';\n\nexport default LayoutMain;\n"],"mappings":";;;;;;;AAOA,MAAa,aAAa,MAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;CACpF,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAAC;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;EAC9C;GACI;EAET;AAEF,WAAW,cAAc;AAEzB,yBAAe"}
+{"version":3,"file":"LayoutMain.mjs","names":[],"sources":["../../../src/Layout/components/LayoutMain.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutMainProps } from '../type';\n\nexport const LayoutMain = memo<LayoutMainProps>(({ children, className, ...rest }) => {\n  return (\n    <main className={cx(styles.main, className)} {...rest}>\n      {children}\n    </main>\n  );\n});\n\nLayoutMain.displayName = 'LayoutMain';\n\nexport default LayoutMain;\n"],"mappings":";;;;;;;;AAQA,MAAa,aAAa,MAAuB,EAAE,UAAU,WAAW,GAAG,WAAW;AACpF,QACE,oBAAC;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;EAC9C;GACI;EAET;AAEF,WAAW,cAAc;AAEzB,yBAAe"}

package/es/Layout/components/LayoutSidebar.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarProps } from "../type.mjs";
-import * as react37 from "react";
+import * as react4 from "react";
 
 //#region src/Layout/components/LayoutSidebar.d.ts
-declare const LayoutSidebar: react37.NamedExoticComponent<LayoutSidebarProps>;
+declare const LayoutSidebar: react4.NamedExoticComponent<LayoutSidebarProps>;
 //#endregion
 export { LayoutSidebar };
 //# sourceMappingURL=LayoutSidebar.d.mts.map

package/es/Layout/components/LayoutSidebar.mjs

@@ -1,16 +1,16 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutSidebar.tsx
 const LayoutSidebar = memo(({ headerHeight, children, className, style, ...rest }) => {
-	const { cx, styles } = useStyles(headerHeight);
 	return /* @__PURE__ */ jsx("aside", {
 		className: cx(styles.aside, className),
 		style: {
-			top: headerHeight,
+			top: `var(--layout-header-height, ${headerHeight}px)`,
 			...style
 		},
 		...rest,

package/es/Layout/components/LayoutSidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSidebar.mjs","names":[],"sources":["../../../src/Layout/components/LayoutSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutSidebarProps } from '../type';\n\nexport const LayoutSidebar = memo<LayoutSidebarProps>(\n  ({ headerHeight, children, className, style, ...rest }) => {\n    const { cx, styles } = useStyles(headerHeight);\n    return (\n      <aside\n        className={cx(styles.aside, className)}\n        style={{ top: headerHeight, ...style }}\n        {...rest}\n      >\n        {children}\n      </aside>\n    );\n  },\n);\n\nLayoutSidebar.displayName = 'LayoutSidebar';\n\nexport default LayoutSidebar;\n"],"mappings":";;;;;;;AAOA,MAAa,gBAAgB,MAC1B,EAAE,cAAc,UAAU,WAAW,OAAO,GAAG,WAAW;CACzD,MAAM,EAAE,IAAI,WAAW,UAAU,aAAa;AAC9C,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,OAAO,UAAU;EACtC,OAAO;GAAE,KAAK;GAAc,GAAG;GAAO;EACtC,GAAI;EAEH;GACK;EAGb;AAED,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"LayoutSidebar.mjs","names":[],"sources":["../../../src/Layout/components/LayoutSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutSidebarProps } from '../type';\n\nexport const LayoutSidebar = memo<LayoutSidebarProps>(\n  ({ headerHeight, children, className, style, ...rest }) => {\n    return (\n      <aside\n        className={cx(styles.aside, className)}\n        style={{\n          top: `var(--layout-header-height, ${headerHeight}px)`,\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </aside>\n    );\n  },\n);\n\nLayoutSidebar.displayName = 'LayoutSidebar';\n\nexport default LayoutSidebar;\n"],"mappings":";;;;;;;;AAQA,MAAa,gBAAgB,MAC1B,EAAE,cAAc,UAAU,WAAW,OAAO,GAAG,WAAW;AACzD,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,OAAO,UAAU;EACtC,OAAO;GACL,KAAK,+BAA+B,aAAa;GACjD,GAAG;GACJ;EACD,GAAI;EAEH;GACK;EAGb;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Layout/components/LayoutSidebarInner.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarInnerProps } from "../type.mjs";
-import * as react39 from "react";
+import * as react6 from "react";
 
 //#region src/Layout/components/LayoutSidebarInner.d.ts
-declare const LayoutSidebarInner: react39.NamedExoticComponent<LayoutSidebarInnerProps>;
+declare const LayoutSidebarInner: react6.NamedExoticComponent<LayoutSidebarInnerProps>;
 //#endregion
 export { LayoutSidebarInner };
 //# sourceMappingURL=LayoutSidebarInner.d.mts.map

package/es/Layout/components/LayoutSidebarInner.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutSidebarInner.tsx
 const LayoutSidebarInner = memo(({ headerHeight, children, className, ...rest }) => {
-	const { cx, styles } = useStyles(headerHeight);
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(styles.asideInner, className),
 		...rest,

package/es/Layout/components/LayoutSidebarInner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSidebarInner.mjs","names":[],"sources":["../../../src/Layout/components/LayoutSidebarInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutSidebarInnerProps } from '../type';\n\nexport const LayoutSidebarInner = memo<LayoutSidebarInnerProps>(\n  ({ headerHeight, children, className, ...rest }) => {\n    const { cx, styles } = useStyles(headerHeight);\n    return (\n      <div className={cx(styles.asideInner, className)} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n\nLayoutSidebarInner.displayName = 'LayoutSidebarInner';\n\nexport default LayoutSidebarInner;\n"],"mappings":";;;;;;;AAOA,MAAa,qBAAqB,MAC/B,EAAE,cAAc,UAAU,WAAW,GAAG,WAAW;CAClD,MAAM,EAAE,IAAI,WAAW,UAAU,aAAa;AAC9C,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,YAAY,UAAU;EAAE,GAAI;EACnD;GACG;EAGX;AAED,mBAAmB,cAAc;AAEjC,iCAAe"}
+{"version":3,"file":"LayoutSidebarInner.mjs","names":[],"sources":["../../../src/Layout/components/LayoutSidebarInner.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutSidebarInnerProps } from '../type';\n\nexport const LayoutSidebarInner = memo<LayoutSidebarInnerProps>(\n  ({ headerHeight, children, className, ...rest }) => {\n    // headerHeight is part of the interface but not used in this component\n    void headerHeight;\n    return (\n      <div className={cx(styles.asideInner, className)} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n\nLayoutSidebarInner.displayName = 'LayoutSidebarInner';\n\nexport default LayoutSidebarInner;\n"],"mappings":";;;;;;;;AAQA,MAAa,qBAAqB,MAC/B,EAAE,cAAc,UAAU,WAAW,GAAG,WAAW;AAGlD,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,YAAY,UAAU;EAAE,GAAI;EACnD;GACG;EAGX;AAED,mBAAmB,cAAc;AAEjC,iCAAe"}

package/es/Layout/components/LayoutToc.d.mts

@@ -1,8 +1,8 @@
 import { LayoutTocProps } from "../type.mjs";
-import * as react40 from "react";
+import * as react7 from "react";
 
 //#region src/Layout/components/LayoutToc.d.ts
-declare const LayoutToc: react40.NamedExoticComponent<LayoutTocProps>;
+declare const LayoutToc: react7.NamedExoticComponent<LayoutTocProps>;
 //#endregion
 export { LayoutToc };
 //# sourceMappingURL=LayoutToc.d.mts.map

package/es/Layout/components/LayoutToc.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Layout/components/LayoutToc.tsx
 const LayoutToc = memo(({ tocWidth, style, className, children, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx("nav", {
 		className: cx(styles.toc, className),
 		style: tocWidth ? {

package/es/Layout/components/LayoutToc.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutToc.mjs","names":[],"sources":["../../../src/Layout/components/LayoutToc.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { useStyles } from '../style';\nimport type { LayoutTocProps } from '../type';\n\nexport const LayoutToc = memo<LayoutTocProps>(\n  ({ tocWidth, style, className, children, ...rest }) => {\n    const { cx, styles } = useStyles();\n    return (\n      <nav\n        className={cx(styles.toc, className)}\n        style={tocWidth ? { width: tocWidth, ...style } : style}\n        {...rest}\n      >\n        {children}\n      </nav>\n    );\n  },\n);\n\nLayoutToc.displayName = 'LayoutToc';\n\nexport default LayoutToc;\n"],"mappings":";;;;;;;AAOA,MAAa,YAAY,MACtB,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,WAAW;CACrD,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,KAAK,UAAU;EACpC,OAAO,WAAW;GAAE,OAAO;GAAU,GAAG;GAAO,GAAG;EAClD,GAAI;EAEH;GACG;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"LayoutToc.mjs","names":[],"sources":["../../../src/Layout/components/LayoutToc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutTocProps } from '../type';\n\nexport const LayoutToc = memo<LayoutTocProps>(\n  ({ tocWidth, style, className, children, ...rest }) => {\n    return (\n      <nav\n        className={cx(styles.toc, className)}\n        style={tocWidth ? { width: tocWidth, ...style } : style}\n        {...rest}\n      >\n        {children}\n      </nav>\n    );\n  },\n);\n\nLayoutToc.displayName = 'LayoutToc';\n\nexport default LayoutToc;\n"],"mappings":";;;;;;;;AAQA,MAAa,YAAY,MACtB,EAAE,UAAU,OAAO,WAAW,UAAU,GAAG,WAAW;AACrD,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,KAAK,UAAU;EACpC,OAAO,WAAW;GAAE,OAAO;GAAU,GAAG;GAAO,GAAG;EAClD,GAAI;EAEH;GACG;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Layout/style.mjs

@@ -1,7 +1,8 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/Layout/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish }, headerHeight) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		app: css$1`
       overflow: hidden auto;
@@ -15,7 +16,7 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish }, headerHeight)
 		asideInner: css$1`
       overflow: hidden auto;
       width: 100%;
-      height: calc(100dvh - ${headerHeight}px);
+      height: calc(100dvh - var(--layout-header-height, 64px));
     `,
 		content: css$1`
       position: relative;
@@ -26,7 +27,7 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish }, headerHeight)
       position: relative;
       max-width: 100%;
     `,
-		header: cx$1(stylish.blur, css$1`
+		header: cx(staticStylish.blur, css$1`
         position: sticky;
         z-index: 999;
         inset-block-start: 0;
@@ -43,5 +44,5 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish }, headerHeight)
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Layout/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Layout/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, css, stylish }, headerHeight: number) => {\n  return {\n    app: css`\n      overflow: hidden auto;\n      height: 100dvh;\n    `,\n    aside: css`\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    `,\n    asideInner: css`\n      overflow: hidden auto;\n      width: 100%;\n      height: calc(100dvh - ${headerHeight}px);\n    `,\n    content: css`\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    `,\n\n    footer: css`\n      position: relative;\n      max-width: 100%;\n    `,\n    header: cx(\n      stylish.blur,\n      css`\n        position: sticky;\n        z-index: 999;\n        inset-block-start: 0;\n        max-width: 100%;\n      `,\n    ),\n    main: css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    `,\n    toc: css``,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAK,WAAW,iBAAyB;AACpF,QAAO;EACL,KAAK,KAAG;;;;EAIR,OAAO,KAAG;;;;;EAKV,YAAY,KAAG;;;8BAGW,aAAa;;EAEvC,SAAS,KAAG;;;;;EAMZ,QAAQ,KAAG;;;;EAIX,QAAQA,KACN,QAAQ,MACR,KAAG;;;;;QAMJ;EACD,MAAM,KAAG;;;;;;EAMT,KAAK,KAAG;EACT;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Layout/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    app: css`\n      overflow: hidden auto;\n      height: 100dvh;\n    `,\n    aside: css`\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    `,\n    asideInner: css`\n      overflow: hidden auto;\n      width: 100%;\n      height: calc(100dvh - var(--layout-header-height, 64px));\n    `,\n    content: css`\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    `,\n\n    footer: css`\n      position: relative;\n      max-width: 100%;\n    `,\n    header: cx(\n      lobeStaticStylish.blur,\n      css`\n        position: sticky;\n        z-index: 999;\n        inset-block-start: 0;\n        max-width: 100%;\n      `,\n    ),\n    main: css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    `,\n    toc: css``,\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,KAAK,KAAG;;;;EAIR,OAAO,KAAG;;;;;EAKV,YAAY,KAAG;;;;;EAKf,SAAS,KAAG;;;;;EAMZ,QAAQ,KAAG;;;;EAIX,QAAQ,GACNA,cAAkB,MAClB,KAAG;;;;;QAMJ;EACD,MAAM,KAAG;;;;;;EAMT,KAAK,KAAG;EACT;EACD"}

package/es/List/ListItem/index.d.mts

@@ -1,8 +1,8 @@
 import { ListItemProps } from "../type.mjs";
-import * as react34 from "react";
+import * as react53 from "react";
 
 //#region src/List/ListItem/index.d.ts
-declare const ListItem: react34.NamedExoticComponent<ListItemProps>;
+declare const ListItem: react53.NamedExoticComponent<ListItemProps>;
 //#endregion
 export { ListItem };
 //# sourceMappingURL=index.d.mts.map

package/es/List/ListItem/index.mjs

@@ -3,15 +3,15 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon_default from "../../Icon/Icon.mjs";
 import Text_default from "../../Text/Text.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { getChatItemTime } from "./time.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { Loader2, MessageSquare } from "lucide-react";
 
 //#region src/List/ListItem/index.tsx
 const ListItem = memo(({ ref, active, avatar, loading, description, date, title, onHoverChange, actions, className, style, showAction, children, classNames, addon, pin, styles: customStyles, ...rest }) => {
-	const { styles, cx } = useStyles();
 	const loadingNode = /* @__PURE__ */ jsx(Icon_default, {
 		icon: Loader2,
 		spin: true

package/es/List/ListItem/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Icon","Flexbox","Text"],"sources":["../../../src/List/ListItem/index.tsx"],"sourcesContent":["'use client';\n\nimport { Loader2, MessageSquare } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport type { ListItemProps } from '../type';\nimport { useStyles } from './style';\nimport { getChatItemTime } from './time';\n\nconst ListItem = memo<ListItemProps>(\n  ({\n    ref,\n    active,\n    avatar,\n    loading,\n    description,\n    date,\n    title,\n    onHoverChange,\n    actions,\n    className,\n    style,\n    showAction,\n    children,\n    classNames,\n    addon,\n    pin,\n    styles: customStyles,\n    ...rest\n  }) => {\n    const { styles, cx } = useStyles();\n\n    const loadingNode = <Icon icon={Loader2} spin />;\n\n    const pinNode = pin && (\n      <div className={cx(styles.pin, classNames?.pin)} style={customStyles?.pin}>\n        <div className={styles.triangle} />\n      </div>\n    );\n\n    const actionsNode = actions && (\n      <Flexbox\n        className={cx(styles.actions, classNames?.actions)}\n        gap={4}\n        horizontal\n        onClick={(e: any) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        style={{ display: showAction ? undefined : 'none', ...customStyles?.actions }}\n      >\n        {actions}\n      </Flexbox>\n    );\n\n    const timeNode = date && (\n      <div\n        className={cx(styles.date, classNames?.date)}\n        style={{ opacity: showAction ? 0 : undefined, ...customStyles?.date }}\n      >\n        {getChatItemTime(date)}\n      </div>\n    );\n\n    return (\n      <Flexbox\n        align={'flex-start'}\n        className={cx(styles.root, active && styles.active, className)}\n        distribution={'space-between'}\n        gap={8}\n        horizontal\n        onMouseEnter={() => {\n          onHoverChange?.(true);\n        }}\n        onMouseLeave={() => {\n          onHoverChange?.(false);\n        }}\n        padding={12}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {pinNode}\n        <Flexbox\n          align={'flex-start'}\n          className={classNames?.container}\n          flex={1}\n          gap={8}\n          horizontal\n          style={{ overflow: 'hidden', ...customStyles?.container }}\n        >\n          {avatar ?? <Icon icon={MessageSquare} style={{ marginTop: 4 }} />}\n          <Flexbox\n            className={cx(styles.content, classNames?.content)}\n            gap={4}\n            style={customStyles?.content}\n          >\n            <Text\n              as={'h3'}\n              className={cx(styles.title, classNames?.title)}\n              ellipsis\n              style={customStyles?.title}\n            >\n              {title}\n            </Text>\n            {description && (\n              <Text\n                className={cx(styles.desc, classNames?.desc)}\n                ellipsis\n                style={customStyles?.desc}\n              >\n                {description}\n              </Text>\n            )}\n            {addon}\n          </Flexbox>\n        </Flexbox>\n        {loading ? (\n          loadingNode\n        ) : (\n          <>\n            {actionsNode}\n            {timeNode}\n          </>\n        )}\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,WAAW,MACd,EACC,KACA,QACA,QACA,SACA,aACA,MACA,OACA,eACA,SACA,WACA,OACA,YACA,UACA,YACA,OACA,KACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,cAAc,oBAACA;EAAK,MAAM;EAAS;GAAO;CAEhD,MAAM,UAAU,OACd,oBAAC;EAAI,WAAW,GAAG,OAAO,KAAK,YAAY,IAAI;EAAE,OAAO,cAAc;YACpE,oBAAC,SAAI,WAAW,OAAO,WAAY;GAC/B;CAGR,MAAM,cAAc,WAClB,oBAACC;EACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;EAClD,KAAK;EACL;EACA,UAAU,MAAW;AACnB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;EAErB,OAAO;GAAE,SAAS,aAAa,SAAY;GAAQ,GAAG,cAAc;GAAS;YAE5E;GACO;CAGZ,MAAM,WAAW,QACf,oBAAC;EACC,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;EAC5C,OAAO;GAAE,SAAS,aAAa,IAAI;GAAW,GAAG,cAAc;GAAM;YAEpE,gBAAgB,KAAK;GAClB;AAGR,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,UAAU;EAC9D,cAAc;EACd,KAAK;EACL;EACA,oBAAoB;AAClB,mBAAgB,KAAK;;EAEvB,oBAAoB;AAClB,mBAAgB,MAAM;;EAExB,SAAS;EACJ;EACE;EACP,GAAI;;GAEH;GACD,qBAACA;IACC,OAAO;IACP,WAAW,YAAY;IACvB,MAAM;IACN,KAAK;IACL;IACA,OAAO;KAAE,UAAU;KAAU,GAAG,cAAc;KAAW;eAExD,UAAU,oBAACD;KAAK,MAAM;KAAe,OAAO,EAAE,WAAW,GAAG;MAAI,EACjE,qBAACC;KACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;KAClD,KAAK;KACL,OAAO,cAAc;;MAErB,oBAACC;OACC,IAAI;OACJ,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C;OACA,OAAO,cAAc;iBAEpB;QACI;MACN,eACC,oBAACA;OACC,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;OAC5C;OACA,OAAO,cAAc;iBAEpB;QACI;MAER;;MACO;KACF;GACT,UACC,cAEA,8CACG,aACA,YACA;GAEJ;;GACO;EAGf;AAED,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"index.mjs","names":["Icon","Flexbox","Text"],"sources":["../../../src/List/ListItem/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Loader2, MessageSquare } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport type { ListItemProps } from '../type';\nimport { styles } from './style';\nimport { getChatItemTime } from './time';\n\nconst ListItem = memo<ListItemProps>(\n  ({\n    ref,\n    active,\n    avatar,\n    loading,\n    description,\n    date,\n    title,\n    onHoverChange,\n    actions,\n    className,\n    style,\n    showAction,\n    children,\n    classNames,\n    addon,\n    pin,\n    styles: customStyles,\n    ...rest\n  }) => {\n    const loadingNode = <Icon icon={Loader2} spin />;\n\n    const pinNode = pin && (\n      <div className={cx(styles.pin, classNames?.pin)} style={customStyles?.pin}>\n        <div className={styles.triangle} />\n      </div>\n    );\n\n    const actionsNode = actions && (\n      <Flexbox\n        className={cx(styles.actions, classNames?.actions)}\n        gap={4}\n        horizontal\n        onClick={(e: any) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        style={{ display: showAction ? undefined : 'none', ...customStyles?.actions }}\n      >\n        {actions}\n      </Flexbox>\n    );\n\n    const timeNode = date && (\n      <div\n        className={cx(styles.date, classNames?.date)}\n        style={{ opacity: showAction ? 0 : undefined, ...customStyles?.date }}\n      >\n        {getChatItemTime(date)}\n      </div>\n    );\n\n    return (\n      <Flexbox\n        align={'flex-start'}\n        className={cx(styles.root, active && styles.active, className)}\n        distribution={'space-between'}\n        gap={8}\n        horizontal\n        onMouseEnter={() => {\n          onHoverChange?.(true);\n        }}\n        onMouseLeave={() => {\n          onHoverChange?.(false);\n        }}\n        padding={12}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {pinNode}\n        <Flexbox\n          align={'flex-start'}\n          className={classNames?.container}\n          flex={1}\n          gap={8}\n          horizontal\n          style={{ overflow: 'hidden', ...customStyles?.container }}\n        >\n          {avatar ?? <Icon icon={MessageSquare} style={{ marginTop: 4 }} />}\n          <Flexbox\n            className={cx(styles.content, classNames?.content)}\n            gap={4}\n            style={customStyles?.content}\n          >\n            <Text\n              as={'h3'}\n              className={cx(styles.title, classNames?.title)}\n              ellipsis\n              style={customStyles?.title}\n            >\n              {title}\n            </Text>\n            {description && (\n              <Text\n                className={cx(styles.desc, classNames?.desc)}\n                ellipsis\n                style={customStyles?.desc}\n              >\n                {description}\n              </Text>\n            )}\n            {addon}\n          </Flexbox>\n        </Flexbox>\n        {loading ? (\n          loadingNode\n        ) : (\n          <>\n            {actionsNode}\n            {timeNode}\n          </>\n        )}\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,WAAW,MACd,EACC,KACA,QACA,QACA,SACA,aACA,MACA,OACA,eACA,SACA,WACA,OACA,YACA,UACA,YACA,OACA,KACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,cAAc,oBAACA;EAAK,MAAM;EAAS;GAAO;CAEhD,MAAM,UAAU,OACd,oBAAC;EAAI,WAAW,GAAG,OAAO,KAAK,YAAY,IAAI;EAAE,OAAO,cAAc;YACpE,oBAAC,SAAI,WAAW,OAAO,WAAY;GAC/B;CAGR,MAAM,cAAc,WAClB,oBAACC;EACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;EAClD,KAAK;EACL;EACA,UAAU,MAAW;AACnB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;EAErB,OAAO;GAAE,SAAS,aAAa,SAAY;GAAQ,GAAG,cAAc;GAAS;YAE5E;GACO;CAGZ,MAAM,WAAW,QACf,oBAAC;EACC,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;EAC5C,OAAO;GAAE,SAAS,aAAa,IAAI;GAAW,GAAG,cAAc;GAAM;YAEpE,gBAAgB,KAAK;GAClB;AAGR,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,UAAU;EAC9D,cAAc;EACd,KAAK;EACL;EACA,oBAAoB;AAClB,mBAAgB,KAAK;;EAEvB,oBAAoB;AAClB,mBAAgB,MAAM;;EAExB,SAAS;EACJ;EACE;EACP,GAAI;;GAEH;GACD,qBAACA;IACC,OAAO;IACP,WAAW,YAAY;IACvB,MAAM;IACN,KAAK;IACL;IACA,OAAO;KAAE,UAAU;KAAU,GAAG,cAAc;KAAW;eAExD,UAAU,oBAACD;KAAK,MAAM;KAAe,OAAO,EAAE,WAAW,GAAG;MAAI,EACjE,qBAACC;KACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;KAClD,KAAK;KACL,OAAO,cAAc;;MAErB,oBAACC;OACC,IAAI;OACJ,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C;OACA,OAAO,cAAc;iBAEpB;QACI;MACN,eACC,oBAACA;OACC,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;OAC5C;OACA,OAAO,cAAc;iBAEpB;QACI;MAER;;MACO;KACF;GACT,UACC,cAEA,8CACG,aACA,YACA;GAEJ;;GACO;EAGf;AAED,SAAS,cAAc;AAEvB,uBAAe"}