@bonprix-ds/react-alert 1.0.8 → 1.1.1

package/dist/index.js

@@ -1,110 +1,3 @@
-"use client";
-import "react";
-import { tv as e } from "tailwind-variants";
-import t from "@bonprix-ds/react-icon";
-import n from "@bonprix-ds/react-icon-button";
-import r from "@bonprix-ds/react-typography";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/Alert.tsx
-var o = e({
-	slots: {
-		root: "preflight m-0 flex justify-between items-start p-5 rounded gap-4 [word-break:break-word]",
-		iconAndContent: "flex gap-2",
-		content: "typography-body1 text-clr-on-bg-high gap-0.5 pt-0.5",
-		title: "",
-		icon: ""
-	},
-	variants: {
-		status: {
-			success: {
-				root: "bg-clr-bg-success",
-				title: "text-clr-fg-success",
-				icon: "fill-clr-fg-success"
-			},
-			info: {
-				root: "bg-clr-bg-info",
-				title: "text-clr-fg-info",
-				icon: "fill-clr-fg-info"
-			},
-			warning: {
-				root: "bg-clr-bg-alert",
-				title: "text-clr-fg-alert",
-				icon: "fill-clr-fg-alert"
-			},
-			error: {
-				root: "bg-clr-bg-error",
-				title: "text-clr-fg-error",
-				icon: "fill-clr-fg-error"
-			}
-		},
-		alertVariant: {
-			primary: { title: "text-clr-on-bg-high" },
-			secondary: { root: "p-0 rounded-none bg-transparent" }
-		}
-	}
-}), s = {
-	warning: {
-		icon: "alert",
-		label: "Warnung"
-	},
-	info: {
-		icon: "hint",
-		label: "Hinweis"
-	},
-	success: {
-		icon: "success",
-		label: "Erfolg"
-	},
-	error: {
-		icon: "error",
-		label: "Fehler"
-	}
-}, c = ({ isOpen: e, variant: c = "primary", status: l, title: u, children: d, showCloseIcon: f = !0, onClose: p = () => null, nonCritical: m = !1, titleTag: h = "h2" }) => {
-	let { root: g, content: _, title: v, iconAndContent: y, icon: b } = o({
-		status: l,
-		alertVariant: c
-	});
-	if (!e) return null;
-	let x = s[l].icon, S = s[l].label;
-	return /* @__PURE__ */ a("div", {
-		className: g(),
-		role: m ? void 0 : "alert",
-		"aria-label": S,
-		"data-bpds": "alert",
-		"data-bpds-status": l,
-		"data-bpds-variant": c,
-		children: [/* @__PURE__ */ a("div", {
-			className: y(),
-			children: [/* @__PURE__ */ i(t, {
-				variant: x,
-				className: b()
-			}), /* @__PURE__ */ a("div", {
-				className: _(),
-				children: [u && /* @__PURE__ */ i("div", {
-					className: v(),
-					children: /* @__PURE__ */ i(r, {
-						variant: "h6",
-						color: "inherit",
-						component: h,
-						children: u
-					})
-				}), d]
-			})]
-		}), f && /* @__PURE__ */ i(n, {
-			variant: "tertiary",
-			icon: "closer",
-			size: "small",
-			label: "Schließen",
-			onClick: p
-		})]
-	});
-}, l = [
-	"success",
-	"info",
-	"warning",
-	"error"
-], u = ["primary", "secondary"];
-//#endregion
-export { c as default, l as levels, u as values };
-
-//# sourceMappingURL=index.js.map
+import e from "./src/Alert.js";
+import { levels as t, values as n } from "./src/constants.js";
+export { e as default, t as levels, n as values };

package/dist/src/Alert.d.ts

@@ -2,14 +2,12 @@ import React from "react";
 import { levels, values } from "./constants";
 type StatusLevel = (typeof levels)[number];
 type VariantValue = (typeof values)[number];
-export interface Props {
-    /**  Toggles the visibility of the component. Must be used in conjunction with `onClose`. */
-    isOpen: boolean;
+interface BaseProps {
     /** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/
     status: StatusLevel;
     /** The message of the alert. */
     children: string;
-    /** Callback, which is triggered when the visibility of the component (opened/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */
+    /** Callback, which is triggered when the visibility of the component (open/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */
     onClose?: () => void;
     /**  Variant of the alert. Depends on the prominence level you require. */
     variant?: VariantValue;
@@ -22,5 +20,20 @@ export interface Props {
     /** If `title` is used, you can define the used header element. */
     titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
-declare const Alert: ({ isOpen, variant, status, title, children, showCloseIcon, onClose, nonCritical, titleTag, }: Props) => React.JSX.Element | null;
+type OpenProps = BaseProps & {
+    /** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */
+    open: boolean;
+    /** @deprecated [is-open-prop] Use `open` instead. */
+    isOpen?: never;
+};
+type DeprecatedOpenProps = BaseProps & {
+    open?: never;
+    /**
+     * Toggles the visibility of the component. Must be used in conjunction with `onClose`.
+     * @deprecated [is-open-prop] Use `open` instead.
+     */
+    isOpen: boolean;
+};
+export type Props = DeprecatedOpenProps | OpenProps;
+declare const Alert: ({ open, isOpen, variant, status, title, children, showCloseIcon, onClose, nonCritical, titleTag: TitleTag, }: Props) => React.JSX.Element | null;
 export default Alert;

package/dist/src/Alert.js

@@ -0,0 +1,101 @@
+"use client";
+import "react";
+import { tv as e } from "tailwind-variants";
+import t from "@bonprix-ds/react-icon-button";
+import { AlertIcon as n, CloserIcon as r, ErrorIcon as i, HintIcon as a, SuccessIcon as o } from "@bonprix-ds/react-icon/icons";
+import { warnDeprecated as s } from "@bonprix-ds/utils/deprecation";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/Alert.tsx
+var u = e({
+	slots: {
+		root: "preflight m-0 flex items-start justify-between gap-4 rounded p-5 [word-break:break-word]",
+		iconAndContent: "flex gap-2",
+		content: "typography-body1 gap-0.5 pt-0.5 text-clr-on-bg-high",
+		title: "",
+		icon: ""
+	},
+	variants: {
+		status: {
+			success: {
+				root: "bg-clr-bg-success",
+				title: "text-clr-fg-success",
+				icon: "fill-clr-fg-success"
+			},
+			info: {
+				root: "bg-clr-bg-info",
+				title: "text-clr-fg-info",
+				icon: "fill-clr-fg-info"
+			},
+			warning: {
+				root: "bg-clr-bg-alert",
+				title: "text-clr-fg-alert",
+				icon: "fill-clr-fg-alert"
+			},
+			error: {
+				root: "bg-clr-bg-error",
+				title: "text-clr-fg-error",
+				icon: "fill-clr-fg-error"
+			}
+		},
+		alertVariant: {
+			primary: { title: "text-clr-on-bg-high" },
+			secondary: { root: "rounded-none bg-transparent p-0" }
+		}
+	}
+}), d = {
+	warning: {
+		icon: n,
+		label: "Warnung"
+	},
+	info: {
+		icon: a,
+		label: "Hinweis"
+	},
+	success: {
+		icon: o,
+		label: "Erfolg"
+	},
+	error: {
+		icon: i,
+		label: "Fehler"
+	}
+}, f = ({ open: e, isOpen: n, variant: i = "primary", status: a, title: o, children: f, showCloseIcon: p = !0, onClose: m = () => null, nonCritical: h = !1, titleTag: g = "h2" }) => {
+	n !== void 0 && s("is-open-prop");
+	let { root: _, content: v, title: y, iconAndContent: b, icon: x } = u({
+		status: a,
+		alertVariant: i
+	});
+	if (!(e ?? n)) return null;
+	let S = d[a].icon, C = d[a].label;
+	return /* @__PURE__ */ l("div", {
+		className: _(),
+		role: h ? void 0 : "alert",
+		"aria-label": C,
+		"data-bpds": "alert",
+		"data-bpds-status": a,
+		"data-bpds-variant": i,
+		children: [/* @__PURE__ */ l("div", {
+			className: b(),
+			children: [/* @__PURE__ */ c(S, { className: x() }), /* @__PURE__ */ l("div", {
+				className: v(),
+				children: [o && /* @__PURE__ */ c("div", {
+					className: y(),
+					children: /* @__PURE__ */ c(g, {
+						className: "typography-h6 my-0 text-start text-inherit",
+						children: o
+					})
+				}), f]
+			})]
+		}), p && /* @__PURE__ */ c(t, {
+			variant: "tertiary",
+			icon: /* @__PURE__ */ c(r, {}),
+			size: "small",
+			label: "Schließen",
+			onClick: m
+		})]
+	});
+};
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=Alert.js.map

package/dist/src/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["IconButton","generateClasses","tv","alertVariants","AlertIcon","HintIcon","SuccessIcon","ErrorIcon","Alert","TitleTag","isOpen","warnDeprecated","titleStyle","variant","open","StatusIcon","status","statusAriaLabel","root","nonCritical","iconAndContent","icon","content","title","children","showCloseIcon","CloserIcon","onClose"],"sources":["../../src/Alert.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport { AlertIcon, CloserIcon, ErrorIcon, HintIcon, SuccessIcon } from \"@bonprix-ds/react-icon/icons\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport { levels, values } from \"./constants\";\n\nconst generateClasses = tv({\n  slots: {\n    // `word-break` not `overflow-wrap`: only the legacy `break-word` value also relaxes the\n    // content-based minimum size of the flex items below, so the word wraps instead of widening them.\n    root: \"preflight m-0 flex items-start justify-between gap-4 rounded p-5 [word-break:break-word]\",\n    iconAndContent: \"flex gap-2\",\n    content: \"typography-body1 gap-0.5 pt-0.5 text-clr-on-bg-high\",\n    title: \"\",\n    icon: \"\",\n  },\n  variants: {\n    status: {\n      success: {\n        root: \"bg-clr-bg-success\",\n        title: \"text-clr-fg-success\",\n        icon: \"fill-clr-fg-success\",\n      },\n      info: {\n        root: \"bg-clr-bg-info\",\n        title: \"text-clr-fg-info\",\n        icon: \"fill-clr-fg-info\",\n      },\n      warning: {\n        root: \"bg-clr-bg-alert\",\n        title: \"text-clr-fg-alert\",\n        icon: \"fill-clr-fg-alert\",\n      },\n      error: {\n        root: \"bg-clr-bg-error\",\n        title: \"text-clr-fg-error\",\n        icon: \"fill-clr-fg-error\",\n      },\n    },\n    alertVariant: {\n      primary: {\n        title: \"text-clr-on-bg-high\",\n      },\n      secondary: {\n        root: \"rounded-none bg-transparent p-0\",\n      },\n    },\n  },\n});\n\ntype StatusLevel = (typeof levels)[number];\ntype VariantValue = (typeof values)[number];\n\ninterface BaseProps {\n  /** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/\n  status: StatusLevel;\n  /** The message of the alert. */\n  children: string;\n  /** Callback, which is triggered when the visibility of the component (open/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */\n  onClose?: () => void;\n  /**  Variant of the alert. Depends on the prominence level you require. */\n  variant?: VariantValue;\n  /** An optional title of the alert. The titel sums up the message briefly. */\n  title?: string;\n  /** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */\n  showCloseIcon?: boolean;\n  /** Removes role=\"alert\" from component if set to `true`. The alert content is not read by assistive technologies right away then. */\n  nonCritical?: boolean;\n  /** If `title` is used, you can define the used header element. */\n  titleTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\ntype OpenProps = BaseProps & {\n  /** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */\n  open: boolean;\n  /** @deprecated [is-open-prop] Use `open` instead. */\n  isOpen?: never;\n};\n\ntype DeprecatedOpenProps = BaseProps & {\n  open?: never;\n  /**\n   * Toggles the visibility of the component. Must be used in conjunction with `onClose`.\n   * @deprecated [is-open-prop] Use `open` instead.\n   */\n  isOpen: boolean;\n};\n\nexport type Props = DeprecatedOpenProps | OpenProps;\n\ninterface AlertMap {\n  icon: React.ComponentType<{ className?: string }>;\n  label: string;\n}\n\nconst alertVariants: Record<StatusLevel, AlertMap> = {\n  warning: {\n    icon: AlertIcon,\n    label: \"Warnung\",\n  },\n  info: {\n    icon: HintIcon,\n    label: \"Hinweis\",\n  },\n  success: {\n    icon: SuccessIcon,\n    label: \"Erfolg\",\n  },\n  error: {\n    icon: ErrorIcon,\n    label: \"Fehler\",\n  },\n};\n\nconst Alert = ({\n  open,\n  isOpen,\n  variant = \"primary\",\n  status,\n  title,\n  children,\n  showCloseIcon = true,\n  onClose = () => null,\n  nonCritical = false,\n  titleTag: TitleTag = \"h2\",\n}: Props) => {\n  if (isOpen !== undefined) warnDeprecated(\"is-open-prop\");\n  const { root, content, title: titleStyle, iconAndContent, icon } = generateClasses({ status, alertVariant: variant });\n  if (!(open ?? isOpen)) return null;\n\n  const StatusIcon = alertVariants[status].icon;\n  const statusAriaLabel = alertVariants[status].label;\n  const closeLabel = \"Schließen\";\n\n  return (\n    <div\n      className={root()}\n      role={nonCritical ? undefined : \"alert\"}\n      aria-label={statusAriaLabel}\n      data-bpds=\"alert\"\n      data-bpds-status={status}\n      data-bpds-variant={variant}\n    >\n      <div className={iconAndContent()}>\n        <StatusIcon className={icon()} />\n        <div className={content()}>\n          {title && (\n            <div className={titleStyle()}>\n              <TitleTag className=\"typography-h6 my-0 text-start text-inherit\">{title}</TitleTag>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n      {showCloseIcon && <IconButton variant=\"tertiary\" icon={<CloserIcon />} size=\"small\" label={closeLabel} onClick={onClose} />}\n    </div>\n  );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAWA,IAAMC,IAAkBC,EAAG;CACzB,OAAO;EAGL,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,MAAM;IACJ,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,OAAO;IACL,MAAM;IACN,OAAO;IACP,MAAM;GACR;EACF;EACA,cAAc;GACZ,SAAS,EACP,OAAO,sBACT;GACA,WAAW,EACT,MAAM,kCACR;EACF;CACF;AACF,CAAC,GA+CKC,IAA+C;CACnD,SAAS;EACP,MAAMC;EACN,OAAO;CACT;CACA,MAAM;EACJ,MAAMC;EACN,OAAO;CACT;CACA,SAAS;EACP,MAAMC;EACN,OAAO;CACT;CACA,OAAO;EACL,MAAMC;EACN,OAAO;CACT;AACF,GAEMC,KAAS,EACb,SACA,WACA,aAAU,WACV,WACA,UACA,aACA,mBAAgB,IAChB,mBAAgB,MAChB,iBAAc,IACd,UAAUC,IAAW,WACV;CACX,AAAIC,MAAW,KAAA,KAAWC,EAAe,cAAc;CACvD,IAAM,EAAE,SAAM,YAAS,OAAOC,GAAY,mBAAgB,YAASX,EAAgB;EAAE;EAAQ,cAAcY;CAAQ,CAAC;CACpH,IAAI,EAAEC,KAAQJ,IAAS,OAAO;CAE9B,IAAMK,IAAaZ,EAAca,EAAO,CAAC,MACnCC,IAAkBd,EAAca,EAAO,CAAC;CAG9C,OACE,kBAAC,OAAD;EACE,WAAWE,EAAK;EAChB,MAAMC,IAAc,KAAA,IAAY;EAChC,cAAYF;EACZ,aAAU;EACV,oBAAkBD;EAClB,qBAAmBH;EANrB,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAWO,EAAe;GAA/B,UAAA,CACE,kBAACL,GAAD,EAAY,WAAWM,EAAK,EAAI,CAAA,GAChC,kBAAC,OAAD;IAAK,WAAWC,EAAQ;IAAxB,UAAA,CACGC,KACC,kBAAC,OAAD;KAAK,WAAWX,EAAW;KACzB,UAAA,kBAACH,GAAD;MAAU,WAAU;MAA8C,UAAAc;KAAgB,CAAA;IAC/E,CAAA,GAENC,CACE;GACF,CAAA,CAAA;EACJ,CAAA,GAAAC,KAAiB,kBAACzB,GAAD;GAAY,SAAQ;GAAW,MAAM,kBAAC0B,GAAD,CAAa,CAAA;GAAG,MAAK;GAAQ,OAAO;GAAY,SAASC;EAAU,CAAA,CACvH;;AAET"}

package/dist/src/constants.js

@@ -0,0 +1,11 @@
+//#region src/constants.ts
+var e = [
+	"success",
+	"info",
+	"warning",
+	"error"
+], t = ["primary", "secondary"];
+//#endregion
+export { e as levels, t as values };
+
+//# sourceMappingURL=constants.js.map

package/dist/src/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["levels","values"],"sources":["../../src/constants.ts"],"sourcesContent":["export const levels = [\"success\", \"info\", \"warning\", \"error\"] as const;\nexport const values = [\"primary\", \"secondary\"] as const;\n"],"mappings":";AAAA,IAAaA,IAAS;CAAC;CAAW;CAAQ;CAAW;AAAO,GAC/CC,IAAS,CAAC,WAAW,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-alert",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "description": "Alert component, implemented in React, for the Bonprix Design System.",
   "keywords": [],
   "license": "UNLICENSED",
@@ -32,20 +32,21 @@
     "provenance": true
   },
   "dependencies": {
-    "@bonprix-ds/react-icon": "1.2.1",
-    "@bonprix-ds/react-icon-button": "1.2.1",
-    "@bonprix-ds/react-typography": "1.0.4",
-    "@bonprix-ds/utils": "0.2.2"
+    "@bonprix-ds/react-icon-button": "1.2.3",
+    "@bonprix-ds/utils": "0.4.0",
+    "@bonprix-ds/react-icon": "1.3.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "vite": "8.3.0"
+    "vite": "8.3.2",
+    "vitest": "4.1.11",
+    "@bonprix-ds/vite-config": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-variants": "0.3.1"
   },
   "scripts": {

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/Alert.tsx","../src/constants.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\n\nimport { levels, values } from \"./constants\";\n\nconst generateClasses = tv({\n  slots: {\n    // `word-break` not `overflow-wrap`: only the legacy `break-word` value also relaxes the\n    // content-based minimum size of the flex items below, so the word wraps instead of widening them.\n    root: \"preflight m-0 flex justify-between items-start p-5 rounded gap-4 [word-break:break-word]\",\n    iconAndContent: \"flex gap-2\",\n    content: \"typography-body1 text-clr-on-bg-high gap-0.5 pt-0.5\",\n    title: \"\",\n    icon: \"\",\n  },\n  variants: {\n    status: {\n      success: {\n        root: \"bg-clr-bg-success\",\n        title: \"text-clr-fg-success\",\n        icon: \"fill-clr-fg-success\",\n      },\n      info: {\n        root: \"bg-clr-bg-info\",\n        title: \"text-clr-fg-info\",\n        icon: \"fill-clr-fg-info\",\n      },\n      warning: {\n        root: \"bg-clr-bg-alert\",\n        title: \"text-clr-fg-alert\",\n        icon: \"fill-clr-fg-alert\",\n      },\n      error: {\n        root: \"bg-clr-bg-error\",\n        title: \"text-clr-fg-error\",\n        icon: \"fill-clr-fg-error\",\n      },\n    },\n    alertVariant: {\n      primary: {\n        title: \"text-clr-on-bg-high\",\n      },\n      secondary: {\n        root: \"p-0 rounded-none bg-transparent\",\n      },\n    },\n  },\n});\n\ntype StatusLevel = (typeof levels)[number];\ntype VariantValue = (typeof values)[number];\n\nexport interface Props {\n  /**  Toggles the visibility of the component. Must be used in conjunction with `onClose`. */\n  isOpen: boolean;\n  /** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/\n  status: StatusLevel;\n  /** The message of the alert. */\n  children: string;\n  /** Callback, which is triggered when the visibility of the component (opened/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */\n  onClose?: () => void;\n  /**  Variant of the alert. Depends on the prominence level you require. */\n  variant?: VariantValue;\n  /** An optional title of the alert. The titel sums up the message briefly. */\n  title?: string;\n  /** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */\n  showCloseIcon?: boolean;\n  /** Removes role=\"alert\" from component if set to `true`. The alert content is not read by assistive technologies right away then. */\n  nonCritical?: boolean;\n  /** If `title` is used, you can define the used header element. */\n  titleTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\ninterface AlertMap {\n  icon: IconType;\n  label: string;\n}\n\nconst alertVariants: Record<StatusLevel, AlertMap> = {\n  warning: {\n    icon: \"alert\",\n    label: \"Warnung\",\n  },\n  info: {\n    icon: \"hint\",\n    label: \"Hinweis\",\n  },\n  success: {\n    icon: \"success\",\n    label: \"Erfolg\",\n  },\n  error: {\n    icon: \"error\",\n    label: \"Fehler\",\n  },\n};\n\nconst Alert = ({\n  isOpen,\n  variant = \"primary\",\n  status,\n  title,\n  children,\n  showCloseIcon = true,\n  onClose = () => null,\n  nonCritical = false,\n  titleTag = \"h2\",\n}: Props) => {\n  const { root, content, title: titleStyle, iconAndContent, icon } = generateClasses({ status, alertVariant: variant });\n  if (!isOpen) return null;\n\n  const iconVariant = alertVariants[status].icon;\n  const statusAriaLabel = alertVariants[status].label;\n  const closeLabel = \"Schließen\";\n\n  return (\n    <div\n      className={root()}\n      role={nonCritical ? undefined : \"alert\"}\n      aria-label={statusAriaLabel}\n      data-bpds=\"alert\"\n      data-bpds-status={status}\n      data-bpds-variant={variant}\n    >\n      <div className={iconAndContent()}>\n        <Icon variant={iconVariant} className={icon()} />\n        <div className={content()}>\n          {title && (\n            <div className={titleStyle()}>\n              <Typography variant=\"h6\" color=\"inherit\" component={titleTag}>\n                {title}\n              </Typography>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n      {showCloseIcon && <IconButton variant=\"tertiary\" icon=\"closer\" size=\"small\" label={closeLabel} onClick={onClose} />}\n    </div>\n  );\n};\n\nexport default Alert;\n","export const levels = [\"success\", \"info\", \"warning\", \"error\"] as const;\nexport const values = [\"primary\", \"secondary\"] as const;\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAkB,EAAG;CACzB,OAAO;EAGL,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,MAAM;IACJ,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,OAAO;IACL,MAAM;IACN,OAAO;IACP,MAAM;GACR;EACF;EACA,cAAc;GACZ,SAAS,EACP,OAAO,sBACT;GACA,WAAW,EACT,MAAM,kCACR;EACF;CACF;AACF,CAAC,GA+BK,IAA+C;CACnD,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,MAAM;EACJ,MAAM;EACN,OAAO;CACT;CACA,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;AACF,GAEM,KAAS,EACb,WACA,aAAU,WACV,WACA,UACA,aACA,mBAAgB,IAChB,mBAAgB,MAChB,iBAAc,IACd,cAAW,WACA;CACX,IAAM,EAAE,SAAM,YAAS,OAAO,GAAY,mBAAgB,YAAS,EAAgB;EAAE;EAAQ,cAAc;CAAQ,CAAC;CACpH,IAAI,CAAC,GAAQ,OAAO;CAEpB,IAAM,IAAc,EAAc,EAAO,CAAC,MACpC,IAAkB,EAAc,EAAO,CAAC;CAG9C,OACE,kBAAC,OAAD;EACE,WAAW,EAAK;EAChB,MAAM,IAAc,KAAA,IAAY;EAChC,cAAY;EACZ,aAAU;EACV,oBAAkB;EAClB,qBAAmB;EANrB,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAW,EAAe;GAA/B,UAAA,CACE,kBAAC,GAAD;IAAM,SAAS;IAAa,WAAW,EAAK;GAAI,CAAA,GAChD,kBAAC,OAAD;IAAK,WAAW,EAAQ;IAAxB,UAAA,CACG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAW;KACzB,UAAA,kBAAC,GAAD;MAAY,SAAQ;MAAK,OAAM;MAAU,WAAW;MACjD,UAAA;KACS,CAAA;IACT,CAAA,GAEN,CACE;GACF,CAAA,CAAA;EACJ,CAAA,GAAA,KAAiB,kBAAC,GAAD;GAAY,SAAQ;GAAW,MAAK;GAAS,MAAK;GAAQ,OAAO;GAAY,SAAS;EAAU,CAAA,CAC/G;;AAET,GClJa,IAAS;CAAC;CAAW;CAAQ;CAAW;AAAO,GAC/C,IAAS,CAAC,WAAW,WAAW"}