@payloadcms/ui 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

@@ -1 +1 @@
-{"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,KAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,KAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;AAIT,EAAC"}
+{"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,5 +1,5 @@
 'use client';
-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)=>{
@@ -17,7 +17,7 @@ export const DeviceContainer = (props)=>{
             margin = '0 auto';
         }
     }
-    return /*#__PURE__*/ _jsx("div", {
+    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,
@@ -25,7 +25,11 @@ export const DeviceContainer = (props)=>{
             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,"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,KAACK;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"}
+{"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,12 +1,12 @@
 'use client';
-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 { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext();
-    return /*#__PURE__*/ _jsx("iframe", {
+    return /*#__PURE__*/ _jsxDEV("iframe", {
         className: baseClass,
         onLoad: ()=>{
             setLoadedURL(url);
@@ -17,7 +17,11 @@ export const IFrame = ()=>{
             transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
         },
         title: url
-    }, 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,"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,KAACO;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"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { EyeIcon } from '../../../icons/Eye/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
@@ -11,7 +11,7 @@ export const LivePreviewToggler = ()=>{
     if (!livePreviewURL) {
         return null;
     }
-    return /*#__PURE__*/ _jsx("button", {
+    return /*#__PURE__*/ _jsxDEV("button", {
         "aria-label": isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
         className: [
             baseClass,
@@ -23,10 +23,18 @@ export const LivePreviewToggler = ()=>{
         },
         title: isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
         type: "button",
-        children: /*#__PURE__*/ _jsx(EyeIcon, {
+        children: /*#__PURE__*/ _jsxDEV(EyeIcon, {
             active: isLivePreviewing
-        })
-    });
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toggler/index.tsx",
+            lineNumber: 29,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toggler/index.tsx",
+        lineNumber: 19,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,qBACE,KAACE;QACCC,cAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE;QAChEG,WAAW;YAACT;YAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;SAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;QACxFC,IAAG;QACHC,SAAS;YACPX,oBAAoB,CAACD;QACvB;QACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE;QAC3DU,MAAK;kBAEL,cAAA,KAACnB;YAAQoB,QAAQf;;;AAGvB,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,qBACE,QAACE;QACCC,cAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE;QAChEG,WAAW;YAACT;YAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;SAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;QACxFC,IAAG;QACHC,SAAS;YACPX,oBAAoB,CAACD;QACvB;QACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE;QAC3DU,MAAK;kBAEL,cAAA,QAACnB;YAAQoB,QAAQf;;;;;;;;;;;AAGvB,EAAC"}

package/dist/elements/LivePreview/Toolbar/Controls/index.js

@@ -1,5 +1,5 @@
 'use client';
-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 { ChevronIcon } from '../../../../icons/Chevron/index.js';
 import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
@@ -25,81 +25,145 @@ export const ToolbarControls = ()=>{
         label: t('general:custom'),
         value: 'custom'
     };
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: baseClass,
         children: [
-            breakpoints?.length > 0 && /*#__PURE__*/ _jsx(Popup, {
-                button: /*#__PURE__*/ _jsxs(React.Fragment, {
+            breakpoints?.length > 0 && /*#__PURE__*/ _jsxDEV(Popup, {
+                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsx("span", {
+                        /*#__PURE__*/ _jsxDEV("span", {
                             children: breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label
-                        }),
-                        /*#__PURE__*/ _jsx(ChevronIcon, {
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 36,
+                            columnNumber: 15
+                        }, void 0),
+                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                             className: `${baseClass}__chevron`
-                        })
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 39,
+                            columnNumber: 15
+                        }, void 0)
                     ]
-                }),
+                }, void 0, true, {
+                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                    lineNumber: 35,
+                    columnNumber: 13
+                }, void 0),
                 className: `${baseClass}__breakpoint`,
                 horizontalAlign: "right",
-                render: ({ close })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
-                        children: /*#__PURE__*/ _jsxs(React.Fragment, {
+                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
+                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                             children: [
-                                breakpoints.map((bp)=>/*#__PURE__*/ _jsx(PopupList.Button, {
+                                breakpoints.map((bp)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                         active: bp.name == breakpoint,
                                         onClick: ()=>{
                                             setBreakpoint(bp.name);
                                             close();
                                         },
                                         children: bp.label
-                                    }, bp.name)),
-                                breakpoint === 'custom' && /*#__PURE__*/ _jsx(PopupList.Button, {
+                                    }, bp.name, false, {
+                                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                                        lineNumber: 48,
+                                        columnNumber: 19
+                                    }, void 0)),
+                                /* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */ breakpoint === 'custom' && /*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                     active: breakpoint == customOption.value,
                                     onClick: ()=>{
                                         setBreakpoint(customOption.value);
                                         close();
                                     },
                                     children: customOption.label
-                                })
+                                }, void 0, false, {
+                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                                    lineNumber: 61,
+                                    columnNumber: 19
+                                }, void 0)
                             ]
-                        })
-                    }),
+                        }, void 0, true, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 46,
+                            columnNumber: 15
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                        lineNumber: 45,
+                        columnNumber: 13
+                    }, void 0),
                 showScrollbar: true,
                 verticalAlign: "bottom"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                lineNumber: 33,
+                columnNumber: 9
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}__device-size`,
                 children: [
-                    /*#__PURE__*/ _jsx(PreviewFrameSizeInput, {
+                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
                         axis: "x"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                        lineNumber: 79,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("span", {
                         className: `${baseClass}__size-divider`,
-                        children: /*#__PURE__*/ _jsx(XIcon, {})
-                    }),
-                    /*#__PURE__*/ _jsx(PreviewFrameSizeInput, {
+                        children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 81,
+                            columnNumber: 11
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                        lineNumber: 80,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
                         axis: "y"
-                    })
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                        lineNumber: 83,
+                        columnNumber: 9
+                    }, this)
                 ]
-            }),
-            /*#__PURE__*/ _jsx(Popup, {
-                button: /*#__PURE__*/ _jsxs(React.Fragment, {
+            }, void 0, true, {
+                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                lineNumber: 78,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(Popup, {
+                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsxs("span", {
+                        /*#__PURE__*/ _jsxDEV("span", {
                             children: [
                                 zoom * 100,
                                 "%"
                             ]
-                        }),
-                        /*#__PURE__*/ _jsx(ChevronIcon, {
+                        }, void 0, true, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 88,
+                            columnNumber: 13
+                        }, void 0),
+                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                             className: `${baseClass}__chevron`
-                        })
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 89,
+                            columnNumber: 13
+                        }, void 0)
                     ]
-                }),
+                }, void 0, true, {
+                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                    lineNumber: 87,
+                    columnNumber: 11
+                }, void 0),
                 className: `${baseClass}__zoom`,
                 horizontalAlign: "right",
-                render: ({ close })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
-                        children: /*#__PURE__*/ _jsx(React.Fragment, {
-                            children: zoomOptions.map((zoomValue)=>/*#__PURE__*/ _jsxs(PopupList.Button, {
+                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
+                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                            children: zoomOptions.map((zoomValue)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                     active: zoom * 100 == zoomValue,
                                     onClick: ()=>{
                                         setZoom(zoomValue / 100);
@@ -109,13 +173,29 @@ export const ToolbarControls = ()=>{
                                         zoomValue,
                                         "%"
                                     ]
-                                }, zoomValue))
-                        })
-                    }),
+                                }, zoomValue, true, {
+                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                                    lineNumber: 98,
+                                    columnNumber: 17
+                                }, void 0))
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                            lineNumber: 96,
+                            columnNumber: 13
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                        lineNumber: 95,
+                        columnNumber: 11
+                    }, void 0),
                 showScrollbar: true,
                 verticalAlign: "bottom"
-            }),
-            /*#__PURE__*/ _jsx("a", {
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                lineNumber: 85,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("a", {
                 className: `${baseClass}__external`,
                 href: url,
                 onClick: (e)=>{
@@ -125,10 +205,22 @@ export const ToolbarControls = ()=>{
                 target: "_blank",
                 title: "Open in new window",
                 type: "button",
-                children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
-            })
+                children: /*#__PURE__*/ _jsxDEV(ExternalLinkIcon, {}, void 0, false, {
+                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                    lineNumber: 126,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+                lineNumber: 115,
+                columnNumber: 7
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
+        lineNumber: 31,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toolbar/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        target=\"_blank\"\n        title=\"Open in new window\"\n        type=\"button\"\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","target","title","type"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        target=\"_blank\"\n        title=\"Open in new window\"\n        type=\"button\"\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","target","title","type"],"mappings":"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"}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import './index.scss';
@@ -53,7 +53,7 @@ export const PreviewFrameSizeInput = (props)=>{
         size,
         zoom
     ]);
-    return /*#__PURE__*/ _jsx("input", {
+    return /*#__PURE__*/ _jsxDEV("input", {
         className: baseClass,
         min: 0,
         name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
@@ -61,7 +61,11 @@ export const PreviewFrameSizeInput = (props)=>{
         step: 1,
         type: "number",
         value: internalState || 0
-    });
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toolbar/SizeInput/index.tsx",
+        lineNumber: 64,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAG;YAChBA,WAAW;QACb;QAEAN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAK;gBAChBQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;YACjE,OAAO;gBACLE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;YAClE;QACF;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,KAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;AAG9B,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAG;YAChBA,WAAW;QACb;QAEAN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAK;gBAChBQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;YACjE,OAAO;gBACLE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;YAClE;QACF;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,QAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;;;;;AAG9B,EAAC"}

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useDraggable } from '@dnd-kit/core';
 import React from 'react';
 import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
@@ -12,7 +12,7 @@ const DraggableToolbar = (props)=>{
     const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id: 'live-preview-toolbar'
     });
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: [
             baseClass,
             `${baseClass}--draggable`
@@ -25,41 +25,73 @@ const DraggableToolbar = (props)=>{
             } : {}
         },
         children: [
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ _jsxDEV("button", {
                 ...listeners,
                 ...attributes,
                 className: `${baseClass}__drag-handle`,
                 ref: setNodeRef,
                 type: "button",
-                children: /*#__PURE__*/ _jsx(DragHandleIcon, {})
-            }),
-            /*#__PURE__*/ _jsx(ToolbarControls, {
+                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
+                    fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                    lineNumber: 43,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                lineNumber: 36,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(ToolbarControls, {
                 ...props
-            })
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                lineNumber: 45,
+                columnNumber: 7
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 22,
+        columnNumber: 5
+    }, this);
 };
 const StaticToolbar = (props)=>{
-    return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: [
             baseClass,
             `${baseClass}--static`
         ].join(' '),
-        children: /*#__PURE__*/ _jsx(ToolbarControls, {
+        children: /*#__PURE__*/ _jsxDEV(ToolbarControls, {
             ...props
-        })
-    });
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+            lineNumber: 53,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 52,
+        columnNumber: 5
+    }, this);
 };
 export const LivePreviewToolbar = (props)=>{
     const { draggable } = props;
     if (draggable) {
-        return /*#__PURE__*/ _jsx(DraggableToolbar, {
+        return /*#__PURE__*/ _jsxDEV(DraggableToolbar, {
             ...props
-        });
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+            lineNumber: 66,
+            columnNumber: 12
+        }, this);
     }
-    return /*#__PURE__*/ _jsx(StaticToolbar, {
+    return /*#__PURE__*/ _jsxDEV(StaticToolbar, {
         ...props
-    });
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 69,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map