@lobehub/ui 4.3.2 → 4.3.3

package/es/FileTypeIcon/components/FolderIcon.mjs

@@ -1,9 +1,9 @@
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
 
 //#region src/FileTypeIcon/components/FolderIcon.tsx
 const FolderIcon = ({ size, isMono, hasIcon, iconColor, filetype, className, fontSize, style, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
 	return /* @__PURE__ */ jsxs("svg", {
 		className: cx(styles.icon, !hasIcon && className),
 		height: size,
@@ -15,10 +15,10 @@ const FolderIcon = ({ size, isMono, hasIcon, iconColor, filetype, className, fon
 		children: [/* @__PURE__ */ jsx("path", {
 			d: "M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z",
 			fill: iconColor,
-			stroke: theme.colorFillSecondary,
+			stroke: cssVar.colorFillSecondary,
 			strokeWidth: .5
 		}), !hasIcon && filetype && /* @__PURE__ */ jsx("text", {
-			fill: isMono ? theme.colorTextSecondary : "#fff",
+			fill: isMono ? cssVar.colorTextSecondary : "#fff",
 			fontSize,
 			fontWeight: "bold",
 			textAnchor: "middle",

package/es/FileTypeIcon/components/FolderIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FolderIcon.mjs","names":["FolderIcon: FC<FolderIconProps>"],"sources":["../../../src/FileTypeIcon/components/FolderIcon.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { SvgProps } from '@/types';\n\nimport { useStyles } from '../style';\n\ninterface FolderIconProps extends SvgProps {\n  filetype?: string;\n  fontSize?: number;\n  hasIcon?: boolean;\n  iconColor?: string;\n  isMono?: boolean;\n  size?: number;\n}\n\nconst FolderIcon: FC<FolderIconProps> = ({\n  size,\n  isMono,\n  hasIcon,\n  iconColor,\n  filetype,\n  className,\n  fontSize,\n  style,\n  ...rest\n}) => {\n  const { cx, styles, theme } = useStyles();\n  return (\n    <svg\n      className={cx(styles.icon, !hasIcon && className)}\n      height={size}\n      style={hasIcon ? undefined : style}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <path\n        d=\"M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z\"\n        fill={iconColor}\n        stroke={theme.colorFillSecondary}\n        strokeWidth={0.5}\n      />\n      {!hasIcon && filetype && (\n        <text\n          fill={isMono ? theme.colorTextSecondary : '#fff'}\n          fontSize={fontSize}\n          fontWeight=\"bold\"\n          textAnchor=\"middle\"\n          x=\"50%\"\n          y=\"70%\"\n        >\n          {filetype.toUpperCase()}\n        </text>\n      )}\n    </svg>\n  );\n};\n\nexport default FolderIcon;\n"],"mappings":";;;;AAeA,MAAMA,cAAmC,EACvC,MACA,QACA,SACA,WACA,UACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;AACzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,UAAU;EACjD,QAAQ;EACR,OAAO,UAAU,SAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;aAEJ,oBAAC;GACC,GAAE;GACF,MAAM;GACN,QAAQ,MAAM;GACd,aAAa;IACb,EACD,CAAC,WAAW,YACX,oBAAC;GACC,MAAM,SAAS,MAAM,qBAAqB;GAChC;GACV,YAAW;GACX,YAAW;GACX,GAAE;GACF,GAAE;aAED,SAAS,aAAa;IAClB;GAEL;;AAIV,yBAAe"}
+{"version":3,"file":"FolderIcon.mjs","names":["FolderIcon: FC<FolderIconProps>"],"sources":["../../../src/FileTypeIcon/components/FolderIcon.tsx"],"sourcesContent":["import { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { SvgProps } from '@/types';\n\nimport { styles } from '../style';\n\ninterface FolderIconProps extends SvgProps {\n  filetype?: string;\n  fontSize?: number;\n  hasIcon?: boolean;\n  iconColor?: string;\n  isMono?: boolean;\n  size?: number;\n}\n\nconst FolderIcon: FC<FolderIconProps> = ({\n  size,\n  isMono,\n  hasIcon,\n  iconColor,\n  filetype,\n  className,\n  fontSize,\n  style,\n  ...rest\n}) => {\n  return (\n    <svg\n      className={cx(styles.icon, !hasIcon && className)}\n      height={size}\n      style={hasIcon ? undefined : style}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <path\n        d=\"M10.46 5.076l-.92-.752A1.446 1.446 0 008.626 4H3.429c-.38 0-.743.147-1.01.41A1.386 1.386 0 002 5.4v13.2c0 .371.15.727.418.99.268.262.632.41 1.01.41h17.143c.38 0 .743-.148 1.01-.41.268-.263.419-.619.419-.99V6.8c0-.371-.15-.727-.418-.99a1.444 1.444 0 00-1.01-.41h-9.198c-.334 0-.657-.115-.914-.324z\"\n        fill={iconColor}\n        stroke={cssVar.colorFillSecondary}\n        strokeWidth={0.5}\n      />\n      {!hasIcon && filetype && (\n        <text\n          fill={isMono ? cssVar.colorTextSecondary : '#fff'}\n          fontSize={fontSize}\n          fontWeight=\"bold\"\n          textAnchor=\"middle\"\n          x=\"50%\"\n          y=\"70%\"\n        >\n          {filetype.toUpperCase()}\n        </text>\n      )}\n    </svg>\n  );\n};\n\nexport default FolderIcon;\n"],"mappings":";;;;;AAgBA,MAAMA,cAAmC,EACvC,MACA,QACA,SACA,WACA,UACA,WACA,UACA,OACA,GAAG,WACC;AACJ,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,MAAM,CAAC,WAAW,UAAU;EACjD,QAAQ;EACR,OAAO,UAAU,SAAY;EAC7B,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;aAEJ,oBAAC;GACC,GAAE;GACF,MAAM;GACN,QAAQ,OAAO;GACf,aAAa;IACb,EACD,CAAC,WAAW,YACX,oBAAC;GACC,MAAM,SAAS,OAAO,qBAAqB;GACjC;GACV,YAAW;GACX,YAAW;GACX,GAAE;GACF,GAAE;aAED,SAAS,aAAa;IAClB;GAEL;;AAIV,yBAAe"}

package/es/FileTypeIcon/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/FileTypeIcon/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		container: css$1`
       position: relative;
@@ -19,5 +19,5 @@ const useStyles = createStyles(({ css: css$1 }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/FileTypeIcon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FileTypeIcon/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n    `,\n    icon: css`\n      position: relative;\n      flex: none;\n      line-height: 1;\n    `,\n    inner: css`\n      position: absolute;\n      z-index: 1;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO;EACL,WAAW,KAAG;;;EAGd,MAAM,KAAG;;;;;EAKT,OAAO,KAAG;;;;EAIX;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FileTypeIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n    `,\n    icon: css`\n      position: relative;\n      flex: none;\n      line-height: 1;\n    `,\n    inner: css`\n      position: absolute;\n      z-index: 1;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,WAAW,KAAG;;;EAGd,MAAM,KAAG;;;;;EAKT,OAAO,KAAG;;;;EAIX;EACD"}

package/es/Flex/FlexBasic.d.mts

@@ -1,8 +1,8 @@
 import { FlexBasicProps } from "./type.mjs";
-import * as react55 from "react";
+import * as react69 from "react";
 
 //#region src/Flex/FlexBasic.d.ts
-declare const _default: react55.NamedExoticComponent<FlexBasicProps>;
+declare const _default: react69.NamedExoticComponent<FlexBasicProps>;
 //#endregion
 export { _default };
 //# sourceMappingURL=FlexBasic.d.mts.map

package/es/FluentEmoji/FluentEmoji.mjs

@@ -3,16 +3,16 @@
 import { useCdnFn } from "../ConfigProvider/index.mjs";
 import Center_default from "../Flex/Center.mjs";
 import Img_default from "../Img/index.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { genEmojiUrl } from "./utils.mjs";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/FluentEmoji/FluentEmoji.tsx
 const FluentEmoji = ({ emoji, className, style, type = "3d", size = 40, unoptimized, ref, ...rest }) => {
 	const [loadingFail, setLoadingFail] = useState(false);
 	const genCdnUrl = useCdnFn();
-	const { cx, styles } = useStyles();
 	const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);
 	if (type === "raw" || !emojiUrl || loadingFail) return /* @__PURE__ */ jsx(Center_default, {
 		className: cx(styles.container, className),

package/es/FluentEmoji/FluentEmoji.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FluentEmoji.mjs","names":["FluentEmoji: FC<FluentEmojiProps>","Center","Img"],"sources":["../../src/FluentEmoji/FluentEmoji.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useMemo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport { Center } from '@/Flex';\nimport Img from '@/Img';\n\nimport { useStyles } from './style';\nimport type { FluentEmojiProps } from './type';\nimport { genEmojiUrl } from './utils';\n\nconst FluentEmoji: FC<FluentEmojiProps> = ({\n  emoji,\n  className,\n  style,\n  type = '3d',\n  size = 40,\n  unoptimized,\n  ref,\n  ...rest\n}) => {\n  const [loadingFail, setLoadingFail] = useState(false);\n  const genCdnUrl = useCdnFn();\n  const { cx, styles } = useStyles();\n\n  const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);\n\n  if (type === 'raw' || !emojiUrl || loadingFail)\n    return (\n      <Center\n        className={cx(styles.container, className)}\n        flex={'none'}\n        height={size}\n        ref={ref}\n        role={'img'}\n        style={{ fontSize: size * 0.9, ...style }}\n        width={size}\n        {...rest}\n      >\n        {emoji}\n      </Center>\n    );\n\n  return (\n    <Img\n      alt={emoji}\n      className={className}\n      height={size}\n      loading={'lazy'}\n      onError={() => setLoadingFail(true)}\n      ref={ref}\n      src={genCdnUrl(emojiUrl)}\n      style={{ flex: 'none', ...style }}\n      unoptimized={unoptimized}\n      width={size}\n      {...rest}\n    />\n  );\n};\n\nFluentEmoji.displayName = 'FluentEmoji';\n\nexport default FluentEmoji;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAqC,EACzC,OACA,WACA,OACA,OAAO,MACP,OAAO,IACP,aACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,YAAY,UAAU;CAC5B,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAAc,YAAY,OAAO,KAAK,EAAE,CAAC,MAAM,MAAM,CAAC;AAEvE,KAAI,SAAS,SAAS,CAAC,YAAY,YACjC,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,MAAM;EACN,QAAQ;EACH;EACL,MAAM;EACN,OAAO;GAAE,UAAU,OAAO;GAAK,GAAG;GAAO;EACzC,OAAO;EACP,GAAI;YAEH;GACM;AAGb,QACE,oBAACC;EACC,KAAK;EACM;EACX,QAAQ;EACR,SAAS;EACT,eAAe,eAAe,KAAK;EAC9B;EACL,KAAK,UAAU,SAAS;EACxB,OAAO;GAAE,MAAM;GAAQ,GAAG;GAAO;EACpB;EACb,OAAO;EACP,GAAI;GACJ;;AAIN,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"FluentEmoji.mjs","names":["FluentEmoji: FC<FluentEmojiProps>","Center","Img"],"sources":["../../src/FluentEmoji/FluentEmoji.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport { Center } from '@/Flex';\nimport Img from '@/Img';\n\nimport { styles } from './style';\nimport type { FluentEmojiProps } from './type';\nimport { genEmojiUrl } from './utils';\n\nconst FluentEmoji: FC<FluentEmojiProps> = ({\n  emoji,\n  className,\n  style,\n  type = '3d',\n  size = 40,\n  unoptimized,\n  ref,\n  ...rest\n}) => {\n  const [loadingFail, setLoadingFail] = useState(false);\n  const genCdnUrl = useCdnFn();\n\n  const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);\n\n  if (type === 'raw' || !emojiUrl || loadingFail)\n    return (\n      <Center\n        className={cx(styles.container, className)}\n        flex={'none'}\n        height={size}\n        ref={ref}\n        role={'img'}\n        style={{ fontSize: size * 0.9, ...style }}\n        width={size}\n        {...rest}\n      >\n        {emoji}\n      </Center>\n    );\n\n  return (\n    <Img\n      alt={emoji}\n      className={className}\n      height={size}\n      loading={'lazy'}\n      onError={() => setLoadingFail(true)}\n      ref={ref}\n      src={genCdnUrl(emojiUrl)}\n      style={{ flex: 'none', ...style }}\n      unoptimized={unoptimized}\n      width={size}\n      {...rest}\n    />\n  );\n};\n\nFluentEmoji.displayName = 'FluentEmoji';\n\nexport default FluentEmoji;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,eAAqC,EACzC,OACA,WACA,OACA,OAAO,MACP,OAAO,IACP,aACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,YAAY,UAAU;CAE5B,MAAM,WAAW,cAAc,YAAY,OAAO,KAAK,EAAE,CAAC,MAAM,MAAM,CAAC;AAEvE,KAAI,SAAS,SAAS,CAAC,YAAY,YACjC,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,MAAM;EACN,QAAQ;EACH;EACL,MAAM;EACN,OAAO;GAAE,UAAU,OAAO;GAAK,GAAG;GAAO;EACzC,OAAO;EACP,GAAI;YAEH;GACM;AAGb,QACE,oBAACC;EACC,KAAK;EACM;EACX,QAAQ;EACR,SAAS;EACT,eAAe,eAAe,KAAK;EAC9B;EACL,KAAK,UAAU,SAAS;EACxB,OAAO;GAAE,MAAM;GAAQ,GAAG;GAAO;EACpB;EACb,OAAO;EACP,GAAI;GACJ;;AAIN,YAAY,cAAc;AAE1B,0BAAe"}

package/es/FluentEmoji/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/FluentEmoji/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return { container: css$1`
       position: relative;
       line-height: 1;
@@ -10,5 +10,5 @@ const useStyles = createStyles(({ css: css$1 }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/FluentEmoji/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FluentEmoji/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n      line-height: 1;\n      text-align: center;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO,EACL,WAAW,KAAG;;;;OAKf;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FluentEmoji/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n      line-height: 1;\n      text-align: center;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,WAAW,KAAG;;;;OAKf;EACD"}

package/es/FontLoader/index.d.mts

@@ -1,10 +1,10 @@
-import * as react63 from "react";
+import * as react57 from "react";
 
 //#region src/FontLoader/index.d.ts
 interface FontLoaderProps {
   url: string;
 }
-declare const FontLoader: react63.NamedExoticComponent<FontLoaderProps>;
+declare const FontLoader: react57.NamedExoticComponent<FontLoaderProps>;
 //#endregion
 export { FontLoader, FontLoaderProps };
 //# sourceMappingURL=index.d.mts.map

package/es/Footer/Footer.d.mts

@@ -1,8 +1,8 @@
 import { FooterProps } from "./type.mjs";
-import * as react54 from "react";
+import * as react68 from "react";
 
 //#region src/Footer/Footer.d.ts
-declare const Footer: react54.NamedExoticComponent<FooterProps>;
+declare const Footer: react68.NamedExoticComponent<FooterProps>;
 //#endregion
 export { Footer };
 //# sourceMappingURL=Footer.d.mts.map

package/es/Footer/Footer.mjs

@@ -1,25 +1,27 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
-import { memo } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import RcFooter from "rc-footer";
 
 //#region src/Footer/Footer.tsx
-const Footer = memo(({ columns, bottom, theme, contentMaxWidth = 960, children, ...rest }) => {
-	const { styles } = useStyles({
-		contentMaxWidth,
-		isEmpty: !columns || columns?.length === 0
-	});
+const Footer = memo(({ columns, bottom, theme, contentMaxWidth = 960, children, style, ...rest }) => {
+	const isEmpty = !columns || columns?.length === 0;
+	const cssVariables = useMemo(() => ({ "--footer-content-max-width": `${contentMaxWidth}px` }), [contentMaxWidth]);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		as: "section",
 		className: styles.root,
+		style: {
+			...cssVariables,
+			...style
+		},
 		width: "100%",
 		...rest,
 		children: [/* @__PURE__ */ jsx(RcFooter, {
 			bottom,
-			className: styles.footer,
+			className: isEmpty ? styles.footerEmpty : styles.footer,
 			columns,
 			theme
 		}), children]

package/es/Footer/Footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.mjs","names":["Flexbox"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["'use client';\n\nimport RcFooter from 'rc-footer';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { FooterProps } from './type';\n\nconst Footer = memo<FooterProps>(\n  ({ columns, bottom, theme, contentMaxWidth = 960, children, ...rest }) => {\n    const isEmpty = !columns || columns?.length === 0;\n\n    const { styles } = useStyles({ contentMaxWidth, isEmpty });\n\n    return (\n      <Flexbox as={'section'} className={styles.root} width={'100%'} {...rest}>\n        <RcFooter bottom={bottom} className={styles.footer} columns={columns} theme={theme} />\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFooter.displayName = 'Footer';\n\nexport default Footer;\n"],"mappings":";;;;;;;;;AAUA,MAAM,SAAS,MACZ,EAAE,SAAS,QAAQ,OAAO,kBAAkB,KAAK,UAAU,GAAG,WAAW;CAGxE,MAAM,EAAE,WAAW,UAAU;EAAE;EAAiB,SAFhC,CAAC,WAAW,SAAS,WAAW;EAES,CAAC;AAE1D,QACE,qBAACA;EAAQ,IAAI;EAAW,WAAW,OAAO;EAAM,OAAO;EAAQ,GAAI;aACjE,oBAAC;GAAiB;GAAQ,WAAW,OAAO;GAAiB;GAAgB;IAAS,EACrF;GACO;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Footer.mjs","names":["Flexbox"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["'use client';\n\nimport RcFooter from 'rc-footer';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { FooterProps } from './type';\n\nconst Footer = memo<FooterProps>(\n  ({ columns, bottom, theme, contentMaxWidth = 960, children, style, ...rest }) => {\n    const isEmpty = !columns || columns?.length === 0;\n\n    // Convert contentMaxWidth prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--footer-content-max-width': `${contentMaxWidth}px`,\n      }),\n      [contentMaxWidth],\n    );\n\n    return (\n      <Flexbox\n        as={'section'}\n        className={styles.root}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\n        width={'100%'}\n        {...rest}\n      >\n        <RcFooter\n          bottom={bottom}\n          className={isEmpty ? styles.footerEmpty : styles.footer}\n          columns={columns}\n          theme={theme}\n        />\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFooter.displayName = 'Footer';\n\nexport default Footer;\n"],"mappings":";;;;;;;;;AAUA,MAAM,SAAS,MACZ,EAAE,SAAS,QAAQ,OAAO,kBAAkB,KAAK,UAAU,OAAO,GAAG,WAAW;CAC/E,MAAM,UAAU,CAAC,WAAW,SAAS,WAAW;CAGhD,MAAM,eAAe,eACZ,EACL,8BAA8B,GAAG,gBAAgB,KAClD,GACD,CAAC,gBAAgB,CAClB;AAED,QACE,qBAACA;EACC,IAAI;EACJ,WAAW,OAAO;EAClB,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,OAAO;EACP,GAAI;aAEJ,oBAAC;GACS;GACR,WAAW,UAAU,OAAO,cAAc,OAAO;GACxC;GACF;IACP,EACD;GACO;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/es/Footer/style.mjs

@@ -1,178 +1,214 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles, responsive } from "antd-style";
 
 //#region src/Footer/style.ts
-const useStyles = createStyles(({ css: css$1, responsive, token }, { isEmpty, contentMaxWidth }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	const prefix = `rc-footer`;
-	return {
-		footer: css$1`
-        font-size: 14px;
-        line-height: 1.5;
-        color: ${token.colorTextSecondary};
-        background-color: ${token.colorBgLayout};
-
-        &.${prefix} {
-          a {
-            color: ${token.colorTextTertiary};
-            text-decoration: none;
-            transition: all 0.3s;
-
-            &:hover {
-              color: ${token.colorLinkHover};
-            }
-          }
+	const baseFooterStyles = css$1`
+    font-size: 14px;
+    line-height: 1.5;
+    color: ${cssVar$1.colorTextSecondary};
+    background-color: ${cssVar$1.colorBgLayout};
+
+    &.${prefix} {
+      a {
+        color: ${cssVar$1.colorTextTertiary};
+        text-decoration: none;
+        transition: all 0.3s;
+
+        &:hover {
+          color: ${cssVar$1.colorLinkHover};
         }
+      }
+    }
 
-        .${prefix} {
-          &-container {
-            width: 100%;
-            max-width: ${contentMaxWidth}px;
-            margin: auto;
-            padding: ${isEmpty ? "0" : "60px 0 20px"};
-          }
-
-          &-columns {
-            display: flex;
-            justify-content: space-around;
-          }
+    .${prefix} {
+      &-columns {
+        display: flex;
+        justify-content: space-around;
+      }
 
-          &-column {
-            text-align: start;
+      &-column {
+        text-align: start;
 
-            h2 {
-              position: relative;
+        h2 {
+          position: relative;
 
-              margin-block: 0;
-              margin-inline: auto;
+          margin-block: 0;
+          margin-inline: auto;
 
-              font-size: 16px;
-              font-weight: 500;
-              color: ${token.colorText};
-            }
+          font-size: 16px;
+          font-weight: 500;
+          color: ${cssVar$1.colorText};
+        }
 
-            &-icon {
-              position: relative;
-              inset-block-start: -1px;
+        &-icon {
+          position: relative;
+          inset-block-start: -1px;
 
-              display: inline-block;
+          display: inline-block;
 
-              width: 22px;
-              margin-inline-end: 0.5em;
+          width: 22px;
+          margin-inline-end: 0.5em;
 
-              text-align: center;
-              vertical-align: middle;
+          text-align: center;
+          vertical-align: middle;
 
-              > span,
-              > svg,
-              img {
-                display: block;
-                width: 100%;
-              }
-            }
+          > span,
+          > svg,
+          img {
+            display: block;
+            width: 100%;
           }
+        }
+      }
 
-          &-item {
-            margin-block: 12px;
-            margin-inline: 0;
-
-            &-icon {
-              position: relative;
-              inset-block-start: -1px;
+      &-item {
+        margin-block: 12px;
+        margin-inline: 0;
 
-              display: inline-block;
+        &-icon {
+          position: relative;
+          inset-block-start: -1px;
 
-              width: 16px;
-              margin-inline-end: 0.4em;
+          display: inline-block;
 
-              text-align: center;
-              vertical-align: middle;
+          width: 16px;
+          margin-inline-end: 0.4em;
 
-              > span,
-              > svg,
-              img {
-                display: block;
-                width: 100%;
-              }
-            }
+          text-align: center;
+          vertical-align: middle;
 
-            &-separator {
-              margin-block: 0;
-              margin-inline: 0.3em;
-            }
+          > span,
+          > svg,
+          img {
+            display: block;
+            width: 100%;
           }
+        }
 
-          &-bottom {
-            color: ${token.colorTextDescription};
+        &-separator {
+          margin-block: 0;
+          margin-inline: 0.3em;
+        }
+      }
 
-            &-container {
-              width: 100%;
-              max-width: ${contentMaxWidth}px;
-              margin-block: 0;
-              margin-inline: auto;
-              padding-block: 16px;
-              padding-inline: 0;
+      &-bottom {
+        color: ${cssVar$1.colorTextDescription};
 
-              line-height: 32px;
-              text-align: center;
-            }
-          }
+        &-container {
+          width: 100%;
+          max-width: var(--footer-content-max-width, 960px);
+          margin-block: 0;
+          margin-inline: auto;
+          padding-block: 16px;
+          padding-inline: 0;
 
-          &-light {
-            color: rgba(0, 0, 0, 85%);
-            background-color: transparent;
+          line-height: 32px;
+          text-align: center;
+        }
+      }
 
-            h2,
-            a {
-              color: rgba(0, 0, 0, 85%);
-            }
-          }
+      &-light {
+        color: rgba(0, 0, 0, 85%);
+        background-color: transparent;
+
+        h2,
+        a {
+          color: rgba(0, 0, 0, 85%);
+        }
+      }
+
+      &-light &-bottom-container {
+        border-block-start-color: #e8e8e8;
+      }
+
+      &-light &-item-separator,
+      &-light &-item-description {
+        color: rgba(0, 0, 0, 45%);
+      }
+    }
+  `;
+	return {
+		footer: css$1`
+      ${baseFooterStyles};
+
+      .${prefix}-container {
+        width: 100%;
+        max-width: var(--footer-content-max-width, 960px);
+        margin: auto;
+        padding-block: 60px 20px;
+        padding-inline: 0;
+      }
 
-          &-light &-bottom-container {
-            border-block-start-color: #e8e8e8;
+      ${responsive.sm} {
+        .${prefix} {
+          &-container {
+            padding-block: 40px;
+            padding-inline: 0;
           }
 
-          &-light &-item-separator,
-          &-light &-item-description {
-            color: rgba(0, 0, 0, 45%);
+          &-columns {
+            display: block;
           }
-        }
 
-        ${responsive.mobile} {
-          .${prefix} {
-            &-container {
-              padding-block: 40px;
-              padding-inline: 0;
-            }
+          &-column {
+            display: block;
+            margin-block-end: 40px;
+            text-align: center;
 
-            &-columns {
-              display: block;
+            &:last-child {
+              margin-block-end: 0;
             }
+          }
+        }
+      }
+    `,
+		footerEmpty: css$1`
+      ${baseFooterStyles};
+
+      .${prefix}-container {
+        width: 100%;
+        max-width: var(--footer-content-max-width, 960px);
+        margin: auto;
+        padding: 0;
+      }
+
+      ${responsive.sm} {
+        .${prefix} {
+          &-container {
+            padding: 0;
+          }
+
+          &-columns {
+            display: block;
+          }
 
-            &-column {
-              display: block;
-              margin-block-end: 40px;
-              text-align: center;
+          &-column {
+            display: block;
+            margin-block-end: 40px;
+            text-align: center;
 
-              &:last-child {
-                margin-block-end: 0;
-              }
+            &:last-child {
+              margin-block-end: 0;
             }
           }
         }
-      `,
+      }
+    `,
 		root: css$1`
-        grid-area: footer;
-        align-self: stretch;
-        color: ${token.colorTextDescription};
-        border-block-start: 1px solid ${token.colorSplit};
-
-        ${responsive.mobile} {
-          flex-direction: column;
-          border: none;
-        }
-      `
+      grid-area: footer;
+      align-self: stretch;
+      border-block-start: 1px solid ${cssVar$1.colorSplit};
+      color: ${cssVar$1.colorTextDescription};
+
+      ${responsive.sm} {
+        flex-direction: column;
+        border: none;
+      }
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Footer/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Footer/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { css, responsive, token },\n    { isEmpty, contentMaxWidth }: { contentMaxWidth: number; isEmpty: boolean },\n  ) => {\n    const prefix = `rc-footer`;\n\n    return {\n      footer: css`\n        font-size: 14px;\n        line-height: 1.5;\n        color: ${token.colorTextSecondary};\n        background-color: ${token.colorBgLayout};\n\n        &.${prefix} {\n          a {\n            color: ${token.colorTextTertiary};\n            text-decoration: none;\n            transition: all 0.3s;\n\n            &:hover {\n              color: ${token.colorLinkHover};\n            }\n          }\n        }\n\n        .${prefix} {\n          &-container {\n            width: 100%;\n            max-width: ${contentMaxWidth}px;\n            margin: auto;\n            padding: ${isEmpty ? '0' : '60px 0 20px'};\n          }\n\n          &-columns {\n            display: flex;\n            justify-content: space-around;\n          }\n\n          &-column {\n            text-align: start;\n\n            h2 {\n              position: relative;\n\n              margin-block: 0;\n              margin-inline: auto;\n\n              font-size: 16px;\n              font-weight: 500;\n              color: ${token.colorText};\n            }\n\n            &-icon {\n              position: relative;\n              inset-block-start: -1px;\n\n              display: inline-block;\n\n              width: 22px;\n              margin-inline-end: 0.5em;\n\n              text-align: center;\n              vertical-align: middle;\n\n              > span,\n              > svg,\n              img {\n                display: block;\n                width: 100%;\n              }\n            }\n          }\n\n          &-item {\n            margin-block: 12px;\n            margin-inline: 0;\n\n            &-icon {\n              position: relative;\n              inset-block-start: -1px;\n\n              display: inline-block;\n\n              width: 16px;\n              margin-inline-end: 0.4em;\n\n              text-align: center;\n              vertical-align: middle;\n\n              > span,\n              > svg,\n              img {\n                display: block;\n                width: 100%;\n              }\n            }\n\n            &-separator {\n              margin-block: 0;\n              margin-inline: 0.3em;\n            }\n          }\n\n          &-bottom {\n            color: ${token.colorTextDescription};\n\n            &-container {\n              width: 100%;\n              max-width: ${contentMaxWidth}px;\n              margin-block: 0;\n              margin-inline: auto;\n              padding-block: 16px;\n              padding-inline: 0;\n\n              line-height: 32px;\n              text-align: center;\n            }\n          }\n\n          &-light {\n            color: rgba(0, 0, 0, 85%);\n            background-color: transparent;\n\n            h2,\n            a {\n              color: rgba(0, 0, 0, 85%);\n            }\n          }\n\n          &-light &-bottom-container {\n            border-block-start-color: #e8e8e8;\n          }\n\n          &-light &-item-separator,\n          &-light &-item-description {\n            color: rgba(0, 0, 0, 45%);\n          }\n        }\n\n        ${responsive.mobile} {\n          .${prefix} {\n            &-container {\n              padding-block: 40px;\n              padding-inline: 0;\n            }\n\n            &-columns {\n              display: block;\n            }\n\n            &-column {\n              display: block;\n              margin-block-end: 40px;\n              text-align: center;\n\n              &:last-child {\n                margin-block-end: 0;\n              }\n            }\n          }\n        }\n      `,\n      root: css`\n        grid-area: footer;\n        align-self: stretch;\n        color: ${token.colorTextDescription};\n        border-block-start: 1px solid ${token.colorSplit};\n\n        ${responsive.mobile} {\n          flex-direction: column;\n          border: none;\n        }\n      `,\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,YAAK,YAAY,SACnB,EAAE,SAAS,sBACR;CACH,MAAM,SAAS;AAEf,QAAO;EACL,QAAQ,KAAG;;;iBAGA,MAAM,mBAAmB;4BACd,MAAM,cAAc;;YAEpC,OAAO;;qBAEE,MAAM,kBAAkB;;;;;uBAKtB,MAAM,eAAe;;;;;WAKjC,OAAO;;;yBAGO,gBAAgB;;uBAElB,UAAU,MAAM,cAAc;;;;;;;;;;;;;;;;;;;uBAmB9B,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAuDlB,MAAM,qBAAqB;;;;2BAIrB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BjC,WAAW,OAAO;aACf,OAAO;;;;;;;;;;;;;;;;;;;;;;EAsBd,MAAM,KAAG;;;iBAGE,MAAM,qBAAqB;wCACJ,MAAM,WAAW;;UAE/C,WAAW,OAAO;;;;;EAKvB;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Footer/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const prefix = `rc-footer`;\n\n  const baseFooterStyles = css`\n    font-size: 14px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n    background-color: ${cssVar.colorBgLayout};\n\n    &.${prefix} {\n      a {\n        color: ${cssVar.colorTextTertiary};\n        text-decoration: none;\n        transition: all 0.3s;\n\n        &:hover {\n          color: ${cssVar.colorLinkHover};\n        }\n      }\n    }\n\n    .${prefix} {\n      &-columns {\n        display: flex;\n        justify-content: space-around;\n      }\n\n      &-column {\n        text-align: start;\n\n        h2 {\n          position: relative;\n\n          margin-block: 0;\n          margin-inline: auto;\n\n          font-size: 16px;\n          font-weight: 500;\n          color: ${cssVar.colorText};\n        }\n\n        &-icon {\n          position: relative;\n          inset-block-start: -1px;\n\n          display: inline-block;\n\n          width: 22px;\n          margin-inline-end: 0.5em;\n\n          text-align: center;\n          vertical-align: middle;\n\n          > span,\n          > svg,\n          img {\n            display: block;\n            width: 100%;\n          }\n        }\n      }\n\n      &-item {\n        margin-block: 12px;\n        margin-inline: 0;\n\n        &-icon {\n          position: relative;\n          inset-block-start: -1px;\n\n          display: inline-block;\n\n          width: 16px;\n          margin-inline-end: 0.4em;\n\n          text-align: center;\n          vertical-align: middle;\n\n          > span,\n          > svg,\n          img {\n            display: block;\n            width: 100%;\n          }\n        }\n\n        &-separator {\n          margin-block: 0;\n          margin-inline: 0.3em;\n        }\n      }\n\n      &-bottom {\n        color: ${cssVar.colorTextDescription};\n\n        &-container {\n          width: 100%;\n          max-width: var(--footer-content-max-width, 960px);\n          margin-block: 0;\n          margin-inline: auto;\n          padding-block: 16px;\n          padding-inline: 0;\n\n          line-height: 32px;\n          text-align: center;\n        }\n      }\n\n      &-light {\n        color: rgba(0, 0, 0, 85%);\n        background-color: transparent;\n\n        h2,\n        a {\n          color: rgba(0, 0, 0, 85%);\n        }\n      }\n\n      &-light &-bottom-container {\n        border-block-start-color: #e8e8e8;\n      }\n\n      &-light &-item-separator,\n      &-light &-item-description {\n        color: rgba(0, 0, 0, 45%);\n      }\n    }\n  `;\n\n  return {\n    footer: css`\n      ${baseFooterStyles};\n\n      .${prefix}-container {\n        width: 100%;\n        max-width: var(--footer-content-max-width, 960px);\n        margin: auto;\n        padding-block: 60px 20px;\n        padding-inline: 0;\n      }\n\n      ${responsive.sm} {\n        .${prefix} {\n          &-container {\n            padding-block: 40px;\n            padding-inline: 0;\n          }\n\n          &-columns {\n            display: block;\n          }\n\n          &-column {\n            display: block;\n            margin-block-end: 40px;\n            text-align: center;\n\n            &:last-child {\n              margin-block-end: 0;\n            }\n          }\n        }\n      }\n    `,\n    footerEmpty: css`\n      ${baseFooterStyles};\n\n      .${prefix}-container {\n        width: 100%;\n        max-width: var(--footer-content-max-width, 960px);\n        margin: auto;\n        padding: 0;\n      }\n\n      ${responsive.sm} {\n        .${prefix} {\n          &-container {\n            padding: 0;\n          }\n\n          &-columns {\n            display: block;\n          }\n\n          &-column {\n            display: block;\n            margin-block-end: 40px;\n            text-align: center;\n\n            &:last-child {\n              margin-block-end: 0;\n            }\n          }\n        }\n      }\n    `,\n    root: css`\n      grid-area: footer;\n      align-self: stretch;\n      border-block-start: 1px solid ${cssVar.colorSplit};\n      color: ${cssVar.colorTextDescription};\n\n      ${responsive.sm} {\n        flex-direction: column;\n        border: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,SAAS;CAEf,MAAM,mBAAmB,KAAG;;;aAGjBA,SAAO,mBAAmB;wBACfA,SAAO,cAAc;;QAErC,OAAO;;iBAEEA,SAAO,kBAAkB;;;;;mBAKvBA,SAAO,eAAe;;;;;OAKlC,OAAO;;;;;;;;;;;;;;;;;mBAiBKA,SAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuDnBA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoC3C,QAAO;EACL,QAAQ,KAAG;QACP,iBAAiB;;SAEhB,OAAO;;;;;;;;QAQR,WAAW,GAAG;WACX,OAAO;;;;;;;;;;;;;;;;;;;;;;EAsBd,aAAa,KAAG;QACZ,iBAAiB;;SAEhB,OAAO;;;;;;;QAOR,WAAW,GAAG;WACX,OAAO;;;;;;;;;;;;;;;;;;;;;EAqBd,MAAM,KAAG;;;sCAGyBA,SAAO,WAAW;eACzCA,SAAO,qBAAqB;;QAEnC,WAAW,GAAG;;;;;EAKnB;EACD"}

package/es/Form/Form.mjs

@@ -1,30 +1,20 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import FormFlatGroup_default from "./components/FormFlatGroup.mjs";
 import FormGroup_default from "./components/FormGroup.mjs";
 import FormItem_default from "./components/FormItem.mjs";
 import { FormProvider } from "./components/FormProvider.mjs";
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Form } from "antd";
-import { useResponsive } from "antd-style";
-import { cva } from "class-variance-authority";
+import { cx, useResponsive } from "antd-style";
 import { isUndefined } from "es-toolkit/compat";
 
 //#region src/Form/Form.tsx
 const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], children, itemsType = "group", itemVariant, variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, ref, layout, ...rest }) => {
 	const { mobile } = useResponsive();
-	const { cx: cx$1, styles } = useStyles();
 	const [submitLoading, setSubmitLoading] = useState(false);
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { variant: "borderless" },
-		variants: { variant: {
-			filled: null,
-			outlined: null,
-			borderless: styles.borderless
-		} }
-	}), [styles]);
 	const mapFlat = useCallback((item, itemIndex) => /* @__PURE__ */ jsx(FormItem_default, {
 		className: classNames?.item,
 		divider: itemIndex !== 0,
@@ -76,7 +66,7 @@ const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], childr
 			submitLoading
 		},
 		children: /* @__PURE__ */ jsxs(Form, {
-			className: cx$1(variants({ variant }), className),
+			className: cx(variants({ variant }), className),
 			colon: false,
 			form,
 			initialValues,