@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/GroupAvatar/style.mjs

@@ -1,47 +1,15 @@
-import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/GroupAvatar/style.ts
-const styles = createStaticStyles(({ css }) => {
-	const createCornerVariant = (cornerType) => css`
-    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-  `;
-	return {
-		circle: createCornerVariant("circle"),
-		ios: createCornerVariant("ios"),
-		root: css`
-      overflow: hidden;
-      flex: none;
-
-      /* Fallback for browsers without mask support */
-      border-radius: 15%;
-
-      /* Apply smooth corners mask with fallback */
-      @supports (mask-image: url('data:image/svg+xml;base64,')) {
-        border-radius: 0;
-      }
-    `,
-		sharp: createCornerVariant("sharp"),
-		smooth: createCornerVariant("smooth"),
-		square: createCornerVariant("square"),
-		squircle: createCornerVariant("squircle")
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: { cornerShape: "squircle" },
-	variants: { cornerShape: {
-		circle: styles.circle,
-		ios: styles.ios,
-		sharp: styles.sharp,
-		smooth: styles.smooth,
-		square: styles.square,
-		squircle: styles.squircle
-	} }
-});
+const styles = { root: {
+	kaIpWk: "lbghjk08 lb1b11ph6",
+	kUk6DE: "lb1okw0bk",
+	kVQacm: "lbb3r6kr",
+	kX1K2I: "lb87vf9",
+	k2A1W4: "lb1rudrqi",
+	kJcbqH: "lb16fucec",
+	kn1fP1: "lb3b2oae",
+	$$css: true
+} };
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/GroupAvatar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\n\nexport const styles = createStaticStyles(({ css }) => {\n  const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`\n    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  `;\n\n  return {\n    circle: createCornerVariant('circle'),\n    ios: createCornerVariant('ios'),\n    root: css`\n      overflow: hidden;\n      flex: none;\n\n      /* Fallback for browsers without mask support */\n      border-radius: 15%;\n\n      /* Apply smooth corners mask with fallback */\n      @supports (mask-image: url('data:image/svg+xml;base64,')) {\n        border-radius: 0;\n      }\n    `,\n    sharp: createCornerVariant('sharp'),\n    smooth: createCornerVariant('smooth'),\n    square: createCornerVariant('square'),\n    squircle: createCornerVariant('squircle'),\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    cornerShape: 'squircle',\n  },\n\n  variants: {\n    cornerShape: {\n      circle: styles.circle,\n      ios: styles.ios,\n      sharp: styles.sharp,\n      smooth: styles.smooth,\n      square: styles.square,\n      squircle: styles.squircle,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,MAAM,uBAAuB,eAAiD,GAAG;uBAC5D,oBAAoB,YAAY;;;;;CAMrD,OAAO;EACL,QAAQ,oBAAoB,QAAQ;EACpC,KAAK,oBAAoB,KAAK;EAC9B,MAAM,GAAG;;;;;;;;;;;;EAYT,OAAO,oBAAoB,OAAO;EAClC,QAAQ,oBAAoB,QAAQ;EACpC,QAAQ,oBAAoB,QAAQ;EACpC,UAAU,oBAAoB,UAAU;CAC1C;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,aAAa,WACf;CAEA,UAAU,EACR,aAAa;EACX,QAAQ,OAAO;EACf,KAAK,OAAO;EACZ,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,QAAQ,OAAO;EACf,UAAU,OAAO;CACnB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  root: {\n    borderRadius: {\n      'default': '15%',\n      '@supports (mask-image: url(\"data:image/svg+xml;base64,\"))': 0,\n    },\n    flex: 'none',\n    overflow: 'hidden',\n    maskImage: 'var(--lobe-group-avatar-mask)',\n    maskPosition: 'center',\n    maskRepeat: 'no-repeat',\n    maskSize: '100% 100%',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS,EACpB,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

package/es/GroupAvatar/type.d.mts

@@ -1,11 +1,11 @@
+import { AvatarProps } from "../Avatar/type.mjs";
+import "../Avatar/index.mjs";
 import { BlockProps } from "../Block/type.mjs";
-import { AvatarProps } from "../base-ui/Avatar/type.mjs";
-import "../base-ui/Avatar/index.mjs";
 import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
 import { Ref } from "react";
 //#region src/GroupAvatar/type.d.ts
 type AvatarItem = string | Omit<AvatarProps, 'size'>;
-interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'variant'> {
+export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'variant'> {
   avatars?: AvatarItem[];
   avatarShape?: AvatarProps['shape'];
   cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
@@ -14,5 +14,4 @@ interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'varian
   size?: number;
 }
 //#endregion
-export { GroupAvatarProps };
 //# sourceMappingURL=type.d.mts.map

package/es/GuideCard/GuideCard.mjs

@@ -1,11 +1,14 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import { stylish } from "../styles/stylex/stylish.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { ActionIconImpl } from "../ActionIcon/ActionIcon.mjs";
 import Img from "../Img/index.mjs";
-import { styles, variants } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 //#region src/GuideCard/GuideCard.tsx
 const GuideCard = memo(({ cover, onClose, shadow, closable = true, afterClose, alt, className, title, desc, width, styles: customStyles, height, coverProps, variant = "filled", closeIconProps, classNames, ref, ...rest }) => {
@@ -13,19 +16,21 @@ const GuideCard = memo(({ cover, onClose, shadow, closable = true, afterClose, a
 	const { isDarkMode } = useThemeMode();
 	if (!show) return null;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({
-			isDarkMode,
-			shadow,
-			variant
-		}), className),
 		ref,
+		className: styleProps([
+			styles.root,
+			variant === "borderless" && stylish.variantBorderlessWithoutHover,
+			variant === "outlined" && stylish.variantOutlinedWithoutHover,
+			shadow && styles.shadow,
+			variant === "filled" && (isDarkMode ? styles.filledDark : styles.filledLight)
+		], className).className,
 		...rest,
 		children: [
-			closable && /* @__PURE__ */ jsx(ActionIcon, {
+			closable && /* @__PURE__ */ jsx(ActionIconImpl, {
 				size: "small",
 				...closeIconProps,
-				className: cx(styles.close, closeIconProps?.className),
 				icon: X,
+				xstyle: styles.close,
 				onClick: (e) => {
 					setShow(false);
 					onClose?.(e);
@@ -34,22 +39,20 @@ const GuideCard = memo(({ cover, onClose, shadow, closable = true, afterClose, a
 			}),
 			cover && /* @__PURE__ */ jsx(Img, {
 				alt,
-				className: cx(styles.cover, classNames?.cover),
 				height,
 				src: cover,
-				style: customStyles?.cover,
 				width,
+				...styleProps(styles.cover, classNames?.cover, customStyles?.cover),
 				...coverProps
 			}),
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
-				className: cx(styles.content, classNames?.content),
 				gap: 8,
-				style: customStyles?.content,
+				...styleProps(styles.content, classNames?.content, customStyles?.content),
 				children: [title && /* @__PURE__ */ jsx("div", {
-					className: styles.title,
+					...stylex.props(styles.title),
 					children: title
 				}), desc && /* @__PURE__ */ jsx("div", {
-					className: styles.desc,
+					...stylex.props(styles.desc),
 					children: desc
 				})]
 			})

package/es/GuideCard/GuideCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideCard.mjs","names":["Flexbox"],"sources":["../../src/GuideCard/GuideCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\n\nimport { styles, variants } from './style';\nimport type { GuideCardProps } from './type';\n\nconst GuideCard = memo<GuideCardProps>(\n  ({\n    cover,\n    onClose,\n    shadow,\n    closable = true,\n    afterClose,\n    alt,\n    className,\n    title,\n    desc,\n    width,\n    styles: customStyles,\n    height,\n    coverProps,\n    variant = 'filled',\n    closeIconProps,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const [show, setShow] = useState(true);\n    const { isDarkMode } = useThemeMode();\n\n    if (!show) return null;\n\n    return (\n      <Flexbox\n        className={cx(variants({ isDarkMode, shadow, variant }), className)}\n        ref={ref}\n        {...rest}\n      >\n        {closable && (\n          <ActionIcon\n            size={'small'}\n            {...closeIconProps}\n            className={cx(styles.close, closeIconProps?.className)}\n            icon={X}\n            onClick={(e) => {\n              setShow(false);\n              onClose?.(e);\n              afterClose?.();\n            }}\n          />\n        )}\n        {cover && (\n          <Img\n            alt={alt}\n            className={cx(styles.cover, classNames?.cover)}\n            height={height}\n            src={cover}\n            style={customStyles?.cover}\n            width={width}\n            {...coverProps}\n          />\n        )}\n        <Flexbox\n          className={cx(styles.content, classNames?.content)}\n          gap={8}\n          style={customStyles?.content}\n        >\n          {title && <div className={styles.title}>{title}</div>}\n          {desc && <div className={styles.desc}>{desc}</div>}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nGuideCard.displayName = 'GuideCard';\n\nexport default GuideCard;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,OACA,SACA,QACA,WAAW,MACX,YACA,KACA,WACA,OACA,MACA,OACA,QAAQ,cACR,QACA,YACA,UAAU,UACV,gBACA,YACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CACrC,MAAM,EAAE,eAAe,aAAa;CAEpC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAY;GAAQ;EAAQ,CAAC,GAAG,SAAS;EAC7D;EACL,GAAI;EAHN,UAAA;GAKG,YACC,oBAAC,YAAD;IACE,MAAM;IACN,GAAI;IACJ,WAAW,GAAG,OAAO,OAAO,gBAAgB,SAAS;IACrD,MAAM;IACN,UAAU,MAAM;KACd,QAAQ,KAAK;KACb,UAAU,CAAC;KACX,aAAa;IACf;GACD,CAAA;GAEF,SACC,oBAAC,KAAD;IACO;IACL,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACrC;IACR,KAAK;IACL,OAAO,cAAc;IACd;IACP,GAAI;GACL,CAAA;GAEH,qBAACA,mBAAD;IACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IACjD,KAAK;IACL,OAAO,cAAc;IAHvB,UAAA,CAKG,SAAS,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,GACnD,QAAQ,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAO,UAAA;IAAU,CAAA,CAC1C;;EACF;;AAEb,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"GuideCard.mjs","names":["Flexbox","ActionIcon"],"sources":["../../src/GuideCard/GuideCard.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { X } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { GuideCardProps } from './type';\n\nconst GuideCard = memo<GuideCardProps>(\n  ({\n    cover,\n    onClose,\n    shadow,\n    closable = true,\n    afterClose,\n    alt,\n    className,\n    title,\n    desc,\n    width,\n    styles: customStyles,\n    height,\n    coverProps,\n    variant = 'filled',\n    closeIconProps,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const [show, setShow] = useState(true);\n    const { isDarkMode } = useThemeMode();\n\n    if (!show) return null;\n\n    return (\n      <Flexbox\n        ref={ref}\n        className={\n          styleProps(\n            [\n              styles.root,\n              variant === 'borderless' && stylish.variantBorderlessWithoutHover,\n              variant === 'outlined' && stylish.variantOutlinedWithoutHover,\n              shadow && styles.shadow,\n              variant === 'filled' && (isDarkMode ? styles.filledDark : styles.filledLight),\n            ],\n            className,\n          ).className\n        }\n        {...rest}\n      >\n        {closable && (\n          <ActionIcon\n            size={'small'}\n            {...closeIconProps}\n            icon={X}\n            xstyle={styles.close}\n            onClick={(e) => {\n              setShow(false);\n              onClose?.(e);\n              afterClose?.();\n            }}\n          />\n        )}\n        {cover && (\n          <Img\n            alt={alt}\n            height={height}\n            src={cover}\n            width={width}\n            {...styleProps(styles.cover, classNames?.cover, customStyles?.cover)}\n            {...coverProps}\n          />\n        )}\n        <Flexbox\n          gap={8}\n          {...styleProps(styles.content, classNames?.content, customStyles?.content)}\n        >\n          {title && <div {...stylex.props(styles.title)}>{title}</div>}\n          {desc && <div {...stylex.props(styles.desc)}>{desc}</div>}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nGuideCard.displayName = 'GuideCard';\n\nexport default GuideCard;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAY,MAAsB,EACtC,OACA,SACA,QACA,WAAW,MACX,YACA,KACA,WACA,OACA,MACA,OACA,QAAQ,cACR,QACA,YACA,UAAU,UACV,gBACA,YACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CACrC,MAAM,EACJ,eACE,aAAa;CACjB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO,qBAACA,mBAAD;EAAc;EAAK,WAAW,WAAW;GAAC,OAAO;GAAM,YAAY,gBAAgB,QAAQ;GAA+B,YAAY,cAAc,QAAQ;GAA6B,UAAU,OAAO;GAAQ,YAAY,aAAa,aAAa,OAAO,aAAa,OAAO;EAAY,GAAG,SAAS,CAAC,CAAC;EAAW,GAAI;EAA5T,UAAA;GACA,YAAY,oBAACC,gBAAD;IAAY,MAAM;IAAS,GAAI;IAAgB,MAAM;IAAG,QAAQ,OAAO;IAAO,UAAS,MAAK;KAC3G,QAAQ,KAAK;KACb,UAAU,CAAC;KACX,aAAa;IACf;GAAI,CAAA;GACC,SAAS,oBAAC,KAAD;IAAU;IAAa;IAAQ,KAAK;IAAc;IAAO,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;IAAG,GAAI;GAAa,CAAA;GAC1J,qBAACD,mBAAD;IAAS,KAAK;IAAG,GAAI,WAAW,OAAO,SAAS,YAAY,SAAS,cAAc,OAAO;IAA1F,UAAA,CACG,SAAS,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAW,CAAA,GAC1D,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,IAAI;KAAI,UAAA;IAAU,CAAA,CACjD;;EACF;;AACf,CAAC;AACD,UAAU,cAAc"}

package/es/GuideCard/style.mjs

@@ -1,83 +1,50 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/GuideCard/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	borderless: staticStylish.variantBorderlessWithoutHover,
-	close: css`
-    position: absolute;
-    inset-block-start: 8px;
-    inset-inline-end: 8px;
-  `,
-	content: css`
-    padding: 16px;
-  `,
-	cover: css`
-    align-self: center;
-  `,
-	desc: css`
-    color: ${cssVar.colorTextDescription};
-  `,
-	filledDark: css`
-    ${staticStylish.variantFilledWithoutHover};
-    background: linear-gradient(
-      to bottom,
-      ${cssVar.colorFillTertiary},
-      ${cssVar.colorFillQuaternary}
-    );
-  `,
-	filledLight: css`
-    ${staticStylish.variantFilledWithoutHover};
-    background: linear-gradient(
-      to bottom,
-      ${cssVar.colorFillQuaternary},
-      ${cssVar.colorFillTertiary}
-    );
-  `,
-	outlined: staticStylish.variantOutlinedWithoutHover,
-	root: css`
-    position: relative;
-    overflow: hidden;
-    border-radius: ${cssVar.borderRadiusLG};
-  `,
-	shadow: staticStylish.shadow,
-	title: css`
-    font-size: 16px;
-    font-weight: bold;
-  `
-}));
-const variants = cva(styles.root, {
-	compoundVariants: [{
-		class: styles.filledDark,
-		isDarkMode: true,
-		variant: "filled"
-	}, {
-		class: styles.filledLight,
-		isDarkMode: false,
-		variant: "filled"
-	}],
-	defaultVariants: {
-		isDarkMode: false,
-		shadow: false,
-		variant: "filled"
+const styles = {
+	close: {
+		k87sOh: "lbfr5jun",
+		kt4wiu: "lb11dcrhx",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
 	},
-	variants: {
-		isDarkMode: {
-			false: null,
-			true: null
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		},
-		variant: {
-			borderless: styles.borderless,
-			filled: null,
-			outlined: styles.outlined
-		}
+	content: {
+		kmVPX3: "lb1tamke2",
+		$$css: true
+	},
+	cover: {
+		kSGwAc: "lbamitd3",
+		$$css: true
+	},
+	desc: {
+		kMwMTN: "lb19ppog9",
+		$$css: true
+	},
+	filledDark: {
+		kWkggS: "lbjbqb8w",
+		kKwaWg: "lbw4wl7d",
+		$$css: true
+	},
+	filledLight: {
+		kWkggS: "lbjbqb8w",
+		kKwaWg: "lb1hi5lyt",
+		$$css: true
+	},
+	root: {
+		kaIpWk: "lb1ndkxwp",
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	shadow: {
+		kGVxlE: "lbpjwdtl",
+		$$css: true
+	},
+	title: {
+		kGuDYH: "lb1j61zf2",
+		k63SB2: "lb117nqv4",
+		$$css: true
 	}
-});
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/GuideCard/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/GuideCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n  close: css`\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 8px;\n  `,\n  content: css`\n    padding: 16px;\n  `,\n  cover: css`\n    align-self: center;\n  `,\n  desc: css`\n    color: ${cssVar.colorTextDescription};\n  `,\n  filledDark: css`\n    ${lobeStaticStylish.variantFilledWithoutHover};\n    background: linear-gradient(\n      to bottom,\n      ${cssVar.colorFillTertiary},\n      ${cssVar.colorFillQuaternary}\n    );\n  `,\n  filledLight: css`\n    ${lobeStaticStylish.variantFilledWithoutHover};\n    background: linear-gradient(\n      to bottom,\n      ${cssVar.colorFillQuaternary},\n      ${cssVar.colorFillTertiary}\n    );\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  shadow: lobeStaticStylish.shadow,\n  title: css`\n    font-size: 16px;\n    font-weight: bold;\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.filledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n    {\n      class: styles.filledLight,\n      isDarkMode: false,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    isDarkMode: false,\n    shadow: false,\n    variant: 'filled',\n  },\n\n  variants: {\n    isDarkMode: {\n      false: null,\n      true: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: null,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAYA,cAAkB;CAC9B,OAAO,GAAG;;;;;CAKV,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;CAGV,MAAM,GAAG;aACE,OAAO,qBAAqB;;CAEvC,YAAY,GAAG;MACXA,cAAkB,0BAA0B;;;QAG1C,OAAO,kBAAkB;QACzB,OAAO,oBAAoB;;;CAGjC,aAAa,GAAG;MACZA,cAAkB,0BAA0B;;;QAG1C,OAAO,oBAAoB;QAC3B,OAAO,kBAAkB;;;CAG/B,UAAUA,cAAkB;CAC5B,MAAM,GAAG;;;qBAGU,OAAO,eAAe;;CAEzC,QAAQA,cAAkB;CAC1B,OAAO,GAAG;;;;AAIZ,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;CACX,CACF;CACA,iBAAiB;EACf,YAAY;EACZ,QAAQ;EACR,SAAS;CACX;CAEA,UAAU;EACR,YAAY;GACV,OAAO;GACP,MAAM;EACR;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ;GACR,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GuideCard/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  close: {\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    position: 'absolute',\n  },\n  content: {\n    padding: 16,\n  },\n  cover: {\n    alignSelf: 'center',\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n  },\n  filledDark: {\n    backgroundColor: 'transparent',\n    backgroundImage: `linear-gradient(to bottom, ${cssVar.colorFillTertiary}, ${cssVar.colorFillQuaternary})`,\n  },\n  filledLight: {\n    backgroundColor: 'transparent',\n    backgroundImage: `linear-gradient(to bottom, ${cssVar.colorFillQuaternary}, ${cssVar.colorFillTertiary})`,\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/GuideCard/type.d.mts

@@ -1,12 +1,11 @@
 import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { ImgProps } from "../types/index.mjs";
-import { ActionIconProps } from "../base-ui/ActionIcon/type.mjs";
-import "../base-ui/ActionIcon/index.mjs";
+import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
-import { ImageProps } from "antd";
 //#region src/GuideCard/type.d.ts
-interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
+export interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
   afterClose?: () => void;
   alt?: string;
   classNames?: {
@@ -16,7 +15,7 @@ interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
   closable?: boolean;
   closeIconProps?: Omit<ActionIconProps, 'icon' | 'onClick'>;
   cover?: string;
-  coverProps?: ImgProps & ImageProps & {
+  coverProps?: ImgProps & {
     priority?: boolean;
   };
   desc?: ReactNode;
@@ -33,5 +32,4 @@ interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
   width?: number;
 }
 //#endregion
-export { GuideCardProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Header/Header.mjs

@@ -1,9 +1,10 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useResponsive } from "../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
 //#region src/Header/Header.tsx
 const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo, actions, actionsStyle, logoStyle, navStyle, className, children, ref, ...rest }) => {
 	const { mobile } = useResponsive();
@@ -11,7 +12,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 		horizontal: true,
 		align: "center",
 		as: "section",
-		className: cx(styles.root, className),
+		className: styleProps(styles.root, className).className,
 		distribution: "space-between",
 		ref,
 		width: "auto",
@@ -27,7 +28,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 			}),
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
-				className: cx(styles.left, logoClassName),
+				className: styleProps(styles.left, logoClassName).className,
 				style: {
 					flex: 1,
 					overflow: "hidden",
@@ -46,7 +47,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
-				className: cx(styles.left, logoClassName),
+				className: styleProps(styles.left, logoClassName).className,
 				style: {
 					flex: 0,
 					...logoStyle
@@ -65,7 +66,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 			}),
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
 				horizontal: true,
-				className: cx(styles.right, actionsClassName),
+				className: styleProps(styles.right, actionsClassName).className,
 				flex: 1,
 				justify: "space-between",
 				style: actionsStyle,

package/es/Header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":["Flexbox"],"sources":["../../src/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { HeaderProps } from './type';\n\nconst Header = memo<HeaderProps>(\n  ({\n    actionsClassName,\n    navClassName,\n    logoClassName,\n    nav,\n    logo,\n    actions,\n    actionsStyle,\n    logoStyle,\n    navStyle,\n    className,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        as={'section'}\n        className={cx(styles.root, className)}\n        distribution={'space-between'}\n        ref={ref}\n        width={'auto'}\n        {...rest}\n      >\n        {mobile ? (\n          <>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...navStyle }}>\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              horizontal\n              className={cx(styles.left, logoClassName)}\n              style={{ flex: 1, overflow: 'hidden', ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...actionsStyle }}>\n              {actions}\n            </Flexbox>\n          </>\n        ) : (\n          <>\n            <Flexbox\n              horizontal\n              className={cx(styles.left, logoClassName)}\n              style={{ flex: 0, ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox\n              className={navClassName}\n              style={{ flex: 1, marginLeft: 48, overflow: 'hidden', ...navStyle }}\n            >\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              horizontal\n              className={cx(styles.right, actionsClassName)}\n              flex={1}\n              justify={'space-between'}\n              style={actionsStyle}\n            >\n              <div />\n              <Flexbox horizontal align={'center'} gap={8}>\n                {actions}\n              </Flexbox>\n            </Flexbox>\n          </>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"mappings":";;;;;;;AAUA,MAAM,SAAS,MACZ,EACC,kBACA,cACA,eACA,KACA,MACA,SACA,cACA,WACA,UACA,WACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,IAAI;EACJ,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,cAAc;EACT;EACL,OAAO;EACP,GAAI;EAEH,UAAA,SACC,qBAAA,YAAA,EAAA,UAAA;GACE,qBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAS;IAApE,UAAA,CACG,KACA,QACM;;GACT,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,MAAM,aAAa;IACxC,OAAO;KAAE,MAAM;KAAG,UAAU;KAAU,GAAG;IAAU;IAElD,UAAA;GACM,CAAA;GACT,oBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAa;IACrE,UAAA;GACM,CAAA;EACT,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;GACE,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,MAAM,aAAa;IACxC,OAAO;KAAE,MAAM;KAAG,GAAG;IAAU;IAE9B,UAAA;GACM,CAAA;GACT,qBAACA,mBAAD;IACE,WAAW;IACX,OAAO;KAAE,MAAM;KAAG,YAAY;KAAI,UAAU;KAAU,GAAG;IAAS;IAFpE,UAAA,CAIG,KACA,QACM;;GACT,qBAACA,mBAAD;IACE,YAAA;IACA,WAAW,GAAG,OAAO,OAAO,gBAAgB;IAC5C,MAAM;IACN,SAAS;IACT,OAAO;IALT,UAAA,CAOE,oBAAC,OAAD,CAAM,CAAA,GACN,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KACvC,UAAA;IACM,CAAA,CACF;;EACT,EAAA,CAAA;CAEG,CAAA;AAEb,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Header.mjs","names":["Flexbox"],"sources":["../../src/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { HeaderProps } from './type';\n\nconst Header = memo<HeaderProps>(\n  ({\n    actionsClassName,\n    navClassName,\n    logoClassName,\n    nav,\n    logo,\n    actions,\n    actionsStyle,\n    logoStyle,\n    navStyle,\n    className,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        as={'section'}\n        className={styleProps(styles.root, className).className}\n        distribution={'space-between'}\n        ref={ref}\n        width={'auto'}\n        {...rest}\n      >\n        {mobile ? (\n          <>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...navStyle }}>\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              horizontal\n              className={styleProps(styles.left, logoClassName).className}\n              style={{ flex: 1, overflow: 'hidden', ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...actionsStyle }}>\n              {actions}\n            </Flexbox>\n          </>\n        ) : (\n          <>\n            <Flexbox\n              horizontal\n              className={styleProps(styles.left, logoClassName).className}\n              style={{ flex: 0, ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox\n              className={navClassName}\n              style={{ flex: 1, marginLeft: 48, overflow: 'hidden', ...navStyle }}\n            >\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              horizontal\n              className={styleProps(styles.right, actionsClassName).className}\n              flex={1}\n              justify={'space-between'}\n              style={actionsStyle}\n            >\n              <div />\n              <Flexbox horizontal align={'center'} gap={8}>\n                {actions}\n              </Flexbox>\n            </Flexbox>\n          </>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS,MACZ,EACC,kBACA,cACA,eACA,KACA,MACA,SACA,cACA,WACA,UACA,WACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,IAAI;EACJ,WAAW,WAAW,OAAO,MAAM,SAAS,CAAC,CAAC;EAC9C,cAAc;EACT;EACL,OAAO;EACP,GAAI;EAEH,UAAA,SACC,qBAAA,YAAA,EAAA,UAAA;GACE,qBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAS;IAApE,UAAA,CACG,KACA,QACM;;GACT,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,WAAW,OAAO,MAAM,aAAa,CAAC,CAAC;IAClD,OAAO;KAAE,MAAM;KAAG,UAAU;KAAU,GAAG;IAAU;IAElD,UAAA;GACM,CAAA;GACT,oBAACA,mBAAD;IAAS,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;IAAa;IACrE,UAAA;GACM,CAAA;EACT,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;GACE,oBAACA,mBAAD;IACE,YAAA;IACA,WAAW,WAAW,OAAO,MAAM,aAAa,CAAC,CAAC;IAClD,OAAO;KAAE,MAAM;KAAG,GAAG;IAAU;IAE9B,UAAA;GACM,CAAA;GACT,qBAACA,mBAAD;IACE,WAAW;IACX,OAAO;KAAE,MAAM;KAAG,YAAY;KAAI,UAAU;KAAU,GAAG;IAAS;IAFpE,UAAA,CAIG,KACA,QACM;;GACT,qBAACA,mBAAD;IACE,YAAA;IACA,WAAW,WAAW,OAAO,OAAO,gBAAgB,CAAC,CAAC;IACtD,MAAM;IACN,SAAS;IACT,OAAO;IALT,UAAA,CAOE,oBAAC,OAAD,CAAM,CAAA,GACN,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;KACvC,UAAA;IACM,CAAA,CACF;;EACT,EAAA,CAAA;CAEG,CAAA;AAEb,CACF;AAEA,OAAO,cAAc"}

package/es/Header/style.mjs

@@ -1,44 +1,30 @@
-import { createStaticStyles } from "antd-style";
 //#region src/Header/style.ts
-const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
-	left: css`
-    z-index: 10;
-  `,
-	right: css`
-    z-index: 10;
-
-    &-aside {
-      display: flex;
-      align-items: center;
-
-      ${responsive.sm} {
-        justify-content: center;
-
-        margin-block: 8px;
-        margin-inline: 16px;
-        padding-block-start: 24px;
-        border-block-start: 1px solid ${cssVar.colorBorder};
-      }
-    }
-  `,
-	root: css`
-    grid-area: head;
-    align-self: stretch;
-
-    width: 100%;
-    height: 64px;
-    padding-block: 0;
-    padding-inline: 24px;
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-
-    background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent);
-
-    ${responsive.sm} {
-      padding-block: 0;
-      padding-inline: 12px;
-    }
-  `
-}));
+const styles = {
+	left: {
+		kY2c9j: "lb1n327nk",
+		$$css: true
+	},
+	right: {
+		kY2c9j: "lb1n327nk",
+		$$css: true
+	},
+	root: {
+		k8WAf4: "lbt970qd",
+		kg3NbH: "lb4l9tsp lbat8qha",
+		kSGwAc: "lbkh2ocl",
+		kWkggS: "lb1h3we1w",
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kWZpDQ: "lb1lgv2u5",
+		kEXP64: "lb9dvwiy",
+		kpJH7q: "lb2z71wr",
+		k1lYIM: "lb9fusa9",
+		kZKoxP: "lb1peatla",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/Header/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Header/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  left: css`\n    z-index: 10;\n  `,\n  right: css`\n    z-index: 10;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ${responsive.sm} {\n        justify-content: center;\n\n        margin-block: 8px;\n        margin-inline: 16px;\n        padding-block-start: 24px;\n        border-block-start: 1px solid ${cssVar.colorBorder};\n      }\n    }\n  `,\n  root: css`\n    grid-area: head;\n    align-self: stretch;\n\n    width: 100%;\n    height: 64px;\n    padding-block: 0;\n    padding-inline: 24px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent);\n\n    ${responsive.sm} {\n      padding-block: 0;\n      padding-inline: 12px;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;CAGT,OAAO,GAAG;;;;;;;QAOJ,WAAW,GAAG;;;;;;wCAMkB,OAAO,YAAY;;;;CAIzD,MAAM,GAAG;;;;;;;;kCAQuB,OAAO,qBAAqB;;2CAEnB,OAAO,cAAc;;MAE1D,WAAW,GAAG;;;;;AAKpB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Header/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  left: {\n    zIndex: 10,\n  },\n  right: {\n    zIndex: 10,\n  },\n  root: {\n    paddingBlock: 0,\n    paddingInline: { default: 24, [media.sm]: 12 },\n    alignSelf: 'stretch',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent)`,\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    gridColumnEnd: 'head',\n    gridColumnStart: 'head',\n    gridRowEnd: 'head',\n    gridRowStart: 'head',\n    height: 64,\n    width: '100%',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Header/type.d.mts

@@ -2,7 +2,7 @@ import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
 //#region src/Header/type.d.ts
-interface HeaderProps extends FlexboxProps {
+export interface HeaderProps extends FlexboxProps {
   actions?: ReactNode;
   actionsClassName?: string;
   actionsStyle?: CSSProperties;
@@ -15,5 +15,4 @@ interface HeaderProps extends FlexboxProps {
   ref?: Ref<HTMLDivElement>;
 }
 //#endregion
-export { HeaderProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Highlighter/FullFeatured.mjs

@@ -1,16 +1,17 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import Text from "../Text/Text.mjs";
-import { stopPropagation } from "../utils/dom.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import { stopPropagation } from "../utils/dom.mjs";
 import { getCodeLanguageDisplayName, getCodeLanguageFilename } from "./const.mjs";
 import CopyButton from "../CopyButton/CopyButton.mjs";
 import { LangSelect } from "./LangSelect.mjs";
-import { bodyVariants, headerVariants, variants } from "./style.mjs";
+import { bodyStyles, headerFlexProps, headerStyles, rootClassName, rootStyles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/Highlighter/FullFeatured.tsx
 const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filetype, icon, language, setLanguage, showLanguage }) => {
@@ -82,21 +83,20 @@ const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLang
 		setExpand((prev) => !prev);
 	}, []);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({
-			shadow,
-			variant,
-			wrap
-		}), className),
 		"data-code-type": "highlighter",
-		style,
+		width: "100%",
 		...rest,
+		...styleProps(rootStyles({
+			shadow,
+			variant
+		}), rootClassName(wrap, className), style),
 		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
-			className: cx(headerVariants({ variant }), classNames?.header),
 			justify: "space-between",
-			style: customStyles?.header,
 			onClick: handleToggleExpand,
+			...headerFlexProps(variant),
+			...styleProps(headerStyles(variant), classNames?.header, customStyles?.header),
 			children: [/* @__PURE__ */ jsx(HeaderLanguage, {
 				allowChangeLanguage,
 				displayName,
@@ -126,8 +126,8 @@ const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLang
 				})]
 			})]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
-			className: cx(bodyVariants({ expand }), classNames?.body),
-			style: customStyles?.body,
+			height: expand ? void 0 : 0,
+			...styleProps(bodyStyles(expand, variant), clsx(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
 			children
 		})]
 	});