@payloadcms/next 3.0.0-beta.13 → 3.0.0-beta.130

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

@@ -1,60 +1,99 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../Context/context.js';
 const baseClass = 'toolbar-input';
-export const PreviewFrameSizeInput = (props)=>{
-    const { axis } = props;
-    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = useLivePreviewContext();
-    const [internalState, setInternalState] = React.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
-    // when the input is changed manually, we need to set the breakpoint as `custom`
-    // this will then allow us to set an explicit width and height
-    const handleChange = useCallback((e)=>{
-        let newValue = Number(e.target.value);
-        if (newValue < 0) newValue = 0;
-        setInternalState(newValue);
-        setBreakpoint('custom');
-        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
-        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
-        setSize({
-            type: 'reset',
-            value: {
-                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
-                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
-            }
-        });
-    }, [
-        axis,
-        setBreakpoint,
-        measuredDeviceSize,
-        setSize,
-        zoom
-    ]);
-    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
-    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
-    useEffect(()=>{
-        if (breakpoint === 'responsive' && measuredDeviceSize) {
-            if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
-            else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
+export const PreviewFrameSizeInput = props => {
+  const $ = _c(17);
+  const {
+    axis
+  } = props;
+  const {
+    breakpoint,
+    measuredDeviceSize,
+    setBreakpoint,
+    setSize,
+    size,
+    zoom
+  } = useLivePreviewContext();
+  const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+  let t0;
+  if ($[0] !== setBreakpoint || $[1] !== setSize || $[2] !== axis || $[3] !== measuredDeviceSize || $[4] !== zoom) {
+    t0 = e => {
+      let newValue = Number(e.target.value);
+      if (newValue < 0) {
+        newValue = 0;
+      }
+      setInternalState(newValue);
+      setBreakpoint("custom");
+      setSize({
+        type: "reset",
+        value: {
+          height: axis === "y" ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+          width: axis === "x" ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
         }
-        if (breakpoint !== 'responsive' && size) {
-            setInternalState(axis === 'x' ? size.width : size.height);
+      });
+    };
+    $[0] = setBreakpoint;
+    $[1] = setSize;
+    $[2] = axis;
+    $[3] = measuredDeviceSize;
+    $[4] = zoom;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  const handleChange = t0;
+  let t1;
+  let t2;
+  if ($[6] !== breakpoint || $[7] !== measuredDeviceSize || $[8] !== axis || $[9] !== zoom || $[10] !== size) {
+    t1 = () => {
+      if (breakpoint === "responsive" && measuredDeviceSize) {
+        if (axis === "x") {
+          setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+        } else {
+          setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
         }
-    }, [
-        breakpoint,
-        axis,
-        measuredDeviceSize,
-        size,
-        zoom
-    ]);
-    return /*#__PURE__*/ React.createElement("input", {
-        className: baseClass,
-        min: 0,
-        name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
-        onChange: handleChange,
-        step: 1,
-        type: "number",
-        value: internalState || 0
+      }
+      if (breakpoint !== "responsive" && size) {
+        setInternalState(axis === "x" ? size.width : size.height);
+      }
+    };
+    t2 = [breakpoint, axis, measuredDeviceSize, size, zoom];
+    $[6] = breakpoint;
+    $[7] = measuredDeviceSize;
+    $[8] = axis;
+    $[9] = zoom;
+    $[10] = size;
+    $[11] = t1;
+    $[12] = t2;
+  } else {
+    t1 = $[11];
+    t2 = $[12];
+  }
+  useEffect(t1, t2);
+  const t3 = axis === "x" ? "live-preview-width" : "live-preview-height";
+  const t4 = internalState || 0;
+  let t5;
+  if ($[13] !== t3 || $[14] !== handleChange || $[15] !== t4) {
+    t5 = _jsx("input", {
+      className: baseClass,
+      min: 0,
+      name: t3,
+      onChange: handleChange,
+      step: 1,
+      type: "number",
+      value: t4
     });
+    $[13] = t3;
+    $[14] = handleChange;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/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) newValue = 0\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') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,2BAA0B;AAGhE,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,GAAGA,WAAW;QAE7BN,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,KAAKQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;iBAC5EE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;QACvE;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,oBAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;AAG9B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,qBAAqB,QAAQ;AAGtC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACH;IAAAS;EAAA,IAAiBF,KAAA;EAEjB;IAAAG,UAAA;IAAAC,kBAAA;IAAAC,aAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC;EAAA,IACEX,qBAAA;EAEF,OAAAY,aAAA,EAAAC,gBAAA,IAA0ChB,KAAA,CAAAiB,QAAA,CACxC,CAACT,IAAA,KAAS,MAAME,kBAAA,EAAAQ,KAAA,GAA4BR,kBAAA,EAAAS,MAAyB,MAAM;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAG,kBAAA,IAAAH,CAAA,QAAAO,IAAA;IAM3EM,EAAA,GAAAC,CAAA;MACE,IAAAC,QAAA,GAAeC,MAAA,CAAOF,CAAA,CAAAG,MAAA,CAAAC,KAAc;MAAA,IAEhCH,QAAA,IAAW;QACbA,QAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,QAAA;MACjBX,aAAA,CAAc;MAIdC,OAAA;QAAAc,IAAA,EACQ;QAAAD,KAAA;UAAAN,MAAA,EAEIX,IAAA,KAAS,MAAMc,QAAA,GAAWC,MAAA,CAAOb,kBAAA,EAAAS,MAAA,CAAAQ,OAAA,GAAmC,IAAMb,IAAA;UAAAI,KAAA,EAC3EV,IAAA,KAAS,MAAMc,QAAA,GAAWC,MAAA,CAAOb,kBAAA,EAAAQ,KAAA,CAAAS,OAAA,GAAkC,IAAMb;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAG,kBAAA;IAAAH,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EApBF,MAAAqB,YAAA,GAAqBR,EAqBqC;EAAA,IAAAS,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,kBAAA,IAAAH,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAO,IAAA,IAAAP,CAAA,SAAAM,IAAA;IAKhDgB,EAAA,GAAAA,CAAA;MAAA,IACJpB,UAAA,KAAe,gBAAgBC,kBAAA;QAAA,IAC7BF,IAAA,KAAS;UACXQ,gBAAA,CAAiBO,MAAA,CAAOb,kBAAA,CAAAQ,KAAA,CAAAS,OAAA,EAAiC,KAAMb,IAAA;QAAA;UAE/DE,gBAAA,CAAiBO,MAAA,CAAOb,kBAAA,CAAAS,MAAA,CAAAQ,OAAA,EAAkC,KAAMb,IAAA;QAAA;MAAA;MAAA,IAIhEL,UAAA,KAAe,gBAAgBI,IAAA;QACjCG,gBAAA,CAAiBR,IAAA,KAAS,MAAMK,IAAA,CAAAK,KAAA,GAAaL,IAAA,CAAAM,MAAW;MAAA;IAAA;IAEzDW,EAAA,IAACrB,UAAA,EAAYD,IAAA,EAAME,kBAAA,EAAoBG,IAAA,EAAMC,IAAA;IAAKP,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAG,kBAAA;IAAAH,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAO,IAAA;IAAAP,CAAA,OAAAM,IAAA;IAAAN,CAAA,OAAAsB,EAAA;IAAAtB,CAAA,OAAAuB,EAAA;EAAA;IAAAD,EAAA,GAAAtB,CAAA;IAAAuB,EAAA,GAAAvB,CAAA;EAAA;EAZrDL,SAAA,CAAU2B,EAYV,EAAGC,EAAkD;EAM3C,MAAAC,EAAA,GAAAvB,IAAA,KAAS,MAAM,uBAAuB;EAIrC,MAAAwB,EAAA,GAAAjB,aAAA,KAAiB;EAAA,IAAAkB,EAAA;EAAA,IAAA1B,CAAA,SAAAwB,EAAA,IAAAxB,CAAA,SAAAqB,YAAA,IAAArB,CAAA,SAAAyB,EAAA;IAP1BC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAA/B,SAAA;MAAAgC,GAAA;MAAAC,IAAA,EAGON,EAAsC;MAAAO,QAAA,EAClCV,YAAA;MAAAW,IAAA;MAAAb,IAAA,EAEL;MAAAD,KAAA,EACEO;IAAiB,C;;;;;;;;SAP1BC,E;CAUJ","ignoreList":[]}

package/dist/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -1,10 +1,12 @@
-.toolbar-input {
-  width: 50px;
-  height: var(--base);
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-100);
-  border-radius: 2px;
-  font-size: small;
+@layer payload-default {
+  .toolbar-input {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
 }

package/dist/views/LivePreview/Toolbar/index.d.ts

@@ -1,7 +1,7 @@
-import type { EditViewProps } from 'payload/types';
+import type { EditViewProps } from 'payload';
 import React from 'react';
 import './index.scss';
-export declare const LivePreviewToolbar: React.FC<EditViewProps & {
+export declare const LivePreviewToolbar: React.FC<{
     draggable?: boolean;
-}>;
+} & EditViewProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/LivePreview/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CASF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC;IACE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,aAAa,CASlB,CAAA"}

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

@@ -1,49 +1,96 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable } from '@dnd-kit/core';
-import { DragHandle } from '@payloadcms/ui/icons/DragHandle';
+import { DragHandleIcon } from '@payloadcms/ui';
 import React from 'react';
 import { useLivePreviewContext } from '../Context/context.js';
 import { ToolbarControls } from './Controls/index.js';
 const baseClass = 'live-preview-toolbar';
-const DraggableToolbar = (props)=>{
-    const { toolbarPosition } = useLivePreviewContext();
-    const { attributes, listeners, setNodeRef, transform } = useDraggable({
-        id: 'live-preview-toolbar'
-    });
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            baseClass,
-            `${baseClass}--draggable`
-        ].join(' '),
-        style: {
-            left: `${toolbarPosition.x}px`,
-            top: `${toolbarPosition.y}px`,
-            ...transform ? {
-                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
-            } : {}
-        }
-    }, /*#__PURE__*/ React.createElement("button", {
+const DraggableToolbar = props => {
+  const $ = _c(10);
+  const {
+    toolbarPosition
+  } = useLivePreviewContext();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "live-preview-toolbar"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [baseClass, `${baseClass}--draggable`];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = `${toolbarPosition.x}px`;
+  const t3 = `${toolbarPosition.y}px`;
+  let t4;
+  if ($[2] !== transform || $[3] !== t2 || $[4] !== t3 || $[5] !== listeners || $[6] !== attributes || $[7] !== setNodeRef || $[8] !== props) {
+    t4 = _jsxs("div", {
+      className: t1.join(" "),
+      style: {
+        left: t2,
+        top: t3,
+        ...(transform ? {
+          transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+        } : {})
+      },
+      children: [_jsx("button", {
         ...listeners,
         ...attributes,
         className: `${baseClass}__drag-handle`,
         ref: setNodeRef,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement(ToolbarControls, props));
+        type: "button",
+        children: _jsx(DragHandleIcon, {})
+      }), _jsx(ToolbarControls, {
+        ...props
+      })]
+    });
+    $[2] = transform;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = listeners;
+    $[6] = attributes;
+    $[7] = setNodeRef;
+    $[8] = props;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 };
-const StaticToolbar = (props)=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            baseClass,
-            `${baseClass}--static`
-        ].join(' ')
-    }, /*#__PURE__*/ React.createElement(ToolbarControls, props));
+const StaticToolbar = props => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, `${baseClass}--static`].join(' '),
+    children: /*#__PURE__*/_jsx(ToolbarControls, {
+      ...props
+    })
+  });
 };
-export const LivePreviewToolbar = (props)=>{
-    const { draggable } = props;
-    if (draggable) {
-        return /*#__PURE__*/ React.createElement(DraggableToolbar, props);
-    }
-    return /*#__PURE__*/ React.createElement(StaticToolbar, props);
+export const LivePreviewToolbar = props => {
+  const {
+    draggable
+  } = props;
+  if (draggable) {
+    return /*#__PURE__*/_jsx(DraggableToolbar, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(StaticToolbar, {
+    ...props
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload/types'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandle } from '@payloadcms/ui/icons/DragHandle'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandle />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  EditViewProps & {\n    draggable?: boolean\n  }\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandle","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,sBAAqB;AAGrD,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,oBAACC;QACCC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,CAAC,EAAEV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,CAAC,EAAEZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;qBAEA,oBAACC;QACE,GAAGb,SAAS;QACZ,GAAGD,UAAU;QACdM,WAAW,CAAC,EAAEV,UAAU,aAAa,CAAC;QACtCmB,KAAKb;QACLc,MAAK;qBAEL,oBAACxB,kCAEH,oBAACG,iBAAoBG;AAG3B;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,oBAACO;QAAIC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;qBACvD,oBAACZ,iBAAoBG;AAG3B;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,oBAACtB,kBAAqBC;IAC/B;IAEA,qBAAO,oBAACmB,eAAkBnB;AAC5B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useDraggable","DragHandleIcon","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandleIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAGhC,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAD,KAAA;IAJjCgB,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA/B,cAAA,IAAC;MAAA,C,GAEH+B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}

package/dist/views/LivePreview/Toolbar/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  display: flex;
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-  height: calc(var(--base) * 1.75);
-  align-items: center;
-  flex-shrink: 0;
+@layer payload-default {
+  .live-preview-toolbar {
+    display: flex;
+    background-color: var(--theme-bg);
+    color: var(--theme-text);
+    height: calc(var(--base) * 1.75);
+    align-items: center;
+    flex-shrink: 0;
 
-  &--static {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    border-bottom: 1px solid var(--theme-elevation-100);
-  }
+    &--static {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
 
-  &--draggable {
-    @include shadow-lg;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 4px;
-  }
+    &--draggable {
+      @include shadow-lg;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 4px;
+    }
 
-  &__drag-handle {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: grab;
+    &__drag-handle {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: grab;
 
-    .icon--drag-handle .fill {
-      fill: var(--theme-elevation-300);
-    }
+      .icon--drag-handle .fill {
+        fill: var(--theme-elevation-300);
+      }
 
-    &:active {
-      cursor: grabbing;
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }

package/dist/views/LivePreview/ToolbarArea/index.js

@@ -1,16 +1,40 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDroppable } from '@dnd-kit/core';
 import React from 'react';
 const baseClass = 'toolbar-area';
-export const ToolbarArea = (props)=>{
-    const { children } = props;
-    const { setNodeRef } = useDroppable({
-        id: 'live-preview-area'
+export const ToolbarArea = props => {
+  const $ = _c(4);
+  const {
+    children
+  } = props;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "live-preview-area"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const {
+    setNodeRef
+  } = useDroppable(t0);
+  let t1;
+  if ($[1] !== setNodeRef || $[2] !== children) {
+    t1 = _jsx("div", {
+      className: baseClass,
+      ref: setNodeRef,
+      children
     });
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass,
-        ref: setNodeRef
-    }, children);
+    $[1] = setNodeRef;
+    $[2] = children;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/ToolbarArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,oBAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;OAC7BD;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAIlB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAC,QAAA;IAGEM,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}

package/dist/views/LivePreview/ToolbarArea/index.scss

@@ -1,4 +1,6 @@
-.toolbar-area {
-  width: 100%;
-  height: 100%;
+@layer payload-default {
+  .toolbar-area {
+    width: 100%;
+    height: 100%;
+  }
 }

package/dist/views/LivePreview/index.client.d.ts

@@ -1,10 +1,9 @@
-import type { LivePreviewConfig } from 'payload/config';
-import type { Data } from 'payload/types';
+import type { Data, LivePreviewConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const LivePreviewClient: React.FC<{
-    breakpoints: LivePreviewConfig['breakpoints'];
-    initialData: Data;
-    url: string;
+    readonly breakpoints: LivePreviewConfig['breakpoints'];
+    readonly initialData: Data;
+    readonly url: string;
 }>;
 //# sourceMappingURL=index.client.d.ts.map

package/dist/views/LivePreview/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAA4D,IAAI,EAAE,MAAM,eAAe,CAAA;AAanG,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,OAAO,cAAc,CAAA;AA+KrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,WAAW,EAAE,IAAI,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;CACZ,CA2DA,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAMV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AA2BhB,OAAO,KAA6D,MAAM,OAAO,CAAA;AAIjF,OAAO,cAAc,CAAA;AA4ZrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,CA8CA,CAAA"}