@hybridcore/ui 1.0.0

package/dist/components/card/index.js

@@ -0,0 +1,1101 @@
+import { jsx as l, jsxs as C } from "react/jsx-runtime";
+import { g as _, a as $, s as M, _ as c, u as j, b as w, c as T, P as o, d as E, e as q, f as k, h as Z, L as G, B as O, i as J, j as K, k as Q, l as X } from "../../styled-r6FrxDIi.js";
+import * as x from "react";
+function Y(e) {
+  return $("MuiCardActions", e);
+}
+_("MuiCardActions", ["root", "spacing"]);
+const ee = ["disableSpacing", "className"], oe = (e) => {
+  const {
+    classes: t,
+    disableSpacing: n
+  } = e;
+  return E({
+    root: ["root", !n && "spacing"]
+  }, Y, t);
+}, te = M("div", {
+  name: "MuiCardActions",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, !n.disableSpacing && t.spacing];
+  }
+})(({
+  ownerState: e
+}) => c({
+  display: "flex",
+  alignItems: "center",
+  padding: 8
+}, !e.disableSpacing && {
+  "& > :not(style) ~ :not(style)": {
+    marginLeft: 8
+  }
+})), V = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiCardActions"
+  }), {
+    disableSpacing: s = !1,
+    className: a
+  } = r, d = w(r, ee), i = c({}, r, {
+    disableSpacing: s
+  }), g = oe(i);
+  return /* @__PURE__ */ l(te, c({
+    className: T(g.root, a),
+    ownerState: i,
+    ref: n
+  }, d));
+});
+process.env.NODE_ENV !== "production" && (V.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, the actions do not have additional margin.
+   * @default false
+   */
+  disableSpacing: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function ne(e) {
+  return $("MuiCardContent", e);
+}
+_("MuiCardContent", ["root"]);
+const re = ["className", "component"], se = (e) => {
+  const {
+    classes: t
+  } = e;
+  return E({
+    root: ["root"]
+  }, ne, t);
+}, ie = M("div", {
+  name: "MuiCardContent",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})(() => ({
+  padding: 16,
+  "&:last-child": {
+    paddingBottom: 24
+  }
+})), D = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiCardContent"
+  }), {
+    className: s,
+    component: a = "div"
+  } = r, d = w(r, re), i = c({}, r, {
+    component: a
+  }), g = se(i);
+  return /* @__PURE__ */ l(ie, c({
+    as: a,
+    className: T(g.root, s),
+    ownerState: i,
+    ref: n
+  }, d));
+});
+process.env.NODE_ENV !== "production" && (D.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function ae(e) {
+  return $("MuiCardMedia", e);
+}
+_("MuiCardMedia", ["root", "media", "img"]);
+const le = ["children", "className", "component", "image", "src", "style"], ce = (e) => {
+  const {
+    classes: t,
+    isMediaComponent: n,
+    isImageComponent: r
+  } = e;
+  return E({
+    root: ["root", n && "media", r && "img"]
+  }, ae, t);
+}, de = M("div", {
+  name: "MuiCardMedia",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e, {
+      isMediaComponent: r,
+      isImageComponent: s
+    } = n;
+    return [t.root, r && t.media, s && t.img];
+  }
+})(({
+  ownerState: e
+}) => c({
+  display: "block",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center"
+}, e.isMediaComponent && {
+  width: "100%"
+}, e.isImageComponent && {
+  // ⚠️ object-fit is not supported by IE11.
+  objectFit: "cover"
+})), pe = ["video", "audio", "picture", "iframe", "img"], ue = ["picture", "img"], F = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiCardMedia"
+  }), {
+    children: s,
+    className: a,
+    component: d = "div",
+    image: i,
+    src: g,
+    style: f
+  } = r, y = w(r, le), m = pe.indexOf(d) !== -1, p = !m && i ? c({
+    backgroundImage: `url("${i}")`
+  }, f) : f, u = c({}, r, {
+    component: d,
+    isMediaComponent: m,
+    isImageComponent: ue.indexOf(d) !== -1
+  }), h = ce(u);
+  return /* @__PURE__ */ l(de, c({
+    className: T(h.root, a),
+    as: d,
+    role: !m && i ? "img" : void 0,
+    ref: n,
+    style: p,
+    ownerState: u,
+    src: m ? i || g : void 0
+  }, y, {
+    children: s
+  }));
+});
+process.env.NODE_ENV !== "production" && (F.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: q(o.node, (e) => !e.children && !e.image && !e.src && !e.component ? new Error("MUI: Either `children`, `image`, `src` or `component` prop must be specified.") : null),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * Image to be displayed as a background image.
+   * Either `image` or `src` prop must be specified.
+   * Note that caller must specify height otherwise the image will not be visible.
+   */
+  image: o.string,
+  /**
+   * An alias for `image` property.
+   * Available only with media components.
+   * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
+   */
+  src: o.string,
+  /**
+   * @ignore
+   */
+  style: o.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function fe(e) {
+  return $("MuiTypography", e);
+}
+_("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
+const me = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"], ge = (e) => {
+  const {
+    align: t,
+    gutterBottom: n,
+    noWrap: r,
+    paragraph: s,
+    variant: a,
+    classes: d
+  } = e, i = {
+    root: ["root", a, e.align !== "inherit" && `align${k(t)}`, n && "gutterBottom", r && "noWrap", s && "paragraph"]
+  };
+  return E(i, fe, d);
+}, he = M("span", {
+  name: "MuiTypography",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, n.variant && t[n.variant], n.align !== "inherit" && t[`align${k(n.align)}`], n.noWrap && t.noWrap, n.gutterBottom && t.gutterBottom, n.paragraph && t.paragraph];
+  }
+})(({
+  theme: e,
+  ownerState: t
+}) => c({
+  margin: 0
+}, t.variant === "inherit" && {
+  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+  font: "inherit"
+}, t.variant !== "inherit" && e.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
+})), L = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  inherit: "p"
+}, ye = {
+  primary: "primary.main",
+  textPrimary: "text.primary",
+  secondary: "secondary.main",
+  textSecondary: "text.secondary",
+  error: "error.main"
+}, ve = (e) => ye[e] || e, S = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiTypography"
+  }), s = ve(r.color), a = Z(c({}, r, {
+    color: s
+  })), {
+    align: d = "inherit",
+    className: i,
+    component: g,
+    gutterBottom: f = !1,
+    noWrap: y = !1,
+    paragraph: m = !1,
+    variant: p = "body1",
+    variantMapping: u = L
+  } = a, h = w(a, me), v = c({}, a, {
+    align: d,
+    color: s,
+    className: i,
+    component: g,
+    gutterBottom: f,
+    noWrap: y,
+    paragraph: m,
+    variant: p,
+    variantMapping: u
+  }), b = g || (m ? "p" : u[p] || L[p]) || "span", N = ge(v);
+  return /* @__PURE__ */ l(he, c({
+    as: b,
+    ref: n,
+    ownerState: v,
+    className: T(N.root, i)
+  }, h));
+});
+process.env.NODE_ENV !== "production" && (S.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align: o.oneOf(["center", "inherit", "justify", "left", "right"]),
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom: o.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: o.bool,
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   */
+  paragraph: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant: o.oneOfType([o.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), o.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: o.object
+});
+function be(e, t) {
+  typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function xe(...e) {
+  return x.useMemo(() => e.every((t) => t == null) ? null : (t) => {
+    e.forEach((n) => {
+      be(n, t);
+    });
+  }, e);
+}
+function Ce(e) {
+  return typeof e == "string";
+}
+function Se(e, t, n) {
+  return e === void 0 || Ce(e) ? t : c({}, t, {
+    ownerState: c({}, t.ownerState, n)
+  });
+}
+function we(e, t = []) {
+  if (e === void 0)
+    return {};
+  const n = {};
+  return Object.keys(e).filter((r) => r.match(/^on[A-Z]/) && typeof e[r] == "function" && !t.includes(r)).forEach((r) => {
+    n[r] = e[r];
+  }), n;
+}
+function H(e) {
+  if (e === void 0)
+    return {};
+  const t = {};
+  return Object.keys(e).filter((n) => !(n.match(/^on[A-Z]/) && typeof e[n] == "function")).forEach((n) => {
+    t[n] = e[n];
+  }), t;
+}
+function Ne(e) {
+  const {
+    getSlotProps: t,
+    additionalProps: n,
+    externalSlotProps: r,
+    externalForwardedProps: s,
+    className: a
+  } = e;
+  if (!t) {
+    const u = T(n == null ? void 0 : n.className, a, s == null ? void 0 : s.className, r == null ? void 0 : r.className), h = c({}, n == null ? void 0 : n.style, s == null ? void 0 : s.style, r == null ? void 0 : r.style), v = c({}, n, s, r);
+    return u.length > 0 && (v.className = u), Object.keys(h).length > 0 && (v.style = h), {
+      props: v,
+      internalRef: void 0
+    };
+  }
+  const d = we(c({}, s, r)), i = H(r), g = H(s), f = t(d), y = T(f == null ? void 0 : f.className, n == null ? void 0 : n.className, a, s == null ? void 0 : s.className, r == null ? void 0 : r.className), m = c({}, f == null ? void 0 : f.style, n == null ? void 0 : n.style, s == null ? void 0 : s.style, r == null ? void 0 : r.style), p = c({}, f, n, g, i);
+  return y.length > 0 && (p.className = y), Object.keys(m).length > 0 && (p.style = m), {
+    props: p,
+    internalRef: f.ref
+  };
+}
+function Oe(e, t, n) {
+  return typeof e == "function" ? e(t, n) : e;
+}
+function Te(e) {
+  return $("MuiSvgIcon", e);
+}
+_("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+const Me = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], Re = (e) => {
+  const {
+    color: t,
+    fontSize: n,
+    classes: r
+  } = e, s = {
+    root: ["root", t !== "inherit" && `color${k(t)}`, `fontSize${k(n)}`]
+  };
+  return E(s, Te, r);
+}, Pe = M("svg", {
+  name: "MuiSvgIcon",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, n.color !== "inherit" && t[`color${k(n.color)}`], t[`fontSize${k(n.fontSize)}`]];
+  }
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var n, r, s, a, d, i, g, f, y, m, p, u, h;
+  return {
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    // the <svg> will define the property that has `currentColor`
+    // for example heroicons uses fill="none" and stroke="currentColor"
+    fill: t.hasSvgAsChild ? void 0 : "currentColor",
+    flexShrink: 0,
+    transition: (n = e.transitions) == null || (r = n.create) == null ? void 0 : r.call(n, "fill", {
+      duration: (s = e.transitions) == null || (s = s.duration) == null ? void 0 : s.shorter
+    }),
+    fontSize: {
+      inherit: "inherit",
+      small: ((a = e.typography) == null || (d = a.pxToRem) == null ? void 0 : d.call(a, 20)) || "1.25rem",
+      medium: ((i = e.typography) == null || (g = i.pxToRem) == null ? void 0 : g.call(i, 24)) || "1.5rem",
+      large: ((f = e.typography) == null || (y = f.pxToRem) == null ? void 0 : y.call(f, 35)) || "2.1875rem"
+    }[t.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (m = (p = (e.vars || e).palette) == null || (p = p[t.color]) == null ? void 0 : p.main) != null ? m : {
+      action: (u = (e.vars || e).palette) == null || (u = u.action) == null ? void 0 : u.active,
+      disabled: (h = (e.vars || e).palette) == null || (h = h.action) == null ? void 0 : h.disabled,
+      inherit: void 0
+    }[t.color]
+  };
+}), z = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiSvgIcon"
+  }), {
+    children: s,
+    className: a,
+    color: d = "inherit",
+    component: i = "svg",
+    fontSize: g = "medium",
+    htmlColor: f,
+    inheritViewBox: y = !1,
+    titleAccess: m,
+    viewBox: p = "0 0 24 24"
+  } = r, u = w(r, Me), h = /* @__PURE__ */ x.isValidElement(s) && s.type === "svg", v = c({}, r, {
+    color: d,
+    component: i,
+    fontSize: g,
+    instanceFontSize: t.fontSize,
+    inheritViewBox: y,
+    viewBox: p,
+    hasSvgAsChild: h
+  }), b = {};
+  y || (b.viewBox = p);
+  const N = Re(v);
+  return /* @__PURE__ */ C(Pe, c({
+    as: i,
+    className: T(N.root, a),
+    focusable: "false",
+    color: f,
+    "aria-hidden": m ? void 0 : !0,
+    role: m ? "img" : void 0,
+    ref: n
+  }, b, u, h && s.props, {
+    ownerState: v,
+    children: [h ? s.props.children : s, m ? /* @__PURE__ */ l("title", {
+      children: m
+    }) : null]
+  }));
+});
+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 `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Node passed into the SVG element.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.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/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: o.oneOfType([o.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: o.oneOfType([o.oneOf(["inherit", "large", "medium", "small"]), o.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: o.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: o.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: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: o.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: o.string
+});
+z.muiName = "SvgIcon";
+function ke(e, t) {
+  function n(r, s) {
+    return /* @__PURE__ */ l(z, c({
+      "data-testid": `${t}Icon`,
+      ref: s
+    }, r, {
+      children: e
+    }));
+  }
+  return process.env.NODE_ENV !== "production" && (n.displayName = `${t}Icon`), n.muiName = z.muiName, /* @__PURE__ */ x.memo(/* @__PURE__ */ x.forwardRef(n));
+}
+const _e = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"], $e = ["component", "slots", "slotProps"], je = ["component"];
+function Ee(e, t) {
+  const {
+    className: n,
+    elementType: r,
+    ownerState: s,
+    externalForwardedProps: a,
+    getSlotOwnerState: d,
+    internalForwardedProps: i
+  } = t, g = w(t, _e), {
+    component: f,
+    slots: y = {
+      [e]: void 0
+    },
+    slotProps: m = {
+      [e]: void 0
+    }
+  } = a;
+  w(a, $e);
+  const p = y[e] || r, u = Oe(m[e], s), h = Ne(c({
+    className: n
+  }, g, {
+    externalForwardedProps: void 0,
+    externalSlotProps: u
+  })), {
+    props: {
+      component: v
+    },
+    internalRef: b
+  } = h, N = w(h.props, je), I = xe(b, u == null ? void 0 : u.ref, t.ref), A = d ? d(N) : {}, R = c({}, s, A), P = v, B = Se(p, c({}, e === "root", !y[e] && i, N, P && {
+    as: P
+  }, {
+    ref: I
+  }), R);
+  return Object.keys(A).forEach((W) => {
+    delete B[W];
+  }), [p, B];
+}
+const Ae = ke(/* @__PURE__ */ l("path", {
+  d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+}), "Person");
+function Ie(e) {
+  return $("MuiAvatar", e);
+}
+_("MuiAvatar", ["root", "colorDefault", "circular", "rounded", "square", "img", "fallback"]);
+const Be = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"], ze = (e) => {
+  const {
+    classes: t,
+    variant: n,
+    colorDefault: r
+  } = e;
+  return E({
+    root: ["root", n, r && "colorDefault"],
+    img: ["img"],
+    fallback: ["fallback"]
+  }, Ie, t);
+}, We = M("div", {
+  name: "MuiAvatar",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, t[n.variant], n.colorDefault && t.colorDefault];
+  }
+})(({
+  theme: e
+}) => ({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: 40,
+  height: 40,
+  fontFamily: e.typography.fontFamily,
+  fontSize: e.typography.pxToRem(20),
+  lineHeight: 1,
+  borderRadius: "50%",
+  overflow: "hidden",
+  userSelect: "none",
+  variants: [{
+    props: {
+      variant: "rounded"
+    },
+    style: {
+      borderRadius: (e.vars || e).shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: "square"
+    },
+    style: {
+      borderRadius: 0
+    }
+  }, {
+    props: {
+      colorDefault: !0
+    },
+    style: c({
+      color: (e.vars || e).palette.background.default
+    }, e.vars ? {
+      backgroundColor: e.vars.palette.Avatar.defaultBg
+    } : c({
+      backgroundColor: e.palette.grey[400]
+    }, e.applyStyles("dark", {
+      backgroundColor: e.palette.grey[600]
+    })))
+  }]
+})), De = M("img", {
+  name: "MuiAvatar",
+  slot: "Img",
+  overridesResolver: (e, t) => t.img
+})({
+  width: "100%",
+  height: "100%",
+  textAlign: "center",
+  // Handle non-square image. The property isn't supported by IE11.
+  objectFit: "cover",
+  // Hide alt text.
+  color: "transparent",
+  // Hide the image broken icon, only works on Chrome.
+  textIndent: 1e4
+}), Fe = M(Ae, {
+  name: "MuiAvatar",
+  slot: "Fallback",
+  overridesResolver: (e, t) => t.fallback
+})({
+  width: "75%",
+  height: "75%"
+});
+function Ue({
+  crossOrigin: e,
+  referrerPolicy: t,
+  src: n,
+  srcSet: r
+}) {
+  const [s, a] = x.useState(!1);
+  return x.useEffect(() => {
+    if (!n && !r)
+      return;
+    a(!1);
+    let d = !0;
+    const i = new Image();
+    return i.onload = () => {
+      d && a("loaded");
+    }, i.onerror = () => {
+      d && a("error");
+    }, i.crossOrigin = e, i.referrerPolicy = t, i.src = n, r && (i.srcset = r), () => {
+      d = !1;
+    };
+  }, [e, t, n, r]), s;
+}
+const U = /* @__PURE__ */ x.forwardRef(function(t, n) {
+  const r = j({
+    props: t,
+    name: "MuiAvatar"
+  }), {
+    alt: s,
+    children: a,
+    className: d,
+    component: i = "div",
+    slots: g = {},
+    slotProps: f = {},
+    imgProps: y,
+    sizes: m,
+    src: p,
+    srcSet: u,
+    variant: h = "circular"
+  } = r, v = w(r, Be);
+  let b = null;
+  const N = Ue(c({}, y, {
+    src: p,
+    srcSet: u
+  })), I = p || u, A = I && N !== "error", R = c({}, r, {
+    colorDefault: !A,
+    component: i,
+    variant: h
+  }), P = ze(R), [B, W] = Ee("img", {
+    className: P.img,
+    elementType: De,
+    externalForwardedProps: {
+      slots: g,
+      slotProps: {
+        img: c({}, y, f.img)
+      }
+    },
+    additionalProps: {
+      alt: s,
+      src: p,
+      srcSet: u,
+      sizes: m
+    },
+    ownerState: R
+  });
+  return A ? b = /* @__PURE__ */ l(B, c({}, W)) : a || a === 0 ? b = a : I && s ? b = s[0] : b = /* @__PURE__ */ l(Fe, {
+    ownerState: R,
+    className: P.fallback
+  }), /* @__PURE__ */ l(We, c({
+    as: i,
+    ownerState: R,
+    className: T(P.root, d),
+    ref: n
+  }, v, {
+    children: b
+  }));
+});
+process.env.NODE_ENV !== "production" && (U.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Used in combination with `src` or `srcSet` to
+   * provide an alt attribute for the rendered `img` element.
+   */
+  alt: o.string,
+  /**
+   * Used to render icon or text elements inside the Avatar if `src` is not set.
+   * This can be an element, or just a string.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   */
+  imgProps: o.object,
+  /**
+   * The `sizes` attribute for the `img` element.
+   */
+  sizes: o.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    img: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    img: o.elementType
+  }),
+  /**
+   * The `src` attribute for the `img` element.
+   */
+  src: o.string,
+  /**
+   * The `srcSet` attribute for the `img` element.
+   * Use this attribute for responsive image display.
+   */
+  srcSet: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The shape of the avatar.
+   * @default 'circular'
+   */
+  variant: o.oneOfType([o.oneOf(["circular", "rounded", "square"]), o.string])
+});
+const Ve = ({
+  title: e,
+  text: t,
+  image: n,
+  orientation: r = "portrait",
+  avatar: s,
+  actions: a,
+  extraActions: d,
+  extraInfo: i,
+  stats: g
+}) => r === "landscape" ? /* @__PURE__ */ C(G, { children: [
+  /* @__PURE__ */ l(
+    F,
+    {
+      component: "img",
+      alt: e,
+      image: n,
+      sx: { width: 330, height: 200 }
+    }
+  ),
+  /* @__PURE__ */ C(D, { children: [
+    /* @__PURE__ */ l(O, { flex: 1, children: /* @__PURE__ */ C(
+      O,
+      {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        height: "100%",
+        children: [
+          /* @__PURE__ */ C(O, { children: [
+            /* @__PURE__ */ l(
+              S,
+              {
+                gutterBottom: !0,
+                variant: "subtitle1",
+                component: "h3",
+                sx: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 3,
+                  WebkitBoxOrient: "vertical"
+                },
+                children: e
+              }
+            ),
+            /* @__PURE__ */ l(
+              S,
+              {
+                variant: "caption",
+                component: "p",
+                sx: {
+                  color: "text.secondary",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 4,
+                  WebkitBoxOrient: "vertical",
+                  lineHeight: "16px"
+                },
+                children: /* @__PURE__ */ l("small", { children: t })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l(O, { children: g })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ C(J, { children: [
+      /* @__PURE__ */ l(U, { src: s.image, sx: { width: 42, height: 42 } }),
+      /* @__PURE__ */ l(
+        S,
+        {
+          variant: "subtitle2",
+          sx: {
+            fontWeight: "normal",
+            lineHeight: "14px",
+            fontSize: "13px"
+          },
+          children: s.title
+        }
+      ),
+      /* @__PURE__ */ l(
+        S,
+        {
+          variant: "caption",
+          sx: { color: "text.secondary", lineHeight: "12px" },
+          children: /* @__PURE__ */ l("small", { children: s.subTitle })
+        }
+      ),
+      /* @__PURE__ */ l(K, { children: d }),
+      /* @__PURE__ */ l(
+        S,
+        {
+          variant: "caption",
+          sx: { color: "text.secondary", lineHeight: "12px" },
+          children: /* @__PURE__ */ l("small", { children: i })
+        }
+      ),
+      /* @__PURE__ */ l(O, { display: "flex", mt: 1, width: "100%", children: a })
+    ] })
+  ] })
+] }) : /* @__PURE__ */ C(Q, { children: [
+  /* @__PURE__ */ l(F, { component: "img", alt: e, height: "172", image: n }),
+  /* @__PURE__ */ C(D, { children: [
+    /* @__PURE__ */ l(S, { gutterBottom: !0, variant: "subtitle1", component: "h3", noWrap: !0, children: e }),
+    /* @__PURE__ */ l(
+      S,
+      {
+        variant: "caption",
+        component: "p",
+        sx: {
+          color: "text.secondary",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          lineHeight: "16px"
+        },
+        children: /* @__PURE__ */ l("small", { children: t })
+      }
+    )
+  ] }),
+  /* @__PURE__ */ C(
+    V,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        p: (f) => f.spacing(2)
+      },
+      children: [
+        /* @__PURE__ */ C(O, { display: "flex", justifyItems: "center", children: [
+          /* @__PURE__ */ l(U, { src: s.image, sx: { width: 29, height: 29 } }),
+          /* @__PURE__ */ C(O, { display: "flex", flexDirection: "column", ml: 1, children: [
+            /* @__PURE__ */ l(
+              S,
+              {
+                variant: "subtitle2",
+                sx: {
+                  fontWeight: "normal",
+                  lineHeight: "14px",
+                  fontSize: "13px"
+                },
+                noWrap: !0,
+                children: s.title
+              }
+            ),
+            /* @__PURE__ */ l(
+              S,
+              {
+                variant: "caption",
+                sx: { color: "text.secondary" },
+                noWrap: !0,
+                children: /* @__PURE__ */ l("small", { children: s.subTitle })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ l(O, { display: "flex", children: a })
+      ]
+    }
+  ),
+  d !== void 0 && /* @__PURE__ */ l(X, { className: "extra-actions", children: d })
+] });
+export {
+  Ve as Card
+};