kdpa-components 0.0.12 → 0.0.13

package/dist/KdpaAlertTitle-7f368371.js

@@ -0,0 +1,923 @@
+import { a as I, c as i, n as ro, o as so, g as S, b as j, s as C, p as h, u as B, j as a, f as M, P as e, i as R, B as lo, q as W, m as ao, l as io, t as L, v as V } from "./ButtonBase-5ef58bca.js";
+import * as $ from "react";
+import { forwardRef as co } from "react";
+const po = ["sx"], uo = (o) => {
+  var t, n;
+  const s = {
+    systemProps: {},
+    otherProps: {}
+  }, r = (t = o == null || (n = o.theme) == null ? void 0 : n.unstable_sxConfig) != null ? t : ro;
+  return Object.keys(o).forEach((l) => {
+    r[l] ? s.systemProps[l] = o[l] : s.otherProps[l] = o[l];
+  }), s;
+};
+function go(o) {
+  const {
+    sx: t
+  } = o, n = I(o, po), {
+    systemProps: s,
+    otherProps: r
+  } = uo(n);
+  let l;
+  return Array.isArray(t) ? l = [s, ...t] : typeof t == "function" ? l = (...c) => {
+    const p = t(...c);
+    return so(p) ? i({}, s, p) : s;
+  } : l = i({}, s, t), i({}, r, {
+    sx: l
+  });
+}
+function fo(o) {
+  return S("MuiSvgIcon", o);
+}
+j("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+const ho = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], vo = (o) => {
+  const {
+    color: t,
+    fontSize: n,
+    classes: s
+  } = o, r = {
+    root: ["root", t !== "inherit" && `color${h(t)}`, `fontSize${h(n)}`]
+  };
+  return R(r, fo, s);
+}, mo = C("svg", {
+  name: "MuiSvgIcon",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.color !== "inherit" && t[`color${h(n.color)}`], t[`fontSize${h(n.fontSize)}`]];
+  }
+})(({
+  theme: o,
+  ownerState: t
+}) => {
+  var n, s, r, l, c, p, d, v, u, g, f, m, b, y, x, T, N;
+  return {
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    fill: "currentColor",
+    flexShrink: 0,
+    transition: (n = o.transitions) == null || (s = n.create) == null ? void 0 : s.call(n, "fill", {
+      duration: (r = o.transitions) == null || (l = r.duration) == null ? void 0 : l.shorter
+    }),
+    fontSize: {
+      inherit: "inherit",
+      small: ((c = o.typography) == null || (p = c.pxToRem) == null ? void 0 : p.call(c, 20)) || "1.25rem",
+      medium: ((d = o.typography) == null || (v = d.pxToRem) == null ? void 0 : v.call(d, 24)) || "1.5rem",
+      large: ((u = o.typography) == null || (g = u.pxToRem) == null ? void 0 : g.call(u, 35)) || "2.1875rem"
+    }[t.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (f = (m = (o.vars || o).palette) == null || (b = m[t.color]) == null ? void 0 : b.main) != null ? f : {
+      action: (y = (o.vars || o).palette) == null || (x = y.action) == null ? void 0 : x.active,
+      disabled: (T = (o.vars || o).palette) == null || (N = T.action) == null ? void 0 : N.disabled,
+      inherit: void 0
+    }[t.color]
+  };
+}), P = /* @__PURE__ */ $.forwardRef(function(t, n) {
+  const s = B({
+    props: t,
+    name: "MuiSvgIcon"
+  }), {
+    children: r,
+    className: l,
+    color: c = "inherit",
+    component: p = "svg",
+    fontSize: d = "medium",
+    htmlColor: v,
+    inheritViewBox: u = !1,
+    titleAccess: g,
+    viewBox: f = "0 0 24 24"
+  } = s, m = I(s, ho), b = i({}, s, {
+    color: c,
+    component: p,
+    fontSize: d,
+    instanceFontSize: t.fontSize,
+    inheritViewBox: u,
+    viewBox: f
+  }), y = {};
+  u || (y.viewBox = f);
+  const x = vo(b);
+  return /* @__PURE__ */ a.jsxs(mo, i({
+    as: p,
+    className: M(x.root, l),
+    focusable: "false",
+    color: v,
+    "aria-hidden": g ? void 0 : !0,
+    role: g ? "img" : void 0,
+    ref: n
+  }, y, m, {
+    ownerState: b,
+    children: [r, g ? /* @__PURE__ */ a.jsx("title", {
+      children: g
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (P.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Node passed into the SVG element.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: e.oneOfType([e.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: e.oneOfType([e.oneOf(["inherit", "large", "medium", "small"]), e.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: e.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: e.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: e.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: e.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: e.string
+});
+P.muiName = "SvgIcon";
+const U = P;
+function z(o, t) {
+  function n(s, r) {
+    return /* @__PURE__ */ a.jsx(U, i({
+      "data-testid": `${t}Icon`,
+      ref: r
+    }, s, {
+      children: o
+    }));
+  }
+  return process.env.NODE_ENV !== "production" && (n.displayName = `${t}Icon`), n.muiName = U.muiName, /* @__PURE__ */ $.memo(/* @__PURE__ */ $.forwardRef(n));
+}
+function yo(o) {
+  return S("MuiAlert", o);
+}
+const bo = j("MuiAlert", ["root", "action", "icon", "message", "filled", "filledSuccess", "filledInfo", "filledWarning", "filledError", "outlined", "outlinedSuccess", "outlinedInfo", "outlinedWarning", "outlinedError", "standard", "standardSuccess", "standardInfo", "standardWarning", "standardError"]), D = bo;
+function xo(o) {
+  return S("MuiIconButton", o);
+}
+const $o = j("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]), Co = $o, To = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"], Ao = (o) => {
+  const {
+    classes: t,
+    disabled: n,
+    color: s,
+    edge: r,
+    size: l
+  } = o, c = {
+    root: ["root", n && "disabled", s !== "default" && `color${h(s)}`, r && `edge${h(r)}`, `size${h(l)}`]
+  };
+  return R(c, xo, t);
+}, Io = C(lo, {
+  name: "MuiIconButton",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.color !== "default" && t[`color${h(n.color)}`], n.edge && t[`edge${h(n.edge)}`], t[`size${h(n.size)}`]];
+  }
+})(({
+  theme: o,
+  ownerState: t
+}) => i({
+  textAlign: "center",
+  flex: "0 0 auto",
+  fontSize: o.typography.pxToRem(24),
+  padding: 8,
+  borderRadius: "50%",
+  overflow: "visible",
+  // Explicitly set the default value to solve a bug on IE11.
+  color: (o.vars || o).palette.action.active,
+  transition: o.transitions.create("background-color", {
+    duration: o.transitions.duration.shortest
+  })
+}, !t.disableRipple && {
+  "&:hover": {
+    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : W(o.palette.action.active, o.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  }
+}, t.edge === "start" && {
+  marginLeft: t.size === "small" ? -3 : -12
+}, t.edge === "end" && {
+  marginRight: t.size === "small" ? -3 : -12
+}), ({
+  theme: o,
+  ownerState: t
+}) => {
+  var n;
+  const s = (n = (o.vars || o).palette) == null ? void 0 : n[t.color];
+  return i({}, t.color === "inherit" && {
+    color: "inherit"
+  }, t.color !== "inherit" && t.color !== "default" && i({
+    color: s == null ? void 0 : s.main
+  }, !t.disableRipple && {
+    "&:hover": i({}, s && {
+      backgroundColor: o.vars ? `rgba(${s.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : W(s.main, o.palette.action.hoverOpacity)
+    }, {
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    })
+  }), t.size === "small" && {
+    padding: 5,
+    fontSize: o.typography.pxToRem(18)
+  }, t.size === "large" && {
+    padding: 12,
+    fontSize: o.typography.pxToRem(28)
+  }, {
+    [`&.${Co.disabled}`]: {
+      backgroundColor: "transparent",
+      color: (o.vars || o).palette.action.disabled
+    }
+  });
+}), Z = /* @__PURE__ */ $.forwardRef(function(t, n) {
+  const s = B({
+    props: t,
+    name: "MuiIconButton"
+  }), {
+    edge: r = !1,
+    children: l,
+    className: c,
+    color: p = "default",
+    disabled: d = !1,
+    disableFocusRipple: v = !1,
+    size: u = "medium"
+  } = s, g = I(s, To), f = i({}, s, {
+    edge: r,
+    color: p,
+    disabled: d,
+    disableFocusRipple: v,
+    size: u
+  }), m = Ao(f);
+  return /* @__PURE__ */ a.jsx(Io, i({
+    className: M(m.root, c),
+    centerRipple: !0,
+    focusRipple: !v,
+    disabled: d,
+    ref: n,
+    ownerState: f
+  }, g, {
+    children: l
+  }));
+});
+process.env.NODE_ENV !== "production" && (Z.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The icon to display.
+   */
+  children: ao(e.node, (o) => $.Children.toArray(o.children).some((n) => /* @__PURE__ */ $.isValidElement(n) && n.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+`)) : null),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'default'
+   */
+  color: e.oneOfType([e.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: e.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: e.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: e.oneOf(["end", "start", !1]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+const Oo = Z, So = z(/* @__PURE__ */ a.jsx("path", {
+  d: "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
+}), "SuccessOutlined"), jo = z(/* @__PURE__ */ a.jsx("path", {
+  d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+}), "ReportProblemOutlined"), Bo = z(/* @__PURE__ */ a.jsx("path", {
+  d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+}), "ErrorOutline"), Mo = z(/* @__PURE__ */ a.jsx("path", {
+  d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
+}), "InfoOutlined"), Ro = z(/* @__PURE__ */ a.jsx("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close"), zo = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"], No = (o) => {
+  const {
+    variant: t,
+    color: n,
+    severity: s,
+    classes: r
+  } = o, l = {
+    root: ["root", `${t}${h(n || s)}`, `${t}`],
+    icon: ["icon"],
+    message: ["message"],
+    action: ["action"]
+  };
+  return R(l, yo, r);
+}, _o = C(io, {
+  name: "MuiAlert",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, t[n.variant], t[`${n.variant}${h(n.color || n.severity)}`]];
+  }
+})(({
+  theme: o,
+  ownerState: t
+}) => {
+  const n = o.palette.mode === "light" ? L : V, s = o.palette.mode === "light" ? V : L, r = t.color || t.severity;
+  return i({}, o.typography.body2, {
+    backgroundColor: "transparent",
+    display: "flex",
+    padding: "6px 16px"
+  }, r && t.variant === "standard" && {
+    color: o.vars ? o.vars.palette.Alert[`${r}Color`] : n(o.palette[r].light, 0.6),
+    backgroundColor: o.vars ? o.vars.palette.Alert[`${r}StandardBg`] : s(o.palette[r].light, 0.9),
+    [`& .${D.icon}`]: o.vars ? {
+      color: o.vars.palette.Alert[`${r}IconColor`]
+    } : {
+      color: o.palette[r].main
+    }
+  }, r && t.variant === "outlined" && {
+    color: o.vars ? o.vars.palette.Alert[`${r}Color`] : n(o.palette[r].light, 0.6),
+    border: `1px solid ${(o.vars || o).palette[r].light}`,
+    [`& .${D.icon}`]: o.vars ? {
+      color: o.vars.palette.Alert[`${r}IconColor`]
+    } : {
+      color: o.palette[r].main
+    }
+  }, r && t.variant === "filled" && i({
+    fontWeight: o.typography.fontWeightMedium
+  }, o.vars ? {
+    color: o.vars.palette.Alert[`${r}FilledColor`],
+    backgroundColor: o.vars.palette.Alert[`${r}FilledBg`]
+  } : {
+    backgroundColor: o.palette.mode === "dark" ? o.palette[r].dark : o.palette[r].main,
+    color: o.palette.getContrastText(o.palette[r].main)
+  }));
+}), Po = C("div", {
+  name: "MuiAlert",
+  slot: "Icon",
+  overridesResolver: (o, t) => t.icon
+})({
+  marginRight: 12,
+  padding: "7px 0",
+  display: "flex",
+  fontSize: 22,
+  opacity: 0.9
+}), wo = C("div", {
+  name: "MuiAlert",
+  slot: "Message",
+  overridesResolver: (o, t) => t.message
+})({
+  padding: "8px 0",
+  minWidth: 0,
+  overflow: "auto"
+}), F = C("div", {
+  name: "MuiAlert",
+  slot: "Action",
+  overridesResolver: (o, t) => t.action
+})({
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "4px 0 0 16px",
+  marginLeft: "auto",
+  marginRight: -8
+}), H = {
+  success: /* @__PURE__ */ a.jsx(So, {
+    fontSize: "inherit"
+  }),
+  warning: /* @__PURE__ */ a.jsx(jo, {
+    fontSize: "inherit"
+  }),
+  error: /* @__PURE__ */ a.jsx(Bo, {
+    fontSize: "inherit"
+  }),
+  info: /* @__PURE__ */ a.jsx(Mo, {
+    fontSize: "inherit"
+  })
+}, q = /* @__PURE__ */ $.forwardRef(function(t, n) {
+  var s, r, l, c, p, d;
+  const v = B({
+    props: t,
+    name: "MuiAlert"
+  }), {
+    action: u,
+    children: g,
+    className: f,
+    closeText: m = "Close",
+    color: b,
+    components: y = {},
+    componentsProps: x = {},
+    icon: T,
+    iconMapping: N = H,
+    onClose: w,
+    role: G = "alert",
+    severity: _ = "success",
+    slotProps: E = {},
+    slots: k = {},
+    variant: Q = "standard"
+  } = v, X = I(v, zo), A = i({}, v, {
+    color: b,
+    severity: _,
+    variant: Q
+  }), O = No(A), oo = (s = (r = k.closeButton) != null ? r : y.CloseButton) != null ? s : Oo, eo = (l = (c = k.closeIcon) != null ? c : y.CloseIcon) != null ? l : Ro, to = (p = E.closeButton) != null ? p : x.closeButton, no = (d = E.closeIcon) != null ? d : x.closeIcon;
+  return /* @__PURE__ */ a.jsxs(_o, i({
+    role: G,
+    elevation: 0,
+    ownerState: A,
+    className: M(O.root, f),
+    ref: n
+  }, X, {
+    children: [T !== !1 ? /* @__PURE__ */ a.jsx(Po, {
+      ownerState: A,
+      className: O.icon,
+      children: T || N[_] || H[_]
+    }) : null, /* @__PURE__ */ a.jsx(wo, {
+      ownerState: A,
+      className: O.message,
+      children: g
+    }), u != null ? /* @__PURE__ */ a.jsx(F, {
+      ownerState: A,
+      className: O.action,
+      children: u
+    }) : null, u == null && w ? /* @__PURE__ */ a.jsx(F, {
+      ownerState: A,
+      className: O.action,
+      children: /* @__PURE__ */ a.jsx(oo, i({
+        size: "small",
+        "aria-label": m,
+        title: m,
+        color: "inherit",
+        onClick: w
+      }, to, {
+        children: /* @__PURE__ */ a.jsx(eo, i({
+          fontSize: "small"
+        }, no))
+      }))
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The action to display. It renders after the message, at the end of the alert.
+   */
+  action: e.node,
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * Override the default label for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+   * @default 'Close'
+   */
+  closeText: e.string,
+  /**
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: e.oneOfType([e.oneOf(["error", "info", "success", "warning"]), e.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components: e.shape({
+    CloseButton: e.elementType,
+    CloseIcon: e.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps: e.shape({
+    closeButton: e.object,
+    closeIcon: e.object
+  }),
+  /**
+   * Override the icon displayed before the children.
+   * Unless provided, the icon is mapped to the value of the `severity` prop.
+   * Set to `false` to remove the `icon`.
+   */
+  icon: e.node,
+  /**
+   * The component maps the `severity` prop to a range of different icons,
+   * for instance success to `<SuccessOutlined>`.
+   * If you wish to change this mapping, you can provide your own.
+   * Alternatively, you can use the `icon` prop to override the icon displayed.
+   */
+  iconMapping: e.shape({
+    error: e.node,
+    info: e.node,
+    success: e.node,
+    warning: e.node
+  }),
+  /**
+   * Callback fired when the component requests to be closed.
+   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onClose: e.func,
+  /**
+   * The ARIA role attribute of the element.
+   * @default 'alert'
+   */
+  role: e.string,
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   * @default 'success'
+   */
+  severity: e.oneOf(["error", "info", "success", "warning"]),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: e.shape({
+    closeButton: e.object,
+    closeIcon: e.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: e.shape({
+    closeButton: e.elementType,
+    closeIcon: e.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant: e.oneOfType([e.oneOf(["filled", "outlined", "standard"]), e.string])
+});
+const Eo = q;
+function ko(o) {
+  return S("MuiTypography", o);
+}
+j("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
+const Wo = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"], Lo = (o) => {
+  const {
+    align: t,
+    gutterBottom: n,
+    noWrap: s,
+    paragraph: r,
+    variant: l,
+    classes: c
+  } = o, p = {
+    root: ["root", l, o.align !== "inherit" && `align${h(t)}`, n && "gutterBottom", s && "noWrap", r && "paragraph"]
+  };
+  return R(p, ko, c);
+}, Vo = C("span", {
+  name: "MuiTypography",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.variant && t[n.variant], n.align !== "inherit" && t[`align${h(n.align)}`], n.noWrap && t.noWrap, n.gutterBottom && t.gutterBottom, n.paragraph && t.paragraph];
+  }
+})(({
+  theme: o,
+  ownerState: t
+}) => i({
+  margin: 0
+}, t.variant && o.typography[t.variant], t.align !== "inherit" && {
+  textAlign: t.align
+}, t.noWrap && {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}, t.gutterBottom && {
+  marginBottom: "0.35em"
+}, t.paragraph && {
+  marginBottom: 16
+})), K = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  inherit: "p"
+}, Uo = {
+  primary: "primary.main",
+  textPrimary: "text.primary",
+  secondary: "secondary.main",
+  textSecondary: "text.secondary",
+  error: "error.main"
+}, Do = (o) => Uo[o] || o, J = /* @__PURE__ */ $.forwardRef(function(t, n) {
+  const s = B({
+    props: t,
+    name: "MuiTypography"
+  }), r = Do(s.color), l = go(i({}, s, {
+    color: r
+  })), {
+    align: c = "inherit",
+    className: p,
+    component: d,
+    gutterBottom: v = !1,
+    noWrap: u = !1,
+    paragraph: g = !1,
+    variant: f = "body1",
+    variantMapping: m = K
+  } = l, b = I(l, Wo), y = i({}, l, {
+    align: c,
+    color: r,
+    className: p,
+    component: d,
+    gutterBottom: v,
+    noWrap: u,
+    paragraph: g,
+    variant: f,
+    variantMapping: m
+  }), x = d || (g ? "p" : m[f] || K[f]) || "span", T = Lo(y);
+  return /* @__PURE__ */ a.jsx(Vo, i({
+    as: x,
+    ref: n,
+    ownerState: y,
+    className: M(T.root, p)
+  }, b));
+});
+process.env.NODE_ENV !== "production" && (J.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align: e.oneOf(["center", "inherit", "justify", "left", "right"]),
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom: e.bool,
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   *
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap: e.bool,
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   */
+  paragraph: e.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant: e.oneOfType([e.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), e.string]),
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   inherit: 'p',
+   * }
+   */
+  variantMapping: e.object
+});
+const Fo = J;
+function Ho(o) {
+  return S("MuiAlertTitle", o);
+}
+j("MuiAlertTitle", ["root"]);
+const Ko = ["className"], Zo = (o) => {
+  const {
+    classes: t
+  } = o;
+  return R({
+    root: ["root"]
+  }, Ho, t);
+}, qo = C(Fo, {
+  name: "MuiAlertTitle",
+  slot: "Root",
+  overridesResolver: (o, t) => t.root
+})(({
+  theme: o
+}) => ({
+  fontWeight: o.typography.fontWeightMedium,
+  marginTop: -2
+})), Y = /* @__PURE__ */ $.forwardRef(function(t, n) {
+  const s = B({
+    props: t,
+    name: "MuiAlertTitle"
+  }), {
+    className: r
+  } = s, l = I(s, Ko), c = s, p = Zo(c);
+  return /* @__PURE__ */ a.jsx(qo, i({
+    gutterBottom: !0,
+    component: "div",
+    ownerState: c,
+    ref: n,
+    className: M(p.root, r)
+  }, l));
+});
+process.env.NODE_ENV !== "production" && (Y.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+const Jo = Y, Qo = co(function(t, n) {
+  const s = {
+    success: "bg-light-success",
+    info: "bg-light-info",
+    warning: "bg-light-warning",
+    error: "bg-light-danger"
+  }[t.severity ?? "info"], r = t.className ?? "d-flex align-items-center mb-50";
+  return /* @__PURE__ */ a.jsx(
+    Eo,
+    {
+      ref: n,
+      severity: t.severity,
+      className: `${r} ${s}`,
+      children: t.children
+    }
+  );
+});
+function Xo(o) {
+  return /* @__PURE__ */ a.jsx(Jo, { className: o.className ?? "", children: o.children });
+}
+export {
+  Qo as K,
+  Xo as a
+};