@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/elements/ListSelection/index.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'list-selection';
 export function ListSelection_v4(t0) {
   const $ = _c(5);
@@ -22,6 +22,7 @@ export function ListSelection_v4(t0) {
     t1 = _jsxs("div", {
       className: baseClass,
       children: [_jsx("span", {
+        className: `${baseClass}__count`,
         children: t("general:selectedCount", {
           count,
           label: ""
@@ -59,7 +60,7 @@ export function ListSelectionButton({
 }) {
   return /*#__PURE__*/_jsx(Button, {
     ...props,
-    buttonStyle: "none",
+    buttonStyle: "ghost",
     className: [`${baseClass}__button`, className].filter(Boolean).join(' '),
     children: children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","ListSelection_v4","t0","$","count","ListActions","SelectionActions","t","t1","_jsxs","className","children","_jsx","label","length","Fragment","ListSelectionButton","props","buttonStyle","filter","Boolean","join"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label: '' })}</span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"none\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAoBlB,OAAO,SAAAC,iBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAA0B;IAAAQ,KAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAJ,EAA+D;EAC9F;IAAAK;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAL,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAI,CAAA;IAGZC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAV,SAAA;MAAAW,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMJ,CAAA,CAAE;UAAAH,KAAA;UAAAS,KAAA,EAAyC;QAAA,CAAG;MAAA,C,GACpDR,WAAA,IAAeA,WAAA,CAAAS,MAAA,IAAqB,IACnCL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGN;QAAA,C;UAG7CC,gBAAA,IAAoBA,gBAAA,CAAAQ,MAAA,IAA0B,IAC7CL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGL;QAAA,C;;;;;;;;;;;SAXhDE,E;;AAmBJ,OAAO,SAASQ,oBAAoB;EAAEL,QAAQ;EAAED,SAAS;EAAE,GAAGO;AAAA,CAAiC;EAC7F,oBACEL,IAAA,CAACb,MAAA;IACE,GAAGkB,KAAK;IACTC,WAAA,EAAY;IACZR,SAAA,EAAW,CAAC,GAAGV,SAAA,UAAmB,EAAEU,SAAA,CAAU,CAACS,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAEnEV;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","ListSelection_v4","t0","$","count","ListActions","SelectionActions","t","t1","_jsxs","className","children","_jsx","label","length","Fragment","ListSelectionButton","props","buttonStyle","filter","Boolean","join"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props as ButtonProps } from '../Button/types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'list-selection'\n\ntype ListSelection_v4Props = {\n  /**\n   * The count of selected items\n   */\n  readonly count: number\n  /**\n   * Actions that apply to the list as a whole\n   *\n   * @example select all, clear selection\n   */\n  readonly ListActions?: React.ReactNode[]\n  /**\n   * Actions that apply to the selected items\n   *\n   * @example edit, delete, publish, unpublish\n   */\n  readonly SelectionActions?: React.ReactNode[]\n}\nexport function ListSelection_v4({ count, ListActions, SelectionActions }: ListSelection_v4Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <span className={`${baseClass}__count`}>\n        {t('general:selectedCount', { count, label: '' })}\n      </span>\n      {ListActions && ListActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{ListActions}</div>\n        </React.Fragment>\n      )}\n      {SelectionActions && SelectionActions.length > 0 && (\n        <React.Fragment>\n          <span>&mdash;</span>\n          <div className={`${baseClass}__actions`}>{SelectionActions}</div>\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\ntype ListSelectionButtonProps = {} & ButtonProps\nexport function ListSelectionButton({ children, className, ...props }: ListSelectionButtonProps) {\n  return (\n    <Button\n      {...props}\n      buttonStyle=\"ghost\"\n      className={[`${baseClass}__button`, className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAoBlB,OAAO,SAAAC,iBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAA0B;IAAAQ,KAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAJ,EAA+D;EAC9F;IAAAK;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAL,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAI,CAAA;IAGZC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAV,SAAA;MAAAW,QAAA,GACCC,IAAA,CAAC;QAAAF,SAAA,EAAgB,GAAAV,SAAA,SAAqB;QAAAW,QAAA,EACnCJ,CAAA,CAAE;UAAAH,KAAA;UAAAS,KAAA,EAAyC;QAAA,CAAG;MAAA,C,GAEhDR,WAAA,IAAeA,WAAA,CAAAS,MAAA,IAAqB,IACnCL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGN;QAAA,C;UAG7CC,gBAAA,IAAoBA,gBAAA,CAAAQ,MAAA,IAA0B,IAC7CL,KAAA,CAAAZ,KAAA,CAAAkB,QAAA;QAAAJ,QAAA,GACEC,IAAA,CAAC;UAAAD,QAAA,EAAK;QAAA,C,GACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAAV,SAAA,WAAuB;UAAAW,QAAA,EAAGL;QAAA,C;;;;;;;;;;;SAbhDE,E;;AAqBJ,OAAO,SAASQ,oBAAoB;EAAEL,QAAQ;EAAED,SAAS;EAAE,GAAGO;AAAA,CAAiC;EAC7F,oBACEL,IAAA,CAACb,MAAA;IACE,GAAGkB,KAAK;IACTC,WAAA,EAAY;IACZR,SAAA,EAAW,CAAC,GAAGV,SAAA,UAAmB,EAAEU,SAAA,CAAU,CAACS,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAEnEV;;AAGP","ignoreList":[]}

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,CAgInD,CAAA"}

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

@@ -4,97 +4,129 @@ 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 { CollapseIcon } from '../../../../icons/Collapse/index.js';
+import { ExpandIcon } from '../../../../icons/Expand/index.js';
 import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
-import { XIcon } from '../../../../icons/X/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,
+        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",
         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 +137,67 @@ 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",
+          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(ExternalLinkIcon, {
+            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","ExternalLinkIcon","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","render","t1","bp","name","find","bp_0","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 { ExternalLinkIcon } from '../../../../icons/ExternalLink/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          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          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 {...buttonProps} buttonStyle=\"pill\" icon={<ChevronIcon size={16} />}>\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={<ExternalLinkIcon 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,50 @@
+@layer payload-default {
+  .toolbar-input__group {
+    display: flex;
+    align-items: stretch;
+    height: var(--spacer-4);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--field-border-radius);
+    background: var(--color-bg-secondary);
+    overflow: hidden;
+
+    &:hover:not(:focus-within) {
+      border-color: var(--color-border);
+    }
+
+    &:focus-within {
+      border-color: var(--color-border-selected);
+    }
+  }
+
+  .toolbar-input__prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-4);
+    font-size: var(--text-body-medium-font-size, 0.6875rem);
+    color: var(--color-text-secondary);
+    user-select: none;
+  }
+
+  .toolbar-input {
+    width: calc(var(--spacer-4) * 2);
+    display: flex;
+    align-items: center;
+    border: none;
+    background: transparent;
+    font-size: var(--text-body-medium-font-size, 0.6875rem);
+    color: var(--color-text);
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

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,CAiGA,CAAA"}