@worknice/whiteboard 0.52.1 → 0.53.0

package/dist/presentation/RichList/RichListRow_module.css

@@ -0,0 +1,313 @@
+.listItem-HfVE7t {
+  list-style: none;
+  display: block;
+}
+
+.listItem-HfVE7t + .listItem-HfVE7t .row-qNQike {
+  border-top: solid var(--size-n5) var(--color-grey-t09);
+}
+
+.row-qNQike {
+  --row-bg: transparent;
+  --row-hover-bg: var(--color-grey-t10);
+  --row-gap: var(--size-n1);
+  --row-pad-y: var(--size-n2);
+  --row-pad-x: var(--richlist-padding-inline, var(--size-n1));
+  background: var(--row-bg);
+  color: var(--color-grey-s01);
+  box-sizing: border-box;
+  align-items: stretch;
+  gap: var(--row-gap);
+  height: var(--row-height);
+  padding-block: var(--row-pad-y);
+  padding-inline: var(--row-pad-x);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.listItem-HfVE7t[data-selected] > .row-qNQike {
+  --row-bg: var(--color-purple-t10);
+  background: var(--row-bg);
+}
+
+@media (hover: hover) {
+  .row-qNQike:hover {
+    background-color: var(--row-hover-bg);
+  }
+
+  .listItem-HfVE7t[data-selected] > .row-qNQike:hover {
+    background-color: var(--color-purple-t09);
+  }
+}
+
+.clickableZone-KG4Ygg {
+  align-self: stretch;
+  align-items: stretch;
+  gap: var(--row-gap);
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  position: relative;
+  overflow: visible;
+}
+
+.clickableZoneActive-OtaDew {
+  cursor: pointer;
+}
+
+.clickableZoneActive-OtaDew :is(.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8) a[href], .clickableZoneActive-OtaDew :is(.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8) a[role="link"], .clickableZoneActive-OtaDew .contentSlot-xgewfJ a[href], .clickableZoneActive-OtaDew .contentSlot-xgewfJ a[role="link"] {
+  pointer-events: auto;
+  z-index: 2;
+  position: relative;
+}
+
+.rowLink-vHZ0y7 {
+  bottom: calc(-1 * var(--row-pad-y));
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+  text-align: inherit;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--row-pad-y));
+  z-index: 0;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  position: absolute;
+}
+
+.rowLink-vHZ0y7:focus {
+  outline: none;
+}
+
+.leadingLane-oEnTWq, .rowMain-ekCI8x, .trailingLane-J4qLz8 {
+  pointer-events: none;
+  z-index: 1;
+  position: relative;
+}
+
+.clickableZone-KG4Ygg:not(.clickableZoneActive-OtaDew) .leadingLane-oEnTWq, .clickableZone-KG4Ygg:not(.clickableZoneActive-OtaDew) .rowMain-ekCI8x, .clickableZone-KG4Ygg:not(.clickableZoneActive-OtaDew) .trailingLane-J4qLz8 {
+  pointer-events: auto;
+}
+
+.checkboxLane-SxFtCI, .actionsLane-JQxqtO, .overflowLane-euPsqR {
+  z-index: 1;
+  position: relative;
+}
+
+.checkboxLane-SxFtCI {
+  opacity: 1;
+  width: var(--size-p1);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.checkboxLane-SxFtCI.checkboxLaneFullTarget-J22CW6 {
+  min-height: calc(var(--row-height)  - 2 * var(--row-pad-y));
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-bottom: calc(-1 * var(--row-pad-y));
+  margin-left: calc(-1 * var(--row-pad-x));
+  margin-right: calc(-1 * var(--row-gap));
+  margin-top: calc(-1 * var(--row-pad-y));
+  max-width: calc(var(--size-p1)  + var(--row-pad-x)  + var(--row-gap));
+  min-width: calc(var(--size-p1)  + var(--row-pad-x)  + var(--row-gap));
+  padding-left: var(--row-pad-x);
+  padding-right: var(--row-gap);
+  width: calc(var(--size-p1)  + var(--row-pad-x)  + var(--row-gap));
+  align-self: stretch;
+}
+
+@media (hover: hover) {
+  .checkboxLane-SxFtCI:not(.checkboxLaneActive-SAAKUd) {
+    opacity: 0;
+    transition: opacity .12s;
+  }
+
+  .row-qNQike:hover .checkboxLane-SxFtCI, .row-qNQike:focus-within .checkboxLane-SxFtCI {
+    opacity: 1;
+  }
+}
+
+[data-richlist-compact] .checkboxLane-SxFtCI, [data-richlist-compact] .checkboxLane-SxFtCI:not(.checkboxLaneActive-SAAKUd) {
+  opacity: 1;
+}
+
+.slotCell-nFtJJc {
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.slotCell-nFtJJc:hover, .slotCell-nFtJJc:focus-within {
+  overflow-y: auto;
+}
+
+.leadingLane-oEnTWq {
+  flex: none;
+  justify-content: center;
+  align-self: center;
+  align-items: center;
+  display: flex;
+}
+
+.rowMain-ekCI8x {
+  box-sizing: border-box;
+  align-items: center;
+  column-gap: var(--row-gap);
+  grid-template-columns: minmax(0, var(--richlist-primary-track, min(22rem, 38cqi))) minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+.rowMainCompact-FP1jUy {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mainSlot-G9ZgMV {
+  box-sizing: border-box;
+  gap: var(--size-n4);
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.contentSlots-_4Kf6I {
+  align-items: center;
+  gap: var(--row-gap);
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.rowMainCompact-FP1jUy .contentSlots-_4Kf6I {
+  display: none;
+}
+
+.contentSlot-xgewfJ {
+  height: 100%;
+}
+
+.contentSlotFixed-Saogio {
+  flex-shrink: 0;
+}
+
+.contentSlotStart-klEUrD {
+  text-align: start;
+  justify-content: flex-start;
+}
+
+.contentSlotEnd-k2QSDN {
+  text-align: end;
+  justify-content: flex-end;
+}
+
+.contentSlotCenter-elj5Nr {
+  text-align: center;
+  justify-content: center;
+}
+
+.primaryLine-Sedy1b, .secondaryLine-iySU25 {
+  align-items: center;
+  gap: var(--size-n2);
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+.primaryLine-Sedy1b {
+  font: var(--font-regular-bold);
+}
+
+.secondaryLine-iySU25 {
+  color: var(--color-grey-s03);
+}
+
+.primaryText-vd9ry0, .secondaryText-DmPdJ2 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.primaryText-vd9ry0 > *, .secondaryText-DmPdJ2 > * {
+  min-width: 0;
+  text-overflow: inherit;
+  white-space: inherit;
+  margin: 0;
+  overflow: hidden;
+}
+
+.mainSlotAdornment-IQslEw {
+  flex: none;
+  align-items: center;
+  display: inline-flex;
+}
+
+.trailingLane-J4qLz8 {
+  flex-flow: wrap;
+  flex: 0 3 auto;
+  place-content: flex-end;
+  align-self: center;
+  align-items: center;
+  min-width: 0;
+}
+
+.trailingLane-J4qLz8.contentSlotStart-klEUrD {
+  place-content: flex-start;
+}
+
+.trailingLane-J4qLz8.contentSlotCenter-elj5Nr {
+  place-content: center;
+}
+
+.actionsLane-JQxqtO {
+  align-self: center;
+  align-items: center;
+  gap: var(--size-n4);
+  flex: none;
+  display: flex;
+}
+
+.overflowLane-euPsqR {
+  flex: none;
+  align-self: center;
+  align-items: center;
+  display: flex;
+}
+
+.actionPlaceholder-yugzJR {
+  pointer-events: none;
+  visibility: hidden;
+  display: inline-flex;
+}
+
+.rowListAtCompactBreakpoint-g6EL_A .textFieldAdornment-LP2CuE {
+  display: none;
+}
+

package/dist/presentation/RichList/RichListToolbar.d.ts

@@ -0,0 +1,21 @@
+type Props = {
+    hasGlobalSearch: boolean;
+    searchTerm: string;
+    onSearchTermChange: (value: string) => void;
+    hasFilters: boolean;
+    activeFilterCount: number;
+    onOpenFilterModal: () => void;
+    showDisplay: boolean;
+    onOpenDisplayModal: () => void;
+    displayActiveCount: number;
+    showCsvExport: boolean;
+    onDownloadCsv: () => void;
+    /** Bulk-selection “select all visible rows” (aligns with row checkboxes). */
+    showSelectAll: boolean;
+    selectAllAllSelected: boolean;
+    selectAllSomeSelected: boolean;
+    selectAllDisabled: boolean;
+    onSelectAllChange: () => void;
+};
+declare const RichListToolbar: ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default RichListToolbar;

package/dist/presentation/RichList/RichListToolbar.js

@@ -0,0 +1,104 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__ from "./RichListToolbar.module.js";
+const RichListToolbar = ({ hasGlobalSearch, searchTerm, onSearchTermChange, hasFilters, activeFilterCount, onOpenFilterModal, showDisplay, onOpenDisplayModal, displayActiveCount, showCsvExport, onDownloadCsv, showSelectAll, selectAllAllSelected, selectAllSomeSelected, selectAllDisabled, onSelectAllChange })=>{
+    const selectAllRevealed = selectAllAllSelected || selectAllSomeSelected;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbar,
+        children: [
+            showSelectAll ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("label", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarSelectAll, selectAllRevealed && __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarSelectAllActive),
+                htmlFor: "richListSelectAll",
+                title: "Select all rows",
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__["default"], {
+                    id: "richListSelectAll",
+                    disabled: selectAllDisabled,
+                    value: selectAllAllSelected,
+                    indeterminate: selectAllSomeSelected && !selectAllAllSelected,
+                    onChange: ()=>onSelectAllChange()
+                })
+            }) : null,
+            hasGlobalSearch ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarSearch,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarSearchIcon,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                            symbol: "Search"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                        type: "text",
+                        placeholder: "Search",
+                        id: "richListGlobalSearch",
+                        value: searchTerm,
+                        onChange: (event)=>onSearchTermChange(event.target.value)
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarActions,
+                children: [
+                    hasFilters ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonWrap, activeFilterCount > 0 && __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonActive),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                            type: "ghost",
+                            onClick: onOpenFilterModal,
+                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                symbol: "Filter"
+                            }),
+                            id: "richListFilters",
+                            tooltip: "Filters",
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
+                                className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarButtonLabel,
+                                children: [
+                                    "Filters",
+                                    activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
+                                ]
+                            })
+                        })
+                    }) : null,
+                    showDisplay ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonWrap, displayActiveCount > 0 && __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarFilterButtonActive),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                            type: "ghost",
+                            onClick: onOpenDisplayModal,
+                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                symbol: "Sliders"
+                            }),
+                            id: "richListDisplay",
+                            tooltip: "Display",
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
+                                className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarButtonLabel,
+                                children: [
+                                    "Display",
+                                    displayActiveCount > 0 ? ` (${displayActiveCount})` : ""
+                                ]
+                            })
+                        })
+                    }) : null,
+                    showCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                        type: "ghost",
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                            symbol: "Download"
+                        }),
+                        onClick: onDownloadCsv,
+                        tooltip: "Download all rows as CSV",
+                        title: "Download all rows as CSV",
+                        id: "richListDownloadCsv",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: __WEBPACK_EXTERNAL_MODULE__RichListToolbar_module_js_e529a068__["default"].toolbarButtonLabel,
+                            children: "Download CSV"
+                        })
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+const RichListToolbar_rslib_entry_ = RichListToolbar;
+export { RichListToolbar_rslib_entry_ as default };

package/dist/presentation/RichList/RichListToolbar.module.js

@@ -0,0 +1,12 @@
+import "./RichListToolbar_module.css";
+const RichListToolbar_module_rslib_entry_ = {
+    toolbar: "toolbar-c4DVVR",
+    toolbarSelectAll: "toolbarSelectAll-WDzzeh",
+    toolbarSelectAllActive: "toolbarSelectAllActive-jjmbwd",
+    toolbarSearch: "toolbarSearch-WU4g5B",
+    toolbarSearchIcon: "toolbarSearchIcon-zVTtf9",
+    toolbarActions: "toolbarActions-QgCbkb",
+    toolbarButtonLabel: "toolbarButtonLabel-aBFEc2",
+    toolbarFilterButtonActive: "toolbarFilterButtonActive-KdVoQj"
+};
+export { RichListToolbar_module_rslib_entry_ as default };

package/dist/presentation/RichList/RichListToolbar_module.css

@@ -0,0 +1,100 @@
+.toolbar-c4DVVR {
+  border-bottom: solid var(--size-n5) var(--color-grey-t09);
+  align-items: center;
+  gap: var(--size-n2);
+  padding-block: var(--size-n3);
+  flex-wrap: nowrap;
+  padding-inline-start: var(--richlist-padding-inline, var(--size-n1));
+  padding-inline-end: var(--size-n1);
+  display: flex;
+}
+
+.toolbarSelectAll-WDzzeh {
+  flex: 0 0 calc(var(--size-p1)  + var(--richlist-padding-inline, var(--size-n1))  + var(--size-n2));
+  margin: 0;
+  margin-left: calc(-1 * var(--richlist-padding-inline, var(--size-n1)));
+  margin-right: calc(-1 * var(--size-n2));
+  min-width: calc(var(--size-p1)  + var(--richlist-padding-inline, var(--size-n1))  + var(--size-n2));
+  padding-left: var(--richlist-padding-inline, var(--size-n1));
+  padding-right: var(--size-n2);
+  justify-content: center;
+  align-items: center;
+  transition: opacity .12s;
+  display: flex;
+}
+
+@media (hover: hover) {
+  .toolbarSelectAll-WDzzeh:not(.toolbarSelectAllActive-jjmbwd) {
+    opacity: 0;
+  }
+
+  .toolbar-c4DVVR:hover .toolbarSelectAll-WDzzeh, .toolbar-c4DVVR:focus-within .toolbarSelectAll-WDzzeh {
+    opacity: 1;
+  }
+}
+
+[data-richlist-compact] .toolbarSelectAll-WDzzeh, [data-richlist-compact] .toolbarSelectAll-WDzzeh:not(.toolbarSelectAllActive-jjmbwd) {
+  opacity: 1;
+}
+
+.toolbarSearch-WU4g5B {
+  align-items: center;
+  gap: var(--size-n2);
+  min-width: 0;
+  padding: var(--size-n2) 0;
+  flex: auto;
+  display: flex;
+}
+
+.toolbarSearch-WU4g5B .toolbarSearchIcon-zVTtf9 {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.toolbarSearch-WU4g5B input {
+  border: none;
+  outline: none;
+  width: 100%;
+}
+
+.toolbarActions-QgCbkb {
+  align-items: center;
+  gap: var(--size-n2);
+  flex: none;
+  margin-left: auto;
+  display: flex;
+}
+
+.toolbarButtonLabel-aBFEc2 {
+  display: inline;
+}
+
+[data-richlist-compact] .toolbarButtonLabel-aBFEc2 {
+  display: none;
+}
+
+[data-richlist-compact] .toolbarActions-QgCbkb button:has(.toolbarButtonLabel-aBFEc2) {
+  padding: var(--size-n2);
+}
+
+[data-richlist-compact] .toolbarActions-QgCbkb button:has(.toolbarButtonLabel-aBFEc2) > span:nth-child(2) {
+  display: none;
+}
+
+[data-richlist-compact] .toolbarFilterButtonActive-KdVoQj button {
+  background: var(--color-purple-t09);
+  color: var(--color-grey-s01);
+  border-color: #0000;
+}
+
+@media (hover: hover) {
+  [data-richlist-compact] .toolbarFilterButtonActive-KdVoQj button:hover {
+    background: var(--color-purple-t09);
+  }
+}
+
+[data-richlist-compact] .toolbarFilterButtonActive-KdVoQj button:active {
+  background: var(--color-purple-t09);
+}
+

package/dist/presentation/RichList/RichList_module.css

@@ -0,0 +1,77 @@
+.root-S5afi_ {
+  background: var(--color-white);
+  border-radius: var(--size-n2);
+  border: solid var(--size-n5) var(--color-grey-t09);
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  min-height: 0;
+  max-height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.rootFillHeight-F5N1tt {
+  flex: 0 auto;
+  min-width: 0;
+  min-height: 0;
+  max-height: 100%;
+}
+
+.richListQueryScope-_rCOEN {
+  flex: auto;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: 1fr;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+.richListHead-YX3P21 {
+  flex-direction: column;
+  flex-shrink: 0;
+  display: flex;
+}
+
+.listHeader-LmUwi0 {
+  border-bottom: solid var(--size-n5) var(--color-grey-t09);
+  box-sizing: border-box;
+  padding-block: var(--size-n2);
+  padding-inline: var(--richlist-padding-inline, var(--size-n1));
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.toolbarStatus-OBimHB {
+  border-bottom: solid var(--size-n5) var(--color-grey-t09);
+  align-items: center;
+  gap: var(--size-n2);
+  padding: var(--size-n2) var(--size-n1);
+  justify-content: space-between;
+  display: flex;
+}
+
+.list-j1kaiA {
+  flex-direction: column;
+  align-self: stretch;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  overflow: auto;
+  container-type: inline-size;
+}
+
+.emptyState-xAYoQA {
+  color: var(--color-grey-s03);
+  min-height: 0;
+  padding: var(--size-p2) var(--richlist-padding-inline, var(--size-n1));
+  text-align: center;
+  align-self: stretch;
+  overflow: auto;
+}
+