@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.91

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.MutableRefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { useWindowInfo } = facelessUIImport\n\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') onToggleOpen(active)\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{ active, button, buttonType, className: buttonClassName, setActive }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{ active, button, buttonType, className: buttonClassName, setActive }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"names":["PopupList","facelessUIImport","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","useWindowInfo","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","div","onMouseEnter","onMouseLeave","ref","close"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const [active, setActive] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (typeof onToggleOpen === 'function') onToggleOpen(active)\n\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__trigger-wrap`}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n          >\n            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children && children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/index.scss

@@ -9,6 +9,12 @@
   --popup-padding: calc(var(--base) * 0.5);
   position: relative;
 
+  &__trigger-wrap {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+  }
+
   &__content {
     position: absolute;
     background: var(--popup-bg);

package/dist/elements/PreviewButton/index.d.ts

@@ -1,6 +1,7 @@
+import type { MappedComponent } from 'payload';
 import React from 'react';
 type Props = {
-    CustomComponent?: React.ReactNode;
+    CustomComponent?: MappedComponent;
 };
 export declare const PreviewButton: React.FC<Props>;
 export {};

package/dist/elements/PreviewButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAA;AA8BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzC,CAAA"}

package/dist/elements/PreviewButton/index.js

@@ -1,23 +1,55 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { Button } from '../Button/index.js';
 import { usePreviewURL } from './usePreviewURL.js';
 const baseClass = 'preview-btn';
-const DefaultPreviewButton = ()=>{
-    const { generatePreviewURL, label } = usePreviewURL();
-    return /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        className: baseClass,
-        // disabled={disabled}
-        onClick: ()=>generatePreviewURL({
-                openPreviewWindow: true
-            }),
-        size: "small"
-    }, label);
+const DefaultPreviewButton = () => {
+  const $ = _c(5);
+  const {
+    generatePreviewURL,
+    label
+  } = usePreviewURL();
+  let t0;
+  if ($[0] !== generatePreviewURL) {
+    t0 = () => generatePreviewURL({
+      openPreviewWindow: true
+    });
+    $[0] = generatePreviewURL;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0 || $[3] !== label) {
+    t1 = _jsx(Button, {
+      buttonStyle: "secondary",
+      className: baseClass,
+      icon: "link",
+      iconPosition: "left",
+      onClick: t0,
+      size: "medium",
+      children: label
+    });
+    $[2] = t0;
+    $[3] = label;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
 };
-export const PreviewButton = ({ CustomComponent })=>{
-    if (CustomComponent) return CustomComponent;
-    return /*#__PURE__*/ React.createElement(DefaultPreviewButton, null);
+export const PreviewButton = ({
+  CustomComponent
+}) => {
+  if (CustomComponent) {
+    return /*#__PURE__*/_jsx(RenderComponent, {
+      mappedComponent: CustomComponent
+    });
+  }
+  return /*#__PURE__*/_jsx(DefaultPreviewButton, {});
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"small\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: React.ReactNode\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) return CustomComponent\n\n  return <DefaultPreviewButton />\n}\n"],"names":["React","Button","usePreviewURL","baseClass","DefaultPreviewButton","generatePreviewURL","label","buttonStyle","className","onClick","openPreviewWindow","size","PreviewButton","CustomComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,aAAa,QAAQ,qBAAoB;AAElD,MAAMC,YAAY;AAElB,MAAMC,uBAAiC;IACrC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGJ;IAEtC,qBACE,oBAACD;QACCM,aAAY;QACZC,WAAWL;QACX,sBAAsB;QACtBM,SAAS,IACPJ,mBAAmB;gBACjBK,mBAAmB;YACrB;QAEFC,MAAK;OAEJL;AAGP;AAMA,OAAO,MAAMM,gBAAiC,CAAC,EAAEC,eAAe,EAAE;IAChE,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,oBAACT;AACV,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","RenderComponent","Button","usePreviewURL","baseClass","DefaultPreviewButton","$","generatePreviewURL","label","t0","openPreviewWindow","t1","_jsx","buttonStyle","className","icon","iconPosition","onClick","size","children","PreviewButton","CustomComponent","mappedComponent"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { MappedComponent } from 'payload'\n\nimport React from 'react'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      icon={'link'}\n      iconPosition=\"left\"\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"medium\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: MappedComponent\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) {\n    return <RenderComponent mappedComponent={CustomComponent} />\n  }\n\n  return <DefaultPreviewButton />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAE9B,MAAMC,SAAA,GAAY;AAElB,MAAMC,oBAAA,GAAiCA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACrC;IAAAQ,kBAAA;IAAAC;EAAA,IAAsCL,aAAA;EAAA,IAAAM,EAAA;EAAA,IAAAH,CAAA,QAAAC,kBAAA;IASzBE,EAAA,GAAAA,CAAA,KACPF,kBAAA;MAAAG,iBAAA;IAAA,CAEA;IAAAJ,CAAA,MAAAC,kBAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAL,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,KAAA;IATJG,EAAA,GAAAC,IAAA,CAAAV,MAAA;MAAAW,WAAA,EACc;MAAAC,SAAA,EAAAV,SAAA;MAAAW,IAAA,EAEN;MAAAC,YAAA,EACO;MAAAC,OAAA,EAEJR,EAGP;MAAAS,IAAA,EAEG;MAAAC,QAAA,EAEJX;IAAA,C;;;;;;;SAbHG,E;CAgBJ;AAMA,OAAO,MAAMS,aAAA,GAAiCA,CAAC;EAAEC;AAAe,CAAE;EAChE,IAAIA,eAAA,EAAiB;IACnB,oBAAOT,IAAA,CAACX,eAAA;MAAgBqB,eAAA,EAAiBD;;EAC3C;EAEA,oBAAOT,IAAA,CAACP,oBAAA;AACV","ignoreList":[]}

package/dist/elements/PreviewButton/usePreviewURL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CAwDnB,CAAA"}
+{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA0DnB,CAAA"}

package/dist/elements/PreviewButton/usePreviewURL.js

@@ -1,57 +1,66 @@
 'use client';
+
 import { useCallback, useRef, useState } from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-export const usePreviewURL = ()=>{
-    const { id, collectionSlug, globalSlug } = useDocumentInfo();
-    const [isLoading, setIsLoading] = useState(false);
-    const [previewURL, setPreviewURL] = useState('');
-    const { code: locale } = useLocale();
-    const { routes: { api }, serverURL } = useConfig();
-    const { t } = useTranslation();
-    const isGeneratingPreviewURL = useRef(false);
-    // we need to regenerate the preview URL every time the button is clicked
-    // to do this we need to fetch the document data fresh from the API
-    // this will ensure the latest data is used when generating the preview URL
-    const generatePreviewURL = useCallback(async ({ openPreviewWindow = false })=>{
-        if (isGeneratingPreviewURL.current) return;
-        isGeneratingPreviewURL.current = true;
-        try {
-            setIsLoading(true);
-            let url = `${serverURL}${api}`;
-            if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`;
-            if (globalSlug) url = `${url}/globals/${globalSlug}/preview`;
-            const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`);
-            if (!res.ok) throw new Error();
-            const newPreviewURL = await res.json();
-            if (!newPreviewURL) throw new Error();
-            setPreviewURL(newPreviewURL);
-            setIsLoading(false);
-            isGeneratingPreviewURL.current = false;
-            if (openPreviewWindow) window.open(newPreviewURL, '_blank');
-        } catch (err) {
-            setIsLoading(false);
-            isGeneratingPreviewURL.current = false;
-            toast.error(t('error:previewing'));
-        }
-    }, [
-        serverURL,
-        api,
-        collectionSlug,
-        globalSlug,
-        id,
-        locale,
-        t
-    ]);
-    return {
-        generatePreviewURL,
-        isLoading,
-        label: isLoading ? t('general:loading') : t('version:preview'),
-        previewURL
-    };
+export const usePreviewURL = () => {
+  const {
+    id,
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const [isLoading, setIsLoading] = useState(false);
+  const [previewURL, setPreviewURL] = useState('');
+  const {
+    code: locale
+  } = useLocale();
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const {
+    t
+  } = useTranslation();
+  const isGeneratingPreviewURL = useRef(false);
+  // we need to regenerate the preview URL every time the button is clicked
+  // to do this we need to fetch the document data fresh from the API
+  // this will ensure the latest data is used when generating the preview URL
+  const generatePreviewURL = useCallback(async ({
+    openPreviewWindow = false
+  }) => {
+    if (isGeneratingPreviewURL.current) return;
+    isGeneratingPreviewURL.current = true;
+    try {
+      setIsLoading(true);
+      let url = `${serverURL}${api}`;
+      if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`;
+      if (globalSlug) url = `${url}/globals/${globalSlug}/preview`;
+      const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`);
+      if (!res.ok) throw new Error();
+      const newPreviewURL = await res.json();
+      if (!newPreviewURL) throw new Error();
+      setPreviewURL(newPreviewURL);
+      setIsLoading(false);
+      isGeneratingPreviewURL.current = false;
+      if (openPreviewWindow) window.open(newPreviewURL, '_blank');
+    } catch (err) {
+      setIsLoading(false);
+      isGeneratingPreviewURL.current = false;
+      toast.error(t('error:previewing'));
+    }
+  }, [serverURL, api, collectionSlug, globalSlug, id, locale, t]);
+  return {
+    generatePreviewURL,
+    isLoading,
+    label: isLoading ? t('general:loading') : t('version:preview'),
+    previewURL
+  };
 };
-
 //# sourceMappingURL=usePreviewURL.js.map

package/dist/elements/PreviewButton/usePreviewURL.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) return\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`\n        if (globalSlug) url = `${url}/globals/${globalSlug}/preview`\n\n        const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n        if (!res.ok) throw new Error()\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) throw new Error()\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) window.open(newPreviewURL, '_blank')\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n  )\n\n  return {\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AACrD,SAASC,KAAK,QAAQ,iBAAgB;AAEtC,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAErE,OAAO,MAAMC,gBAAgB;IAM3B,MAAM,EAAEC,EAAE,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGN;IAE3C,MAAM,CAACO,WAAWC,aAAa,GAAGX,SAAS;IAC3C,MAAM,CAACY,YAAYC,cAAc,GAAGb,SAAS;IAC7C,MAAM,EAAEc,MAAMC,MAAM,EAAE,GAAGX;IAEzB,MAAM,EACJY,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGhB;IAEJ,MAAM,EAAEiB,CAAC,EAAE,GAAGd;IAEd,MAAMe,yBAAyBrB,OAAO;IAEtC,yEAAyE;IACzE,mEAAmE;IACnE,2EAA2E;IAC3E,MAAMsB,qBAAqBvB,YACzB,OAAO,EAAEwB,oBAAoB,KAAK,EAAE;QAClC,IAAIF,uBAAuBG,OAAO,EAAE;QACpCH,uBAAuBG,OAAO,GAAG;QAEjC,IAAI;YACFZ,aAAa;YAEb,IAAIa,MAAM,CAAC,EAAEN,UAAU,EAAED,IAAI,CAAC;YAC9B,IAAIT,gBAAgBgB,MAAM,CAAC,EAAEA,IAAI,CAAC,EAAEhB,eAAe,CAAC,EAAED,GAAG,QAAQ,CAAC;YAClE,IAAIE,YAAYe,MAAM,CAAC,EAAEA,IAAI,SAAS,EAAEf,WAAW,QAAQ,CAAC;YAE5D,MAAMgB,MAAM,MAAMC,MAAM,CAAC,EAAEF,IAAI,EAAET,SAAS,CAAC,QAAQ,EAAEA,OAAO,CAAC,GAAG,GAAG,CAAC;YAEpE,IAAI,CAACU,IAAIE,EAAE,EAAE,MAAM,IAAIC;YACvB,MAAMC,gBAAgB,MAAMJ,IAAIK,IAAI;YACpC,IAAI,CAACD,eAAe,MAAM,IAAID;YAC9Bf,cAAcgB;YACdlB,aAAa;YACbS,uBAAuBG,OAAO,GAAG;YACjC,IAAID,mBAAmBS,OAAOC,IAAI,CAACH,eAAe;QACpD,EAAE,OAAOI,KAAK;YACZtB,aAAa;YACbS,uBAAuBG,OAAO,GAAG;YACjCtB,MAAMiC,KAAK,CAACf,EAAE;QAChB;IACF,GACA;QAACD;QAAWD;QAAKT;QAAgBC;QAAYF;QAAIQ;QAAQI;KAAE;IAG7D,OAAO;QACLE;QACAX;QACAyB,OAAOzB,YAAYS,EAAE,qBAAqBA,EAAE;QAC5CP;IACF;AACF,EAAC"}
+{"version":3,"file":"usePreviewURL.js","names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) return\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`\n        if (globalSlug) url = `${url}/globals/${globalSlug}/preview`\n\n        const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n        if (!res.ok) throw new Error()\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) throw new Error()\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) window.open(newPreviewURL, '_blank')\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n  )\n\n  return {\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAGN,eAAA;EAE3C,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGX,QAAA,CAAS;EAC3C,MAAM,CAACY,UAAA,EAAYC,aAAA,CAAc,GAAGb,QAAA,CAAS;EAC7C,MAAM;IAAEc,IAAA,EAAMC;EAAM,CAAE,GAAGX,SAAA;EAEzB,MAAM;IACJY,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IAAEkB;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMgB,sBAAA,GAAyBtB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMuB,kBAAA,GAAqBxB,WAAA,CACzB,OAAO;IAAEyB,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;IACpCH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFb,YAAA,CAAa;MAEb,IAAIc,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIV,cAAA,EAAgBiB,GAAA,GAAM,GAAGA,GAAA,IAAOjB,cAAA,IAAkBD,EAAA,UAAY;MAClE,IAAIE,UAAA,EAAYgB,GAAA,GAAM,GAAGA,GAAA,YAAehB,UAAA,UAAoB;MAE5D,MAAMiB,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGF,GAAA,GAAMV,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;MAEpE,IAAI,CAACW,GAAA,CAAIE,EAAE,EAAE,MAAM,IAAIC,KAAA;MACvB,MAAMC,aAAA,GAAgB,MAAMJ,GAAA,CAAIK,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe,MAAM,IAAID,KAAA;MAC9BhB,aAAA,CAAciB,aAAA;MACdnB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmBS,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;IACpD,EAAE,OAAOI,GAAA,EAAK;MACZvB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjCvB,KAAA,CAAMkC,KAAK,CAACf,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKV,cAAA,EAAgBC,UAAA,EAAYF,EAAA,EAAIQ,MAAA,EAAQK,CAAA,CAAE;EAG7D,OAAO;IACLE,kBAAA;IACAZ,SAAA;IACA0B,KAAA,EAAO1B,SAAA,GAAYU,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CR;EACF;AACF","ignoreList":[]}

package/dist/elements/PreviewSizes/index.d.ts

@@ -1,16 +1,16 @@
-import type { Data, FileSize, SanitizedCollectionConfig } from 'payload/types';
+import type { Data, FileSize, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
-type FileInfo = FileSize & {
+type FileInfo = {
     url: string;
-};
+} & FileSize;
 type FilesSizesWithUrl = {
     [key: string]: FileInfo;
 };
 export type PreviewSizesProps = {
-    doc: Data & {
+    doc: {
         sizes?: FilesSizesWithUrl;
-    };
+    } & Data;
     imageCacheTag?: string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };

package/dist/elements/PreviewSizes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,QAAQ,EACR,yBAAyB,EAE1B,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG,QAAQ,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,QAAQ,CAAA;AACZ,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}

package/dist/elements/PreviewSizes/index.js

@@ -1,105 +1,128 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import { FileMeta } from '../FileDetails/FileMeta/index.js';
+import './index.scss';
 const baseClass = 'preview-sizes';
-const sortSizes = (sizes, imageSizes)=>{
-    if (!imageSizes || imageSizes.length === 0) return sizes;
-    const orderedSizes = {};
-    imageSizes.forEach(({ name })=>{
-        if (sizes[name]) {
-            orderedSizes[name] = sizes[name];
-        }
-    });
-    return orderedSizes;
+const sortSizes = (sizes, imageSizes) => {
+  if (!imageSizes || imageSizes.length === 0) return sizes;
+  const orderedSizes = {};
+  imageSizes.forEach(({
+    name
+  }) => {
+    if (sizes[name]) {
+      orderedSizes[name] = sizes[name];
+    }
+  });
+  return orderedSizes;
 };
-const PreviewSizeCard = ({ name, active, meta, onClick, previewSrc })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            `${baseClass}__sizeOption`,
-            active && `${baseClass}--selected`
-        ].filter(Boolean).join(' '),
-        onClick: typeof onClick === 'function' ? onClick : undefined,
-        onKeyDown: (e)=>{
-            if (typeof onClick !== 'function') return;
-            if (e.key === 'Enter') onClick();
-        },
-        role: "button",
-        tabIndex: 0
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__image`
-    }, /*#__PURE__*/ React.createElement("img", {
+const PreviewSizeCard = ({
+  name,
+  active,
+  meta,
+  onClick,
+  previewSrc
+}) => {
+  return /*#__PURE__*/_jsxs("div", {
+    className: [`${baseClass}__sizeOption`, active && `${baseClass}--selected`].filter(Boolean).join(' '),
+    onClick: typeof onClick === 'function' ? onClick : undefined,
+    onKeyDown: e => {
+      if (typeof onClick !== 'function') return;
+      if (e.key === 'Enter') onClick();
+    },
+    role: "button",
+    tabIndex: 0,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__image`,
+      children: /*#__PURE__*/_jsx("img", {
         alt: meta.filename,
         src: previewSrc
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeMeta`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeName`
-    }, name), /*#__PURE__*/ React.createElement(FileMeta, meta)));
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__sizeMeta`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__sizeName`,
+        children: name
+      }), /*#__PURE__*/_jsx(FileMeta, {
+        ...meta
+      })]
+    })]
+  });
 };
-export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
-    const { imageSizes } = uploadConfig;
-    const { sizes } = doc;
-    const [orderedSizes, setOrderedSizes] = useState(()=>sortSizes(sizes, imageSizes));
-    const [selectedSize, setSelectedSize] = useState(null);
-    const generateImageUrl = (doc)=>{
-        if (!doc.filename) return null;
-        if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
-    };
-    useEffect(()=>{
-        setOrderedSizes(sortSizes(sizes, imageSizes));
-    }, [
-        sizes,
-        imageSizes,
-        imageCacheTag
-    ]);
-    const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
-    const originalImage = useMemo(()=>({
-            filename: doc.filename,
-            filesize: doc.filesize,
-            height: doc.height,
-            mimeType: doc.mimeType,
-            url: doc.url,
-            width: doc.width
-        }), [
-        doc
-    ]);
-    const originalFilename = 'Original';
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__imageWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__meta`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeName`
-    }, selectedSize || originalFilename), /*#__PURE__*/ React.createElement(FileMeta, selectedSize ? orderedSizes[selectedSize] : originalImage)), /*#__PURE__*/ React.createElement("img", {
+export const PreviewSizes = ({
+  doc,
+  imageCacheTag,
+  uploadConfig
+}) => {
+  const {
+    imageSizes
+  } = uploadConfig;
+  const {
+    sizes
+  } = doc;
+  const [orderedSizes, setOrderedSizes] = useState(() => sortSizes(sizes, imageSizes));
+  const [selectedSize, setSelectedSize] = useState(null);
+  const generateImageUrl = doc_0 => {
+    if (!doc_0.filename) return null;
+    if (doc_0.url) return `${doc_0.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
+  };
+  useEffect(() => {
+    setOrderedSizes(sortSizes(sizes, imageSizes));
+  }, [sizes, imageSizes, imageCacheTag]);
+  const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
+  const originalImage = useMemo(() => ({
+    filename: doc.filename,
+    filesize: doc.filesize,
+    height: doc.height,
+    mimeType: doc.mimeType,
+    url: doc.url,
+    width: doc.width
+  }), [doc]);
+  const originalFilename = 'Original';
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__imageWrap`,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__meta`,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__sizeName`,
+          children: selectedSize || originalFilename
+        }), /*#__PURE__*/_jsx(FileMeta, {
+          ...(selectedSize ? orderedSizes[selectedSize] : originalImage)
+        })]
+      }), /*#__PURE__*/_jsx("img", {
         alt: doc.filename,
         className: `${baseClass}__preview`,
         src: mainPreviewSrc
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__listWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__list`
-    }, /*#__PURE__*/ React.createElement(PreviewSizeCard, {
-        active: !selectedSize,
-        meta: originalImage,
-        name: originalFilename,
-        onClick: ()=>setSelectedSize(null),
-        previewSrc: generateImageUrl(doc)
-    }), Object.entries(orderedSizes).map(([key, val])=>{
-        const selected = selectedSize === key;
-        const previewSrc = generateImageUrl(val);
-        if (previewSrc) {
-            return /*#__PURE__*/ React.createElement(PreviewSizeCard, {
-                active: selected,
-                key: key,
-                meta: val,
-                name: key,
-                onClick: ()=>setSelectedSize(key),
-                previewSrc: previewSrc
-            });
-        }
-        return null;
-    }))));
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__listWrap`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__list`,
+        children: [/*#__PURE__*/_jsx(PreviewSizeCard, {
+          active: !selectedSize,
+          meta: originalImage,
+          name: originalFilename,
+          onClick: () => setSelectedSize(null),
+          previewSrc: generateImageUrl(doc)
+        }), Object.entries(orderedSizes).map(([key, val]) => {
+          const selected = selectedSize === key;
+          const previewSrc = generateImageUrl(val);
+          if (previewSrc) {
+            return /*#__PURE__*/_jsx(PreviewSizeCard, {
+              active: selected,
+              meta: val,
+              name: key,
+              onClick: () => setSelectedSize(key),
+              previewSrc: previewSrc
+            }, key);
+          }
+          return null;
+        })]
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map