@lightsparkdev/ui 1.0.16 → 1.1.0

package/dist/{chunk-LEZKEM3W.cjs → chunk-DS3M2OKG.cjs}

@@ -1,61 +1,73 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkE7KJQVHIcjs = require('./chunk-E7KJQVHI.cjs');
+var _chunkGUNROE4Mcjs = require('./chunk-GUNROE4M.cjs');
 
 
 
+var _chunkIX53L44Fcjs = require('./chunk-IX53L44F.cjs');
 
-var _chunkV5S4YEWCcjs = require('./chunk-V5S4YEWC.cjs');
 
 
 
+var _chunkLUZE4HE4cjs = require('./chunk-LUZE4HE4.cjs');
 
-var _chunkEXBPIQ7Ecjs = require('./chunk-EXBPIQ7E.cjs');
 
 
-var _chunkH7F6GCBNcjs = require('./chunk-H7F6GCBN.cjs');
 
+var _chunk6TE5F544cjs = require('./chunk-6TE5F544.cjs');
 
 
 
-var _chunk6JBRQSACcjs = require('./chunk-6JBRQSAC.cjs');
 
+var _chunk2RMXFIOScjs = require('./chunk-2RMXFIOS.cjs');
 
 
-var _chunkTFJSJF5Tcjs = require('./chunk-TFJSJF5T.cjs');
 
+var _chunkPUBEIMRNcjs = require('./chunk-PUBEIMRN.cjs');
 
 
-var _chunkT4KB6SLYcjs = require('./chunk-T4KB6SLY.cjs');
 
+var _chunkW3ZPMDKPcjs = require('./chunk-W3ZPMDKP.cjs');
 
 
-var _chunkZL3BFUENcjs = require('./chunk-ZL3BFUEN.cjs');
+var _chunkF65DFJX5cjs = require('./chunk-F65DFJX5.cjs');
 
 
-var _chunkHRLEYHRQcjs = require('./chunk-HRLEYHRQ.cjs');
+var _chunkB2B6IYJHcjs = require('./chunk-B2B6IYJH.cjs');
 
 
-var _chunkGUOIFRKDcjs = require('./chunk-GUOIFRKD.cjs');
+var _chunkFCPL3OSGcjs = require('./chunk-FCPL3OSG.cjs');
 
 
-var _chunk2V6UQOXNcjs = require('./chunk-2V6UQOXN.cjs');
+var _chunkQRRADIPNcjs = require('./chunk-QRRADIPN.cjs');
 
 
-var _chunk73ASJLG3cjs = require('./chunk-73ASJLG3.cjs');
+var _chunkEYKKYK5Bcjs = require('./chunk-EYKKYK5B.cjs');
+
+
+var _chunkDSRVIFSUcjs = require('./chunk-DSRVIFSU.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkFMAUS34Lcjs = require('./chunk-FMAUS34L.cjs');
+var _chunkAUDNFE2Mcjs = require('./chunk-AUDNFE2M.cjs');
+
+
+
+var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
 
+var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
 
 
-var _chunk2U6C2FAGcjs = require('./chunk-2U6C2FAG.cjs');
 
 
-var _chunk2KKFVDUDcjs = require('./chunk-2KKFVDUD.cjs');
+var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
 
 
 
@@ -73,17 +85,17 @@ var _jsxruntime = require('@emotion/react/jsx-runtime');
 function getDefaultFilterState(filter) {
   switch (filter.type) {
     case "date" /* DATE */:
-      return _chunkZL3BFUENcjs.getDefaultDateFilterState.call(void 0, );
+      return _chunkIX53L44Fcjs.getDefaultDateFilterState.call(void 0, );
     case "enum" /* ENUM */:
-      return _chunkV5S4YEWCcjs.getDefaultEnumFilterState.call(void 0, );
+      return _chunkLUZE4HE4cjs.getDefaultEnumFilterState.call(void 0, );
     case "string" /* STRING */:
-      return _chunk6JBRQSACcjs.getDefaultStringFilterState.call(void 0, );
+      return _chunk2RMXFIOScjs.getDefaultStringFilterState.call(void 0, );
     case "id" /* ID */:
-      return _chunkEXBPIQ7Ecjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
+      return _chunk6TE5F544cjs.getDefaultIdFilterState.call(void 0, filter.allowedEntities);
     case "boolean" /* BOOLEAN */:
-      return _chunkTFJSJF5Tcjs.getDefaultBooleanFilterState.call(void 0, );
+      return _chunkPUBEIMRNcjs.getDefaultBooleanFilterState.call(void 0, );
     case "currency" /* CURRENCY */:
-      return _chunkT4KB6SLYcjs.getDefaultCurrencyFilterState.call(void 0, );
+      return _chunkW3ZPMDKPcjs.getDefaultCurrencyFilterState.call(void 0, );
     default:
       throw new Error("Invalid filter type");
   }
@@ -99,6 +111,8 @@ function initialFilterState(filters) {
 }
 function DataManagerTable(props) {
   var _a, _b, _c, _d;
+  const isCardPageFullWidth = typeof props.cardPageFullWidth === "boolean" ? props.cardPageFullWidth : true;
+  const cardPageMt = typeof props.cardPageMt === "undefined" ? 24 : props.cardPageMt;
   const breakPoint = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
   const [pageSize, setPageSize] = _react.useState.call(void 0, ((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
   const [pageCursorState, setPageCursorState] = _react.useState.call(void 0, {
@@ -108,7 +122,7 @@ function DataManagerTable(props) {
   });
   const [isLoading, setIsLoading] = _react.useState.call(void 0, props.loading || false);
   const [numFiltersApplied, setNumFiltersApplied] = _react.useState.call(void 0, 0);
-  const [showFilterPopover, setShowFilterPopover] = _react.useState.call(void 0, false);
+  const [showFilters, setShowFilters] = _react.useState.call(void 0, false);
   const [filterStates, setFilterStates] = _react.useState.call(void 0, 
     props.filterOptions ? initialFilterState(props.filterOptions.filters) : {}
   );
@@ -170,7 +184,7 @@ function DataManagerTable(props) {
         );
         if (validResult) {
           appliedFilterStates[filter.accessorKey] = validResult;
-          if (_chunkEXBPIQ7Ecjs.isIdFilterState.call(void 0, filterState)) {
+          if (_chunk6TE5F544cjs.isIdFilterState.call(void 0, filterState)) {
             const appliedValues = validResult.appliedValues;
             const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
             updateFilterState(filter)(_chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
@@ -194,7 +208,7 @@ function DataManagerTable(props) {
       const filterState = filterStatesArray[i];
       if (!filterState.isApplied) continue;
       const filter = filters2[i];
-      if (_chunk6JBRQSACcjs.isStringFilterState.call(void 0, filterState)) {
+      if (_chunk2RMXFIOScjs.isStringFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const value = filterState.value;
           let updatedAppliedValues = [];
@@ -212,10 +226,10 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
-          updateFilterState(filter)(_chunk6JBRQSACcjs.getDefaultStringFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunk2RMXFIOScjs.getDefaultStringFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
-      } else if (_chunkV5S4YEWCcjs.isEnumFilterState.call(void 0, filterState)) {
+      } else if (_chunkLUZE4HE4cjs.isEnumFilterState.call(void 0, filterState)) {
         if (filterState.value) {
           const newFilterState = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, filterStates2[filter.accessorKey]), {
             value: "",
@@ -225,7 +239,7 @@ function DataManagerTable(props) {
           appliedFilterStates[filter.accessorKey] = newFilterState;
           updateFilterState(filter)(newFilterState);
         } else if (((_d2 = filterState.appliedValues) == null ? void 0 : _d2.length) === 0) {
-          updateFilterState(filter)(_chunkV5S4YEWCcjs.getDefaultEnumFilterState.call(void 0, ));
+          updateFilterState(filter)(_chunkLUZE4HE4cjs.getDefaultEnumFilterState.call(void 0, ));
           filterState.isApplied = false;
         }
       }
@@ -234,7 +248,7 @@ function DataManagerTable(props) {
       return state.isApplied ? acc + 1 : acc;
     }, 0);
     setNumFiltersApplied(numFiltersApplied2);
-    setShowFilterPopover(false);
+    setShowFilters(false);
     setIsLoading(true);
     const newFetchVariables = getFilterQueryVariables(
       filters2,
@@ -328,7 +342,7 @@ function DataManagerTable(props) {
     switch (filter.type) {
       case "date" /* DATE */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkZL3BFUENcjs.DateFilter,
+          _chunkIX53L44Fcjs.DateFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -340,7 +354,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "enum" /* ENUM */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkV5S4YEWCcjs.EnumFilter,
+          _chunkLUZE4HE4cjs.EnumFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -356,7 +370,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "string" /* STRING */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk6JBRQSACcjs.StringFilter,
+          _chunk2RMXFIOScjs.StringFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -370,7 +384,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "id" /* ID */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkEXBPIQ7Ecjs.IdFilter,
+          _chunk6TE5F544cjs.IdFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -384,7 +398,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "boolean" /* BOOLEAN */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkTFJSJF5Tcjs.BooleanFilter,
+          _chunkPUBEIMRNcjs.BooleanFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -397,7 +411,7 @@ function DataManagerTable(props) {
         ) }, filter.label);
       case "currency" /* CURRENCY */:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkT4KB6SLYcjs.CurrencyFilter,
+          _chunkW3ZPMDKPcjs.CurrencyFilter,
           {
             updateFilterState: (state) => {
               setFilterStates((prevState) => _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, prevState), {
@@ -414,42 +428,78 @@ function DataManagerTable(props) {
   }) : [];
   let filters;
   const isFilterButtonSmall = isSm && props.header;
+  function onApply() {
+    void handleApplyFilters(filterStates, props.filterOptions, pageSize);
+  }
+  const filterContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    FilterContentInner,
+    {
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          onApply();
+        }
+      },
+      isSm,
+      children: [
+        filterSections,
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooter, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, { text: "Clear", onClick: handleClearFilters }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContentFooterRight, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, { text: "Cancel", onClick: () => setShowFilters(false) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, { text: "Apply", kind: "primary", onClick: onApply })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const commonButtonProps = {
+    kind: isFilterButtonSmall ? "roundIcon" : "secondary",
+    size: "ExtraSmall",
+    typography: { color: "c6Neutral" },
+    icon: {
+      name: "Sort"
+    },
+    text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0
+  };
   if (props.filterOptions) {
-    filters = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFilterContainer, { children: [
+    filters = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataManagerTableFilterContainer, { children: isSm ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2U6C2FAGcjs.Button,
-        {
-          kind: isFilterButtonSmall ? "roundIcon" : "secondary",
-          text: !isFilterButtonSmall ? `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}` : void 0,
-          size: "ExtraSmall",
-          icon: {
-            name: "Sort"
-          },
-          typography: { color: "c6Neutral" },
-          onClick: () => setShowFilterPopover(!showFilterPopover)
-        }
+        _chunk4UFYMBJKcjs.Button,
+        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonButtonProps), {
+          onClick: () => setShowFilters(!showFilters)
+        })
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkH7F6GCBNcjs.Popover,
+        _chunkFCPL3OSGcjs.Modal,
         {
-          show: showFilterPopover,
-          setShow: setShowFilterPopover,
-          side: "right",
-          onApply: () => void handleApplyFilters(
-            filterStates,
-            props.filterOptions,
-            pageSize
-          ),
-          onClear: handleClearFilters,
-          children: filterSections
+          visible: showFilters,
+          onClose: () => setShowFilters(false),
+          smKind: "fullscreen",
+          children: filterContent
         }
       )
-    ] }) });
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkQRRADIPNcjs.Dropdown,
+      {
+        borderRadius: 12,
+        maxDropdownItemsWidth: 400,
+        dropdownContent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterDropdownContent, { children: filterContent }),
+        isOpen: showFilters,
+        onOpen: () => {
+          setShowFilters(true);
+        },
+        onClose: () => {
+          setShowFilters(false);
+        },
+        button: commonButtonProps,
+        align: "right"
+      }
+    ) }) });
   }
   let showMoreDropdown;
   if (((_c = props.pageSizes) == null ? void 0 : _c.length) > 1) {
     showMoreDropdown = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk2V6UQOXNcjs.Dropdown,
+      _chunkQRRADIPNcjs.Dropdown,
       {
         getCSS: ({ isOpen }) => ({
           height: "fit-content",
@@ -463,7 +513,7 @@ function DataManagerTable(props) {
             width: "100%"
           }),
           getContent: ({ isOpen }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkFMAUS34Lcjs.TextIconAligner,
+            _chunkAUDNFE2Mcjs.TextIconAligner,
             {
               content: `Show ${pageSize} items`,
               typography: { size: "ExtraSmall" },
@@ -489,7 +539,7 @@ function DataManagerTable(props) {
   if (props.showMoreOptions) {
     footer = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DataManagerTableFooter, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2U6C2FAGcjs.Button,
+        _chunk4UFYMBJKcjs.Button,
         {
           text: "Show more",
           paddingY: "short",
@@ -507,11 +557,11 @@ function DataManagerTable(props) {
     const isFullCount = (_d = props.isFullCount) != null ? _d : true;
     const countString = isFullCount ? props.resultCount : props.resultCount + "+";
     const resultsString = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGUOIFRKDcjs.Label, { children: "Viewing " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHRLEYHRQcjs.LabelModerate, { children: `${startResult}-${endResult}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGUOIFRKDcjs.Label, { children: " of " }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHRLEYHRQcjs.LabelModerate, { children: `${countString}` }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGUOIFRKDcjs.Label, { children: " results" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2B6IYJHcjs.Label, { children: "Viewing " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF65DFJX5cjs.LabelModerate, { children: `${startResult}-${endResult}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2B6IYJHcjs.Label, { children: " of " }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF65DFJX5cjs.LabelModerate, { children: `${countString}` }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB2B6IYJHcjs.Label, { children: " results" })
     ] });
     const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
     const hasPrev = startResult > 1;
@@ -521,7 +571,7 @@ function DataManagerTable(props) {
         showMoreDropdown,
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PaginationButtonsContainer, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk2U6C2FAGcjs.Button,
+            _chunk4UFYMBJKcjs.Button,
             {
               text: "Previous",
               paddingY: "short",
@@ -532,7 +582,7 @@ function DataManagerTable(props) {
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk2U6C2FAGcjs.Button,
+            _chunk4UFYMBJKcjs.Button,
             {
               text: "Next",
               paddingY: "short",
@@ -551,25 +601,24 @@ function DataManagerTable(props) {
       props.header,
       filters
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE7KJQVHIcjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGUNROE4Mcjs.Table, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, props), { loading: isLoading })),
     footer
   ] });
-  const isCardPage = typeof props.cardPage === "boolean" ? props.cardPage : true;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPage ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk73ASJLG3cjs.CardPageFullWidth, { css: { marginTop: "24px" }, children: content }) : content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledDataManagerTable, { children: isCardPageFullWidth ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEYKKYK5Bcjs.CardPageFullWidth, { css: { marginTop: `${cardPageMt}px` }, children: content }) : content });
 }
 var StyledDataManagerTable = _styled2.default.div``;
 var commonPadding = `
   ${_chunkKW3JYLRIcjs.bp.lg(`
-  padding-left: ${_chunk2KKFVDUDcjs.standardContentInset.lgPx}px;
-  padding-right: ${_chunk2KKFVDUDcjs.standardContentInset.lgPx}px;
+  padding-left: ${_chunkFPQ2OUYXcjs.standardContentInset.lgPx}px;
+  padding-right: ${_chunkFPQ2OUYXcjs.standardContentInset.lgPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.sm(`
-  padding-left: ${_chunk2KKFVDUDcjs.standardContentInset.smPx}px;
-  padding-right: ${_chunk2KKFVDUDcjs.standardContentInset.smPx}px;
+  padding-left: ${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
+  padding-right: ${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
-  padding-left: ${_chunk2KKFVDUDcjs.standardContentInset.minSmMaxLgPx}px;
-  padding-right: ${_chunk2KKFVDUDcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-left: ${_chunkFPQ2OUYXcjs.standardContentInset.minSmMaxLgPx}px;
+  padding-right: ${_chunkFPQ2OUYXcjs.standardContentInset.minSmMaxLgPx}px;
   `)}
 `;
 var DataManagerTableHeader = _styled2.default.div`
@@ -577,6 +626,7 @@ var DataManagerTableHeader = _styled2.default.div`
   flex-direction: row;
   align-items: center;
   padding: ${_chunkZUAO4DW3cjs.Spacing.px.xs} 0;
+  position: relative;
 `;
 var DataManagerTableFooter = _styled2.default.div`
   border-top: 1px solid ${({ theme }) => theme.c1Neutral};
@@ -589,7 +639,7 @@ var DataManagerTableFooter = _styled2.default.div`
   padding-top: ${_chunkZUAO4DW3cjs.Spacing.px.md};
   padding-bottom: ${_chunkZUAO4DW3cjs.Spacing.px.md};
 
-  ${_chunk2U6C2FAGcjs.StyledButton} {
+  ${_chunk4UFYMBJKcjs.StyledButton} {
     align-self: end;
   }
 `;
@@ -606,15 +656,45 @@ var PaginationButtonsContainer = _styled2.default.div`
 var DataManagerTableFilterContainer = _styled2.default.div`
   position: absolute;
   z-index: 3;
-  background: white;
   right: 0;
-  background: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 1) 15%
-  );
+  ${_chunkDSRVIFSUcjs.StyledButtonRow} + & {
+    background: linear-gradient(
+      to right,
+      ${({ theme }) => _chunkHGCI5IAMcjs.themeOr.call(void 0, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)")({ theme })}
+        0%,
+      ${({ theme }) => _chunkHGCI5IAMcjs.getColor.call(void 0, theme, "bg")} 15%
+    );
+  }
   ${commonPadding}
 `;
+var FilterDropdownContent = _styled2.default.div`
+  width: 400px;
+  background: ${({ theme }) => theme.bg};
+  border: 0.5px solid
+    ${({ theme }) => _chunkHGCI5IAMcjs.themeOrWithKey.call(void 0, "c1Neutral", "c4Neutral")({ theme })};
+  ${_chunkFPQ2OUYXcjs.standardBorderRadius.call(void 0, 12)}
+  box-shadow:
+    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+`;
+var FilterContentInner = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xl};
+  padding: ${({ isSm }) => isSm ? "0px" : _chunkZUAO4DW3cjs.Spacing.px.lg};
+  z-index: ${_chunkZU72XWNEcjs.z.dropdown + 1};
+  position: relative;
+`;
+var FilterContentFooter = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+var FilterContentFooterRight = _styled2.default.div`
+  display: flex;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+`;
 
 
 

package/dist/{chunk-F6U655TY.cjs → chunk-DSRVIFSU.cjs}

@@ -1,12 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk7QQBTG3Ocjs = require('./chunk-7QQBTG3O.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk2U6C2FAGcjs = require('./chunk-2U6C2FAG.cjs');
+var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
 
 
-var _chunk2KKFVDUDcjs = require('./chunk-2KKFVDUD.cjs');
+var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+
+
+var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -22,22 +25,25 @@ function ButtonRow({
   className,
   smSticky = true,
   bottomBorder = true,
-  headerHeight = 0
+  headerHeight = 0,
+  ml
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    ButtonRowContainer,
+    StyledButtonRow,
     {
       smSticky,
       headerHeight,
       bottomBorder,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledButtonRow, { className, children: buttons.map(
-        (button, idx) => button === "divider" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonRowDivider, {}, idx) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2U6C2FAGcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), idx)
+      ml,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledButtonRowButton, { className, children: buttons.map(
+        (button, idx) => button === "divider" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonRowDivider, {}, idx) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UFYMBJKcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, button), idx)
       ) })
     }
   );
 }
-var ButtonRowContainer = _styled2.default.div`
+var StyledButtonRow = _styled2.default.div`
   max-width: 100%;
+  ${({ ml }) => typeof ml !== "undefined" ? `margin-left: ${ml}px;` : ``}
   ${({ theme }) => _chunkKW3JYLRIcjs.bp.sm(`background: ${theme.bg}`)}
   ${({ headerHeight, smSticky, bottomBorder }) => _chunkKW3JYLRIcjs.bp.sm(
   `
@@ -46,9 +52,9 @@ var ButtonRowContainer = _styled2.default.div`
             position: sticky;
             top: ${headerHeight}px;
             margin-top: 24px;
-            margin-left: -${_chunk2KKFVDUDcjs.standardContentInset.smPx}px;
-            width: calc(100% + ${_chunk2KKFVDUDcjs.standardContentInset.smPx * 2}px);
-            max-width: calc(100% + ${_chunk2KKFVDUDcjs.standardContentInset.smPx * 2}px);
+            margin-left: -${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
+            width: calc(100% + ${_chunkFPQ2OUYXcjs.standardContentInset.smPx * 2}px);
+            max-width: calc(100% + ${_chunkFPQ2OUYXcjs.standardContentInset.smPx * 2}px);
             z-index: 2;` : `position: relative;`}
         ${bottomBorder ? `
             &:before {
@@ -71,17 +77,13 @@ var ButtonRowDivider = _styled2.default.div`
   margin-left: 16px;
   padding-left: 16px;
 `;
-var StyledButtonRow = _styled2.default.div`
-  ${_chunk7QQBTG3Ocjs.overflowAutoWithoutScrollbars}
+var StyledButtonRowButton = _styled2.default.div`
+  ${_chunk7H2OXTENcjs.overflowAutoWithoutScrollbars}
   background: ${({ theme }) => theme.bg};
   display: flex;
   position: relative;
   z-index: 1;
-
-  & button:not(:first-of-type),
-  & a:not(:first-of-type) {
-    margin-left: 8px;
-  }
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
 
   & ${ButtonRowDivider} + button,
   & ${ButtonRowDivider} + a {
@@ -89,7 +91,7 @@ var StyledButtonRow = _styled2.default.div`
   }
 
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding: ${_chunk2KKFVDUDcjs.standardContentInset.smPx}px;
+    padding: ${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
   `)}
 `;
 
@@ -97,4 +99,4 @@ var StyledButtonRow = _styled2.default.div`
 
 
 
-exports.ButtonRow = ButtonRow; exports.ButtonRowContainer = ButtonRowContainer; exports.StyledButtonRow = StyledButtonRow;
+exports.ButtonRow = ButtonRow; exports.StyledButtonRow = StyledButtonRow; exports.StyledButtonRowButton = StyledButtonRowButton;

package/dist/{chunk-ELEYS3GZ.cjs → chunk-E2672QPS.cjs}

@@ -3,7 +3,7 @@
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunk2KKFVDUDcjs = require('./chunk-2KKFVDUD.cjs');
+var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
 
 
 
@@ -17,6 +17,7 @@ var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_r
 var _reacttooltip = require('react-tooltip');
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Tooltip(props) {
+  const maxWidth = props.maxWidth || 260;
   const nodeRef = _react3.useRef.call(void 0, null);
   const [nodeReady, setNodeReady] = _react4.default.useState(false);
   _react3.useEffect.call(void 0, () => {
@@ -41,7 +42,7 @@ function Tooltip(props) {
         content: props.content || "",
         noArrow: true,
         border: "0.05rem solid rgba(0, 0, 0, 0.1)",
-        className: styles({ theme }),
+        className: styles({ theme, maxWidth }),
         variant: "light",
         clickable: Boolean(props.interactive)
       })
@@ -49,15 +50,16 @@ function Tooltip(props) {
     nodeRef.current
   ) : null;
 }
-var styles = ({ theme }) => _css.css`
+var styles = ({ theme, maxWidth }) => _css.css`
   font-size: "10px";
   color: ${theme.c8Neutral} !important;
   border-radius: 8px !important;
   padding: 16px !important;
   z-index: ${_chunkZU72XWNEcjs.z.tooltip};
-  ${_chunk2KKFVDUDcjs.overlaySurface.call(void 0, { theme, important: true })};
+  ${_chunkFPQ2OUYXcjs.overlaySurface.call(void 0, { theme, important: true })};
 
-  max-width: 260px;
+  max-width: ${maxWidth}px;
+  word-break: break-word;
   box-shadow:
     0px 1px 4px 0px rgba(0, 0, 0, 0.1),
     0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;

package/dist/{chunk-WXQAFT6L.js → chunk-E46IHC27.js}

@@ -1,12 +1,12 @@
 import {
   themeOr
-} from "./chunk-WFSTDMMY.js";
-import {
-  darkGradient
-} from "./chunk-HU2UCL6I.js";
+} from "./chunk-AM7EMJXN.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  darkGradient
+} from "./chunk-YJIIP7IY.js";
 
 // src/styles/common.tsx
 import { css } from "@emotion/react";