@payloadcms/ui 4.0.0-internal.17c142b → 4.0.0-internal.1a2a79e

package/dist/elements/ListHeader/index.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: flex-end;
     flex-wrap: wrap;
-    padding: var(--spacer-2-5) var(--gutter-h);
+    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
     border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
@@ -21,10 +21,9 @@
   }
 
   .list-header__title {
-    font-size: var(--text-heading-large-font-size);
-    line-height: var(--text-heading-large-line-height);
-    font-weight: var(--text-heading-large-font-weight);
-    font-family: var(--text-heading-large-font-family);
+    font-size: var(--text-heading-xl-font-size);
+    line-height: var(--text-heading-xl-line-height);
+    font-weight: var(--text-heading-xl-font-weight);
   }
 
   .list-header__title-actions {

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.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":[]}
+{"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,EAAeV,SAAA;MAAAW,QAAA,E,CACdC,IAAA,CAAC;QAAAF,SAAA,EAAgB,GAAGV,SAAA,SAAkB;QAAAW,QAAA,EACnCJ,CAAA,CAAE,yBAAyB;UAAAH,KAAA;UAAAS,KAAA,EAAgB;QAAG;UAEhDR,WAAoC,IAArBA,WAAA,CAAAS,MAAkB,GAAG,C,IACnCL,KAAA,CAACZ,KAAA,CAAAkB,QAAc;QAAAJ,QAAA,E,CACbC,IAAA,CAAC;UAAAD,QAAA,EAAK;YACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAGV,SAAA,WAAoB;UAAAW,QAAA,EAAGN;;UAG7CC,gBAA8C,IAA1BA,gBAAA,CAAAQ,MAAuB,GAAG,C,IAC7CL,KAAA,CAACZ,KAAA,CAAAkB,QAAc;QAAAJ,QAAA,E,CACbC,IAAA,CAAC;UAAAD,QAAA,EAAK;YACNC,IAAA,CAAC;UAAAF,SAAA,EAAe,GAAGV,SAAA,WAAoB;UAAAW,QAAA,EAAGL;;;;;;;;;;;;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.js.map

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

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

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

package/dist/elements/LivePreview/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;AAWzB,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgInD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuInD,CAAA"}

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

@@ -6,7 +6,7 @@ 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 { 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';
@@ -69,6 +69,7 @@ export const ToolbarControls = () => {
     if ($[14] !== zoom) {
       t3 = buttonProps_0 => _jsxs(Button, {
         ...buttonProps_0,
+        "aria-label": `Zoom ${zoom * 100}%`,
         buttonStyle: "pill",
         icon: _jsx(ChevronIcon, {
           size: 16
@@ -110,6 +111,7 @@ export const ToolbarControls = () => {
       children: [breakpoints?.length > 0 && _jsx(Popup, {
         className: `${baseClass}__breakpoint`,
         horizontalAlign: "right",
+        popupType: "menu",
         render: t1 => {
           const {
             close
@@ -156,6 +158,7 @@ export const ToolbarControls = () => {
         }), _jsx(Popup, {
           className: `${baseClass}__zoom`,
           horizontalAlign: "right",
+          popupType: "menu",
           render: t2,
           renderButton: t3,
           showScrollbar: true,
@@ -177,7 +180,7 @@ export const ToolbarControls = () => {
           "aria-label": t("general:openInNewWindow"),
           buttonStyle: "ghost",
           className: `${baseClass}__external`,
-          icon: _jsx(ExternalLinkIcon, {
+          icon: _jsx(NewTabIcon, {
             size: 16
           }),
           onClick: t5,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","ExternalLinkIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","render","t1","bp","name","find","bp_0","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"pill\" icon={<ChevronIcon size={16} />}>\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<ExternalLinkIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","NewTabIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","popupType","render","t1","bp","name","find","bp_0","verticalAlign","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { NewTabIcon } from '../../../../icons/NewTab/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button\n              {...buttonProps}\n              aria-label={`Zoom ${zoom * 100}%`}\n              buttonStyle=\"pill\"\n              icon={<ChevronIcon size={16} />}\n            >\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<NewTabIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,50 +1,11 @@
 @layer payload-default {
-  .toolbar-input__group {
-    display: flex;
-    align-items: stretch;
-    height: var(--spacer-4);
-    border: var(--stroke-width-small) solid transparent;
-    border-radius: var(--field-border-radius);
-    background: var(--color-bg-secondary);
-    overflow: hidden;
-
-    &:hover:not(:focus-within) {
-      border-color: var(--color-border);
-    }
-
-    &:focus-within {
-      border-color: var(--color-border-selected);
-    }
-  }
-
-  .toolbar-input__prefix {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacer-4);
-    font-size: var(--text-body-medium-font-size, 0.6875rem);
-    color: var(--color-text-secondary);
-    user-select: none;
+  /* Keep the toolbar size input compact rather than filling available space */
+  .toolbar-input {
+    width: max-content;
   }
 
-  .toolbar-input {
+  .toolbar-input .form-input {
+    flex: 0 0 auto;
     width: calc(var(--spacer-4) * 2);
-    display: flex;
-    align-items: center;
-    border: none;
-    background: transparent;
-    font-size: var(--text-body-medium-font-size, 0.6875rem);
-    color: var(--color-text);
-    appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
-    &:focus {
-      outline: none;
-    }
   }
 }

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

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

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

@@ -1,15 +1,15 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
-import { InputStepper } from '../../../../elements/InputStepper/index.js';
+import { NumberInput } from '../../../../fields/Number/index.js';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'toolbar-input';
 export const PreviewFrameSizeInput = props => {
-  const $ = _c(32);
+  const $ = _c(30);
   const {
     axis
   } = props;
@@ -27,8 +27,8 @@ export const PreviewFrameSizeInput = props => {
   const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
   let t0;
   if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
-    t0 = e => {
-      let newValue = Number(e.target.value);
+    t0 = value => {
+      let newValue = Number(value);
       if (newValue < 0) {
         newValue = 0;
       }
@@ -111,40 +111,27 @@ export const PreviewFrameSizeInput = props => {
     t3 = $[21];
   }
   useEffect(t2, t3);
-  const t4 = axis === "x" ? "W" : "H";
-  let t5;
-  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t || $[27] !== t4) {
-    let t6;
-    let t7;
-    if ($[29] !== handleStep) {
-      t6 = () => handleStep("down");
-      t7 = () => handleStep("up");
-      $[29] = handleStep;
-      $[30] = t6;
-      $[31] = t7;
+  let t4;
+  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t) {
+    let t5;
+    if ($[28] !== handleChange) {
+      t5 = e => handleChange(e.target.value);
+      $[28] = handleChange;
+      $[29] = t5;
     } else {
-      t6 = $[30];
-      t7 = $[31];
+      t5 = $[29];
     }
-    t5 = _jsxs("div", {
-      className: `${baseClass}__group`,
-      children: [_jsx("span", {
-        className: `${baseClass}__prefix`,
-        children: t4
-      }), _jsx("input", {
-        "aria-label": axis === "x" ? t("upload:width") : t("upload:height"),
-        className: baseClass,
-        min: 0,
-        name: axis === "x" ? "live-preview-width" : "live-preview-height",
-        onChange: handleChange,
-        onWheel: _temp,
-        step: 1,
-        type: "number",
-        value: internalState || 0
-      }), _jsx(InputStepper, {
-        onDecrement: t6,
-        onIncrement: t7
-      })]
+    t4 = _jsx(NumberInput, {
+      ariaLabel: axis === "x" ? t("upload:width") : t("upload:height"),
+      className: baseClass,
+      min: 0,
+      onChange: t5,
+      onStep: handleStep,
+      path: axis === "x" ? "live-preview-width" : "live-preview-height",
+      prefix: axis === "x" ? "W" : "H",
+      size: "medium",
+      step: 1,
+      value: internalState || 0
     });
     $[22] = axis;
     $[23] = handleChange;
@@ -152,13 +139,9 @@ export const PreviewFrameSizeInput = props => {
     $[25] = internalState;
     $[26] = t;
     $[27] = t4;
-    $[28] = t5;
   } else {
-    t5 = $[28];
+    t4 = $[27];
   }
-  return t5;
+  return t4;
 };
-function _temp(e_0) {
-  e_0.target.blur();
-}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","InputStepper","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","t6","t7","_jsxs","className","children","_jsx","min","name","onChange","onWheel","_temp","step","onDecrement","onIncrement","e_0","blur"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { InputStepper } from '../../../../elements/InputStepper/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <div className={`${baseClass}__group`}>\n      <span className={`${baseClass}__prefix`}>{axis === 'x' ? 'W' : 'H'}</span>\n      <input\n        aria-label={axis === 'x' ? t('upload:width') : t('upload:height')}\n        className={baseClass}\n        min={0}\n        name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n        onChange={handleChange}\n        onWheel={(e) => {\n          // @ts-expect-error - blur() exists on input elements but not typed on EventTarget\n          e.target.blur()\n        }}\n        step={1}\n        type=\"number\"\n        value={internalState || 0}\n      />\n      <InputStepper onDecrement={() => handleStep('down')} onIncrement={() => handleStep('up')} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,YAAY,QAAQ;AAC7B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACH;IAAAW;EAAA,IAAiBF,KAAA;EAEjB;IAAAG,UAAA;IAAAC,kBAAA;IAAAC,aAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC;EAAA,IACEZ,qBAAA;EAEF;IAAAa;EAAA,IAAcZ,cAAA;EAEd,OAAAa,aAAA,EAAAC,gBAAA,IAA0CnB,KAAA,CAAAoB,QAAA,CACxC,CAACV,IAAA,KAAS,MAAME,kBAAA,EAAAS,KAAA,GAA4BT,kBAAA,EAAAU,MAAyB,MAAM;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,QAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,IAAA;IAM3EO,EAAA,GAAAC,CAAA;MACE,IAAAC,QAAA,GAAeC,MAAA,CAAOF,CAAA,CAAAG,MAAA,CAAAC,KAAc;MAAA,IAEhCH,QAAA,IAAW;QACbA,QAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,QAAA;MACjBZ,aAAA,CAAc;MAIdC,OAAA;QAAAe,IAAA,EACQ;QAAAD,KAAA;UAAAN,MAAA,EAEIZ,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAQ,OAAA,GAAmC,IAAMd,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAS,OAAA,GAAkC,IAAMd;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,MAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EApBF,MAAAsB,YAAA,GAAqBR,EAqBqC;EAAA,IAAAS,EAAA;EAAA,IAAAvB,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAS,aAAA,IAAAT,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,SAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,SAAAI,aAAA,IAAAJ,CAAA,SAAAK,OAAA,IAAAL,CAAA,SAAAO,IAAA;IAIxDgB,EAAA,GAAAC,SAAA;MACE,MAAAC,YAAA,GAAqBhB,aAAA,KAAiB;MACtC,IAAAiB,UAAA,GAAeF,SAAA,KAAc,OAAOC,YAAA,IAAe,GAAIA,YAAA,IAAe;MAAA,IAElET,UAAA,IAAW;QACbA,UAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,UAAA;MACjBZ,aAAA,CAAc;MAEdC,OAAA;QAAAe,IAAA,EACQ;QAAAD,KAAA;UAAAN,MAAA,EAEIZ,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAQ,OAAA,GAAmC,IAAMd,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAS,OAAA,GAAkC,IAAMd;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAS,aAAA;IAAAT,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,OAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,OAAAI,aAAA;IAAAJ,CAAA,OAAAK,OAAA;IAAAL,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAnBF,MAAA2B,UAAA,GAAmBJ,EAoBsD;EAAA,IAAAK,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAE,UAAA,IAAAF,CAAA,SAAAG,kBAAA,IAAAH,CAAA,SAAAM,IAAA,IAAAN,CAAA,SAAAO,IAAA;IAK/DqB,EAAA,GAAAA,CAAA;MAAA,IACJ1B,UAAA,KAAe,gBAAgBC,kBAAA;QAAA,IAC7BF,IAAA,KAAS;UACXS,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAS,KAAA,CAAAS,OAAA,EAAiC,KAAMd,IAAA;QAAA;UAE/DG,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAU,MAAA,CAAAQ,OAAA,EAAkC,KAAMd,IAAA;QAAA;MAAA;MAAA,IAIhEL,UAAA,KAAe,gBAAgBI,IAAA;QACjCI,gBAAA,CAAiBT,IAAA,KAAS,MAAMK,IAAA,CAAAM,KAAA,GAAaN,IAAA,CAAAO,MAAW;MAAA;IAAA;IAEzDgB,EAAA,IAAC3B,UAAA,EAAYD,IAAA,EAAME,kBAAA,EAAoBG,IAAA,EAAMC,IAAA;IAAKP,CAAA,OAAAC,IAAA;IAAAD,CAAA,OAAAE,UAAA;IAAAF,CAAA,OAAAG,kBAAA;IAAAH,CAAA,OAAAM,IAAA;IAAAN,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAA4B,EAAA;IAAA5B,CAAA,OAAA6B,EAAA;EAAA;IAAAD,EAAA,GAAA5B,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAZrDP,SAAA,CAAUmC,EAYV,EAAGC,EAAkD;EAIP,MAAAC,EAAA,GAAA7B,IAAA,KAAS,MAAM,MAAM;EAAA,IAAA8B,EAAA;EAAA,IAAA/B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAsB,YAAA,IAAAtB,CAAA,SAAA2B,UAAA,IAAA3B,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAA8B,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAjC,CAAA,SAAA2B,UAAA;MAepCK,EAAA,GAAAA,CAAA,KAAML,UAAA,CAAW;MAAsBM,EAAA,GAAAA,CAAA,KAAMN,UAAA,CAAW;MAAA3B,CAAA,OAAA2B,UAAA;MAAA3B,CAAA,OAAAgC,EAAA;MAAAhC,CAAA,OAAAiC,EAAA;IAAA;MAAAD,EAAA,GAAAhC,CAAA;MAAAiC,EAAA,GAAAjC,CAAA;IAAA;IAhBrF+B,EAAA,GAAAG,KAAA,CAAC;MAAAC,SAAA,EAAe,GAAAtC,SAAA,SAAqB;MAAAuC,QAAA,GACnCC,IAAA,CAAC;QAAAF,SAAA,EAAgB,GAAAtC,SAAA,UAAsB;QAAAuC,QAAA,EAAGN;MAAqB,C,GAC/DO,IAAA,CAAC;QAAA,cACapC,IAAA,KAAS,MAAMO,CAAA,CAAE,kBAAkBA,CAAA,CAAE;QAAA2B,SAAA,EAAAtC,SAAA;QAAAyC,GAAA;QAAAC,IAAA,EAG3CtC,IAAA,KAAS,MAAM,uBAAuB;QAAAuC,QAAA,EAClClB,YAAA;QAAAmB,OAAA,EAAAC,KAAA;QAAAC,IAAA;QAAAvB,IAAA,EAML;QAAAD,KAAA,EACEV,aAAA;MAAiB,C,GAE1B4B,IAAA,CAAA3C,YAAA;QAAAkD,WAAA,EAA2BZ,EAAiB;QAAAa,WAAA,EAAsBZ;MAAiB,C;;;;;;;;;;;;SAhBrFF,E;CAmBJ;AAjGK,SAAAW,MAAAI,GAAA;EAwFK/B,GAAA,CAAAG,MAAA,CAAA6B,IAAA,CAAa;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","NumberInput","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","value","newValue","Number","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","e","target","_jsx","ariaLabel","className","min","onChange","onStep","path","prefix","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { NumberInput } from '../../../../fields/Number/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (value: string) => {\n      let newValue = Number(value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <NumberInput\n      ariaLabel={axis === 'x' ? t('upload:width') : t('upload:height')}\n      className={baseClass}\n      min={0}\n      onChange={(e) => handleChange(e.target.value)}\n      onStep={handleStep}\n      path={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      prefix={axis === 'x' ? 'W' : 'H'}\n      size=\"medium\"\n      step={1}\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAgDpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC;IACE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,aAAa,CASlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAkDpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC;IACE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,aAAa,CASlB,CAAA"}

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

@@ -6,14 +6,18 @@ import { useDraggable } from '@dnd-kit/core';
 import React from 'react';
 import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { ToolbarControls } from './Controls/index.js';
 import './index.css';
 const baseClass = 'live-preview-toolbar';
 const DraggableToolbar = props => {
-  const $ = _c(10);
+  const $ = _c(11);
   const {
     toolbarPosition
   } = useLivePreviewContext();
+  const {
+    t
+  } = useTranslation();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = {
@@ -39,7 +43,7 @@ const DraggableToolbar = props => {
   const t2 = `${toolbarPosition.x}px`;
   const t3 = `${toolbarPosition.y}px`;
   let t4;
-  if ($[2] !== attributes || $[3] !== listeners || $[4] !== props || $[5] !== setNodeRef || $[6] !== t2 || $[7] !== t3 || $[8] !== transform) {
+  if ($[2] !== attributes || $[3] !== listeners || $[4] !== props || $[5] !== setNodeRef || $[6] !== t || $[7] !== t2 || $[8] !== t3 || $[9] !== transform) {
     t4 = _jsxs("div", {
       className: t1.join(" "),
       style: {
@@ -52,6 +56,7 @@ const DraggableToolbar = props => {
       children: [_jsx("button", {
         ...listeners,
         ...attributes,
+        "aria-label": t("general:dragToMove"),
         className: `${baseClass}__drag-handle`,
         ref: setNodeRef,
         type: "button",
@@ -64,12 +69,13 @@ const DraggableToolbar = props => {
     $[3] = listeners;
     $[4] = props;
     $[5] = setNodeRef;
-    $[6] = t2;
-    $[7] = t3;
-    $[8] = transform;
-    $[9] = t4;
+    $[6] = t;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = transform;
+    $[10] = t4;
   } else {
-    t4 = $[9];
+    t4 = $[10];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDraggable","React","AlignJustifiedIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <AlignJustifiedIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA9B,kBAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDraggable","React","AlignJustifiedIcon","useLivePreviewContext","useTranslation","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        aria-label={t('general:dragToMove')}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <AlignJustifiedIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAChD;IAAAW;EAAA,IAA4BP,qBAAA;EAC5B;IAAAQ;EAAA,IAAcP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAH,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAEwDF,EAAA;MAAAG,EAAA,EAChE;IACN;IAAAN,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAFA;IAAAO,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDnB,YAAA,CAAaY,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAX,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAACd,SAAA,EAAW,GAAGA,SAAA,aAAsB,CAAC;IAAAG,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAEzC,MAAAY,EAAA,MAAGX,eAAA,CAAAY,CAAiB,IAAI;EACzB,MAAAC,EAAA,MAAGb,eAAA,CAAAc,CAAiB,IAAI;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAQ,SAAA,IAAAR,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAS,UAAA,IAAAT,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAU,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAK,CAAC;MAAAC,KAAA,EAChD;QAAAC,IAAA,EACCT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,kBACQA,SAAA,EAAAG,CAAgB,IAAhB,CAAgB,OAAQH,SAAA,EAAAK,CAAgB,IAAhB,CAAgB,QACvD,GAFOQ;QAIZ,CAAC,GANF,CAMC,CAAC;MACR;MAAAC,QAAA,E,CAEAC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAA,cACFL,CAAA,CAAE;QAAAgB,SAAA,EACH,GAAGrB,SAAA,eAAwB;QAAA6B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAChC,kBAAA;UAEHgC,IAAA,CAAC7B,eAAA;QAAA,GAAoBG;;;;;;;;;;;;;;;SAxBvBiB,E;CA2BJ;AAEA,MAAMY,aAAA,GAA0C7B,KAAA;EAC9C,oBACE0B,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACrB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACsB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC7B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM8B,kBAAA,GAIR9B,KAAA;EACH,MAAM;IAAE+B;EAAS,CAAE,GAAG/B,KAAA;EAEtB,IAAI+B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC3B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAO0B,IAAA,CAACG,aAAA;IAAe,GAAG7B;;AAC5B","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IACN;IAAAL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeZ,SAAA;MAAAa,GAAA,EAAgBJ,UAAA;MAAAL;;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}

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

@@ -1,4 +1,10 @@
 @layer payload-default {
+  .collection-edit:has(.live-preview-window--is-expanded) {
+    .document-fields {
+      display: none;
+    }
+  }
+
   .live-preview-window {
     background-color: var(--color-bg);
     display: none;
@@ -42,7 +48,14 @@
     padding: var(--spacer-3);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
+    .collection-edit:has(.live-preview-window--is-live-previewing) {
+      .document-fields {
+        display: none;
+      }
+    }
+
     .live-preview-window {
       width: 100%;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAiC,MAAM,OAAO,CAAA;AAUrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+HrD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAiC,MAAM,OAAO,CAAA;AAWrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiIrD,CAAA"}

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

@@ -8,6 +8,7 @@ import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import { useLocale } from '../../../providers/Locale/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { IframeLoader } from '../../IframeLoader/index.js';
 import { DeviceContainer } from '../Device/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
@@ -28,6 +29,9 @@ export const LivePreviewWindow = props => {
     url,
     zoom
   } = useLivePreviewContext();
+  const {
+    t
+  } = useTranslation();
   const locale = useLocale();
   const {
     mostRecentUpdate
@@ -67,7 +71,7 @@ export const LivePreviewWindow = props => {
       data: values,
       externallyUpdatedRelationship: mostRecentUpdate,
       globalSlug,
-      locale: locale.code
+      locale: locale?.code
     });
   }, [formState, collectionSlug, globalSlug, id, appIsReady, mostRecentUpdate, locale, hasActiveTarget, loadedURL, lastReadyAt, postMessageToTargets]);
   /**
@@ -102,7 +106,8 @@ export const LivePreviewWindow = props => {
             src: url,
             style: {
               transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
-            }
+            },
+            title: t('general:livePreview')
           })
         })
       })]