@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Alert/Alert.mjs

@@ -1,16 +1,13 @@
 "use client";
-import Accordion from "../Accordion/Accordion.mjs";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Icon from "../Icon/Icon.mjs";
-import AccordionItem from "../Accordion/AccordionItem.mjs";
-import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import { extraHeaderVariants, extraVariants, rootVariants } from "./style.mjs";
-import { memo } from "react";
+import { alertSummaryMarker } from "./marker.stylex.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx, useTheme } from "antd-style";
-import { camelCase } from "es-toolkit/compat";
-import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
-import { Alert } from "antd";
+import clsx from "clsx";
+import { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from "lucide-react";
 //#region src/Alert/Alert.tsx
 const typeIcons = {
 	error: XCircle,
@@ -19,107 +16,156 @@ const typeIcons = {
 	success: CheckCircle,
 	warning: AlertTriangle
 };
-const colors = (theme, type = "info", ...keys) => {
-	if (type === "secondary") return theme[camelCase(["color", ...keys].join("-"))];
-	return theme[camelCase([
-		"color",
-		type,
-		...keys
-	].join("-"))];
+const toneStyles = {
+	error: styles.toneError,
+	info: styles.toneInfo,
+	secondary: styles.toneSecondary,
+	success: styles.toneSuccess,
+	warning: styles.toneWarning
 };
-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 = useTheme();
-	const hasTitle = !!description;
-	const alert = /* @__PURE__ */ jsx(Alert, {
-		banner,
-		description,
+const rootVariantStyles = {
+	borderless: styles.plain,
+	filled: styles.soft,
+	outlined: styles.outlined,
+	plain: styles.plain,
+	soft: styles.soft
+};
+const integratedVariantStyles = {
+	borderless: styles.extraPlain,
+	filled: styles.soft,
+	outlined: styles.outlined,
+	plain: styles.extraPlain,
+	soft: styles.soft
+};
+const isPlainVariant = (variant) => variant === "borderless" || variant === "plain";
+const Alert = memo(({ action, afterClose, banner = false, className, classNames, closable = false, closeIcon, closeText, colorfulText = false, description, extra, extraDefaultExpand = false, extraIsolate = false, glass = false, icon, iconProps, message, onClose, ref, role = "alert", rootClassName, showIcon = true, style, styles: customStyles, text, title, type = "info", variant = "soft", ...rest }) => {
+	const [closed, setClosed] = useState(false);
+	const [extraExpanded, setExtraExpanded] = useState(extraDefaultExpand);
+	const resolvedTitle = title ?? message;
+	const hasDescription = description !== void 0 && description !== null;
+	const integratedExtra = Boolean(extra && !extraIsolate);
+	const closeConfig = typeof closable === "object" ? closable : {};
+	const isClosable = Boolean(closable);
+	const { afterClose: configuredAfterClose, closeIcon: configuredCloseIcon, className: closeClassName, disabled: closeDisabled, onClose: configuredOnClose, style: closeStyle, ...closeButtonProps } = closeConfig;
+	const afterCloseRef = useRef(configuredAfterClose ?? afterClose);
+	afterCloseRef.current = configuredAfterClose ?? afterClose;
+	useEffect(() => {
+		if (closed) afterCloseRef.current?.();
+	}, [closed]);
+	if (closed) return null;
+	const handleClose = (event) => {
+		(configuredOnClose ?? onClose)?.(event);
+		setClosed(true);
+	};
+	const root = /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-alert-type": type,
+		"data-alert-variant": variant,
 		ref,
-		showIcon,
-		type: type === "secondary" ? "info" : type,
-		className: cx(rootVariants({
-			closable: !!closable,
-			colorfulText,
-			glass,
-			hasExtra: Boolean(!extraIsolate && !!extra),
-			hasTitle,
-			showIcon: !!showIcon,
-			variant
-		}), classNames?.alert),
-		closable: typeof closable === "boolean" ? closable : {
-			closeIcon: /* @__PURE__ */ jsx(ActionIcon, {
-				color: colors(theme, type),
-				icon: X,
-				size: "small"
-			}),
-			...closable
-		},
-		icon: /* @__PURE__ */ jsx(Icon, {
-			color: type === "secondary" ? cssVar.colorTextSecondary : void 0,
-			icon: icon || typeIcons[type],
-			size: description ? 24 : 18,
-			...iconProps
-		}),
-		style: {
-			background: colors(theme, type, "fillTertiary"),
-			borderColor: colors(theme, type, "fillSecondary"),
-			color: colorfulText ? colors(theme, type) : void 0,
+		role,
+		...styleProps([
+			toneStyles[type],
+			styles.root,
+			banner && styles.banner,
+			colorfulText ? styles.colorfulText : styles.neutralText,
+			!integratedExtra && glass && styles.glass,
+			hasDescription ? styles.detailed : styles.centered,
+			rootVariantStyles[variant],
+			integratedExtra && styles.unifiedRoot
+		], clsx(classNames?.root, classNames?.alert, rootClassName, className), {
 			...style,
+			...customStyles?.root,
 			...customStyles?.alert
-		},
-		...rest
+		}),
+		children: [
+			showIcon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				...styleProps([styles.icon], classNames?.icon, customStyles?.icon),
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: icon ?? typeIcons[type],
+					size: hasDescription ? 18 : 16,
+					...iconProps
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				...styleProps([styles.content], clsx(classNames?.section, classNames?.content), {
+					...customStyles?.section,
+					...customStyles?.content
+				}),
+				children: [resolvedTitle !== void 0 && resolvedTitle !== null && /* @__PURE__ */ jsx("div", {
+					...styleProps([styles.title, hasDescription && styles.titleDetailed], classNames?.title, customStyles?.title),
+					children: resolvedTitle
+				}), hasDescription && /* @__PURE__ */ jsx("div", {
+					...styleProps([styles.description], classNames?.description, customStyles?.description),
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				...styleProps([styles.action, styles.wrappedAction], classNames?.action, customStyles?.action),
+				children: action
+			}),
+			isClosable && /* @__PURE__ */ jsx("button", {
+				...closeButtonProps,
+				"aria-label": closeButtonProps["aria-label"] ?? "Close alert",
+				disabled: closeDisabled,
+				...styleProps([focusRing.info, styles.close], clsx(classNames?.close, closeClassName), {
+					...customStyles?.close,
+					...closeStyle
+				}),
+				type: "button",
+				onClick: handleClose,
+				children: configuredCloseIcon ?? closeIcon ?? closeText ?? /* @__PURE__ */ jsx(X, { size: 14 })
+			})
+		]
 	});
-	if (!extra) return alert;
-	if (extraIsolate) return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: classNames?.container,
-		gap: 8,
-		children: [alert, extra]
+	if (!extra) return root;
+	if (extraIsolate) return /* @__PURE__ */ jsxs("div", {
+		...styleProps([styles.container, toneStyles[type]], classNames?.container, {
+			gap: 8,
+			...customStyles?.container
+		}),
+		children: [root, extra]
 	});
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: classNames?.container,
-		style: customStyles?.container,
-		children: [alert, /* @__PURE__ */ jsx(FlexBasic_default, {
-			className: extraVariants({
-				banner,
-				variant
-			}),
-			style: {
-				background: colors(theme, type, "fillTertiary"),
-				borderColor: colors(theme, type, "fillSecondary"),
-				color: colors(theme, type),
-				fontSize: description ? 14 : 12
-			},
-			children: /* @__PURE__ */ jsx(Accordion, {
-				defaultExpandedKeys: extraDefaultExpand ? ["extra"] : [],
-				children: /* @__PURE__ */ jsx(AccordionItem, {
-					itemKey: "extra",
-					title: text?.detail || "Show Details",
-					classNames: {
-						content: classNames?.extraContent,
-						header: extraHeaderVariants({
-							hasTitle,
-							variant
-						})
-					},
-					styles: {
-						content: {
-							fontSize: 12,
-							...customStyles?.extraContent
-						},
-						header: { borderColor: colors(theme, type, "fillSecondary") },
-						indicator: { color: colors(theme, type) },
-						title: {
-							color: colors(theme, type),
-							fontSize: 12
-						}
-					},
+	return /* @__PURE__ */ jsxs("div", {
+		...styleProps([
+			styles.container,
+			toneStyles[type],
+			styles.integrated,
+			banner && styles.banner,
+			glass && styles.glass,
+			integratedVariantStyles[variant]
+		], classNames?.container, customStyles?.container),
+		children: [root, /* @__PURE__ */ jsx("div", {
+			...styleProps([
+				styles.extra,
+				banner && styles.extraBanner,
+				isPlainVariant(variant) && styles.extraPlain
+			], classNames?.extra, customStyles?.extra),
+			children: /* @__PURE__ */ jsxs("details", {
+				open: extraExpanded,
+				onToggle: (event) => setExtraExpanded(event.currentTarget.open),
+				children: [/* @__PURE__ */ jsxs("summary", {
+					...styleProps([
+						alertSummaryMarker,
+						focusRing.info,
+						styles.extraHeader,
+						isPlainVariant(variant) && styles.extraHeaderPlain
+					], clsx("lobe-alert-extra-header", classNames?.extraHeader), customStyles?.extraHeader),
+					children: [/* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": "true",
+						size: 14,
+						...styleProps([styles.extraIndicator], classNames?.extraIndicator, customStyles?.extraIndicator)
+					}), /* @__PURE__ */ jsx("span", { children: text?.detail ?? "Show Details" })]
+				}), /* @__PURE__ */ jsx("div", {
+					...styleProps([styles.extraContent], classNames?.extraContent, customStyles?.extraContent),
 					children: extra
-				})
+				})]
 			})
 		})]
 	});
 });
-Alert$1.displayName = "Alert";
+Alert.displayName = "BaseAlert";
 //#endregion
-export { Alert$1 as default };
+export { Alert as default };
 
 //# sourceMappingURL=Alert.mjs.map

package/es/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":["Alert","AntdAlert","Flexbox"],"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 '@/base-ui/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        description={description}\n        ref={ref}\n        showIcon={showIcon}\n        type={type === 'secondary' ? 'info' : type}\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        icon={\n          <Icon\n            color={type === 'secondary' ? cssVar.colorTextSecondary : undefined}\n            icon={icon || typeIcons[type]}\n            size={description ? 24 : 18}\n            {...iconProps}\n          />\n        }\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        {...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              itemKey={'extra'}\n              title={text?.detail || 'Show Details'}\n              classNames={{\n                content: classNames?.extraContent,\n                header: extraHeaderVariants({ hasTitle, variant }),\n              }}\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            >\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;AACX;AAEA,MAAM,UAAU,OAAY,OAAe,QAAQ,GAAG,SAAmB;CACvE,IAAI,SAAS,aAAa,OAAO,MAAM,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC;CAC7E,OAAO,MAAM,UAAU;EAAC;EAAS;EAAM,GAAG;CAAI,CAAC,CAAC,KAAK,GAAG,CAAC;AAC3D;AAEA,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,SAAS;CACvB,MAAM,WAAW,CAAC,CAAC;CAMnB,MAAM,QACJ,oBAACC,OAAD;EACU;EACK;EACR;EACK;EACV,MAAM,SAAS,cAAc,SAAS;EACtC,WAAW,GACT,aAAa;GACX,UAAU,CAdE,CAAC;GAeb;GACA;GACA,UAdc,QAAQ,CAAC,gBAAgB,CAAC,CAAC,KAcnB;GACtB;GACA,UAAU,CAlBE,CAAC;GAmBb;EACF,CAAC,GACD,YAAY,KACd;EACA,UACE,OAAO,aAAa,YAChB,WACA;GACE,WAAW,oBAAC,YAAD;IAAY,OAAO,OAAO,OAAO,IAAI;IAAG,MAAM;IAAG,MAAM;GAAU,CAAA;GAC5E,GAAG;EACL;EAEN,MACE,oBAAC,MAAD;GACE,OAAO,SAAS,cAAc,OAAO,qBAAqB,KAAA;GAC1D,MAAM,QAAQ,UAAU;GACxB,MAAM,cAAc,KAAK;GACzB,GAAI;EACL,CAAA;EAEH,OAAO;GACL,YAAY,OAAO,OAAO,MAAM,cAAc;GAC9C,aAAa,OAAO,OAAO,MAAM,eAAe;GAChD,OAAO,eAAe,OAAO,OAAO,IAAI,IAAI,KAAA;GAC5C,GAAG;GACH,GAAG,cAAc;EACnB;EACA,GAAI;CACL,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,IAAI,cACF,OACE,qBAACC,mBAAD;EAAS,WAAW,YAAY;EAAW,KAAK;EAAhD,UAAA,CACG,OACA,KACM;;CAGb,OACE,qBAACA,mBAAD;EAAS,WAAW,YAAY;EAAW,OAAO,cAAc;EAAhE,UAAA,CACG,OACD,oBAACA,mBAAD;GACE,WAAW,cAAc;IAAE;IAAQ;GAAQ,CAAC;GAC5C,OAAO;IACL,YAAY,OAAO,OAAO,MAAM,cAAc;IAC9C,aAAa,OAAO,OAAO,MAAM,eAAe;IAChD,OAAO,OAAO,OAAO,IAAI;IACzB,UAAU,cAAc,KAAK;GAC/B;GAEA,UAAA,oBAAC,WAAD;IAAW,qBAAqB,qBAAqB,CAAC,OAAO,IAAI,CAAC;IAChE,UAAA,oBAAC,eAAD;KACE,SAAS;KACT,OAAO,MAAM,UAAU;KACvB,YAAY;MACV,SAAS,YAAY;MACrB,QAAQ,oBAAoB;OAAE;OAAU;MAAQ,CAAC;KACnD;KACA,QAAQ;MACN,SAAS;OACP,UAAU;OACV,GAAG,cAAc;MACnB;MACA,QAAQ,EACN,aAAa,OAAO,OAAO,MAAM,eAAe,EAClD;MACA,WAAW,EACT,OAAO,OAAO,OAAO,IAAI,EAC3B;MACA,OAAO;OACL,OAAO,OAAO,OAAO,IAAI;OACzB,UAAU;MACZ;KACF;KAEC,UAAA;IACY,CAAA;GACN,CAAA;EACJ,CAAA,CACF;;AAEb,CACF;AAEA,QAAM,cAAc"}
+{"version":3,"file":"Alert.mjs","names":[],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { alertSummaryMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { AlertCloseConfig, AlertProps, AlertType, AlertVariant } from './type';\n\nconst typeIcons = {\n  error: XCircle,\n  info: Info,\n  secondary: AlertTriangle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n} satisfies Record<AlertType, typeof Info>;\n\nconst toneStyles = {\n  error: styles.toneError,\n  info: styles.toneInfo,\n  secondary: styles.toneSecondary,\n  success: styles.toneSuccess,\n  warning: styles.toneWarning,\n} satisfies Record<AlertType, unknown>;\n\nconst rootVariantStyles = {\n  borderless: styles.plain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.plain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst integratedVariantStyles = {\n  borderless: styles.extraPlain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.extraPlain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst isPlainVariant = (variant: AlertVariant) => variant === 'borderless' || variant === 'plain';\n\nconst Alert = memo<AlertProps>(\n  ({\n    action,\n    afterClose,\n    banner = false,\n    className,\n    classNames,\n    closable = false,\n    closeIcon,\n    closeText,\n    colorfulText = false,\n    description,\n    extra,\n    extraDefaultExpand = false,\n    extraIsolate = false,\n    glass = false,\n    icon,\n    iconProps,\n    message,\n    onClose,\n    ref,\n    role = 'alert',\n    rootClassName,\n    showIcon = true,\n    style,\n    styles: customStyles,\n    text,\n    title,\n    type = 'info',\n    variant = 'soft',\n    ...rest\n  }) => {\n    const [closed, setClosed] = useState(false);\n    const [extraExpanded, setExtraExpanded] = useState(extraDefaultExpand);\n    const resolvedTitle = title ?? message;\n    const hasDescription = description !== undefined && description !== null;\n    const integratedExtra = Boolean(extra && !extraIsolate);\n    const closeConfig: AlertCloseConfig = typeof closable === 'object' ? closable : {};\n    const isClosable = Boolean(closable);\n    const {\n      afterClose: configuredAfterClose,\n      closeIcon: configuredCloseIcon,\n      className: closeClassName,\n      disabled: closeDisabled,\n      onClose: configuredOnClose,\n      style: closeStyle,\n      ...closeButtonProps\n    } = closeConfig;\n    const afterCloseRef = useRef(configuredAfterClose ?? afterClose);\n    afterCloseRef.current = configuredAfterClose ?? afterClose;\n\n    useEffect(() => {\n      if (closed) afterCloseRef.current?.();\n    }, [closed]);\n\n    if (closed) return null;\n\n    const handleClose: NonNullable<AlertCloseConfig['onClose']> = (event) => {\n      (configuredOnClose ?? onClose)?.(event);\n      setClosed(true);\n    };\n\n    const root = (\n      <div\n        {...rest}\n        data-alert-type={type}\n        data-alert-variant={variant}\n        ref={ref}\n        role={role}\n        {...styleProps(\n          [\n            toneStyles[type],\n            styles.root,\n            banner && styles.banner,\n            colorfulText ? styles.colorfulText : styles.neutralText,\n            !integratedExtra && glass && styles.glass,\n            hasDescription ? styles.detailed : styles.centered,\n            rootVariantStyles[variant],\n            integratedExtra && styles.unifiedRoot,\n          ],\n          clsx(classNames?.root, classNames?.alert, rootClassName, className),\n          {\n            ...style,\n            ...customStyles?.root,\n            ...customStyles?.alert,\n          },\n        )}\n      >\n        {showIcon && (\n          <span\n            aria-hidden=\"true\"\n            {...styleProps([styles.icon], classNames?.icon, customStyles?.icon)}\n          >\n            <Icon icon={icon ?? typeIcons[type]} size={hasDescription ? 18 : 16} {...iconProps} />\n          </span>\n        )}\n        <div\n          {...styleProps([styles.content], clsx(classNames?.section, classNames?.content), {\n            ...customStyles?.section,\n            ...customStyles?.content,\n          })}\n        >\n          {resolvedTitle !== undefined && resolvedTitle !== null && (\n            <div\n              {...styleProps(\n                [styles.title, hasDescription && styles.titleDetailed],\n                classNames?.title,\n                customStyles?.title,\n              )}\n            >\n              {resolvedTitle}\n            </div>\n          )}\n          {hasDescription && (\n            <div\n              {...styleProps(\n                [styles.description],\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </div>\n          )}\n        </div>\n        {action && (\n          <div\n            {...styleProps(\n              [styles.action, styles.wrappedAction],\n              classNames?.action,\n              customStyles?.action,\n            )}\n          >\n            {action}\n          </div>\n        )}\n        {isClosable && (\n          <button\n            {...closeButtonProps}\n            aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}\n            disabled={closeDisabled}\n            {...styleProps(\n              [focusRing.info, styles.close],\n              clsx(classNames?.close, closeClassName),\n              { ...customStyles?.close, ...closeStyle },\n            )}\n            type=\"button\"\n            onClick={handleClose}\n          >\n            {configuredCloseIcon ?? closeIcon ?? closeText ?? <X size={14} />}\n          </button>\n        )}\n      </div>\n    );\n\n    if (!extra) return root;\n\n    if (extraIsolate) {\n      return (\n        <div\n          {...styleProps([styles.container, toneStyles[type]], classNames?.container, {\n            gap: 8,\n            ...customStyles?.container,\n          })}\n        >\n          {root}\n          {extra}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...styleProps(\n          [\n            styles.container,\n            toneStyles[type],\n            styles.integrated,\n            banner && styles.banner,\n            glass && styles.glass,\n            integratedVariantStyles[variant],\n          ],\n          classNames?.container,\n          customStyles?.container,\n        )}\n      >\n        {root}\n        <div\n          {...styleProps(\n            [\n              styles.extra,\n              banner && styles.extraBanner,\n              isPlainVariant(variant) && styles.extraPlain,\n            ],\n            classNames?.extra,\n            customStyles?.extra,\n          )}\n        >\n          <details\n            open={extraExpanded}\n            onToggle={(event) => setExtraExpanded(event.currentTarget.open)}\n          >\n            <summary\n              {...styleProps(\n                [\n                  alertSummaryMarker,\n                  focusRing.info,\n                  styles.extraHeader,\n                  isPlainVariant(variant) && styles.extraHeaderPlain,\n                ],\n                clsx('lobe-alert-extra-header', classNames?.extraHeader),\n                customStyles?.extraHeader,\n              )}\n            >\n              <ChevronRight\n                aria-hidden=\"true\"\n                size={14}\n                {...styleProps(\n                  [styles.extraIndicator],\n                  classNames?.extraIndicator,\n                  customStyles?.extraIndicator,\n                )}\n              />\n              <span>{text?.detail ?? 'Show Details'}</span>\n            </summary>\n            <div\n              {...styleProps(\n                [styles.extraContent],\n                classNames?.extraContent,\n                customStyles?.extraContent,\n              )}\n            >\n              {extra}\n            </div>\n          </details>\n        </div>\n      </div>\n    );\n  },\n);\n\nAlert.displayName = 'BaseAlert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAY;CAChB,OAAO;CACP,MAAM;CACN,WAAW;CACX,SAAS;CACT,SAAS;AACX;AAEA,MAAM,aAAa;CACjB,OAAO,OAAO;CACd,MAAM,OAAO;CACb,WAAW,OAAO;CAClB,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB;AAEA,MAAM,oBAAoB;CACxB,YAAY,OAAO;CACnB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,OAAO,OAAO;CACd,MAAM,OAAO;AACf;AAEA,MAAM,0BAA0B;CAC9B,YAAY,OAAO;CACnB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,OAAO,OAAO;CACd,MAAM,OAAO;AACf;AAEA,MAAM,kBAAkB,YAA0B,YAAY,gBAAgB,YAAY;AAE1F,MAAM,QAAQ,MACX,EACC,QACA,YACA,SAAS,OACT,WACA,YACA,WAAW,OACX,WACA,WACA,eAAe,OACf,aACA,OACA,qBAAqB,OACrB,eAAe,OACf,QAAQ,OACR,MACA,WACA,SACA,SACA,KACA,OAAO,SACP,eACA,WAAW,MACX,OACA,QAAQ,cACR,MACA,OACA,OAAO,QACP,UAAU,QACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,eAAe,oBAAoB,SAAS,kBAAkB;CACrE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,gBAAgB,KAAA,KAAa,gBAAgB;CACpE,MAAM,kBAAkB,QAAQ,SAAS,CAAC,YAAY;CACtD,MAAM,cAAgC,OAAO,aAAa,WAAW,WAAW,CAAC;CACjF,MAAM,aAAa,QAAQ,QAAQ;CACnC,MAAM,EACJ,YAAY,sBACZ,WAAW,qBACX,WAAW,gBACX,UAAU,eACV,SAAS,mBACT,OAAO,YACP,GAAG,qBACD;CACJ,MAAM,gBAAgB,OAAO,wBAAwB,UAAU;CAC/D,cAAc,UAAU,wBAAwB;CAEhD,gBAAgB;EACd,IAAI,QAAQ,cAAc,UAAU;CACtC,GAAG,CAAC,MAAM,CAAC;CAEX,IAAI,QAAQ,OAAO;CAEnB,MAAM,eAAyD,UAAU;EACvE,CAAC,qBAAqB,QAAA,GAAW,KAAK;EACtC,UAAU,IAAI;CAChB;CAEA,MAAM,OACJ,qBAAC,OAAD;EACE,GAAI;EACJ,mBAAiB;EACjB,sBAAoB;EACf;EACC;EACN,GAAI,WACF;GACE,WAAW;GACX,OAAO;GACP,UAAU,OAAO;GACjB,eAAe,OAAO,eAAe,OAAO;GAC5C,CAAC,mBAAmB,SAAS,OAAO;GACpC,iBAAiB,OAAO,WAAW,OAAO;GAC1C,kBAAkB;GAClB,mBAAmB,OAAO;EAC5B,GACA,KAAK,YAAY,MAAM,YAAY,OAAO,eAAe,SAAS,GAClE;GACE,GAAG;GACH,GAAG,cAAc;GACjB,GAAG,cAAc;EACnB,CACF;EAvBF,UAAA;GAyBG,YACC,oBAAC,QAAD;IACE,eAAY;IACZ,GAAI,WAAW,CAAC,OAAO,IAAI,GAAG,YAAY,MAAM,cAAc,IAAI;IAElE,UAAA,oBAAC,MAAD;KAAM,MAAM,QAAQ,UAAU;KAAO,MAAM,iBAAiB,KAAK;KAAI,GAAI;IAAY,CAAA;GACjF,CAAA;GAER,qBAAC,OAAD;IACE,GAAI,WAAW,CAAC,OAAO,OAAO,GAAG,KAAK,YAAY,SAAS,YAAY,OAAO,GAAG;KAC/E,GAAG,cAAc;KACjB,GAAG,cAAc;IACnB,CAAC;IAJH,UAAA,CAMG,kBAAkB,KAAA,KAAa,kBAAkB,QAChD,oBAAC,OAAD;KACE,GAAI,WACF,CAAC,OAAO,OAAO,kBAAkB,OAAO,aAAa,GACrD,YAAY,OACZ,cAAc,KAChB;KAEC,UAAA;IACE,CAAA,GAEN,kBACC,oBAAC,OAAD;KACE,GAAI,WACF,CAAC,OAAO,WAAW,GACnB,YAAY,aACZ,cAAc,WAChB;KAEC,UAAA;IACE,CAAA,CAEJ;;GACJ,UACC,oBAAC,OAAD;IACE,GAAI,WACF,CAAC,OAAO,QAAQ,OAAO,aAAa,GACpC,YAAY,QACZ,cAAc,MAChB;IAEC,UAAA;GACE,CAAA;GAEN,cACC,oBAAC,UAAD;IACE,GAAI;IACJ,cAAY,iBAAiB,iBAAiB;IAC9C,UAAU;IACV,GAAI,WACF,CAAC,UAAU,MAAM,OAAO,KAAK,GAC7B,KAAK,YAAY,OAAO,cAAc,GACtC;KAAE,GAAG,cAAc;KAAO,GAAG;IAAW,CAC1C;IACA,MAAK;IACL,SAAS;IAER,UAAA,uBAAuB,aAAa,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;GAC1D,CAAA;EAEP;;CAGP,IAAI,CAAC,OAAO,OAAO;CAEnB,IAAI,cACF,OACE,qBAAC,OAAD;EACE,GAAI,WAAW,CAAC,OAAO,WAAW,WAAW,KAAK,GAAG,YAAY,WAAW;GAC1E,KAAK;GACL,GAAG,cAAc;EACnB,CAAC;EAJH,UAAA,CAMG,MACA,KACE;;CAIT,OACE,qBAAC,OAAD;EACE,GAAI,WACF;GACE,OAAO;GACP,WAAW;GACX,OAAO;GACP,UAAU,OAAO;GACjB,SAAS,OAAO;GAChB,wBAAwB;EAC1B,GACA,YAAY,WACZ,cAAc,SAChB;EAZF,UAAA,CAcG,MACD,oBAAC,OAAD;GACE,GAAI,WACF;IACE,OAAO;IACP,UAAU,OAAO;IACjB,eAAe,OAAO,KAAK,OAAO;GACpC,GACA,YAAY,OACZ,cAAc,KAChB;GAEA,UAAA,qBAAC,WAAD;IACE,MAAM;IACN,WAAW,UAAU,iBAAiB,MAAM,cAAc,IAAI;IAFhE,UAAA,CAIE,qBAAC,WAAD;KACE,GAAI,WACF;MACE;MACA,UAAU;MACV,OAAO;MACP,eAAe,OAAO,KAAK,OAAO;KACpC,GACA,KAAK,2BAA2B,YAAY,WAAW,GACvD,cAAc,WAChB;KAVF,UAAA,CAYE,oBAAC,cAAD;MACE,eAAY;MACZ,MAAM;MACN,GAAI,WACF,CAAC,OAAO,cAAc,GACtB,YAAY,gBACZ,cAAc,cAChB;KACD,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,MAAM,UAAU,eAAqB,CAAA,CACrC;IACT,CAAA,GAAA,oBAAC,OAAD;KACE,GAAI,WACF,CAAC,OAAO,YAAY,GACpB,YAAY,cACZ,cAAc,YAChB;KAEC,UAAA;IACE,CAAA,CACE;;EACN,CAAA,CACF;;AAET,CACF;AAEA,MAAM,cAAc"}

package/es/Alert/index.d.mts

@@ -1,3 +1,4 @@
-import { AlertProps } from "./type.mjs";
+import { AlertClassNames, AlertCloseConfig, AlertProps, AlertRef, AlertStyles, AlertType, AlertVariant } from "./type.mjs";
 import Alert from "./Alert.mjs";
-export { type AlertProps, Alert as default };
+import { alertStyles } from "./style.mjs";
+export { Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, alertStyles, Alert as default };

package/es/Alert/index.mjs

@@ -1 +1,3 @@
-export { default } from "./Alert.mjs";
+import { alertStyles } from "./style.mjs";
+import Alert from "./Alert.mjs";
+export { Alert, alertStyles, Alert as default };

package/es/Alert/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/Alert/marker.stylex.ts
+const alertSummaryMarker = {
+	lbli2s53: "lbli2s53",
+	$$css: true
+};
+//#endregion
+export { alertSummaryMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Alert/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Alert/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const alertSummaryMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,qBAAqB;CAChC,UAAU;CACV,OAAO;AACT"}

package/es/Alert/style.d.mts

@@ -0,0 +1,235 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/Alert/style.d.ts
+export declare const styles: Readonly<{
+  readonly action: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "auto">;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 32>;
+  }>;
+  readonly banner: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
+  }>;
+  readonly centered: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+  }>;
+  readonly close: Readonly<{
+    readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "currentcolor">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "medium">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `color 160ms ${string}, background-color 160ms ${string}, scale 160ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.45 | null>;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly scale: stylex.StyleXClassNameFor<"scale", 1 | 0.96>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0s" | null>;
+    readonly height: stylex.StyleXClassNameFor<"height", 32>;
+    readonly width: stylex.StyleXClassNameFor<"width", 32>;
+    readonly '::after': stylex.StyleXClassNameFor<"::after", {
+      readonly content: "''";
+      readonly insetBlockStart: "50%";
+      readonly insetInlineStart: "50%";
+      readonly position: "absolute";
+      readonly translate: "-50% -50%";
+      readonly height: 40;
+      readonly width: 40;
+    }>;
+  }>;
+  readonly colorfulText: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--lobe-alert-accent)">;
+  }>;
+  readonly container: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+  }>;
+  readonly content: Readonly<{
+    readonly flex: stylex.StyleXClassNameFor<"flex", "1">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+  }>;
+  readonly description: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 13>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "20px">;
+    readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    readonly textWrap: stylex.StyleXClassNameFor<"textWrap", "pretty">;
+  }>;
+  readonly detailed: Readonly<{
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 12>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 14>;
+  }>;
+  readonly extra: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
+  }>;
+  readonly extraBanner: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+  }>;
+  readonly extraContent: Readonly<{
+    readonly padding: stylex.StyleXClassNameFor<"padding", 8>;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly marginInline: stylex.StyleXClassNameFor<"marginInline", 12>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 12>;
+    readonly marginBlockEnd: stylex.StyleXClassNameFor<"marginBlockEnd", 12>;
+    readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", 0>;
+  }>;
+  readonly extraHeader: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+    readonly gap: stylex.StyleXClassNameFor<"gap", 6>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 8>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 14>;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `color 160ms ${string}, background-color 160ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
+    readonly borderBlockStartStyle: stylex.StyleXClassNameFor<"borderBlockStartStyle", "solid">;
+    readonly borderBlockStartWidth: stylex.StyleXClassNameFor<"borderBlockStartWidth", 1>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 12>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 500>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "20px">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 40>;
+    readonly '::marker': stylex.StyleXClassNameFor<"::marker", {
+      readonly content: "''";
+      readonly display: "none";
+    }>;
+  }>;
+  readonly extraHeaderPlain: Readonly<{
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+    readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
+    readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", 6>;
+  }>;
+  readonly extraIndicator: Readonly<{
+    readonly transition: stylex.StyleXClassNameFor<"transition", `transform 160ms ${string}`>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly transform: stylex.StyleXClassNameFor<"transform", "rotate(90deg)" | null>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0s" | null>;
+  }>;
+  readonly extraPlain: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+  }>;
+  readonly glass: Readonly<{
+    readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "saturate(150%) blur(10px)">;
+  }>;
+  readonly icon: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--lobe-alert-accent)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly height: stylex.StyleXClassNameFor<"height", 20>;
+  }>;
+  readonly integrated: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+  }>;
+  readonly neutralText: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+  }>;
+  readonly outlined: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${string}`>;
+  }>;
+  readonly plain: Readonly<{
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 2>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
+  }>;
+  readonly root: Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "currentcolor">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "medium">;
+    readonly gap: stylex.StyleXClassNameFor<"gap", 10>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 10>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "flex-start">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--lobe-alert-background)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--lobe-alert-soft-border)">;
+    readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "row">;
+    readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap" | null>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+  }>;
+  readonly soft: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--lobe-alert-background)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--lobe-alert-soft-border)">;
+  }>;
+  readonly title: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 500>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "20px">;
+    readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    readonly textWrap: stylex.StyleXClassNameFor<"textWrap", "pretty">;
+  }>;
+  readonly titleDetailed: Readonly<{
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 500>;
+  }>;
+  readonly toneError: Readonly<{
+    readonly '--lobe-alert-accent': stylex.StyleXClassNameFor<"--lobe-alert-accent", string>;
+    readonly '--lobe-alert-background': stylex.StyleXClassNameFor<"--lobe-alert-background", `color-mix(in srgb, ${string} 5%, ${string})`>;
+    readonly '--lobe-alert-soft-border': stylex.StyleXClassNameFor<"--lobe-alert-soft-border", `color-mix(in srgb, ${string} 14%, transparent)`>;
+  }>;
+  readonly toneInfo: Readonly<{
+    readonly '--lobe-alert-accent': stylex.StyleXClassNameFor<"--lobe-alert-accent", string>;
+    readonly '--lobe-alert-background': stylex.StyleXClassNameFor<"--lobe-alert-background", `color-mix(in srgb, ${string} 5%, ${string})`>;
+    readonly '--lobe-alert-soft-border': stylex.StyleXClassNameFor<"--lobe-alert-soft-border", `color-mix(in srgb, ${string} 14%, transparent)`>;
+  }>;
+  readonly toneSecondary: Readonly<{
+    readonly '--lobe-alert-accent': stylex.StyleXClassNameFor<"--lobe-alert-accent", string>;
+    readonly '--lobe-alert-background': stylex.StyleXClassNameFor<"--lobe-alert-background", `color-mix(in srgb, ${string} 4%, ${string})`>;
+    readonly '--lobe-alert-soft-border': stylex.StyleXClassNameFor<"--lobe-alert-soft-border", `color-mix(in srgb, ${string} 12%, transparent)`>;
+  }>;
+  readonly toneSuccess: Readonly<{
+    readonly '--lobe-alert-accent': stylex.StyleXClassNameFor<"--lobe-alert-accent", string>;
+    readonly '--lobe-alert-background': stylex.StyleXClassNameFor<"--lobe-alert-background", `color-mix(in srgb, ${string} 5%, ${string})`>;
+    readonly '--lobe-alert-soft-border': stylex.StyleXClassNameFor<"--lobe-alert-soft-border", `color-mix(in srgb, ${string} 14%, transparent)`>;
+  }>;
+  readonly toneWarning: Readonly<{
+    readonly '--lobe-alert-accent': stylex.StyleXClassNameFor<"--lobe-alert-accent", string>;
+    readonly '--lobe-alert-background': stylex.StyleXClassNameFor<"--lobe-alert-background", `color-mix(in srgb, ${string} 5%, ${string})`>;
+    readonly '--lobe-alert-soft-border': stylex.StyleXClassNameFor<"--lobe-alert-soft-border", `color-mix(in srgb, ${string} 14%, transparent)`>;
+  }>;
+  readonly unifiedRoot: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
+  }>;
+  readonly wrappedAction: Readonly<{
+    readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", -2 | null>;
+    readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "auto" | 30>;
+    readonly order: stylex.StyleXClassNameFor<"order", 4 | null>;
+    readonly width: stylex.StyleXClassNameFor<"width", "calc(100% - 30px)" | null>;
+  }>;
+}>;
+export declare const alertStyles: Record<keyof typeof styles, string>;
+//#endregion
+//# sourceMappingURL=style.d.mts.map