@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5f0cd13

package/dist/elements/Gutter/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'gutter';
 export const Gutter = props => {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}

package/dist/elements/HTMLDiff/colors.css

@@ -0,0 +1,17 @@
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
+    --diff-delete-pill-color: var(--color-text-danger);
+    --diff-delete-pill-border: var(--color-border-danger);
+    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
+    --diff-delete-parent-color: var(--color-text-danger);
+    --diff-delete-link-color: var(--color-text-danger);
+
+    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
+    --diff-create-pill-color: var(--color-text-brand);
+    --diff-create-pill-border: var(--color-border-brand);
+    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
+    --diff-create-parent-color: var(--color-text-brand);
+    --diff-create-link-color: var(--color-text-brand);
+  }
+}

package/dist/elements/HTMLDiff/index.css

@@ -0,0 +1,170 @@
+@layer payload-default {
+  .html-diff {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .html-diff-no-value {
+    color: var(--color-text-tertiary);
+  }
+
+  .html-diff p {
+    margin: 0;
+    align-content: center;
+  }
+
+  .html-diff pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Apply background color to the whole field when it has diffs */
+  .html-diff:has([data-match-type='create']) {
+    background-color: var(--diff-create-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff:has([data-match-type='delete']) {
+    background-color: var(--diff-delete-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff li::marker {
+    color: var(--color-text);
+  }
+
+  .html-diff li:has(> [data-match-type='create'])::marker {
+    color: var(--diff-create-pill-color);
+  }
+
+  .html-diff li:has(> [data-match-type='delete'])::marker {
+    color: var(--diff-delete-pill-color);
+  }
+
+  .html-diff
+    [data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-pill-color);
+    text-decoration-color: var(--diff-delete-pill-color);
+    text-decoration-line: line-through;
+    background-color: var(--diff-delete-pill-bg);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    text-decoration-thickness: var(--stroke-width-small);
+    vertical-align: baseline;
+  }
+
+  .html-diff
+    a[data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-link-color);
+  }
+
+  .html-diff
+    a[data-match-type='create']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-create-link-color);
+  }
+
+  .html-diff
+    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    background-color: var(--diff-create-pill-bg);
+    color: var(--diff-create-pill-color);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    vertical-align: baseline;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper {
+    display: inline-flex;
+  }
+
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    display: flex;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper,
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    position: relative;
+    align-items: center;
+    flex-direction: row;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  @media (max-width: 768px) {
+    .html-diff:has([data-match-type='create']),
+    .html-diff:has([data-match-type='delete']) {
+      margin-block: 0;
+      padding-block: 0;
+      background-color: transparent;
+    }
+
+    .html-diff {
+      justify-content: center;
+    }
+
+    .html-diff p {
+      align-content: center;
+    }
+
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        top: calc(var(--spacer-1) * -1);
+        bottom: calc(var(--spacer-1) * -1);
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import './index.scss';
+import './colors.css';
+import './index.css';
 export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js';
 export declare const getHTMLDiffComponents: ({ fromHTML, postProcess, toHTML, tokenizeByCharacter, }: {
     fromHTML: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,4DAK/B;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CA4BpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AACrB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,GAAI,yDAKnC;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CA4BpB,CAAA"}

package/dist/elements/HTMLDiff/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { HtmlDiff } from './diff/index.js';
-import './index.scss';
+import './colors.css';
+import './index.css';
 export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js';
 const baseClass = 'html-diff';
 export const getHTMLDiffComponents = ({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","HtmlDiff","escapeDiffHTML","unescapeDiffHTML","baseClass","getHTMLDiffComponents","fromHTML","postProcess","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './index.scss'\n\nexport { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  postProcess,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  /**\n   * Optional function to transform the HTML output after diffing.\n   * Useful for converting escape sequences to HTML entities.\n   */\n  postProcess?: (html: string) => string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  let [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  if (postProcess) {\n    oldHTML = postProcess(oldHTML)\n    newHTML = postProcess(newHTML)\n  }\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,SAASC,cAAc,EAAEC,gBAAgB,QAAQ;AAEjD,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC;AAAmB,CAUpB;EAIC,MAAMC,QAAA,GAAW,IAAIT,QAAA,CAASK,QAAA,EAAUE,MAAA,EAAQ;IAC9CC;EACF;EAEA,IAAI,CAACE,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEvD,IAAIN,WAAA,EAAa;IACfI,OAAA,GAAUJ,WAAA,CAAYI,OAAA;IACtBC,OAAA,GAAUL,WAAA,CAAYK,OAAA;EACxB;EAEA,MAAME,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;OAE3C;EAEJ,MAAMQ,EAAA,GAAKP,OAAA,gBACTG,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;OAE3C;EAEJ,OAAO;IAAEE,IAAA;IAAMK;EAAG;AACpB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","HtmlDiff","escapeDiffHTML","unescapeDiffHTML","baseClass","getHTMLDiffComponents","fromHTML","postProcess","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './colors.css'\nimport './index.css'\n\nexport { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  postProcess,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  /**\n   * Optional function to transform the HTML output after diffing.\n   * Useful for converting escape sequences to HTML entities.\n   */\n  postProcess?: (html: string) => string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  let [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  if (postProcess) {\n    oldHTML = postProcess(oldHTML)\n    newHTML = postProcess(newHTML)\n  }\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AACP,OAAO;AAEP,SAASC,cAAc,EAAEC,gBAAgB,QAAQ;AAEjD,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC;AAAmB,CAUpB;EAIC,MAAMC,QAAA,GAAW,IAAIT,QAAA,CAASK,QAAA,EAAUE,MAAA,EAAQ;IAC9CC;EACF;EAEA,IAAI,CAACE,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEvD,IAAIN,WAAA,EAAa;IACfI,OAAA,GAAUJ,WAAA,CAAYI,OAAA;IACtBC,OAAA,GAAUL,WAAA,CAAYK,OAAA;EACxB;EAEA,MAAME,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;OAE3C;EAEJ,MAAMQ,EAAA,GAAKP,OAAA,gBACTG,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;OAE3C;EAEJ,OAAO;IAAEE,IAAA;IAAMK;EAAG;AACpB","ignoreList":[]}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.css

@@ -0,0 +1,62 @@
+@layer payload-default {
+  .hierarchy-column {
+    width: 280px;
+    min-width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--color-border);
+    height: 100%;
+    background: var(--color-bg);
+  }
+
+  .hierarchy-column__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    padding: var(--spacer-1) var(--spacer-3);
+    flex-shrink: 0;
+    margin-bottom: var(--spacer-2);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .hierarchy-column__add-button {
+    flex-shrink: 0;
+  }
+
+  .hierarchy-column__header-checkbox {
+    flex-shrink: 0;
+  }
+
+  .hierarchy-column__header-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    font-weight: 500;
+    color: var(--color-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .hierarchy-column__items {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    margin: 0 var(--spacer-2);
+    gap: var(--spacer-1);
+  }
+
+  .hierarchy-column__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-3);
+  }
+
+  .hierarchy-column__load-more {
+    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
+  }
+}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ColumnProps } from '../types.js';
+import './index.css';
+export declare const Column: React.FC<ColumnProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAQ9C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2FxC,CAAA"}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.js

@@ -0,0 +1,168 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { PlusIcon } from '../../../../icons/Plus/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { Button } from '../../../Button/index.js';
+import { LoadMoreRow } from '../../../LoadMoreRow/index.js';
+import { Spinner } from '../../../Spinner/index.js';
+import { ColumnItem } from '../ColumnItem/index.js';
+import './index.css';
+const baseClass = 'hierarchy-column';
+export const Column = t0 => {
+  const $ = _c(37);
+  const {
+    ancestorsWithSelections,
+    canCreate,
+    collectionLabel,
+    disabled,
+    disabledIds,
+    expandedId,
+    filterByCollection,
+    hasNextPage,
+    isLoading,
+    items,
+    onCreateNew,
+    onExpand,
+    onLoadMore,
+    onSelect,
+    parentId,
+    parentTitle,
+    pathToColumn,
+    selectedIds,
+    totalDocs
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== ancestorsWithSelections || $[1] !== canCreate || $[2] !== collectionLabel || $[3] !== disabled || $[4] !== disabledIds || $[5] !== expandedId || $[6] !== filterByCollection || $[7] !== hasNextPage || $[8] !== isLoading || $[9] !== items || $[10] !== onCreateNew || $[11] !== onExpand || $[12] !== onLoadMore || $[13] !== onSelect || $[14] !== parentId || $[15] !== parentTitle || $[16] !== pathToColumn || $[17] !== selectedIds || $[18] !== t || $[19] !== totalDocs) {
+    const headerTitle = parentTitle || (parentId === null ? t("general:all") : "");
+    let t2;
+    if ($[21] !== items || $[22] !== onSelect || $[23] !== pathToColumn) {
+      t2 = t3 => {
+        const {
+          id
+        } = t3;
+        const item = items.find(i => i.id === id);
+        const fullPath = item ? [...pathToColumn, {
+          id: item.id,
+          title: item.title
+        }] : pathToColumn;
+        onSelect({
+          id,
+          path: fullPath
+        });
+      };
+      $[21] = items;
+      $[22] = onSelect;
+      $[23] = pathToColumn;
+      $[24] = t2;
+    } else {
+      t2 = $[24];
+    }
+    const handleSelect = t2;
+    let t3;
+    if ($[25] !== onCreateNew || $[26] !== parentId) {
+      t3 = () => {
+        onCreateNew({
+          parentId
+        });
+      };
+      $[25] = onCreateNew;
+      $[26] = parentId;
+      $[27] = t3;
+    } else {
+      t3 = $[27];
+    }
+    const handleCreateNew = t3;
+    let t4;
+    if ($[28] !== ancestorsWithSelections || $[29] !== disabled || $[30] !== disabledIds || $[31] !== expandedId || $[32] !== filterByCollection || $[33] !== handleSelect || $[34] !== onExpand || $[35] !== selectedIds) {
+      t4 = item_0 => _jsx(ColumnItem, {
+        disabled: Boolean(disabled || disabledIds?.has(item_0.id)),
+        filterByCollection,
+        hasSelectedDescendants: ancestorsWithSelections.has(item_0.id),
+        isExpanded: expandedId === item_0.id,
+        isSelected: selectedIds.has(item_0.id),
+        item: item_0,
+        onExpand,
+        onSelect: handleSelect
+      }, String(item_0.id));
+      $[28] = ancestorsWithSelections;
+      $[29] = disabled;
+      $[30] = disabledIds;
+      $[31] = expandedId;
+      $[32] = filterByCollection;
+      $[33] = handleSelect;
+      $[34] = onExpand;
+      $[35] = selectedIds;
+      $[36] = t4;
+    } else {
+      t4 = $[36];
+    }
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [_jsx("span", {
+          className: `${baseClass}__header-title`,
+          children: headerTitle
+        }), canCreate && _jsxs(Button, {
+          buttonStyle: "ghost",
+          className: `${baseClass}__add-button`,
+          disabled,
+          icon: _jsx(PlusIcon, {
+            size: 16
+          }),
+          iconPosition: "left",
+          margin: false,
+          onClick: handleCreateNew,
+          size: "medium",
+          children: ["New ", collectionLabel]
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__items`,
+        children: [items.map(t4), isLoading && _jsx("div", {
+          className: `${baseClass}__loading`,
+          children: _jsx(Spinner, {
+            loadingText: null,
+            size: "sm"
+          })
+        }), !disabled && !isLoading && totalDocs > 0 && _jsx(LoadMoreRow, {
+          className: `${baseClass}__load-more`,
+          currentCount: items.length,
+          hasMore: hasNextPage,
+          onLoadMore,
+          totalDocs
+        })]
+      })]
+    });
+    $[0] = ancestorsWithSelections;
+    $[1] = canCreate;
+    $[2] = collectionLabel;
+    $[3] = disabled;
+    $[4] = disabledIds;
+    $[5] = expandedId;
+    $[6] = filterByCollection;
+    $[7] = hasNextPage;
+    $[8] = isLoading;
+    $[9] = items;
+    $[10] = onCreateNew;
+    $[11] = onExpand;
+    $[12] = onLoadMore;
+    $[13] = onSelect;
+    $[14] = parentId;
+    $[15] = parentTitle;
+    $[16] = pathToColumn;
+    $[17] = selectedIds;
+    $[18] = t;
+    $[19] = totalDocs;
+    $[20] = t1;
+  } else {
+    t1 = $[20];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","PlusIcon","useTranslation","Button","LoadMoreRow","Spinner","ColumnItem","baseClass","Column","t0","$","ancestorsWithSelections","canCreate","collectionLabel","disabled","disabledIds","expandedId","filterByCollection","hasNextPage","isLoading","items","onCreateNew","onExpand","onLoadMore","onSelect","parentId","parentTitle","pathToColumn","selectedIds","totalDocs","t","t1","headerTitle","t2","t3","id","item","find","i","fullPath","title","path","handleSelect","handleCreateNew","t4","item_0","_jsx","Boolean","has","hasSelectedDescendants","isExpanded","isSelected","String","_jsxs","className","children","buttonStyle","icon","size","margin","onClick","map","loadingText","currentCount","length","hasMore"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ColumnProps } from '../types.js'\n\nimport { PlusIcon } from '../../../../icons/Plus/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { LoadMoreRow } from '../../../LoadMoreRow/index.js'\nimport { Spinner } from '../../../Spinner/index.js'\nimport { ColumnItem } from '../ColumnItem/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column'\n\nexport const Column: React.FC<ColumnProps> = ({\n  ancestorsWithSelections,\n  canCreate,\n  collectionLabel,\n  disabled,\n  disabledIds,\n  expandedId,\n  filterByCollection,\n  hasNextPage,\n  isLoading,\n  items,\n  onCreateNew,\n  onExpand,\n  onLoadMore,\n  onSelect,\n  parentId,\n  parentTitle,\n  pathToColumn,\n  selectedIds,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n\n  const headerTitle = parentTitle || (parentId === null ? t('general:all') : '')\n\n  const handleSelect = useCallback(\n    ({ id }: { id: number | string }) => {\n      const item = items.find((i) => i.id === id)\n      const fullPath = item ? [...pathToColumn, { id: item.id, title: item.title }] : pathToColumn\n      onSelect({ id, path: fullPath })\n    },\n    [items, onSelect, pathToColumn],\n  )\n\n  const handleCreateNew = useCallback(() => {\n    onCreateNew({ parentId })\n  }, [onCreateNew, parentId])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__header-title`}>{headerTitle}</span>\n        {canCreate && (\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__add-button`}\n            disabled={disabled}\n            icon={<PlusIcon size={16} />}\n            iconPosition=\"left\"\n            margin={false}\n            onClick={handleCreateNew}\n            size=\"medium\"\n          >\n            New {collectionLabel}\n          </Button>\n        )}\n      </div>\n\n      <div className={`${baseClass}__items`}>\n        {items.map((item) => (\n          <ColumnItem\n            disabled={Boolean(disabled || disabledIds?.has(item.id))}\n            filterByCollection={filterByCollection}\n            hasSelectedDescendants={ancestorsWithSelections.has(item.id)}\n            isExpanded={expandedId === item.id}\n            isSelected={selectedIds.has(item.id)}\n            item={item}\n            key={String(item.id)}\n            onExpand={onExpand}\n            onSelect={handleSelect}\n          />\n        ))}\n\n        {isLoading && (\n          <div className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"sm\" />\n          </div>\n        )}\n\n        {!disabled && !isLoading && totalDocs > 0 && (\n          <LoadMoreRow\n            className={`${baseClass}__load-more`}\n            currentCount={items.length}\n            hasMore={hasNextPage}\n            onLoadMore={onLoadMore}\n            totalDocs={totalDocs}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,SAASC,OAAO,QAAQ;AACxB,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAgCC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,uBAAA;IAAAC,SAAA;IAAAC,eAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,kBAAA;IAAAC,WAAA;IAAAC,SAAA;IAAAC,KAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC;EAAA,IAAApB,EAoB7C;EACC;IAAAqB;EAAA,IAAc5B,cAAA;EAAA,IAAA6B,EAAA;EAAA,IAAArB,CAAA,QAAAC,uBAAA,IAAAD,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAG,eAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAK,WAAA,IAAAL,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,kBAAA,IAAAP,CAAA,QAAAQ,WAAA,IAAAR,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAU,KAAA,IAAAV,CAAA,SAAAW,WAAA,IAAAX,CAAA,SAAAY,QAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAc,QAAA,IAAAd,CAAA,SAAAe,QAAA,IAAAf,CAAA,SAAAgB,WAAA,IAAAhB,CAAA,SAAAiB,YAAA,IAAAjB,CAAA,SAAAkB,WAAA,IAAAlB,CAAA,SAAAoB,CAAA,IAAApB,CAAA,SAAAmB,SAAA;IAEd,MAAAG,WAAA,GAAoBN,WAAA,KAAgBD,QAAA,SAAa,GAAOK,CAAA,CAAE,iBAAiB,EAAC;IAAA,IAAAG,EAAA;IAAA,IAAAvB,CAAA,SAAAU,KAAA,IAAAV,CAAA,SAAAc,QAAA,IAAAd,CAAA,SAAAiB,YAAA;MAG1EM,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAA+B;QAC9B,MAAAE,IAAA,GAAahB,KAAA,CAAAiB,IAAA,CAAAC,CAAA,IAAkBA,CAAA,CAAAH,EAAA,KAASA,EAAA;QACxC,MAAAI,QAAA,GAAiBH,IAAA,OAAWT,YAAA;UAAAQ,EAAA,EAAoBC,IAAA,CAAAD,EAAA;UAAAK,KAAA,EAAgBJ,IAAA,CAAAI;QAAA,KAAgBb,YAAA;QAChFH,QAAA;UAAAW,EAAA;UAAAM,IAAA,EAAqBF;QAAA,CAAS;MAAA;MAChC7B,CAAA,OAAAU,KAAA;MAAAV,CAAA,OAAAc,QAAA;MAAAd,CAAA,OAAAiB,YAAA;MAAAjB,CAAA,OAAAuB,EAAA;IAAA;MAAAA,EAAA,GAAAvB,CAAA;IAAA;IALF,MAAAgC,YAAA,GAAqBT,EAMY;IAAA,IAAAC,EAAA;IAAA,IAAAxB,CAAA,SAAAW,WAAA,IAAAX,CAAA,SAAAe,QAAA;MAGGS,EAAA,GAAAA,CAAA;QAClCb,WAAA;UAAAI;QAAA,CAAuB;MAAA;MACzBf,CAAA,OAAAW,WAAA;MAAAX,CAAA,OAAAe,QAAA;MAAAf,CAAA,OAAAwB,EAAA;IAAA;MAAAA,EAAA,GAAAxB,CAAA;IAAA;IAFA,MAAAiC,eAAA,GAAwBT,EAEE;IAAA,IAAAU,EAAA;IAAA,IAAAlC,CAAA,SAAAC,uBAAA,IAAAD,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAK,WAAA,IAAAL,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAO,kBAAA,IAAAP,CAAA,SAAAgC,YAAA,IAAAhC,CAAA,SAAAY,QAAA,IAAAZ,CAAA,SAAAkB,WAAA;MAuBTgB,EAAA,GAAAC,MAAA,IACTC,IAAA,CAAAxC,UAAA;QAAAQ,QAAA,EACYiC,OAAA,CAAQjC,QAAA,IAAYC,WAAA,EAAAiC,GAAA,CAAiBZ,MAAA,CAAAD,EAAA,CAAO;QAAAlB,kBAAA;QAAAgC,sBAAA,EAE9BtC,uBAAA,CAAAqC,GAAA,CAA4BZ,MAAA,CAAAD,EAAO;QAAAe,UAAA,EAC/ClC,UAAA,KAAeoB,MAAA,CAAAD,EAAO;QAAAgB,UAAA,EACtBvB,WAAA,CAAAoB,GAAA,CAAgBZ,MAAA,CAAAD,EAAO;QAAAC,IAAA,EAC7BA,MAAA;QAAAd,QAAA;QAAAE,QAAA,EAGIkB;MAAA,GAFLU,MAAA,CAAOhB,MAAA,CAAAD,EAAO;MAAAzB,CAAA,OAAAC,uBAAA;MAAAD,CAAA,OAAAI,QAAA;MAAAJ,CAAA,OAAAK,WAAA;MAAAL,CAAA,OAAAM,UAAA;MAAAN,CAAA,OAAAO,kBAAA;MAAAP,CAAA,OAAAgC,YAAA;MAAAhC,CAAA,OAAAY,QAAA;MAAAZ,CAAA,OAAAkB,WAAA;MAAAlB,CAAA,OAAAkC,EAAA;IAAA;MAAAA,EAAA,GAAAlC,CAAA;IAAA;IA5B3BqB,EAAA,GAAAsB,KAAA,CAAC;MAAAC,SAAA,EAAA/C,SAAA;MAAAgD,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA/C,SAAA,UAAsB;QAAAgD,QAAA,GACpCT,IAAA,CAAC;UAAAQ,SAAA,EAAgB,GAAA/C,SAAA,gBAA4B;UAAAgD,QAAA,EAAGvB;QAAA,C,GAC/CpB,SAAA,IACCyC,KAAA,CAAAlD,MAAA;UAAAqD,WAAA,EACc;UAAAF,SAAA,EACD,GAAA/C,SAAA,cAA0B;UAAAO,QAAA;UAAA2C,IAAA,EAE/BX,IAAA,CAAA7C,QAAA;YAAAyD,IAAA;UAAA,C;wBACO;UAAAC,MAAA;UAAAC,OAAA,EAEJjB,eAAA;UAAAe,IAAA,EACJ;UAAAH,QAAA,GACN,QACM1C,eAAA;QAAA,C;UAKXwC,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA/C,SAAA,SAAqB;QAAAgD,QAAA,GAClCnC,KAAA,CAAAyC,GAAA,CAAUjB,EAQY,GAMtBzB,SAAA,IACC2B,IAAA,CAAC;UAAAQ,SAAA,EAAe,GAAA/C,SAAA,WAAuB;UAAAgD,QAAA,EACrCT,IAAA,CAAAzC,OAAA;YAAAyD,WAAA;YAAAJ,IAAA,EAAiC;UAAA,C;YAIpC,CAAC5C,QAAA,KAAaK,SAAA,IAAaU,SAAA,IAAY,IACtCiB,IAAA,CAAA1C,WAAA;UAAAkD,SAAA,EACa,GAAA/C,SAAA,aAAyB;UAAAwD,YAAA,EACtB3C,KAAA,CAAA4C,MAAA;UAAAC,OAAA,EACL/C,WAAA;UAAAK,UAAA;UAAAM;QAAA,C;;;;;;;;;;;;;;;;;;;;;;;;;;;SA5CjBE,E;CAoDJ","ignoreList":[]}

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.css

@@ -0,0 +1,96 @@
+@layer payload-default {
+  .hierarchy-column-item {
+    display: flex;
+    align-items: center;
+    padding: var(--spacer-1) var(--spacer-2);
+    cursor: pointer;
+    transition: background-color 80ms ease;
+    user-select: none;
+    gap: var(--spacer-2-5);
+    border-radius: var(--button-radius);
+
+    &:first-child {
+      margin-top: var(--spacer-1);
+    }
+
+    &:last-child {
+      margin-bottom: var(--spacer-1);
+    }
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+    }
+  }
+
+  .hierarchy-column-item--expanded {
+    background-color: var(--color-bg-tertiary);
+
+    &:hover {
+      background-color: var(--color-bg-tertiary);
+    }
+  }
+
+  .hierarchy-column-item--selected {
+    background-color: var(--color-bg-selected);
+
+    &:hover {
+      background-color: var(--color-bg-selected);
+    }
+
+    &.hierarchy-column-item--expanded {
+      background-color: var(--color-bg-selected);
+    }
+  }
+
+  .hierarchy-column-item--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    .hierarchy-column-item__title {
+      color: var(--color-text-tertiary);
+    }
+  }
+
+  .hierarchy-column-item__checkbox {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    input[type='checkbox'] {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
+
+  .hierarchy-column-item__title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-text);
+    font-weight: 500;
+  }
+
+  .hierarchy-column-item__descendant-indicator {
+    width: var(--spacer-1);
+    height: var(--spacer-1);
+    border-radius: 50%;
+    background-color: var(--color-bg-success);
+    flex-shrink: 0;
+  }
+
+  .hierarchy-column-item__chevron {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-icon-tertiary);
+  }
+}

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ColumnItemProps } from '../types.js';
+import './index.css';
+export declare const ColumnItem: React.FC<ColumnItemProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoGhD,CAAA"}