@payloadcms/ui 3.35.0-internal.5e55452 → 3.35.0-internal.b3d367c

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

@@ -1,6 +1,5 @@
 import type { SanitizedCollectionConfig } from 'payload';
 import React from 'react';
-import './index.scss';
 export type Props = {
     readonly collectionSlug: SanitizedCollectionConfig['slug'];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,OAAO,KAAyB,MAAM,OAAO,CAAA;AAS7C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,OAAO,KAAyB,MAAM,OAAO,CAAA;AAO7C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -4,14 +4,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared';
 import React, { useId, useMemo } from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
-import { PlusIcon } from '../../icons/Plus/index.js';
-import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTableColumns } from '../../providers/TableColumns/index.js';
-import { DraggableSortable } from '../DraggableSortable/index.js';
-import { Pill } from '../Pill/index.js';
-import './index.scss';
-const baseClass = 'column-selector';
+import { PillSelector } from '../PillSelector/index.js';
 export const ColumnSelector = ({
   collectionSlug
 }) => {
@@ -23,43 +18,45 @@ export const ColumnSelector = ({
   const uuid = useId();
   const editDepth = useEditDepth();
   const filteredColumns = useMemo(() => columns.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [columns]);
-  if (!columns) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(DraggableSortable, {
-    className: baseClass,
-    ids: filteredColumns.map(col_0 => col_0?.accessor),
-    onDragEnd: ({
-      moveFromIndex,
-      moveToIndex
-    }) => {
-      void moveColumn({
-        fromIndex: moveFromIndex,
-        toIndex: moveToIndex
-      });
-    },
-    children: filteredColumns.map((col_1, i) => {
+  const pills = useMemo(() => {
+    return filteredColumns ? filteredColumns.map(col_0 => {
       const {
         accessor,
         active,
         field
-      } = col_1;
-      return /*#__PURE__*/_jsx(Pill, {
-        alignIcon: "left",
-        "aria-checked": active,
-        className: [`${baseClass}__column`, active && `${baseClass}__column--active`].filter(Boolean).join(' '),
-        draggable: true,
-        icon: active ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
-        id: accessor,
-        onClick: () => {
-          void toggleColumn(accessor);
-        },
-        children: col_1.CustomLabel ?? /*#__PURE__*/_jsx(FieldLabel, {
+      } = col_0;
+      return {
+        name: accessor,
+        key: `${collectionSlug}-${field && 'name' in field ? field?.name : uuid}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
+        Label: /*#__PURE__*/_jsx(FieldLabel, {
           label: field && 'label' in field && field.label,
           unstyled: true
-        })
-      }, `${collectionSlug}-${field && 'name' in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
-    })
+        }),
+        selected: active
+      };
+    }) : null;
+  }, [collectionSlug, editDepth, filteredColumns, uuid]);
+  if (!pills) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(PillSelector, {
+    draggable: {
+      onDragEnd: ({
+        moveFromIndex,
+        moveToIndex
+      }) => {
+        void moveColumn({
+          fromIndex: moveFromIndex,
+          toIndex: moveToIndex
+        });
+      }
+    },
+    onClick: ({
+      pill
+    }) => {
+      void toggleColumn(pill.name);
+    },
+    pills: pills
   });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","PlusIcon","XIcon","useEditDepth","useTableColumns","DraggableSortable","Pill","baseClass","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","_jsx","className","ids","map","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","active","alignIcon","Boolean","join","draggable","icon","id","onClick","CustomLabel","label","unstyled","name"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  if (!columns) {\n    return null\n  }\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        void moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        const { accessor, active, field } = col\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${field && 'name' in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              void toggleColumn(accessor)\n            }}\n          >\n            {col.CustomLabel ?? (\n              <FieldLabel label={field && 'label' in field && field.label} unstyled />\n            )}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGR,eAAA;EAE9C,MAAMS,IAAA,GAAOf,KAAA;EACb,MAAMgB,SAAA,GAAYX,YAAA;EAElB,MAAMY,eAAA,GAAkBhB,OAAA,CACtB,MACEW,OAAA,CAAQM,MAAM,CACXC,GAAA,IACC,EAAEtB,uBAAA,CAAwBsB,GAAA,CAAIC,KAAK,KAAK,CAACtB,SAAA,CAAUqB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,IAAI,CAACA,OAAA,EAAS;IACZ,OAAO;EACT;EAEA,oBACEW,IAAA,CAAChB,iBAAA;IACCiB,SAAA,EAAWf,SAAA;IACXgB,GAAA,EAAKR,eAAA,CAAgBS,GAAG,CAAEP,KAAA,IAAQA,KAAA,EAAKQ,QAAA;IACvCC,SAAA,EAAWA,CAAC;MAAEC,aAAa;MAAEC;IAAW,CAAE;MACxC,KAAKjB,UAAA,CAAW;QACdkB,SAAA,EAAWF,aAAA;QACXG,OAAA,EAASF;MACX;IACF;cAECb,eAAA,CAAgBS,GAAG,CAAC,CAACP,KAAA,EAAKc,CAAA;MACzB,MAAM;QAAEN,QAAQ;QAAEO,MAAM;QAAEd;MAAK,CAAE,GAAGD,KAAA;MAEpC,oBACEI,IAAA,CAACf,IAAA;QACC2B,SAAA,EAAU;QACV,gBAAcD,MAAA;QACdV,SAAA,EAAW,CAAC,GAAGf,SAAA,UAAmB,EAAEyB,MAAA,IAAU,GAAGzB,SAAA,kBAA2B,CAAC,CAC1ES,MAAM,CAACkB,OAAA,EACPC,IAAI,CAAC;QACRC,SAAS;QACTC,IAAA,EAAML,MAAA,gBAASX,IAAA,CAACnB,KAAA,qBAAWmB,IAAA,CAACpB,QAAA;QAC5BqC,EAAA,EAAIb,QAAA;QAEJc,OAAA,EAASA,CAAA;UACP,KAAK3B,YAAA,CAAaa,QAAA;QACpB;kBAECR,KAAA,CAAIuB,WAAW,iBACdnB,IAAA,CAACrB,UAAA;UAAWyC,KAAA,EAAOvB,KAAA,IAAS,WAAWA,KAAA,IAASA,KAAA,CAAMuB,KAAK;UAAEC,QAAQ;;SANlE,GAAGjC,cAAA,IAAkBS,KAAA,IAAS,UAAUA,KAAA,GAAQA,KAAA,EAAOyB,IAAA,GAAOZ,CAAA,GAAIjB,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;IAUvH;;AAGN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","useEditDepth","useTableColumns","PillSelector","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","pills","map","accessor","active","name","key","Label","_jsx","label","unstyled","selected","draggable","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","onClick","pill"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { PillSelector, type SelectablePill } from '../PillSelector/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  const pills: SelectablePill[] = useMemo(() => {\n    return filteredColumns\n      ? filteredColumns.map((col) => {\n          const { accessor, active, field } = col\n\n          return {\n            name: accessor,\n            key: `${collectionSlug}-${field && 'name' in field ? field?.name : uuid}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n            Label: <FieldLabel label={field && 'label' in field && field.label} unstyled />,\n            selected: active,\n          } as SelectablePill\n        })\n      : null\n  }, [collectionSlug, editDepth, filteredColumns, uuid])\n\n  if (!pills) {\n    return null\n  }\n\n  return (\n    <PillSelector\n      draggable={{\n        onDragEnd: ({ moveFromIndex, moveToIndex }) => {\n          void moveColumn({\n            fromIndex: moveFromIndex,\n            toIndex: moveToIndex,\n          })\n        },\n      }}\n      onClick={({ pill }) => {\n        void toggleColumn(pill.name)\n      }}\n      pills={pills}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAA6B;AAMlD,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGN,eAAA;EAE9C,MAAMO,IAAA,GAAOX,KAAA;EACb,MAAMY,SAAA,GAAYT,YAAA;EAElB,MAAMU,eAAA,GAAkBZ,OAAA,CACtB,MACEO,OAAA,CAAQM,MAAM,CACXC,GAAA,IACC,EAAElB,uBAAA,CAAwBkB,GAAA,CAAIC,KAAK,KAAK,CAAClB,SAAA,CAAUiB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,MAAMW,KAAA,GAA0BlB,OAAA,CAAQ;IACtC,OAAOY,eAAA,GACHA,eAAA,CAAgBO,GAAG,CAAEL,KAAA;MACnB,MAAM;QAAEM,QAAQ;QAAEC,MAAM;QAAEN;MAAK,CAAE,GAAGD,KAAA;MAEpC,OAAO;QACLQ,IAAA,EAAMF,QAAA;QACNG,GAAA,EAAK,GAAGjB,cAAA,IAAkBS,KAAA,IAAS,UAAUA,KAAA,GAAQA,KAAA,EAAOO,IAAA,GAAOZ,IAAA,GAAOC,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;QACpHc,KAAA,eAAOC,IAAA,CAACxB,UAAA;UAAWyB,KAAA,EAAOX,KAAA,IAAS,WAAWA,KAAA,IAASA,KAAA,CAAMW,KAAK;UAAEC,QAAQ;;QAC5EC,QAAA,EAAUP;MACZ;IACF,KACA;EACN,GAAG,CAACf,cAAA,EAAgBK,SAAA,EAAWC,eAAA,EAAiBF,IAAA,CAAK;EAErD,IAAI,CAACQ,KAAA,EAAO;IACV,OAAO;EACT;EAEA,oBACEO,IAAA,CAACrB,YAAA;IACCyB,SAAA,EAAW;MACTC,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxC,KAAKxB,UAAA,CAAW;UACdyB,SAAA,EAAWF,aAAA;UACXG,OAAA,EAASF;QACX;MACF;IACF;IACAG,OAAA,EAASA,CAAC;MAAEC;IAAI,CAAE;MAChB,KAAK3B,YAAA,CAAa2B,IAAA,CAAKd,IAAI;IAC7B;IACAJ,KAAA,EAAOA;;AAGb","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+import type { LabelFunction, StaticLabel } from 'payload';
+import './index.scss';
+import { type I18nClient } from '@payloadcms/translations';
+export declare const FieldDiffContainer: React.FC<{
+    className?: string;
+    From: React.ReactNode;
+    i18n: I18nClient;
+    label: {
+        label?: false | LabelFunction | StaticLabel;
+        locale?: string;
+    };
+    nestingLevel?: number;
+    To: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,cAAc,CAAA;AAErB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAM1E,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CA2CA,CAAA"}

package/dist/elements/FieldDiffContainer/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import { getTranslation } from '@payloadcms/translations';
+import { FieldDiffLabel } from '../FieldDiffLabel/index.js';
+const baseClass = 'field-diff';
+export const FieldDiffContainer = args => {
+  const {
+    className,
+    From,
+    i18n,
+    label: {
+      label,
+      locale
+    },
+    nestingLevel = 0,
+    To
+  } = args;
+  return /*#__PURE__*/_jsxs("div", {
+    className: `${baseClass}${className ? ` ${className}` : ''} nested-level-${nestingLevel}`,
+    style: nestingLevel ? {
+      // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
+      '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2px  )))`
+    } : {
+      '--left-offset': '50%'
+    },
+    children: [/*#__PURE__*/_jsxs(FieldDiffLabel, {
+      children: [locale && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__locale-label`,
+        children: locale
+      }), typeof label !== 'function' && getTranslation(label || '', i18n)]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}-container${className ? ` ${className}` : ''}`,
+      style: nestingLevel ? {
+        gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`
+      } : undefined,
+      children: [From, To]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","FieldDiffLabel","baseClass","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","style","_jsx","gridTemplateColumns","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from 'payload'\n\nimport './index.scss'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  return (\n    <div\n      className={`${baseClass}${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      style={\n        nestingLevel\n          ? ({\n              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns\n              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2px  )))`,\n            } as React.CSSProperties)\n          : ({\n              '--left-offset': '50%',\n            } as React.CSSProperties)\n      }\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {typeof label !== 'function' && getTranslation(label || '', i18n)}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-container${className ? ` ${className}` : ''}`}\n        style={\n          nestingLevel\n            ? {\n                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,\n              }\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAEhD,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAUPC,IAAA;EACJ,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,KAAA,EAAO;MAAEA,KAAK;MAAEC;IAAM,CAAE;IACxBC,YAAA,GAAe,CAAC;IAChBC;EAAE,CACH,GAAGP,IAAA;EAEJ,oBACEQ,KAAA,CAAC;IACCP,SAAA,EAAW,GAAGH,SAAA,GAAYG,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;IACzFG,KAAA,EACEH,YAAA,GACK;MACC;MACA,iBAAiB,gBAAgBA,YAAA;IACnC,IACC;MACC,iBAAiB;IACnB;4BAGNE,KAAA,CAACX,cAAA;iBACEQ,MAAA,iBAAUK,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,gBAAyB;kBAAGO;UAC1D,OAAOD,KAAA,KAAU,cAAcR,cAAA,CAAeQ,KAAA,IAAS,IAAID,IAAA;qBAE9DK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGH,SAAA,aAAsBG,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,IAAI;MACtEQ,KAAA,EACEH,YAAA,GACI;QACEK,mBAAA,EAAqB;MACvB,IACAC,SAAA;iBAGLV,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}

package/dist/elements/FieldDiffContainer/index.scss

@@ -0,0 +1,42 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .field-diff {
+    position: relative;
+
+    &__locale-label {
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+      background: var(--theme-elevation-100);
+      padding: calc(var(--base) * 0.25);
+      // border-radius: $style-radius-m;
+    }
+
+    // Vertical separator line - not needed anymore, as the parent version view container adds a vertical line that spans the entire height of the container.
+    /*
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: var(--left-offset);
+      width: 1px;
+      background-color: var(--theme-elevation-100);
+      transform: translateX(-50%); // Center the line
+    }*/
+
+    &-container {
+      display: grid;
+      // Need to use 50% 50% so that we can apply overflow-x without the column shrinking to the content width.
+      // Need -base(0.5) to enure the gap is center aligned - this is required when using 50% over 1fr.
+      grid-template-columns: calc(50% - base(0.5)) calc(50% - base(0.5));
+      gap: base(1);
+      background: var(--theme-elevation-50);
+      padding: base(0.5);
+    }
+  }
+}

package/dist/elements/FieldDiffLabel/index.scss

@@ -1,6 +1,6 @@
 @layer payload-default {
   .field-diff-label {
     margin-bottom: calc(var(--base) * 0.25);
-    font-weight: 600;
+    font-weight: 550;
   }
 }

package/dist/elements/HTMLDiff/colors.scss

@@ -0,0 +1,35 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-600);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-800);
+    --diff-delete-link-color: var(--theme-error-600);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-600);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-800);
+    --diff-create-link-color: var(--theme-success-600);
+  }
+
+  html[data-theme='dark'] {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-650);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-900);
+    --diff-delete-link-color: var(--theme-error-750);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-650);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-900);
+    --diff-create-link-color: var(--theme-success-750);
+  }
+}

package/dist/elements/HTMLDiff/diff/index.d.ts

@@ -0,0 +1,75 @@
+export interface HtmlDiffOptions {
+    /**
+     * The classNames for wrapper DOM.
+     * Use this to configure your own styles without importing the built-in CSS file
+     */
+    classNames?: Partial<{
+        createBlock?: string;
+        createInline?: string;
+        deleteBlock?: string;
+        deleteInline?: string;
+    }>;
+    /**
+     * @defaultValue 1000
+     */
+    greedyBoundary?: number;
+    /**
+     * When greedyMatch is enabled, if the length of the sub-tokens exceeds greedyBoundary,
+     * we will use the matched sub-tokens that are sufficiently good, even if they are not optimal, to enhance performance.
+     * @defaultValue true
+     */
+    greedyMatch?: boolean;
+    /**
+     * Determine the minimum threshold for calculating common sub-tokens.
+     * You may adjust it to a value larger than 2, but not lower, due to the potential inclusion of HTML tags in the count.
+     * @defaultValue 2
+     */
+    minMatchedSize?: number;
+    /**
+     * Whether to tokenize by character or by word.
+     * @defaultValue false
+     */
+    tokenizeByCharacter?: boolean;
+}
+export declare class HtmlDiff {
+    private readonly config;
+    private leastCommonLength;
+    private readonly matchedBlockList;
+    private readonly newTokens;
+    private readonly oldTokens;
+    private readonly operationList;
+    private sideBySideContents?;
+    private unifiedContent?;
+    constructor(oldHtml: string, newHtml: string, { classNames, greedyBoundary, greedyMatch, minMatchedSize, tokenizeByCharacter, }?: HtmlDiffOptions);
+    private computeBestMatchedBlock;
+    private computeMatchedBlockList;
+    private dressUpBlockTag;
+    private dressUpDiffContent;
+    private dressUpInlineTag;
+    private dressupMatchEnabledHtmlTag;
+    private dressUpText;
+    /**
+     * Generates a list of token entries that are matched between the old and new HTML. This list will not
+     * include token ranges that differ.
+     */
+    private getMatchedBlockList;
+    private getOperationList;
+    private slideBestMatchedBlock;
+    /**
+     * Convert HTML to tokens at character level, preserving HTML tags as complete tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>", " ", "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", " ", "</a>"]
+     */
+    private tokenizeByCharacter;
+    /**
+     * convert HTML to tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>"," ", "Hello", " ", "World", " ", "</a>"]
+     */
+    private tokenizeByWord;
+    getSideBySideContents(): string[];
+    getUnifiedContent(): string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HTMLDiff/diff/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB;IA4CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE;IAiEjC,iBAAiB,IAAI,MAAM;CA4HnC"}