@prt-ts/fluent-react-table-v2 9.44.3-build.1.0 → 9.46.7-build.2.0

package/index.cjs.js

@@ -0,0 +1,2197 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactComponents = require('@fluentui/react-components');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('react-virtual');
+var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const useStaticStyles = reactComponents.makeStaticStyles({
+    "*": {
+        boxSizing: "border-box",
+    },
+});
+const useTableStaticStyles = reactComponents.makeStyles({
+    tableContainer: Object.assign(Object.assign({ height: "650px", width: "100%" }, reactComponents.shorthands.overflow("hidden", "auto")), { 
+        /* width */
+        ":hover": Object.assign({}, reactComponents.shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "6px", height: "4px" }, reactComponents.shorthands.borderRadius("50%")), 
+        /* Track */
+        "::-webkit-scrollbar-track": {
+            "background-color": "#f1f1f1",
+        }, 
+        /* Handle */
+        "::-webkit-scrollbar-thumb": {
+            "background-color": "#888",
+        }, 
+        /* Handle on hover */
+        "::-webkit-scrollbar-thumb:hover": {
+            "background-color": "#555",
+        } }),
+    table: {
+        width: "100%",
+        borderCollapse: "collapse",
+    },
+    tFoot: {
+        backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+        color: reactComponents.tokens.colorNeutralForeground1,
+        position: "sticky",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+    },
+});
+
+const usePaginationStyle = reactComponents.makeStyles({
+    paginationContainer: Object.assign({ width: "100%", backgroundColor: reactComponents.tokens.colorNeutralBackground2Hover }, reactComponents.shorthands.padding("5px")),
+    wrapper: {
+        columnGap: "0.2rem",
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        justifyContent: "space-between",
+        // if smaller size display flex column
+        "@media screen and (max-width: 640px)": {
+            flexDirection: "column",
+            rowGap: "0.2rem",
+        },
+    },
+    pageBtnContainer: {
+        display: "flex",
+        columnGap: "3px",
+    },
+    pageBtn: {
+        minWidth: "1.5rem",
+        minHeight: "1.5rem",
+        alignContent: "center",
+        alignItems: "center",
+    },
+    pageSelectionWrapper: {
+        minWidth: "1.5rem",
+    },
+    pageSelectionDropdown: {
+        minWidth: "100%",
+    },
+    pageSizeInput: {
+        minWidth: "1.5rem",
+        width: "4rem",
+    },
+});
+
+const IconDirectionContext = React__namespace.createContext(undefined);
+const IconDirectionContextDefaultValue = {};
+IconDirectionContext.Provider;
+const useIconContext = () => React__namespace.useContext(IconDirectionContext) ? React__namespace.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__namespace['useInsertion' + 'Effect'] ? React__namespace['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__namespace.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__namespace.useContext(RendererContext);
+}
+
+/**
+ * @private
+ */
+const TextDirectionContext = /*#__PURE__*/React__namespace.createContext('ltr');
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+function useTextDirection() {
+  return React__namespace.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__namespace.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__namespace.createElement("svg", state, ...paths.map(d => React__namespace.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", ["M4 4c0-1.1.9-2 2-2h6.17a2 2 0 0 1 1.42.59L19.4 8.4A2 2 0 0 1 20 9.83V20a2 2 0 0 1-2 2h-4.02c-.05-.36-.21-.7-.5-.99l-.5-.51H18a.5.5 0 0 0 .5-.5V10H14a2 2 0 0 1-2-2V3.5H6a.5.5 0 0 0-.5.5v7.1c-.53.09-1.03.26-1.5.5V4Zm10 4.5h3.38L13.5 4.62V8c0 .28.22.5.5.5ZM6.5 21c.97 0 1.87-.3 2.6-.83l2.62 2.61a.75.75 0 1 0 1.06-1.06l-2.61-2.61A4.5 4.5 0 1 0 6.5 21Zm0-1.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"]);
+
+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", ["M4.5 10a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0ZM10 3a7 7 0 1 0 4.4 12.45l5.32 5.33a.75.75 0 1 0 1.06-1.06l-5.33-5.33A7 7 0 0 0 10 3Z"]);
+
+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,
+      filled,
+      ...rest
+    } = props;
+    const styles = useBundledIconStyles();
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(FilledIcon, Object.assign({}, rest, {
+      className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className)
+    })), React__namespace.createElement(RegularIcon, Object.assign({}, rest, {
+      className: mergeClasses(styles.root, !filled && styles.visible, iconRegularClassName, className)
+    })));
+  };
+  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);
+};
+const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
+const Pagination = (props) => {
+    const { table, pageSizeOptions = [10, 20, 50, 100, 1000] } = props;
+    const pageSizeSelectionId = reactComponents.useId("page-size-selector");
+    const styles = usePaginationStyle();
+    const totalNumberOfPage = table.getPageCount();
+    const currentPage = table.getState().pagination.pageIndex;
+    const pageSize = table.getState().pagination.pageSize;
+    const pageSelectionOptions = React.useMemo(() => {
+        let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
+        let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
+        if (start < 1) {
+            start = 1;
+            end = totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
+                ? DEFAULT_NUMBER_OF_PAGE_BTN
+                : totalNumberOfPage;
+        }
+        else if (end > totalNumberOfPage) {
+            const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
+            start = possibleStart < 1 ? 1 : possibleStart;
+            end = totalNumberOfPage;
+        }
+        const currentPageOptions = end - start >= 0 ? range(start, end) : [];
+        return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
+    }, [totalNumberOfPage, currentPage]);
+    return (jsxRuntime.jsx("div", { className: styles.paginationContainer, children: jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsx("div", { className: styles.pageSelectionWrapper, children: jsxRuntime.jsx(reactComponents.Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map((option) => (jsxRuntime.jsx(reactComponents.Option, { value: `${option}`, children: `${option}` }, option))) }) }), jsxRuntime.jsxs("div", { className: styles.pageBtnContainer, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("span", { children: ["Page", " ", jsxRuntime.jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxRuntime.jsxs("span", { children: [" ", "| Go to page:", " ", jsxRuntime.jsx(reactComponents.Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
+                                                const page = data.value ? Number(e.target.value) - 1 : 0;
+                                                if (page >= 0 && page < table.getPageCount()) {
+                                                    table.setPageIndex(page);
+                                                }
+                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsxRuntime.jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsxRuntime.jsx(reactComponents.Button, { 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))), jsxRuntime.jsx(reactComponents.Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsxRuntime.jsx(reactComponents.Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsxRuntime.jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
+};
+
+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 = reactComponents.makeStyles({
+    tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: reactComponents.tokens.colorBrandBackground2Hover }, reactComponents.shorthands.padding("5px")),
+    tableTopHeaderLeft: {
+        display: "flex",
+        justifyContent: "flex-start",
+    },
+    tableTopHeaderRight: Object.assign({ display: "flex", justifyContent: "flex-end" }, reactComponents.shorthands.gap("3px")),
+    tableTopHeaderColumnTogglePopover: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        width: "100%",
+        height: "100%",
+    },
+});
+
+const GridHeader = (props) => {
+    const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
+    const styles = useGridHeaderStyles();
+    return (jsxRuntime.jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsxRuntime.jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxRuntime.jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsxRuntime.jsx(reactComponents.Divider, { vertical: true }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
+                                            if (column.id === 'select')
+                                                return null;
+                                            if (column.id === 'id')
+                                                return null;
+                                            return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsxRuntime.jsx("span", { children: column.columnDef.id }) }, column.id));
+                                        })] }) })] }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Toggle Columns" }), jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsxRuntime.jsx(reactComponents.Divider, {}), table.getAllLeafColumns().map((column) => {
+                                            if (column.id === 'select')
+                                                return null;
+                                            return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
+                                        })] }) })] }), jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Table Views Management', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
+                                dispatch({ type: "TOGGLE_VIEW_DRAWER" });
+                            }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.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, drawerState, dispatch, }) {
+    const [value, setValue] = React__namespace.useState('');
+    React__namespace.useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+    React__namespace.useEffect(() => {
+        const timeout = setTimeout(() => {
+            onChange(value);
+        }, debounce);
+        return () => clearTimeout(timeout);
+    }, [value, onChange, debounce]);
+    return (jsxRuntime.jsx(reactComponents.Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsxRuntime.jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsxRuntime.jsx(reactComponents.Tooltip, { content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? jsxRuntime.jsx(FilterDismissFilled, {}) : jsxRuntime.jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+                    dispatch({ type: "TOGGLE_FILTER_DRAWER" });
+                } }) }) }));
+}
+
+const arrIncludesSome = (row, columnId, value) => {
+    // Rank the item
+    const rowValue = row.getValue(columnId);
+    const passed = Array.isArray(value) &&
+        ((value === null || value === void 0 ? void 0 : value.length) === 0 || value.includes(`${rowValue}`));
+    return passed;
+};
+const dateRange = (row, columnId, value) => {
+    // filter by date range
+    const rowValue = row.getValue(columnId);
+    // compare the date range
+    // case if no start date or end date is selected
+    // case if start date is selected
+    // case if end date is selected
+    if (!value || value.length === 0) {
+        return true;
+    }
+    else if (value.length === 2 && value[0] && !value[1]) {
+        return typeof rowValue.getMonth === 'function' && rowValue >= value[0];
+    }
+    else if (value.length === 2 && !value[0] && value[1]) {
+        return typeof rowValue.getMonth === 'function' && rowValue <= value[1];
+    }
+    else if (value.length === 2 && !value[0] && !value[1]) {
+        return true;
+    }
+    const passed = typeof rowValue.getMonth === 'function' && value[0] <= rowValue && rowValue <= value[1];
+    return passed;
+};
+const date = (row, columnId, value) => {
+    var _a;
+    // filter by date range
+    const rowValue = row.getValue(columnId);
+    // compare the date range
+    // case if no start date or end date is selected
+    // case if start date is selected
+    // case if end date is selected
+    if (!value) {
+        return true;
+    }
+    const passed = typeof rowValue.getMonth === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
+    return passed;
+};
+
+const getLeafColumns = (columns) => {
+    if (!columns || !columns.length) {
+        return [];
+    }
+    return columns.reduce((totalItems, col) => {
+        if (!col.columns) {
+            totalItems.push(col);
+        }
+        return totalItems.concat(getLeafColumns(col.columns));
+    }, []);
+};
+
+const useGridContainer = (props, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { columns, data, rowSelectionMode } = props;
+    const [pagination, setPagination] = React__namespace.useState({
+        pageSize: props.pageSize || 10,
+        pageIndex: 0,
+    });
+    const [sorting, setSorting] = React__namespace.useState((_a = props.sortingState) !== null && _a !== void 0 ? _a : []);
+    const [columnFilters, setColumnFilters] = React__namespace.useState((_b = props.columnFilterState) !== null && _b !== void 0 ? _b : []);
+    const [globalFilter, setGlobalFilter] = React__namespace.useState((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '');
+    const [grouping, setGrouping] = React__namespace.useState((_d = props.groupingState) !== null && _d !== void 0 ? _d : []);
+    const [rowSelection, setRowSelection] = React__namespace.useState((_e = props.rowSelectionState) !== null && _e !== void 0 ? _e : {});
+    const [columnVisibility, setColumnVisibility] = React__namespace.useState((_f = props.columnVisibility) !== null && _f !== void 0 ? _f : {});
+    const [columnOrder, setColumnOrder] = React__namespace.useState(() => {
+        if (props.columnOrderState) {
+            return props.columnOrderState;
+        }
+        const leafColumns = getLeafColumns(columns);
+        return leafColumns.map((col) => col.id);
+    });
+    const [expanded, setExpanded] = React__namespace.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
+    const [columnPinning, setColumnPinning] = React__namespace.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
+    const [columnSizing, setColumnSizing] = React__namespace.useState({});
+    const table = reactTable.useReactTable({
+        columns: columns,
+        data,
+        filterFns: {
+            arrIncludesSome: arrIncludesSome,
+            inDateRange: dateRange,
+            matchDate: date,
+        },
+        initialState: {
+            expanded: true,
+        },
+        state: {
+            pagination,
+            sorting,
+            columnFilters,
+            globalFilter,
+            grouping,
+            expanded,
+            rowSelection,
+            columnOrder,
+            columnVisibility,
+            columnPinning,
+            columnSizing,
+        },
+        columnResizeMode: 'onChange',
+        enableRowSelection: rowSelectionMode !== undefined,
+        enableMultiRowSelection: rowSelectionMode === 'multiple',
+        enableFilters: true,
+        enableGlobalFilter: true,
+        enableColumnFilters: true,
+        filterFromLeafRows: true,
+        autoResetExpanded: false,
+        onRowSelectionChange: setRowSelection,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onGroupingChange: setGrouping,
+        onColumnOrderChange: setColumnOrder,
+        onExpandedChange: setExpanded,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnPinningChange: setColumnPinning,
+        onColumnSizingChange: setColumnSizing,
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        getPaginationRowModel: reactTable.getPaginationRowModel(),
+        getSortedRowModel: reactTable.getSortedRowModel(),
+        getFilteredRowModel: reactTable.getFilteredRowModel(),
+        getGroupedRowModel: reactTable.getGroupedRowModel(),
+        getExpandedRowModel: reactTable.getExpandedRowModel(),
+        getFacetedUniqueValues: reactTable.getFacetedUniqueValues(),
+        getFacetedMinMaxValues: reactTable.getFacetedMinMaxValues(),
+    });
+    const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
+    const resetToDefaultView = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const defaultTableState = {
+            pagination: {
+                pageSize: props.pageSize || 10,
+                pageIndex: 0,
+            },
+            sorting: (_a = props.sortingState) !== null && _a !== void 0 ? _a : [],
+            columnFilters: (_b = props.columnFilterState) !== null && _b !== void 0 ? _b : [],
+            globalFilter: (_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '',
+            grouping: (_d = props.groupingState) !== null && _d !== void 0 ? _d : [],
+            expanded: (_e = props.expandedState) !== null && _e !== void 0 ? _e : {},
+            rowSelection: (_f = props.rowSelectionState) !== null && _f !== void 0 ? _f : {},
+            columnOrder: (() => {
+                if (props.columnOrderState) {
+                    return props.columnOrderState;
+                }
+                const leafColumns = getLeafColumns(columns);
+                return leafColumns.map((col) => col.id);
+            })(),
+            columnVisibility: (_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {},
+            columnPinning: (_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {},
+            columnSizing: {},
+            rowPinning: {},
+            columnSizingInfo: {
+                "startOffset": null,
+                "startSize": null,
+                "deltaOffset": null,
+                "deltaPercentage": null,
+                "isResizingColumn": false,
+                "columnSizingStart": []
+            },
+        };
+        return applyTableState(defaultTableState);
+    };
+    const applyTableState = (tableState) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (tableState) {
+            // set table state
+            console.log('tableState', tableState);
+            setSorting((_a = tableState.sorting) !== null && _a !== void 0 ? _a : []);
+            setColumnFilters((_b = tableState.columnFilters) !== null && _b !== void 0 ? _b : []);
+            setGlobalFilter((_c = tableState.globalFilter) !== null && _c !== void 0 ? _c : '');
+            setGrouping((_d = tableState.grouping) !== null && _d !== void 0 ? _d : []);
+            setExpanded((_e = tableState.expanded) !== null && _e !== void 0 ? _e : {});
+            setRowSelection((_f = tableState.rowSelection) !== null && _f !== void 0 ? _f : {});
+            setColumnOrder((_g = tableState.columnOrder) !== null && _g !== void 0 ? _g : []);
+            setColumnVisibility((_h = tableState.columnVisibility) !== null && _h !== void 0 ? _h : {});
+            setColumnPinning((_j = tableState.columnPinning) !== null && _j !== void 0 ? _j : {});
+            setColumnSizing((_k = tableState.columnSizing) !== null && _k !== void 0 ? _k : {});
+            setTimeout(() => {
+                var _a;
+                setPagination((_a = tableState.pagination) !== null && _a !== void 0 ? _a : {
+                    pageSize: props.pageSize || 10,
+                    pageIndex: 0,
+                });
+            }, 10);
+            return true;
+        }
+        return false;
+    };
+    React__namespace.useImperativeHandle(ref, () => {
+        return {
+            table,
+            getTableState: table.getState,
+            applyTableState,
+            resetToDefaultView
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table]);
+    const headerMenu = React__namespace.useMemo(() => {
+        if (props.headerMenu) {
+            const selectedRows = (table === null || table === void 0 ? void 0 : table.getSelectedRowModel().flatRows.map((row) => row.original)) || [];
+            return props.headerMenu(selectedRows);
+        }
+        return null;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.headerMenu, rowSelection]);
+    // add event listeners to listen ctrl + shift + t and log current table state
+    React__namespace.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.ctrlKey && event.altKey && event.key === 'c') {
+                event.preventDefault();
+                const tableState = table.getState();
+                // log table state to console
+                console.log(tableState);
+                // save table state to local storage
+                localStorage.setItem('hotkey_table_state_temp', JSON.stringify(tableState));
+                // copy table state to clipboard
+                navigator.clipboard.writeText(JSON.stringify(tableState));
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [table]);
+    return {
+        table,
+        globalFilter,
+        tableViews,
+        headerMenu,
+        setGlobalFilter,
+        resetToDefaultView,
+        applyTableState
+    };
+};
+
+const useTableHeaderStyles = reactComponents.makeStyles({
+    tHead: {
+        zIndex: 1,
+        backgroundColor: reactComponents.tokens.colorNeutralStroke2,
+        color: reactComponents.tokens.colorNeutralForeground1,
+        position: "sticky",
+        top: 0,
+        width: "100%",
+        boxShadow: reactComponents.tokens.shadow2,
+    },
+    tHeadRow: {
+        backgroundColor: reactComponents.tokens.colorNeutralStroke2,
+    },
+    tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: reactComponents.tokens.fontSizeBase300, fontWeight: reactComponents.tokens.fontWeightBold, minWidth: '1rem' }, reactComponents.shorthands.padding('2px', '4px')),
+    tHeadNonLeafCell: Object.assign({}, reactComponents.shorthands.borderBottom('1px', 'solid', reactComponents.tokens.colorNeutralBackground1)),
+    tHeadCellDraggable: {
+        height: '100%',
+        cursor: 'grab',
+    },
+    tHeadCellDragging: {
+        opacity: 0.5,
+        cursor: 'grabbing',
+    },
+    tHeadCellOver: Object.assign({ backgroundColor: reactComponents.tokens.colorNeutralStroke1 }, reactComponents.shorthands.border(reactComponents.tokens.strokeWidthThin, 'dashed', reactComponents.tokens.colorBrandBackground2Pressed)),
+    tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, reactComponents.shorthands.padding('3px', '4px')),
+    tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, reactComponents.shorthands.padding('3px', '4px')),
+    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), reactComponents.shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
+    tHeadMenuPopover: Object.assign(Object.assign({}, reactComponents.shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
+    resizer: Object.assign(Object.assign({}, reactComponents.shorthands.borderRight('1px', 'solid', reactComponents.tokens.colorNeutralBackground1)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
+            borderRightWidth: '4px',
+            borderRightColor: reactComponents.tokens.colorNeutralBackground2Pressed,
+        } }),
+    resizerActive: {
+        borderRightWidth: '4px',
+        borderRightColor: reactComponents.tokens.colorNeutralBackground2Pressed,
+    },
+});
+
+const useCheckboxFilterStyles = reactComponents.makeStyles({
+    searchInput: {
+        width: '90%',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), reactComponents.shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const FilterMultiSelectCheckbox = ({ column, table, }) => {
+    var _a, _b, _c;
+    const firstValue = (_a = table
+        .getPreFilteredRowModel()
+        .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
+    const columnFilterValue = column.getFilterValue();
+    const [filterOptions, setFilterOptions] = React__namespace.useState([]);
+    React__namespace.useEffect(() => {
+        const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
+            ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
+            : Array.from(column.getFacetedUniqueValues().keys()).sort();
+        setFilterOptions(uniqueSortedOptions);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [column.getFacetedUniqueValues()]);
+    const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
+    const filterOptionsFiltered = React__namespace.useMemo(() => {
+        if (!localColumnFilterValue)
+            return filterOptions;
+        return filterOptions.filter((option) => {
+            var _a, _b, _c;
+            return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
+    }, [localColumnFilterValue, filterOptions]);
+    const filterContainer = React__namespace.useRef(null);
+    const rowVirtualizer = reactVirtual.useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
+    });
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
+    const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
+        (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
+        ? 'mixed'
+        : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
+            (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
+    const styles = useCheckboxFilterStyles();
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsxRuntime.jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
+                            if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
+                                column.setFilterValue(undefined);
+                                return;
+                            }
+                            column.setFilterValue([
+                                ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                            ]);
+                        }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
+                        var _a;
+                        const value = `${filterOptionsFiltered[row.index]}`;
+                        return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
+                                if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
+                                    column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
+                                    return;
+                                }
+                                column.setFilterValue((old) => [
+                                    ...(old || []),
+                                    value,
+                                ]);
+                            }, label: value }, `${column.id}-${row.index}`));
+                    }), paddingBottom > 0 && (jsxRuntime.jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
+};
+
+const useRadioFilterStyles = reactComponents.makeStyles({
+    searchInput: {
+        width: '90%',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const FilterSelectRadio = ({ column, table, }) => {
+    var _a, _b, _c;
+    const firstValue = (_a = table
+        .getPreFilteredRowModel()
+        .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
+    const columnFilterValue = column.getFilterValue();
+    const [filterOptions, setFilterOptions] = React__namespace.useState([]);
+    React__namespace.useEffect(() => {
+        const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
+            ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
+            : Array.from(column.getFacetedUniqueValues().keys()).sort();
+        setFilterOptions(uniqueSortedOptions);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [column.getFacetedUniqueValues()]);
+    const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
+    const filterOptionsFiltered = React__namespace.useMemo(() => {
+        if (!localColumnFilterValue)
+            return filterOptions;
+        return filterOptions.filter((option) => {
+            var _a, _b, _c;
+            return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
+    }, [localColumnFilterValue, filterOptions]);
+    const filterContainer = React__namespace.useRef(null);
+    const rowVirtualizer = reactVirtual.useVirtual({
+        parentRef: filterContainer,
+        size: filterOptionsFiltered.length,
+        overscan: 15,
+    });
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
+        : 0;
+    const styles = useRadioFilterStyles();
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsxRuntime.jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
+                            if (data.value === '') {
+                                column.setFilterValue([]);
+                                return;
+                            }
+                            column.setFilterValue([data.value]);
+                        }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
+                                const value = filterOptionsFiltered[row.index];
+                                return jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value);
+                            })] }), paddingBottom > 0 && (jsxRuntime.jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
+};
+
+const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    }
+});
+const FilterNumberRange = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
+    const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const handleMinChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
+    };
+    const handleMaxChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
+    };
+    const styles = useNumberRangeFilterStyles$2();
+    return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'Min:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
+                        ? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
+                        : ''}` }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'Max:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
+                        ? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
+                        : ''}` }) })] }));
+};
+
+const useNumberRangeFilterStyles$1 = reactComponents.makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+});
+const FilterDateRange = (props) => {
+    var _a, _b, _c, _d;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
+    const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
+    const handleMinChange = (date) => {
+        if (!date) {
+            column.setFilterValue((old) => [undefined, old === null || old === void 0 ? void 0 : old[1]]);
+            return;
+        }
+        column.setFilterValue((old) => [date, old === null || old === void 0 ? void 0 : old[1]]);
+    };
+    const handleMaxChange = (date) => {
+        if (!date) {
+            column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
+            return;
+        }
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
+    };
+    const styles = useNumberRangeFilterStyles$1();
+    return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'From Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `From Date`, size: 'small', allowTextInput: true }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'To Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `To Date`, size: 'small', allowTextInput: true }) })] }));
+};
+
+const useNumberRangeFilterStyles = reactComponents.makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+});
+const FilterDate = (props) => {
+    var _a, _b, _c, _d;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
+    const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
+    const onDateSelect = (date) => {
+        if (!date) {
+            column.setFilterValue(undefined);
+            return;
+        }
+        column.setFilterValue(date);
+    };
+    const styles = useNumberRangeFilterStyles();
+    return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: columnFilterValue || null, min: min, max: max, onSelectDate: onDateSelect, className: styles.searchInput, placeholder: `Select a date`, size: 'small', allowTextInput: true }) }));
+};
+
+const useFilterStyles = reactComponents.makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+});
+const Filter = ({ column, table, }) => {
+    var _a, _b;
+    const filterFunctionName = column.columnDef.filterFn;
+    const styles = useFilterStyles();
+    switch (filterFunctionName) {
+        case 'arrIncludesSome':
+            return jsxRuntime.jsx(FilterMultiSelectCheckbox, { column: column, table: table });
+        case 'arrIncludesAll':
+        case 'arrIncludes':
+            return jsxRuntime.jsx(FilterSelectRadio, { column: column, table: table });
+        case 'inNumberRange':
+            return jsxRuntime.jsx(FilterNumberRange, { column: column, table: table });
+        case 'inDateRange': {
+            const firstValue = (_a = table
+                .getPreFilteredRowModel()
+                .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
+            if (typeof firstValue.getMonth === 'function') {
+                return jsxRuntime.jsx(FilterDateRange, { column: column, table: table });
+            }
+            break;
+        }
+        case 'matchDate': {
+            const firstValue = (_b = table
+                .getPreFilteredRowModel()
+                .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+            if (typeof firstValue.getMonth === 'function') {
+                return jsxRuntime.jsx(FilterDate, { column: column, table: table });
+            }
+            break;
+        }
+    }
+    return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactComponents.Field, { size: 'small', className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
+                    column.setFilterValue(data.value);
+                }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
+};
+
+const useFilterDrawerStyles$1 = reactComponents.makeStyles({
+    drawerBody: Object.assign(Object.assign({}, reactComponents.shorthands.overflow('hidden', 'auto')), { 
+        /* width */
+        ':hover': Object.assign({}, reactComponents.shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const FilterDrawer = ({ drawerState, dispatch, table }) => {
+    const headerGroups = table.getHeaderGroups();
+    const styles = useFilterDrawerStyles$1();
+    const resetAllFilters = React__namespace.useCallback(() => {
+        table.setGlobalFilter('');
+        table.resetColumnFilters();
+    }, [table]);
+    return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState.isFilterDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Advanced Filters" }) }), jsxRuntime.jsx(reactComponents.DrawerBody, { 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;
+                    return headerGroup.headers.map((header) => {
+                        const canFilter = header.column.getCanFilter();
+                        if (!canFilter)
+                            return null;
+                        return (jsxRuntime.jsx("div", { children: header.column.getCanFilter() && (jsxRuntime.jsxs("div", { style: {
+                                    marginTop: "20px",
+                                }, children: [jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: ["Filter by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), jsxRuntime.jsx(Filter, { column: header.column, table: table })] }, 'filter-group')) }, header.column.id));
+                    });
+                }) }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
+};
+
+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];
+};
+function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
+    var _a;
+    const { getState, setColumnOrder } = table;
+    const { columnOrder } = getState();
+    const { column } = header;
+    const [{ isOver }, dropRef] = reactDnd.useDrop({
+        accept: "column",
+        drop: (draggedColumn) => {
+            const newColumnOrder = reorderColumn(draggedColumn.id, column.id, columnOrder);
+            setColumnOrder(newColumnOrder);
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+    });
+    const [{ isDragging }, dragRef, previewRef] = reactDnd.useDrag({
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        item: () => column,
+        type: "column",
+    });
+    const styles = useTableHeaderStyles();
+    const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
+    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
+    if (header.isPlaceholder) {
+        return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, children: header.column.getCanResize() && (jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) })) }));
+    }
+    return (jsxRuntime.jsxs("th", { colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders || header.isPlaceholder ? undefined
+            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver), children: [jsxRuntime.jsx("div", { className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined, children: jsxRuntime.jsxs("div", { className: isLeafHeaders
+                        ? styles.tLeafHeadCellContent
+                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined, children: [jsxRuntime.jsx("div", { ref: canDragDrop ? previewRef : undefined, children: header.isPlaceholder ? null : (jsxRuntime.jsxs(reactComponents.Button, { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'left',
+                                    flex: 1,
+                                }, onClick: (e) => {
+                                    if (!header.column.getCanSort())
+                                        return;
+                                    header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
+                                }, onDoubleClick: () => {
+                                    if (!header.column.getCanGroup())
+                                        return;
+                                    header.column.getToggleGroupingHandler()();
+                                }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
+                                    asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
+                                    desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
+                                }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsxRuntime.jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsxRuntime.jsx(PinRegular, {})] })) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) }), header.column.getCanResize() && (jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] }));
+}
+function HeaderMenu(props) {
+    const { header, table, hideMenu } = props;
+    const styles = useTableHeaderStyles();
+    if (hideMenu || header.isPlaceholder)
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
+    const canHavePopOver = header.column.getCanSort() ||
+        header.column.getCanGroup() ||
+        header.column.getCanFilter();
+    if (!canHavePopOver)
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
+    return (jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { className: styles.tHeadMenuPopover, children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [header.column.getCanSort() && (jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsxs(reactComponents.MenuGroupHeader, { children: ["Sort by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
+                                        var _a;
+                                        const isControlKeySelected = e.ctrlKey;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
+                                    }, icon: jsxRuntime.jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
+                                        var _a;
+                                        const isControlKeySelected = e.ctrlKey;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
+                                    }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsxs(reactComponents.MenuGroupHeader, { children: ["Group by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping on", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsxs(reactComponents.MenuGroupHeader, { children: ["Pin Column", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
+                                    }, icon: jsxRuntime.jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "To Left" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
+                                    }, icon: jsxRuntime.jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "To Right" }), ['left', 'right'].includes(header.column.getIsPinned()) && (jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
+                                        var _a;
+                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
+                                    }, icon: jsxRuntime.jsx(PinOffRegular, {}), children: "Unpin Column" })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsxs(reactComponents.MenuGroupHeader, { children: ["Filter by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), jsxRuntime.jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) })] }));
+}
+
+function HeaderRow(props) {
+    const styles = useTableHeaderStyles();
+    const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
+    return (jsxRuntime.jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 1 && (jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomeRowsSelected()
+                        ? 'mixed'
+                        : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
+                return (jsxRuntime.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 (jsxRuntime.jsx("thead", { className: styles.tHead, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxRuntime.jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
+}
+
+const useLoadingStyles = reactComponents.makeStyles({
+    invertedWrapper: {
+        backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    },
+    row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, reactComponents.shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
+});
+
+const Loading = (props) => {
+    const { numberOfItems = 16, numberOfColumns = 5 } = props;
+    const styles = useLoadingStyles();
+    return (jsxRuntime.jsx("div", { className: styles.invertedWrapper, children: jsxRuntime.jsx(reactComponents.Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsxRuntime.jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
+                    if (i === 0) {
+                        return jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24 }, i);
+                    }
+                    return jsxRuntime.jsx(reactComponents.SkeletonItem, { size: 16 }, i);
+                }) }, i))) }) }));
+};
+
+const useNoItemGridStyles = reactComponents.makeStyles({
+    wrapper: {
+        backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+        display: "flex",
+        flexWrap: "wrap",
+        alignContent: "center",
+        justifyContent: "center",
+        minHeight: "300px",
+    }
+});
+
+const NoItemGrid = ({ message }) => {
+    const styles = useNoItemGridStyles();
+    return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No Data to Show." }) }) }));
+};
+
+const useNoFilterMatchStyles = reactComponents.makeStyles({
+    wrapper: {
+        backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+        display: "flex",
+        flexDirection: "column",
+        flexWrap: "wrap",
+        alignContent: "center",
+        justifyContent: "center",
+        minHeight: "300px",
+    },
+    iconWrapper: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignContent: "center",
+        justifyContent: "center",
+    }
+});
+
+const NoSearchResult = ({ message }) => {
+    const styles = useNoFilterMatchStyles();
+    return (jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsx("div", { className: styles.iconWrapper, children: jsxRuntime.jsx(DocumentSearch24Regular, {}) }), jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No item found that matches your search term." }) })] }));
+};
+
+const useTableBodyStyles = reactComponents.makeStyles({
+    tBody: Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
+    tBodyRow: Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), { 
+        // ":nth-child(even)": {
+        //     backgroundColor: tokens.colorNeutralBackground2,
+        // },
+        ":hover": {
+            backgroundColor: reactComponents.tokens.colorNeutralBackground2Hover,
+        } }),
+    tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackground2 }, reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), { ":hover": {
+            backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
+        } }),
+    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, reactComponents.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 jsxRuntime.jsx("td", { style: tdStyle, className: styles.tBodyCell }, cell.id);
+    }
+    if (cell.getIsGrouped()) {
+        return (jsxRuntime.jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsxRuntime.jsx(reactComponents.Button, { onClick: row.getToggleExpandedHandler(), style: {
+                    cursor: row.getCanExpand() ? 'pointer' : 'normal',
+                    textAlign: 'left',
+                }, appearance: "transparent", icon: row.getIsExpanded() ? jsxRuntime.jsx(GroupExpandedIcon, {}) : jsxRuntime.jsx(GroupCollapsedIcon, {}), children: jsxRuntime.jsxs("strong", { children: [reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) }) }, cell.id));
+    }
+    if (cell.getIsAggregated()) {
+        return (jsxRuntime.jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsxRuntime.jsx("strong", { children: reactTable.flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+    }
+    return (jsxRuntime.jsx("td", { style: tdStyle, className: styles.tBodyCell, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+}
+
+function TableRow({ row, rowSelectionMode }) {
+    const styles = useTableBodyStyles();
+    return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+            ? styles.tBodySelectedRow
+            : styles.tBodyRow, children: [rowSelectionMode === 'multiple' && (jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
+                        ? 'mixed'
+                        : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), rowSelectionMode === 'single' && (jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), row.getVisibleCells().map((cell) => (jsxRuntime.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 (jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
+            }), paddingBottom > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }));
+}
+
+const TableContainer = (props) => {
+    var _a, _b;
+    const styles = useTableStaticStyles();
+    const { table, rowSelectionMode } = props;
+    const tableContainerRef = React__namespace.useRef(null);
+    const { rows } = table.getRowModel();
+    const rowVirtualizer = reactVirtual.useVirtual({
+        parentRef: tableContainerRef,
+        size: rows.length,
+        overscan: 5,
+    });
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const headerGroups = table.getHeaderGroups();
+    // utilities
+    const isLoading = props.isLoading && virtualRows.length === 0;
+    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 (jsxRuntime.jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, children: [jsxRuntime.jsxs("table", { className: styles.table, "aria-label": "Data Grid", children: [jsxRuntime.jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsxRuntime.jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), rowSelectionMode === 'multiple' &&
+                        !isLoading &&
+                        !noItems &&
+                        !noSearchResult && (jsxRuntime.jsx("tfoot", { className: styles.tFoot, children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { className: "p-1", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomePageRowsSelected()
+                                            ? 'mixed'
+                                            : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxRuntime.jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }))] }), isLoading && jsxRuntime.jsx(Loading, {}), noItems && jsxRuntime.jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsxRuntime.jsx(NoSearchResult, { message: props.noFilterMatchPage })] }));
+};
+
+const ViewSaveForm = (props) => {
+    const [errorMessage, setErrorMessage] = React__namespace.useState('');
+    const [isFormOpen, setIsFormOpen] = React__namespace.useState(false);
+    const inputRef = React__namespace.useRef(null);
+    const checkboxRef = React__namespace.useRef(null);
+    if (!isFormOpen) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: 'view-manager', value: 'View Manager', onClick: () => setIsFormOpen(true), icon: jsxRuntime.jsx(Save20Filled, {}), children: "Save Current View" }) }), jsxRuntime.jsx(reactComponents.Divider, {})] }));
+    }
+    return (jsxRuntime.jsxs("div", { style: {
+            boxSizing: 'border-box',
+            padding: '0.4rem',
+            border: '1px solid #ccc',
+            marginBottom: '0.5rem'
+        }, children: [jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Enter View Details" }), jsxRuntime.jsx(reactComponents.Field, { label: "View Name", validationMessage: errorMessage, validationState: errorMessage ? "error" : undefined, hint: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Give your view a name and save it." }), children: jsxRuntime.jsx(reactComponents.Input, { ref: inputRef, placeholder: "View Name" }) }), jsxRuntime.jsx(reactComponents.Field, { hint: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Global view is accessible to everybody in the system." }), children: jsxRuntime.jsx(reactComponents.Checkbox, { ref: checkboxRef, label: "Set as global view" }) }), jsxRuntime.jsxs("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '0.5rem'
+                }, children: [jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
+                            setIsFormOpen(false);
+                            setErrorMessage('');
+                        }, children: "Cancel" }), jsxRuntime.jsx(reactComponents.Button, { appearance: 'primary', onClick: () => {
+                            var _a, _b, _c;
+                            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+                                setErrorMessage('View name is required');
+                                return;
+                            }
+                            const viewName = inputRef.current.value;
+                            const isGlobal = (_b = checkboxRef.current) === null || _b === void 0 ? void 0 : _b.checked;
+                            const tableView = {
+                                id: Math.random() * 100,
+                                viewName: viewName,
+                                tableState: props.getTableState(),
+                                isGlobal: isGlobal,
+                                isViewOwner: true
+                            };
+                            (_c = props === null || props === void 0 ? void 0 : props.onSave) === null || _c === void 0 ? void 0 : _c.call(props, tableView);
+                            setErrorMessage('');
+                            setIsFormOpen(false);
+                        }, children: "Save" })] })] }));
+};
+
+const useFilterDrawerStyles = reactComponents.makeStyles({
+    drawerBody: Object.assign(Object.assign({}, reactComponents.shorthands.overflow('hidden', 'auto')), { 
+        /* width */
+        ':hover': Object.assign({}, reactComponents.shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const ViewsDrawer = (props) => {
+    const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, onTableViewSave } = props;
+    const styles = useFilterDrawerStyles();
+    const [checkedValues, setCheckedValues] = React__namespace.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 (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState.isViewsDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }), children: "Table Views" }) }), jsxRuntime.jsxs(reactComponents.DrawerBody, { className: styles.drawerBody, children: [onTableViewSave && jsxRuntime.jsx(ViewSaveForm, { mode: 'create', getTableState: table.getState, onSave: onTableViewSave }), jsxRuntime.jsxs(reactComponents.MenuList, { checkedValues: checkedValues, onCheckedValueChange: onChange, children: [jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: 'table-views', value: 'Default View', icon: jsxRuntime.jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView, children: "Default View" }), tableViews.length > 0 && jsxRuntime.jsx(reactComponents.MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
+                                return (jsxRuntime.jsxs("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                        width: '100%',
+                                    }, children: [jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsxRuntime.jsx(ViewDesktop20Regular, {}), children: view.viewName }), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }, view.id + view.viewName));
+                            })] })] }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.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 } = useGridContainer(props, ref);
+    const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
+        isFilterDrawerOpen: false,
+        isViewsDrawerOpen: false
+    });
+    return (jsxRuntime.jsxs(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: [jsxRuntime.jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsxRuntime.jsx(FilterDrawer, { drawerState: drawerState, dispatch: dispatch, table: table }), jsxRuntime.jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] }), jsxRuntime.jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] }));
+}
+const ForwardedAdvancedTable = React__namespace.forwardRef(AdvancedTable);
+
+Object.defineProperty(exports, 'createColumnHelper', {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});
+exports.Table = ForwardedAdvancedTable;