@hybridcore/ui 1.3.7 → 1.4.1

package/dist/components/card/index.js

@@ -1,61 +1,61 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { Box as p, Avatar as b } from "@mui/material";
-import { LandscapeCardRoot as A, LandscapeInfoBox as I, LandscapeCardExtraActions as P, PortraitCardRoot as _, PortraitCardExtraActions as L } from "./styled.js";
-import { _ as m, a as v } from "../../extends-Cyw62AD_.js";
-import * as M from "react";
-import { P as t } from "../../createStyled-B96gjom1.js";
-import { g as w, u as O, c as N, a as S, b as B } from "../../useThemeProps-DeftUmqJ.js";
-import { g as T, s as j } from "../../styled-cPJbqF0E.js";
-import { C as y } from "../../CardContent-B8hqgH-I.js";
-import { T as d } from "../../Typography-Dg-ROiTA.js";
-function U(e) {
-  return T("MuiCardActions", e);
+import { jsx as e, jsxs as r, Fragment as h } from "react/jsx-runtime";
+import { Skeleton as n, Box as g, Avatar as C } from "@mui/material";
+import { LandscapeCardRoot as I, LandscapeInfoBox as P, LandscapeCardExtraActions as _, PortraitCardRoot as L, PortraitCardExtraActions as U } from "./styled.js";
+import { _ as u, a as O } from "../../objectWithoutPropertiesLoose-BK36oJDi.js";
+import * as T from "react";
+import { P as i } from "../../createStyled-BzvgQjjR.js";
+import { g as S, u as N, c as k, a as B, b as H } from "../../useThemeProps-uYx_RkOH.js";
+import { g as j, s as R } from "../../styled-LNCprp4n.js";
+import { C as M } from "../../CardContent-DFsCCOWk.js";
+import { T as p } from "../../Typography-Bm7PFqUT.js";
+function D(t) {
+  return j("MuiCardActions", t);
 }
-w("MuiCardActions", ["root", "spacing"]);
-const H = ["disableSpacing", "className"], D = (e) => {
+S("MuiCardActions", ["root", "spacing"]);
+const z = ["disableSpacing", "className"], $ = (t) => {
   const {
-    classes: i,
-    disableSpacing: n
-  } = e;
-  return S({
-    root: ["root", !n && "spacing"]
-  }, U, i);
-}, z = j("div", {
+    classes: o,
+    disableSpacing: s
+  } = t;
+  return B({
+    root: ["root", !s && "spacing"]
+  }, D, o);
+}, F = R("div", {
   name: "MuiCardActions",
   slot: "Root",
-  overridesResolver: (e, i) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
-    } = e;
-    return [i.root, !n.disableSpacing && i.spacing];
+      ownerState: s
+    } = t;
+    return [o.root, !s.disableSpacing && o.spacing];
   }
 })(({
-  ownerState: e
-}) => m({
+  ownerState: t
+}) => u({
   display: "flex",
   alignItems: "center",
   padding: 8
-}, !e.disableSpacing && {
+}, !t.disableSpacing && {
   "& > :not(:first-of-type)": {
     marginLeft: 8
   }
-})), k = /* @__PURE__ */ M.forwardRef(function(i, n) {
-  const r = O({
-    props: i,
+})), E = /* @__PURE__ */ T.forwardRef(function(o, s) {
+  const c = N({
+    props: o,
     name: "MuiCardActions"
   }), {
-    disableSpacing: s = !1,
-    className: h
-  } = r, a = v(r, H), l = m({}, r, {
-    disableSpacing: s
-  }), u = D(l);
-  return /* @__PURE__ */ o(z, m({
-    className: N(u.root, h),
-    ownerState: l,
-    ref: n
-  }, a));
+    disableSpacing: l = !1,
+    className: f
+  } = c, d = O(c, z), m = u({}, c, {
+    disableSpacing: l
+  }), x = $(m);
+  return /* @__PURE__ */ e(F, u({
+    className: k(x.root, f),
+    ownerState: m,
+    ref: s
+  }, d));
 });
-process.env.NODE_ENV !== "production" && (k.propTypes = {
+process.env.NODE_ENV !== "production" && (E.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -63,93 +63,93 @@ process.env.NODE_ENV !== "production" && (k.propTypes = {
   /**
    * The content of the component.
    */
-  children: t.node,
+  children: i.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
+  classes: i.object,
   /**
    * @ignore
    */
-  className: t.string,
+  className: i.string,
   /**
    * If `true`, the actions do not have additional margin.
    * @default false
    */
-  disableSpacing: t.bool,
+  disableSpacing: i.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object])
 });
-function $(e) {
-  return T("MuiCardMedia", e);
+function V(t) {
+  return j("MuiCardMedia", t);
 }
-w("MuiCardMedia", ["root", "media", "img"]);
-const V = ["children", "className", "component", "image", "src", "style"], F = (e) => {
+S("MuiCardMedia", ["root", "media", "img"]);
+const G = ["children", "className", "component", "image", "src", "style"], q = (t) => {
   const {
-    classes: i,
-    isMediaComponent: n,
-    isImageComponent: r
-  } = e;
-  return S({
-    root: ["root", n && "media", r && "img"]
-  }, $, i);
-}, G = j("div", {
+    classes: o,
+    isMediaComponent: s,
+    isImageComponent: c
+  } = t;
+  return B({
+    root: ["root", s && "media", c && "img"]
+  }, V, o);
+}, J = R("div", {
   name: "MuiCardMedia",
   slot: "Root",
-  overridesResolver: (e, i) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: n
-    } = e, {
-      isMediaComponent: r,
-      isImageComponent: s
-    } = n;
-    return [i.root, r && i.media, s && i.img];
+      ownerState: s
+    } = t, {
+      isMediaComponent: c,
+      isImageComponent: l
+    } = s;
+    return [o.root, c && o.media, l && o.img];
   }
 })(({
-  ownerState: e
-}) => m({
+  ownerState: t
+}) => u({
   display: "block",
   backgroundSize: "cover",
   backgroundRepeat: "no-repeat",
   backgroundPosition: "center"
-}, e.isMediaComponent && {
+}, t.isMediaComponent && {
   width: "100%"
-}, e.isImageComponent && {
+}, t.isImageComponent && {
   // ⚠️ object-fit is not supported by IE11.
   objectFit: "cover"
-})), q = ["video", "audio", "picture", "iframe", "img"], J = ["picture", "img"], x = /* @__PURE__ */ M.forwardRef(function(i, n) {
-  const r = O({
-    props: i,
+})), K = ["video", "audio", "picture", "iframe", "img"], Q = ["picture", "img"], b = /* @__PURE__ */ T.forwardRef(function(o, s) {
+  const c = N({
+    props: o,
     name: "MuiCardMedia"
   }), {
-    children: s,
-    className: h,
-    component: a = "div",
-    image: l,
-    src: u,
-    style: f
-  } = r, E = v(r, V), g = q.indexOf(a) !== -1, R = !g && l ? m({
-    backgroundImage: `url("${l}")`
-  }, f) : f, C = m({}, r, {
-    component: a,
-    isMediaComponent: g,
-    isImageComponent: J.indexOf(a) !== -1
-  }), W = F(C);
-  return /* @__PURE__ */ o(G, m({
-    className: N(W.root, h),
-    as: a,
-    role: !g && l ? "img" : void 0,
-    ref: n,
-    style: R,
-    ownerState: C,
-    src: g ? l || u : void 0
-  }, E, {
-    children: s
+    children: l,
+    className: f,
+    component: d = "div",
+    image: m,
+    src: x,
+    style: a
+  } = c, w = O(c, G), v = K.indexOf(d) !== -1, W = !v && m ? u({
+    backgroundImage: `url("${m}")`
+  }, a) : a, y = u({}, c, {
+    component: d,
+    isMediaComponent: v,
+    isImageComponent: Q.indexOf(d) !== -1
+  }), A = q(y);
+  return /* @__PURE__ */ e(J, u({
+    className: k(A.root, f),
+    as: d,
+    role: !v && m ? "img" : void 0,
+    ref: s,
+    style: W,
+    ownerState: y,
+    src: v ? m || x : void 0
+  }, w, {
+    children: l
   }));
 });
-process.env.NODE_ENV !== "production" && (x.propTypes = {
+process.env.NODE_ENV !== "production" && (b.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -157,73 +157,107 @@ process.env.NODE_ENV !== "production" && (x.propTypes = {
   /**
    * The content of the component.
    */
-  children: B(t.node, (e) => !e.children && !e.image && !e.src && !e.component ? new Error("MUI: Either `children`, `image`, `src` or `component` prop must be specified.") : null),
+  children: H(i.node, (t) => !t.children && !t.image && !t.src && !t.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: t.object,
+  classes: i.object,
   /**
    * @ignore
    */
-  className: t.string,
+  className: i.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: t.elementType,
+  component: i.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: t.string,
+  image: i.string,
   /**
    * An alias for `image` property.
    * Available only with media components.
    * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
    */
-  src: t.string,
+  src: i.string,
   /**
    * @ignore
    */
-  style: t.object,
+  style: i.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
+  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object])
 });
-const ne = ({
-  title: e,
-  text: i,
-  image: n,
-  orientation: r = "portrait",
-  avatar: s,
-  actions: h,
-  extraActions: a,
-  extraInfo: l,
-  stats: u
-}) => r === "landscape" ? /* @__PURE__ */ c(A, { children: [
-  /* @__PURE__ */ o(
-    x,
+const re = ({
+  title: t,
+  text: o,
+  image: s,
+  orientation: c = "portrait",
+  avatar: l,
+  actions: f,
+  extraActions: d,
+  extraInfo: m,
+  stats: x,
+  loading: a = !1
+}) => c === "landscape" ? /* @__PURE__ */ r(I, { children: [
+  a ? /* @__PURE__ */ e(
+    n,
+    {
+      sx: { width: 330, height: 200 },
+      animation: "wave",
+      variant: "rounded"
+    }
+  ) : /* @__PURE__ */ e(
+    b,
     {
       component: "img",
-      alt: e,
-      image: n,
+      alt: t,
+      image: s,
       sx: { width: 330, height: 200 }
     }
   ),
-  /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ o(p, { flex: 1, children: /* @__PURE__ */ c(
-      p,
+  /* @__PURE__ */ r(M, { children: [
+    /* @__PURE__ */ e(g, { flex: 1, children: /* @__PURE__ */ r(
+      g,
       {
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
         height: "100%",
         children: [
-          /* @__PURE__ */ c(p, { children: [
-            /* @__PURE__ */ o(
-              d,
+          /* @__PURE__ */ e(g, { children: a ? /* @__PURE__ */ r(h, { children: [
+            /* @__PURE__ */ e(
+              n,
+              {
+                animation: "wave",
+                height: 10,
+                style: { marginBottom: 16, marginTop: 10 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              n,
+              {
+                animation: "wave",
+                height: 10,
+                style: { marginBottom: 6 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              n,
+              {
+                animation: "wave",
+                height: 10,
+                width: "80%",
+                style: { marginBottom: 6 }
+              }
+            )
+          ] }) : /* @__PURE__ */ r(h, { children: [
+            /* @__PURE__ */ e(
+              p,
               {
                 gutterBottom: !0,
                 variant: "subtitle1",
@@ -235,11 +269,11 @@ const ne = ({
                   WebkitLineClamp: 3,
                   WebkitBoxOrient: "vertical"
                 },
-                children: e
+                children: t
               }
             ),
-            /* @__PURE__ */ o(
-              d,
+            /* @__PURE__ */ e(
+              p,
               {
                 variant: "caption",
                 component: "p",
@@ -252,54 +286,162 @@ const ne = ({
                   WebkitBoxOrient: "vertical",
                   lineHeight: "16px"
                 },
-                children: /* @__PURE__ */ o("small", { children: i })
+                children: /* @__PURE__ */ e("small", { children: o })
               }
             )
-          ] }),
-          /* @__PURE__ */ o(p, { children: u })
+          ] }) }),
+          /* @__PURE__ */ e(g, { children: a ? /* @__PURE__ */ e(
+            n,
+            {
+              animation: "wave",
+              height: 10,
+              width: "40%",
+              style: { marginBottom: 6 }
+            }
+          ) : x })
         ]
       }
     ) }),
-    /* @__PURE__ */ c(I, { children: [
-      /* @__PURE__ */ o(b, { src: s.image, sx: { width: 42, height: 42 } }),
-      /* @__PURE__ */ o(
-        d,
+    /* @__PURE__ */ r(P, { children: [
+      a ? /* @__PURE__ */ e(
+        n,
         {
-          variant: "subtitle2",
-          sx: {
-            fontWeight: "normal",
-            lineHeight: "14px",
-            fontSize: "13px"
-          },
-          children: s.title
+          animation: "wave",
+          variant: "circular",
+          width: 42,
+          height: 42
         }
-      ),
-      /* @__PURE__ */ o(
-        d,
+      ) : /* @__PURE__ */ e(C, { src: l.image, sx: { width: 42, height: 42 } }),
+      a ? /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            animation: "wave",
+            height: 10,
+            width: "40%",
+            sx: { mb: 0.25, mt: 0.35 }
+          }
+        ),
+        /* @__PURE__ */ e(
+          n,
+          {
+            animation: "wave",
+            height: 10,
+            width: "60%",
+            sx: { mb: 0.25 }
+          }
+        )
+      ] }) : /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ e(
+          p,
+          {
+            variant: "subtitle2",
+            sx: {
+              fontWeight: "normal",
+              lineHeight: "14px",
+              fontSize: "13px"
+            },
+            children: l.title
+          }
+        ),
+        /* @__PURE__ */ e(
+          p,
+          {
+            variant: "caption",
+            sx: { color: "text.secondary", lineHeight: "12px" },
+            children: /* @__PURE__ */ e("small", { children: l.subTitle })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(_, { children: a ? /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            animation: "wave",
+            variant: "circular",
+            width: 32,
+            height: 32
+          }
+        ),
+        /* @__PURE__ */ e(
+          n,
+          {
+            animation: "wave",
+            variant: "circular",
+            width: 32,
+            height: 32
+          }
+        ),
+        /* @__PURE__ */ e(
+          n,
+          {
+            animation: "wave",
+            variant: "circular",
+            width: 32,
+            height: 32
+          }
+        )
+      ] }) : d }),
+      a ? /* @__PURE__ */ e(
+        n,
         {
-          variant: "caption",
-          sx: { color: "text.secondary", lineHeight: "12px" },
-          children: /* @__PURE__ */ o("small", { children: s.subTitle })
+          animation: "wave",
+          height: 10,
+          width: "40%",
+          sx: { mb: 0.05, mt: 0.35 }
         }
-      ),
-      /* @__PURE__ */ o(P, { children: a }),
-      /* @__PURE__ */ o(
-        d,
+      ) : /* @__PURE__ */ e(
+        p,
         {
           variant: "caption",
           sx: { color: "text.secondary", lineHeight: "12px" },
-          children: /* @__PURE__ */ o("small", { children: l })
+          children: /* @__PURE__ */ e("small", { children: m })
         }
       ),
-      /* @__PURE__ */ o(p, { display: "flex", mt: 1, width: "100%", children: h })
+      /* @__PURE__ */ e(g, { display: "flex", mt: 1, width: "100%", children: a ? /* @__PURE__ */ e(
+        n,
+        {
+          variant: "rounded",
+          animation: "wave",
+          height: 36,
+          width: "100%",
+          sx: { borderRadius: (w) => w.shape.borderRadius }
+        }
+      ) : f })
     ] })
   ] })
-] }) : /* @__PURE__ */ c(_, { children: [
-  /* @__PURE__ */ o(x, { component: "img", alt: e, height: "172", image: n }),
-  /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ o(d, { gutterBottom: !0, variant: "subtitle1", component: "h3", noWrap: !0, children: e }),
-    /* @__PURE__ */ o(
-      d,
+] }) : /* @__PURE__ */ r(L, { children: [
+  a ? /* @__PURE__ */ e(n, { sx: { height: 172 }, animation: "wave", variant: "rectangular" }) : /* @__PURE__ */ e(b, { component: "img", alt: t, height: "172", image: s }),
+  /* @__PURE__ */ e(M, { children: a ? /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        animation: "wave",
+        height: 10,
+        style: { marginBottom: 16, marginTop: 10 }
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        animation: "wave",
+        height: 10,
+        style: { marginBottom: 6 }
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        animation: "wave",
+        height: 10,
+        width: "80%",
+        style: { marginBottom: 8 }
+      }
+    )
+  ] }) : /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ e(p, { gutterBottom: !0, variant: "subtitle1", component: "h3", noWrap: !0, children: t }),
+    /* @__PURE__ */ e(
+      p,
       {
         variant: "caption",
         component: "p",
@@ -312,24 +454,44 @@ const ne = ({
           WebkitBoxOrient: "vertical",
           lineHeight: "16px"
         },
-        children: /* @__PURE__ */ o("small", { children: i })
+        children: /* @__PURE__ */ e("small", { children: o })
       }
     )
-  ] }),
-  /* @__PURE__ */ c(
-    k,
+  ] }) }),
+  /* @__PURE__ */ r(
+    E,
     {
       sx: {
         display: "flex",
         justifyContent: "space-between",
-        p: (f) => f.spacing(2)
+        p: (w) => w.spacing(2)
       },
       children: [
-        /* @__PURE__ */ c(p, { display: "flex", justifyItems: "center", children: [
-          /* @__PURE__ */ o(b, { src: s.image, sx: { width: 29, height: 29 } }),
-          /* @__PURE__ */ c(p, { display: "flex", flexDirection: "column", ml: 1, children: [
-            /* @__PURE__ */ o(
-              d,
+        /* @__PURE__ */ r(g, { display: "flex", justifyItems: "center", flex: 1, children: [
+          a ? /* @__PURE__ */ e(
+            n,
+            {
+              animation: "wave",
+              variant: "circular",
+              width: 29,
+              height: 29,
+              sx: { mb: 0.6 }
+            }
+          ) : /* @__PURE__ */ e(C, { src: l.image, sx: { width: 29, height: 29 } }),
+          /* @__PURE__ */ e(g, { display: "flex", flexDirection: "column", ml: 1, flex: 1, children: a ? /* @__PURE__ */ r(h, { children: [
+            /* @__PURE__ */ e(
+              n,
+              {
+                animation: "wave",
+                height: 10,
+                style: { marginBottom: 2, marginTop: 3 },
+                width: "40%"
+              }
+            ),
+            /* @__PURE__ */ e(n, { animation: "wave", height: 10, width: "60%" })
+          ] }) : /* @__PURE__ */ r(h, { children: [
+            /* @__PURE__ */ e(
+              p,
               {
                 variant: "subtitle2",
                 sx: {
@@ -338,26 +500,26 @@ const ne = ({
                   fontSize: "13px"
                 },
                 noWrap: !0,
-                children: s.title
+                children: l.title
               }
             ),
-            /* @__PURE__ */ o(
-              d,
+            /* @__PURE__ */ e(
+              p,
               {
                 variant: "caption",
                 sx: { color: "text.secondary" },
                 noWrap: !0,
-                children: /* @__PURE__ */ o("small", { children: s.subTitle })
+                children: /* @__PURE__ */ e("small", { children: l.subTitle })
               }
             )
-          ] })
+          ] }) })
         ] }),
-        /* @__PURE__ */ o(p, { display: "flex", children: h })
+        !a && /* @__PURE__ */ e(g, { display: "flex", children: f })
       ]
     }
   ),
-  a !== void 0 && /* @__PURE__ */ o(L, { className: "extra-actions", children: a })
+  a === !1 && d !== void 0 && /* @__PURE__ */ e(U, { className: "extra-actions", children: d })
 ] });
 export {
-  ne as Card
+  re as Card
 };