@techzyapp/ui-library 1.0.43 → 1.0.45

package/dist/{FileCard-kVnjcSlk.js → FileCard-D4TB3qGG.js}

@@ -1,12 +1,12 @@
 import { jsxs as m, jsx as c } from "react/jsx-runtime";
-import { forwardRef as S, useState as A, useEffect as O } from "react";
-import { clsx as y } from "clsx";
-import { A as L } from "./Avatar-ClcmN0ba.js";
-import { I as $ } from "./IconButton-BoURJOUD.js";
-import { b as V } from "./Icon-D5TxgfCc.js";
+import { forwardRef as A, useState as O, useEffect as y } from "react";
+import { clsx as L } from "clsx";
+import { A as $ } from "./Avatar-CaYyv5wk.js";
+import { I as V } from "./IconButton-re6xITGO.js";
+import { b as k } from "./Icon-B7DJn8Tw.js";
 import { T as G } from "./Typography-ChSuxgkc.js";
-import { a as H } from "./ConfigProvider-Dqfu7UBU.js";
-const K = "_fileCard_kpeb5_3", R = "_avatar_kpeb5_24", U = "_body_kpeb5_29", W = "_name_kpeb5_38", X = "_nameBase_kpeb5_45", z = "_nameExt_kpeb5_51", J = "_type_kpeb5_57", P = "_download_kpeb5_61", Q = "_sm_kpeb5_66", Y = "_md_kpeb5_77", Z = "_lg_kpeb5_81", o = {
+import { a as H } from "./ConfigProvider-DVDGtCUc.js";
+const K = "_fileCard_1s46h_3", R = "_avatar_1s46h_26", U = "_body_1s46h_31", W = "_name_1s46h_40", X = "_nameBase_1s46h_47", z = "_nameExt_1s46h_53", J = "_type_1s46h_59", P = "_download_1s46h_63", Q = "_sm_1s46h_68", Y = "_md_1s46h_79", Z = "_lg_1s46h_83", o = {
   fileCard: K,
   avatar: R,
   body: U,
@@ -58,7 +58,7 @@ function oe(n) {
   const e = n.lastIndexOf(".");
   return e > 0 && n.length - e <= 7 ? { base: n.slice(0, e), ext: n.slice(e) } : { base: n, ext: "" };
 }
-function g(n) {
+function v(n) {
   if (!Number.isFinite(n) || n < 0) return "";
   if (n < 1024) return `${n} B`;
   const e = ["KB", "MB", "GB", "TB"];
@@ -67,11 +67,11 @@ function g(n) {
     t /= 1024, a += 1;
   return `${t < 10 ? t.toFixed(1) : Math.round(t)} ${e[a]}`;
 }
-const ue = S(function({
+const ue = A(function({
   name: e,
   src: t,
   type: a,
-  image: v,
+  image: b,
   fileSize: r,
   fetchSize: u = !1,
   meta: T,
@@ -80,22 +80,22 @@ const ue = S(function({
   downloadable: w = !0,
   onDownload: i,
   className: C,
-  style: k,
-  ...B
-}, D) {
-  const N = H(), l = ne(e, a), p = v ?? ((a == null ? void 0 : a.startsWith("image/")) || ee.has(l)), { base: E, ext: _ } = oe(e), [x, F] = A(null);
-  O(() => {
+  style: B,
+  ...D
+}, N) {
+  const E = H(), l = ne(e, a), h = b ?? ((a == null ? void 0 : a.startsWith("image/")) || ee.has(l)), { base: F, ext: _ } = oe(e), [x, I] = O(null);
+  y(() => {
     if (!u || r != null || !t || typeof fetch > "u") return;
     let s = !1;
-    return fetch(t, { method: "HEAD" }).then((M) => {
-      const b = M.headers.get("content-length");
-      !s && b && F(Number(b));
+    return fetch(t, { method: "HEAD" }).then((S) => {
+      const g = S.headers.get("content-length");
+      !s && g && I(Number(g));
     }).catch(() => {
     }), () => {
       s = !0;
     };
   }, [u, r, t]);
-  const I = r != null ? typeof r == "number" ? g(r) : r : x != null ? g(x) : "", j = [l ? l.toUpperCase() : "", I].filter(Boolean).join(" · "), h = T ?? (j || null), q = () => {
+  const j = r != null ? typeof r == "number" ? v(r) : r : x != null ? v(x) : "", q = [l ? l.toUpperCase() : "", j].filter(Boolean).join(" · "), p = T ?? (q || null), M = () => {
     if (i) return i();
     if (!t) return;
     const s = document.createElement("a");
@@ -104,17 +104,17 @@ const ue = S(function({
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: D,
-      className: y(o.fileCard, o[d], C),
-      style: { "--tz-btn-rgb": `var(--tz-color-${f}-rgb)`, ...k },
-      ...B,
+      ref: N,
+      className: L(o.fileCard, o[d], C),
+      style: { "--tz-btn-rgb": `var(--tz-color-${f}-rgb)`, ...B },
+      ...D,
       children: [
         /* @__PURE__ */ c(
-          L,
+          $,
           {
             className: o.avatar,
-            src: p ? t : void 0,
-            icon: p ? void 0 : te[l] ?? "Document",
+            src: h ? t : void 0,
+            icon: h ? void 0 : te[l] ?? "Document",
             name: e,
             shape: "square",
             size: d,
@@ -123,20 +123,20 @@ const ue = S(function({
         ),
         /* @__PURE__ */ m("div", { className: o.body, children: [
           /* @__PURE__ */ m("span", { className: o.name, title: e, children: [
-            /* @__PURE__ */ c("span", { className: o.nameBase, children: E }),
+            /* @__PURE__ */ c("span", { className: o.nameBase, children: F }),
             _ && /* @__PURE__ */ c("span", { className: o.nameExt, children: _ })
           ] }),
-          h != null && /* @__PURE__ */ c(G, { as: "span", variant: "bodySmall", color: "muted", uppercase: !0, className: o.type, children: h })
+          p != null && /* @__PURE__ */ c(G, { as: "span", variant: "bodySmall", color: "muted", uppercase: !0, className: o.type, children: p })
         ] }),
         w && (t || i) && /* @__PURE__ */ c(
-          $,
+          V,
           {
             variant: "filled",
             size: d === "lg" ? "md" : "sm",
             className: o.download,
-            "aria-label": N("fileCard.download", { name: e }),
-            onClick: q,
-            children: /* @__PURE__ */ c(V, { name: "ImportArrow" })
+            "aria-label": E("fileCard.download", { name: e }),
+            onClick: M,
+            children: /* @__PURE__ */ c(k, { name: "ImportArrow" })
           }
         )
       ]
@@ -146,4 +146,4 @@ const ue = S(function({
 export {
   ue as F
 };
-//# sourceMappingURL=FileCard-kVnjcSlk.js.map
+//# sourceMappingURL=FileCard-D4TB3qGG.js.map

package/dist/{FileCard-kVnjcSlk.js.map → FileCard-D4TB3qGG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FileCard-kVnjcSlk.js","sources":["../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Avatar, type AvatarSize } from '../Avatar'\nimport { IconButton } from '../IconButton'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\nimport type { IconName } from '../../icons/names'\nimport styles from './FileCard.module.css'\n\nexport type FileCardSize = AvatarSize\n\nconst IMAGE_EXTS = new Set([\n  'png',\n  'jpg',\n  'jpeg',\n  'webp',\n  'svg',\n  'gif',\n  'avif',\n  'bmp',\n  'ico',\n  'heic',\n])\n\n// a leading icon per file family (non-image); everything else gets the generic document icon\nconst FILE_ICONS: Record<string, IconName> = {\n  pdf: 'DocumentText',\n  doc: 'DocumentText',\n  docx: 'DocumentText',\n  txt: 'DocumentText',\n  rtf: 'DocumentText',\n  md: 'DocumentText',\n  csv: 'DocumentText',\n  xls: 'DocumentText',\n  xlsx: 'DocumentText',\n  json: 'DocumentCode',\n  xml: 'DocumentCode',\n  zip: 'Folder',\n  rar: 'Folder',\n  '7z': 'Folder',\n  mp4: 'VideoSquare',\n  mov: 'VideoSquare',\n  webm: 'VideoSquare',\n  mp3: 'MusicSquare',\n  wav: 'MusicSquare',\n}\n\n/** The lowercased extension from a file name, else the subtype from a MIME `type` (`image/png` → `png`). */\nfunction extensionOf(name: string, type?: string): string {\n  const dot = name.lastIndexOf('.')\n  if (dot > 0 && name.length - dot <= 7) return name.slice(dot + 1).toLowerCase()\n  if (type && type.includes('/')) return type.slice(type.indexOf('/') + 1).toLowerCase()\n  return ''\n}\n\n/** Split `report.pdf` into `{ base: 'report', ext: '.pdf' }` so the base can ellipsize and the type stays. */\nfunction splitName(name: string): { base: string; ext: string } {\n  const dot = name.lastIndexOf('.')\n  return dot > 0 && name.length - dot <= 7\n    ? { base: name.slice(0, dot), ext: name.slice(dot) }\n    : { base: name, ext: '' }\n}\n\n/** Human-readable byte size — `2411724` → `\"2.3 MB\"`. */\nfunction formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return ''\n  if (bytes < 1024) return `${bytes} B`\n  const units = ['KB', 'MB', 'GB', 'TB']\n  let value = bytes / 1024\n  let i = 0\n  while (value >= 1024 && i < units.length - 1) {\n    value /= 1024\n    i += 1\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`\n}\n\nexport interface FileCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** File name — shown middle-truncated (`test-file-na….pdf`) so the extension always stays visible. */\n  name: string\n  /** File URL — the download target and, for an image, the thumbnail `src`. */\n  src?: string\n  /**\n   * File MIME type (`'image/png'`) — `image/*` forces image rendering; it supplies the type label only when\n   * `name` has no extension (the name's extension wins). A bare extension here is ignored.\n   */\n  type?: string\n  /** Force image vs. file rendering. Inferred from `type` / `name` when omitted. */\n  image?: boolean\n  /** File size — a **bytes** number (auto-formatted to `\"2.3 MB\"`) or a preformatted string. Shown after the type. */\n  fileSize?: number | string\n  /**\n   * When no `fileSize` is given, fetch it from `src` via a `HEAD` request (reads `Content-Length`). Off\n   * by default — it's a network call and needs CORS to expose the header; prefer passing `fileSize` from\n   * the backend. Fails silently (no size shown) when unavailable.\n   */\n  fetchSize?: boolean\n  /** Meta line under the name — overrides the derived `TYPE · size`. */\n  meta?: ReactNode\n  /** Theme token tinting the avatar / file-icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Size — scales the avatar, text and padding. Defaults to `md`. */\n  size?: FileCardSize\n  /** Show the download control (only when there's a `src` or `onDownload`). Defaults to `true`. */\n  downloadable?: boolean\n  /** Custom download handler — replaces the default (a download of `src`). */\n  onDownload?: () => void\n}\n\n/**\n * A compact, read-only **file card** for displaying a file that already exists (e.g. from the backend) —\n * an image or a document (`pdf` / `docx` / `csv` / `svg` / …). Shows a leading **`Avatar`** (the image\n * thumbnail via `src`, or a type-based file icon in a tinted square), the **name** middle-truncated so\n * the extension is never lost, the **type** underneath, and a **download** control. Simple to drop in —\n * pass `name` (+ `src` for the thumbnail/download). Not to be confused with `FileUploader` (which\n * *collects* files to upload); this only *displays* one. Token-only styling.\n *\n * @example\n * <FileCard name=\"annual-report.pdf\" src=\"/files/annual-report.pdf\" />\n * <FileCard name=\"avatar.png\" src={url} meta=\"240 KB\" />\n */\nexport const FileCard = forwardRef<HTMLDivElement, FileCardProps>(function FileCard(\n  {\n    name,\n    src,\n    type,\n    image,\n    fileSize,\n    fetchSize = false,\n    meta,\n    color = 'accent',\n    size = 'md',\n    downloadable = true,\n    onDownload,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const ext = extensionOf(name, type)\n  const isImage = image ?? (type?.startsWith('image/') || IMAGE_EXTS.has(ext))\n  const { base, ext: nameExt } = splitName(name)\n\n  // optional auto size via a HEAD request (only when opted in and no explicit fileSize)\n  const [fetchedSize, setFetchedSize] = useState<number | null>(null)\n  useEffect(() => {\n    if (!fetchSize || fileSize != null || !src || typeof fetch === 'undefined') return\n    let cancelled = false\n    fetch(src, { method: 'HEAD' })\n      .then((res) => {\n        const len = res.headers.get('content-length')\n        if (!cancelled && len) setFetchedSize(Number(len))\n      })\n      .catch(() => {})\n    return () => {\n      cancelled = true\n    }\n  }, [fetchSize, fileSize, src])\n\n  const sizeText =\n    fileSize != null\n      ? typeof fileSize === 'number'\n        ? formatBytes(fileSize)\n        : fileSize\n      : fetchedSize != null\n        ? formatBytes(fetchedSize)\n        : ''\n  // \"TYPE · 2.3 MB\" (either part optional) — overridden wholesale by `meta`\n  const derivedMeta = [ext ? ext.toUpperCase() : '', sizeText].filter(Boolean).join(' · ')\n  const metaLine = meta ?? (derivedMeta || null)\n\n  const handleDownload = () => {\n    if (onDownload) return onDownload()\n    if (!src) return\n    const a = document.createElement('a')\n    a.href = src\n    a.download = name\n    a.rel = 'noopener'\n    a.click()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.fileCard, styles[size], className)}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      {...props}\n    >\n      <Avatar\n        className={styles.avatar}\n        src={isImage ? src : undefined}\n        icon={isImage ? undefined : (FILE_ICONS[ext] ?? 'Document')}\n        name={name}\n        shape=\"square\"\n        size={size}\n        color={color}\n      />\n      <div className={styles.body}>\n        <span className={styles.name} title={name}>\n          <span className={styles.nameBase}>{base}</span>\n          {nameExt && <span className={styles.nameExt}>{nameExt}</span>}\n        </span>\n        {metaLine != null && (\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\" uppercase className={styles.type}>\n            {metaLine}\n          </Typography>\n        )}\n      </div>\n      {downloadable && (src || onDownload) && (\n        <IconButton\n          variant=\"filled\"\n          size={size === 'lg' ? 'md' : 'sm'}\n          className={styles.download}\n          aria-label={t('fileCard.download', { name })}\n          onClick={handleDownload}\n        >\n          <Icon name=\"ImportArrow\" />\n        </IconButton>\n      )}\n    </div>\n  )\n})\n"],"names":["IMAGE_EXTS","FILE_ICONS","extensionOf","name","type","dot","splitName","formatBytes","bytes","units","value","i","FileCard","forwardRef","src","image","fileSize","fetchSize","meta","color","size","downloadable","onDownload","className","style","props","ref","t","useT","ext","isImage","base","nameExt","fetchedSize","setFetchedSize","useState","useEffect","cancelled","res","len","sizeText","derivedMeta","metaLine","handleDownload","a","jsxs","clsx","styles","jsx","Avatar","Typography","IconButton","Icon"],"mappings":"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"}
+{"version":3,"file":"FileCard-D4TB3qGG.js","sources":["../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Avatar, type AvatarSize } from '../Avatar'\nimport { IconButton } from '../IconButton'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\nimport type { IconName } from '../../icons/names'\nimport styles from './FileCard.module.css'\n\nexport type FileCardSize = AvatarSize\n\nconst IMAGE_EXTS = new Set([\n  'png',\n  'jpg',\n  'jpeg',\n  'webp',\n  'svg',\n  'gif',\n  'avif',\n  'bmp',\n  'ico',\n  'heic',\n])\n\n// a leading icon per file family (non-image); everything else gets the generic document icon\nconst FILE_ICONS: Record<string, IconName> = {\n  pdf: 'DocumentText',\n  doc: 'DocumentText',\n  docx: 'DocumentText',\n  txt: 'DocumentText',\n  rtf: 'DocumentText',\n  md: 'DocumentText',\n  csv: 'DocumentText',\n  xls: 'DocumentText',\n  xlsx: 'DocumentText',\n  json: 'DocumentCode',\n  xml: 'DocumentCode',\n  zip: 'Folder',\n  rar: 'Folder',\n  '7z': 'Folder',\n  mp4: 'VideoSquare',\n  mov: 'VideoSquare',\n  webm: 'VideoSquare',\n  mp3: 'MusicSquare',\n  wav: 'MusicSquare',\n}\n\n/** The lowercased extension from a file name, else the subtype from a MIME `type` (`image/png` → `png`). */\nfunction extensionOf(name: string, type?: string): string {\n  const dot = name.lastIndexOf('.')\n  if (dot > 0 && name.length - dot <= 7) return name.slice(dot + 1).toLowerCase()\n  if (type && type.includes('/')) return type.slice(type.indexOf('/') + 1).toLowerCase()\n  return ''\n}\n\n/** Split `report.pdf` into `{ base: 'report', ext: '.pdf' }` so the base can ellipsize and the type stays. */\nfunction splitName(name: string): { base: string; ext: string } {\n  const dot = name.lastIndexOf('.')\n  return dot > 0 && name.length - dot <= 7\n    ? { base: name.slice(0, dot), ext: name.slice(dot) }\n    : { base: name, ext: '' }\n}\n\n/** Human-readable byte size — `2411724` → `\"2.3 MB\"`. */\nfunction formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return ''\n  if (bytes < 1024) return `${bytes} B`\n  const units = ['KB', 'MB', 'GB', 'TB']\n  let value = bytes / 1024\n  let i = 0\n  while (value >= 1024 && i < units.length - 1) {\n    value /= 1024\n    i += 1\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`\n}\n\nexport interface FileCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** File name — shown middle-truncated (`test-file-na….pdf`) so the extension always stays visible. */\n  name: string\n  /** File URL — the download target and, for an image, the thumbnail `src`. */\n  src?: string\n  /**\n   * File MIME type (`'image/png'`) — `image/*` forces image rendering; it supplies the type label only when\n   * `name` has no extension (the name's extension wins). A bare extension here is ignored.\n   */\n  type?: string\n  /** Force image vs. file rendering. Inferred from `type` / `name` when omitted. */\n  image?: boolean\n  /** File size — a **bytes** number (auto-formatted to `\"2.3 MB\"`) or a preformatted string. Shown after the type. */\n  fileSize?: number | string\n  /**\n   * When no `fileSize` is given, fetch it from `src` via a `HEAD` request (reads `Content-Length`). Off\n   * by default — it's a network call and needs CORS to expose the header; prefer passing `fileSize` from\n   * the backend. Fails silently (no size shown) when unavailable.\n   */\n  fetchSize?: boolean\n  /** Meta line under the name — overrides the derived `TYPE · size`. */\n  meta?: ReactNode\n  /** Theme token tinting the avatar / file-icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Size — scales the avatar, text and padding. Defaults to `md`. */\n  size?: FileCardSize\n  /** Show the download control (only when there's a `src` or `onDownload`). Defaults to `true`. */\n  downloadable?: boolean\n  /** Custom download handler — replaces the default (a download of `src`). */\n  onDownload?: () => void\n}\n\n/**\n * A compact, read-only **file card** for displaying a file that already exists (e.g. from the backend) —\n * an image or a document (`pdf` / `docx` / `csv` / `svg` / …). Shows a leading **`Avatar`** (the image\n * thumbnail via `src`, or a type-based file icon in a tinted square), the **name** middle-truncated so\n * the extension is never lost, the **type** underneath, and a **download** control. Simple to drop in —\n * pass `name` (+ `src` for the thumbnail/download). Not to be confused with `FileUploader` (which\n * *collects* files to upload); this only *displays* one. Token-only styling.\n *\n * @example\n * <FileCard name=\"annual-report.pdf\" src=\"/files/annual-report.pdf\" />\n * <FileCard name=\"avatar.png\" src={url} meta=\"240 KB\" />\n */\nexport const FileCard = forwardRef<HTMLDivElement, FileCardProps>(function FileCard(\n  {\n    name,\n    src,\n    type,\n    image,\n    fileSize,\n    fetchSize = false,\n    meta,\n    color = 'accent',\n    size = 'md',\n    downloadable = true,\n    onDownload,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const ext = extensionOf(name, type)\n  const isImage = image ?? (type?.startsWith('image/') || IMAGE_EXTS.has(ext))\n  const { base, ext: nameExt } = splitName(name)\n\n  // optional auto size via a HEAD request (only when opted in and no explicit fileSize)\n  const [fetchedSize, setFetchedSize] = useState<number | null>(null)\n  useEffect(() => {\n    if (!fetchSize || fileSize != null || !src || typeof fetch === 'undefined') return\n    let cancelled = false\n    fetch(src, { method: 'HEAD' })\n      .then((res) => {\n        const len = res.headers.get('content-length')\n        if (!cancelled && len) setFetchedSize(Number(len))\n      })\n      .catch(() => {})\n    return () => {\n      cancelled = true\n    }\n  }, [fetchSize, fileSize, src])\n\n  const sizeText =\n    fileSize != null\n      ? typeof fileSize === 'number'\n        ? formatBytes(fileSize)\n        : fileSize\n      : fetchedSize != null\n        ? formatBytes(fetchedSize)\n        : ''\n  // \"TYPE · 2.3 MB\" (either part optional) — overridden wholesale by `meta`\n  const derivedMeta = [ext ? ext.toUpperCase() : '', sizeText].filter(Boolean).join(' · ')\n  const metaLine = meta ?? (derivedMeta || null)\n\n  const handleDownload = () => {\n    if (onDownload) return onDownload()\n    if (!src) return\n    const a = document.createElement('a')\n    a.href = src\n    a.download = name\n    a.rel = 'noopener'\n    a.click()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.fileCard, styles[size], className)}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      {...props}\n    >\n      <Avatar\n        className={styles.avatar}\n        src={isImage ? src : undefined}\n        icon={isImage ? undefined : (FILE_ICONS[ext] ?? 'Document')}\n        name={name}\n        shape=\"square\"\n        size={size}\n        color={color}\n      />\n      <div className={styles.body}>\n        <span className={styles.name} title={name}>\n          <span className={styles.nameBase}>{base}</span>\n          {nameExt && <span className={styles.nameExt}>{nameExt}</span>}\n        </span>\n        {metaLine != null && (\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\" uppercase className={styles.type}>\n            {metaLine}\n          </Typography>\n        )}\n      </div>\n      {downloadable && (src || onDownload) && (\n        <IconButton\n          variant=\"filled\"\n          size={size === 'lg' ? 'md' : 'sm'}\n          className={styles.download}\n          aria-label={t('fileCard.download', { name })}\n          onClick={handleDownload}\n        >\n          <Icon name=\"ImportArrow\" />\n        </IconButton>\n      )}\n    </div>\n  )\n})\n"],"names":["IMAGE_EXTS","FILE_ICONS","extensionOf","name","type","dot","splitName","formatBytes","bytes","units","value","i","FileCard","forwardRef","src","image","fileSize","fetchSize","meta","color","size","downloadable","onDownload","className","style","props","ref","t","useT","ext","isImage","base","nameExt","fetchedSize","setFetchedSize","useState","useEffect","cancelled","res","len","sizeText","derivedMeta","metaLine","handleDownload","a","jsxs","clsx","styles","jsx","Avatar","Typography","IconButton","Icon"],"mappings":"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"}