@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/ListWhereBuilder/index.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { WhereBuilder } from '../WhereBuilder/index.js';
+/**
+ * Wires {@link WhereBuilder} to the list view's query state, reading the current `where`
+ * from {@link useListQuery} and persisting edits back to the URL.
+ */
+export const ListWhereBuilder = t0 => {
+  const $ = _c(11);
+  const {
+    collectionPluralLabel,
+    collectionSlug,
+    fields,
+    onEmptyRemove,
+    renderedFilters,
+    resolvedFilterOptions
+  } = t0;
+  const {
+    handleWhereChange,
+    query
+  } = useListQuery();
+  let t1;
+  if ($[0] !== handleWhereChange) {
+    t1 = where => handleWhereChange(where);
+    $[0] = handleWhereChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handleChange = t1;
+  const t2 = query?.where;
+  let t3;
+  if ($[2] !== collectionPluralLabel || $[3] !== collectionSlug || $[4] !== fields || $[5] !== handleChange || $[6] !== onEmptyRemove || $[7] !== renderedFilters || $[8] !== resolvedFilterOptions || $[9] !== t2) {
+    t3 = _jsx(WhereBuilder, {
+      collectionPluralLabel,
+      collectionSlug,
+      fields,
+      onChange: handleChange,
+      onEmptyRemove,
+      renderedFilters,
+      resolvedFilterOptions,
+      value: t2
+    });
+    $[2] = collectionPluralLabel;
+    $[3] = collectionSlug;
+    $[4] = fields;
+    $[5] = handleChange;
+    $[6] = onEmptyRemove;
+    $[7] = renderedFilters;
+    $[8] = resolvedFilterOptions;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useListQuery","WhereBuilder","ListWhereBuilder","t0","$","collectionPluralLabel","collectionSlug","fields","onEmptyRemove","renderedFilters","resolvedFilterOptions","handleWhereChange","query","t1","where","handleChange","t2","t3","_jsx","onChange","value"],"sources":["../../../src/elements/ListWhereBuilder/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, ResolvedFilterOptions, SanitizedCollectionConfig } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\n\nexport type ListWhereBuilderProps = {\n  readonly collectionPluralLabel?: SanitizedCollectionConfig['labels']['plural']\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n  readonly onEmptyRemove?: () => void\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n\n/**\n * Wires {@link WhereBuilder} to the list view's query state, reading the current `where`\n * from {@link useListQuery} and persisting edits back to the URL.\n */\nexport const ListWhereBuilder: React.FC<ListWhereBuilderProps> = ({\n  collectionPluralLabel,\n  collectionSlug,\n  fields,\n  onEmptyRemove,\n  renderedFilters,\n  resolvedFilterOptions,\n}) => {\n  const { handleWhereChange, query } = useListQuery()\n\n  const handleChange = useCallback(\n    (where: Parameters<typeof handleWhereChange>[0]) => handleWhereChange(where),\n    [handleWhereChange],\n  )\n\n  return (\n    <WhereBuilder\n      collectionPluralLabel={collectionPluralLabel}\n      collectionSlug={collectionSlug}\n      fields={fields}\n      onChange={handleChange}\n      onEmptyRemove={onEmptyRemove}\n      renderedFilters={renderedFilters}\n      resolvedFilterOptions={resolvedFilterOptions}\n      value={query?.where}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAEnC,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAW7B;;;;AAIA,OAAO,MAAMC,gBAAA,GAAoDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,qBAAA;IAAAC,cAAA;IAAAC,MAAA;IAAAC,aAAA;IAAAC,eAAA;IAAAC;EAAA,IAAAP,EAOjE;EACC;IAAAQ,iBAAA;IAAAC;EAAA,IAAqCZ,YAAA;EAAA,IAAAa,EAAA;EAAA,IAAAT,CAAA,QAAAO,iBAAA;IAGnCE,EAAA,GAAAC,KAAA,IAAoDH,iBAAA,CAAkBG,KAAA;IAAAV,CAAA,MAAAO,iBAAA;IAAAP,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EADxE,MAAAW,YAAA,GAAqBF,EAEA;EAYV,MAAAG,EAAA,GAAAJ,KAAA,EAAAE,KAAO;EAAA,IAAAG,EAAA;EAAA,IAAAb,CAAA,QAAAC,qBAAA,IAAAD,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAW,YAAA,IAAAX,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,eAAA,IAAAL,CAAA,QAAAM,qBAAA,IAAAN,CAAA,QAAAY,EAAA;IARhBC,EAAA,GAAAC,IAAA,CAACjB,YAAA;MAAAI,qBAAA;MAAAC,cAAA;MAAAC,MAAA;MAAAY,QAAA,EAIWJ,YAAA;MAAAP,aAAA;MAAAC,eAAA;MAAAC,qBAAA;MAAAU,KAAA,EAIHJ;;;;;;;;;;;;;;SARTC,E;CAWJ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAA,IAAcC,WAAA,EAAAI,IAAA,CAAAC,EAAA,IAA0BA,EAAA,CAAAC,IAAA,KAAYP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAAA,IAETL,eAAA,IAAmBJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAAJ,IAGE,OAAOL,IAAA,KAAS,YAChB,OAAOD,IAAA,CAAAQ,KAAA,KAAe,YACtB,OAAOR,IAAA,CAAAS,MAAA,KAAgB;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAA,GAAaP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,IAAa,IAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EAAA;EAQI,MAAAK,EAAA,GAAAV,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAS,MAAA,IAAgB,OAAOR,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC3D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAQ,KAAA,IAAe,OAAOP,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC1D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;IAfZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA;QAAAR,MAAA,EAGKG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAIM;MAAAjB;IAAA,C;;;;;;;;;;SAfZkB,E;CAqBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAoD,IAAtCC,WAAA,EAAAI,IAAsC,CAApBC,EAAA,IAAQA,EAAA,CAAAC,IAAO,KAAKP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAEb,IAAIL,eAAkC,IAAfJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAEJ,IACE,OAAOL,IAAA,KAAS,QACM,IAAtB,OAAOD,IAAA,CAAAQ,KAAU,KAAK,QACC,IAAvB,OAAOR,IAAA,CAAAS,MAAW,KAAK;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAU,GAAGP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,GAAa,KAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EACF;EAOM,MAAAK,EAAA,GAAAV,eAA6C,IAA1BA,eAAA,EAAAG,IAAiB,KAAS,YAIvC,GAJN,GACOL,IAAA,EAAAS,MAAM,IAAU,OAAOR,IAAA,KAAS,QAAkB,GAAlCA,IAAkC,GAAlC,CAAkC,KAGnD,GAFF,OAAOA,IAAA,KAAS,QAEd,GAFF,GACK,MAAMA,IAAA,GACT,GAFF,MAEE;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAA6C,IAA1BA,eAAA,EAAAG,IAAiB,KAAS,YAIvC,GAJN,GACOL,IAAA,EAAAQ,KAAM,IAAS,OAAOP,IAAA,KAAS,QAAkB,GAAlCA,IAAkC,GAAlC,CAAkC,KAGlD,GAFF,OAAOA,IAAA,KAAS,QAEd,GAFF,GACK,MAAMA,IAAA,GACT,GAFF,MAEE;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;IAfZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA,EACQ;QAAAR,MAAA,EAEHG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAKJ;MAAAjB;;;;;;;;;;;SAhBFkB,E;CAqBJ","ignoreList":[]}

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

@@ -0,0 +1,9 @@
+@layer payload-default {
+  .live-preview-toggler--active {
+    background-color: var(--color-bg-secondary);
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+    }
+  }
+}

package/dist/elements/LivePreview/Toggler/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const LivePreviewToggler: React.FC;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/LivePreview/Toggler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAsBtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAuBtC,CAAA"}

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { EyeIcon } from '../../../icons/Eye/index.js';
+import { PreviewIcon } from '../../../icons/Preview/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import './index.scss';
+import { Button } from '../../Button/index.js';
+import './index.css';
 const baseClass = 'live-preview-toggler';
 export const LivePreviewToggler = () => {
   const {
@@ -17,18 +18,20 @@ export const LivePreviewToggler = () => {
   if (!livePreviewURL) {
     return null;
   }
-  return /*#__PURE__*/_jsx("button", {
-    "aria-label": isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
+  const label = isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview');
+  return /*#__PURE__*/_jsx(Button, {
+    "aria-label": label,
+    buttonStyle: "ghost",
     className: [baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' '),
+    icon: /*#__PURE__*/_jsx(PreviewIcon, {
+      active: isLivePreviewing,
+      size: 24
+    }),
     id: "live-preview-toggler",
     onClick: () => {
       setIsLivePreviewing(!isLivePreviewing);
     },
-    title: isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
-    type: "button",
-    children: /*#__PURE__*/_jsx(EyeIcon, {
-      active: isLivePreviewing
-    })
+    tooltip: label
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","_jsx","className","filter","Boolean","join","id","onClick","title","type","active"],"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"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAA+BA,CAAA;EAC1C,MAAM;IAAEC,gBAAgB;IAAEC,mBAAmB;IAAEC,GAAA,EAAKC;EAAc,CAAE,GAAGP,qBAAA;EACvE,MAAM;IAAEQ;EAAC,CAAE,GAAGP,cAAA;EAEd,IAAI,CAACM,cAAA,EAAgB;IACnB,OAAO;EACT;EAEA,oBACEE,IAAA,CAAC;IACC,cAAYL,gBAAA,GAAmBI,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAChEE,SAAA,EAAW,CAACR,SAAA,EAAWE,gBAAA,IAAoB,GAAGF,SAAA,UAAmB,CAAC,CAACS,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACxFC,EAAA,EAAG;IACHC,OAAA,EAASA,CAAA;MACPV,mBAAA,CAAoB,CAACD,gBAAA;IACvB;IACAY,KAAA,EAAOZ,gBAAA,GAAmBI,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAC3DS,IAAA,EAAK;cAEL,aAAAR,IAAA,CAACV,OAAA;MAAQmB,MAAA,EAAQd;;;AAGvB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PreviewIcon","useLivePreviewContext","useTranslation","Button","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","label","_jsx","buttonStyle","className","filter","Boolean","join","icon","active","size","id","onClick","tooltip"],"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { PreviewIcon } from '../../../icons/Preview/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.css'\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  const label = isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')\n\n  return (\n    <Button\n      aria-label={label}\n      buttonStyle=\"ghost\"\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      icon={<PreviewIcon active={isLivePreviewing} size={24} />}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      tooltip={label}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAA+BA,CAAA;EAC1C,MAAM;IAAEC,gBAAgB;IAAEC,mBAAmB;IAAEC,GAAA,EAAKC;EAAc,CAAE,GAAGR,qBAAA;EACvE,MAAM;IAAES;EAAC,CAAE,GAAGR,cAAA;EAEd,IAAI,CAACO,cAAA,EAAgB;IACnB,OAAO;EACT;EAEA,MAAME,KAAA,GAAQL,gBAAA,GAAmBI,CAAA,CAAE,6BAA6BA,CAAA,CAAE;EAElE,oBACEE,IAAA,CAACT,MAAA;IACC,cAAYQ,KAAA;IACZE,WAAA,EAAY;IACZC,SAAA,EAAW,CAACV,SAAA,EAAWE,gBAAA,IAAoB,GAAGF,SAAA,UAAmB,CAAC,CAACW,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACxFC,IAAA,eAAMN,IAAA,CAACZ,WAAA;MAAYmB,MAAA,EAAQb,gBAAA;MAAkBc,IAAA,EAAM;;IACnDC,EAAA,EAAG;IACHC,OAAA,EAASA,CAAA;MACPf,mBAAA,CAAoB,CAACD,gBAAA;IACvB;IACAiB,OAAA,EAASZ;;AAGf","ignoreList":[]}

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

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .live-preview-toolbar-controls {
+    display: contents;
+  }
+
+  .live-preview-toolbar-controls__breakpoint {
+    justify-self: start;
+  }
+
+  .live-preview-toolbar-controls__center {
+    display: flex;
+    align-items: center;
+    justify-self: center;
+    gap: var(--spacer-2);
+  }
+
+  .live-preview-toolbar-controls__zoom-percentage {
+    margin-right: var(--spacer-2);
+    color: var(--color-text-secondary);
+  }
+
+  .live-preview-toolbar-controls__end {
+    display: flex;
+    align-items: center;
+    justify-self: end;
+    gap: var(--spacer-1);
+  }
+}

package/dist/elements/LivePreview/Toolbar/Controls/index.d.ts

@@ -1,5 +1,5 @@
 import type { EditViewProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const ToolbarControls: React.FC<EditViewProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/LivePreview/Toolbar/Controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+GnD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuInD,CAAA"}

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

@@ -4,97 +4,131 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
-import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
-import { XIcon } from '../../../../icons/X/index.js';
+import { CollapseIcon } from '../../../../icons/Collapse/index.js';
+import { ExpandIcon } from '../../../../icons/Expand/index.js';
+import { NewTabIcon } from '../../../../icons/NewTab/index.js';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
+import { Button } from '../../../Button/index.js';
 import { Popup, PopupList } from '../../../Popup/index.js';
 import { PreviewFrameSizeInput } from '../SizeInput/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'live-preview-toolbar-controls';
 const zoomOptions = [50, 75, 100, 125, 150, 200];
 export const ToolbarControls = () => {
-  const $ = _c(14);
+  const $ = _c(22);
   const {
     breakpoint,
     breakpoints,
+    isExpanded,
+    openPopupWindow,
     setBreakpoint,
-    setPreviewWindowType,
+    setIsExpanded,
+    setIsLivePreviewing,
     setZoom,
-    url,
     zoom
   } = useLivePreviewContext();
   const {
     t
   } = useTranslation();
   let t0;
-  if ($[0] !== breakpoint || $[1] !== breakpoints || $[2] !== setBreakpoint || $[3] !== setPreviewWindowType || $[4] !== setZoom || $[5] !== t || $[6] !== url || $[7] !== zoom) {
+  if ($[0] !== breakpoint || $[1] !== breakpoints || $[2] !== isExpanded || $[3] !== openPopupWindow || $[4] !== setBreakpoint || $[5] !== setIsExpanded || $[6] !== setIsLivePreviewing || $[7] !== setZoom || $[8] !== t || $[9] !== zoom) {
     const customOption = {
       label: t("general:custom"),
       value: "custom"
     };
     let t2;
-    if ($[9] !== setZoom || $[10] !== zoom) {
+    if ($[11] !== setZoom || $[12] !== zoom) {
       t2 = t3 => {
         const {
           close: close_0
         } = t3;
-        return _jsx(PopupList.ButtonGroup, {
+        return _jsx(PopupList.RadioGroup, {
           children: _jsx(React.Fragment, {
-            children: zoomOptions.map(zoomValue => _jsxs(PopupList.Button, {
-              active: zoom * 100 == zoomValue,
-              onClick: () => {
-                setZoom(zoomValue / 100);
-                close_0();
-              },
-              children: [zoomValue, "%"]
-            }, zoomValue))
+            children: zoomOptions.map(zoomValue => {
+              const isActive_0 = zoom * 100 == zoomValue;
+              return _jsxs(PopupList.RadioGroupItem, {
+                active: isActive_0,
+                onClick: () => {
+                  setZoom(zoomValue / 100);
+                  close_0();
+                },
+                children: [zoomValue, "%"]
+              }, zoomValue);
+            })
           })
         });
       };
-      $[9] = setZoom;
-      $[10] = zoom;
-      $[11] = t2;
+      $[11] = setZoom;
+      $[12] = zoom;
+      $[13] = t2;
     } else {
-      t2 = $[11];
+      t2 = $[13];
     }
     let t3;
-    if ($[12] !== setPreviewWindowType) {
-      t3 = e => {
+    if ($[14] !== zoom) {
+      t3 = buttonProps_0 => _jsxs(Button, {
+        ...buttonProps_0,
+        "aria-label": `Zoom ${zoom * 100}%`,
+        buttonStyle: "pill",
+        icon: _jsx(ChevronIcon, {
+          size: 16
+        }),
+        children: [_jsx("span", {
+          className: `${baseClass}__zoom-percentage`,
+          children: "%"
+        }), zoom * 100]
+      });
+      $[14] = zoom;
+      $[15] = t3;
+    } else {
+      t3 = $[15];
+    }
+    let t4;
+    if ($[16] !== isExpanded || $[17] !== setIsExpanded) {
+      t4 = () => setIsExpanded(!isExpanded);
+      $[16] = isExpanded;
+      $[17] = setIsExpanded;
+      $[18] = t4;
+    } else {
+      t4 = $[18];
+    }
+    let t5;
+    if ($[19] !== openPopupWindow || $[20] !== setIsLivePreviewing) {
+      t5 = e => {
         e.preventDefault();
-        setPreviewWindowType("popup");
+        openPopupWindow();
+        setIsLivePreviewing(false);
       };
-      $[12] = setPreviewWindowType;
-      $[13] = t3;
+      $[19] = openPopupWindow;
+      $[20] = setIsLivePreviewing;
+      $[21] = t5;
     } else {
-      t3 = $[13];
+      t5 = $[21];
     }
     t0 = _jsxs("div", {
       className: baseClass,
       children: [breakpoints?.length > 0 && _jsx(Popup, {
-        button: _jsxs(React.Fragment, {
-          children: [_jsx("span", {
-            children: breakpoints.find(bp => bp.name == breakpoint)?.label ?? customOption.label
-          }), _jsx(ChevronIcon, {
-            className: `${baseClass}__chevron`
-          })]
-        }),
         className: `${baseClass}__breakpoint`,
         horizontalAlign: "right",
+        popupType: "menu",
         render: t1 => {
           const {
             close
           } = t1;
-          return _jsx(PopupList.ButtonGroup, {
+          return _jsx(PopupList.RadioGroup, {
             children: _jsxs(React.Fragment, {
-              children: [breakpoints.map(bp_0 => _jsx(PopupList.Button, {
-                active: bp_0.name == breakpoint,
-                onClick: () => {
-                  setBreakpoint(bp_0.name);
-                  close();
-                },
-                children: bp_0.label
-              }, bp_0.name)), breakpoint === "custom" && _jsx(PopupList.Button, {
+              children: [breakpoints.map(bp => {
+                const isActive = bp.name == breakpoint;
+                return _jsx(PopupList.RadioGroupItem, {
+                  active: isActive,
+                  onClick: () => {
+                    setBreakpoint(bp.name);
+                    close();
+                  },
+                  children: bp.label
+                }, bp.name);
+              }), breakpoint === "custom" && _jsx(PopupList.RadioGroupItem, {
                 active: breakpoint == customOption.value,
                 onClick: () => {
                   setBreakpoint(customOption.value);
@@ -105,52 +139,68 @@ export const ToolbarControls = () => {
             })
           });
         },
+        renderButton: buttonProps => _jsx(Button, {
+          ...buttonProps,
+          buttonStyle: "secondary",
+          icon: _jsx(ChevronIcon, {
+            size: 16
+          }),
+          children: breakpoints.find(bp_0 => bp_0.name == breakpoint)?.label ?? customOption.label
+        }),
         showScrollbar: true,
         verticalAlign: "bottom"
       }), _jsxs("div", {
-        className: `${baseClass}__device-size`,
+        className: `${baseClass}__center`,
         children: [_jsx(PreviewFrameSizeInput, {
           axis: "x"
-        }), _jsx("span", {
-          className: `${baseClass}__size-divider`,
-          children: _jsx(XIcon, {})
         }), _jsx(PreviewFrameSizeInput, {
           axis: "y"
+        }), _jsx(Popup, {
+          className: `${baseClass}__zoom`,
+          horizontalAlign: "right",
+          popupType: "menu",
+          render: t2,
+          renderButton: t3,
+          showScrollbar: true,
+          verticalAlign: "bottom"
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__end`,
+        children: [_jsx(Button, {
+          "aria-label": isExpanded ? t("general:collapse") : t("general:expand"),
+          buttonStyle: "ghost",
+          icon: isExpanded ? _jsx(CollapseIcon, {
+            size: 16
+          }) : _jsx(ExpandIcon, {
+            size: 16
+          }),
+          onClick: t4,
+          tooltip: isExpanded ? t("general:collapse") : t("general:expand")
+        }), _jsx(Button, {
+          "aria-label": t("general:openInNewWindow"),
+          buttonStyle: "ghost",
+          className: `${baseClass}__external`,
+          icon: _jsx(NewTabIcon, {
+            size: 16
+          }),
+          onClick: t5,
+          tooltip: t("general:openInNewWindow")
         })]
-      }), _jsx(Popup, {
-        button: _jsxs(React.Fragment, {
-          children: [_jsxs("span", {
-            children: [zoom * 100, "%"]
-          }), _jsx(ChevronIcon, {
-            className: `${baseClass}__chevron`
-          })]
-        }),
-        className: `${baseClass}__zoom`,
-        horizontalAlign: "right",
-        render: t2,
-        showScrollbar: true,
-        verticalAlign: "bottom"
-      }), _jsx("a", {
-        className: `${baseClass}__external`,
-        href: url,
-        onClick: t3,
-        target: "_blank",
-        title: t("general:openInNewWindow"),
-        type: "button",
-        children: _jsx(ExternalLinkIcon, {})
       })]
     });
     $[0] = breakpoint;
     $[1] = breakpoints;
-    $[2] = setBreakpoint;
-    $[3] = setPreviewWindowType;
-    $[4] = setZoom;
-    $[5] = t;
-    $[6] = url;
-    $[7] = zoom;
-    $[8] = t0;
+    $[2] = isExpanded;
+    $[3] = openPopupWindow;
+    $[4] = setBreakpoint;
+    $[5] = setIsExpanded;
+    $[6] = setIsLivePreviewing;
+    $[7] = setZoom;
+    $[8] = t;
+    $[9] = zoom;
+    $[10] = t0;
   } else {
-    t0 = $[8];
+    t0 = $[10];
   }
   return t0;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","ButtonGroup","children","Fragment","map","zoomValue","_jsxs","Button","active","onClick","e","preventDefault","className","length","button","find","bp","name","horizontalAlign","render","t1","bp_0","axis","href","target","title","type"],"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={t('general:openInNewWindow')}\n        type=\"button\"\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","NewTabIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","popupType","render","t1","bp","name","find","bp_0","verticalAlign","axis","tooltip"],"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 { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { NewTabIcon } from '../../../../icons/NewTab/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    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          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\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.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button\n              {...buttonProps}\n              aria-label={`Zoom ${zoom * 100}%`}\n              buttonStyle=\"pill\"\n              icon={<ChevronIcon size={16} />}\n            >\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<NewTabIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+@layer payload-default {
+  /* Keep the toolbar size input compact rather than filling available space */
+  .toolbar-input {
+    width: max-content;
+  }
+
+  .toolbar-input .form-input {
+    flex: 0 0 auto;
+    width: calc(var(--spacer-4) * 2);
+  }
+}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const PreviewFrameSizeInput: React.FC<{
     axis?: 'x' | 'y';
 }>;

package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA+DA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA2FA,CAAA"}