@payloadcms/ui 3.0.0-beta.11 → 3.0.0-beta.111

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n  const { selectAll, toggleAll } = useSelection()\n  const { i18n } = useTranslation()\n\n  return (\n    <CheckboxInput\n      aria-label={\n        selectAll === SelectAllStatus.None\n          ? i18n.t('general:selectAllRows')\n          : i18n.t('general:deselectAllRows')\n      }\n      checked={\n        selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n      }\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      id=\"select-all\"\n      name=\"select-all\"\n      onToggle={() => toggleAll()}\n      partialChecked={selectAll === SelectAllStatus.Some}\n    />\n  )\n}\n"],"names":["React","CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","selectAll","toggleAll","i18n","aria-label","None","t","checked","AllInPage","AllAvailable","className","join","id","name","onToggle","partialChecked","Some"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IACjC,MAAM,EAAEM,IAAI,EAAE,GAAGL;IAEjB,qBACE,oBAACH;QACCS,cACEH,cAAcL,gBAAgBS,IAAI,GAC9BF,KAAKG,CAAC,CAAC,2BACPH,KAAKG,CAAC,CAAC;QAEbC,SACEN,cAAcL,gBAAgBY,SAAS,IAAIP,cAAcL,gBAAgBa,YAAY;QAEvFC,WAAW;YAACX;YAAW,CAAC,EAAEA,UAAU,UAAU,CAAC;SAAC,CAACY,IAAI,CAAC;QACtDC,IAAG;QACHC,MAAK;QACLC,UAAU,IAAMZ;QAChBa,gBAAgBd,cAAcL,gBAAgBoB,IAAI;;AAGxD,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","$","selectAll","toggleAll","i18n","t0","t1","Symbol","for","t2","_jsx","None","t","checked","AllInPage","AllAvailable","className","join","id","name","onToggle","partialChecked","Some"],"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n  const { selectAll, toggleAll } = useSelection()\n  const { i18n } = useTranslation()\n\n  return (\n    <CheckboxInput\n      aria-label={\n        selectAll === SelectAllStatus.None\n          ? i18n.t('general:selectAllRows')\n          : i18n.t('general:deselectAllRows')\n      }\n      checked={\n        selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n      }\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      id=\"select-all\"\n      name=\"select-all\"\n      onToggle={() => toggleAll()}\n      partialChecked={selectAll === SelectAllStatus.Some}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,EAAEC,YAAY,QAAQ;AAC9C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACjC;IAAAS,SAAA;IAAAC;EAAA,IAAiCN,YAAA;EACjC;IAAAO;EAAA,IAAiBN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAJ,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAE,SAAA;IAAA,IAAAG,EAAA;IAAA,IAAAL,CAAA,QAAAM,MAAA,CAAAC,GAAA;MAYFF,EAAA,IAAAP,SAAA,EAAY,GAAAA,SAAA,YAAwB;MAACE,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IAAA,IAAAQ,EAAA;IAAA,IAAAR,CAAA,QAAAE,SAAA;MAGtCM,EAAA,GAAAA,CAAA,KAAMN,SAAA;MAAAF,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAAQ,EAAA;IAAA;MAAAA,EAAA,GAAAR,CAAA;IAAA;IAZlBI,EAAA,GAAAK,IAAA,CAAAf,aAAA;MAAA,cAEIO,SAAA,KAAAN,eAAA,CAAAe,IAAkC,GAC9BP,IAAA,CAAAQ,CAAA,CAAO,2BACPR,IAAA,CAAAQ,CAAA,CAAO;MAAAC,OAAA,EAGXX,SAAA,KAAAN,eAAA,CAAAkB,SAAuC,IAAIZ,SAAA,KAAAN,eAAA,CAAAmB,YAA0C;MAAAC,SAAA,EAE5EV,EAAqC,CAAAW,IAAA,CAAM;MAAAC,EAAA,EACnD;MAAAC,IAAA,EACE;MAAAC,QAAA,EACKX,EAAM;MAAAY,cAAA,EACAnB,SAAA,KAAAN,eAAA,CAAA0B;IAAkC,C;;;;;;;;SAbpDjB,E;CAgBJ","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useSelection } from '../../providers/Selection/index.js';
+export declare const SelectMany: React.FC<{
+    onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SelectMany/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAIjE,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;CACrE,CAuBA,CAAA"}

package/dist/elements/SelectMany/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useSelection } from '../../providers/Selection/index.js';
+// import { useTranslation } from '../../providers/Translation/index.js'
+import { Pill } from '../Pill/index.js';
+export const SelectMany = props => {
+  const {
+    onClick
+  } = props;
+  const {
+    count,
+    selected
+  } = useSelection();
+  // const { t } = useTranslation()
+  if (!selected || !count) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Pill, {
+    // className={`${baseClass}__toggle`}
+    onClick: () => {
+      if (typeof onClick === 'function') {
+        onClick(selected);
+      }
+    },
+    pillStyle: "white",
+    children: `Select ${count}`
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useSelection","Pill","SelectMany","props","onClick","count","selected","_jsx","pillStyle"],"sources":["../../../src/elements/SelectMany/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelection } from '../../providers/Selection/index.js'\n// import { useTranslation } from '../../providers/Translation/index.js'\nimport { Pill } from '../Pill/index.js'\n\nexport const SelectMany: React.FC<{\n  onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void\n}> = (props) => {\n  const { onClick } = props\n\n  const { count, selected } = useSelection()\n  // const { t } = useTranslation()\n\n  if (!selected || !count) {\n    return null\n  }\n\n  return (\n    <Pill\n      // className={`${baseClass}__toggle`}\n      onClick={() => {\n        if (typeof onClick === 'function') {\n          onClick(selected)\n        }\n      }}\n      pillStyle=\"white\"\n    >\n      {`Select ${count}`}\n    </Pill>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B;AACA,SAASC,IAAI,QAAQ;AAErB,OAAO,MAAMC,UAAA,GAEPC,KAAA;EACJ,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,MAAM;IAAEE,KAAK;IAAEC;EAAQ,CAAE,GAAGN,YAAA;EAC5B;EAEA,IAAI,CAACM,QAAA,IAAY,CAACD,KAAA,EAAO;IACvB,OAAO;EACT;EAEA,oBACEE,IAAA,CAACN,IAAA;IACC;IACAG,OAAA,EAASA,CAAA;MACP,IAAI,OAAOA,OAAA,KAAY,YAAY;QACjCA,OAAA,CAAQE,QAAA;MACV;IACF;IACAE,SAAA,EAAU;cAET,UAAUH,KAAA;;AAGjB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SelectRow/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAW7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SelectRow/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAmB7B,CAAA"}

package/dist/elements/SelectRow/index.js

@@ -1,20 +1,92 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTableCell } from '../../elements/Table/TableCellProvider/index.js';
 import { CheckboxInput } from '../../fields/Checkbox/Input.js';
+import { useAuth } from '../../providers/Auth/index.js';
 import { useSelection } from '../../providers/Selection/index.js';
+import { Locked } from '../Locked/index.js';
+import './index.scss';
 const baseClass = 'select-row';
-export const SelectRow = ()=>{
-    const { selected, setSelection } = useSelection();
-    const { rowData } = useTableCell();
-    return /*#__PURE__*/ React.createElement(CheckboxInput, {
-        checked: selected?.[rowData?.id],
-        className: [
-            baseClass,
-            `${baseClass}__checkbox`
-        ].join(' '),
-        onToggle: ()=>setSelection(rowData.id)
+export const SelectRow = () => {
+  const $ = _c(14);
+  const {
+    user
+  } = useAuth();
+  const {
+    selected,
+    setSelection
+  } = useSelection();
+  const {
+    rowData
+  } = useTableCell();
+  let t0;
+  if ($[0] !== rowData) {
+    t0 = rowData || {};
+    $[0] = rowData;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const {
+    _isLocked,
+    _userEditing
+  } = t0;
+  const documentIsLocked = _isLocked && _userEditing;
+  if (documentIsLocked && _userEditing.id !== user?.id) {
+    let t1;
+    if ($[2] !== _userEditing) {
+      t1 = _jsx(Locked, {
+        user: _userEditing
+      });
+      $[2] = _userEditing;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[4] !== selected || $[5] !== rowData.id) {
+    t1 = selected.get(rowData.id);
+    $[4] = selected;
+    $[5] = rowData.id;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const t2 = Boolean(t1);
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [baseClass, `${baseClass}__checkbox`];
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== setSelection || $[9] !== rowData.id) {
+    t4 = () => setSelection(rowData.id);
+    $[8] = setSelection;
+    $[9] = rowData.id;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t2 || $[12] !== t4) {
+    t5 = _jsx(CheckboxInput, {
+      checked: t2,
+      className: t3.join(" "),
+      onToggle: t4
     });
+    $[11] = t2;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n  const { selected, setSelection } = useSelection()\n  const { rowData } = useTableCell()\n\n  return (\n    <CheckboxInput\n      checked={selected?.[rowData?.id]}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"names":["React","useTableCell","CheckboxInput","useSelection","baseClass","SelectRow","selected","setSelection","rowData","checked","id","className","join","onToggle"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,YAAY,QAAQ,qCAAoC;AAGjE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IACnC,MAAM,EAAEK,OAAO,EAAE,GAAGP;IAEpB,qBACE,oBAACC;QACCO,SAASH,UAAU,CAACE,SAASE,GAAG;QAChCC,WAAW;YAACP;YAAW,CAAC,EAAEA,UAAU,UAAU,CAAC;SAAC,CAACQ,IAAI,CAAC;QACtDC,UAAU,IAAMN,aAAaC,QAAQE,EAAE;;AAG7C,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTableCell","CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","$","user","selected","setSelection","rowData","t0","_isLocked","_userEditing","documentIsLocked","id","t1","_jsx","get","t2","Boolean","t3","Symbol","for","t4","t5","checked","className","join","onToggle"],"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { rowData } = useTableCell()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAAsBA,CAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACjC;IAAAU;EAAA,IAAiBN,OAAA;EACjB;IAAAO,QAAA;IAAAC;EAAA,IAAmCP,YAAA;EACnC;IAAAQ;EAAA,IAAoBX,YAAA;EAAA,IAAAY,EAAA;EAAA,IAAAL,CAAA,QAAAI,OAAA;IACgBC,EAAA,GAAAD,OAAA,MAAY;IAAAJ,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAhD;IAAAM,SAAA;IAAAC;EAAA,IAAoCF,EAAY;EAEhD,MAAAG,gBAAA,GAAyBF,SAAA,IAAaC,YAAA;EAAA,IAElCC,gBAAA,IAAoBD,YAAA,CAAAE,EAAA,KAAoBR,IAAA,EAAAQ,EAAM;IAAA,IAAAC,EAAA;IAAA,IAAAV,CAAA,QAAAO,YAAA;MACzCG,EAAA,GAAAC,IAAA,CAAAd,MAAA;QAAAI,IAAA,EAAcM;MAAA,C;;;;;;WAAdG,E;;;;IAKYA,EAAA,GAAAR,QAAA,CAAAU,GAAA,CAAaR,OAAA,CAAAK,EAAU;IAAAT,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAI,OAAA,CAAAK,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA/B,MAAAa,EAAA,GAAAC,OAAA,CAAQJ,EAAuB;EAAA,IAAAK,EAAA;EAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;IAC7BF,EAAA,IAAAjB,SAAA,EAAY,GAAAA,SAAA,YAAwB;IAACE,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAG,YAAA,IAAAH,CAAA,QAAAI,OAAA,CAAAK,EAAA;IACtCS,EAAA,GAAAA,CAAA,KAAMf,YAAA,CAAaC,OAAA,CAAAK,EAAU;IAAAT,CAAA,MAAAG,YAAA;IAAAH,CAAA,MAAAI,OAAA,CAAAK,EAAA;IAAAT,CAAA,OAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAnB,CAAA,SAAAa,EAAA,IAAAb,CAAA,SAAAkB,EAAA;IAHzCC,EAAA,GAAAR,IAAA,CAAAjB,aAAA;MAAA0B,OAAA,EACWP,EAA+B;MAAAQ,SAAA,EAC7BN,EAAqC,CAAAO,IAAA,CAAM;MAAAC,QAAA,EAC5CL;IAA6B,C;;;;;;;SAHzCC,E;CAMJ","ignoreList":[]}

package/dist/elements/SelectRow/index.scss

@@ -1,5 +1,6 @@
 .select-row {
   &__checkbox {
     display: block;
+    width: min-content;
   }
 }

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './index.scss';
 export type ShimmerEffectProps = {
-    animationDelay?: string;
-    height?: number | string;
-    width?: number | string;
+    readonly animationDelay?: string;
+    readonly height?: number | string;
+    readonly width?: number | string;
 };
 export declare const ShimmerEffect: React.FC<ShimmerEffectProps>;
 export type StaggeredShimmersProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6B9D,CAAA"}

package/dist/elements/ShimmerEffect/index.js

@@ -1,36 +1,70 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDelay } from '../../hooks/useDelay.js';
-export const ShimmerEffect = ({ animationDelay = '0ms', height = '60px', width = '100%' })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        className: "shimmer-effect",
-        style: {
-            height: typeof height === 'number' ? `${height}px` : height,
-            width: typeof width === 'number' ? `${width}px` : width
-        }
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "shimmer-effect__shine",
-        style: {
-            animationDelay
-        }
-    }));
+import './index.scss';
+export const ShimmerEffect = ({
+  animationDelay = '0ms',
+  height = '60px',
+  width = '100%'
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: "shimmer-effect",
+    style: {
+      height: typeof height === 'number' ? `${height}px` : height,
+      width: typeof width === 'number' ? `${width}px` : width
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "shimmer-effect__shine",
+      style: {
+        animationDelay
+      }
+    })
+  });
 };
-export const StaggeredShimmers = ({ className, count, height, renderDelay = 500, shimmerDelay = 25, shimmerItemClassName, width })=>{
-    const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay;
-    const [hasDelayed] = useDelay(renderDelay, true);
-    if (!hasDelayed) return null;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: className
-    }, [
-        ...Array(count)
-    ].map((_, i)=>/*#__PURE__*/ React.createElement("div", {
-            className: shimmerItemClassName,
-            key: i
-        }, /*#__PURE__*/ React.createElement(ShimmerEffect, {
-            animationDelay: `calc(${i} * ${shimmerDelayToPass})`,
-            height: height,
-            width: width
-        }))));
+export const StaggeredShimmers = t0 => {
+  const $ = _c(7);
+  const {
+    className,
+    count,
+    height,
+    renderDelay: t1,
+    shimmerDelay: t2,
+    shimmerItemClassName,
+    width
+  } = t0;
+  const renderDelay = t1 === undefined ? 500 : t1;
+  const shimmerDelay = t2 === undefined ? 25 : t2;
+  const shimmerDelayToPass = typeof shimmerDelay === "number" ? `${shimmerDelay}ms` : shimmerDelay;
+  const [hasDelayed] = useDelay(renderDelay, true);
+  if (!hasDelayed) {
+    return null;
+  }
+  let t3;
+  if ($[0] !== count || $[1] !== shimmerItemClassName || $[2] !== shimmerDelayToPass || $[3] !== height || $[4] !== width || $[5] !== className) {
+    t3 = _jsx("div", {
+      className,
+      children: [...Array(count)].map((_, i) => _jsx("div", {
+        className: shimmerItemClassName,
+        children: _jsx(ShimmerEffect, {
+          animationDelay: `calc(${i} * ${shimmerDelayToPass})`,
+          height,
+          width
+        })
+      }, i))
+    });
+    $[0] = count;
+    $[1] = shimmerItemClassName;
+    $[2] = shimmerDelayToPass;
+    $[3] = height;
+    $[4] = width;
+    $[5] = className;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n  animationDelay?: string\n  height?: number | string\n  width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  height = '60px',\n  width = '100%',\n}) => {\n  return (\n    <div\n      className=\"shimmer-effect\"\n      style={{\n        height: typeof height === 'number' ? `${height}px` : height,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) return null\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["React","useDelay","ShimmerEffect","animationDelay","height","width","div","className","style","StaggeredShimmers","count","renderDelay","shimmerDelay","shimmerItemClassName","shimmerDelayToPass","hasDelayed","Array","map","_","i","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,YAAYA,WAAW,QAAO;AAE9B,SAASC,QAAQ,QAAQ,0BAAyB;AASlD,OAAO,MAAMC,gBAA8C,CAAC,EAC1DC,iBAAiB,KAAK,EACtBC,SAAS,MAAM,EACfC,QAAQ,MAAM,EACf;IACC,qBACE,oBAACC;QACCC,WAAU;QACVC,OAAO;YACLJ,QAAQ,OAAOA,WAAW,WAAW,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAGA;YACrDC,OAAO,OAAOA,UAAU,WAAW,CAAC,EAAEA,MAAM,EAAE,CAAC,GAAGA;QACpD;qBAEA,oBAACC;QACCC,WAAU;QACVC,OAAO;YACLL;QACF;;AAIR,EAAC;AAYD,OAAO,MAAMM,oBAAsD,CAAC,EAClEF,SAAS,EACTG,KAAK,EACLN,MAAM,EACNO,cAAc,GAAG,EACjBC,eAAe,EAAE,EACjBC,oBAAoB,EACpBR,KAAK,EACN;IACC,MAAMS,qBAAqB,OAAOF,iBAAiB,WAAW,CAAC,EAAEA,aAAa,EAAE,CAAC,GAAGA;IACpF,MAAM,CAACG,WAAW,GAAGd,SAASU,aAAa;IAE3C,IAAI,CAACI,YAAY,OAAO;IAExB,qBACE,oBAACT;QAAIC,WAAWA;OACb;WAAIS,MAAMN;KAAO,CAACO,GAAG,CAAC,CAACC,GAAGC,kBACzB,oBAACb;YAAIC,WAAWM;YAAsBO,KAAKD;yBACzC,oBAACjB;YACCC,gBAAgB,CAAC,KAAK,EAAEgB,EAAE,GAAG,EAAEL,mBAAmB,CAAC,CAAC;YACpDV,QAAQA;YACRC,OAAOA;;AAMnB,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useDelay","ShimmerEffect","animationDelay","height","width","_jsx","className","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","children","Array","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n  readonly animationDelay?: string\n  readonly height?: number | string\n  readonly width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  height = '60px',\n  width = '100%',\n}) => {\n  return (\n    <div\n      className=\"shimmer-effect\"\n      style={{\n        height: typeof height === 'number' ? `${height}px` : height,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) {\n    return null\n  }\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAQP,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,MAAA,GAAS,MAAM;EACfC,KAAA,GAAQ;AAAM,CACf;EACC,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAU;IACVC,KAAA,EAAO;MACLJ,MAAA,EAAQ,OAAOA,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAA;MACrDC,KAAA,EAAO,OAAOA,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA;IACpD;cAEA,aAAAC,IAAA,CAAC;MACCC,SAAA,EAAU;MACVC,KAAA,EAAO;QACLL;MACF;;;AAIR;AAYA,OAAO,MAAMM,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAQ,SAAA;IAAAK,KAAA;IAAAR,MAAA;IAAAS,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAZ;EAAA,IAAAK,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqBnB,QAAA,CAASY,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAP,MAAA,IAAAO,CAAA,QAAAN,KAAA,IAAAM,CAAA,QAAAJ,SAAA;IAKHc,EAAA,GAAAf,IAAA,CAAC;MAAAC,SAAA;MAAAe,QAAA,EACE,IAAIC,KAAA,CAAMX,KAAA,GAAAY,GAAA,EAAAC,CAAA,EAAAC,CAAA,KACTpB,IAAA,CAAC;QAAAC,SAAA,EAAeU,oBAAA;QAAAK,QAAA,EACdhB,IAAA,CAAAJ,aAAA;UAAAC,cAAA,EACkB,QAAQuB,CAAA,MAAOP,kBAAA,GAAqB;UAAAf,MAAA;UAAAC;QAAA,C;SAFbqB,CAAA;IAAA,C;;;;;;;;;;;SAF/CL,E;CAYJ","ignoreList":[]}

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

@@ -1,11 +1,12 @@
+import type { FieldBase } from 'payload';
 import React from 'react';
+import './index.scss';
 export type SortColumnProps = {
-    Label: React.ReactNode;
-    disable?: boolean;
-    label?: FieldBase['label'];
-    name: string;
+    readonly appearance?: 'condensed' | 'default';
+    readonly disable?: boolean;
+    readonly Label: React.ReactNode;
+    readonly label?: FieldBase['label'];
+    readonly name: string;
 };
-import type { FieldBase } from 'payload/types';
-import './index.scss';
 export declare const SortColumn: React.FC<SortColumnProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortColumn/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAK9C,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortColumn/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuDhD,CAAA"}

package/dist/elements/SortColumn/index.js

@@ -1,69 +1,115 @@
 'use client';
-// TODO: abstract the `next/navigation` dependency out from this component
-import { useRouter } from 'next/navigation.js';
-import React, { useCallback } from 'react';
-import { Chevron } from '../../icons/Chevron/index.js';
-import { useSearchParams } from '../../providers/SearchParams/index.js';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'sort-column';
-export const SortColumn = (props)=>{
-    const { name, Label, disable = false, label } = props;
-    const { searchParams, stringifyParams } = useSearchParams();
-    const router = useRouter();
-    const { t } = useTranslation();
-    const { sort } = searchParams;
-    const desc = `-${name}`;
-    const asc = name;
-    const ascClasses = [
-        `${baseClass}__asc`
-    ];
-    if (sort === asc) ascClasses.push(`${baseClass}--active`);
-    const descClasses = [
-        `${baseClass}__desc`
-    ];
-    if (sort === desc) descClasses.push(`${baseClass}--active`);
-    const setSort = useCallback((newSort)=>{
-        router.replace(stringifyParams({
-            params: {
-                sort: newSort
-            },
-            replace: true
-        }));
-    }, [
-        router,
-        stringifyParams
-    ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__label`
-    }, Label), !disable && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__buttons`
-    }, /*#__PURE__*/ React.createElement("button", {
-        "aria-label": t('general:sortByLabelDirection', {
-            direction: t('general:ascending'),
+export const SortColumn = props => {
+  const $ = _c(19);
+  const {
+    name,
+    appearance,
+    disable: t0,
+    Label,
+    label
+  } = props;
+  const disable = t0 === undefined ? false : t0;
+  const {
+    handleSortChange,
+    params
+  } = useListQuery();
+  const {
+    t
+  } = useTranslation();
+  const {
+    sort
+  } = params;
+  const desc = `-${name}`;
+  const asc = name;
+  let ascClasses;
+  if ($[0] !== sort || $[1] !== asc) {
+    ascClasses = [`${baseClass}__asc`];
+    if (sort === asc) {
+      ascClasses.push(`${baseClass}--active`);
+    }
+    $[0] = sort;
+    $[1] = asc;
+    $[2] = ascClasses;
+  } else {
+    ascClasses = $[2];
+  }
+  let descClasses;
+  if ($[3] !== sort || $[4] !== desc) {
+    descClasses = [`${baseClass}__desc`];
+    if (sort === desc) {
+      descClasses.push(`${baseClass}--active`);
+    }
+    $[3] = sort;
+    $[4] = desc;
+    $[5] = descClasses;
+  } else {
+    descClasses = $[5];
+  }
+  const t1 = appearance && `${baseClass}--appearance-${appearance}`;
+  let t2;
+  if ($[6] !== t1) {
+    t2 = [baseClass, t1].filter(Boolean);
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[8] !== Label || $[9] !== disable || $[10] !== t || $[11] !== label || $[12] !== ascClasses || $[13] !== handleSortChange || $[14] !== asc || $[15] !== descClasses || $[16] !== desc || $[17] !== t3) {
+    t4 = _jsxs("div", {
+      className: t3,
+      children: [_jsx("span", {
+        className: `${baseClass}__label`,
+        children: Label
+      }), !disable && _jsxs("div", {
+        className: `${baseClass}__buttons`,
+        children: [_jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:ascending"),
             label
-        }),
-        className: [
-            ...ascClasses,
-            `${baseClass}__button`
-        ].filter(Boolean).join(' '),
-        onClick: ()=>setSort(asc),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(Chevron, {
-        direction: "up"
-    })), /*#__PURE__*/ React.createElement("button", {
-        "aria-label": t('general:sortByLabelDirection', {
-            direction: t('general:descending'),
+          }),
+          className: [...ascClasses, `${baseClass}__button`].filter(Boolean).join(" "),
+          onClick: () => void handleSortChange(asc),
+          type: "button",
+          children: _jsx(ChevronIcon, {
+            direction: "up"
+          })
+        }), _jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:descending"),
             label
-        }),
-        className: [
-            ...descClasses,
-            `${baseClass}__button`
-        ].filter(Boolean).join(' '),
-        onClick: ()=>setSort(desc),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(Chevron, null))));
+          }),
+          className: [...descClasses, `${baseClass}__button`].filter(Boolean).join(" "),
+          onClick: () => void handleSortChange(desc),
+          type: "button",
+          children: _jsx(ChevronIcon, {})
+        })]
+      })]
+    });
+    $[8] = Label;
+    $[9] = disable;
+    $[10] = t;
+    $[11] = label;
+    $[12] = ascClasses;
+    $[13] = handleSortChange;
+    $[14] = asc;
+    $[15] = descClasses;
+    $[16] = desc;
+    $[17] = t3;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback } from 'react'\n\nexport type SortColumnProps = {\n  Label: React.ReactNode\n  disable?: boolean\n  label?: FieldBase['label']\n  name: string\n}\n\nimport type { FieldBase } from 'payload/types'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, Label, disable = false, label } = props\n  const { searchParams, stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { t } = useTranslation()\n\n  const { sort } = searchParams\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) ascClasses.push(`${baseClass}--active`)\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) descClasses.push(`${baseClass}--active`)\n\n  const setSort = useCallback(\n    (newSort) => {\n      router.replace(\n        stringifyParams({\n          params: {\n            sort: newSort,\n          },\n          replace: true,\n        }),\n      )\n    },\n    [router, stringifyParams],\n  )\n\n  return (\n    <div className={baseClass}>\n      <span className={`${baseClass}__label`}>{Label}</span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => setSort(asc)}\n            type=\"button\"\n          >\n            <Chevron direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => setSort(desc)}\n            type=\"button\"\n          >\n            <Chevron />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useRouter","React","useCallback","Chevron","useSearchParams","useTranslation","baseClass","SortColumn","props","name","Label","disable","label","searchParams","stringifyParams","router","t","sort","desc","asc","ascClasses","push","descClasses","setSort","newSort","replace","params","div","className","span","button","aria-label","direction","filter","Boolean","join","onClick","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,0EAA0E;AAC1E,SAASA,SAAS,QAAQ,qBAAoB;AAC9C,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAW1C,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAAwC,CAACC;IACpD,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,UAAU,KAAK,EAAEC,KAAK,EAAE,GAAGJ;IAChD,MAAM,EAAEK,YAAY,EAAEC,eAAe,EAAE,GAAGV;IAC1C,MAAMW,SAASf;IACf,MAAM,EAAEgB,CAAC,EAAE,GAAGX;IAEd,MAAM,EAAEY,IAAI,EAAE,GAAGJ;IAEjB,MAAMK,OAAO,CAAC,CAAC,EAAET,KAAK,CAAC;IACvB,MAAMU,MAAMV;IAEZ,MAAMW,aAAa;QAAC,CAAC,EAAEd,UAAU,KAAK,CAAC;KAAC;IACxC,IAAIW,SAASE,KAAKC,WAAWC,IAAI,CAAC,CAAC,EAAEf,UAAU,QAAQ,CAAC;IAExD,MAAMgB,cAAc;QAAC,CAAC,EAAEhB,UAAU,MAAM,CAAC;KAAC;IAC1C,IAAIW,SAASC,MAAMI,YAAYD,IAAI,CAAC,CAAC,EAAEf,UAAU,QAAQ,CAAC;IAE1D,MAAMiB,UAAUrB,YACd,CAACsB;QACCT,OAAOU,OAAO,CACZX,gBAAgB;YACdY,QAAQ;gBACNT,MAAMO;YACR;YACAC,SAAS;QACX;IAEJ,GACA;QAACV;QAAQD;KAAgB;IAG3B,qBACE,oBAACa;QAAIC,WAAWtB;qBACd,oBAACuB;QAAKD,WAAW,CAAC,EAAEtB,UAAU,OAAO,CAAC;OAAGI,QACxC,CAACC,yBACA,oBAACgB;QAAIC,WAAW,CAAC,EAAEtB,UAAU,SAAS,CAAC;qBACrC,oBAACwB;QACCC,cAAYf,EAAE,gCAAgC;YAC5CgB,WAAWhB,EAAE;YACbJ;QACF;QACAgB,WAAW;eAAIR;YAAY,CAAC,EAAEd,UAAU,QAAQ,CAAC;SAAC,CAAC2B,MAAM,CAACC,SAASC,IAAI,CAAC;QACxEC,SAAS,IAAMb,QAAQJ;QACvBkB,MAAK;qBAEL,oBAAClC;QAAQ6B,WAAU;uBAErB,oBAACF;QACCC,cAAYf,EAAE,gCAAgC;YAC5CgB,WAAWhB,EAAE;YACbJ;QACF;QACAgB,WAAW;eAAIN;YAAa,CAAC,EAAEhB,UAAU,QAAQ,CAAC;SAAC,CAAC2B,MAAM,CAACC,SAASC,IAAI,CAAC;QACzEC,SAAS,IAAMb,QAAQL;QACvBmB,MAAK;qBAEL,oBAAClC;AAMb,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","$","name","appearance","disable","t0","Label","label","undefined","handleSortChange","params","t","sort","desc","asc","ascClasses","push","descClasses","t1","t2","filter","Boolean","t3","join","t4","_jsxs","className","children","_jsx","direction","onClick","type"],"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldBase } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: FieldBase['label']\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, appearance, disable = false, Label, label } = props\n  const { handleSortChange, params } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = params\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className={`${baseClass}__label`}>{Label}</span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortColumn/index.scss

@@ -2,7 +2,7 @@
 
 .sort-column {
   display: flex;
-  gap: calc(var(--base) / 4);
+  gap: calc(var(--base) / 2);
   align-items: center;
 
   &__label {
@@ -24,6 +24,7 @@
   &__buttons {
     display: flex;
     align-items: center;
+    gap: calc(var(--base) / 4);
   }
 
   &__button {
@@ -54,4 +55,12 @@
       visibility: visible;
     }
   }
+
+  &--appearance-condensed {
+    gap: calc(var(--base) / 4);
+
+    .sort-column__buttons {
+      gap: 0;
+    }
+  }
 }