@snapcall/design-system 1.20.0 → 1.21.0

package/dist/components/MediaCard/index.js

@@ -0,0 +1,500 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/MediaCard/index.ts
+var MediaCard_exports = {};
+__export(MediaCard_exports, {
+  MediaCard: () => MediaCard
+});
+module.exports = __toCommonJS(MediaCard_exports);
+
+// src/components/MediaCard/MediaCard.tsx
+var import_react7 = require("react");
+
+// src/icons/image1.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Image1Icon = (0, import_react.forwardRef)(
+  function Image1Icon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          duotone && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { opacity: "0.12", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: "M6.36574 19.6343L14.8687 11.1314C15.2647 10.7354 15.4627 10.5373 15.691 10.4632C15.8919 10.3979 16.1082 10.3979 16.3091 10.4632C16.5374 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2C21 17.8802 21 18.7202 20.6731 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7203 21 17.8802 21 16.2 21H6.93142C6.3256 21 6.0227 21 5.88243 20.8802C5.76073 20.7763 5.69614 20.6203 5.7087 20.4608C5.72317 20.2769 5.93736 20.0627 6.36574 19.6343Z",
+                fill: "currentColor"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: "M8.50005 10.5C9.60462 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60462 6.5 8.50005 6.5C7.39548 6.5 6.50005 7.39543 6.50005 8.5C6.50005 9.60457 7.39548 10.5 8.50005 10.5Z",
+                fill: "currentColor"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+// src/icons/play.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PlayIcon = (0, import_react2.forwardRef)(function PlayIcon2(_a, ref) {
+  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      ref,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, other), {
+      children: [
+        duotone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            opacity: "0.12",
+            d: "M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+});
+
+// src/icons/recording2.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Recording2Icon = (0, import_react3.forwardRef)(
+  function Recording2Icon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M3 10L3 14M7.5 11V13M12 6V18M16.5 3V21M21 10V14",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      })
+    );
+  }
+);
+
+// src/icons/spinner.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SpinnerIcon = (0, import_react4.forwardRef)(
+  function SpinnerIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 25 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.668 12C3.668 16.8778 7.62222 20.832 12.5 20.832C17.3778 20.832 21.332 16.8778 21.332 12C21.332 7.12222 17.3778 3.168 12.5 3.168C7.62222 3.168 3.668 7.12222 3.668 12Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "path",
+            {
+              d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+// src/icons/videoRecorder.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var VideoRecorderIcon = (0, import_react5.forwardRef)(
+  function VideoRecorderIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          duotone && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
+              fill: "currentColor",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Avatar/Avatar.tsx
+var import_react6 = require("react");
+var import_cva = require("cva");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var avatarSizes = (0, import_cva.cva)({
+  variants: {
+    size: {
+      xxs: "w-[8px] h-[8px] rounded-[3px]",
+      xs: "w-[16px] h-[16px] rounded-[3px] text-[10px]",
+      sm: "w-[24px] h-[24px] rounded-[4px] text-md",
+      md: "w-[36px] h-[36px] rounded-[6px] text-md",
+      lg: "w-[45px] h-[45px] rounded-[8px] text-md",
+      xl: "w-[72px] h-[72px] rounded-[10px] text-[30px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarColors = {
+  amber: "bg-amber-200 text-amber-700 data-[size=xxs]:bg-amber-700",
+  red: "bg-red-300 text-red-700 data-[size=xxs]:bg-red-700",
+  green: "bg-green-300 text-green-700 data-[size=xxs]:bg-green-700",
+  plum: "bg-plum-300 text-plum-700 data-[size=xxs]:bg-plum-700",
+  crimson: "bg-crimson-300 text-crimson-700 data-[size=xxs]:bg-crimson-700",
+  blue: "bg-blue-300 text-blue-700 data-[size=xxs]:bg-blue-700",
+  purple: "bg-purple-300 text-purple-700 data-[size=xxs]:bg-purple-700",
+  violet: "bg-violet-300 text-violet-700 data-[size=xxs]:bg-violet-700",
+  indigo: "bg-indigo-300 text-indigo-700 data-[size=xxs]:bg-indigo-700",
+  cyan: "bg-cyan-300 text-cyan-700 data-[size=xxs]:bg-cyan-700",
+  teal: "bg-teal-300 text-teal-700 data-[size=xxs]:bg-teal-700",
+  grass: "bg-grass-300 text-grass-700 data-[size=xxs]:bg-grass-700",
+  brown: "bg-brown-300 text-brown-700 data-[size=xxs]:bg-brown-700",
+  lime: "bg-lime-300 text-lime-700 data-[size=xxs]:bg-lime-700",
+  yellow: "bg-yellow-300 text-yellow-700 data-[size=xxs]:bg-yellow-700",
+  gold: "bg-gold-300 text-gold-700 data-[size=xxs]:bg-gold-700",
+  bronze: "bg-bronze-300 text-bronze-700 data-[size=xxs]:bg-bronze-700",
+  gray: "bg-gray-300 text-gray-700 data-[size=xxs]:bg-gray-700"
+};
+var avatarVariants = (0, import_cva.cva)({
+  variants: {
+    variant: avatarColors
+  },
+  defaultVariants: {
+    variant: "blue"
+  }
+});
+var getNameInitials = (name) => {
+  const initial = name[0].toUpperCase();
+  return initial;
+};
+var getColorFromName = (name) => {
+  const nameValue = Array.from(name).reduce(
+    (total, current) => current.charCodeAt(0) + total,
+    0
+  );
+  const colorIndex = nameValue % Object.keys(avatarColors).length;
+  return Object.keys(avatarColors)[colorIndex];
+};
+var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, forwardedRef) {
+  var _b = _a, { size, className, icon, name, variant, image } = _b, other = __objRest(_b, ["size", "className", "icon", "name", "variant", "image"]);
+  const color = getColorFromName(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-size": size,
+      ref: forwardedRef,
+      className: cn(
+        "flex items-center justify-center font-semibold relative overflow-hidden shrink-0",
+        variant ? avatarVariants({ variant }) : avatarVariants({
+          variant: color
+        }),
+        avatarSizes({ size }),
+        {
+          relative: Boolean(icon)
+        },
+        className
+      )
+    }, other), {
+      children: [
+        image ? image : name && size !== "xxs" ? getNameInitials(name) : null,
+        icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute bottom-0 right-0", children: icon })
+      ]
+    })
+  );
+});
+
+// src/components/MediaCard/utils.ts
+var secondsToDuration = (seconds) => {
+  const hours = Math.floor(seconds / (60 * 60));
+  const minutes = Math.floor(seconds / 60) % 60;
+  const leftoverSeconds = seconds % 60;
+  const hoursText = hours ? `${hours}:` : "";
+  const minutesText = minutes ? `${minutes}:` : "0:";
+  const secondsText = leftoverSeconds < 10 ? `0${leftoverSeconds}` : `${leftoverSeconds}`;
+  return `${hoursText}${minutesText}${secondsText}`;
+};
+
+// src/components/MediaCard/MediaCard.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var typesIcons = {
+  audio: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Recording2Icon, {}),
+  video: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VideoRecorderIcon, { duotone: true }),
+  image: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Image1Icon, { duotone: true })
+};
+var MediaCard = (_a) => {
+  var _b = _a, {
+    title,
+    description,
+    duration,
+    type,
+    image,
+    action,
+    actionBehavior = "default",
+    isLoading,
+    size,
+    className
+  } = _b, otherProps = __objRest(_b, [
+    "title",
+    "description",
+    "duration",
+    "type",
+    "image",
+    "action",
+    "actionBehavior",
+    "isLoading",
+    "size",
+    "className"
+  ]);
+  const thumbnail = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    __spreadProps(__spreadValues({}, otherProps), {
+      className: cn(
+        "flex-1 min-h-0 bg-gray-50 relative",
+        {
+          "aspect-square rounded-md": size === "medium" || size === "small"
+        },
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute w-full h-full",
+              size === "large" ? "p-2" : "p-1"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full flex justify-center items-center", children: [
+              duration && size === "large" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
+              size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Avatar, { size: size === "large" ? "sm" : "xs", name: "Avatar" }) }),
+              type === "video" && image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                PlayIcon,
+                {
+                  size: size === "large" ? 24 : size === "medium" ? 18 : 12,
+                  className: "text-white fill-white dark:text-black dark:fill-black"
+                }
+              )
+            ] })
+          }
+        ),
+        typeof image === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "w-full h-full object-cover", src: image }) : image ? image : (0, import_react7.cloneElement)(typesIcons[type], {
+          className: "text-gray-900 self-center",
+          size: size === "large" ? 24 : size === "medium" ? 18 : 16
+        })
+      ] })
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-white border border-gray-200 divide-y divide-gray-200 rounded-lg shadow-sm group/mediacard",
+        "hover:bg-gray-25 active:bg-gray-50 overflow-hidden",
+        {
+          "opacity-40": isLoading,
+          "w-[232px] h-[184px]": size === "large",
+          "w-[240px] h-[72px]": size === "medium",
+          "w-[240px] h-[52px]": size === "small"
+        }
+      ),
+      children: [
+        size === "large" && thumbnail,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: cn("flex gap-4", {
+              "p-3": size === "large",
+              "py-2 pl-2 pr-3.5 h-full": size === "medium" || size === "small"
+            }),
+            children: [
+              size !== "large" && thumbnail,
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 items-center w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-black text-sm font-medium truncate", children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-gray-900 truncate", children: description })
+                ] }),
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    className: cn({
+                      "invisible group-hover/mediacard:visible group-focus-within/mediacard:visible": actionBehavior === "hover"
+                    }),
+                    children: action
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+MediaCard.displayName = "MediaCard";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaCard
+});