@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4804abd

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,7 +9,7 @@ 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", {

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,EAAEC,MAAA,gBACnBH,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGJ,eAAA,iBAAgC;oBAAGE,KAAA,CAAMQ;aAC1D;UAELR,KAAA,CAAMU,OAAO,EAAED,MAAA,gBACdH,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(--color-text-secondary);
+    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/ListWhereBuilder/index.d.ts

@@ -0,0 +1,16 @@
+import type { ClientField, ResolvedFilterOptions, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type ListWhereBuilderProps = {
+    readonly collectionPluralLabel?: SanitizedCollectionConfig['labels']['plural'];
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly fields: ClientField[];
+    readonly onEmptyRemove?: () => void;
+    readonly renderedFilters?: Map<string, React.ReactNode>;
+    readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>;
+};
+/**
+ * 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 declare const ListWhereBuilder: React.FC<ListWhereBuilderProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListWhereBuilder/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAE5F,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC9E,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2B5D,CAAA"}

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,KAAA;EAAO,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,CAAAjB,YAAA;MAAAI,qBAAA;MAAAC,cAAA;MAAAC,MAAA;MAAAY,QAAA,EAIYJ,YAAA;MAAAP,aAAA;MAAAC,eAAA;MAAAC,qBAAA;MAAAU,KAAA,EAIHJ;IAAO,C;;;;;;;;;;;;;SARhBC,E;CAWJ","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 { 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,
+        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(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;
 };