@payloadcms/next 3.77.0 → 3.78.0-internal-debug.f663370

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.js

@@ -1,216 +1,234 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc';
+import './index.scss';
 import React from 'react';
 import { generateLabelFromValue } from './generateLabelFromValue.js';
 const baseClass = 'relationship-diff';
-export const Relationship = ({
-  comparisonValue: valueFrom,
-  field,
-  i18n,
-  locale,
-  nestingLevel,
-  parentIsLocalized,
-  req,
-  versionValue: valueTo
-}) => {
-  const hasMany = 'hasMany' in field && field.hasMany ||
-  // Check data structure (handles block swaps where schema may not match data)
-  Array.isArray(valueFrom) || Array.isArray(valueTo);
-  const polymorphic = Array.isArray(field.relationTo);
-  if (hasMany) {
-    return /*#__PURE__*/_jsx(ManyRelationshipDiff, {
-      field: field,
-      i18n: i18n,
-      locale: locale,
-      nestingLevel: nestingLevel,
-      parentIsLocalized: parentIsLocalized,
-      polymorphic: polymorphic,
-      req: req,
-      valueFrom: valueFrom,
-      valueTo: valueTo
-    });
-  }
-  return /*#__PURE__*/_jsx(SingleRelationshipDiff, {
-    field: field,
-    i18n: i18n,
-    locale: locale,
-    nestingLevel: nestingLevel,
-    parentIsLocalized: parentIsLocalized,
-    polymorphic: polymorphic,
-    req: req,
-    valueFrom: valueFrom,
-    valueTo: valueTo
-  });
+export const Relationship = ({ comparisonValue: valueFrom, field, i18n, locale, nestingLevel, parentIsLocalized, req, versionValue: valueTo })=>{
+    const hasMany = 'hasMany' in field && field.hasMany || // Check data structure (handles block swaps where schema may not match data)
+    Array.isArray(valueFrom) || Array.isArray(valueTo);
+    const polymorphic = Array.isArray(field.relationTo);
+    if (hasMany) {
+        return /*#__PURE__*/ _jsxDEV(ManyRelationshipDiff, {
+            field: field,
+            i18n: i18n,
+            locale: locale,
+            nestingLevel: nestingLevel,
+            parentIsLocalized: parentIsLocalized,
+            polymorphic: polymorphic,
+            req: req,
+            valueFrom: valueFrom,
+            valueTo: valueTo
+        }, void 0, false, {
+            fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+            lineNumber: 42,
+            columnNumber: 7
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV(SingleRelationshipDiff, {
+        field: field,
+        i18n: i18n,
+        locale: locale,
+        nestingLevel: nestingLevel,
+        parentIsLocalized: parentIsLocalized,
+        polymorphic: polymorphic,
+        req: req,
+        valueFrom: valueFrom,
+        valueTo: valueTo
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 57,
+        columnNumber: 5
+    }, this);
 };
-export const SingleRelationshipDiff = async args => {
-  const {
-    field,
-    i18n,
-    locale,
-    nestingLevel,
-    parentIsLocalized,
-    polymorphic,
-    req,
-    valueFrom,
-    valueTo
-  } = args;
-  const ReactDOMServer = (await import('react-dom/server')).default;
-  const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
-  // Generate titles asynchronously before creating components
-  const [titleFrom, titleTo] = await Promise.all([valueFrom ? generateLabelFromValue({
-    field,
-    locale: localeToUse,
-    parentIsLocalized,
-    req,
-    value: valueFrom
-  }) : Promise.resolve(null), valueTo ? generateLabelFromValue({
-    field,
-    locale: localeToUse,
-    parentIsLocalized,
-    req,
-    value: valueTo
-  }) : Promise.resolve(null)]);
-  const FromComponent = valueFrom ? /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
-    field: field,
-    i18n: i18n,
-    locale: locale,
-    parentIsLocalized: parentIsLocalized,
-    polymorphic: polymorphic,
-    relationTo: polymorphic ? valueFrom.relationTo : field.relationTo,
-    req: req,
-    showPill: true,
-    title: titleFrom,
-    value: valueFrom
-  }) : null;
-  const ToComponent = valueTo ? /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
-    field: field,
-    i18n: i18n,
-    locale: locale,
-    parentIsLocalized: parentIsLocalized,
-    polymorphic: polymorphic,
-    relationTo: polymorphic ? valueTo.relationTo : field.relationTo,
-    req: req,
-    showPill: true,
-    title: titleTo,
-    value: valueTo
-  }) : null;
-  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`;
-  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`;
-  const diff = getHTMLDiffComponents({
-    fromHTML,
-    toHTML,
-    tokenizeByCharacter: false
-  });
-  return /*#__PURE__*/_jsx(FieldDiffContainer, {
-    className: `${baseClass}-container ${baseClass}-container--hasOne`,
-    From: diff.From,
-    i18n: i18n,
-    label: {
-      label: field.label,
-      locale
-    },
-    nestingLevel: nestingLevel,
-    To: diff.To
-  });
+export const SingleRelationshipDiff = async (args)=>{
+    const { field, i18n, locale, nestingLevel, parentIsLocalized, polymorphic, req, valueFrom, valueTo } = args;
+    const ReactDOMServer = (await import('react-dom/server')).default;
+    const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
+    // Generate titles asynchronously before creating components
+    const [titleFrom, titleTo] = await Promise.all([
+        valueFrom ? generateLabelFromValue({
+            field,
+            locale: localeToUse,
+            parentIsLocalized,
+            req,
+            value: valueFrom
+        }) : Promise.resolve(null),
+        valueTo ? generateLabelFromValue({
+            field,
+            locale: localeToUse,
+            parentIsLocalized,
+            req,
+            value: valueTo
+        }) : Promise.resolve(null)
+    ]);
+    const FromComponent = valueFrom ? /*#__PURE__*/ _jsxDEV(RelationshipDocumentDiff, {
+        field: field,
+        i18n: i18n,
+        locale: locale,
+        parentIsLocalized: parentIsLocalized,
+        polymorphic: polymorphic,
+        relationTo: polymorphic ? valueFrom.relationTo : field.relationTo,
+        req: req,
+        showPill: true,
+        title: titleFrom,
+        value: valueFrom
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 124,
+        columnNumber: 5
+    }, this) : null;
+    const ToComponent = valueTo ? /*#__PURE__*/ _jsxDEV(RelationshipDocumentDiff, {
+        field: field,
+        i18n: i18n,
+        locale: locale,
+        parentIsLocalized: parentIsLocalized,
+        polymorphic: polymorphic,
+        relationTo: polymorphic ? valueTo.relationTo : field.relationTo,
+        req: req,
+        showPill: true,
+        title: titleTo,
+        value: valueTo
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 142,
+        columnNumber: 5
+    }, this) : null;
+    const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`;
+    const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`;
+    const diff = getHTMLDiffComponents({
+        fromHTML,
+        toHTML,
+        tokenizeByCharacter: false
+    });
+    return /*#__PURE__*/ _jsxDEV(FieldDiffContainer, {
+        className: `${baseClass}-container ${baseClass}-container--hasOne`,
+        From: diff.From,
+        i18n: i18n,
+        label: {
+            label: field.label,
+            locale
+        },
+        nestingLevel: nestingLevel,
+        To: diff.To
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 170,
+        columnNumber: 5
+    }, this);
 };
-const ManyRelationshipDiff = async ({
-  field,
-  i18n,
-  locale,
-  nestingLevel,
-  parentIsLocalized,
-  polymorphic,
-  req,
-  valueFrom,
-  valueTo
-}) => {
-  const ReactDOMServer = (await import('react-dom/server')).default;
-  const fromArr = Array.isArray(valueFrom) ? valueFrom : [];
-  const toArr = Array.isArray(valueTo) ? valueTo : [];
-  const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
-  // Generate all titles asynchronously before creating components
-  const [titlesFrom, titlesTo] = await Promise.all([Promise.all(fromArr.map(val => generateLabelFromValue({
-    field,
-    locale: localeToUse,
-    parentIsLocalized,
-    req,
-    value: val
-  }))), Promise.all(toArr.map(val => generateLabelFromValue({
-    field,
-    locale: localeToUse,
-    parentIsLocalized,
-    req,
-    value: val
-  })))]);
-  const makeNodes = (list, titles) => list.map((val, idx) => /*#__PURE__*/_jsx(RelationshipDocumentDiff, {
-    field: field,
-    i18n: i18n,
-    locale: locale,
-    parentIsLocalized: parentIsLocalized,
-    polymorphic: polymorphic,
-    relationTo: polymorphic ? val.relationTo : field.relationTo,
-    req: req,
-    showPill: polymorphic,
-    title: titles[idx],
-    value: val
-  }, idx));
-  const fromNodes = fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : /*#__PURE__*/_jsx("p", {
-    className: `${baseClass}__empty`
-  });
-  const toNodes = toArr.length > 0 ? makeNodes(toArr, titlesTo) : /*#__PURE__*/_jsx("p", {
-    className: `${baseClass}__empty`
-  });
-  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes);
-  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes);
-  const diff = getHTMLDiffComponents({
-    fromHTML,
-    toHTML,
-    tokenizeByCharacter: false
-  });
-  return /*#__PURE__*/_jsx(FieldDiffContainer, {
-    className: `${baseClass}-container ${baseClass}-container--hasMany`,
-    From: diff.From,
-    i18n: i18n,
-    label: {
-      label: field.label,
-      locale
-    },
-    nestingLevel: nestingLevel,
-    To: diff.To
-  });
+const ManyRelationshipDiff = async ({ field, i18n, locale, nestingLevel, parentIsLocalized, polymorphic, req, valueFrom, valueTo })=>{
+    const ReactDOMServer = (await import('react-dom/server')).default;
+    const fromArr = Array.isArray(valueFrom) ? valueFrom : [];
+    const toArr = Array.isArray(valueTo) ? valueTo : [];
+    const localeToUse = locale ?? (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? 'en';
+    // Generate all titles asynchronously before creating components
+    const [titlesFrom, titlesTo] = await Promise.all([
+        Promise.all(fromArr.map((val)=>generateLabelFromValue({
+                field,
+                locale: localeToUse,
+                parentIsLocalized,
+                req,
+                value: val
+            }))),
+        Promise.all(toArr.map((val)=>generateLabelFromValue({
+                field,
+                locale: localeToUse,
+                parentIsLocalized,
+                req,
+                value: val
+            })))
+    ]);
+    const makeNodes = (list, titles)=>list.map((val, idx)=>/*#__PURE__*/ _jsxDEV(RelationshipDocumentDiff, {
+                field: field,
+                i18n: i18n,
+                locale: locale,
+                parentIsLocalized: parentIsLocalized,
+                polymorphic: polymorphic,
+                relationTo: polymorphic ? val.relationTo : field.relationTo,
+                req: req,
+                showPill: polymorphic,
+                title: titles[idx],
+                value: val
+            }, idx, false, {
+                fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+                lineNumber: 240,
+                columnNumber: 7
+            }, this));
+    const fromNodes = fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : /*#__PURE__*/ _jsxDEV("p", {
+        className: `${baseClass}__empty`
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 260,
+        columnNumber: 59
+    }, this);
+    const toNodes = toArr.length > 0 ? makeNodes(toArr, titlesTo) : /*#__PURE__*/ _jsxDEV("p", {
+        className: `${baseClass}__empty`
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 263,
+        columnNumber: 53
+    }, this);
+    const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes);
+    const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes);
+    const diff = getHTMLDiffComponents({
+        fromHTML,
+        toHTML,
+        tokenizeByCharacter: false
+    });
+    return /*#__PURE__*/ _jsxDEV(FieldDiffContainer, {
+        className: `${baseClass}-container ${baseClass}-container--hasMany`,
+        From: diff.From,
+        i18n: i18n,
+        label: {
+            label: field.label,
+            locale
+        },
+        nestingLevel: nestingLevel,
+        To: diff.To
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 275,
+        columnNumber: 5
+    }, this);
 };
-const RelationshipDocumentDiff = ({
-  field,
-  i18n,
-  locale,
-  parentIsLocalized,
-  polymorphic,
-  relationTo,
-  req,
-  showPill = false,
-  title,
-  value
-}) => {
-  let pillLabel = null;
-  if (showPill) {
-    const collectionConfig = req.payload.collections[relationTo].config;
-    pillLabel = collectionConfig.labels?.singular ? getTranslation(collectionConfig.labels.singular, i18n) : collectionConfig.slug;
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    className: `${baseClass}`,
-    "data-enable-match": "true",
-    "data-id": polymorphic ? value.value.id : value.id,
-    "data-relation-to": relationTo,
-    children: [pillLabel && /*#__PURE__*/_jsx("span", {
-      className: `${baseClass}__pill`,
-      "data-enable-match": "false",
-      children: pillLabel
-    }), /*#__PURE__*/_jsx("strong", {
-      className: `${baseClass}__info`,
-      "data-enable-match": "false",
-      children: title
-    })]
-  });
+const RelationshipDocumentDiff = ({ field, i18n, locale, parentIsLocalized, polymorphic, relationTo, req, showPill = false, title, value })=>{
+    let pillLabel = null;
+    if (showPill) {
+        const collectionConfig = req.payload.collections[relationTo].config;
+        pillLabel = collectionConfig.labels?.singular ? getTranslation(collectionConfig.labels.singular, i18n) : collectionConfig.slug;
+    }
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass}`,
+        "data-enable-match": "true",
+        "data-id": polymorphic ? value.value.id : value.id,
+        "data-relation-to": relationTo,
+        children: [
+            pillLabel && /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__pill`,
+                "data-enable-match": "false",
+                children: pillLabel
+            }, void 0, false, {
+                fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+                lineNumber: 329,
+                columnNumber: 9
+            }, this),
+            /*#__PURE__*/ _jsxDEV("strong", {
+                className: `${baseClass}__info`,
+                "data-enable-match": "false",
+                children: title
+            }, void 0, false, {
+                fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+                lineNumber: 333,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx",
+        lineNumber: 318,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","FieldDiffContainer","getHTMLDiffComponents","React","generateLabelFromValue","baseClass","Relationship","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","parentIsLocalized","req","versionValue","valueTo","hasMany","Array","isArray","polymorphic","relationTo","_jsx","ManyRelationshipDiff","SingleRelationshipDiff","args","ReactDOMServer","default","localeToUse","payload","config","localization","defaultLocale","titleFrom","titleTo","Promise","all","value","resolve","FromComponent","RelationshipDocumentDiff","showPill","title","ToComponent","fromHTML","renderToStaticMarkup","toHTML","diff","tokenizeByCharacter","className","From","label","To","fromArr","toArr","titlesFrom","titlesTo","map","val","makeNodes","list","titles","idx","fromNodes","length","toNodes","pillLabel","collectionConfig","collections","labels","singular","slug","_jsxs","id"],"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["import type {\n  PayloadRequest,\n  RelationshipField,\n  RelationshipFieldDiffServerComponent,\n  TypeWithID,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\n\nimport React from 'react'\n\nimport { generateLabelFromValue } from './generateLabelFromValue.js'\n\nconst baseClass = 'relationship-diff'\n\nexport type RelationshipValue =\n  | { relationTo: string; value: number | string | TypeWithID }\n  | (number | string | TypeWithID)\n\nexport const Relationship: RelationshipFieldDiffServerComponent = ({\n  comparisonValue: valueFrom,\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  req,\n  versionValue: valueTo,\n}) => {\n  const hasMany =\n    ('hasMany' in field && field.hasMany) ||\n    // Check data structure (handles block swaps where schema may not match data)\n    Array.isArray(valueFrom) ||\n    Array.isArray(valueTo)\n  const polymorphic = Array.isArray(field.relationTo)\n\n  if (hasMany) {\n    return (\n      <ManyRelationshipDiff\n        field={field}\n        i18n={i18n}\n        locale={locale}\n        nestingLevel={nestingLevel}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        req={req}\n        valueFrom={valueFrom as RelationshipValue[] | undefined}\n        valueTo={valueTo as RelationshipValue[] | undefined}\n      />\n    )\n  }\n\n  return (\n    <SingleRelationshipDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      nestingLevel={nestingLevel}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      req={req}\n      valueFrom={valueFrom as RelationshipValue}\n      valueTo={valueTo as RelationshipValue}\n    />\n  )\n}\n\nexport const SingleRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue\n  valueTo: RelationshipValue\n}> = async (args) => {\n  const {\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    parentIsLocalized,\n    polymorphic,\n    req,\n    valueFrom,\n    valueTo,\n  } = args\n\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate titles asynchronously before creating components\n  const [titleFrom, titleTo] = await Promise.all([\n    valueFrom\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueFrom,\n        })\n      : Promise.resolve(null),\n    valueTo\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueTo,\n        })\n      : Promise.resolve(null),\n  ])\n\n  const FromComponent = valueFrom ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueFrom as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleFrom}\n      value={valueFrom}\n    />\n  ) : null\n  const ToComponent = valueTo ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueTo as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleTo}\n      value={valueTo}\n    />\n  ) : null\n\n  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`\n  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasOne`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst ManyRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue[] | undefined\n  valueTo: RelationshipValue[] | undefined\n}> = async ({\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  polymorphic,\n  req,\n  valueFrom,\n  valueTo,\n}) => {\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const fromArr = Array.isArray(valueFrom) ? valueFrom : []\n  const toArr = Array.isArray(valueTo) ? valueTo : []\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate all titles asynchronously before creating components\n  const [titlesFrom, titlesTo] = await Promise.all([\n    Promise.all(\n      fromArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n    Promise.all(\n      toArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n  ])\n\n  const makeNodes = (list: RelationshipValue[], titles: string[]) =>\n    list.map((val, idx) => (\n      <RelationshipDocumentDiff\n        field={field}\n        i18n={i18n}\n        key={idx}\n        locale={locale}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        relationTo={\n          polymorphic\n            ? (val as { relationTo: string; value: TypeWithID }).relationTo\n            : (field.relationTo as string)\n        }\n        req={req}\n        showPill={polymorphic}\n        title={titles[idx]}\n        value={val}\n      />\n    ))\n\n  const fromNodes =\n    fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : <p className={`${baseClass}__empty`}></p>\n\n  const toNodes =\n    toArr.length > 0 ? makeNodes(toArr, titlesTo) : <p className={`${baseClass}__empty`}></p>\n\n  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes)\n  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes)\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasMany`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst RelationshipDocumentDiff = ({\n  field,\n  i18n,\n  locale,\n  parentIsLocalized,\n  polymorphic,\n  relationTo,\n  req,\n  showPill = false,\n  title,\n  value,\n}: {\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  relationTo: string\n  req: PayloadRequest\n  showPill?: boolean\n  title: null | string\n  value: RelationshipValue\n}) => {\n  let pillLabel: null | string = null\n  if (showPill) {\n    const collectionConfig = req.payload.collections[relationTo].config\n    pillLabel = collectionConfig.labels?.singular\n      ? getTranslation(collectionConfig.labels.singular, i18n)\n      : collectionConfig.slug\n  }\n\n  return (\n    <div\n      className={`${baseClass}`}\n      data-enable-match=\"true\"\n      data-id={\n        polymorphic\n          ? (value as { relationTo: string; value: TypeWithID }).value.id\n          : (value as TypeWithID).id\n      }\n      data-relation-to={relationTo}\n    >\n      {pillLabel && (\n        <span className={`${baseClass}__pill`} data-enable-match=\"false\">\n          {pillLabel}\n        </span>\n      )}\n      <strong className={`${baseClass}__info`} data-enable-match=\"false\">\n        {title}\n      </strong>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx"],"sourcesContent":["import type {\n  PayloadRequest,\n  RelationshipField,\n  RelationshipFieldDiffServerComponent,\n  TypeWithID,\n} from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\n\nimport React from 'react'\n\nimport { generateLabelFromValue } from './generateLabelFromValue.js'\n\nconst baseClass = 'relationship-diff'\n\nexport type RelationshipValue =\n  | { relationTo: string; value: number | string | TypeWithID }\n  | (number | string | TypeWithID)\n\nexport const Relationship: RelationshipFieldDiffServerComponent = ({\n  comparisonValue: valueFrom,\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  req,\n  versionValue: valueTo,\n}) => {\n  const hasMany =\n    ('hasMany' in field && field.hasMany) ||\n    // Check data structure (handles block swaps where schema may not match data)\n    Array.isArray(valueFrom) ||\n    Array.isArray(valueTo)\n  const polymorphic = Array.isArray(field.relationTo)\n\n  if (hasMany) {\n    return (\n      <ManyRelationshipDiff\n        field={field}\n        i18n={i18n}\n        locale={locale}\n        nestingLevel={nestingLevel}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        req={req}\n        valueFrom={valueFrom as RelationshipValue[] | undefined}\n        valueTo={valueTo as RelationshipValue[] | undefined}\n      />\n    )\n  }\n\n  return (\n    <SingleRelationshipDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      nestingLevel={nestingLevel}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      req={req}\n      valueFrom={valueFrom as RelationshipValue}\n      valueTo={valueTo as RelationshipValue}\n    />\n  )\n}\n\nexport const SingleRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue\n  valueTo: RelationshipValue\n}> = async (args) => {\n  const {\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    parentIsLocalized,\n    polymorphic,\n    req,\n    valueFrom,\n    valueTo,\n  } = args\n\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate titles asynchronously before creating components\n  const [titleFrom, titleTo] = await Promise.all([\n    valueFrom\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueFrom,\n        })\n      : Promise.resolve(null),\n    valueTo\n      ? generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: valueTo,\n        })\n      : Promise.resolve(null),\n  ])\n\n  const FromComponent = valueFrom ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueFrom as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleFrom}\n      value={valueFrom}\n    />\n  ) : null\n  const ToComponent = valueTo ? (\n    <RelationshipDocumentDiff\n      field={field}\n      i18n={i18n}\n      locale={locale}\n      parentIsLocalized={parentIsLocalized}\n      polymorphic={polymorphic}\n      relationTo={\n        polymorphic\n          ? (valueTo as { relationTo: string; value: TypeWithID }).relationTo\n          : (field.relationTo as string)\n      }\n      req={req}\n      showPill={true}\n      title={titleTo}\n      value={valueTo}\n    />\n  ) : null\n\n  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`\n  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasOne`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst ManyRelationshipDiff: React.FC<{\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  nestingLevel?: number\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  req: PayloadRequest\n  valueFrom: RelationshipValue[] | undefined\n  valueTo: RelationshipValue[] | undefined\n}> = async ({\n  field,\n  i18n,\n  locale,\n  nestingLevel,\n  parentIsLocalized,\n  polymorphic,\n  req,\n  valueFrom,\n  valueTo,\n}) => {\n  const ReactDOMServer = (await import('react-dom/server')).default\n\n  const fromArr = Array.isArray(valueFrom) ? valueFrom : []\n  const toArr = Array.isArray(valueTo) ? valueTo : []\n\n  const localeToUse =\n    locale ??\n    (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ??\n    'en'\n\n  // Generate all titles asynchronously before creating components\n  const [titlesFrom, titlesTo] = await Promise.all([\n    Promise.all(\n      fromArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n    Promise.all(\n      toArr.map((val) =>\n        generateLabelFromValue({\n          field,\n          locale: localeToUse,\n          parentIsLocalized,\n          req,\n          value: val,\n        }),\n      ),\n    ),\n  ])\n\n  const makeNodes = (list: RelationshipValue[], titles: string[]) =>\n    list.map((val, idx) => (\n      <RelationshipDocumentDiff\n        field={field}\n        i18n={i18n}\n        key={idx}\n        locale={locale}\n        parentIsLocalized={parentIsLocalized}\n        polymorphic={polymorphic}\n        relationTo={\n          polymorphic\n            ? (val as { relationTo: string; value: TypeWithID }).relationTo\n            : (field.relationTo as string)\n        }\n        req={req}\n        showPill={polymorphic}\n        title={titles[idx]}\n        value={val}\n      />\n    ))\n\n  const fromNodes =\n    fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : <p className={`${baseClass}__empty`}></p>\n\n  const toNodes =\n    toArr.length > 0 ? makeNodes(toArr, titlesTo) : <p className={`${baseClass}__empty`}></p>\n\n  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes)\n  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes)\n\n  const diff = getHTMLDiffComponents({\n    fromHTML,\n    toHTML,\n    tokenizeByCharacter: false,\n  })\n\n  return (\n    <FieldDiffContainer\n      className={`${baseClass}-container ${baseClass}-container--hasMany`}\n      From={diff.From}\n      i18n={i18n}\n      label={{ label: field.label, locale }}\n      nestingLevel={nestingLevel}\n      To={diff.To}\n    />\n  )\n}\n\nconst RelationshipDocumentDiff = ({\n  field,\n  i18n,\n  locale,\n  parentIsLocalized,\n  polymorphic,\n  relationTo,\n  req,\n  showPill = false,\n  title,\n  value,\n}: {\n  field: RelationshipField\n  i18n: I18nClient\n  locale: string\n  parentIsLocalized: boolean\n  polymorphic: boolean\n  relationTo: string\n  req: PayloadRequest\n  showPill?: boolean\n  title: null | string\n  value: RelationshipValue\n}) => {\n  let pillLabel: null | string = null\n  if (showPill) {\n    const collectionConfig = req.payload.collections[relationTo].config\n    pillLabel = collectionConfig.labels?.singular\n      ? getTranslation(collectionConfig.labels.singular, i18n)\n      : collectionConfig.slug\n  }\n\n  return (\n    <div\n      className={`${baseClass}`}\n      data-enable-match=\"true\"\n      data-id={\n        polymorphic\n          ? (value as { relationTo: string; value: TypeWithID }).value.id\n          : (value as TypeWithID).id\n      }\n      data-relation-to={relationTo}\n    >\n      {pillLabel && (\n        <span className={`${baseClass}__pill`} data-enable-match=\"false\">\n          {pillLabel}\n        </span>\n      )}\n      <strong className={`${baseClass}__info`} data-enable-match=\"false\">\n        {title}\n      </strong>\n    </div>\n  )\n}\n"],"names":["getTranslation","FieldDiffContainer","getHTMLDiffComponents","React","generateLabelFromValue","baseClass","Relationship","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","parentIsLocalized","req","versionValue","valueTo","hasMany","Array","isArray","polymorphic","relationTo","ManyRelationshipDiff","SingleRelationshipDiff","args","ReactDOMServer","default","localeToUse","payload","config","localization","defaultLocale","titleFrom","titleTo","Promise","all","value","resolve","FromComponent","RelationshipDocumentDiff","showPill","title","ToComponent","fromHTML","renderToStaticMarkup","toHTML","diff","tokenizeByCharacter","className","From","label","To","fromArr","toArr","titlesFrom","titlesTo","map","val","makeNodes","list","titles","idx","fromNodes","length","p","toNodes","pillLabel","collectionConfig","collections","labels","singular","slug","div","data-enable-match","data-id","id","data-relation-to","span","strong"],"mappings":";AAOA,SAASA,cAAc,QAAyB,2BAA0B;AAC1E,SAASC,kBAAkB,EAAEC,qBAAqB,QAAQ,qBAAoB;AAE9E,OAAO,eAAc;AAErB,OAAOC,WAAW,QAAO;AAEzB,SAASC,sBAAsB,QAAQ,8BAA6B;AAEpE,MAAMC,YAAY;AAMlB,OAAO,MAAMC,eAAqD,CAAC,EACjEC,iBAAiBC,SAAS,EAC1BC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,iBAAiB,EACjBC,GAAG,EACHC,cAAcC,OAAO,EACtB;IACC,MAAMC,UACJ,AAAC,aAAaR,SAASA,MAAMQ,OAAO,IACpC,6EAA6E;IAC7EC,MAAMC,OAAO,CAACX,cACdU,MAAMC,OAAO,CAACH;IAChB,MAAMI,cAAcF,MAAMC,OAAO,CAACV,MAAMY,UAAU;IAElD,IAAIJ,SAAS;QACX,qBACE,QAACK;YACCb,OAAOA;YACPC,MAAMA;YACNC,QAAQA;YACRC,cAAcA;YACdC,mBAAmBA;YACnBO,aAAaA;YACbN,KAAKA;YACLN,WAAWA;YACXQ,SAASA;;;;;;IAGf;IAEA,qBACE,QAACO;QACCd,OAAOA;QACPC,MAAMA;QACNC,QAAQA;QACRC,cAAcA;QACdC,mBAAmBA;QACnBO,aAAaA;QACbN,KAAKA;QACLN,WAAWA;QACXQ,SAASA;;;;;;AAGf,EAAC;AAED,OAAO,MAAMO,yBAUR,OAAOC;IACV,MAAM,EACJf,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,iBAAiB,EACjBO,WAAW,EACXN,GAAG,EACHN,SAAS,EACTQ,OAAO,EACR,GAAGQ;IAEJ,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;IAEjE,MAAMC,cACJhB,UACCG,CAAAA,IAAIc,OAAO,CAACC,MAAM,EAAEC,gBAAgBhB,IAAIc,OAAO,CAACC,MAAM,EAAEC,cAAcC,aAAY,KACnF;IAEF,4DAA4D;IAC5D,MAAM,CAACC,WAAWC,QAAQ,GAAG,MAAMC,QAAQC,GAAG,CAAC;QAC7C3B,YACIJ,uBAAuB;YACrBK;YACAE,QAAQgB;YACRd;YACAC;YACAsB,OAAO5B;QACT,KACA0B,QAAQG,OAAO,CAAC;QACpBrB,UACIZ,uBAAuB;YACrBK;YACAE,QAAQgB;YACRd;YACAC;YACAsB,OAAOpB;QACT,KACAkB,QAAQG,OAAO,CAAC;KACrB;IAED,MAAMC,gBAAgB9B,0BACpB,QAAC+B;QACC9B,OAAOA;QACPC,MAAMA;QACNC,QAAQA;QACRE,mBAAmBA;QACnBO,aAAaA;QACbC,YACED,cACI,AAACZ,UAAwDa,UAAU,GAClEZ,MAAMY,UAAU;QAEvBP,KAAKA;QACL0B,UAAU;QACVC,OAAOT;QACPI,OAAO5B;;;;;eAEP;IACJ,MAAMkC,cAAc1B,wBAClB,QAACuB;QACC9B,OAAOA;QACPC,MAAMA;QACNC,QAAQA;QACRE,mBAAmBA;QACnBO,aAAaA;QACbC,YACED,cACI,AAACJ,QAAsDK,UAAU,GAChEZ,MAAMY,UAAU;QAEvBP,KAAKA;QACL0B,UAAU;QACVC,OAAOR;QACPG,OAAOpB;;;;;eAEP;IAEJ,MAAM2B,WAAWL,gBAAgBb,eAAemB,oBAAoB,CAACN,iBAAiB,CAAC,OAAO,CAAC;IAC/F,MAAMO,SAASH,cAAcjB,eAAemB,oBAAoB,CAACF,eAAe,CAAC,OAAO,CAAC;IAEzF,MAAMI,OAAO5C,sBAAsB;QACjCyC;QACAE;QACAE,qBAAqB;IACvB;IAEA,qBACE,QAAC9C;QACC+C,WAAW,GAAG3C,UAAU,WAAW,EAAEA,UAAU,kBAAkB,CAAC;QAClE4C,MAAMH,KAAKG,IAAI;QACfvC,MAAMA;QACNwC,OAAO;YAAEA,OAAOzC,MAAMyC,KAAK;YAAEvC;QAAO;QACpCC,cAAcA;QACduC,IAAIL,KAAKK,EAAE;;;;;;AAGjB,EAAC;AAED,MAAM7B,uBAUD,OAAO,EACVb,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,iBAAiB,EACjBO,WAAW,EACXN,GAAG,EACHN,SAAS,EACTQ,OAAO,EACR;IACC,MAAMS,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;IAEjE,MAAM0B,UAAUlC,MAAMC,OAAO,CAACX,aAAaA,YAAY,EAAE;IACzD,MAAM6C,QAAQnC,MAAMC,OAAO,CAACH,WAAWA,UAAU,EAAE;IAEnD,MAAMW,cACJhB,UACCG,CAAAA,IAAIc,OAAO,CAACC,MAAM,EAAEC,gBAAgBhB,IAAIc,OAAO,CAACC,MAAM,EAAEC,cAAcC,aAAY,KACnF;IAEF,gEAAgE;IAChE,MAAM,CAACuB,YAAYC,SAAS,GAAG,MAAMrB,QAAQC,GAAG,CAAC;QAC/CD,QAAQC,GAAG,CACTiB,QAAQI,GAAG,CAAC,CAACC,MACXrD,uBAAuB;gBACrBK;gBACAE,QAAQgB;gBACRd;gBACAC;gBACAsB,OAAOqB;YACT;QAGJvB,QAAQC,GAAG,CACTkB,MAAMG,GAAG,CAAC,CAACC,MACTrD,uBAAuB;gBACrBK;gBACAE,QAAQgB;gBACRd;gBACAC;gBACAsB,OAAOqB;YACT;KAGL;IAED,MAAMC,YAAY,CAACC,MAA2BC,SAC5CD,KAAKH,GAAG,CAAC,CAACC,KAAKI,oBACb,QAACtB;gBACC9B,OAAOA;gBACPC,MAAMA;gBAENC,QAAQA;gBACRE,mBAAmBA;gBACnBO,aAAaA;gBACbC,YACED,cACI,AAACqC,IAAkDpC,UAAU,GAC5DZ,MAAMY,UAAU;gBAEvBP,KAAKA;gBACL0B,UAAUpB;gBACVqB,OAAOmB,MAAM,CAACC,IAAI;gBAClBzB,OAAOqB;eAZFI;;;;;IAgBX,MAAMC,YACJV,QAAQW,MAAM,GAAG,IAAIL,UAAUN,SAASE,4BAAc,QAACU;QAAEhB,WAAW,GAAG3C,UAAU,OAAO,CAAC;;;;;;IAE3F,MAAM4D,UACJZ,MAAMU,MAAM,GAAG,IAAIL,UAAUL,OAAOE,0BAAY,QAACS;QAAEhB,WAAW,GAAG3C,UAAU,OAAO,CAAC;;;;;;IAErF,MAAMsC,WAAWlB,eAAemB,oBAAoB,CAACkB;IACrD,MAAMjB,SAASpB,eAAemB,oBAAoB,CAACqB;IAEnD,MAAMnB,OAAO5C,sBAAsB;QACjCyC;QACAE;QACAE,qBAAqB;IACvB;IAEA,qBACE,QAAC9C;QACC+C,WAAW,GAAG3C,UAAU,WAAW,EAAEA,UAAU,mBAAmB,CAAC;QACnE4C,MAAMH,KAAKG,IAAI;QACfvC,MAAMA;QACNwC,OAAO;YAAEA,OAAOzC,MAAMyC,KAAK;YAAEvC;QAAO;QACpCC,cAAcA;QACduC,IAAIL,KAAKK,EAAE;;;;;;AAGjB;AAEA,MAAMZ,2BAA2B,CAAC,EAChC9B,KAAK,EACLC,IAAI,EACJC,MAAM,EACNE,iBAAiB,EACjBO,WAAW,EACXC,UAAU,EACVP,GAAG,EACH0B,WAAW,KAAK,EAChBC,KAAK,EACLL,KAAK,EAYN;IACC,IAAI8B,YAA2B;IAC/B,IAAI1B,UAAU;QACZ,MAAM2B,mBAAmBrD,IAAIc,OAAO,CAACwC,WAAW,CAAC/C,WAAW,CAACQ,MAAM;QACnEqC,YAAYC,iBAAiBE,MAAM,EAAEC,WACjCtE,eAAemE,iBAAiBE,MAAM,CAACC,QAAQ,EAAE5D,QACjDyD,iBAAiBI,IAAI;IAC3B;IAEA,qBACE,QAACC;QACCxB,WAAW,GAAG3C,WAAW;QACzBoE,qBAAkB;QAClBC,WACEtD,cACI,AAACgB,MAAoDA,KAAK,CAACuC,EAAE,GAC7D,AAACvC,MAAqBuC,EAAE;QAE9BC,oBAAkBvD;;YAEjB6C,2BACC,QAACW;gBAAK7B,WAAW,GAAG3C,UAAU,MAAM,CAAC;gBAAEoE,qBAAkB;0BACtDP;;;;;;0BAGL,QAACY;gBAAO9B,WAAW,GAAG3C,UAAU,MAAM,CAAC;gBAAEoE,qBAAkB;0BACxDhC;;;;;;;;;;;;AAIT"}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss

@@ -0,0 +1,91 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .relationship-diff-container .field-diff-content {
+    padding: 0;
+    background: unset;
+  }
+
+  .relationship-diff-container--hasOne {
+    .relationship-diff {
+      min-width: 100%;
+      max-width: fit-content;
+    }
+  }
+
+  .relationship-diff-container--hasMany .field-diff-content {
+    background: var(--theme-elevation-50);
+    padding: 10px;
+
+    .html-diff {
+      display: flex;
+      min-width: 0;
+      max-width: max-content;
+      flex-wrap: wrap;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    .relationship-diff {
+      padding: calc(var(--base) * 0.15) calc(var(--base) * 0.3);
+    }
+  }
+
+  .relationship-diff {
+    @extend %body;
+    display: flex;
+    align-items: center;
+    border-radius: $style-radius-s;
+    border: 1px solid var(--theme-elevation-150);
+    position: relative;
+    font-family: var(--font-body);
+    max-height: calc(var(--base) * 3);
+    padding: calc(var(--base) * 0.35);
+
+    &[data-match-type='create'] {
+      border-color: var(--diff-create-pill-border);
+      color: var(--diff-create-parent-color);
+
+      * {
+        color: var(--diff-create-parent-color);
+      }
+    }
+
+    &[data-match-type='delete'] {
+      border-color: var(--diff-delete-pill-border);
+      color: var(--diff-delete-parent-color);
+      background-color: var(--diff-delete-pill-bg);
+      text-decoration-line: none !important;
+
+      * {
+        color: var(--diff-delete-parent-color);
+        text-decoration-line: none;
+      }
+
+      .relationship-diff__info {
+        text-decoration-line: line-through;
+      }
+    }
+
+    &__info {
+      font-weight: 500;
+    }
+
+    &__pill {
+      border-radius: $style-radius-s;
+      margin: 0 calc(var(--base) * 0.4) 0 calc(var(--base) * 0.2);
+      padding: 0 calc(var(--base) * 0.1);
+      background-color: var(--theme-elevation-150);
+      color: var(--theme-elevation-750);
+    }
+
+    &[data-match-type='create'] .relationship-diff__pill {
+      background-color: var(--diff-create-parent-bg);
+      color: var(--diff-create-pill-color);
+    }
+
+    &[data-match-type='delete'] .relationship-diff__pill {
+      background-color: var(--diff-delete-parent-bg);
+      color: var(--diff-delete-pill-color);
+    }
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Row/index.js

@@ -1,17 +1,23 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js';
 const baseClass = 'row-diff';
-export const Row = ({
-  baseVersionField
-}) => {
-  return /*#__PURE__*/_jsx("div", {
-    className: baseClass,
-    children: /*#__PURE__*/_jsx(RenderVersionFieldsToDiff, {
-      versionFields: baseVersionField.fields
-    })
-  });
+export const Row = ({ baseVersionField })=>{
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxDEV(RenderVersionFieldsToDiff, {
+            versionFields: baseVersionField.fields
+        }, void 0, false, {
+            fileName: "src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx",
+            lineNumber: 13,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx",
+        lineNumber: 12,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map