@prt-ts/fluent-react-table-v2 9.41.0-build.3.0 → 9.41.0-build.4.0

package/index.js

@@ -3,8 +3,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
-import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, DrawerFooter, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio } from '@fluentui/react-components';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { useVirtual } from 'react-virtual';
@@ -35,19 +34,6 @@ const useTableStaticStyles = makeStyles({
         width: "100%",
         borderCollapse: "collapse",
     },
-    tHead: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 1, backgroundColor: tokens.colorPaletteAnchorBackground2, color: tokens.colorNeutralForeground1, position: "sticky", top: 0, width: "100%", boxShadow: tokens.shadow2 }),
-    tHeadRow: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), shorthands.borderBottom(tokens.strokeWidthThickest, "solid", tokens.colorNeutralStroke1)),
-    tBody: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
-    tBodyRow: Object.assign(Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { ":nth-child(even)": {
-            backgroundColor: tokens.colorNeutralBackground2,
-        }, ":hover": {
-            backgroundColor: tokens.colorNeutralBackground2Hover,
-        } }),
-    tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackground2 }, shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { ":hover": {
-            backgroundColor: tokens.colorBrandBackground2Hover,
-        } }),
-    tBodyGroupedRow: Object.assign({ backgroundColor: tokens.colorNeutralBackground2 }, shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)),
-    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
     tFoot: {
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
@@ -94,6 +80,999 @@ const usePaginationStyle = makeStyles({
     },
 });
 
+const IconDirectionContext = React.createContext(undefined);
+const IconDirectionContextDefaultValue = {};
+IconDirectionContext.Provider;
+const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue;
+
+// ----
+// Heads up!
+// These constants are global and will be shared between Griffel instances.
+// Any change in them should happen only in a MAJOR version. If it happens,
+// please change "__NAMESPACE_PREFIX__" to include a version.
+const __GLOBAL__ = typeof window === 'undefined' ? global : window;
+const __NAMESPACE_PREFIX__ = '@griffel/';
+function getGlobalVar(name, defaultValue) {
+  if (!__GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)]) {
+    __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)] = defaultValue;
+  }
+  return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
+}
+/** @internal */
+const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
+/** @internal */
+const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
+// ----
+/** @internal */
+const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
+/** @internal */
+const RESET_HASH_PREFIX = 'r';
+/** @internal */
+const SEQUENCE_HASH_LENGTH = 7;
+/** @internal */
+const SEQUENCE_PREFIX = '___';
+/** @internal */
+const DEBUG_SEQUENCE_SEPARATOR = '_';
+/** @internal */
+const SEQUENCE_SIZE = process.env.NODE_ENV === 'production' ? SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH : SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH + DEBUG_SEQUENCE_SEPARATOR.length + SEQUENCE_HASH_LENGTH;
+// indexes for values in LookupItem tuple
+/** @internal */
+const LOOKUP_DEFINITIONS_INDEX = 0;
+/** @internal */
+const LOOKUP_DIR_INDEX = 1;
+
+/* eslint-disable */
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+function murmur2(str) {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+  // const m = 0x5bd1e995;
+  // const r = 24;
+  // Initialize the hash
+  var h = 0; // Mix 4 bytes at a time into the hash
+
+  var k,
+      i = 0,
+      len = str.length;
+
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+    k ^=
+    /* k >>> r: */
+    k >>> 24;
+    h =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Handle the last few bytes of the input array
+
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+      /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+
+  h ^= h >>> 13;
+  h =
+  /* Math.imul(h, m): */
+  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+function padEndHash(value) {
+  const hashLength = value.length;
+  if (hashLength === SEQUENCE_HASH_LENGTH) {
+    return value;
+  }
+  for (let i = hashLength; i < SEQUENCE_HASH_LENGTH; i++) {
+    value += '0';
+  }
+  return value;
+}
+function hashSequence(classes, dir, sequenceIds = []) {
+  if (process.env.NODE_ENV === 'production') {
+    return SEQUENCE_PREFIX + padEndHash(murmur2(classes + dir));
+  }
+  return SEQUENCE_PREFIX + padEndHash(murmur2(classes + dir)) + DEBUG_SEQUENCE_SEPARATOR + padEndHash(murmur2(sequenceIds.join('')));
+}
+
+/**
+ * Reduces a classname map for slot to a classname string. Uses classnames according to text directions.
+ *
+ * @private
+ */
+function reduceToClassName(classMap, dir) {
+  let className = '';
+  // eslint-disable-next-line guard-for-in
+  for (const propertyHash in classMap) {
+    const classNameMapping = classMap[propertyHash];
+    if (classNameMapping) {
+      const hasRTLClassName = Array.isArray(classNameMapping);
+      if (dir === 'rtl') {
+        className += (hasRTLClassName ? classNameMapping[1] : classNameMapping) + ' ';
+      } else {
+        className += (hasRTLClassName ? classNameMapping[0] : classNameMapping) + ' ';
+      }
+    }
+  }
+  return className.slice(0, -1);
+}
+/**
+ * Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
+ * `mergeClasses()`.
+ *
+ * @internal
+ */
+function reduceToClassNameForSlots(classesMapBySlot, dir) {
+  const classNamesForSlots = {};
+  // eslint-disable-next-line guard-for-in
+  for (const slotName in classesMapBySlot) {
+    const slotClasses = reduceToClassName(classesMapBySlot[slotName], dir);
+    // Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
+    if (slotClasses === '') {
+      classNamesForSlots[slotName] = '';
+      continue;
+    }
+    const sequenceHash = hashSequence(slotClasses, dir);
+    const resultSlotClasses = sequenceHash + ' ' + slotClasses;
+    DEFINITION_LOOKUP_TABLE[sequenceHash] = [classesMapBySlot[slotName], dir];
+    classNamesForSlots[slotName] = resultSlotClasses;
+  }
+  return classNamesForSlots;
+}
+
+// Contains a mapping of previously resolved sequences of atomic classnames
+const mergeClassesCachedResults = {};
+function mergeClasses() {
+  // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
+  // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
+  /* eslint-disable prefer-rest-params */
+  let dir = null;
+  let resultClassName = '';
+  // Is used as a cache key to avoid object merging
+  let sequenceMatch = '';
+  const sequencesIds = new Array(arguments.length);
+  let containsResetClassName = '';
+  for (let i = 0; i < arguments.length; i++) {
+    const className = arguments[i];
+    if (typeof className === 'string' && className !== '') {
+      // All classes generated by `makeStyles()` are prefixed by a sequence hash, this allows to identify class sets
+      // without parsing each className in a string
+      const sequenceIndex = className.indexOf(SEQUENCE_PREFIX);
+      if (sequenceIndex === -1) {
+        if (process.env.NODE_ENV !== 'production') {
+          className.split(' ').forEach(entry => {
+            if (entry.startsWith(RESET_HASH_PREFIX) && DEBUG_RESET_CLASSES[entry]) {
+              if (containsResetClassName) {
+                // eslint-disable-next-line no-console
+                console.error('mergeClasses(): a passed string contains multiple classes produced by makeResetStyles (' + `${className} & ${resultClassName}, this will lead to non-deterministic behavior. Learn more:` + 'https://griffel.js.org/react/api/make-reset-styles#limitations' + '\n' + `Source string: ${className}`);
+              } else {
+                containsResetClassName = entry;
+              }
+            }
+          });
+        }
+        resultClassName += className + ' ';
+      } else {
+        const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
+        // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
+        if (sequenceIndex > 0) {
+          resultClassName += className.slice(0, sequenceIndex);
+        }
+        sequenceMatch += sequenceId;
+        sequencesIds[i] = sequenceId;
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        if (className.indexOf(SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
+          // eslint-disable-next-line no-console
+          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + `with "${SEQUENCE_PREFIX}"), it's possible that passed classes were concatenated in a wrong way. ` + `Source string: ${className}`);
+        }
+      }
+    }
+  }
+  // .slice() there allows to avoid trailing space for non-atomic classes
+  // "ui-button ui-flex " => "ui-button ui-flex"
+  if (sequenceMatch === '') {
+    return resultClassName.slice(0, -1);
+  }
+  // It's safe to reuse results to avoid continuous merging as results are stable
+  // "__seq1 ... __seq2 ..." => "__seq12 ..."
+  const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
+  if (mergeClassesResult !== undefined) {
+    return resultClassName + mergeClassesResult;
+  }
+  const sequenceMappings = [];
+  for (let i = 0; i < arguments.length; i++) {
+    const sequenceId = sequencesIds[i];
+    if (sequenceId) {
+      const sequenceMapping = DEFINITION_LOOKUP_TABLE[sequenceId];
+      if (sequenceMapping) {
+        sequenceMappings.push(sequenceMapping[LOOKUP_DEFINITIONS_INDEX]);
+        if (process.env.NODE_ENV !== 'production') {
+          if (dir !== null && dir !== sequenceMapping[LOOKUP_DIR_INDEX]) {
+            // eslint-disable-next-line no-console
+            console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that has different direction ` + `(dir="${sequenceMapping[1] ? 'rtl' : 'ltr'}") setting than other classes. This is not supported. ` + `Source string: ${arguments[i]}`);
+          }
+        }
+        dir = sequenceMapping[LOOKUP_DIR_INDEX];
+      } else {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that does not match any entry ` + `in cache. Source string: ${arguments[i]}`);
+        }
+      }
+    }
+  }
+  // eslint-disable-next-line prefer-spread
+  const resultDefinitions = Object.assign.apply(Object,
+  // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
+  [{}].concat(sequenceMappings));
+  let atomicClassNames = reduceToClassName(resultDefinitions, dir);
+  // Each merge of classes generates a new sequence of atomic classes that needs to be registered
+  const newSequenceHash = hashSequence(atomicClassNames, dir, sequencesIds);
+  atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
+  mergeClassesCachedResults[sequenceMatch] = atomicClassNames;
+  DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, dir];
+  return resultClassName + atomicClassNames;
+}
+
+const sequenceDetails = {};
+const cssRules = /*#__PURE__*/new Set();
+const debugData = {
+  getChildrenSequences: debugSequenceHash => {
+    const key = Object.keys(mergeClassesCachedResults).find(key => mergeClassesCachedResults[key].startsWith(debugSequenceHash));
+    if (key) {
+      // key of the mergeClasses cache contains merge order
+      return key.split(SEQUENCE_PREFIX).filter(sequence => sequence.length).map(sequence => SEQUENCE_PREFIX + sequence);
+    }
+    return [];
+  },
+  addCSSRule: rule => {
+    cssRules.add(rule);
+  },
+  addSequenceDetails: (classNamesForSlots, sourceURL) => {
+    Object.entries(classNamesForSlots).forEach(([slotName, sequenceHash]) => {
+      sequenceDetails[sequenceHash.substring(0, SEQUENCE_SIZE)] = {
+        slotName,
+        sourceURL
+      };
+    });
+  },
+  getCSSRules: () => {
+    return Array.from(cssRules);
+  },
+  getSequenceDetails: sequenceHash => {
+    return sequenceDetails[sequenceHash];
+  }
+};
+
+function getDirectionalClassName(classes, direction) {
+  return Array.isArray(classes) ? direction === 'rtl' ? classes[1] : classes[0] : classes;
+}
+function getDebugClassNames(lookupItem, parentLookupItem, parentDebugClassNames, overridingSiblings) {
+  const classesMapping = lookupItem[0];
+  const direction = lookupItem[1];
+  return Object.entries(classesMapping).map(([propertyHash, classes]) => {
+    const className = getDirectionalClassName(classes, direction);
+    let overriddenBy;
+    if (parentDebugClassNames && parentLookupItem) {
+      const matching = parentDebugClassNames.find(({
+        className: parentClassName
+      }) => parentClassName === className);
+      if (!matching && parentLookupItem[0][propertyHash]) {
+        // parent node does not have current className (style), but has current selector:
+        // style is overriden in current merging by another rule in sibling node
+        overriddenBy = getDirectionalClassName(parentLookupItem[0][propertyHash], parentLookupItem[1]);
+      } else if (matching && parentLookupItem[0][propertyHash]) {
+        // parent node has current className (style), and has current selector:
+        // case 1. style is not overriden during current merging; it may be overriden in higher level of merging
+        // case 2. style is overriden in current merging by exactly the same rule in sibling nodes
+        const siblingHasSameRule = overridingSiblings ? overridingSiblings.filter(({
+          debugClassNames
+        }) => debugClassNames.filter(({
+          className: siblingClassName
+        }) => siblingClassName === className).length > 0).length > 0 : false;
+        overriddenBy = siblingHasSameRule ? matching.className // case 2
+        : matching.overriddenBy; // case 1
+      } else if (!matching && !parentLookupItem[0][propertyHash]) {
+        // parent node does not have current className (style), and does not have current selector:
+        // this case is not possible
+        overriddenBy = undefined;
+      } else if (matching && !parentLookupItem[0][propertyHash]) {
+        // parent node has current className (style), but does not have current selector:
+        // this case is not possible
+        overriddenBy = undefined;
+      }
+    }
+    return {
+      className,
+      overriddenBy
+    };
+  });
+}
+
+function getDebugTree(debugSequenceHash, parentNode) {
+  const lookupItem = DEFINITION_LOOKUP_TABLE[debugSequenceHash];
+  if (lookupItem === undefined) {
+    return undefined;
+  }
+  const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
+  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode === null || parentNode === void 0 ? void 0 : parentNode.debugClassNames, parentNode === null || parentNode === void 0 ? void 0 : parentNode.children);
+  const node = {
+    sequenceHash: debugSequenceHash,
+    direction: lookupItem[1],
+    children: [],
+    debugClassNames
+  };
+  const childrenSequences = debugData.getChildrenSequences(node.sequenceHash);
+  childrenSequences.reverse() // first process the overriding children that are merged last
+  .forEach(sequence => {
+    const child = getDebugTree(sequence, node);
+    if (child) {
+      node.children.push(child);
+    }
+  });
+  // if it's leaf (makeStyle node), get css rules
+  if (!node.children.length) {
+    node.rules = {};
+    node.debugClassNames.forEach(({
+      className
+    }) => {
+      const mapData = debugData.getSequenceDetails(debugSequenceHash);
+      if (mapData) {
+        node.slot = mapData.slotName;
+        node.sourceURL = mapData.sourceURL;
+      }
+      const cssRule = debugData.getCSSRules().find(cssRule => {
+        return cssRule.includes(className);
+      });
+      node.rules[className] = cssRule;
+    });
+  }
+  return node;
+}
+
+function injectDevTools(document) {
+  const window = document.defaultView;
+  if (!window || window.__GRIFFEL_DEVTOOLS__) {
+    return;
+  }
+  const devtools = {
+    getInfo: element => {
+      const rootDebugSequenceHash = Array.from(element.classList).find(className => className.startsWith(SEQUENCE_PREFIX));
+      if (rootDebugSequenceHash === undefined) {
+        return undefined;
+      }
+      return getDebugTree(rootDebugSequenceHash);
+    }
+  };
+  Object.defineProperty(window, '__GRIFFEL_DEVTOOLS__', {
+    configurable: false,
+    enumerable: false,
+    get() {
+      return devtools;
+    }
+  });
+}
+
+const isDevToolsEnabled = /*#__PURE__*/(() => {
+  var _a;
+  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
+  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
+  try {
+    return Boolean(typeof window !== 'undefined' && ((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem('__GRIFFEL_DEVTOOLS__')));
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @internal
+ *
+ * @param entry - CSS bucket entry that can be either a string or an array
+ * @returns An array where the first element is the CSS rule
+ */
+function normalizeCSSBucketEntry(entry) {
+  if (!Array.isArray(entry)) {
+    return [entry];
+  }
+  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
+    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
+  }
+  return entry;
+}
+
+function createIsomorphicStyleSheet(styleElement, bucketName, elementAttributes) {
+  // no CSSStyleSheet in SSR, just append rules here for server render
+  const __cssRulesForSSR = [];
+  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
+  if (styleElement) {
+    for (const attrName in elementAttributes) {
+      styleElement.setAttribute(attrName, elementAttributes[attrName]);
+    }
+  }
+  function insertRule(rule) {
+    if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
+    }
+    return __cssRulesForSSR.push(rule);
+  }
+  return {
+    elementAttributes,
+    insertRule,
+    element: styleElement,
+    bucketName,
+    cssRules() {
+      if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
+        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
+      }
+      return __cssRulesForSSR;
+    }
+  };
+}
+
+/**
+ * Ordered style buckets using their short pseudo name.
+ *
+ * @internal
+ */
+const styleBucketOrdering = [
+// reset styles
+'r',
+// catch-all
+'d',
+// link
+'l',
+// visited
+'v',
+// focus-within
+'w',
+// focus
+'f',
+// focus-visible
+'i',
+// hover
+'h',
+// active
+'a',
+// at rules for reset styles
+'s',
+// keyframes
+'k',
+// at-rules
+'t',
+// @media rules
+'m',
+// @container rules
+'c'];
+// avoid repeatedly calling `indexOf`to determine order during new insertions
+const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
+/**
+ * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
+ */
+function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
+  const isMediaBucket = bucketName === 'm';
+  const stylesheetKey = isMediaBucket ? bucketName + metadata['m'] : bucketName;
+  if (!renderer.stylesheets[stylesheetKey]) {
+    const tag = targetDocument && targetDocument.createElement('style');
+    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, {
+      ...renderer.styleElementAttributes,
+      ...(isMediaBucket && {
+        media: metadata['m']
+      })
+    });
+    renderer.stylesheets[stylesheetKey] = stylesheet;
+    if (targetDocument && tag) {
+      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
+    }
+  }
+  return renderer.stylesheets[stylesheetKey];
+}
+/**
+ * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
+ *
+ * @param targetDocument - A document
+ * @param insertionPoint - An element that will be used as an initial insertion point
+ * @param targetBucket - The bucket that should be inserted to DOM
+ * @param renderer - Griffel renderer
+ * @param metadata - metadata for CSS rule
+ * @returns - Smallest style element with greater sort order than the current bucket
+ */
+function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata) {
+  const targetOrder = styleBucketOrderingMap[targetBucket];
+  // Similar to javascript sort comparators where
+  // a positive value is increasing sort order
+  // a negative value is decreasing sort order
+  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
+  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
+  if (targetBucket === 'm' && metadata) {
+    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
+    // only reduce the scope of the search and change comparer
+    // if there are other media buckets already on the page
+    if (mediaElements.length) {
+      styleElements = mediaElements;
+      comparer = el => renderer.compareMediaQueries(metadata['m'], el.media);
+    }
+  }
+  const length = styleElements.length;
+  let index = length - 1;
+  while (index >= 0) {
+    const styleElement = styleElements.item(index);
+    if (comparer(styleElement) > 0) {
+      return styleElement.nextSibling;
+    }
+    index--;
+  }
+  if (length > 0) {
+    return styleElements.item(0);
+  }
+  return insertionPoint ? insertionPoint.nextSibling : null;
+}
+
+/**
+ * Suffixes to be ignored in case of error
+ */
+const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
+const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
+/**
+ * @internal
+ *
+ * Calls `sheet.insertRule` and catches errors related to browser prefixes.
+ */
+function safeInsertRule(sheet, ruleCSS) {
+  try {
+    sheet.insertRule(ruleCSS);
+  } catch (e) {
+    // We've disabled these warnings due to false-positive errors with browser prefixes
+    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
+      // eslint-disable-next-line no-console
+      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
+    }
+  }
+}
+
+let lastIndex = 0;
+/** @internal */
+const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+/**
+ * Creates a new instances of a renderer.
+ *
+ * @public
+ */
+function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
+  const {
+    unstable_filterCSSRule,
+    insertionPoint,
+    styleElementAttributes,
+    compareMediaQueries = defaultCompareMediaQueries
+  } = options;
+  const renderer = {
+    insertionCache: {},
+    stylesheets: {},
+    styleElementAttributes: Object.freeze(styleElementAttributes),
+    compareMediaQueries,
+    id: `d${lastIndex++}`,
+    insertCSSRules(cssRules) {
+      // eslint-disable-next-line guard-for-in
+      for (const styleBucketName in cssRules) {
+        const cssRulesForBucket = cssRules[styleBucketName];
+        // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+        for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
+          const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
+          const sheet = getStyleSheetForBucket(styleBucketName, targetDocument, insertionPoint || null, renderer, metadata);
+          if (renderer.insertionCache[ruleCSS]) {
+            continue;
+          }
+          renderer.insertionCache[ruleCSS] = styleBucketName;
+          if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
+            debugData.addCSSRule(ruleCSS);
+          }
+          if (unstable_filterCSSRule) {
+            if (unstable_filterCSSRule(ruleCSS)) {
+              safeInsertRule(sheet, ruleCSS);
+            }
+          } else {
+            safeInsertRule(sheet, ruleCSS);
+          }
+        }
+      }
+    }
+  };
+  if (targetDocument && process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
+    injectDevTools(targetDocument);
+  }
+  return renderer;
+}
+
+// TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
+// once it is published as a standalone npm package, remove this file
+// Adopted version of StackTrace-Parser
+// https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
+const UNKNOWN_FUNCTION = '<unknown>';
+function parseStackTraceLine(line) {
+  return parseChrome(line) || parseGecko(line) || parseJSC(line);
+}
+const chromeRe = /^\s*at (.*?) ?\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\/|[a-z]:\\|\\\\).*?)?\)?\s*$/i;
+const chromeRe2 = /^\s*at ()((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\/|[a-z]:\\|\\\\).*?)\s*$/i;
+const chromeEvalRe = /\((\S*)\)/;
+function parseChrome(line) {
+  const parts = chromeRe.exec(line) || chromeRe2.exec(line);
+  if (!parts) {
+    return null;
+  }
+  let loc = parts[2];
+  const isNative = loc && loc.indexOf('native') === 0; // start of line
+  const isEval = loc && loc.indexOf('eval') === 0; // start of line
+  const submatch = chromeEvalRe.exec(loc);
+  if (isEval && submatch != null) {
+    // throw out eval line/column and use top-most line/column number
+    loc = submatch[1]; // url
+  }
+
+  return {
+    loc: !isNative ? parts[2] : null,
+    name: parts[1] || UNKNOWN_FUNCTION
+  };
+}
+const geckoRe = /^\s*(.*?)(?:\((.*?)\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\[native).*?|[^@]*bundle)\s*$/i;
+const geckoEvalRe = /(\S+) line (\d+)(?: > eval line \d+)* > eval/i;
+function parseGecko(line) {
+  const parts = geckoRe.exec(line);
+  if (!parts) {
+    return null;
+  }
+  let loc = parts[3];
+  const isEval = loc && loc.indexOf(' > eval') > -1;
+  const submatch = geckoEvalRe.exec(loc);
+  if (isEval && submatch != null) {
+    // throw out eval line/column and use top-most line number
+    loc = submatch[1];
+  }
+  return {
+    loc: parts[3],
+    name: parts[1] || UNKNOWN_FUNCTION
+  };
+}
+const javaScriptCoreRe = /^\s*(?:([^@]*)(?:\((.*?)\))?@)?(\S.*?)\s*$/i;
+function parseJSC(line) {
+  const parts = javaScriptCoreRe.exec(line);
+  if (!parts) {
+    return null;
+  }
+  return {
+    loc: parts[3],
+    name: parts[1] || UNKNOWN_FUNCTION
+  };
+}
+
+function getSourceURLfromError() {
+  const stacks = String(new Error().stack).split('\n');
+  const userMakeStyleCallLine = findUserMakeStyleCallInStacks(stacks);
+  if (userMakeStyleCallLine === undefined) {
+    return undefined;
+  }
+  const result = parseStackTraceLine(userMakeStyleCallLine);
+  return result === null || result === void 0 ? void 0 : result.loc;
+}
+function findUserMakeStyleCallInStacks(stacks) {
+  for (let i = stacks.length - 1; i >= 0; --i) {
+    if (stacks[i].includes('at getSourceURLfromError')) {
+      // The error stacks look like:
+      //   getSourceURLfromError
+      //   makeStyles/__styles in griffel core
+      //   makeStyles/__styles in griffel react
+      //   user makeStyles call
+      return stacks[i + 3];
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Default implementation of insertion factory. Inserts styles only once per renderer and performs
+ * insertion immediately after styles computation.
+ *
+ * @internal
+ */
+const insertionFactory$1 = () => {
+  const insertionCache = {};
+  return function insertStyles(renderer, cssRules) {
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+function __styles$1(classesMapBySlot, cssRules, factory = insertionFactory$1) {
+  const insertStyles = factory();
+  let ltrClassNamesForSlots = null;
+  let rtlClassNamesForSlots = null;
+  let sourceURL;
+  if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
+    sourceURL = getSourceURLfromError();
+  }
+  function computeClasses(options) {
+    const {
+      dir,
+      renderer
+    } = options;
+    const isLTR = dir === 'ltr';
+    if (isLTR) {
+      if (ltrClassNamesForSlots === null) {
+        ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    } else {
+      if (rtlClassNamesForSlots === null) {
+        rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
+      }
+    }
+    insertStyles(renderer, cssRules);
+    const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
+    if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
+      debugData.addSequenceDetails(classNamesForSlots, sourceURL);
+    }
+    return classNamesForSlots;
+  }
+  return computeClasses;
+}
+
+/**
+ * Verifies if an application can use DOM.
+ */
+function canUseDOM() {
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+}
+
+const useInsertionEffect =
+// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+// eslint-disable-next-line no-useless-concat
+React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;
+
+const insertionFactory = () => {
+  const insertionCache = {};
+  return function insert(renderer, cssRules) {
+    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+    if (useInsertionEffect && canUseDOM()) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useInsertionEffect(() => {
+        renderer.insertCSSRules(cssRules);
+      }, [renderer, cssRules]);
+      return;
+    }
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};
+
+/**
+ * @private
+ */
+const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
+ */
+function useRenderer() {
+  return React.useContext(RendererContext);
+}
+
+/**
+ * @private
+ */
+const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+function useTextDirection() {
+  return React.useContext(TextDirectionContext);
+}
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function __styles(classesMapBySlot, cssRules) {
+  const getStyles = __styles$1(classesMapBySlot, cssRules, insertionFactory);
+  return function useClasses() {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+const useRootStyles = __styles({
+  "root": {
+    "mc9l5x": "f1w7gpdv",
+    "Bg96gwp": "fez10in",
+    "ycbfsm": "fg4l7m0"
+  },
+  "rtl": {
+    "Bz10aip": "f13rod7r"
+  }
+}, {
+  "d": [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}", ".f13rod7r{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);}"],
+  "t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
+});
+const useIconState = (props, options) => {
+  const {
+    title,
+    primaryFill = "currentColor",
+    ...rest
+  } = props;
+  const state = {
+    ...rest,
+    title: undefined,
+    fill: primaryFill
+  };
+  const styles = useRootStyles();
+  const iconContext = useIconContext();
+  state.className = mergeClasses(styles.root, (options === null || options === void 0 ? void 0 : options.flipInRtl) && (iconContext === null || iconContext === void 0 ? void 0 : iconContext.textDirection) === 'rtl' && styles.rtl, state.className);
+  if (title) {
+    state['aria-label'] = title;
+  }
+  if (!state['aria-label'] && !state['aria-labelledby']) {
+    state['aria-hidden'] = true;
+  } else {
+    state['role'] = 'img';
+  }
+  return state;
+};
+
+const createFluentIcon = (displayName, width, paths, options) => {
+  const viewBoxWidth = width === "1em" ? "20" : width;
+  const Icon = React.forwardRef((props, ref) => {
+    const state = {
+      ...useIconState(props, {
+        flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl
+      }),
+      ref,
+      width,
+      height: width,
+      viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
+      xmlns: "http://www.w3.org/2000/svg"
+    };
+    return React.createElement("svg", state, ...paths.map(d => React.createElement("path", {
+      d,
+      fill: state.fill
+    })));
+  });
+  Icon.displayName = displayName;
+  return Icon;
+};
+
+const ArrowNextFilled = /*#__PURE__*/createFluentIcon('ArrowNextFilled', "1em", ["M13.75 4.75c.38 0 .7.28.74.65l.01.1v9a.75.75 0 0 1-1.5.1V5.5c0-.41.34-.75.75-.75Zm-8.28.22a.75.75 0 0 1 .98-.07l.08.07 4.5 4.5c.27.27.3.68.07.98l-.07.08-4.5 4.5a.75.75 0 0 1-1.13-.98l.07-.08L9.44 10 5.47 6.03a.75.75 0 0 1 0-1.06Z"], {
+  flipInRtl: true
+});
+const ArrowPreviousFilled = /*#__PURE__*/createFluentIcon('ArrowPreviousFilled', "1em", ["M6 4.75c-.38 0-.7.28-.74.65l-.01.1v9a.75.75 0 0 0 1.5.1V5.5A.75.75 0 0 0 6 4.75Zm8.28.22a.75.75 0 0 0-.98-.07l-.08.07-4.5 4.5a.75.75 0 0 0-.07.98l.07.08 4.5 4.5a.75.75 0 0 0 1.13-.98l-.07-.08L10.31 10l3.97-3.97c.3-.3.3-.77 0-1.06Z"], {
+  flipInRtl: true
+});
+const ArrowStepInLeftRegular = /*#__PURE__*/createFluentIcon('ArrowStepInLeftRegular', "1em", ["M5 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM4 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm14 2a.5.5 0 0 1-.5.5H9.7l3.15 3.15a.5.5 0 0 1-.7.7l-4-4a.5.5 0 0 1 0-.7l4-4a.5.5 0 0 1 .7.7L9.71 9.5h7.79c.28 0 .5.22.5.5Z"]);
+const ArrowStepInRightRegular = /*#__PURE__*/createFluentIcon('ArrowStepInRightRegular', "1em", ["M15 10a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM2 10c0-.28.22-.5.5-.5h7.8L7.14 6.35a.5.5 0 1 1 .7-.7l4 4c.2.2.2.5 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H2.5A.5.5 0 0 1 2 10Z"]);
+
+const ChevronDownFilled = /*#__PURE__*/createFluentIcon('ChevronDownFilled', "1em", ["M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"]);
+const ChevronDownRegular = /*#__PURE__*/createFluentIcon('ChevronDownRegular', "1em", ["M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"]);
+const ChevronRightFilled = /*#__PURE__*/createFluentIcon('ChevronRightFilled', "1em", ["M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"]);
+const ChevronRightRegular = /*#__PURE__*/createFluentIcon('ChevronRightRegular', "1em", ["M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"]);
+const ColumnEditFilled = /*#__PURE__*/createFluentIcon('ColumnEditFilled', "1em", ["M3 3.5c0-.28.22-.5.5-.5H4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-.5a.5.5 0 0 1 0-1H4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-.5a.5.5 0 0 1-.5-.5ZM9 3a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h.22l.21-.84a3.2 3.2 0 0 1 .84-1.49L13 11.94V5a2 2 0 0 0-2-2H9Zm6 2v4.94l-1 1V5c0-1.1.9-2 2-2h.5a.5.5 0 0 1 0 1H16a1 1 0 0 0-1 1Zm-4.02 10.38 4.83-4.83a1.87 1.87 0 1 1 2.64 2.64l-4.83 4.83a2.2 2.2 0 0 1-1.02.58l-1.5.37a.89.89 0 0 1-1.07-1.07l.37-1.5c.1-.39.3-.74.58-1.02Z"]);
+const ColumnEditRegular = /*#__PURE__*/createFluentIcon('ColumnEditRegular', "1em", ["M3 3.5c0-.28.22-.5.5-.5H4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-.5a.5.5 0 0 1 0-1H4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-.5a.5.5 0 0 1-.5-.5ZM9 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h.47l-.04.16-.21.84H9a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v6.94l-1 1V5a1 1 0 0 0-1-1H9Zm6 1v4.94l-1 1V5c0-1.1.9-2 2-2h.5a.5.5 0 0 1 0 1H16a1 1 0 0 0-1 1Zm-4.02 10.38 4.83-4.83a1.87 1.87 0 1 1 2.64 2.64l-4.83 4.83a2.2 2.2 0 0 1-1.02.58l-1.5.37a.89.89 0 0 1-1.07-1.07l.37-1.5c.1-.39.3-.74.58-1.02Z"]);
+const DragFilled = /*#__PURE__*/createFluentIcon('DragFilled', "1em", ["M10 2c.2 0 .39.08.53.22l1.5 1.5a.75.75 0 0 1-1.06 1.06l-.22-.22v1.69a.75.75 0 0 1-1.5 0V4.56l-.22.22a.75.75 0 0 1-1.06-1.06l1.5-1.5A.75.75 0 0 1 10 2Zm2 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-9.78-.53a.75.75 0 0 0 0 1.06l1.5 1.5a.75.75 0 0 0 1.06-1.06l-.22-.22h1.69a.75.75 0 0 0 0-1.5H4.56l.22-.22a.75.75 0 0 0-1.06-1.06l-1.5 1.5ZM10 18c.2 0 .39-.08.53-.22l1.5-1.5a.75.75 0 1 0-1.06-1.06l-.22.22v-1.69a.75.75 0 0 0-1.5 0v1.69l-.22-.22a.75.75 0 0 0-1.06 1.06l1.5 1.5c.14.14.33.22.53.22Zm7.78-8.53a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l.22-.22h-1.69a.75.75 0 0 1 0-1.5h1.69l-.22-.22a.75.75 0 0 1 1.06-1.06l1.5 1.5Z"]);
+const DragRegular = /*#__PURE__*/createFluentIcon('DragRegular', "1em", ["M9.65 2.15c.2-.2.5-.2.7 0l2 2a.5.5 0 0 1-.7.7L10.5 3.71V6.5a.5.5 0 0 1-1 0V3.7L8.35 4.86a.5.5 0 1 1-.7-.7l2-2ZM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5.85 1.35 2-2a.5.5 0 0 0 0-.7l-2-2a.5.5 0 0 0-.7.7l1.14 1.15H13.5a.5.5 0 0 0 0 1h2.8l-1.15 1.15a.5.5 0 0 0 .7.7Zm-5.5 5.5 2-2a.5.5 0 0 0-.7-.7l-1.15 1.14V13.5a.5.5 0 0 0-1 0v2.8l-1.15-1.15a.5.5 0 0 0-.7.7l2 2c.2.2.5.2.7 0Zm-8.2-7.5a.5.5 0 0 1 0-.7l2-2a.5.5 0 1 1 .7.7L3.71 9.5H6.5a.5.5 0 0 1 0 1H3.7l1.15 1.15a.5.5 0 0 1-.7.7l-2-2Z"]);
+const FilterFilled = /*#__PURE__*/createFluentIcon('FilterFilled', "1em", ["M12.25 13.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Zm2-4.25a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5h8.5Zm2-4.25a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1 0-1.5h12.5Z"]);
+const FilterRegular = /*#__PURE__*/createFluentIcon('FilterRegular', "1em", ["M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z"]);
+const FilterDismissFilled = /*#__PURE__*/createFluentIcon('FilterDismissFilled', "1em", ["M11.73 10.25A5.46 5.46 0 0 0 14 11c0 .41-.34.75-.75.75h-8.5a.75.75 0 0 1 0-1.5h6.98ZM9.03 6c.04.52.16 1.03.34 1.5H2.75a.75.75 0 0 1 0-1.5h6.27ZM12 15.25a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h4.5c.41 0 .75-.34.75-.75ZM14.5 10a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm1.85-6.35c.2.2.2.5 0 .7L15.21 5.5l1.14 1.15a.5.5 0 0 1-.7.7L14.5 6.21l-1.15 1.14a.5.5 0 0 1-.7-.7l1.14-1.15-1.14-1.15a.5.5 0 0 1 .7-.7l1.15 1.14 1.15-1.14c.2-.2.5-.2.7 0Z"]);
+
+const GroupFilled = /*#__PURE__*/createFluentIcon('GroupFilled', "1em", ["M7 4.5c0 .36-.07.7-.2 1H10c.28 0 .5.22.5.5v2H10a2 2 0 0 0-2 2v.5H6a.5.5 0 0 1-.5-.5V6.8a2.5 2.5 0 0 1-1.5.15V10c0 1.1.9 2 2 2h2v2c0 1.1.9 2 2 2h3.05a2.51 2.51 0 0 1 .16-1.5H10a.5.5 0 0 1-.5-.5v-2h.5a2 2 0 0 0 2-2v-.5h2c.28 0 .5.22.5.5v3.2a2.5 2.5 0 0 1 1.5-.15V10a2 2 0 0 0-2-2h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5Zm3.5 5v.5a.5.5 0 0 1-.5.5h-.5V10c0-.28.22-.5.5-.5h.5ZM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0-11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"]);
+const GroupRegular = /*#__PURE__*/createFluentIcon('GroupRegular', "1em", ["M7 4.5c0 .17-.02.34-.05.5H10a1 1 0 0 1 1 1v2h-1a2 2 0 0 0-2 2v1H6a1 1 0 0 1-1-1V6.95a2.51 2.51 0 0 1-1 0V10c0 1.1.9 2 2 2h2v2c0 1.1.9 2 2 2h3.05a2.51 2.51 0 0 1 0-1H10a1 1 0 0 1-1-1v-2h1a2 2 0 0 0 2-2V9h2a1 1 0 0 1 1 1v3.05a2.51 2.51 0 0 1 1 0V10a2 2 0 0 0-2-2h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5ZM11 9v1a1 1 0 0 1-1 1H9v-1a1 1 0 0 1 1-1h1ZM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0-11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"]);
+const GroupDismissFilled = /*#__PURE__*/createFluentIcon('GroupDismissFilled', "1em", ["M7 4.5c0 .36-.07.7-.2 1H10c.28 0 .5.22.5.5v2H10a2 2 0 0 0-2 2v.5H6a.5.5 0 0 1-.5-.5V6.8a2.5 2.5 0 0 1-1.5.15V10c0 1.1.9 2 2 2h2v2a2 2 0 0 0 1.16 1.81 5.51 5.51 0 0 1 .34-3.6V10c0-.28.22-.5.5-.5h2.2a5.48 5.48 0 0 1 3.61-.34A2 2 0 0 0 14 8h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5Zm-1 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm13-1a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-2.65-1.15a.5.5 0 0 0-.7-.7l-1.15 1.14-1.15-1.14a.5.5 0 0 0-.7.7l1.14 1.15-1.14 1.15a.5.5 0 0 0 .7.7l1.15-1.14 1.15 1.14a.5.5 0 0 0 .7-.7l-1.14-1.15 1.14-1.15Z"]);
+const GroupListRegular = /*#__PURE__*/createFluentIcon('GroupListRegular', "1em", ["M2.5 3a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3V4h1.5a.5.5 0 0 0 0-1h-2Zm0 8a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3v-4h1.5a.5.5 0 0 0 0-1h-2ZM6 4.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11ZM6 7.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11Z"]);
+const NextRegular = /*#__PURE__*/createFluentIcon('NextRegular', "1em", ["M17 3.5a.5.5 0 0 0-1 0v13a.5.5 0 1 0 1 0v-13ZM3 4.25c0-1 1.12-1.6 1.95-1.04l8.5 5.71c.73.5.73 1.57 0 2.07l-8.5 5.8A1.25 1.25 0 0 1 3 15.75V4.25Zm1.39-.2a.25.25 0 0 0-.39.2v11.5c0 .2.23.32.4.2l8.49-5.78a.25.25 0 0 0 0-.42l-8.5-5.7Z"]);
+
+const PinRegular = /*#__PURE__*/createFluentIcon('PinRegular', "1em", ["M10.12 3.14a2 2 0 0 1 3.2-.52l4.06 4.05a2 2 0 0 1-.52 3.2l-3.46 1.74a1.5 1.5 0 0 0-.72.78L11.25 16a1 1 0 0 1-1.64.33L7 13.7 3.7 17H3v-.7L6.3 13l-2.62-2.61a1 1 0 0 1 .34-1.64L7.6 7.32c.34-.14.62-.4.78-.72l1.73-3.46Zm2.5.18a1 1 0 0 0-1.6.26L9.29 7.04a2.5 2.5 0 0 1-1.31 1.2L4.39 9.69l5.93 5.93 1.43-3.59a2.5 2.5 0 0 1 1.2-1.3l3.46-1.74a1 1 0 0 0 .26-1.6l-4.05-4.06Z"]);
+const PinOffRegular = /*#__PURE__*/createFluentIcon('PinOffRegular', "1em", ["M2.85 2.15a.5.5 0 1 0-.7.7L6.9 7.6 4.02 8.75a1 1 0 0 0-.34 1.64L6.3 13 3 16.3v.7h.7L7 13.7l2.61 2.62a1 1 0 0 0 1.64-.34l1.15-2.88 4.75 4.75a.5.5 0 0 0 .7-.7l-15-15Zm8.78 10.18-1.31 3.28-5.93-5.93 3.28-1.3 3.96 3.95Zm1.33-1.62-.08.04.74.75 3.24-1.62a2 2 0 0 0 .52-3.2l-4.05-4.06a2 2 0 0 0-3.2.52L8.5 6.38l.75.74.04-.08 1.73-3.45a1 1 0 0 1 1.6-.26l4.05 4.05a1 1 0 0 1-.26 1.6l-3.45 1.73Z"]);
+const PreviousRegular = /*#__PURE__*/createFluentIcon('PreviousRegular', "1em", ["M3 3.5a.5.5 0 0 1 1 0v13a.5.5 0 0 1-1 0v-13Zm14 .75c0-1-1.12-1.6-1.95-1.04l-8.5 5.71c-.73.5-.73 1.57 0 2.07l8.5 5.8c.83.56 1.95-.03 1.95-1.04V4.25Zm-1.39-.2c.17-.12.39 0 .39.2v11.5c0 .2-.22.32-.4.2l-8.49-5.78a.25.25 0 0 1 0-.42l8.5-5.7Z"]);
+const SaveFilled = /*#__PURE__*/createFluentIcon('SaveFilled', "1em", ["M3 5c0-1.1.9-2 2-2h1v3.5C6 7.33 6.67 8 7.5 8h4c.83 0 1.5-.67 1.5-1.5V3h.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2v-5.5c0-.83-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5V17a2 2 0 0 1-2-2V5Zm9-2H7v3.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V3Zm2 8.5V17H6v-5.5c0-.28.22-.5.5-.5h7c.28 0 .5.22.5.5Z"]);
+const SaveRegular = /*#__PURE__*/createFluentIcon('SaveRegular', "1em", ["M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"]);
+const SearchFilled = /*#__PURE__*/createFluentIcon('SearchFilled', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.38 8.82l4.15 4.15a.75.75 0 0 1-.98 1.13l-.08-.07-4.15-4.15A5.5 5.5 0 1 1 8.5 3Zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"]);
+const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"]);
+const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
+const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
+
+const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
+const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
+
+const Album24Regular = /*#__PURE__*/createFluentIcon('Album24Regular', "24", ["M10 9c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V9Zm2-.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V9a.5.5 0 0 0-.5-.5h-4ZM4 4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4Zm16 1.5c.28 0 .5.22.5.5v12a.5.5 0 0 1-.5.5H7.5v-13H20Zm-16 0h2v13H4a.5.5 0 0 1-.5-.5V6c0-.28.22-.5.5-.5Z"], {
+  flipInRtl: true
+});
+
+const ArrowSortDown20Filled = /*#__PURE__*/createFluentIcon('ArrowSortDown20Filled', "20", ["M9.75 17c.23 0 .45-.1.59-.28l2.94-2.94a.75.75 0 0 0-1.06-1.06l-1.72 1.71V3.75a.75.75 0 0 0-1.5 0v10.7L7.28 12.7a.75.75 0 1 0-1.06 1.06l3 3.01c.15.15.34.22.53.22Z"]);
+const ArrowSortDown20Regular = /*#__PURE__*/createFluentIcon('ArrowSortDown20Regular', "20", ["m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"]);
+const ArrowSortUp20Filled = /*#__PURE__*/createFluentIcon('ArrowSortUp20Filled', "20", ["M9.75 3c.23 0 .45.1.59.28l2.94 2.94a.75.75 0 0 1-1.06 1.06L10.5 5.57v10.68a.75.75 0 0 1-1.5 0V5.55L7.28 7.3a.75.75 0 1 1-1.06-1.06l3-3.01A.73.73 0 0 1 9.75 3Z"]);
+const ArrowSortUp20Regular = /*#__PURE__*/createFluentIcon('ArrowSortUp20Regular', "20", ["M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"]);
+
+const CodeTextOff16Filled = /*#__PURE__*/createFluentIcon('CodeTextOff16Filled', "16", ["M13.25 7h-3a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 0 1.5Zm-3.5-3h4.5a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5Zm-1 7.5h-7a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5Zm-2-7.5a.75.75 0 0 0 0-1.5H4.62L6.12 4h.63Zm8.1 10.15-13-13a.5.5 0 0 0-.7.7l.64.65h-.04a.75.75 0 0 0 0 1.5h1.54l1.5 1.5h-.04a.75.75 0 0 0 0 1.5h1.54l1.5 1.5H3.75a.75.75 0 0 0 0 1.5h5.54l4.86 4.85a.5.5 0 0 0 .7 0 .5.5 0 0 0 0-.7Z"]);
+const CodeTextOff16Regular = /*#__PURE__*/createFluentIcon('CodeTextOff16Regular', "16", ["m6.12 4-1-1H7a.5.5 0 0 1 0 1h-.88ZM9.5 4h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1Zm.5 2a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 0-1H10Zm-1 6H1.5a.5.5 0 0 0 0 1H9a.5.5 0 0 0 0-1Zm5.85 2.15-13-13a.5.5 0 0 0-.7.7L2.29 3H1.5a.5.5 0 0 0 0 1h1.8l2 2h-.8a.5.5 0 0 0 0 1h1.8l2 2H3.5a.5.5 0 0 0 0 1h5.8l4.85 4.85a.5.5 0 0 0 .7 0 .5.5 0 0 0 0-.7Z"]);
+
+const Dismiss24Regular = /*#__PURE__*/createFluentIcon('Dismiss24Regular', "24", ["m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"]);
+
+const DocumentSearch24Regular = /*#__PURE__*/createFluentIcon('DocumentSearch24Regular', "24", ["M11.4 10.95a4.93 4.93 0 0 1 .55 6.32l-.14.2 4.22 4.21.07.09a.77.77 0 0 1-1.08 1.08l-.09-.08-4.25-4.25a4.93 4.93 0 1 1 .73-7.57ZM13.14 2c.6 0 1.17.24 1.59.66l2.81 2.8 2.8 2.82c.43.42.67 1 .67 1.6v9.87c0 1.24-1.01 2.25-2.25 2.25h-1.51c-.04-.3-.15-.58-.34-.83l-.12-.14-.52-.53h2.49c.41 0 .75-.34.75-.75V10h-4.25c-1.2 0-2.17-.92-2.24-2.1L13 7.76V3.5H7.25a.75.75 0 0 0-.75.75v4.42a5.9 5.9 0 0 0-1.5.58v-5C5 3.01 6 2 7.25 2h5.88Zm-7.6 10.04a3.38 3.38 0 1 0 4.79 4.78 3.38 3.38 0 0 0-4.78-4.78Zm8.97-7.48v3.2c0 .37.28.69.65.74H18.45L14.5 4.56Z"]);
+
+const Save20Filled = /*#__PURE__*/createFluentIcon('Save20Filled', "20", ["M3 5c0-1.1.9-2 2-2h1v3.5C6 7.33 6.67 8 7.5 8h4c.83 0 1.5-.67 1.5-1.5V3h.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2v-5.5c0-.83-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5V17a2 2 0 0 1-2-2V5Zm9-2H7v3.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V3Zm2 8.5V17H6v-5.5c0-.28.22-.5.5-.5h7c.28 0 .5.22.5.5Z"]);
+
+const Search24Regular = /*#__PURE__*/createFluentIcon('Search24Regular', "24", ["M10 2.75a7.25 7.25 0 0 1 5.63 11.82l4.9 4.9a.75.75 0 0 1-.98 1.13l-.08-.07-4.9-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z"]);
+
+const ViewDesktop20Filled = /*#__PURE__*/createFluentIcon('ViewDesktop20Filled', "20", ["M1.96 4.5c0-.83.67-1.5 1.5-1.5H16.4c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H12v2.01h1.5a.5.5 0 0 1 0 1h-7a.5.5 0 1 1 0-1H8V14H3.46a1.5 1.5 0 0 1-1.5-1.5v-8ZM9 14v2.01h2V14H9ZM4 5.5v6c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Zm3 0v6c0 .28.22.5.5.5h8a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5Z"]);
+const ViewDesktop20Regular = /*#__PURE__*/createFluentIcon('ViewDesktop20Regular', "20", ["M4 5.5c0-.28.22-.5.5-.5h1c.27 0 .5.22.5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-6ZM7.5 5a.5.5 0 0 0-.5.5v6c0 .28.22.5.5.5h8a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-8Zm-5.54-.5c0-.83.67-1.5 1.5-1.5H16.4c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H12v2.01h1.5a.5.5 0 0 1 0 1h-7a.5.5 0 1 1 0-1H8V14H3.46a1.5 1.5 0 0 1-1.5-1.5v-8ZM9 14v2.01h2V14H9ZM3.46 4a.5.5 0 0 0-.5.5v8c0 .28.23.5.5.5H16.4a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5H3.46Z"]);
+
+const iconFilledClassName = "fui-Icon-filled";
+const iconRegularClassName = "fui-Icon-regular";
+
+const useBundledIconStyles = __styles({
+  "root": {
+    "mc9l5x": "fjseox"
+  },
+  "visible": {
+    "mc9l5x": "f1w7gpdv"
+  }
+}, {
+  "d": [".fjseox{display:none;}", ".f1w7gpdv{display:inline;}"]
+});
+const bundleIcon = (FilledIcon, RegularIcon) => {
+  const Component = props => {
+    const {
+      className,
+      primaryFill = 'currentColor',
+      filled,
+      ...rest
+    } = props;
+    const styles = useBundledIconStyles();
+    return React.createElement(React.Fragment, null, React.createElement(FilledIcon, Object.assign({}, rest, {
+      className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className),
+      fill: primaryFill
+    })), React.createElement(RegularIcon, Object.assign({}, rest, {
+      className: mergeClasses(styles.root, !filled && styles.visible, iconRegularClassName, className),
+      fill: primaryFill
+    })));
+  };
+  Component.displayName = "CompoundIcon";
+  return Component;
+};
+var bundleIcon$1 = bundleIcon;
+
 const range = (from, to, step = 1) => {
     var _a;
     return (_a = [...Array(Math.floor((to - from) / step) + 1)]) === null || _a === void 0 ? void 0 : _a.map((_, i) => from + i * step);
@@ -132,16 +1111,16 @@ const Pagination = (props) => {
                                             }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button, Object.assign({ shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn }, { children: option }), index))), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] }))] })) })));
 };
 
-bundleIcon(SaveFilled, SaveRegular);
-bundleIcon(TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular);
-bundleIcon(SearchFilled, SearchRegular);
-bundleIcon(FilterFilled, FilterRegular);
-const ClearFilterIcon = bundleIcon(CodeTextOff16Filled, CodeTextOff16Regular);
-const ToggleSelectColumnIcon = bundleIcon(ColumnEditFilled, ColumnEditRegular);
-const ToggleGroupColumnIcon = bundleIcon(GroupFilled, GroupRegular);
-const GroupCollapsedIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
-const GroupExpandedIcon = bundleIcon(ChevronDownRegular, ChevronDownFilled);
-bundleIcon(DragFilled, DragRegular);
+bundleIcon$1(SaveFilled, SaveRegular);
+bundleIcon$1(TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular);
+bundleIcon$1(SearchFilled, SearchRegular);
+bundleIcon$1(FilterFilled, FilterRegular);
+const ClearFilterIcon = bundleIcon$1(CodeTextOff16Filled, CodeTextOff16Regular);
+const ToggleSelectColumnIcon = bundleIcon$1(ColumnEditFilled, ColumnEditRegular);
+const ToggleGroupColumnIcon = bundleIcon$1(GroupFilled, GroupRegular);
+const GroupCollapsedIcon = bundleIcon$1(ChevronRightFilled, ChevronRightRegular);
+const GroupExpandedIcon = bundleIcon$1(ChevronDownRegular, ChevronDownFilled);
+bundleIcon$1(DragFilled, DragRegular);
 
 const useGridHeaderStyles = makeStyles({
     tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: tokens.colorBrandBackground2Hover }, shorthands.padding("5px")),
@@ -161,7 +1140,7 @@ const useGridHeaderStyles = makeStyles({
 });
 
 const GridHeader = (props) => {
-    const { table, gridTitle, globalFilter, setGlobalFilter } = props;
+    const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
     const styles = useGridHeaderStyles();
     return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Group Column', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
@@ -173,14 +1152,12 @@ const GridHeader = (props) => {
                                             if (column.id === 'select')
                                                 return null;
                                             return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
-                                        })] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button
-                        // appearance="subtle"
-                        , { 
-                            // appearance="subtle"
-                            onClick: () => props.setViewsDrawerOpen((value) => !value), icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
+                                        })] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button, { onClick: () => {
+                                dispatch({ type: "TOGGLE_VIEW_DRAWER" });
+                            }, icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", drawerState: drawerState, dispatch: dispatch })] }))] })));
 };
 // A debounced input react component
-function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
+function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
     const [value, setValue] = React.useState('');
     React.useEffect(() => {
         setValue(initialValue);
@@ -191,8 +1168,8 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFil
         }, debounce);
         return () => clearTimeout(timeout);
     }, [value, onChange, debounce]);
-    return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, Object.assign({ content: openFilterDrawer ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
-                    setFilterDrawerOpen((open) => !open);
+    return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, Object.assign({ content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+                    dispatch({ type: "TOGGLE_FILTER_DRAWER" });
                 } }) })) }));
 }
 
@@ -275,7 +1252,6 @@ const useGridContainer = (props, ref) => {
     const [expanded, setExpanded] = React.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
     const [columnPinning, setColumnPinning] = React.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
     const [columnSizing, setColumnSizing] = React.useState({});
-    const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const table = useReactTable({
         columns: columns,
         data,
@@ -328,6 +1304,7 @@ const useGridContainer = (props, ref) => {
         getFacetedUniqueValues: getFacetedUniqueValues(),
         getFacetedMinMaxValues: getFacetedMinMaxValues(),
     });
+    const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const getTableState = React.useCallback(() => {
         return {
             pagination,
@@ -342,19 +1319,7 @@ const useGridContainer = (props, ref) => {
             columnPinning,
             columnSizing
         };
-    }, [
-        pagination,
-        sorting,
-        columnFilters,
-        globalFilter,
-        grouping,
-        expanded,
-        rowSelection,
-        columnOrder,
-        columnVisibility,
-        columnPinning,
-        columnSizing
-    ]);
+    }, [pagination, sorting, columnFilters, globalFilter, grouping, expanded, rowSelection, columnOrder, columnVisibility, columnPinning, columnSizing]);
     const resetToDefaultView = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaultTableState = {
@@ -455,6 +1420,44 @@ const useGridContainer = (props, ref) => {
     };
 };
 
+const useTableHeaderStyles = makeStyles({
+    tHead: {
+        zIndex: 1,
+        backgroundColor: tokens.colorNeutralStroke2,
+        color: tokens.colorNeutralForeground1,
+        position: "sticky",
+        top: 0,
+        width: "100%",
+        boxShadow: tokens.shadow2,
+    },
+    tHeadRow: {
+        backgroundColor: tokens.colorNeutralStroke2,
+    },
+    tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
+    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom('1px', 'solid', tokens.colorNeutralBackground1)),
+    tHeadCellDraggable: {
+        height: '100%',
+        cursor: 'grab',
+    },
+    tHeadCellDragging: {
+        opacity: 0.5,
+        cursor: 'grabbing',
+    },
+    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorBrandBackground2Pressed)),
+    tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
+    tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
+    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
+    tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
+    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground1)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
+            borderRightWidth: '4px',
+            borderRightColor: tokens.colorNeutralBackground2Pressed,
+        } }),
+    resizerActive: {
+        borderRightWidth: '4px',
+        borderRightColor: tokens.colorNeutralBackground2Pressed,
+    },
+});
+
 const useCheckboxFilterStyles = makeStyles({
     searchInput: {
         width: '90%',
@@ -462,7 +1465,7 @@ const useCheckboxFilterStyles = makeStyles({
         marginLeft: '10px',
         marginRight: '10px',
     },
-    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
+    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
         /* Track */
         '::-webkit-scrollbar-track': {
             'background-color': '#f1f1f1',
@@ -788,10 +1791,14 @@ const useFilterDrawerStyles$1 = makeStyles({
             'background-color': '#555',
         } }),
 });
-const FilterDrawer = ({ open, setOpen, table }) => {
+const FilterDrawer = ({ drawerState, dispatch, table }) => {
     const headerGroups = table.getHeaderGroups();
     const styles = useFilterDrawerStyles$1();
-    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advanced Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
+    const resetAllFilters = React.useCallback(() => {
+        table.setGlobalFilter('');
+        table.resetColumnFilters();
+    }, [table]);
+    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: drawerState.isFilterDrawerOpen, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }) }, { children: "Advanced Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
                     const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
                     if (!canApplyFilter)
                         return null;
@@ -799,42 +1806,20 @@ const FilterDrawer = ({ open, setOpen, table }) => {
                         const canFilter = header.column.getCanFilter();
                         if (!canFilter)
                             return null;
-                        return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { children: [jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group')) }, header.column.id));
+                        return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", Object.assign({ style: {
+                                    marginTop: "20px",
+                                } }, { children: [jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }), 'filter-group')) }, header.column.id));
                     });
-                }) }))] })));
+                }) })), jsx(DrawerFooter, { children: jsx(Button, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" } }, { children: "Clear All Filters" })) })] })));
 };
 
-const SortAscIcon = bundleIcon(ArrowSortDown20Filled, ArrowSortDown20Regular);
-const SortDescIcon = bundleIcon(ArrowSortUp20Filled, ArrowSortUp20Regular);
+const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
+const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
 const reorderColumn = (draggedColumnId, targetColumnId, columnOrder) => {
     columnOrder.splice(columnOrder.indexOf(targetColumnId), 0, columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0]);
     return [...columnOrder];
 };
-const useTableHeaderCellStyles = makeStyles({
-    tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
-    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom('1px', 'solid', tokens.colorNeutralBackground5)),
-    tHeadCellDraggable: {
-        height: '100%',
-    },
-    tHeadCellDragging: {
-        opacity: 0.5,
-        cursor: 'grab',
-    },
-    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorNeutralBackground5)),
-    tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
-    tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
-    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
-    tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
-    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground5)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
-            borderRightWidth: '4px',
-            borderRightColor: tokens.colorNeutralBackground2Pressed,
-        } }),
-    resizerActive: {
-        borderRightWidth: '4px',
-        borderRightColor: tokens.colorNeutralBackground2Pressed,
-    },
-});
-const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) => {
+function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
     var _a;
     const { getState, setColumnOrder } = table;
     const { columnOrder } = getState();
@@ -856,14 +1841,16 @@ const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
         item: () => column,
         type: "column",
     });
-    const styles = useTableHeaderCellStyles();
+    const styles = useTableHeaderStyles();
     const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
     const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses(styles.tHeadCell, isLeafHeaders || header.isPlaceholder
-            ? undefined
-            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver) }, { children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable, ref: canDragDrop ? dragRef : undefined }, { children: jsxs("div", Object.assign({ className: isLeafHeaders
+    if (header.isPlaceholder) {
+        return (jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell }, { children: header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) })) })));
+    }
+    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders || header.isPlaceholder ? undefined
+            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver) }, { children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined }, { children: jsxs("div", Object.assign({ className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
-                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dropRef : undefined }, { children: [jsx("div", Object.assign({ ref: canDragDrop ? previewRef : undefined }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
+                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined }, { children: [jsx("div", Object.assign({ ref: canDragDrop ? previewRef : undefined }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'left',
@@ -879,29 +1866,53 @@ const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
                                 }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
                                     asc: (jsx("strong", { children: jsx(SortAscIcon, {}) })),
                                     desc: (jsx("strong", { children: jsx(SortDescIcon, {}) })),
-                                }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after" }, { children: [jsx("strong", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] }))) })), !header.isPlaceholder &&
-                            !hideMenu &&
-                            (header.column.getCanSort() ||
-                                header.column.getCanGroup() ||
-                                header.column.getCanFilter()) && (jsx("div", { children: jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) })), jsx(MenuPopover, Object.assign({ className: styles.tHeadMenuPopover }, { children: jsxs(MenuList, { children: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: (e) => {
-                                                                var _a;
-                                                                const isControlKeySelected = e.ctrlKey;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
-                                                            }, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc' }, { children: "Sort A to Z" })), jsx(MenuItem, Object.assign({ onClick: (e) => {
-                                                                var _a;
-                                                                const isControlKeySelected = e.ctrlKey;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
-                                                            }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc' }, { children: "Sort Z to A" })), jsx(MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}) }, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}) }, { children: ["Remove Grouping on", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), jsx(MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: () => {
-                                                                var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
-                                                            }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left' }, { children: "To Left" })), jsx(MenuItem, Object.assign({ onClick: () => {
-                                                                var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
-                                                            }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right' }, { children: "To Right" })), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, Object.assign({ onClick: () => {
-                                                                var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
-                                                            }, icon: jsx(PinOffRegular, {}) }, { children: "Unpin Column" }))), jsx(MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) }))] }) }))] })) })), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] })));
-};
+                                }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after" }, { children: [jsx("strong", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] }))) })), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] })) })), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] })));
+}
+function HeaderMenu(props) {
+    const { header, table, hideMenu } = props;
+    const styles = useTableHeaderStyles();
+    if (hideMenu || header.isPlaceholder)
+        return (jsx(Fragment, { children: " " }));
+    const canHavePopOver = header.column.getCanSort() ||
+        header.column.getCanGroup() ||
+        header.column.getCanFilter();
+    if (!canHavePopOver)
+        return (jsx(Fragment, { children: " " }));
+    return (jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) })), jsx(MenuPopover, Object.assign({ className: styles.tHeadMenuPopover }, { children: jsxs(MenuList, { children: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: (e) => {
+                                        var _a;
+                                        const isControlKeySelected = e.ctrlKey;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
+                                    }, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc' }, { children: "Sort A to Z" })), jsx(MenuItem, Object.assign({ onClick: (e) => {
+                                        var _a;
+                                        const isControlKeySelected = e.ctrlKey;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
+                                    }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc' }, { children: "Sort Z to A" })), jsx(MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}) }, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}) }, { children: ["Remove Grouping on", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), jsx(MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
+                                    }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left' }, { children: "To Left" })), jsx(MenuItem, Object.assign({ onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
+                                    }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right' }, { children: "To Right" })), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, Object.assign({ onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
+                                    }, icon: jsx(PinOffRegular, {}) }, { children: "Unpin Column" }))), jsx(MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) }))] }));
+}
+
+function HeaderRow(props) {
+    const styles = useTableHeaderStyles();
+    const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
+    return (jsxs("tr", Object.assign({ className: styles.tHeadRow }, { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: headerGroup.depth === headerGroupsLength - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
+                        ? 'mixed'
+                        : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))), rowSelectionMode === 'single' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: ' ' }))), headerGroup.headers.map((header) => {
+                return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
+            })] }), headerGroup.id));
+}
+
+function TableHeader(props) {
+    const styles = useTableHeaderStyles();
+    const { table, headerGroups, rowSelectionMode } = props;
+    return (jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) })));
+}
 
 const useLoadingStyles = makeStyles({
     invertedWrapper: {
@@ -960,8 +1971,67 @@ const NoSearchResult = ({ message }) => {
     return (jsxs("div", Object.assign({ className: styles.wrapper }, { children: [jsx("div", Object.assign({ className: styles.iconWrapper }, { children: jsx(DocumentSearch24Regular, {}) })), jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No item found that matches your search term." }) })] })));
 };
 
+const useTableBodyStyles = makeStyles({
+    tBody: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
+    tBodyRow: Object.assign(Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { 
+        // ":nth-child(even)": {
+        //     backgroundColor: tokens.colorNeutralBackground2,
+        // },
+        ":hover": {
+            backgroundColor: tokens.colorNeutralBackground2Hover,
+        } }),
+    tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackground2 }, shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { ":hover": {
+            backgroundColor: tokens.colorBrandBackground2Hover,
+        } }),
+    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
+});
+
+function TableCell({ cell, row }) {
+    var _a;
+    const styles = useTableBodyStyles();
+    const tdStyle = {
+        width: cell.column.getSize(),
+    };
+    if (cell.getIsPlaceholder()) {
+        return jsx("td", { style: tdStyle, className: styles.tBodyCell }, cell.id);
+    }
+    if (cell.getIsGrouped()) {
+        return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: jsx(Button, Object.assign({ onClick: row.getToggleExpandedHandler(), style: {
+                    cursor: row.getCanExpand() ? 'pointer' : 'normal',
+                    textAlign: 'left',
+                }, appearance: "transparent", icon: row.getIsExpanded() ? jsx(GroupExpandedIcon, {}) : jsx(GroupCollapsedIcon, {}) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) })) }), cell.id));
+    }
+    if (cell.getIsAggregated()) {
+        return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }), cell.id));
+    }
+    return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+}
+
+function TableRow({ row, rowSelectionMode }) {
+    const styles = useTableBodyStyles();
+    return (jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+            ? styles.tBodySelectedRow
+            : styles.tBodyRow }, { children: [rowSelectionMode === 'multiple' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Checkbox, { checked: row.getIsSomeSelected()
+                        ? 'mixed'
+                        : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), rowSelectionMode === 'single' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), row.getVisibleCells().map((cell) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }), row.id));
+}
+
+function TableBody(props) {
+    var _a, _b;
+    const styles = useTableBodyStyles();
+    const { rows, rowSelectionMode, virtualRows, totalSize } = props;
+    const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
+        : 0;
+    return (jsxs("tbody", Object.assign({ className: styles.tBody }, { children: [paddingTop > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingTop}px` } }) }))), virtualRows.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
+            }), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })));
+}
+
 const TableContainer = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const styles = useTableStaticStyles();
     const { table, rowSelectionMode } = props;
     const tableContainerRef = React.useRef(null);
@@ -972,54 +2042,12 @@ const TableContainer = (props) => {
         overscan: 10,
     });
     const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
-    const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
-    const paddingBottom = virtualRows.length > 0
-        ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
-        : 0;
     const headerGroups = table.getHeaderGroups();
     // utilities
     const isLoading = props.isLoading && virtualRows.length === 0;
-    const noItems = !isLoading && ((_c = props.data) === null || _c === void 0 ? void 0 : _c.length) === 0;
-    const noSearchResult = !isLoading && ((_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.length) > 0 && virtualRows.length === 0;
-    return (jsxs("div", Object.assign({ ref: tableContainerRef, className: styles.tableContainer }, { children: [jsxs("table", Object.assign({ className: styles.table, "aria-label": "Data Grid" }, { children: [jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxs("tr", { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
-                                            ? 'mixed'
-                                            : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))), rowSelectionMode === 'single' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: ' ' }))), headerGroup.headers.map((header) => {
-                                    return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 }, header.id));
-                                })] }, headerGroup.id))) })), jsxs("tbody", Object.assign({ className: styles.tBody }, { children: [paddingTop > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingTop}px` } }) }))), virtualRows.map((virtualRow) => {
-                                const row = rows[virtualRow.index];
-                                return (jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
-                                        ? styles.tBodySelectedRow
-                                        : styles.tBodyRow }, { children: [rowSelectionMode === 'multiple' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Checkbox, { checked: row.getIsSomeSelected()
-                                                    ? 'mixed'
-                                                    : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), rowSelectionMode === 'single' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), row.getVisibleCells().map((cell) => {
-                                            var _a;
-                                            return (jsx("td", Object.assign({}, {
-                                                key: cell.id,
-                                                style: {
-                                                    // background: cell.getIsGrouped()
-                                                    //   ? "#0aff0082"
-                                                    //   : cell.getIsAggregated()
-                                                    //   ? "#ffa50078"
-                                                    //   : cell.getIsPlaceholder()
-                                                    //   ? "#ff000042"
-                                                    //   : "white",
-                                                    width: cell.column.getSize(),
-                                                },
-                                            }, { className: styles.tBodyCell }, { children: cell.getIsGrouped() ? (
-                                                // If it's a grouped cell, add an expander and row count
-                                                jsx(Button, Object.assign({}, {
-                                                    onClick: row.getToggleExpandedHandler(),
-                                                    style: {
-                                                        cursor: row.getCanExpand() ? 'pointer' : 'normal',
-                                                    },
-                                                }, { appearance: "transparent", icon: row.getIsExpanded() ? (jsx(GroupExpandedIcon, {})) : (jsx(GroupCollapsedIcon, {})) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), ' ', "(", row.subRows.length, ")"] }) }))) : cell.getIsAggregated() ? (
-                                                // If the cell is aggregated, use the Aggregated
-                                                // renderer for cell
-                                                jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : ( // For cells with repeated values, render null
-                                                // Otherwise, just render the regular cell
-                                                flexRender(cell.column.columnDef.cell, cell.getContext())) })));
-                                        })] }), row.id));
-                            }), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })), rowSelectionMode === 'multiple' &&
+    const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && virtualRows.length === 0;
+    return (jsxs("div", Object.assign({ ref: tableContainerRef, className: styles.tableContainer }, { children: [jsxs("table", Object.assign({ className: styles.table, "aria-label": "Data Grid" }, { children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), rowSelectionMode === 'multiple' &&
                         !isLoading &&
                         !noItems &&
                         !noSearchResult && (jsx("tfoot", Object.assign({ className: styles.tFoot }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: "p-1" }, { children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
@@ -1086,38 +2114,68 @@ const useFilterDrawerStyles = makeStyles({
         } }),
 });
 const ViewsDrawer = (props) => {
-    const { open, setOpen, table, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
+    const { drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
     const styles = useFilterDrawerStyles();
     const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
     const onChange = (e, { name, checkedItems }) => {
         setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
     };
-    const resetAllFilters = React.useCallback(() => {
-        table.setGlobalFilter('');
-        table.resetColumnFilters();
-    }, [table]);
-    const resetAllGrouping = React.useCallback(() => {
-        table.resetGrouping();
-    }, [table]);
-    const clearAllSelection = React.useCallback(() => {
-        table.toggleAllRowsSelected(false);
-    }, [table]);
-    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Table Views" })) }), jsxs(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: getTableState, onSave: onTableViewSave }), jsxs(MenuList, Object.assign({ checkedValues: checkedValues, onCheckedValueChange: onChange }, { children: [jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView }, { children: "Default View" })), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
+    // const resetAllFilters = React.useCallback(() => {
+    //   table.setGlobalFilter('');
+    //   table.resetColumnFilters();
+    // }, [table]);
+    // const resetAllGrouping = React.useCallback(() => {
+    //   table.resetGrouping();
+    // }, [table]);
+    // const clearAllSelection = React.useCallback(() => {
+    //   table.toggleAllRowsSelected(false);
+    // }, [table]);
+    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: drawerState.isViewsDrawerOpen, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }) }, { children: "Table Views" })) }), jsxs(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: getTableState, onSave: onTableViewSave }), jsxs(MenuList, Object.assign({ checkedValues: checkedValues, onCheckedValueChange: onChange }, { children: [jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView }, { children: "Default View" })), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
                                 return (jsxs("div", Object.assign({ style: {
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         width: '100%',
                                     } }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName })), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }), view.id + view.viewName));
-                            })] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] })));
+                            })] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView }, { children: "Reset to Default View" }))] }) })] })));
 };
 
+const TableActions = {
+    TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
+    TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
+    OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
+    OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
+    CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
+    CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
+};
+// write a reducer function to handle the state of the table
+function tableReducer(state, action) {
+    switch (action.type) {
+        case TableActions.TOGGLE_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
+        case TableActions.TOGGLE_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
+        case TableActions.OPEN_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
+        case TableActions.OPEN_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
+        case TableActions.CLOSE_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
+        case TableActions.CLOSE_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
+        default:
+            return state;
+    }
+}
+
 function AdvancedTable(props, ref) {
     useStaticStyles();
     const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState, getTableState } = useGridContainer(props, ref);
-    const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
-    const [isViewsDrawerOpen, setIsViewsDrawerOpen] = React.useState(false);
-    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, openFilterDrawer: isFilterDrawerOpen, openViewsDrawer: isViewsDrawerOpen, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, setViewsDrawerOpen: setIsViewsDrawerOpen, applyTableState: applyTableState }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table }), jsx(ViewsDrawer, { table: table, open: isViewsDrawerOpen, setOpen: setIsViewsDrawerOpen, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, getTableState: getTableState, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    const [drawerState, dispatch] = React.useReducer(tableReducer, {
+        isFilterDrawerOpen: false,
+        isViewsDrawerOpen: false
+    });
+    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { drawerState: drawerState, dispatch: dispatch, table: table }), jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, getTableState: getTableState, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);