@lobehub/ui 4.3.2 → 4.3.3

package/es/ActionIconGroup/style.mjs

@@ -1,21 +1,50 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/ActionIconGroup/style.ts
-const useStyles = createStyles(({ css: css$1, token, stylish }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderless,
-		disabled: stylish.disabled,
-		filled: stylish.variantFilledWithoutHover,
-		glass: stylish.blur,
-		outlined: stylish.variantOutlinedWithoutHover,
+		borderless: staticStylish.variantBorderless,
+		disabled: staticStylish.disabled,
+		filled: staticStylish.variantFilledWithoutHover,
+		glass: staticStylish.blur,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       position: relative;
-      border-radius: ${token.borderRadius}px;
+      border-radius: ${cssVar$1.borderRadius};
     `,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		disabled: false,
+		glass: false,
+		shadow: false,
+		variant: "outlined"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		disabled: {
+			false: null,
+			true: styles.disabled
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/ActionIconGroup/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ActionIconGroup/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish }) => {\n  return {\n    borderless: stylish.variantBorderless,\n    disabled: stylish.disabled,\n    filled: stylish.variantFilledWithoutHover,\n    glass: stylish.blur,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n      border-radius: ${token.borderRadius}px;\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,cAAc;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,UAAU,QAAQ;EAClB,QAAQ,QAAQ;EAChB,OAAO,QAAQ;EACf,UAAU,QAAQ;EAClB,MAAM,KAAG;;uBAEU,MAAM,aAAa;;EAEtC,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/ActionIconGroup/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  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    disabled: lobeStaticStylish.disabled,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    glass: lobeStaticStylish.blur,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    disabled: false,\n    glass: false,\n    shadow: false,\n    variant: 'outlined',\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    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    disabled: {\n      false: null,\n      true: styles.disabled,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,UAAUA,cAAkB;EAC5B,QAAQA,cAAkB;EAC1B,OAAOA,cAAkB;EACzB,UAAUA,cAAkB;EAC5B,MAAM,KAAG;;uBAEUC,SAAO,aAAa;;EAEvC,QAAQD,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,UAAU;GACR,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Alert/Alert.d.mts

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

package/es/Alert/Alert.mjs

@@ -5,13 +5,13 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Icon_default from "../Icon/Icon.mjs";
 import AccordionItem_default from "../Accordion/AccordionItem.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { extraHeaderVariants, extraVariants, rootVariants } from "./style.mjs";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Alert } from "antd";
-import { cva } from "class-variance-authority";
-import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
+import { cssVar, cx, useTheme } from "antd-style";
 import { camelCase } from "es-toolkit/compat";
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
 
 //#region src/Alert/Alert.tsx
 const typeIcons = {
@@ -30,65 +30,19 @@ const colors = (theme, type = "info", ...keys) => {
 	].join("-"))];
 };
 const Alert$1 = memo(({ closable = false, description, showIcon = true, type = "info", glass, icon, colorfulText = true, iconProps, style, extra, classNames, styles: customStyles, text, extraDefaultExpand = false, extraIsolate, banner, variant = "filled", ref, ...rest }) => {
-	const { theme, styles, cx } = useStyles({
-		closable: !!closable,
-		hasTitle: !!description,
-		showIcon: !!showIcon
-	});
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			colorfulText: true,
-			glass: false,
-			variant: "filled"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			glass: {
-				false: null,
-				true: styles.glass
-			},
-			colorfulText: {
-				false: null,
-				true: styles.colorfulText
-			},
-			hasExtra: {
-				false: null,
-				true: styles.hasExtra
-			}
-		}
-	}), [styles]);
-	const extraVariants = useMemo(() => cva(styles.extra, {
-		defaultVariants: { variant: "filled" },
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			banner: {
-				false: null,
-				true: styles.banner
-			}
-		}
-	}), [styles]);
-	const extraHeaderVariants = useMemo(() => cva(styles.extraHeader, {
-		defaultVariants: { variant: "filled" },
-		variants: { variant: {
-			filled: null,
-			outlined: null,
-			borderless: styles.borderlessExtraHeader
-		} }
-	}), [styles]);
+	const theme = useTheme();
+	const hasTitle = !!description;
+	const isClosable = !!closable;
+	const isShowIcon = !!showIcon;
 	const alert = /* @__PURE__ */ jsx(Alert, {
 		banner,
-		className: cx(variants({
+		className: cx(rootVariants({
+			closable: isClosable,
 			colorfulText,
 			glass,
 			hasExtra: Boolean(!extraIsolate && !!extra),
+			hasTitle,
+			showIcon: isShowIcon,
 			variant
 		}), classNames?.alert),
 		closable: typeof closable === "boolean" ? closable : {
@@ -101,7 +55,7 @@ const Alert$1 = memo(({ closable = false, description, showIcon = true, type = "
 		},
 		description,
 		icon: /* @__PURE__ */ jsx(Icon_default, {
-			color: type === "secondary" ? theme.colorTextSecondary : void 0,
+			color: type === "secondary" ? cssVar.colorTextSecondary : void 0,
 			icon: typeIcons[type] || icon,
 			size: description ? 24 : 18,
 			...iconProps
@@ -143,7 +97,10 @@ const Alert$1 = memo(({ closable = false, description, showIcon = true, type = "
 				children: /* @__PURE__ */ jsx(AccordionItem_default, {
 					classNames: {
 						content: classNames?.extraContent,
-						header: extraHeaderVariants({ variant })
+						header: extraHeaderVariants({
+							hasTitle,
+							variant
+						})
 					},
 					itemKey: "extra",
 					styles: {

package/es/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":["Alert","AntdAlert","ActionIcon","Icon","Flexbox","Accordion","AccordionItem"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport { Alert as AntdAlert } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { camelCase } from 'es-toolkit/compat';\nimport { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { Accordion, AccordionItem } from '@/Accordion';\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { AlertProps } from './type';\n\nconst typeIcons = {\n  error: XCircle,\n  info: Info,\n  secondary: AlertTriangle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst colors = (theme: any, type: string = 'info', ...keys: string[]) => {\n  if (type === 'secondary') return theme[camelCase(['color', ...keys].join('-'))] as string;\n  return theme[camelCase(['color', type, ...keys].join('-'))] as string;\n};\n\nconst Alert = memo<AlertProps>(\n  ({\n    closable = false,\n    description,\n    showIcon = true,\n    type = 'info',\n    glass,\n    icon,\n    colorfulText = true,\n    iconProps,\n    style,\n    extra,\n    classNames,\n    styles: customStyles,\n    text,\n    extraDefaultExpand = false,\n    extraIsolate,\n    banner,\n    variant = 'filled',\n    ref,\n    ...rest\n  }) => {\n    const { theme, styles, cx } = useStyles({\n      closable: !!closable,\n      hasTitle: !!description,\n      showIcon: !!showIcon,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            colorfulText: true,\n            glass: false,\n            variant: 'filled',\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            },\n            glass: {\n              false: null,\n              true: styles.glass,\n            },\n            colorfulText: {\n              false: null,\n              true: styles.colorfulText,\n            },\n            hasExtra: {\n              false: null,\n              true: styles.hasExtra,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const extraVariants = useMemo(\n      () =>\n        cva(styles.extra, {\n          defaultVariants: {\n            variant: 'filled',\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            },\n            banner: {\n              false: null,\n              true: styles.banner,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const extraHeaderVariants = useMemo(\n      () =>\n        cva(styles.extraHeader, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: null,\n              outlined: null,\n              borderless: styles.borderlessExtraHeader,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const isInsideExtra = Boolean(!extraIsolate && !!extra);\n\n    const alert = (\n      <AntdAlert\n        banner={banner}\n        className={cx(\n          variants({\n            colorfulText,\n            glass,\n            hasExtra: isInsideExtra,\n            variant,\n          }),\n          classNames?.alert,\n        )}\n        closable={\n          typeof closable === 'boolean'\n            ? closable\n            : {\n                closeIcon: <ActionIcon color={colors(theme, type)} icon={X} size={'small'} />,\n                ...closable,\n              }\n        }\n        description={description}\n        icon={\n          <Icon\n            color={type === 'secondary' ? theme.colorTextSecondary : undefined}\n            icon={typeIcons[type] || icon}\n            size={description ? 24 : 18}\n            {...iconProps}\n          />\n        }\n        ref={ref}\n        showIcon={showIcon}\n        style={{\n          background: colors(theme, type, 'fillTertiary'),\n          borderColor: colors(theme, type, 'fillSecondary'),\n          color: colorfulText ? colors(theme, type) : undefined,\n          ...style,\n          ...customStyles?.alert,\n        }}\n        type={type === 'secondary' ? 'info' : type}\n        {...rest}\n      />\n    );\n\n    if (!extra) return alert;\n\n    if (extraIsolate)\n      return (\n        <Flexbox className={classNames?.container} gap={8}>\n          {alert}\n          {extra}\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox className={classNames?.container} style={customStyles?.container}>\n        {alert}\n        <Flexbox\n          className={extraVariants({ banner, variant })}\n          style={{\n            background: colors(theme, type, 'fillTertiary'),\n            borderColor: colors(theme, type, 'fillSecondary'),\n            color: colors(theme, type),\n            fontSize: description ? 14 : 12,\n          }}\n        >\n          <Accordion defaultExpandedKeys={extraDefaultExpand ? ['extra'] : []}>\n            <AccordionItem\n              classNames={{\n                content: classNames?.extraContent,\n                header: extraHeaderVariants({ variant }),\n              }}\n              itemKey={'extra'}\n              styles={{\n                content: {\n                  fontSize: 12,\n                  ...customStyles?.extraContent,\n                },\n                header: {\n                  borderColor: colors(theme, type, 'fillSecondary'),\n                },\n                indicator: {\n                  color: colors(theme, type),\n                },\n                title: {\n                  color: colors(theme, type),\n                  fontSize: 12,\n                },\n              }}\n              title={text?.detail || 'Show Details'}\n            >\n              {extra}\n            </AccordionItem>\n          </Accordion>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","names":["Alert","AntdAlert","ActionIcon","Icon","Flexbox","Accordion","AccordionItem"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport { Alert as AntdAlert } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { camelCase } from 'es-toolkit/compat';\nimport { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { Accordion, AccordionItem } from '@/Accordion';\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { extraHeaderVariants, extraVariants, rootVariants } from './style';\nimport type { AlertProps } from './type';\n\nconst typeIcons = {\n  error: XCircle,\n  info: Info,\n  secondary: AlertTriangle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst colors = (theme: any, type: string = 'info', ...keys: string[]) => {\n  if (type === 'secondary') return theme[camelCase(['color', ...keys].join('-'))] as string;\n  return theme[camelCase(['color', type, ...keys].join('-'))] as string;\n};\n\nconst Alert = memo<AlertProps>(\n  ({\n    closable = false,\n    description,\n    showIcon = true,\n    type = 'info',\n    glass,\n    icon,\n    colorfulText = true,\n    iconProps,\n    style,\n    extra,\n    classNames,\n    styles: customStyles,\n    text,\n    extraDefaultExpand = false,\n    extraIsolate,\n    banner,\n    variant = 'filled',\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n    const hasTitle = !!description;\n    const isClosable = !!closable;\n    const isShowIcon = !!showIcon;\n\n    const isInsideExtra = Boolean(!extraIsolate && !!extra);\n\n    const alert = (\n      <AntdAlert\n        banner={banner}\n        className={cx(\n          rootVariants({\n            closable: isClosable,\n            colorfulText,\n            glass,\n            hasExtra: isInsideExtra,\n            hasTitle,\n            showIcon: isShowIcon,\n            variant,\n          }),\n          classNames?.alert,\n        )}\n        closable={\n          typeof closable === 'boolean'\n            ? closable\n            : {\n                closeIcon: <ActionIcon color={colors(theme, type)} icon={X} size={'small'} />,\n                ...closable,\n              }\n        }\n        description={description}\n        icon={\n          <Icon\n            color={type === 'secondary' ? cssVar.colorTextSecondary : undefined}\n            icon={typeIcons[type] || icon}\n            size={description ? 24 : 18}\n            {...iconProps}\n          />\n        }\n        ref={ref}\n        showIcon={showIcon}\n        style={{\n          background: colors(theme, type, 'fillTertiary'),\n          borderColor: colors(theme, type, 'fillSecondary'),\n          color: colorfulText ? colors(theme, type) : undefined,\n          ...style,\n          ...customStyles?.alert,\n        }}\n        type={type === 'secondary' ? 'info' : type}\n        {...rest}\n      />\n    );\n\n    if (!extra) return alert;\n\n    if (extraIsolate)\n      return (\n        <Flexbox className={classNames?.container} gap={8}>\n          {alert}\n          {extra}\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox className={classNames?.container} style={customStyles?.container}>\n        {alert}\n        <Flexbox\n          className={extraVariants({ banner, variant })}\n          style={{\n            background: colors(theme, type, 'fillTertiary'),\n            borderColor: colors(theme, type, 'fillSecondary'),\n            color: colors(theme, type),\n            fontSize: description ? 14 : 12,\n          }}\n        >\n          <Accordion defaultExpandedKeys={extraDefaultExpand ? ['extra'] : []}>\n            <AccordionItem\n              classNames={{\n                content: classNames?.extraContent,\n                header: extraHeaderVariants({ hasTitle, variant }),\n              }}\n              itemKey={'extra'}\n              styles={{\n                content: {\n                  fontSize: 12,\n                  ...customStyles?.extraContent,\n                },\n                header: {\n                  borderColor: colors(theme, type, 'fillSecondary'),\n                },\n                indicator: {\n                  color: colors(theme, type),\n                },\n                title: {\n                  color: colors(theme, type),\n                  fontSize: 12,\n                },\n              }}\n              title={text?.detail || 'Show Details'}\n            >\n              {extra}\n            </AccordionItem>\n          </Accordion>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,YAAY;CAChB,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,SAAS;CACV;AAED,MAAM,UAAU,OAAY,OAAe,QAAQ,GAAG,SAAmB;AACvE,KAAI,SAAS,YAAa,QAAO,MAAM,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC;AAC9E,QAAO,MAAM,UAAU;EAAC;EAAS;EAAM,GAAG;EAAK,CAAC,KAAK,IAAI,CAAC;;AAG5D,MAAMA,UAAQ,MACX,EACC,WAAW,OACX,aACA,WAAW,MACX,OAAO,QACP,OACA,MACA,eAAe,MACf,WACA,OACA,OACA,YACA,QAAQ,cACR,MACA,qBAAqB,OACrB,cACA,QACA,UAAU,UACV,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,aAAa,CAAC,CAAC;CACrB,MAAM,aAAa,CAAC,CAAC;CAIrB,MAAM,QACJ,oBAACC;EACS;EACR,WAAW,GACT,aAAa;GACX,UAAU;GACV;GACA;GACA,UAVc,QAAQ,CAAC,gBAAgB,CAAC,CAAC,MAAM;GAW/C;GACA,UAAU;GACV;GACD,CAAC,EACF,YAAY,MACb;EACD,UACE,OAAO,aAAa,YAChB,WACA;GACE,WAAW,oBAACC;IAAW,OAAO,OAAO,OAAO,KAAK;IAAE,MAAM;IAAG,MAAM;KAAW;GAC7E,GAAG;GACJ;EAEM;EACb,MACE,oBAACC;GACC,OAAO,SAAS,cAAc,OAAO,qBAAqB;GAC1D,MAAM,UAAU,SAAS;GACzB,MAAM,cAAc,KAAK;GACzB,GAAI;IACJ;EAEC;EACK;EACV,OAAO;GACL,YAAY,OAAO,OAAO,MAAM,eAAe;GAC/C,aAAa,OAAO,OAAO,MAAM,gBAAgB;GACjD,OAAO,eAAe,OAAO,OAAO,KAAK,GAAG;GAC5C,GAAG;GACH,GAAG,cAAc;GAClB;EACD,MAAM,SAAS,cAAc,SAAS;EACtC,GAAI;GACJ;AAGJ,KAAI,CAAC,MAAO,QAAO;AAEnB,KAAI,aACF,QACE,qBAACC;EAAQ,WAAW,YAAY;EAAW,KAAK;aAC7C,OACA;GACO;AAGd,QACE,qBAACA;EAAQ,WAAW,YAAY;EAAW,OAAO,cAAc;aAC7D,OACD,oBAACA;GACC,WAAW,cAAc;IAAE;IAAQ;IAAS,CAAC;GAC7C,OAAO;IACL,YAAY,OAAO,OAAO,MAAM,eAAe;IAC/C,aAAa,OAAO,OAAO,MAAM,gBAAgB;IACjD,OAAO,OAAO,OAAO,KAAK;IAC1B,UAAU,cAAc,KAAK;IAC9B;aAED,oBAACC;IAAU,qBAAqB,qBAAqB,CAAC,QAAQ,GAAG,EAAE;cACjE,oBAACC;KACC,YAAY;MACV,SAAS,YAAY;MACrB,QAAQ,oBAAoB;OAAE;OAAU;OAAS,CAAC;MACnD;KACD,SAAS;KACT,QAAQ;MACN,SAAS;OACP,UAAU;OACV,GAAG,cAAc;OAClB;MACD,QAAQ,EACN,aAAa,OAAO,OAAO,MAAM,gBAAgB,EAClD;MACD,WAAW,EACT,OAAO,OAAO,OAAO,KAAK,EAC3B;MACD,OAAO;OACL,OAAO,OAAO,OAAO,KAAK;OAC1B,UAAU;OACX;MACF;KACD,OAAO,MAAM,UAAU;eAEtB;MACa;KACN;IACJ;GACF;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeN"}

package/es/Alert/style.mjs

@@ -1,102 +1,338 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Alert/style.ts
-const useStyles = createStyles(({ cx: cx$1, token, css: css$1, prefixCls, stylish }, { closable, hasTitle, showIcon }) => {
-	const baseBlockPadding = hasTitle ? 16 : 8;
-	const baseInlinePadding = hasTitle ? 16 : 12;
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		banner: css$1`
-        border: none !important;
-        border-radius: 0 !important;
-      `,
+      border: none !important;
+      border-radius: 0 !important;
+    `,
 		borderless: css$1`
-        padding: 0 !important;
-        border: none !important;
-        background: transparent !important;
-      `,
-		borderlessExtraHeader: css$1`
-        margin-block-start: ${baseBlockPadding}px;
-        padding-inline: 0;
-      `,
+      padding: 0 !important;
+      border: none !important;
+      background: transparent !important;
+    `,
+		borderlessExtraHeaderNoTitle: css$1`
+      margin-block-start: 8px;
+      padding-inline: 0;
+    `,
+		borderlessExtraHeaderWithTitle: css$1`
+      margin-block-start: 16px;
+      padding-inline: 0;
+    `,
 		colorfulText: css$1`
-        .${prefixCls}-alert-message,.${prefixCls}-alert-description {
-          color: inherit;
-        }
-      `,
+      .${prefixCls}-alert-message,.${prefixCls}-alert-description {
+        color: inherit;
+      }
+    `,
 		expandText: css$1`
-        padding-inline-end: 12px;
+      padding-inline-end: 12px;
 
-        &:hover {
-          cursor: pointer;
-        }
-      `,
+      &:hover {
+        cursor: pointer;
+      }
+    `,
 		extra: css$1`
-        position: relative;
+      position: relative;
 
-        overflow: hidden;
+      overflow: hidden;
 
-        max-width: 100%;
-        border: 1px solid;
-        border-block-start: none;
-        border-end-start-radius: ${token.borderRadiusLG}px;
-        border-end-end-radius: ${token.borderRadiusLG}px;
-      `,
+      max-width: 100%;
+      border: 1px solid;
+      border-block-start: none;
+      border-end-start-radius: ${cssVar$1.borderRadiusLG};
+      border-end-end-radius: ${cssVar$1.borderRadiusLG};
+    `,
 		extraHeader: css$1`
-        border-block-start: 1px dashed;
-        border-radius: 0;
-        background: transparent !important;
-      `,
+      border-block-start: 1px dashed;
+      border-radius: 0;
+      background: transparent !important;
+    `,
 		filled: css$1``,
-		glass: stylish.blur,
+		glass: staticStylish.blur,
 		hasExtra: css$1`
-        border-block-end: none;
-        border-end-start-radius: 0;
-        border-end-end-radius: 0;
-      `,
+      border-block-end: none;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    `,
 		outlined: css$1`
-        background: transparent !important;
-      `,
-		root: cx$1(css$1`
-          position: relative;
-
-          display: flex;
-          flex-direction: row;
-          gap: ${hasTitle ? 12 : 8}px;
-          align-items: flex-start;
-
-          max-width: 100%;
-          padding-block: ${baseBlockPadding}px;
-          padding-inline: ${showIcon ? baseInlinePadding * .75 : baseInlinePadding}px
-            ${closable ? baseInlinePadding * .75 : baseInlinePadding}px;
-
-          .${prefixCls}-alert-title {
-            font-weight: ${hasTitle ? 500 : 400};
-            line-height: 24px;
-            color: inherit;
-            word-break: normal;
-          }
-          .${prefixCls}-alert-icon {
-            display: flex;
-            align-items: center;
-            height: 24px;
-            margin: 0;
-          }
-          .${prefixCls}-alert-close-icon {
-            display: flex;
-            align-items: center;
-            height: 24px;
-            margin: 0;
-          }
-        `, hasTitle && css$1`
-            .${prefixCls}-alert-description {
-              line-height: 1.5;
-              word-break: normal;
-              opacity: 0.75;
-            }
-          `)
+      background: transparent !important;
+    `,
+		rootBase: css$1`
+      position: relative;
+
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      max-width: 100%;
+
+      .${prefixCls}-alert-icon {
+        display: flex;
+        align-items: center;
+        height: 24px;
+        margin: 0;
+      }
+      .${prefixCls}-alert-close-icon {
+        display: flex;
+        align-items: center;
+        height: 24px;
+        margin: 0;
+      }
+    `,
+		rootNoTitleNoIconNoClosable: css$1`
+      gap: 8px;
+      padding-block: 8px;
+      padding-inline: 12px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 400;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+    `,
+		rootNoTitleNoIconWithClosable: css$1`
+      gap: 8px;
+      padding-block: 8px;
+      padding-inline: 12px 9px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 400;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+    `,
+		rootNoTitleWithIconNoClosable: css$1`
+      gap: 8px;
+      padding-block: 8px;
+      padding-inline: 9px 12px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 400;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+    `,
+		rootNoTitleWithIconWithClosable: css$1`
+      gap: 8px;
+      padding-block: 8px;
+      padding-inline: 9px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 400;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+    `,
+		rootWithTitleNoIconNoClosable: css$1`
+      gap: 12px;
+      padding-block: 16px;
+      padding-inline: 16px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 500;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+      .${prefixCls}-alert-description {
+        line-height: 1.5;
+        word-break: normal;
+        opacity: 0.75;
+      }
+    `,
+		rootWithTitleNoIconWithClosable: css$1`
+      gap: 12px;
+      padding-block: 16px;
+      padding-inline: 16px 12px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 500;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+      .${prefixCls}-alert-description {
+        line-height: 1.5;
+        word-break: normal;
+        opacity: 0.75;
+      }
+    `,
+		rootWithTitleWithIconNoClosable: css$1`
+      gap: 12px;
+      padding-block: 16px;
+      padding-inline: 12px 16px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 500;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+      .${prefixCls}-alert-description {
+        line-height: 1.5;
+        word-break: normal;
+        opacity: 0.75;
+      }
+    `,
+		rootWithTitleWithIconWithClosable: css$1`
+      gap: 12px;
+      padding-block: 16px;
+      padding-inline: 12px;
+
+      .${prefixCls}-alert-title {
+        font-weight: 500;
+        line-height: 24px;
+        color: inherit;
+        word-break: normal;
+      }
+      .${prefixCls}-alert-description {
+        line-height: 1.5;
+        word-break: normal;
+        opacity: 0.75;
+      }
+    `
 	};
 });
+const extraVariants = cva(styles.extra, {
+	defaultVariants: { variant: "filled" },
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		banner: {
+			false: null,
+			true: styles.banner
+		}
+	}
+});
+const rootVariants = cva(styles.rootBase, {
+	compoundVariants: [
+		{
+			class: styles.rootNoTitleNoIconNoClosable,
+			closable: false,
+			hasTitle: false,
+			showIcon: false
+		},
+		{
+			class: styles.rootNoTitleNoIconWithClosable,
+			closable: true,
+			hasTitle: false,
+			showIcon: false
+		},
+		{
+			class: styles.rootNoTitleWithIconNoClosable,
+			closable: false,
+			hasTitle: false,
+			showIcon: true
+		},
+		{
+			class: styles.rootNoTitleWithIconWithClosable,
+			closable: true,
+			hasTitle: false,
+			showIcon: true
+		},
+		{
+			class: styles.rootWithTitleNoIconNoClosable,
+			closable: false,
+			hasTitle: true,
+			showIcon: false
+		},
+		{
+			class: styles.rootWithTitleNoIconWithClosable,
+			closable: true,
+			hasTitle: true,
+			showIcon: false
+		},
+		{
+			class: styles.rootWithTitleWithIconNoClosable,
+			closable: false,
+			hasTitle: true,
+			showIcon: true
+		},
+		{
+			class: styles.rootWithTitleWithIconWithClosable,
+			closable: true,
+			hasTitle: true,
+			showIcon: true
+		}
+	],
+	defaultVariants: {
+		closable: false,
+		colorfulText: true,
+		glass: false,
+		hasTitle: false,
+		showIcon: false,
+		variant: "filled"
+	},
+	variants: {
+		closable: {
+			false: null,
+			true: null
+		},
+		colorfulText: {
+			false: null,
+			true: styles.colorfulText
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		hasTitle: {
+			false: null,
+			true: null
+		},
+		showIcon: {
+			false: null,
+			true: null
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: styles.filled,
+			outlined: styles.outlined
+		},
+		hasExtra: {
+			false: null,
+			true: styles.hasExtra
+		}
+	}
+});
+const extraHeaderVariants = cva(styles.extraHeader, {
+	compoundVariants: [{
+		class: styles.borderlessExtraHeaderNoTitle,
+		hasTitle: false,
+		variant: "borderless"
+	}, {
+		class: styles.borderlessExtraHeaderWithTitle,
+		hasTitle: true,
+		variant: "borderless"
+	}],
+	defaultVariants: {
+		hasTitle: false,
+		variant: "filled"
+	},
+	variants: {
+		hasTitle: {
+			false: null,
+			true: null
+		},
+		variant: {
+			borderless: null,
+			filled: null,
+			outlined: null
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { extraHeaderVariants, extraVariants, rootVariants };
 //# sourceMappingURL=style.mjs.map