@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

package/dist/elements/Thumbnail/createThumbnail.js

@@ -1,57 +1,56 @@
 /**
  * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
- */ export const createThumbnail = (file)=>{
-    return new Promise((resolve, reject)=>{
-        const img = new Image();
-        img.src = URL.createObjectURL(file);
-        // Use Object URL directly
-        img.onload = ()=>{
-            const maxDimension = 280;
-            let drawHeight, drawWidth;
-            // Calculate aspect ratio
-            const aspectRatio = img.width / img.height;
-            // Determine dimensions to fit within maxDimension while maintaining aspect ratio
-            if (aspectRatio > 1) {
-                // Image is wider than tall
-                drawWidth = maxDimension;
-                drawHeight = maxDimension / aspectRatio;
-            } else {
-                // Image is taller than wide, or square
-                drawWidth = maxDimension * aspectRatio;
-                drawHeight = maxDimension;
-            }
-            const canvas = new OffscreenCanvas(drawWidth, drawHeight);
-            // Create an OffscreenCanvas
-            const ctx = canvas.getContext('2d');
-            // Determine output format based on input file type
-            const outputFormat = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
-            const quality = file.type === 'image/png' ? undefined : 0.8;
-            // PNG doesn't use quality, use higher quality for JPEG
-            // Draw the image onto the OffscreenCanvas with calculated dimensions
-            ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
-            // Convert the OffscreenCanvas to a Blob and free up memory
-            canvas.convertToBlob({
-                type: outputFormat,
-                ...quality && {
-                    quality
-                }
-            }).then((blob)=>{
-                URL.revokeObjectURL(img.src);
-                // Release the Object URL
-                const reader = new FileReader();
-                reader.onload = ()=>resolve(reader.result);
-                // Resolve as data URL
-                reader.onerror = reject;
-                reader.readAsDataURL(blob);
-            }).catch(reject);
-        };
-        img.onerror = (error)=>{
-            URL.revokeObjectURL(img.src);
-            // Release Object URL on error
-            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-            reject(error);
-        };
-    });
+ */export const createThumbnail = file => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file) // Use Object URL directly
+    ;
+    img.onload = () => {
+      const maxDimension = 280;
+      let drawHeight, drawWidth;
+      // Calculate aspect ratio
+      const aspectRatio = img.width / img.height;
+      // Determine dimensions to fit within maxDimension while maintaining aspect ratio
+      if (aspectRatio > 1) {
+        // Image is wider than tall
+        drawWidth = maxDimension;
+        drawHeight = maxDimension / aspectRatio;
+      } else {
+        // Image is taller than wide, or square
+        drawWidth = maxDimension * aspectRatio;
+        drawHeight = maxDimension;
+      }
+      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas
+      ;
+      const ctx = canvas.getContext('2d');
+      // Determine output format based on input file type
+      const outputFormat = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
+      const quality = file.type === 'image/png' ? undefined : 0.8 // PNG doesn't use quality, use higher quality for JPEG
+      ;
+      // Draw the image onto the OffscreenCanvas with calculated dimensions
+      ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
+      // Convert the OffscreenCanvas to a Blob and free up memory
+      canvas.convertToBlob({
+        type: outputFormat,
+        ...(quality && {
+          quality
+        })
+      }).then(blob => {
+        URL.revokeObjectURL(img.src) // Release the Object URL
+        ;
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result) // Resolve as data URL
+        ;
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      }).catch(reject);
+    };
+    img.onerror = error => {
+      URL.revokeObjectURL(img.src) // Release Object URL on error
+      ;
+      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+      reject(error);
+    };
+  });
 };
-
 //# sourceMappingURL=createThumbnail.js.map

package/dist/elements/Thumbnail/createThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Determine output format based on input file type\n      const outputFormat = file.type === 'image/png' ? 'image/png' : 'image/jpeg'\n      const quality = file.type === 'image/png' ? undefined : 0.8 // PNG doesn't use quality, use higher quality for JPEG\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: outputFormat, ...(quality && { quality }) })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","outputFormat","type","quality","undefined","drawImage","convertToBlob","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,kBAAkB,CAACC;IAC9B,OAAO,IAAIC,QAAQ,CAACC,SAASC;QAC3B,MAAMC,MAAM,IAAIC;QAChBD,IAAIE,GAAG,GAAGC,IAAIC,eAAe,CAACR;QAAM,0BAA0B;QAE9DI,IAAIK,MAAM,GAAG;YACX,MAAMC,eAAe;YACrB,IAAIC,YAAoBC;YAExB,yBAAyB;YACzB,MAAMC,cAAcT,IAAIU,KAAK,GAAGV,IAAIW,MAAM;YAE1C,iFAAiF;YACjF,IAAIF,cAAc,GAAG;gBACnB,2BAA2B;gBAC3BD,YAAYF;gBACZC,aAAaD,eAAeG;YAC9B,OAAO;gBACL,uCAAuC;gBACvCD,YAAYF,eAAeG;gBAC3BF,aAAaD;YACf;YAEA,MAAMM,SAAS,IAAIC,gBAAgBL,WAAWD;YAAY,4BAA4B;YACtF,MAAMO,MAAMF,OAAOG,UAAU,CAAC;YAE9B,mDAAmD;YACnD,MAAMC,eAAepB,KAAKqB,IAAI,KAAK,cAAc,cAAc;YAC/D,MAAMC,UAAUtB,KAAKqB,IAAI,KAAK,cAAcE,YAAY;YAAI,uDAAuD;YAEnH,qEAAqE;YACrEL,IAAIM,SAAS,CAACpB,KAAK,GAAG,GAAGQ,WAAWD;YAEpC,2DAA2D;YAC3DK,OACGS,aAAa,CAAC;gBAAEJ,MAAMD;gBAAc,GAAIE,WAAW;oBAAEA;gBAAQ,CAAC;YAAE,GAChEI,IAAI,CAAC,CAACC;gBACLpB,IAAIqB,eAAe,CAACxB,IAAIE,GAAG;gBAAE,yBAAyB;gBACtD,MAAMuB,SAAS,IAAIC;gBACnBD,OAAOpB,MAAM,GAAG,IAAMP,QAAQ2B,OAAOE,MAAM;gBAAY,sBAAsB;gBAC7EF,OAAOG,OAAO,GAAG7B;gBACjB0B,OAAOI,aAAa,CAACN;YACvB,GACCO,KAAK,CAAC/B;QACX;QAEAC,IAAI4B,OAAO,GAAG,CAACG;YACb5B,IAAIqB,eAAe,CAACxB,IAAIE,GAAG;YAAE,8BAA8B;YAC3D,2EAA2E;YAC3EH,OAAOgC;QACT;IACF;AACF,EAAC"}
+{"version":3,"file":"createThumbnail.js","names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","outputFormat","type","quality","undefined","drawImage","convertToBlob","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Determine output format based on input file type\n      const outputFormat = file.type === 'image/png' ? 'image/png' : 'image/jpeg'\n      const quality = file.type === 'image/png' ? undefined : 0.8 // PNG doesn't use quality, use higher quality for JPEG\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: outputFormat, ...(quality && { quality }) })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"mappings":"AAAA;;GAGA,OAAO,MAAMA,eAAA,GAAmBC,IAAA;EAC9B,OAAO,IAAIC,OAAA,CAAQ,CAACC,OAAA,EAASC,MAAA;IAC3B,MAAMC,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIE,GAAG,GAAGC,GAAA,CAAIC,eAAe,CAACR,IAAA,EAAM;IAAA;IAEpCI,GAAA,CAAIK,MAAM,GAAG;MACX,MAAMC,YAAA,GAAe;MACrB,IAAIC,UAAA,EAAoBC,SAAA;MAExB;MACA,MAAMC,WAAA,GAAcT,GAAA,CAAIU,KAAK,GAAGV,GAAA,CAAIW,MAAM;MAE1C;MACA,IAAIF,WAAA,GAAc,GAAG;QACnB;QACAD,SAAA,GAAYF,YAAA;QACZC,UAAA,GAAaD,YAAA,GAAeG,WAAA;MAC9B,OAAO;QACL;QACAD,SAAA,GAAYF,YAAA,GAAeG,WAAA;QAC3BF,UAAA,GAAaD,YAAA;MACf;MAEA,MAAMM,MAAA,GAAS,IAAIC,eAAA,CAAgBL,SAAA,EAAWD,UAAA,EAAY;MAAA;MAC1D,MAAMO,GAAA,GAAMF,MAAA,CAAOG,UAAU,CAAC;MAE9B;MACA,MAAMC,YAAA,GAAepB,IAAA,CAAKqB,IAAI,KAAK,cAAc,cAAc;MAC/D,MAAMC,OAAA,GAAUtB,IAAA,CAAKqB,IAAI,KAAK,cAAcE,SAAA,GAAY,IAAI;MAAA;MAE5D;MACAL,GAAA,CAAIM,SAAS,CAACpB,GAAA,EAAK,GAAG,GAAGQ,SAAA,EAAWD,UAAA;MAEpC;MACAK,MAAA,CACGS,aAAa,CAAC;QAAEJ,IAAA,EAAMD,YAAA;QAAc,IAAIE,OAAA,IAAW;UAAEA;QAAQ,CAAC;MAAE,GAChEI,IAAI,CAAEC,IAAA;QACLpB,GAAA,CAAIqB,eAAe,CAACxB,GAAA,CAAIE,GAAG,EAAE;QAAA;QAC7B,MAAMuB,MAAA,GAAS,IAAIC,UAAA;QACnBD,MAAA,CAAOpB,MAAM,GAAG,MAAMP,OAAA,CAAQ2B,MAAA,CAAOE,MAAM,EAAY;QAAA;QACvDF,MAAA,CAAOG,OAAO,GAAG7B,MAAA;QACjB0B,MAAA,CAAOI,aAAa,CAACN,IAAA;MACvB,GACCO,KAAK,CAAC/B,MAAA;IACX;IAEAC,GAAA,CAAI4B,OAAO,GAAIG,KAAA;MACb5B,GAAA,CAAIqB,eAAe,CAACxB,GAAA,CAAIE,GAAG,EAAE;MAAA;MAC7B;MACAH,MAAA,CAAOgC,KAAA;IACT;EACF;AACF","ignoreList":[]}

package/dist/elements/Thumbnail/index.js

@@ -1,86 +1,158 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
-export const Thumbnail = (props)=>{
-    const { className = '', doc: { filename } = {}, fileSrc, height, imageCacheTag, size, width } = props;
-    const [fileExists, setFileExists] = React.useState(undefined);
-    const classNames = [
-        baseClass,
-        `${baseClass}--size-${size || 'medium'}`,
-        className
-    ].join(' ');
-    React.useEffect(()=>{
-        if (!fileSrc) {
-            setFileExists(false);
-            return;
-        }
-        setFileExists(undefined);
-        const img1 = new Image();
-        img1.src = fileSrc;
-        img1.onload = ()=>{
-            setFileExists(true);
-        };
-        img1.onerror = ()=>{
-            setFileExists(false);
-        };
-    }, [
-        fileSrc
-    ]);
-    let src = null;
-    /**
-   * If an imageCacheTag is provided, append it to the fileSrc
-   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand
-   */ if (fileSrc) {
-        const queryChar = fileSrc?.includes('?') ? '&' : '?';
-        src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
-    }
-    return <div className={classNames}>
-      {fileExists === undefined && <ShimmerEffect height="100%"/>}
-      {fileExists && <img alt={filename} height={height} src={src} width={width}/>}
-      {fileExists === false && <File/>}
-    </div>;
+export const Thumbnail = props => {
+  const $ = _c(6);
+  const {
+    className: t0,
+    doc: t1,
+    fileSrc,
+    height,
+    imageCacheTag,
+    size,
+    width
+  } = props;
+  const className = t0 === undefined ? "" : t0;
+  const {
+    filename
+  } = t1 === undefined ? {} : t1;
+  const [fileExists, setFileExists] = React.useState(undefined);
+  const t2 = `${baseClass}--size-${size || "medium"}`;
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = [baseClass, t2, className];
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const classNames = t3.join(" ");
+  let t4;
+  let t5;
+  if ($[3] !== fileSrc) {
+    t4 = () => {
+      if (!fileSrc) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = fileSrc;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
+    };
+    t5 = [fileSrc];
+    $[3] = fileSrc;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t4 = $[4];
+    t5 = $[5];
+  }
+  React.useEffect(t4, t5);
+  let src = null;
+  if (fileSrc) {
+    const queryChar = fileSrc?.includes("?") ? "&" : "?";
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
+  }
+  return _jsxs("div", {
+    className: classNames,
+    children: [fileExists === undefined && _jsx(ShimmerEffect, {
+      height: "100%"
+    }), fileExists && _jsx("img", {
+      alt: filename,
+      height,
+      src,
+      width
+    }), fileExists === false && _jsx(File, {})]
+  });
 };
 export function ThumbnailComponent(props) {
-    const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props;
-    const [fileExists, setFileExists] = React.useState(undefined);
-    const classNames = [
-        baseClass,
-        `${baseClass}--size-${size || 'medium'}`,
-        className
-    ].join(' ');
-    React.useEffect(()=>{
-        if (!fileSrc) {
-            setFileExists(false);
-            return;
-        }
-        setFileExists(undefined);
-        const img1 = new Image();
-        img1.src = fileSrc;
-        img1.onload = ()=>{
-            setFileExists(true);
-        };
-        img1.onerror = ()=>{
-            setFileExists(false);
-        };
-    }, [
-        fileSrc
-    ]);
-    let src = '';
-    /**
-   * If an imageCacheTag is provided, append it to the fileSrc
-   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand
-   */ if (fileSrc) {
-        const queryChar = fileSrc?.includes('?') ? '&' : '?';
-        src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
-    }
-    return <div className={classNames}>
-      {fileExists === undefined && <ShimmerEffect height="100%"/>}
-      {fileExists && <img alt={alt || filename} src={src}/>}
-      {fileExists === false && <File/>}
-    </div>;
+  const $ = _c(12);
+  const {
+    alt,
+    className: t0,
+    filename,
+    fileSrc,
+    imageCacheTag,
+    size
+  } = props;
+  const className = t0 === undefined ? "" : t0;
+  const [fileExists, setFileExists] = React.useState(undefined);
+  const t1 = `${baseClass}--size-${size || "medium"}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = [baseClass, t1, className];
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const classNames = t2.join(" ");
+  let t3;
+  let t4;
+  if ($[3] !== fileSrc) {
+    t3 = () => {
+      if (!fileSrc) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = fileSrc;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
+    };
+    t4 = [fileSrc];
+    $[3] = fileSrc;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  React.useEffect(t3, t4);
+  let src = "";
+  if (fileSrc) {
+    const queryChar = fileSrc?.includes("?") ? "&" : "?";
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
+  }
+  let t5;
+  if ($[6] !== alt || $[7] !== classNames || $[8] !== fileExists || $[9] !== filename || $[10] !== src) {
+    t5 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), fileExists && _jsx("img", {
+        alt: alt || filename,
+        src
+      }), fileExists === false && _jsx(File, {})]
+    });
+    $[6] = alt;
+    $[7] = classNames;
+    $[8] = fileExists;
+    $[9] = filename;
+    $[10] = src;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
 }
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Thumbnail/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  let src: null | string = null\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  let src: string = ''\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","src","onload","onerror","queryChar","includes","encodeURIComponent","div","alt","ThumbnailComponent"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAczD,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EACJC,YAAY,EAAE,EACdC,KAAK,EAAEC,QAAQ,EAAE,GAAG,CAAC,CAAC,EACtBC,OAAO,EACPC,MAAM,EACNC,aAAa,EACbC,IAAI,EACJC,KAAK,EACN,GAAGR;IACJ,MAAM,CAACS,YAAYC,cAAc,GAAGf,MAAMgB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACjB;QAAW,GAAGA,UAAU,OAAO,EAAEW,QAAQ,UAAU;QAAEN;KAAU,CAACa,IAAI,CAAC;IAEzFnB,MAAMoB,SAAS,CAAC;QACd,IAAI,CAACX,SAAS;YACZM,cAAc;YACd;QACF;QACAA,cAAcE;QAEd,MAAMI,OAAM,IAAIC;QAChBD,KAAIE,GAAG,GAAGd;QACVY,KAAIG,MAAM,GAAG;YACXT,cAAc;QAChB;QACAM,KAAII,OAAO,GAAG;YACZV,cAAc;QAChB;IACF,GAAG;QAACN;KAAQ;IAEZ,IAAIc,MAAqB;IAEzB;;;GAGC,GACD,IAAId,SAAS;QACX,MAAMiB,YAAYjB,SAASkB,SAAS,OAAO,MAAM;QACjDJ,MAAMZ,gBAAgB,GAAGF,UAAUiB,YAAYE,mBAAmBjB,gBAAgB,GAAGF;IACvF;IAEA,QACGoB,IAAIvB,WAAWY,YAAY;MAC1B,CAACJ,eAAeG,cAAcd,cAAcO,OAAO,SAAU;MAC7D,CAACI,eAAeO,IAAIS,KAAKtB,UAAoBE,QAAQA,QAAQa,KAAKA,KAAKV,OAAOA,SAAU;MACxF,CAACC,eAAe,UAAUZ,OAAQ;IACpC,EAAE2B;AAEN,EAAC;AAUD,OAAO,SAASE,mBAAmB1B,KAA8B;IAC/D,MAAM,EAAEyB,GAAG,EAAExB,YAAY,EAAE,EAAEE,QAAQ,EAAEC,OAAO,EAAEE,aAAa,EAAEC,IAAI,EAAE,GAAGP;IACxE,MAAM,CAACS,YAAYC,cAAc,GAAGf,MAAMgB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACjB;QAAW,GAAGA,UAAU,OAAO,EAAEW,QAAQ,UAAU;QAAEN;KAAU,CAACa,IAAI,CAAC;IAEzFnB,MAAMoB,SAAS,CAAC;QACd,IAAI,CAACX,SAAS;YACZM,cAAc;YACd;QACF;QACAA,cAAcE;QAEd,MAAMI,OAAM,IAAIC;QAChBD,KAAIE,GAAG,GAAGd;QACVY,KAAIG,MAAM,GAAG;YACXT,cAAc;QAChB;QACAM,KAAII,OAAO,GAAG;YACZV,cAAc;QAChB;IACF,GAAG;QAACN;KAAQ;IAEZ,IAAIc,MAAc;IAElB;;;GAGC,GACD,IAAId,SAAS;QACX,MAAMiB,YAAYjB,SAASkB,SAAS,OAAO,MAAM;QACjDJ,MAAMZ,gBAAgB,GAAGF,UAAUiB,YAAYE,mBAAmBjB,gBAAgB,GAAGF;IACvF;IAEA,QACGoB,IAAIvB,WAAWY,YAAY;MAC1B,CAACJ,eAAeG,cAAcd,cAAcO,OAAO,SAAU;MAC7D,CAACI,eAAeO,IAAIS,KAAKA,OAAOtB,UAAUe,KAAKA,OAAQ;MACvD,CAACT,eAAe,UAAUZ,OAAQ;IACpC,EAAE2B;AAEN"}
+{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","height","imageCacheTag","size","width","undefined","filename","fileExists","setFileExists","useState","t2","t3","classNames","join","t4","t5","img","Image","src","onload","onerror","useEffect","queryChar","includes","encodeURIComponent","_jsxs","children","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  height?: number\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  let src: null | string = null\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  let src: string = ''\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ThumbnailCard/index.js

@@ -1,33 +1,80 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.scss';
 const baseClass = 'thumbnail-card';
-export const ThumbnailCard = (props)=>{
-    const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
-    const { config } = useConfig();
-    const { i18n } = useTranslation();
-    const classes = [
-        baseClass,
-        className,
-        typeof onClick === 'function' && `${baseClass}--has-on-click`,
-        alignLabel && `${baseClass}--align-label-${alignLabel}`
-    ].filter(Boolean).join(' ');
+export const ThumbnailCard = props => {
+  const $ = _c(13);
+  const {
+    alignLabel,
+    className,
+    collection,
+    doc,
+    label: labelFromProps,
+    onClick,
+    thumbnail
+  } = props;
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const t0 = typeof onClick === "function" && `${baseClass}--has-on-click`;
+  const t1 = alignLabel && `${baseClass}--align-label-${alignLabel}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
+    t2 = [baseClass, className, t0, t1].filter(Boolean);
+    $[0] = className;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const classes = t2.join(" ");
+  let t3;
+  if ($[4] !== classes || $[5] !== collection || $[6] !== config || $[7] !== doc || $[8] !== i18n || $[9] !== labelFromProps || $[10] !== onClick || $[11] !== thumbnail) {
     let title = labelFromProps;
     if (!title) {
-        title = formatDocTitle({
-            collectionConfig: collection,
-            data: doc,
-            dateFormat: config.admin.dateFormat,
-            fallback: doc?.filename,
-            i18n
-        });
+      title = formatDocTitle({
+        collectionConfig: collection,
+        data: doc,
+        dateFormat: config.admin.dateFormat,
+        fallback: doc?.filename,
+        i18n
+      });
     }
-    return <button className={classes} onClick={onClick} title={title} type="button">
-      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>
-      <div className={`${baseClass}__label`}>{title}</div>
-    </button>;
+    t3 = _jsxs("button", {
+      className: classes,
+      onClick,
+      title,
+      type: "button",
+      children: [_jsx("div", {
+        className: `${baseClass}__thumbnail`,
+        children: thumbnail
+      }), _jsx("div", {
+        className: `${baseClass}__label`,
+        children: title
+      })]
+    });
+    $[4] = classes;
+    $[5] = collection;
+    $[6] = config;
+    $[7] = doc;
+    $[8] = i18n;
+    $[9] = labelFromProps;
+    $[10] = onClick;
+    $[11] = thumbnail;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/ThumbnailCard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"mappings":"AAAA;AAKA,SAASA,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAarB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAM,EAAES,MAAM,EAAE,GAAGd;IAEnB,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,GAAGT,UAAU,cAAc,CAAC;QAC7DG,cAAc,GAAGH,UAAU,cAAc,EAAEG,YAAY;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,QACGY,OAAOpB,WAAWS,SAASJ,SAASA,SAASQ,OAAOA,OAAOQ,KAAK,SAAS;MACxE,CAACC,IAAItB,WAAW,GAAGJ,UAAU,WAAW,CAAC,GAAGU,YAAYgB,IAAI;MAC5D,CAACA,IAAItB,WAAW,GAAGJ,UAAU,OAAO,CAAC,GAAGiB,QAAQS,IAAI;IACtD,EAAEF;AAEN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","t0","t1","t2","filter","Boolean","classes","join","t3","title","data","dateFormat","admin","fallback","filename","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAQIT,KAAA;EAEJ;IAAAU;EAAA,IAAmBf,SAAA;EAEnB;IAAAgB;EAAA,IAAiBf,cAAA;EAKf,MAAAgB,EAAA,UAAOJ,OAAA,KAAY,cAAc,GAAAV,SAAA,gBAA4B;EAC7D,MAAAe,EAAA,GAAAX,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAY,EAAA;EAAA,IAAAb,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAY,EAAA;IAJzCC,EAAA,IAAAhB,SAAA,EAEdK,SAAA,EACAS,EAA6D,EAC7DC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAf,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EANV,MAAAgB,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAgB,OAAA,IAAAhB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAS,MAAA,IAAAT,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAU,IAAA,IAAAV,CAAA,QAAAM,cAAA,IAAAN,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAQ,SAAA;IAER,IAAAW,KAAA,GAAYb,cAAA;IAAA,KAEPa,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYhB,UAAA;QAAAiB,IAAA,EACZhB,GAAA;QAAAiB,UAAA,EACMZ,MAAA,CAAAa,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFnB,GAAA,EAAAoB,QAAA;QAAAd;MAAA,CAEZ;IANA;IAUAQ,EAAA,GAAAO,KAAA,CAAC;MAAAvB,SAAA,EAAkBc,OAAA;MAAAT,OAAA;MAAAY,KAAA;MAAAO,IAAA,EAA8C;MAAAC,QAAA,GAC/DC,IAAA,CAAC;QAAA1B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAA8B,QAAA,EAAGnB;MAAA,C,GAC5CoB,IAAA,CAAC;QAAA1B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAA8B,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;SAF1CD,E;CAKJ","ignoreList":[]}

package/dist/elements/TimezonePicker/index.js

@@ -1,32 +1,53 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import './index.scss';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js';
-export const TimezonePicker = (props)=>{
-    const { id, onChange: onChangeFromProps, options: optionsFromProps, readOnly: readOnlyFromProps, required, selectedTimezone: selectedTimezoneFromProps } = props;
-    const { t } = useTranslation();
-    const options = formatOptions(optionsFromProps);
-    const selectedTimezone = useMemo(()=>{
-        return options.find((t)=>{
-            const value = typeof t === 'string' ? t : t.value;
-            return value === (selectedTimezoneFromProps || 'UTC');
-        });
-    }, [
-        options,
-        selectedTimezoneFromProps
-    ]);
-    const readOnly = Boolean(readOnlyFromProps) || options.length === 1;
-    return <div className="timezone-picker-wrapper">
-      <FieldLabel htmlFor={id} label={`${t('general:timezone')} ${required ? '*' : ''}`} required={required} unstyled/>
-      <ReactSelect className="timezone-picker" disabled={readOnly} inputId={id} isClearable={!required} isCreatable={false} onChange={(val)=>{
+export const TimezonePicker = props => {
+  const {
+    id,
+    onChange: onChangeFromProps,
+    options: optionsFromProps,
+    readOnly: readOnlyFromProps,
+    required,
+    selectedTimezone: selectedTimezoneFromProps
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const options = formatOptions(optionsFromProps);
+  const selectedTimezone = useMemo(() => {
+    return options.find(t_0 => {
+      const value = typeof t_0 === 'string' ? t_0 : t_0.value;
+      return value === (selectedTimezoneFromProps || 'UTC');
+    });
+  }, [options, selectedTimezoneFromProps]);
+  const readOnly = Boolean(readOnlyFromProps) || options.length === 1;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "timezone-picker-wrapper",
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      htmlFor: id,
+      label: `${t('general:timezone')} ${required ? '*' : ''}`,
+      required: required,
+      unstyled: true
+    }), /*#__PURE__*/_jsx(ReactSelect, {
+      className: "timezone-picker",
+      disabled: readOnly,
+      inputId: id,
+      isClearable: !required,
+      isCreatable: false,
+      onChange: val => {
         if (onChangeFromProps) {
-            onChangeFromProps(val?.value || '');
+          onChangeFromProps(val?.value || '');
         }
-    }} options={options} value={selectedTimezone}/>
-    </div>;
+      },
+      options: options,
+      value: selectedTimezone
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map