@payloadcms/next 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

package/dist/views/Version/Default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CheckboxInput","ChevronIcon","formatTimeToNow","Gutter","Pill","useConfig","useDocumentInfo","useLocale","useRouteTransition","useTranslation","usePathname","useRouter","useSearchParams","React","useCallback","useEffect","useMemo","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromCreatedAt","versionFromID","versionFromOptions","versionToCreatedAt","versionToCreatedAtFormatted","VersionToCreatedAtLabel","versionToID","versionToStatus","config","getEntityConfig","code","i18n","t","locales","setLocales","localeSelectorOpen","setLocaleSelectorOpen","localization","updatedLocales","map","locale","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","isTrashed","startRouteTransition","collectionConfig","globalConfig","router","pathname","searchParams","setModifiedOnly","updateSearchParams","args","current","URLSearchParams","Array","from","entries","set","length","delete","selectedLocaleCodes","push","JSON","stringify","search","toString","query","onToggleModifiedOnly","event","newModified","target","checked","onChangeSelectedLocales","onChangeVersionFrom","val","value","versionToTimeAgo","distance","date","versionFromTimeAgo","undefined","_jsxs","className","_jsx","onToggle","icon","direction","onClick","pillStyle","size","filter","join","onChange","docID","labels","singular","status","versionDateFormatted","versionID"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  CheckboxInput,\n  ChevronIcon,\n  formatTimeToNow,\n  Gutter,\n  Pill,\n  type SelectablePill,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport { Restore } from '../Restore/index.js'\nimport './index.scss'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromCreatedAt,\n  versionFromID,\n  versionFromOptions,\n  versionToCreatedAt,\n  versionToCreatedAtFormatted,\n  VersionToCreatedAtLabel,\n  versionToID,\n  versionToStatus,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { code } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\n  const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false)\n\n  useEffect(() => {\n    if (config.localization) {\n      const updatedLocales = config.localization.locales.map((locale) => {\n        let label = locale.label\n        if (typeof locale.label !== 'string' && locale.label[code]) {\n          label = locale.label[code]\n        }\n\n        return {\n          name: locale.code,\n          Label: label,\n          selected: selectedLocalesFromProps.includes(locale.code),\n        } as SelectablePill\n      })\n      setLocales(updatedLocales)\n    }\n  }, [code, config.localization, selectedLocalesFromProps])\n\n  const { id: originalDocID, collectionSlug, globalSlug, isTrashed } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { collectionConfig, globalConfig } = useMemo(() => {\n    return {\n      collectionConfig: getEntityConfig({ collectionSlug }),\n      globalConfig: getEntityConfig({ globalSlug }),\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n\n  const updateSearchParams = useCallback(\n    (args: {\n      modifiedOnly?: boolean\n      selectedLocales?: SelectablePill[]\n      versionFromID?: string\n    }) => {\n      // If the selected comparison doc or locales change, update URL params so that version page\n      // This is so that RSC can update the version comparison state\n      const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n      if (args?.versionFromID) {\n        current.set('versionFrom', args?.versionFromID)\n      }\n\n      if (args?.selectedLocales) {\n        if (!args.selectedLocales.length) {\n          current.delete('localeCodes')\n        } else {\n          const selectedLocaleCodes: string[] = []\n          for (const locale of args.selectedLocales) {\n            if (locale.selected) {\n              selectedLocaleCodes.push(locale.name)\n            }\n          }\n          current.set('localeCodes', JSON.stringify(selectedLocaleCodes))\n        }\n      }\n\n      if (args?.modifiedOnly === false) {\n        current.set('modifiedOnly', 'false')\n      } else if (args?.modifiedOnly === true) {\n        current.delete('modifiedOnly')\n      }\n\n      const search = current.toString()\n      const query = search ? `?${search}` : ''\n\n      startRouteTransition(() => router.push(`${pathname}${query}`))\n    },\n    [pathname, router, searchParams, startRouteTransition],\n  )\n\n  const onToggleModifiedOnly: FormEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      const newModified = (event.target as HTMLInputElement).checked\n      setModifiedOnly(newModified)\n      updateSearchParams({\n        modifiedOnly: newModified,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback(\n    ({ locales }) => {\n      setLocales(locales)\n      updateSearchParams({\n        selectedLocales: locales,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeVersionFrom: (val: CompareOption) => void = useCallback(\n    (val) => {\n      updateSearchParams({\n        versionFromID: val.value,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const { localization } = config\n\n  const versionToTimeAgo = useMemo(\n    () =>\n      t('version:versionAgo', {\n        distance: formatTimeToNow({\n          date: versionToCreatedAt,\n          i18n,\n        }),\n      }),\n    [versionToCreatedAt, i18n, t],\n  )\n\n  const versionFromTimeAgo = useMemo(\n    () =>\n      versionFromCreatedAt\n        ? t('version:versionAgo', {\n            distance: formatTimeToNow({\n              date: versionFromCreatedAt,\n              i18n,\n            }),\n          })\n        : undefined,\n    [versionFromCreatedAt, i18n, t],\n  )\n\n  return (\n    <main className={baseClass}>\n      <Gutter className={`${baseClass}-controls-top`}>\n        <div className={`${baseClass}-controls-top__wrapper`}>\n          <h2>{i18n.t('version:compareVersions')}</h2>\n          <div className={`${baseClass}-controls-top__wrapper-actions`}>\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n            {localization && (\n              <Pill\n                aria-controls={`${baseClass}-locales`}\n                aria-expanded={localeSelectorOpen}\n                className={`${baseClass}__toggle-locales`}\n                icon={<ChevronIcon direction={localeSelectorOpen ? 'up' : 'down'} />}\n                onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)}\n                pillStyle=\"light\"\n                size=\"small\"\n              >\n                <span className={`${baseClass}__toggle-locales-label`}>\n                  {t('general:locales')}:{' '}\n                </span>\n                <span className={`${baseClass}__toggle-locales-list`}>\n                  {locales\n                    .filter((locale) => locale.selected)\n                    .map((locale) => locale.name)\n                    .join(', ')}\n                </span>\n              </Pill>\n            )}\n          </div>\n        </div>\n\n        {localization && (\n          <SelectLocales\n            locales={locales}\n            localeSelectorOpen={localeSelectorOpen}\n            onChange={onChangeSelectedLocales}\n          />\n        )}\n      </Gutter>\n      <Gutter className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}__version-from`}>\n            <div className={`${baseClass}__version-from-labels`}>\n              <span>{t('version:comparingAgainst')}</span>\n              {versionFromTimeAgo && (\n                <span className={`${baseClass}__time-elapsed`}>{versionFromTimeAgo}</span>\n              )}\n            </div>\n            <SelectComparison\n              collectionSlug={collectionSlug}\n              docID={originalDocID}\n              globalSlug={globalSlug}\n              onChange={onChangeVersionFrom}\n              versionFromID={versionFromID}\n              versionFromOptions={versionFromOptions}\n            />\n          </div>\n\n          <div className={`${baseClass}__version-to`}>\n            <div className={`${baseClass}__version-to-labels`}>\n              <span>{t('version:currentlyViewing')}</span>\n              <span className={`${baseClass}__time-elapsed`}>{versionToTimeAgo}</span>\n            </div>\n            <div className={`${baseClass}__version-to-version`}>\n              {VersionToCreatedAtLabel}\n              {canUpdate && !isTrashed && (\n                <Restore\n                  className={`${baseClass}__restore`}\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  label={collectionConfig?.labels.singular || globalConfig?.label}\n                  originalDocID={originalDocID}\n                  status={versionToStatus}\n                  versionDateFormatted={versionToCreatedAtFormatted}\n                  versionID={versionToID}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </Gutter>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        globalConfig={globalConfig}\n        id={originalDocID}\n        isTrashed={isTrashed}\n        versionToCreatedAtFormatted={versionToCreatedAtFormatted}\n        versionToID={versionToID}\n      />\n      <Gutter className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>\n          {versionToCreatedAt && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  CheckboxInput,\n  ChevronIcon,\n  formatTimeToNow,\n  Gutter,\n  Pill,\n  type SelectablePill,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport { Restore } from '../Restore/index.js'\nimport './index.scss'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromCreatedAt,\n  versionFromID,\n  versionFromOptions,\n  versionToCreatedAt,\n  versionToCreatedAtFormatted,\n  VersionToCreatedAtLabel,\n  versionToID,\n  versionToStatus,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { code } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\n  const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false)\n\n  useEffect(() => {\n    if (config.localization) {\n      const updatedLocales = config.localization.locales.map((locale) => {\n        let label = locale.label\n        if (typeof locale.label !== 'string' && locale.label[code]) {\n          label = locale.label[code]\n        }\n\n        return {\n          name: locale.code,\n          Label: label,\n          selected: selectedLocalesFromProps.includes(locale.code),\n        } as SelectablePill\n      })\n      setLocales(updatedLocales)\n    }\n  }, [code, config.localization, selectedLocalesFromProps])\n\n  const { id: originalDocID, collectionSlug, globalSlug, isTrashed } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { collectionConfig, globalConfig } = useMemo(() => {\n    return {\n      collectionConfig: getEntityConfig({ collectionSlug }),\n      globalConfig: getEntityConfig({ globalSlug }),\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n\n  const updateSearchParams = useCallback(\n    (args: {\n      modifiedOnly?: boolean\n      selectedLocales?: SelectablePill[]\n      versionFromID?: string\n    }) => {\n      // If the selected comparison doc or locales change, update URL params so that version page\n      // This is so that RSC can update the version comparison state\n      const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n      if (args?.versionFromID) {\n        current.set('versionFrom', args?.versionFromID)\n      }\n\n      if (args?.selectedLocales) {\n        if (!args.selectedLocales.length) {\n          current.delete('localeCodes')\n        } else {\n          const selectedLocaleCodes: string[] = []\n          for (const locale of args.selectedLocales) {\n            if (locale.selected) {\n              selectedLocaleCodes.push(locale.name)\n            }\n          }\n          current.set('localeCodes', JSON.stringify(selectedLocaleCodes))\n        }\n      }\n\n      if (args?.modifiedOnly === false) {\n        current.set('modifiedOnly', 'false')\n      } else if (args?.modifiedOnly === true) {\n        current.delete('modifiedOnly')\n      }\n\n      const search = current.toString()\n      const query = search ? `?${search}` : ''\n\n      startRouteTransition(() => router.push(`${pathname}${query}`))\n    },\n    [pathname, router, searchParams, startRouteTransition],\n  )\n\n  const onToggleModifiedOnly: FormEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      const newModified = (event.target as HTMLInputElement).checked\n      setModifiedOnly(newModified)\n      updateSearchParams({\n        modifiedOnly: newModified,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback(\n    ({ locales }) => {\n      setLocales(locales)\n      updateSearchParams({\n        selectedLocales: locales,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeVersionFrom: (val: CompareOption) => void = useCallback(\n    (val) => {\n      updateSearchParams({\n        versionFromID: val.value,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const { localization } = config\n\n  const versionToTimeAgo = useMemo(\n    () =>\n      t('version:versionAgo', {\n        distance: formatTimeToNow({\n          date: versionToCreatedAt,\n          i18n,\n        }),\n      }),\n    [versionToCreatedAt, i18n, t],\n  )\n\n  const versionFromTimeAgo = useMemo(\n    () =>\n      versionFromCreatedAt\n        ? t('version:versionAgo', {\n            distance: formatTimeToNow({\n              date: versionFromCreatedAt,\n              i18n,\n            }),\n          })\n        : undefined,\n    [versionFromCreatedAt, i18n, t],\n  )\n\n  return (\n    <main className={baseClass}>\n      <Gutter className={`${baseClass}-controls-top`}>\n        <div className={`${baseClass}-controls-top__wrapper`}>\n          <h2>{i18n.t('version:compareVersions')}</h2>\n          <div className={`${baseClass}-controls-top__wrapper-actions`}>\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n            {localization && (\n              <Pill\n                aria-controls={`${baseClass}-locales`}\n                aria-expanded={localeSelectorOpen}\n                className={`${baseClass}__toggle-locales`}\n                icon={<ChevronIcon direction={localeSelectorOpen ? 'up' : 'down'} />}\n                onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)}\n                pillStyle=\"light\"\n                size=\"small\"\n              >\n                <span className={`${baseClass}__toggle-locales-label`}>\n                  {t('general:locales')}:{' '}\n                </span>\n                <span className={`${baseClass}__toggle-locales-list`}>\n                  {locales\n                    .filter((locale) => locale.selected)\n                    .map((locale) => locale.name)\n                    .join(', ')}\n                </span>\n              </Pill>\n            )}\n          </div>\n        </div>\n\n        {localization && (\n          <SelectLocales\n            locales={locales}\n            localeSelectorOpen={localeSelectorOpen}\n            onChange={onChangeSelectedLocales}\n          />\n        )}\n      </Gutter>\n      <Gutter className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}__version-from`}>\n            <div className={`${baseClass}__version-from-labels`}>\n              <span>{t('version:comparingAgainst')}</span>\n              {versionFromTimeAgo && (\n                <span className={`${baseClass}__time-elapsed`}>{versionFromTimeAgo}</span>\n              )}\n            </div>\n            <SelectComparison\n              collectionSlug={collectionSlug}\n              docID={originalDocID}\n              globalSlug={globalSlug}\n              onChange={onChangeVersionFrom}\n              versionFromID={versionFromID}\n              versionFromOptions={versionFromOptions}\n            />\n          </div>\n\n          <div className={`${baseClass}__version-to`}>\n            <div className={`${baseClass}__version-to-labels`}>\n              <span>{t('version:currentlyViewing')}</span>\n              <span className={`${baseClass}__time-elapsed`}>{versionToTimeAgo}</span>\n            </div>\n            <div className={`${baseClass}__version-to-version`}>\n              {VersionToCreatedAtLabel}\n              {canUpdate && !isTrashed && (\n                <Restore\n                  className={`${baseClass}__restore`}\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  label={collectionConfig?.labels.singular || globalConfig?.label}\n                  originalDocID={originalDocID}\n                  status={versionToStatus}\n                  versionDateFormatted={versionToCreatedAtFormatted}\n                  versionID={versionToID}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </Gutter>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        globalConfig={globalConfig}\n        id={originalDocID}\n        isTrashed={isTrashed}\n        versionToCreatedAtFormatted={versionToCreatedAtFormatted}\n        versionToID={versionToID}\n      />\n      <Gutter className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>\n          {versionToCreatedAt && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"names":["CheckboxInput","ChevronIcon","formatTimeToNow","Gutter","Pill","useConfig","useDocumentInfo","useLocale","useRouteTransition","useTranslation","usePathname","useRouter","useSearchParams","React","useCallback","useEffect","useMemo","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromCreatedAt","versionFromID","versionFromOptions","versionToCreatedAt","versionToCreatedAtFormatted","VersionToCreatedAtLabel","versionToID","versionToStatus","config","getEntityConfig","code","i18n","t","locales","setLocales","localeSelectorOpen","setLocaleSelectorOpen","localization","updatedLocales","map","locale","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","isTrashed","startRouteTransition","collectionConfig","globalConfig","router","pathname","searchParams","setModifiedOnly","updateSearchParams","args","current","URLSearchParams","Array","from","entries","set","length","delete","selectedLocaleCodes","push","JSON","stringify","search","toString","query","onToggleModifiedOnly","event","newModified","target","checked","onChangeSelectedLocales","onChangeVersionFrom","val","value","versionToTimeAgo","distance","date","versionFromTimeAgo","undefined","main","className","div","h2","span","onToggle","aria-controls","aria-expanded","icon","direction","onClick","pillStyle","size","filter","join","onChange","docID","labels","singular","status","versionDateFormatted","versionID"],"mappings":"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"}

package/dist/views/Version/Default/index.scss

@@ -0,0 +1,170 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .view-version {
+    width: 100%;
+    padding-bottom: var(--spacing-view-bottom);
+
+    &__toggle-locales-label {
+      color: var(--theme-elevation-500);
+    }
+
+    &-controls-top {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
+
+      &__wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        &-actions {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: var(--base);
+        }
+      }
+
+      h2 {
+        font-size: 18px;
+      }
+    }
+
+    &-controls-bottom {
+      border-bottom: 1px solid var(--theme-elevation-100);
+      padding: 16px var(--gutter-h) 16px var(--gutter-h);
+      position: relative;
+
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
+      }
+
+      &__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--base);
+        gap: var(--base);
+      }
+    }
+
+    &__time-elapsed {
+      color: var(--theme-elevation-500);
+    }
+
+    &__version-from {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      &-labels {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+
+    &__version-to {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      &-labels {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      &-version {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--theme-elevation-50);
+        padding: 8px 12px;
+        gap: calc(var(--base) / 2);
+
+        h2 {
+          font-size: 13px;
+          font-weight: 400;
+        }
+      }
+    }
+
+    &__restore {
+      div {
+        margin-block: 0;
+      }
+    }
+
+    &__modifiedCheckBox {
+      margin: 0 0 0 var(--base);
+      display: flex;
+      align-items: center;
+    }
+
+    &__diff-wrap {
+      padding-top: var(--base);
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      position: relative;
+
+      // Vertical separator line
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        background-color: var(--theme-elevation-100);
+        transform: translateX(-50%); // Center the line
+        z-index: 2;
+      }
+    }
+
+    @include mid-break {
+      &__version-to {
+        &-version {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+      }
+    }
+
+    @include small-break {
+      &__diff-wrap {
+        padding-top: calc(var(--base) / 2);
+      }
+
+      &__version-to,
+      &__version-from {
+        &-labels {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+      }
+
+      &-controls-top {
+        &__wrapper {
+          flex-direction: column;
+          align-items: flex-start;
+
+          .view-version__modifiedCheckBox {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/views/Version/Default/types.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=types.js.map

package/dist/views/Version/Default/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["export type CompareOption = {\n  label: React.ReactNode | string\n  value: string\n}\n\nexport type VersionPill = {\n  id: string\n  Label: React.ReactNode\n}\n\nexport type DefaultVersionsViewProps = {\n  canUpdate: boolean\n  modifiedOnly: boolean\n  RenderedDiff: React.ReactNode\n  selectedLocales: string[]\n  versionFromCreatedAt?: string\n  versionFromID?: string\n  versionFromOptions: CompareOption[]\n  versionToCreatedAt?: string\n  versionToCreatedAtFormatted: string\n  VersionToCreatedAtLabel: React.ReactNode\n  versionToID?: string\n  versionToStatus?: string\n}\n"],"mappings":"AAUA","ignoreList":[]}
+{"version":3,"sources":["../../../../src/views/Version/Default/types.ts"],"sourcesContent":["export type CompareOption = {\n  label: React.ReactNode | string\n  value: string\n}\n\nexport type VersionPill = {\n  id: string\n  Label: React.ReactNode\n}\n\nexport type DefaultVersionsViewProps = {\n  canUpdate: boolean\n  modifiedOnly: boolean\n  RenderedDiff: React.ReactNode\n  selectedLocales: string[]\n  versionFromCreatedAt?: string\n  versionFromID?: string\n  versionFromOptions: CompareOption[]\n  versionToCreatedAt?: string\n  versionToCreatedAtFormatted: string\n  VersionToCreatedAtLabel: React.ReactNode\n  versionToID?: string\n  versionToStatus?: string\n}\n"],"names":[],"mappings":"AAUA,WAaC"}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.js

@@ -1,130 +1,113 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui';
 import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared';
 import React, { useState } from 'react';
+import './index.scss';
 import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js';
 const baseClass = 'diff-collapser';
-export const DiffCollapser = t0 => {
-  const $ = _c(19);
-  const {
-    children,
-    field,
-    fields,
-    hideGutter: t1,
-    initCollapsed: t2,
-    isIterable: t3,
-    Label,
-    locales,
-    parentIsLocalized,
-    valueFrom,
-    valueTo
-  } = t0;
-  const hideGutter = t1 === undefined ? false : t1;
-  const initCollapsed = t2 === undefined ? false : t2;
-  const isIterable = t3 === undefined ? false : t3;
-  const {
-    t
-  } = useTranslation();
-  const [isCollapsed, setIsCollapsed] = useState(initCollapsed);
-  const {
-    config
-  } = useConfig();
-  let t4;
-  if ($[0] !== Label || $[1] !== children || $[2] !== config || $[3] !== field || $[4] !== fields || $[5] !== hideGutter || $[6] !== isCollapsed || $[7] !== isIterable || $[8] !== locales || $[9] !== parentIsLocalized || $[10] !== t || $[11] !== valueFrom || $[12] !== valueTo) {
-    let changeCount;
+// fields collapser
+// iterable collapser
+export const DiffCollapser = ({ children, field, fields, hideGutter = false, initCollapsed = false, isIterable = false, Label, locales, parentIsLocalized, valueFrom, valueTo })=>{
+    const { t } = useTranslation();
+    const [isCollapsed, setIsCollapsed] = useState(initCollapsed);
+    const { config } = useConfig();
+    let changeCount = 0;
     if (isIterable) {
-      if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
-        throw new Error("DiffCollapser: field must be an array or blocks field when isIterable is true");
-      }
-      const valueFromRows = valueFrom ?? [];
-      const valueToRows = valueTo ?? [];
-      if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) {
-        throw new Error("DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true");
-      }
-      changeCount = countChangedFieldsInRows({
-        config,
-        field,
-        locales,
-        parentIsLocalized,
-        valueFromRows,
-        valueToRows
-      });
-    } else {
-      changeCount = countChangedFields({
-        config,
-        fields,
-        locales,
-        parentIsLocalized,
-        valueFrom,
-        valueTo
-      });
-    }
-    const t5 = isCollapsed && `${baseClass}__content--is-collapsed`;
-    const t6 = hideGutter && `${baseClass}__content--hide-gutter`;
-    let t7;
-    if ($[14] !== t5 || $[15] !== t6) {
-      t7 = [`${baseClass}__content`, t5, t6].filter(Boolean);
-      $[14] = t5;
-      $[15] = t6;
-      $[16] = t7;
+        if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
+            throw new Error('DiffCollapser: field must be an array or blocks field when isIterable is true');
+        }
+        const valueFromRows = valueFrom ?? [];
+        const valueToRows = valueTo ?? [];
+        if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) {
+            throw new Error('DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true');
+        }
+        changeCount = countChangedFieldsInRows({
+            config,
+            field,
+            locales,
+            parentIsLocalized,
+            valueFromRows,
+            valueToRows
+        });
     } else {
-      t7 = $[16];
+        changeCount = countChangedFields({
+            config,
+            fields,
+            locales,
+            parentIsLocalized,
+            valueFrom,
+            valueTo
+        });
     }
-    const contentClassNames = t7.join(" ");
-    let t8;
-    if ($[17] !== isCollapsed) {
-      t8 = () => setIsCollapsed(!isCollapsed);
-      $[17] = isCollapsed;
-      $[18] = t8;
-    } else {
-      t8 = $[18];
-    }
-    t4 = _jsxs("div", {
-      className: baseClass,
-      children: [_jsxs(FieldDiffLabel, {
-        children: [_jsxs("button", {
-          "aria-label": isCollapsed ? "Expand" : "Collapse",
-          className: `${baseClass}__toggle-button`,
-          onClick: t8,
-          type: "button",
-          children: [_jsx("div", {
-            className: `${baseClass}__label`,
-            children: Label
-          }), _jsx(ChevronIcon, {
-            direction: isCollapsed ? "right" : "down",
-            size: "small"
-          })]
-        }), changeCount > 0 && isCollapsed && _jsx("span", {
-          className: `${baseClass}__field-change-count`,
-          children: t("version:changedFieldsCount", {
-            count: changeCount
-          })
-        })]
-      }), _jsx("div", {
-        className: contentClassNames,
-        children
-      })]
-    });
-    $[0] = Label;
-    $[1] = children;
-    $[2] = config;
-    $[3] = field;
-    $[4] = fields;
-    $[5] = hideGutter;
-    $[6] = isCollapsed;
-    $[7] = isIterable;
-    $[8] = locales;
-    $[9] = parentIsLocalized;
-    $[10] = t;
-    $[11] = valueFrom;
-    $[12] = valueTo;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  return t4;
+    const contentClassNames = [
+        `${baseClass}__content`,
+        isCollapsed && `${baseClass}__content--is-collapsed`,
+        hideGutter && `${baseClass}__content--hide-gutter`
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV(FieldDiffLabel, {
+                children: [
+                    /*#__PURE__*/ _jsxDEV("button", {
+                        "aria-label": isCollapsed ? 'Expand' : 'Collapse',
+                        className: `${baseClass}__toggle-button`,
+                        onClick: ()=>setIsCollapsed(!isCollapsed),
+                        type: "button",
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__label`,
+                                children: Label
+                            }, void 0, false, {
+                                fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                                lineNumber: 109,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                                direction: isCollapsed ? 'right' : 'down',
+                                size: 'small'
+                            }, void 0, false, {
+                                fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                                lineNumber: 111,
+                                columnNumber: 11
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                        lineNumber: 103,
+                        columnNumber: 9
+                    }, this),
+                    changeCount > 0 && isCollapsed && /*#__PURE__*/ _jsxDEV("span", {
+                        className: `${baseClass}__field-change-count`,
+                        children: t('version:changedFieldsCount', {
+                            count: changeCount
+                        })
+                    }, void 0, false, {
+                        fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                        lineNumber: 114,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                lineNumber: 102,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: contentClassNames,
+                children: children
+            }, void 0, false, {
+                fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+                lineNumber: 119,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx",
+        lineNumber: 101,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ChevronIcon","FieldDiffLabel","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","t0","$","children","field","fields","hideGutter","t1","initCollapsed","t2","isIterable","t3","Label","locales","parentIsLocalized","valueFrom","valueTo","undefined","t","isCollapsed","setIsCollapsed","config","t4","changeCount","Error","valueFromRows","valueToRows","Array","isArray","t5","t6","t7","filter","Boolean","contentClassNames","join","t8","_jsxs","className","onClick","type","_jsx","direction","size","count"],"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props = {\n  hideGutter?: boolean\n  initCollapsed?: boolean\n  Label: React.ReactNode\n  locales: string[] | undefined\n  parentIsLocalized: boolean\n  valueTo: unknown\n} & (\n  | {\n      // fields collapser\n      children: React.ReactNode\n      field?: never\n      fields: ClientField[]\n      isIterable?: false\n      valueFrom: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      field: ClientField\n      fields?: never\n      isIterable: true\n      valueFrom?: unknown\n    }\n)\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  field,\n  fields,\n  hideGutter = false,\n  initCollapsed = false,\n  isIterable = false,\n  Label,\n  locales,\n  parentIsLocalized,\n  valueFrom,\n  valueTo,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const valueFromRows = valueFrom ?? []\n    const valueToRows = valueTo ?? []\n\n    if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) {\n      throw new Error(\n        'DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      valueFromRows,\n      valueToRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      valueFrom,\n      valueTo,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n    hideGutter && `${baseClass}__content--hide-gutter`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{Label}</div>\n\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={'small'} />\n        </button>\n        {changeCount > 0 && isCollapsed && (\n          <span className={`${baseClass}__field-change-count`}>\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </span>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui'\nimport { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport './index.scss'\nimport { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'\n\nconst baseClass = 'diff-collapser'\n\ntype Props = {\n  hideGutter?: boolean\n  initCollapsed?: boolean\n  Label: React.ReactNode\n  locales: string[] | undefined\n  parentIsLocalized: boolean\n  valueTo: unknown\n} & (\n  | {\n      // fields collapser\n      children: React.ReactNode\n      field?: never\n      fields: ClientField[]\n      isIterable?: false\n      valueFrom: unknown\n    }\n  | {\n      // iterable collapser\n      children: React.ReactNode\n      field: ClientField\n      fields?: never\n      isIterable: true\n      valueFrom?: unknown\n    }\n)\n\nexport const DiffCollapser: React.FC<Props> = ({\n  children,\n  field,\n  fields,\n  hideGutter = false,\n  initCollapsed = false,\n  isIterable = false,\n  Label,\n  locales,\n  parentIsLocalized,\n  valueFrom,\n  valueTo,\n}) => {\n  const { t } = useTranslation()\n  const [isCollapsed, setIsCollapsed] = useState(initCollapsed)\n  const { config } = useConfig()\n\n  let changeCount = 0\n\n  if (isIterable) {\n    if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {\n      throw new Error(\n        'DiffCollapser: field must be an array or blocks field when isIterable is true',\n      )\n    }\n    const valueFromRows = valueFrom ?? []\n    const valueToRows = valueTo ?? []\n\n    if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) {\n      throw new Error(\n        'DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true',\n      )\n    }\n\n    changeCount = countChangedFieldsInRows({\n      config,\n      field,\n      locales,\n      parentIsLocalized,\n      valueFromRows,\n      valueToRows,\n    })\n  } else {\n    changeCount = countChangedFields({\n      config,\n      fields,\n      locales,\n      parentIsLocalized,\n      valueFrom,\n      valueTo,\n    })\n  }\n\n  const contentClassNames = [\n    `${baseClass}__content`,\n    isCollapsed && `${baseClass}__content--is-collapsed`,\n    hideGutter && `${baseClass}__content--hide-gutter`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={baseClass}>\n      <FieldDiffLabel>\n        <button\n          aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n          className={`${baseClass}__toggle-button`}\n          onClick={() => setIsCollapsed(!isCollapsed)}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{Label}</div>\n\n          <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={'small'} />\n        </button>\n        {changeCount > 0 && isCollapsed && (\n          <span className={`${baseClass}__field-change-count`}>\n            {t('version:changedFieldsCount', { count: changeCount })}\n          </span>\n        )}\n      </FieldDiffLabel>\n      <div className={contentClassNames}>{children}</div>\n    </div>\n  )\n}\n"],"names":["ChevronIcon","FieldDiffLabel","useConfig","useTranslation","fieldIsArrayType","fieldIsBlockType","React","useState","countChangedFields","countChangedFieldsInRows","baseClass","DiffCollapser","children","field","fields","hideGutter","initCollapsed","isIterable","Label","locales","parentIsLocalized","valueFrom","valueTo","t","isCollapsed","setIsCollapsed","config","changeCount","Error","valueFromRows","valueToRows","Array","isArray","contentClassNames","filter","Boolean","join","div","className","button","aria-label","onClick","type","direction","size","span","count"],"mappings":"AAAA;;AAGA,SAASA,WAAW,EAAEC,cAAc,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AACvF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,iBAAgB;AACnE,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,OAAO,eAAc;AACrB,SAASC,kBAAkB,EAAEC,wBAAwB,QAAQ,qCAAoC;AAEjG,MAAMC,YAAY;AAWZ,mBAAmB;AAQnB,qBAAqB;AAS3B,OAAO,MAAMC,gBAAiC,CAAC,EAC7CC,QAAQ,EACRC,KAAK,EACLC,MAAM,EACNC,aAAa,KAAK,EAClBC,gBAAgB,KAAK,EACrBC,aAAa,KAAK,EAClBC,KAAK,EACLC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,OAAO,EACR;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGpB;IACd,MAAM,CAACqB,aAAaC,eAAe,GAAGlB,SAASS;IAC/C,MAAM,EAAEU,MAAM,EAAE,GAAGxB;IAEnB,IAAIyB,cAAc;IAElB,IAAIV,YAAY;QACd,IAAI,CAACb,iBAAiBS,UAAU,CAACR,iBAAiBQ,QAAQ;YACxD,MAAM,IAAIe,MACR;QAEJ;QACA,MAAMC,gBAAgBR,aAAa,EAAE;QACrC,MAAMS,cAAcR,WAAW,EAAE;QAEjC,IAAI,CAACS,MAAMC,OAAO,CAACH,kBAAkB,CAACE,MAAMC,OAAO,CAACF,cAAc;YAChE,MAAM,IAAIF,MACR;QAEJ;QAEAD,cAAclB,yBAAyB;YACrCiB;YACAb;YACAM;YACAC;YACAS;YACAC;QACF;IACF,OAAO;QACLH,cAAcnB,mBAAmB;YAC/BkB;YACAZ;YACAK;YACAC;YACAC;YACAC;QACF;IACF;IAEA,MAAMW,oBAAoB;QACxB,GAAGvB,UAAU,SAAS,CAAC;QACvBc,eAAe,GAAGd,UAAU,uBAAuB,CAAC;QACpDK,cAAc,GAAGL,UAAU,sBAAsB,CAAC;KACnD,CACEwB,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,QAACC;QAAIC,WAAW5B;;0BACd,QAACT;;kCACC,QAACsC;wBACCC,cAAYhB,cAAc,WAAW;wBACrCc,WAAW,GAAG5B,UAAU,eAAe,CAAC;wBACxC+B,SAAS,IAAMhB,eAAe,CAACD;wBAC/BkB,MAAK;;0CAEL,QAACL;gCAAIC,WAAW,GAAG5B,UAAU,OAAO,CAAC;0CAAGQ;;;;;;0CAExC,QAAClB;gCAAY2C,WAAWnB,cAAc,UAAU;gCAAQoB,MAAM;;;;;;;;;;;;oBAE/DjB,cAAc,KAAKH,6BAClB,QAACqB;wBAAKP,WAAW,GAAG5B,UAAU,oBAAoB,CAAC;kCAChDa,EAAE,8BAA8B;4BAAEuB,OAAOnB;wBAAY;;;;;;;;;;;;0BAI5D,QAACU;gBAAIC,WAAWL;0BAAoBrB;;;;;;;;;;;;AAG1C,EAAC"}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss

@@ -0,0 +1,81 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .diff-collapser {
+    &__toggle-button {
+      all: unset;
+      cursor: pointer;
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+
+      .icon {
+        color: var(--theme-elevation-500);
+      }
+
+      &:hover {
+        // Apply background color but with padding, thus we use after
+        &::before {
+          content: '';
+          position: absolute;
+          top: -(base(0.15));
+          left: -(base(0.15));
+          right: -(base(0.15));
+          bottom: -(base(0.15));
+          background-color: var(--theme-elevation-50);
+          border-radius: var(--style-radius-s);
+          z-index: -1;
+        }
+
+        .iterable-diff__label {
+          background-color: var(--theme-elevation-50);
+          z-index: 1;
+        }
+      }
+    }
+
+    &__label {
+      // Add space between label, chevron, and change count
+      margin: 0 calc(var(--base) * 0.3) 0 0;
+      display: inline-flex;
+      height: 100%;
+    }
+
+    &__field-change-count {
+      // Reset the font weight of the change count to normal
+      font-weight: normal;
+      margin-left: calc(var(--base) * 0.3);
+      padding: calc(var(--base) * 0.1) calc(var(--base) * 0.2);
+      background: var(--theme-elevation-100);
+      border-radius: var(--style-radius-s);
+      font-size: 0.8rem;
+    }
+
+    &__content:not(.diff-collapser__content--hide-gutter) {
+      [dir='ltr'] & {
+        // Vertical gutter
+        border-left: 2px solid var(--theme-elevation-100);
+        // Center-align the gutter with the chevron
+        margin-left: 3px;
+        // Content indentation
+        padding-left: calc(var(--base) * 0.5);
+      }
+      [dir='rtl'] & {
+        // Vertical gutter
+        border-right: 2px solid var(--theme-elevation-100);
+        // Center-align the gutter with the chevron
+        margin-right: 3px;
+        // Content indentation
+        padding-right: calc(var(--base) * 0.5);
+      }
+    }
+
+    &__content--is-collapsed {
+      // Hide the content when collapsed. We use display: none instead of
+      // conditional rendering to avoid loosing children's collapsed state when
+      // remounting.
+      display: none;
+    }
+  }
+}