@payloadcms/ui 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

package/dist/elements/ListSelection/index.js

@@ -1,67 +1,102 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 import './index.scss';
 const baseClass = 'list-selection';
-export function ListSelection_v4(t0) {
-  const $ = _c(5);
-  const {
-    count,
-    ListActions,
-    SelectionActions
-  } = t0;
-  const {
-    t
-  } = useTranslation();
-  let t1;
-  if ($[0] !== ListActions || $[1] !== SelectionActions || $[2] !== count || $[3] !== t) {
-    t1 = _jsxs("div", {
-      className: baseClass,
-      children: [_jsx("span", {
-        children: t("general:selectedCount", {
-          count,
-          label: ""
-        })
-      }), ListActions && ListActions.length > 0 && _jsxs(React.Fragment, {
-        children: [_jsx("span", {
-          children: "\u2014"
-        }), _jsx("div", {
-          className: `${baseClass}__actions`,
-          children: ListActions
-        })]
-      }), SelectionActions && SelectionActions.length > 0 && _jsxs(React.Fragment, {
-        children: [_jsx("span", {
-          children: "\u2014"
-        }), _jsx("div", {
-          className: `${baseClass}__actions`,
-          children: SelectionActions
-        })]
-      })]
-    });
-    $[0] = ListActions;
-    $[1] = SelectionActions;
-    $[2] = count;
-    $[3] = t;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  return t1;
+/**
+   * The count of selected items
+   */ /**
+   * Actions that apply to the list as a whole
+   *
+   * @example select all, clear selection
+   */ /**
+   * Actions that apply to the selected items
+   *
+   * @example edit, delete, publish, unpublish
+   */ export function ListSelection_v4({ count, ListActions, SelectionActions }) {
+    const { t } = useTranslation();
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("span", {
+                children: t('general:selectedCount', {
+                    count,
+                    label: ''
+                })
+            }, void 0, false, {
+                fileName: "src/elements/ListSelection/index.tsx",
+                lineNumber: 35,
+                columnNumber: 7
+            }, this),
+            ListActions && ListActions.length > 0 && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxDEV("span", {
+                        children: "—"
+                    }, void 0, false, {
+                        fileName: "src/elements/ListSelection/index.tsx",
+                        lineNumber: 38,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__actions`,
+                        children: ListActions
+                    }, void 0, false, {
+                        fileName: "src/elements/ListSelection/index.tsx",
+                        lineNumber: 39,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/ListSelection/index.tsx",
+                lineNumber: 37,
+                columnNumber: 9
+            }, this),
+            SelectionActions && SelectionActions.length > 0 && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxDEV("span", {
+                        children: "—"
+                    }, void 0, false, {
+                        fileName: "src/elements/ListSelection/index.tsx",
+                        lineNumber: 44,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__actions`,
+                        children: SelectionActions
+                    }, void 0, false, {
+                        fileName: "src/elements/ListSelection/index.tsx",
+                        lineNumber: 45,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/ListSelection/index.tsx",
+                lineNumber: 43,
+                columnNumber: 9
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/ListSelection/index.tsx",
+        lineNumber: 34,
+        columnNumber: 5
+    }, this);
 }
-export function ListSelectionButton({
-  children,
-  className,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(Button, {
-    ...props,
-    buttonStyle: "none",
-    className: [`${baseClass}__button`, className].filter(Boolean).join(' '),
-    children: children
-  });
+export function ListSelectionButton({ children, className, ...props }) {
+    return /*#__PURE__*/ _jsxDEV(Button, {
+        ...props,
+        buttonStyle: "none",
+        className: [
+            `${baseClass}__button`,
+            className
+        ].filter(Boolean).join(' '),
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/ListSelection/index.tsx",
+        lineNumber: 55,
+        columnNumber: 5
+    }, this);
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","ListSelection_v4","t0","$","count","ListActions","SelectionActions","t","t1","_jsxs","className","children","_jsx","label","length","Fragment","ListSelectionButton","props","buttonStyle","filter","Boolean","join"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAoBlB,OAAO,SAAAC,iBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAA0B;IAAAQ,KAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAJ,EAA+D;EAC9F;IAAAK;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAL,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAI,CAAA;IAGZC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAV,SAAA;MAAAW,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMJ,CAAA,CAAE;UAAAH,KAAA;UAAAS,KAAA,EAAyC;QAAA,CAAG;MAAA,C,GACpDR,WAAA,IAAeA,WAAA,CAAAS,MAAA,IAAqB,IACnCL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGN;QAAA,C;UAG7CC,gBAAA,IAAoBA,gBAAA,CAAAQ,MAAA,IAA0B,IAC7CL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGL;QAAA,C;;;;;;;;;;;SAXhDE,E;;AAmBJ,OAAO,SAASQ,oBAAoB;EAAEL,QAAQ;EAAED,SAAS;EAAE,GAAGO;AAAA,CAAiC;EAC7F,oBACEL,IAAA,CAACb,MAAA;IACE,GAAGkB,KAAK;IACTC,WAAA,EAAY;IACZR,SAAA,EAAW,CAAC,GAAGV,SAAA,UAAmB,EAAEU,SAAA,CAAU,CAACS,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAEnEV;;AAGP","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"names":["React","useTranslation","Button","baseClass","ListSelection_v4","count","ListActions","SelectionActions","t","div","className","span","label","length","Fragment","ListSelectionButton","children","props","buttonStyle","filter","Boolean","join"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAGhB;;GAEC,GAED;;;;GAIC,GAED;;;;GAIC,GAGH,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,EAAyB;IAC9F,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,QAACQ;QAAIC,WAAWP;;0BACd,QAACQ;0BAAMH,EAAE,yBAAyB;oBAAEH;oBAAOO,OAAO;gBAAG;;;;;;YACpDN,eAAeA,YAAYO,MAAM,GAAG,mBACnC,QAACb,MAAMc,QAAQ;;kCACb,QAACH;kCAAK;;;;;;kCACN,QAACF;wBAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC;kCAAGG;;;;;;;;;;;;YAG7CC,oBAAoBA,iBAAiBM,MAAM,GAAG,mBAC7C,QAACb,MAAMc,QAAQ;;kCACb,QAACH;kCAAK;;;;;;kCACN,QAACF;wBAAIC,WAAW,GAAGP,UAAU,SAAS,CAAC;kCAAGI;;;;;;;;;;;;;;;;;;AAKpD;AAGA,OAAO,SAASQ,oBAAoB,EAAEC,QAAQ,EAAEN,SAAS,EAAE,GAAGO,OAAiC;IAC7F,qBACE,QAACf;QACE,GAAGe,KAAK;QACTC,aAAY;QACZR,WAAW;YAAC,GAAGP,UAAU,QAAQ,CAAC;YAAEO;SAAU,CAACS,MAAM,CAACC,SAASC,IAAI,CAAC;kBAEnEL;;;;;;AAGP"}

package/dist/elements/LivePreview/Device/index.js

@@ -1,92 +1,92 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect } from 'react';
 import { useResize } from '../../../hooks/useResize.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
-export const DeviceContainer = props => {
-  const {
-    children
-  } = props;
-  const deviceFrameRef = React.useRef(null);
-  const outerFrameRef = React.useRef(null);
-  const {
-    breakpoint,
-    setMeasuredDeviceSize,
-    size: desiredSize,
-    zoom
-  } = useLivePreviewContext();
-  // Keep an accurate measurement of the actual device size as it is truly rendered
-  // This is helpful when `sizes` are non-number units like percentages, etc.
-  const {
-    size: measuredDeviceSize
-  } = useResize(deviceFrameRef.current);
-  const {
-    size: outerFrameSize
-  } = useResize(outerFrameRef.current);
-  let deviceIsLargerThanFrame = false;
-  // Sync the measured device size with the context so that other components can use it
-  // This happens from the bottom up so that as this component mounts and unmounts,
-  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
-  useEffect(() => {
-    if (measuredDeviceSize) {
-      setMeasuredDeviceSize(measuredDeviceSize);
-    }
-  }, [measuredDeviceSize, setMeasuredDeviceSize]);
-  let x = '0';
-  let margin = '0';
-  if (breakpoint && breakpoint !== 'responsive') {
-    x = '-50%';
-    if (desiredSize && measuredDeviceSize && typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
-      margin = '0 auto';
-      const scaledDesiredWidth = desiredSize.width / zoom;
-      const scaledDeviceWidth = measuredDeviceSize.width * zoom;
-      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
-      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
-      if (deviceIsLargerThanFrame) {
-        if (zoom > 1) {
-          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
-          if (differenceFromDeviceToFrame < 0) {
-            x = `${differenceFromDeviceToFrame / 2}px`;
-          } else {
-            x = '0';
-          }
-        } else {
-          x = '0';
+export const DeviceContainer = (props)=>{
+    const { children } = props;
+    const deviceFrameRef = React.useRef(null);
+    const outerFrameRef = React.useRef(null);
+    const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext();
+    // Keep an accurate measurement of the actual device size as it is truly rendered
+    // This is helpful when `sizes` are non-number units like percentages, etc.
+    const { size: measuredDeviceSize } = useResize(deviceFrameRef.current);
+    const { size: outerFrameSize } = useResize(outerFrameRef.current);
+    let deviceIsLargerThanFrame = false;
+    // Sync the measured device size with the context so that other components can use it
+    // This happens from the bottom up so that as this component mounts and unmounts,
+    // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
+    useEffect(()=>{
+        if (measuredDeviceSize) {
+            setMeasuredDeviceSize(measuredDeviceSize);
         }
-      } else {
-        if (zoom >= 1) {
-          x = `${scaledDeviceDifferencePixels / 2}px`;
-        } else {
-          const differenceFromDeviceToFrame_0 = outerFrameSize.width - scaledDeviceWidth;
-          x = `${differenceFromDeviceToFrame_0 / 2}px`;
-          margin = '0';
+    }, [
+        measuredDeviceSize,
+        setMeasuredDeviceSize
+    ]);
+    let x = '0';
+    let margin = '0';
+    if (breakpoint && breakpoint !== 'responsive') {
+        x = '-50%';
+        if (desiredSize && measuredDeviceSize && typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
+            margin = '0 auto';
+            const scaledDesiredWidth = desiredSize.width / zoom;
+            const scaledDeviceWidth = measuredDeviceSize.width * zoom;
+            const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
+            deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
+            if (deviceIsLargerThanFrame) {
+                if (zoom > 1) {
+                    const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
+                    if (differenceFromDeviceToFrame < 0) {
+                        x = `${differenceFromDeviceToFrame / 2}px`;
+                    } else {
+                        x = '0';
+                    }
+                } else {
+                    x = '0';
+                }
+            } else {
+                if (zoom >= 1) {
+                    x = `${scaledDeviceDifferencePixels / 2}px`;
+                } else {
+                    const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth;
+                    x = `${differenceFromDeviceToFrame / 2}px`;
+                    margin = '0';
+                }
+            }
         }
-      }
     }
-  }
-  let width = zoom ? `${100 / zoom}%` : '100%';
-  let height = zoom ? `${100 / zoom}%` : '100%';
-  if (breakpoint !== 'responsive') {
-    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
-    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    ref: outerFrameRef,
-    style: {
-      height: '100%',
-      width: '100%'
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      ref: deviceFrameRef,
-      style: {
-        height,
-        margin,
-        transform: `translate3d(${x}, 0, 0)`,
-        width
-      },
-      children: children
-    })
-  });
+    let width = zoom ? `${100 / zoom}%` : '100%';
+    let height = zoom ? `${100 / zoom}%` : '100%';
+    if (breakpoint !== 'responsive') {
+        width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+        height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
+    }
+    return /*#__PURE__*/ _jsxDEV("div", {
+        ref: outerFrameRef,
+        style: {
+            height: '100%',
+            width: '100%'
+        },
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            ref: deviceFrameRef,
+            style: {
+                height,
+                margin,
+                transform: `translate3d(${x}, 0, 0)`,
+                width
+            },
+            children: children
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Device/index.tsx",
+            lineNumber: 95,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Device/index.tsx",
+        lineNumber: 88,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Device/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","_jsx","ref","style","transform"],"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,SAAS,QAAQ,8BAA6B;AACvD,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBP,MAAMQ,MAAM,CAAiB;IACpD,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAE3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGb,UAAUK,eAAeS,OAAO;IAErE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGf,UAAUO,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FjB,UAAU;QACR,IAAIc,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACEN,eACAE,sBACA,OAAOD,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAG;wBACnCP,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC5C,OAAO;wBACLP,IAAI;oBACN;gBACF,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,GAAGM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,GAAGR,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,GAAGT,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,qBACE,QAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,QAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;;;;;;;;;AAIT,EAAC"}

package/dist/elements/LivePreview/DeviceContainer/index.js

@@ -1,55 +1,35 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
-export const DeviceContainer = props => {
-  const $ = _c(6);
-  const {
-    children
-  } = props;
-  const {
-    breakpoint,
-    breakpoints,
-    size,
-    zoom
-  } = useLivePreviewContext();
-  const foundBreakpoint = breakpoint && breakpoints?.find(bp => bp.name === breakpoint);
-  let x = "0";
-  let margin = "0";
-  if (foundBreakpoint && breakpoint !== "responsive") {
-    x = "-50%";
-    if (typeof zoom === "number" && typeof size.width === "number" && typeof size.height === "number") {
-      const scaledWidth = size.width / zoom;
-      const difference = scaledWidth - size.width;
-      x = `${difference / 2}px`;
-      margin = "0 auto";
+export const DeviceContainer = (props)=>{
+    const { children } = props;
+    const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext();
+    const foundBreakpoint = breakpoint && breakpoints?.find((bp)=>bp.name === breakpoint);
+    let x = '0';
+    let margin = '0';
+    if (foundBreakpoint && breakpoint !== 'responsive') {
+        x = '-50%';
+        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
+            const scaledWidth = size.width / zoom;
+            const difference = scaledWidth - size.width;
+            x = `${difference / 2}px`;
+            margin = '0 auto';
+        }
     }
-  }
-  const t0 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.height / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
-  const t1 = `translate3d(${x}, 0, 0)`;
-  const t2 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.width / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
-  let t3;
-  if ($[0] !== children || $[1] !== margin || $[2] !== t0 || $[3] !== t1 || $[4] !== t2) {
-    t3 = _jsx("div", {
-      style: {
-        height: t0,
-        margin,
-        transform: t1,
-        width: t2
-      },
-      children
-    });
-    $[0] = children;
-    $[1] = margin;
-    $[2] = t0;
-    $[3] = t1;
-    $[4] = t2;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        style: {
+            height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
+            margin,
+            transform: `translate3d(${x}, 0, 0)`,
+            width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
+        },
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/DeviceContainer/index.tsx",
+        lineNumber: 34,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/DeviceContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAA,IAAcC,WAAA,EAAAI,IAAA,CAAAC,EAAA,IAA0BA,EAAA,CAAAC,IAAA,KAAYP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAAA,IAETL,eAAA,IAAmBJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAAJ,IAGE,OAAOL,IAAA,KAAS,YAChB,OAAOD,IAAA,CAAAQ,KAAA,KAAe,YACtB,OAAOR,IAAA,CAAAS,MAAA,KAAgB;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAA,GAAaP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,IAAa,IAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EAAA;EAQI,MAAAK,EAAA,GAAAV,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAS,MAAA,IAAgB,OAAOR,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC3D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAQ,KAAA,IAAe,OAAOP,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC1D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;IAfZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA;QAAAR,MAAA,EAGKG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAIM;MAAAjB;IAAA,C;;;;;;;;;;SAfZkB,E;CAqBJ","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,GAAGK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,QAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;kBAECJ;;;;;;AAGP,EAAC"}

package/dist/elements/LivePreview/IFrame/index.js

@@ -1,51 +1,27 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import './index.scss';
 const baseClass = 'live-preview-iframe';
-export const IFrame = () => {
-  const $ = _c(8);
-  const {
-    iframeRef,
-    setLoadedURL,
-    url,
-    zoom
-  } = useLivePreviewContext();
-  let t0;
-  if ($[0] !== setLoadedURL || $[1] !== url) {
-    t0 = () => {
-      setLoadedURL(url);
-    };
-    $[0] = setLoadedURL;
-    $[1] = url;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const t1 = typeof zoom === "number" ? `scale(${zoom}) ` : undefined;
-  let t2;
-  if ($[3] !== iframeRef || $[4] !== t0 || $[5] !== t1 || $[6] !== url) {
-    t2 = _jsx("iframe", {
-      className: baseClass,
-      onLoad: t0,
-      ref: iframeRef,
-      src: url,
-      style: {
-        transform: t1
-      },
-      title: url
-    }, url);
-    $[3] = iframeRef;
-    $[4] = t0;
-    $[5] = t1;
-    $[6] = url;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
-  }
-  return t2;
+export const IFrame = ()=>{
+    const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext();
+    return /*#__PURE__*/ _jsxDEV("iframe", {
+        className: baseClass,
+        onLoad: ()=>{
+            setLoadedURL(url);
+        },
+        ref: iframeRef,
+        src: url,
+        style: {
+            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+        },
+        title: url
+    }, url, false, {
+        fileName: "src/elements/LivePreview/IFrame/index.tsx",
+        lineNumber: 13,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/IFrame/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","baseClass","IFrame","$","iframeRef","setLoadedURL","url","zoom","t0","t1","undefined","t2","_jsx","className","onLoad","ref","src","style","transform","title"],"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAC9B;IAAAM,SAAA;IAAAC,YAAA;IAAAC,GAAA;IAAAC;EAAA,IAA+CP,qBAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAL,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,GAAA;IAMnCE,EAAA,GAAAA,CAAA;MACNH,YAAA,CAAaC,GAAA;IAAA;IACfH,CAAA,MAAAE,YAAA;IAAAF,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAIa,MAAAM,EAAA,UAAOF,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAAG,SAAG;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAG,GAAA;IAT9DK,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,MAAA,EAGSN,EAER;MAAAO,GAAA,EACKX,SAAA;MAAAY,GAAA,EACAV,GAAA;MAAAW,KAAA;QAAAC,SAAA,EAEQT;MAA+C;MAAAU,KAAA,EAErDb;IAAA,GATFA,GAAA;IAAAH,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,OAFPQ,EAEO;AAAA,CAYX","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"names":["React","useLivePreviewContext","baseClass","IFrame","iframeRef","setLoadedURL","url","zoom","iframe","className","onLoad","ref","src","style","transform","undefined","title"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAmB;IAC9B,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGN;IAE/C,qBACE,QAACO;QACCC,WAAWP;QAEXQ,QAAQ;YACNL,aAAaC;QACf;QACAK,KAAKP;QACLQ,KAAKN;QACLO,OAAO;YACLC,WAAW,OAAOP,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGQ;QAC5D;QACAC,OAAOV;OATFA;;;;;AAYX,EAAC"}