@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5f0cd13

package/dist/elements/ListHeader/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const listHeaderClass = "list-header";
 type ListHeaderProps = {
     readonly Actions?: React.ReactNode[];
     readonly AfterListHeaderContent?: React.ReactNode;
+    readonly BeforeTitle?: React.ReactNode;
     readonly className?: string;
     readonly title: string;
     readonly TitleActions?: React.ReactNode[];

package/dist/elements/ListHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,gBAAgB,CAAA;AAE5C,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAC1C,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqBhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,eAAe,gBAAgB,CAAA;AAE5C,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACpC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjD,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAC1C,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsBhD,CAAA"}

package/dist/elements/ListHeader/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 export const listHeaderClass = 'list-header';
 export const ListHeader = props => {
   return /*#__PURE__*/_jsxs("header", {
@@ -9,14 +9,14 @@ export const ListHeader = props => {
       className: `${listHeaderClass}__content`,
       children: [/*#__PURE__*/_jsxs("div", {
         className: `${listHeaderClass}__title-and-actions`,
-        children: [/*#__PURE__*/_jsx("h1", {
+        children: [props.BeforeTitle, /*#__PURE__*/_jsx("h1", {
           className: `${listHeaderClass}__title`,
           children: props.title
-        }), props.TitleActions.length ? /*#__PURE__*/_jsx("div", {
+        }), props.TitleActions?.length ? /*#__PURE__*/_jsx("div", {
           className: `${listHeaderClass}__title-actions`,
           children: props.TitleActions
         }) : null]
-      }), props.Actions.length ? /*#__PURE__*/_jsx("div", {
+      }), props.Actions?.length ? /*#__PURE__*/_jsx("div", {
         className: `${listHeaderClass}__actions`,
         children: props.Actions
       }) : null]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","listHeaderClass","ListHeader","props","_jsxs","className","filter","Boolean","join","_jsx","title","TitleActions","length","Actions","AfterListHeaderContent"],"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nexport const listHeaderClass = 'list-header'\n\ntype ListHeaderProps = {\n  readonly Actions?: React.ReactNode[]\n  readonly AfterListHeaderContent?: React.ReactNode\n  readonly className?: string\n  readonly title: string\n  readonly TitleActions?: React.ReactNode[]\n}\nexport const ListHeader: React.FC<ListHeaderProps> = (props) => {\n  return (\n    <header className={[listHeaderClass, props.className].filter(Boolean).join(' ')}>\n      <div className={`${listHeaderClass}__content`}>\n        <div className={`${listHeaderClass}__title-and-actions`}>\n          <h1 className={`${listHeaderClass}__title`}>{props.title}</h1>\n          {props.TitleActions.length ? (\n            <div className={`${listHeaderClass}__title-actions`}>{props.TitleActions}</div>\n          ) : null}\n        </div>\n        {props.Actions.length ? (\n          <div className={`${listHeaderClass}__actions`}>{props.Actions}</div>\n        ) : null}\n      </div>\n      {props.AfterListHeaderContent ? (\n        <div className={`${listHeaderClass}__after-header-content`}>\n          {props.AfterListHeaderContent}\n        </div>\n      ) : null}\n    </header>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,OAAO,MAAMC,eAAA,GAAkB;AAS/B,OAAO,MAAMC,UAAA,GAAyCC,KAAA;EACpD,oBACEC,KAAA,CAAC;IAAOC,SAAA,EAAW,CAACJ,eAAA,EAAiBE,KAAA,CAAME,SAAS,CAAC,CAACC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BACzEJ,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGJ,eAAA,WAA0B;8BAC3CG,KAAA,CAAC;QAAIC,SAAA,EAAW,GAAGJ,eAAA,qBAAoC;gCACrDQ,IAAA,CAAC;UAAGJ,SAAA,EAAW,GAAGJ,eAAA,SAAwB;oBAAGE,KAAA,CAAMO;YAClDP,KAAA,CAAMQ,YAAY,CAACC,MAAM,gBACxBH,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGJ,eAAA,iBAAgC;oBAAGE,KAAA,CAAMQ;aAC1D;UAELR,KAAA,CAAMU,OAAO,CAACD,MAAM,gBACnBH,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGJ,eAAA,WAA0B;kBAAGE,KAAA,CAAMU;WACpD;QAELV,KAAA,CAAMW,sBAAsB,gBAC3BL,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGJ,eAAA,wBAAuC;gBACvDE,KAAA,CAAMW;SAEP;;AAGV","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","listHeaderClass","ListHeader","props","_jsxs","className","filter","Boolean","join","BeforeTitle","_jsx","title","TitleActions","length","Actions","AfterListHeaderContent"],"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nexport const listHeaderClass = 'list-header'\n\ntype ListHeaderProps = {\n  readonly Actions?: React.ReactNode[]\n  readonly AfterListHeaderContent?: React.ReactNode\n  readonly BeforeTitle?: React.ReactNode\n  readonly className?: string\n  readonly title: string\n  readonly TitleActions?: React.ReactNode[]\n}\nexport const ListHeader: React.FC<ListHeaderProps> = (props) => {\n  return (\n    <header className={[listHeaderClass, props.className].filter(Boolean).join(' ')}>\n      <div className={`${listHeaderClass}__content`}>\n        <div className={`${listHeaderClass}__title-and-actions`}>\n          {props.BeforeTitle}\n          <h1 className={`${listHeaderClass}__title`}>{props.title}</h1>\n          {props.TitleActions?.length ? (\n            <div className={`${listHeaderClass}__title-actions`}>{props.TitleActions}</div>\n          ) : null}\n        </div>\n        {props.Actions?.length ? (\n          <div className={`${listHeaderClass}__actions`}>{props.Actions}</div>\n        ) : null}\n      </div>\n      {props.AfterListHeaderContent ? (\n        <div className={`${listHeaderClass}__after-header-content`}>\n          {props.AfterListHeaderContent}\n        </div>\n      ) : null}\n    </header>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,OAAO,MAAMC,eAAA,GAAkB;AAU/B,OAAO,MAAMC,UAAA,GAAyCC,KAAA;EACpD,oBACEC,KAAA,CAAC;IAAOC,SAAA,EAAW,CAACJ,eAAA,EAAiBE,KAAA,CAAME,SAAS,CAAC,CAACC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BACzEJ,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGJ,eAAA,WAA0B;8BAC3CG,KAAA,CAAC;QAAIC,SAAA,EAAW,GAAGJ,eAAA,qBAAoC;mBACpDE,KAAA,CAAMM,WAAW,E,aAClBC,IAAA,CAAC;UAAGL,SAAA,EAAW,GAAGJ,eAAA,SAAwB;oBAAGE,KAAA,CAAMQ;YAClDR,KAAA,CAAMS,YAAY,EAAEC,MAAA,gBACnBH,IAAA,CAAC;UAAIL,SAAA,EAAW,GAAGJ,eAAA,iBAAgC;oBAAGE,KAAA,CAAMS;aAC1D;UAELT,KAAA,CAAMW,OAAO,EAAED,MAAA,gBACdH,IAAA,CAAC;QAAIL,SAAA,EAAW,GAAGJ,eAAA,WAA0B;kBAAGE,KAAA,CAAMW;WACpD;QAELX,KAAA,CAAMY,sBAAsB,gBAC3BL,IAAA,CAAC;MAAIL,SAAA,EAAW,GAAGJ,eAAA,wBAAuC;gBACvDE,KAAA,CAAMY;SAEP;;AAGV","ignoreList":[]}

package/dist/elements/ListSelection/index.css

@@ -0,0 +1,25 @@
+@layer payload-default {
+  .list-selection {
+    display: flex;
+    margin-left: auto;
+    color: var(--theme-elevation-500);
+    gap: var(--spacer-1);
+    align-items: center;
+  }
+
+  .list-selection__count {
+    margin-right: var(--spacer-2);
+  }
+
+  .list-selection__actions {
+    display: flex;
+    gap: var(--spacer-1);
+  }
+
+  .list-selection__button,
+  .list-selection__button.btn {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/dist/elements/ListSelection/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ButtonProps } from '../Button/types.js';
-import './index.scss';
+import './index.css';
 type ListSelection_v4Props = {
     /**
      * The count of selected items

package/dist/elements/ListSelection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAI9D,OAAO,cAAc,CAAA;AAIrB,KAAK,qBAAqB,GAAG;IAC3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACxC;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AACD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,qBAAqB,qBAoB/F;AAED,KAAK,wBAAwB,GAAG,EAAE,GAAG,WAAW,CAAA;AAChD,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,qBAU9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListSelection/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAI9D,OAAO,aAAa,CAAA;AAIpB,KAAK,qBAAqB,GAAG;IAC3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACxC;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AACD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,qBAAqB,qBAsB/F;AAED,KAAK,wBAAwB,GAAG,EAAE,GAAG,WAAW,CAAA;AAChD,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,qBAU9F"}

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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAC3B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,MAAMC,WAAA,GAAc,CAAC,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI;AAEhD,OAAO,MAAMC,eAAA,GAA2CA,CAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EACtD;IAAAgB,UAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,eAAA;IAAAC,aAAA;IAAAC,aAAA;IAAAC,mBAAA;IAAAC,OAAA;IAAAC;EAAA,IAUIlB,qBAAA;EAEJ;IAAAmB;EAAA,IAAclB,cAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAX,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,eAAA,IAAAJ,CAAA,QAAAK,aAAA,IAAAL,CAAA,QAAAM,aAAA,IAAAN,CAAA,QAAAO,mBAAA,IAAAP,CAAA,QAAAQ,OAAA,IAAAR,CAAA,QAAAU,CAAA,IAAAV,CAAA,QAAAS,IAAA;IAEd,MAAAG,YAAA;MAAAC,KAAA,EACSH,CAAA,CAAE;MAAAI,KAAA,EACF;IAAA;IACT,IAAAC,EAAA;IAAA,IAAAf,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,IAAA;MAwDgBM,EAAA,GAAAC,EAAA;QAAC;UAAAC,KAAA,EAAAC;QAAA,IAAAF,EAAS;QAAA,OAChBG,IAAA,CAAAxB,SAAA,CAAAyB,UAAA;UAAAC,QAAA,EACEF,IAAA,CAAAjC,KAAA,CAAAoC,QAAA;YAAAD,QAAA,EACGvB,WAAA,CAAAyB,GAAA,CAAAC,SAAA;cACC,MAAAC,UAAA,GAAiBhB,IAAA,MAAO,IAAOe,SAAA;cAAA,OAE7BE,KAAA,CAAA/B,SAAA,CAAAgC,cAAA;gBAAAC,MAAA,EACUC,UAAA;gBAAAC,OAAA,EAAAA,CAAA;kBAGNtB,OAAA,CAAQgB,SAAA,MAAY;kBACpBP,OAAA;gBAAA;gBAAAI,QAAA,GAGDG,SAAA,EAAU;cAAA,GANNA,SAAA;YAAA,CASX;UAAA,C;;;;;;;;;;;MAIQR,EAAA,GAAAe,aAAA,IACZL,KAAA,CAAAjC,MAAA;QAAA,GAAYuC,aAAW;QAAAC,WAAA,EAAc;QAAAC,IAAA,EAAaf,IAAA,CAAAhC,WAAA;UAAAgD,IAAA;QAAA,C;mBAChDhB,IAAA,CAAC;UAAAiB,SAAA,EAAgB,GAAAvC,SAAA,mBAA+B;UAAAwB,QAAA,EAAE;QAAA,C,GACjDZ,IAAA,MAAO;MAAA,C;;;;;;;;MAYH4B,EAAA,GAAAA,CAAA,KAAM/B,aAAA,EAAeH,UAAA;MAAAH,CAAA,OAAAG,UAAA;MAAAH,CAAA,OAAAM,aAAA;MAAAN,CAAA,OAAAqC,EAAA;IAAA;MAAAA,EAAA,GAAArC,CAAA;IAAA;IAAA,IAAAsC,EAAA;IAAA,IAAAtC,CAAA,SAAAI,eAAA,IAAAJ,CAAA,SAAAO,mBAAA;MAQrB+B,EAAA,GAAAC,CAAA;QACPA,CAAA,CAAAC,cAAA,CAAgB;QAChBpC,eAAA;QACAG,mBAAA,MAAoB;MAAA;MACtBP,CAAA,OAAAI,eAAA;MAAAJ,CAAA,OAAAO,mBAAA;MAAAP,CAAA,OAAAsC,EAAA;IAAA;MAAAA,EAAA,GAAAtC,CAAA;IAAA;IArGNW,EAAA,GAAAe,KAAA,CAAC;MAAAU,SAAA,EAAAvC,SAAA;MAAAwB,QAAA,GACEnB,WAAA,EAAAuC,MAAA,IAAsB,IACrBtB,IAAA,CAAAzB,KAAA;QAAA0C,SAAA,EACa,GAAAvC,SAAA,cAA0B;QAAA6C,eAAA,EACrB;QAAAC,MAAA,EAAAC,EAAA;UACP;YAAA3B;UAAA,IAAA2B,EAAS;UAAA,OAChBzB,IAAA,CAAAxB,SAAA,CAAAyB,UAAA;YAAAC,QAAA,EACEK,KAAA,CAAAxC,KAAA,CAAAoC,QAAA;cAAAD,QAAA,GACGnB,WAAA,CAAAqB,GAAA,CAAAsB,EAAA;gBACC,MAAAhB,QAAA,GAAiBgB,EAAA,CAAAC,IAAA,IAAW7C,UAAA;gBAAA,OAE1BkB,IAAA,CAAAxB,SAAA,CAAAgC,cAAA;kBAAAC,MAAA,EACUC,QAAA;kBAAAC,OAAA,EAAAA,CAAA;oBAGNzB,aAAA,CAAcwC,EAAA,CAAAC,IAAO;oBACrB7B,KAAA;kBAAA;kBAAAI,QAAA,EAGDwB,EAAA,CAAAhC;gBAAA,GANIgC,EAAA,CAAAC,IAAO;cAAA,CASlB,GAEC7C,UAAA,KAAe,YACdkB,IAAA,CAAAxB,SAAA,CAAAgC,cAAA;gBAAAC,MAAA,EACU3B,UAAA,IAAcW,YAAA,CAAAE,KAAkB;gBAAAgB,OAAA,EAAAA,CAAA;kBAEtCzB,aAAA,CAAcO,YAAA,CAAAE,KAAkB;kBAChCG,KAAA;gBAAA;gBAAAI,QAAA,EAGDT,YAAA,CAAAC;cAAA,C;;;;qCAOTM,IAAA,CAAA1B,MAAA;UAAA,GAAYuC,WAAW;UAAAC,WAAA,EAAc;UAAAC,IAAA,EAAkBf,IAAA,CAAAhC,WAAA;YAAAgD,IAAA;UAAA,C;oBACpDjC,WAAA,CAAA6C,IAAA,CAAAC,IAAA,IAAyBH,IAAA,CAAAC,IAAA,IAAW7C,UAAA,GAAAY,KAAA,IAAsBD,YAAA,CAAAC;QAAkB,C;;uBAInE;MAAA,C,GAGlBa,KAAA,CAAC;QAAAU,SAAA,EAAe,GAAAvC,SAAA,UAAsB;QAAAwB,QAAA,GACpCF,IAAA,CAAAvB,qBAAA;UAAAqD,IAAA,EAA4B;QAAA,C,GAC5B9B,IAAA,CAAAvB,qBAAA;UAAAqD,IAAA,EAA4B;QAAA,C,GAC5B9B,IAAA,CAAAzB,KAAA;UAAA0C,SAAA,EACa,GAAAvC,SAAA,QAAoB;UAAA6C,eAAA,EACf;UAAAC,MAAA,EACR5B,E;wBAqBMC,E;;yBAOA;QAAA,C;UAGlBU,KAAA,CAAC;QAAAU,SAAA,EAAe,GAAAvC,SAAA,OAAmB;QAAAwB,QAAA,GACjCF,IAAA,CAAA1B,MAAA;UAAA,cACcU,UAAA,GAAaO,CAAA,CAAE,sBAAsBA,CAAA,CAAE;UAAAuB,WAAA,EACvC;UAAAC,IAAA,EACN/B,UAAA,GAAagB,IAAA,CAAA/B,YAAA;YAAA+C,IAAA;UAAA,C,IAA6BhB,IAAA,CAAA9B,UAAA;YAAA8C,IAAA;UAAA,C;mBACvCE,EAAqB;UAAAa,OAAA,EACrB/C,UAAA,GAAaO,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAA,C,GAElDS,IAAA,CAAA1B,MAAA;UAAA,cACciB,CAAA,CAAE;UAAAuB,WAAA,EACF;UAAAG,SAAA,EACD,GAAAvC,SAAA,YAAwB;UAAAqC,IAAA,EAC7Bf,IAAA,CAAA7B,gBAAA;YAAA6C,IAAA;UAAA,C;mBACGG,EAIT;UAAAY,OAAA,EACSxC,CAAA,CAAE;QAAA,C;;;;;;;;;;;;;;;;;SAtGjBC,E;CA2GJ","ignoreList":[]}