@prt-ts/fluent-react-table-v2 9.48.0-build-1.0 → 9.48.0-build-1.2

package/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, useArrowNavigationGroup, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, useFocusableGroup, Skeleton, SkeletonItem, Subtitle2Stronger, Radio, RadioGroup, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, MenuItemRadio } from '@fluentui/react-components';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, useArrowNavigationGroup, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, useFocusableGroup, Skeleton, SkeletonItem, Subtitle2Stronger, Radio, RadioGroup, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, MenuItemRadio } from '@fluentui/react-components';
+import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, MoreVerticalFilled, MoreVerticalRegular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, PinFilled, PinRegular, EyeTrackingOffFilled, EyeTrackingOffRegular, TextExpandFilled, TextExpandRegular, TextCollapseFilled, TextCollapseRegular, GroupListRegular, ArrowSortFilled, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, PinOffRegular, ArrowStepInLeftRegular, ArrowStepInRightRegular, TextClearFormattingFilled, DocumentSearch24Regular, StarRegular, SwipeUpFilled, SwipeDownFilled, Dismiss24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
 import { Show, For, Switch, Case } from '@prt-ts/react-control-flow';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
@@ -96,1007 +97,6 @@ const usePaginationStyle = makeStyles({
     },
 });
 
-const IconDirectionContext = React.createContext(undefined);
-const IconDirectionContextDefaultValue = {};
-IconDirectionContext.Provider;
-const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue;
-
-// ----
-// Heads up!
-// These constants are global and will be shared between Griffel instances.
-// Any change in them should happen only in a MAJOR version. If it happens,
-// please change "__NAMESPACE_PREFIX__" to include a version.
-const __GLOBAL__ = typeof window === 'undefined' ? global : window;
-const __NAMESPACE_PREFIX__ = '@griffel/';
-function getGlobalVar(name, defaultValue) {
-  if (!__GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)]) {
-    __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)] = defaultValue;
-  }
-  return __GLOBAL__[Symbol.for(__NAMESPACE_PREFIX__ + name)];
-}
-/** @internal */
-const DEBUG_RESET_CLASSES = /*#__PURE__*/getGlobalVar('DEBUG_RESET_CLASSES', {});
-/** @internal */
-const DEFINITION_LOOKUP_TABLE = /*#__PURE__*/getGlobalVar('DEFINITION_LOOKUP_TABLE', {});
-// ----
-/** @internal */
-const DATA_BUCKET_ATTR = 'data-make-styles-bucket';
-/** @internal */
-const RESET_HASH_PREFIX = 'r';
-/** @internal */
-const SEQUENCE_HASH_LENGTH = 7;
-/** @internal */
-const SEQUENCE_PREFIX = '___';
-/** @internal */
-const DEBUG_SEQUENCE_SEPARATOR = '_';
-/** @internal */
-const SEQUENCE_SIZE = process.env.NODE_ENV === 'production' ? SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH : SEQUENCE_PREFIX.length + SEQUENCE_HASH_LENGTH + DEBUG_SEQUENCE_SEPARATOR.length + SEQUENCE_HASH_LENGTH;
-// indexes for values in LookupItem tuple
-/** @internal */
-const LOOKUP_DEFINITIONS_INDEX = 0;
-/** @internal */
-const LOOKUP_DIR_INDEX = 1;
-
-/* eslint-disable */
-// Inspired by https://github.com/garycourt/murmurhash-js
-// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
-function murmur2(str) {
-  // 'm' and 'r' are mixing constants generated offline.
-  // They're not really 'magic', they just happen to work well.
-  // const m = 0x5bd1e995;
-  // const r = 24;
-  // Initialize the hash
-  var h = 0; // Mix 4 bytes at a time into the hash
-
-  var k,
-      i = 0,
-      len = str.length;
-
-  for (; len >= 4; ++i, len -= 4) {
-    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
-    k =
-    /* Math.imul(k, m): */
-    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
-    k ^=
-    /* k >>> r: */
-    k >>> 24;
-    h =
-    /* Math.imul(k, m): */
-    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
-    /* Math.imul(h, m): */
-    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  } // Handle the last few bytes of the input array
-
-
-  switch (len) {
-    case 3:
-      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
-
-    case 2:
-      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
-
-    case 1:
-      h ^= str.charCodeAt(i) & 0xff;
-      h =
-      /* Math.imul(h, m): */
-      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  } // Do a few final mixes of the hash to ensure the last few
-  // bytes are well-incorporated.
-
-
-  h ^= h >>> 13;
-  h =
-  /* Math.imul(h, m): */
-  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
-  return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-
-function padEndHash(value) {
-  const hashLength = value.length;
-  if (hashLength === SEQUENCE_HASH_LENGTH) {
-    return value;
-  }
-  for (let i = hashLength; i < SEQUENCE_HASH_LENGTH; i++) {
-    value += '0';
-  }
-  return value;
-}
-function hashSequence(classes, dir, sequenceIds = []) {
-  if (process.env.NODE_ENV === 'production') {
-    return SEQUENCE_PREFIX + padEndHash(murmur2(classes + dir));
-  }
-  return SEQUENCE_PREFIX + padEndHash(murmur2(classes + dir)) + DEBUG_SEQUENCE_SEPARATOR + padEndHash(murmur2(sequenceIds.join('')));
-}
-
-/**
- * Reduces a classname map for slot to a classname string. Uses classnames according to text directions.
- *
- * @private
- */
-function reduceToClassName(classMap, dir) {
-  let className = '';
-  // eslint-disable-next-line guard-for-in
-  for (const propertyHash in classMap) {
-    const classNameMapping = classMap[propertyHash];
-    if (classNameMapping) {
-      const hasRTLClassName = Array.isArray(classNameMapping);
-      if (dir === 'rtl') {
-        className += (hasRTLClassName ? classNameMapping[1] : classNameMapping) + ' ';
-      } else {
-        className += (hasRTLClassName ? classNameMapping[0] : classNameMapping) + ' ';
-      }
-    }
-  }
-  return className.slice(0, -1);
-}
-/**
- * Reduces classname maps for slots to classname strings. Registers them in a definition cache to be used by
- * `mergeClasses()`.
- *
- * @internal
- */
-function reduceToClassNameForSlots(classesMapBySlot, dir) {
-  const classNamesForSlots = {};
-  // eslint-disable-next-line guard-for-in
-  for (const slotName in classesMapBySlot) {
-    const slotClasses = reduceToClassName(classesMapBySlot[slotName], dir);
-    // Handles a case when there are no classes in a set i.e. "makeStyles({ root: {} })"
-    if (slotClasses === '') {
-      classNamesForSlots[slotName] = '';
-      continue;
-    }
-    const sequenceHash = hashSequence(slotClasses, dir);
-    const resultSlotClasses = sequenceHash + ' ' + slotClasses;
-    DEFINITION_LOOKUP_TABLE[sequenceHash] = [classesMapBySlot[slotName], dir];
-    classNamesForSlots[slotName] = resultSlotClasses;
-  }
-  return classNamesForSlots;
-}
-
-// Contains a mapping of previously resolved sequences of atomic classnames
-const mergeClassesCachedResults = {};
-function mergeClasses() {
-  // arguments are parsed manually to avoid double loops as TS & Babel transforms rest via an additional loop
-  // @see https://babeljs.io/docs/en/babel-plugin-transform-parameters
-  /* eslint-disable prefer-rest-params */
-  let dir = null;
-  let resultClassName = '';
-  // Is used as a cache key to avoid object merging
-  let sequenceMatch = '';
-  const sequencesIds = new Array(arguments.length);
-  let containsResetClassName = '';
-  for (let i = 0; i < arguments.length; i++) {
-    const className = arguments[i];
-    if (typeof className === 'string' && className !== '') {
-      // All classes generated by `makeStyles()` are prefixed by a sequence hash, this allows to identify class sets
-      // without parsing each className in a string
-      const sequenceIndex = className.indexOf(SEQUENCE_PREFIX);
-      if (sequenceIndex === -1) {
-        if (process.env.NODE_ENV !== 'production') {
-          className.split(' ').forEach(entry => {
-            if (entry.startsWith(RESET_HASH_PREFIX) && DEBUG_RESET_CLASSES[entry]) {
-              if (containsResetClassName) {
-                // eslint-disable-next-line no-console
-                console.error('mergeClasses(): a passed string contains multiple classes produced by makeResetStyles (' + `${className} & ${resultClassName}, this will lead to non-deterministic behavior. Learn more:` + 'https://griffel.js.org/react/api/make-reset-styles#limitations' + '\n' + `Source string: ${className}`);
-              } else {
-                containsResetClassName = entry;
-              }
-            }
-          });
-        }
-        resultClassName += className + ' ';
-      } else {
-        const sequenceId = className.substr(sequenceIndex, SEQUENCE_SIZE);
-        // Handles a case with mixed classnames, i.e. "ui-button ATOMIC_CLASSES"
-        if (sequenceIndex > 0) {
-          resultClassName += className.slice(0, sequenceIndex);
-        }
-        sequenceMatch += sequenceId;
-        sequencesIds[i] = sequenceId;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if (className.indexOf(SEQUENCE_PREFIX, sequenceIndex + 1) !== -1) {
-          // eslint-disable-next-line no-console
-          console.error('mergeClasses(): a passed string contains multiple identifiers of atomic classes (classes that start ' + `with "${SEQUENCE_PREFIX}"), it's possible that passed classes were concatenated in a wrong way. ` + `Source string: ${className}`);
-        }
-      }
-    }
-  }
-  // .slice() there allows to avoid trailing space for non-atomic classes
-  // "ui-button ui-flex " => "ui-button ui-flex"
-  if (sequenceMatch === '') {
-    return resultClassName.slice(0, -1);
-  }
-  // It's safe to reuse results to avoid continuous merging as results are stable
-  // "__seq1 ... __seq2 ..." => "__seq12 ..."
-  const mergeClassesResult = mergeClassesCachedResults[sequenceMatch];
-  if (mergeClassesResult !== undefined) {
-    return resultClassName + mergeClassesResult;
-  }
-  const sequenceMappings = [];
-  for (let i = 0; i < arguments.length; i++) {
-    const sequenceId = sequencesIds[i];
-    if (sequenceId) {
-      const sequenceMapping = DEFINITION_LOOKUP_TABLE[sequenceId];
-      if (sequenceMapping) {
-        sequenceMappings.push(sequenceMapping[LOOKUP_DEFINITIONS_INDEX]);
-        if (process.env.NODE_ENV !== 'production') {
-          if (dir !== null && dir !== sequenceMapping[LOOKUP_DIR_INDEX]) {
-            // eslint-disable-next-line no-console
-            console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that has different direction ` + `(dir="${sequenceMapping[1] ? 'rtl' : 'ltr'}") setting than other classes. This is not supported. ` + `Source string: ${arguments[i]}`);
-          }
-        }
-        dir = sequenceMapping[LOOKUP_DIR_INDEX];
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.error(`mergeClasses(): a passed string contains an identifier (${sequenceId}) that does not match any entry ` + `in cache. Source string: ${arguments[i]}`);
-        }
-      }
-    }
-  }
-  // eslint-disable-next-line prefer-spread
-  const resultDefinitions = Object.assign.apply(Object,
-  // .assign() mutates the first object, we can't mutate mappings as it will produce invalid results later
-  [{}].concat(sequenceMappings));
-  let atomicClassNames = reduceToClassName(resultDefinitions, dir);
-  // Each merge of classes generates a new sequence of atomic classes that needs to be registered
-  const newSequenceHash = hashSequence(atomicClassNames, dir, sequencesIds);
-  atomicClassNames = newSequenceHash + ' ' + atomicClassNames;
-  mergeClassesCachedResults[sequenceMatch] = atomicClassNames;
-  DEFINITION_LOOKUP_TABLE[newSequenceHash] = [resultDefinitions, dir];
-  return resultClassName + atomicClassNames;
-}
-
-const sequenceDetails = {};
-const cssRules = /*#__PURE__*/new Set();
-const debugData = {
-  getChildrenSequences: debugSequenceHash => {
-    const key = Object.keys(mergeClassesCachedResults).find(key => mergeClassesCachedResults[key].startsWith(debugSequenceHash));
-    if (key) {
-      // key of the mergeClasses cache contains merge order
-      return key.split(SEQUENCE_PREFIX).filter(sequence => sequence.length).map(sequence => SEQUENCE_PREFIX + sequence);
-    }
-    return [];
-  },
-  addCSSRule: rule => {
-    cssRules.add(rule);
-  },
-  addSequenceDetails: (classNamesForSlots, sourceURL) => {
-    Object.entries(classNamesForSlots).forEach(([slotName, sequenceHash]) => {
-      sequenceDetails[sequenceHash.substring(0, SEQUENCE_SIZE)] = {
-        slotName,
-        sourceURL
-      };
-    });
-  },
-  getCSSRules: () => {
-    return Array.from(cssRules);
-  },
-  getSequenceDetails: sequenceHash => {
-    return sequenceDetails[sequenceHash];
-  }
-};
-
-function getDirectionalClassName(classes, direction) {
-  return Array.isArray(classes) ? direction === 'rtl' ? classes[1] : classes[0] : classes;
-}
-function getDebugClassNames(lookupItem, parentLookupItem, parentDebugClassNames, overridingSiblings) {
-  const classesMapping = lookupItem[0];
-  const direction = lookupItem[1];
-  return Object.entries(classesMapping).map(([propertyHash, classes]) => {
-    const className = getDirectionalClassName(classes, direction);
-    let overriddenBy;
-    if (parentDebugClassNames && parentLookupItem) {
-      const matching = parentDebugClassNames.find(({
-        className: parentClassName
-      }) => parentClassName === className);
-      if (!matching && parentLookupItem[0][propertyHash]) {
-        // parent node does not have current className (style), but has current selector:
-        // style is overriden in current merging by another rule in sibling node
-        overriddenBy = getDirectionalClassName(parentLookupItem[0][propertyHash], parentLookupItem[1]);
-      } else if (matching && parentLookupItem[0][propertyHash]) {
-        // parent node has current className (style), and has current selector:
-        // case 1. style is not overriden during current merging; it may be overriden in higher level of merging
-        // case 2. style is overriden in current merging by exactly the same rule in sibling nodes
-        const siblingHasSameRule = overridingSiblings ? overridingSiblings.filter(({
-          debugClassNames
-        }) => debugClassNames.filter(({
-          className: siblingClassName
-        }) => siblingClassName === className).length > 0).length > 0 : false;
-        overriddenBy = siblingHasSameRule ? matching.className // case 2
-        : matching.overriddenBy; // case 1
-      } else if (!matching && !parentLookupItem[0][propertyHash]) {
-        // parent node does not have current className (style), and does not have current selector:
-        // this case is not possible
-        overriddenBy = undefined;
-      } else if (matching && !parentLookupItem[0][propertyHash]) {
-        // parent node has current className (style), but does not have current selector:
-        // this case is not possible
-        overriddenBy = undefined;
-      }
-    }
-    return {
-      className,
-      overriddenBy
-    };
-  });
-}
-
-function getDebugTree(debugSequenceHash, parentNode) {
-  const lookupItem = DEFINITION_LOOKUP_TABLE[debugSequenceHash];
-  if (lookupItem === undefined) {
-    return undefined;
-  }
-  const parentLookupItem = parentNode ? DEFINITION_LOOKUP_TABLE[parentNode.sequenceHash] : undefined;
-  const debugClassNames = getDebugClassNames(lookupItem, parentLookupItem, parentNode === null || parentNode === void 0 ? void 0 : parentNode.debugClassNames, parentNode === null || parentNode === void 0 ? void 0 : parentNode.children);
-  const node = {
-    sequenceHash: debugSequenceHash,
-    direction: lookupItem[1],
-    children: [],
-    debugClassNames
-  };
-  const childrenSequences = debugData.getChildrenSequences(node.sequenceHash);
-  childrenSequences.reverse() // first process the overriding children that are merged last
-  .forEach(sequence => {
-    const child = getDebugTree(sequence, node);
-    if (child) {
-      node.children.push(child);
-    }
-  });
-  // if it's leaf (makeStyle node), get css rules
-  if (!node.children.length) {
-    node.rules = {};
-    node.debugClassNames.forEach(({
-      className
-    }) => {
-      const mapData = debugData.getSequenceDetails(debugSequenceHash);
-      if (mapData) {
-        node.slot = mapData.slotName;
-        node.sourceURL = mapData.sourceURL;
-      }
-      const cssRule = debugData.getCSSRules().find(cssRule => {
-        return cssRule.includes(className);
-      });
-      node.rules[className] = cssRule;
-    });
-  }
-  return node;
-}
-
-function injectDevTools(document) {
-  const window = document.defaultView;
-  if (!window || window.__GRIFFEL_DEVTOOLS__) {
-    return;
-  }
-  const devtools = {
-    getInfo: element => {
-      const rootDebugSequenceHash = Array.from(element.classList).find(className => className.startsWith(SEQUENCE_PREFIX));
-      if (rootDebugSequenceHash === undefined) {
-        return undefined;
-      }
-      return getDebugTree(rootDebugSequenceHash);
-    }
-  };
-  Object.defineProperty(window, '__GRIFFEL_DEVTOOLS__', {
-    configurable: false,
-    enumerable: false,
-    get() {
-      return devtools;
-    }
-  });
-}
-
-const isDevToolsEnabled = /*#__PURE__*/(() => {
-  var _a;
-  // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked
-  // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni
-  try {
-    return Boolean(typeof window !== 'undefined' && ((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem('__GRIFFEL_DEVTOOLS__')));
-  } catch (e) {
-    return false;
-  }
-})();
-
-/**
- * @internal
- *
- * @param entry - CSS bucket entry that can be either a string or an array
- * @returns An array where the first element is the CSS rule
- */
-function normalizeCSSBucketEntry(entry) {
-  if (!Array.isArray(entry)) {
-    return [entry];
-  }
-  if (process.env.NODE_ENV !== 'production' && entry.length > 2) {
-    throw new Error('CSS Bucket contains an entry with greater than 2 items, please report this to https://github.com/microsoft/griffel/issues');
-  }
-  return entry;
-}
-
-function createIsomorphicStyleSheet(styleElement, bucketName, elementAttributes) {
-  // no CSSStyleSheet in SSR, just append rules here for server render
-  const __cssRulesForSSR = [];
-  elementAttributes[DATA_BUCKET_ATTR] = bucketName;
-  if (styleElement) {
-    for (const attrName in elementAttributes) {
-      styleElement.setAttribute(attrName, elementAttributes[attrName]);
-    }
-  }
-  function insertRule(rule) {
-    if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
-      return styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
-    }
-    return __cssRulesForSSR.push(rule);
-  }
-  return {
-    elementAttributes,
-    insertRule,
-    element: styleElement,
-    bucketName,
-    cssRules() {
-      if (styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) {
-        return Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText);
-      }
-      return __cssRulesForSSR;
-    }
-  };
-}
-
-/**
- * Ordered style buckets using their short pseudo name.
- *
- * @internal
- */
-const styleBucketOrdering = [
-// reset styles
-'r',
-// catch-all
-'d',
-// link
-'l',
-// visited
-'v',
-// focus-within
-'w',
-// focus
-'f',
-// focus-visible
-'i',
-// hover
-'h',
-// active
-'a',
-// at rules for reset styles
-'s',
-// keyframes
-'k',
-// at-rules
-'t',
-// @media rules
-'m',
-// @container rules
-'c'];
-// avoid repeatedly calling `indexOf`to determine order during new insertions
-const styleBucketOrderingMap = /*#__PURE__*/styleBucketOrdering.reduce((acc, cur, j) => {
-  acc[cur] = j;
-  return acc;
-}, {});
-/**
- * Lazily adds a `<style>` bucket to the `<head>`. This will ensure that the style buckets are ordered.
- */
-function getStyleSheetForBucket(bucketName, targetDocument, insertionPoint, renderer, metadata = {}) {
-  const isMediaBucket = bucketName === 'm';
-  const stylesheetKey = isMediaBucket ? bucketName + metadata['m'] : bucketName;
-  if (!renderer.stylesheets[stylesheetKey]) {
-    const tag = targetDocument && targetDocument.createElement('style');
-    const stylesheet = createIsomorphicStyleSheet(tag, bucketName, {
-      ...renderer.styleElementAttributes,
-      ...(isMediaBucket && {
-        media: metadata['m']
-      })
-    });
-    renderer.stylesheets[stylesheetKey] = stylesheet;
-    if (targetDocument && tag) {
-      targetDocument.head.insertBefore(tag, findInsertionPoint(targetDocument, insertionPoint, bucketName, renderer, metadata));
-    }
-  }
-  return renderer.stylesheets[stylesheetKey];
-}
-/**
- * Finds an element before which the new bucket style element should be inserted following the bucket sort order.
- *
- * @param targetDocument - A document
- * @param insertionPoint - An element that will be used as an initial insertion point
- * @param targetBucket - The bucket that should be inserted to DOM
- * @param renderer - Griffel renderer
- * @param metadata - metadata for CSS rule
- * @returns - Smallest style element with greater sort order than the current bucket
- */
-function findInsertionPoint(targetDocument, insertionPoint, targetBucket, renderer, metadata) {
-  const targetOrder = styleBucketOrderingMap[targetBucket];
-  // Similar to javascript sort comparators where
-  // a positive value is increasing sort order
-  // a negative value is decreasing sort order
-  let comparer = el => targetOrder - styleBucketOrderingMap[el.getAttribute(DATA_BUCKET_ATTR)];
-  let styleElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}]`);
-  if (targetBucket === 'm' && metadata) {
-    const mediaElements = targetDocument.head.querySelectorAll(`[${DATA_BUCKET_ATTR}="${targetBucket}"]`);
-    // only reduce the scope of the search and change comparer
-    // if there are other media buckets already on the page
-    if (mediaElements.length) {
-      styleElements = mediaElements;
-      comparer = el => renderer.compareMediaQueries(metadata['m'], el.media);
-    }
-  }
-  const length = styleElements.length;
-  let index = length - 1;
-  while (index >= 0) {
-    const styleElement = styleElements.item(index);
-    if (comparer(styleElement) > 0) {
-      return styleElement.nextSibling;
-    }
-    index--;
-  }
-  if (length > 0) {
-    return styleElements.item(0);
-  }
-  return insertionPoint ? insertionPoint.nextSibling : null;
-}
-
-/**
- * Suffixes to be ignored in case of error
- */
-const ignoreSuffixes = /*#__PURE__*/['-moz-placeholder', '-moz-focus-inner', '-moz-focusring', '-ms-input-placeholder', '-moz-read-write', '-moz-read-only'].join('|');
-const ignoreSuffixesRegex = /*#__PURE__*/new RegExp(`:(${ignoreSuffixes})`);
-/**
- * @internal
- *
- * Calls `sheet.insertRule` and catches errors related to browser prefixes.
- */
-function safeInsertRule(sheet, ruleCSS) {
-  try {
-    sheet.insertRule(ruleCSS);
-  } catch (e) {
-    // We've disabled these warnings due to false-positive errors with browser prefixes
-    if (process.env.NODE_ENV !== 'production' && !ignoreSuffixesRegex.test(ruleCSS)) {
-      // eslint-disable-next-line no-console
-      console.error(`There was a problem inserting the following rule: "${ruleCSS}"`, e);
-    }
-  }
-}
-
-let lastIndex = 0;
-/** @internal */
-const defaultCompareMediaQueries = (a, b) => a < b ? -1 : a > b ? 1 : 0;
-/**
- * Creates a new instances of a renderer.
- *
- * @public
- */
-function createDOMRenderer(targetDocument = typeof document === 'undefined' ? undefined : document, options = {}) {
-  const {
-    unstable_filterCSSRule,
-    insertionPoint,
-    styleElementAttributes,
-    compareMediaQueries = defaultCompareMediaQueries
-  } = options;
-  const renderer = {
-    insertionCache: {},
-    stylesheets: {},
-    styleElementAttributes: Object.freeze(styleElementAttributes),
-    compareMediaQueries,
-    id: `d${lastIndex++}`,
-    insertCSSRules(cssRules) {
-      // eslint-disable-next-line guard-for-in
-      for (const styleBucketName in cssRules) {
-        const cssRulesForBucket = cssRules[styleBucketName];
-        // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
-        for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {
-          const [ruleCSS, metadata] = normalizeCSSBucketEntry(cssRulesForBucket[i]);
-          const sheet = getStyleSheetForBucket(styleBucketName, targetDocument, insertionPoint || null, renderer, metadata);
-          if (renderer.insertionCache[ruleCSS]) {
-            continue;
-          }
-          renderer.insertionCache[ruleCSS] = styleBucketName;
-          if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
-            debugData.addCSSRule(ruleCSS);
-          }
-          if (unstable_filterCSSRule) {
-            if (unstable_filterCSSRule(ruleCSS)) {
-              safeInsertRule(sheet, ruleCSS);
-            }
-          } else {
-            safeInsertRule(sheet, ruleCSS);
-          }
-        }
-      }
-    }
-  };
-  if (targetDocument && process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
-    injectDevTools(targetDocument);
-  }
-  return renderer;
-}
-
-// TODO: duplicated from https://github.com/lahmatiy/react-render-tracker/blob/main/src/publisher/react-integration/utils/stackTrace.ts
-// once it is published as a standalone npm package, remove this file
-// Adopted version of StackTrace-Parser
-// https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js
-const UNKNOWN_FUNCTION = '<unknown>';
-function parseStackTraceLine(line) {
-  return parseChrome(line) || parseGecko(line) || parseJSC(line);
-}
-const chromeRe = /^\s*at (.*?) ?\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\/|[a-z]:\\|\\\\).*?)?\)?\s*$/i;
-const chromeRe2 = /^\s*at ()((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\/|[a-z]:\\|\\\\).*?)\s*$/i;
-const chromeEvalRe = /\((\S*)\)/;
-function parseChrome(line) {
-  const parts = chromeRe.exec(line) || chromeRe2.exec(line);
-  if (!parts) {
-    return null;
-  }
-  let loc = parts[2];
-  const isNative = loc && loc.indexOf('native') === 0; // start of line
-  const isEval = loc && loc.indexOf('eval') === 0; // start of line
-  const submatch = chromeEvalRe.exec(loc);
-  if (isEval && submatch != null) {
-    // throw out eval line/column and use top-most line/column number
-    loc = submatch[1]; // url
-  }
-  return {
-    loc: !isNative ? parts[2] : null,
-    name: parts[1] || UNKNOWN_FUNCTION
-  };
-}
-const geckoRe = /^\s*(.*?)(?:\((.*?)\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\[native).*?|[^@]*bundle)\s*$/i;
-const geckoEvalRe = /(\S+) line (\d+)(?: > eval line \d+)* > eval/i;
-function parseGecko(line) {
-  const parts = geckoRe.exec(line);
-  if (!parts) {
-    return null;
-  }
-  let loc = parts[3];
-  const isEval = loc && loc.indexOf(' > eval') > -1;
-  const submatch = geckoEvalRe.exec(loc);
-  if (isEval && submatch != null) {
-    // throw out eval line/column and use top-most line number
-    loc = submatch[1];
-  }
-  return {
-    loc: parts[3],
-    name: parts[1] || UNKNOWN_FUNCTION
-  };
-}
-const javaScriptCoreRe = /^\s*(?:([^@]*)(?:\((.*?)\))?@)?(\S.*?)\s*$/i;
-function parseJSC(line) {
-  const parts = javaScriptCoreRe.exec(line);
-  if (!parts) {
-    return null;
-  }
-  return {
-    loc: parts[3],
-    name: parts[1] || UNKNOWN_FUNCTION
-  };
-}
-
-function getSourceURLfromError() {
-  const stacks = String(new Error().stack).split('\n');
-  const userMakeStyleCallLine = findUserMakeStyleCallInStacks(stacks);
-  if (userMakeStyleCallLine === undefined) {
-    return undefined;
-  }
-  const result = parseStackTraceLine(userMakeStyleCallLine);
-  return result === null || result === void 0 ? void 0 : result.loc;
-}
-function findUserMakeStyleCallInStacks(stacks) {
-  for (let i = stacks.length - 1; i >= 0; --i) {
-    if (stacks[i].includes('at getSourceURLfromError')) {
-      // The error stacks look like:
-      //   getSourceURLfromError
-      //   makeStyles/__styles in griffel core
-      //   makeStyles/__styles in griffel react
-      //   user makeStyles call
-      return stacks[i + 3];
-    }
-  }
-  return undefined;
-}
-
-/**
- * Default implementation of insertion factory. Inserts styles only once per renderer and performs
- * insertion immediately after styles computation.
- *
- * @internal
- */
-const insertionFactory$1 = () => {
-  const insertionCache = {};
-  return function insertStyles(renderer, cssRules) {
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-function __styles$1(classesMapBySlot, cssRules, factory = insertionFactory$1) {
-  const insertStyles = factory();
-  let ltrClassNamesForSlots = null;
-  let rtlClassNamesForSlots = null;
-  let sourceURL;
-  if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
-    sourceURL = getSourceURLfromError();
-  }
-  function computeClasses(options) {
-    const {
-      dir,
-      renderer
-    } = options;
-    const isLTR = dir === 'ltr';
-    if (isLTR) {
-      if (ltrClassNamesForSlots === null) {
-        ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
-      }
-    } else {
-      if (rtlClassNamesForSlots === null) {
-        rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
-      }
-    }
-    insertStyles(renderer, cssRules);
-    const classNamesForSlots = isLTR ? ltrClassNamesForSlots : rtlClassNamesForSlots;
-    if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
-      debugData.addSequenceDetails(classNamesForSlots, sourceURL);
-    }
-    return classNamesForSlots;
-  }
-  return computeClasses;
-}
-
-/**
- * Verifies if an application can use DOM.
- */
-function canUseDOM() {
-  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
-}
-
-const useInsertionEffect =
-// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
-// eslint-disable-next-line no-useless-concat
-React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;
-
-const insertionFactory = () => {
-  const insertionCache = {};
-  return function insert(renderer, cssRules) {
-    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
-    if (useInsertionEffect && canUseDOM()) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useInsertionEffect(() => {
-        renderer.insertCSSRules(cssRules);
-      }, [renderer, cssRules]);
-      return;
-    }
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
-/**
- * @private
- */
-const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
-/**
- * Returns an instance of current makeStyles() renderer.
- *
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
- */
-function useRenderer() {
-  return React.useContext(RendererContext);
-}
-
-/**
- * @private
- */
-const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
-/**
- * Returns current directionality of the element's text.
- *
- * @private
- */
-function useTextDirection() {
-  return React.useContext(TextDirectionContext);
-}
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __styles(classesMapBySlot, cssRules) {
-  const getStyles = __styles$1(classesMapBySlot, cssRules, insertionFactory);
-  return function useClasses() {
-    const dir = useTextDirection();
-    const renderer = useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-const useRootStyles = __styles({
-  "root": {
-    "mc9l5x": "f1w7gpdv",
-    "Bg96gwp": "fez10in",
-    "ycbfsm": "fg4l7m0"
-  },
-  "rtl": {
-    "Bz10aip": "f13rod7r"
-  }
-}, {
-  "d": [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}", ".f13rod7r{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);}"],
-  "t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
-});
-const useIconState = (props, options) => {
-  const {
-    title,
-    primaryFill = "currentColor",
-    ...rest
-  } = props;
-  const state = {
-    ...rest,
-    title: undefined,
-    fill: primaryFill
-  };
-  const styles = useRootStyles();
-  const iconContext = useIconContext();
-  state.className = mergeClasses(styles.root, (options === null || options === void 0 ? void 0 : options.flipInRtl) && (iconContext === null || iconContext === void 0 ? void 0 : iconContext.textDirection) === 'rtl' && styles.rtl, state.className);
-  if (title) {
-    state['aria-label'] = title;
-  }
-  if (!state['aria-label'] && !state['aria-labelledby']) {
-    state['aria-hidden'] = true;
-  } else {
-    state['role'] = 'img';
-  }
-  return state;
-};
-
-const createFluentIcon = (displayName, width, paths, options) => {
-  const viewBoxWidth = width === "1em" ? "20" : width;
-  const Icon = React.forwardRef((props, ref) => {
-    const state = {
-      ...useIconState(props, {
-        flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl
-      }),
-      ref,
-      width,
-      height: width,
-      viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
-      xmlns: "http://www.w3.org/2000/svg"
-    };
-    return React.createElement("svg", state, ...paths.map(d => React.createElement("path", {
-      d,
-      fill: state.fill
-    })));
-  });
-  Icon.displayName = displayName;
-  return Icon;
-};
-
-const ArrowNextFilled = /*#__PURE__*/createFluentIcon('ArrowNextFilled', "1em", ["M13.75 4.75c.38 0 .7.28.74.65l.01.1v9a.75.75 0 0 1-1.5.1V5.5c0-.41.34-.75.75-.75Zm-8.28.22a.75.75 0 0 1 .98-.07l.08.07 4.5 4.5c.27.27.3.68.07.98l-.07.08-4.5 4.5a.75.75 0 0 1-1.13-.98l.07-.08L9.44 10 5.47 6.03a.75.75 0 0 1 0-1.06Z"], {
-  flipInRtl: true
-});
-const ArrowPreviousFilled = /*#__PURE__*/createFluentIcon('ArrowPreviousFilled', "1em", ["M6 4.75c-.38 0-.7.28-.74.65l-.01.1v9a.75.75 0 0 0 1.5.1V5.5A.75.75 0 0 0 6 4.75Zm8.28.22a.75.75 0 0 0-.98-.07l-.08.07-4.5 4.5a.75.75 0 0 0-.07.98l.07.08 4.5 4.5a.75.75 0 0 0 1.13-.98l-.07-.08L10.31 10l3.97-3.97c.3-.3.3-.77 0-1.06Z"], {
-  flipInRtl: true
-});
-const ArrowSortFilled = /*#__PURE__*/createFluentIcon('ArrowSortFilled', "1em", ["M14.84 16.72a.76.76 0 0 1-.59.28.73.73 0 0 1-.53-.22l-3-3a.75.75 0 0 1 1.06-1.07l1.72 1.73V3.75a.75.75 0 0 1 1.5 0v10.68l1.72-1.71a.75.75 0 1 1 1.06 1.06l-2.94 2.94ZM6.34 3.28A.76.76 0 0 0 5.75 3c-.2 0-.38.07-.53.22l-3 3A.75.75 0 0 0 3.28 7.3L5 5.56v10.69a.75.75 0 0 0 1.5 0V5.57l1.72 1.71a.75.75 0 1 0 1.06-1.06L6.34 3.28Z"]);
-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 EyeTrackingOffFilled = /*#__PURE__*/createFluentIcon('EyeTrackingOffFilled', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm15.57 12.73.02-.35v-3a.5.5 0 0 0-1 0v2.38l.98.97Zm-8.81-8.8A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM3 15.5c0 .83.67 1.5 1.5 1.5h3a.5.5 0 0 1 0 1h-3A2.5 2.5 0 0 1 2 15.5v-3a.5.5 0 0 1 1 0v3Zm14-11c0-.83-.67-1.5-1.5-1.5h-3a.5.5 0 0 1 0-1h3A2.5 2.5 0 0 1 18 4.5v3a.5.5 0 0 1-1 0v-3Z"]);
-const EyeTrackingOffRegular = /*#__PURE__*/createFluentIcon('EyeTrackingOffRegular', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm9.34 9.34a2 2 0 1 1-2.71-2.71l2.71 2.71Zm6.23 3.4.02-.36v-3a.5.5 0 0 0-1 0v2.38l.98.97ZM9.17 7.04A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM4.5 17A1.5 1.5 0 0 1 3 15.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 4.5 18h3a.5.5 0 0 0 0-1h-3Zm11-14c.83 0 1.5.67 1.5 1.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 15.5 2h-3a.5.5 0 0 0 0 1h3Z"]);
-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 MoreVerticalFilled = /*#__PURE__*/createFluentIcon('MoreVerticalFilled', "1em", ["M10 6.5A1.75 1.75 0 1 1 10 3a1.75 1.75 0 0 1 0 3.5ZM10 17a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5Zm-1.75-7a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z"]);
-const MoreVerticalRegular = /*#__PURE__*/createFluentIcon('MoreVerticalRegular', "1em", ["M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6Zm0 5.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm-1.25 4a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Z"]);
-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 PinFilled = /*#__PURE__*/createFluentIcon('PinFilled', "1em", ["M13.33 2.62a2 2 0 0 0-3.2.52L8.38 6.6a1.5 1.5 0 0 1-.78.72L4 8.75a1 1 0 0 0-.33 1.64l2.61 2.6L3 16.3v.7h.7L7 13.72l2.61 2.6a1 1 0 0 0 1.64-.33l1.43-3.59c.14-.34.4-.62.72-.78l3.46-1.73a2 2 0 0 0 .52-3.2l-4.05-4.06Z"]);
-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 StarRegular = /*#__PURE__*/createFluentIcon('StarRegular', "1em", ["M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"]);
-
-const SwipeDownFilled = /*#__PURE__*/createFluentIcon('SwipeDownFilled', "1em", ["M14 6a4 4 0 0 1-2.25 3.6V8.44a3 3 0 1 0-3.5 0V9.6A4 4 0 1 1 14 6ZM9.47 17.78c.3.3.77.3 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V5.75a.75.75 0 0 0-1.5 0v9.69l-1.22-1.22a.75.75 0 0 0-1.06 1.06l2.5 2.5Z"]);
-const SwipeUpFilled = /*#__PURE__*/createFluentIcon('SwipeUpFilled', "1em", ["M10.53 2.22a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v9.69a.75.75 0 0 0 1.5 0V4.56l1.22 1.22a.75.75 0 1 0 1.06-1.06l-2.5-2.5ZM6 14a4 4 0 0 1 2.25-3.6v1.16a3 3 0 1 0 3.5 0V10.4A4 4 0 1 1 6 14Z"]);
-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 TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
-const TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
-const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
-const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
-const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
-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.createElement(React.Fragment, null, React.createElement(FilledIcon, Object.assign({}, rest, {
-      className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className)
-    })), React.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);
@@ -1135,35 +135,36 @@ const Pagination = (props) => {
                                             }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsx(For, { each: pageSelectionOptions, children: (option, index) => (jsx(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)) }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
 };
 
-bundleIcon$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);
+bundleIcon(SaveFilled, SaveRegular);
+bundleIcon(TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular);
+bundleIcon(SearchFilled, SearchRegular);
+bundleIcon(FilterFilled, FilterRegular);
+const ClearFilterIcon = bundleIcon(CodeTextOff16Filled, CodeTextOff16Regular);
+const ToggleSelectColumnIcon = bundleIcon(ColumnEditFilled, ColumnEditRegular);
+const ToggleGroupColumnIcon = bundleIcon(GroupFilled, GroupRegular);
+const GroupCollapsedIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
+const GroupExpandedIcon = bundleIcon(ChevronDownRegular, ChevronDownFilled);
+bundleIcon(DragFilled, DragRegular);
 
 const useGridHeaderStyles = makeStyles({
-    tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: tokens.colorBrandBackground2Hover }, shorthands.padding("5px")),
+    tableTopHeaderContainer: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', width: '100%', backgroundColor: tokens.colorNeutralStroke2, boxShadow: tokens.shadow2 }, shorthands.padding('5px')), shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStroke1)),
     tableTopHeaderLeft: {
-        display: "flex",
-        justifyContent: "flex-start",
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
     },
-    tableTopHeaderRight: Object.assign({ display: "flex", justifyContent: "flex-end" }, shorthands.gap("3px")),
+    tableTopHeaderRight: Object.assign(Object.assign({ display: 'flex', justifyContent: 'flex-end' }, shorthands.gap('3px')), { flexWrap: 'wrap' }),
     tableTopHeaderColumnTogglePopover: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        width: "100%",
-        height: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width: '100%',
+        height: '100%',
     },
     popoverSurface: {
-        minWidth: "300px"
-    }
+        minWidth: '300px',
+    },
 });
 
 const GridHeader = (props) => {
@@ -1584,13 +585,13 @@ const getRowPinningStyles = (row, bottomRowLength, headerGroupLength, additional
     return styles;
 };
 
-const MoreIcon = bundleIcon$1(MoreVerticalFilled, MoreVerticalRegular);
-const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
-const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
-const PinIcon = bundleIcon$1(PinFilled, PinRegular);
-const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
-const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
-const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
+const MoreIcon = bundleIcon(MoreVerticalFilled, MoreVerticalRegular);
+const SortAscIcon = bundleIcon(ArrowSortDown20Filled, ArrowSortDown20Regular);
+const SortDescIcon = bundleIcon(ArrowSortUp20Filled, ArrowSortUp20Regular);
+const PinIcon = bundleIcon(PinFilled, PinRegular);
+const HideColumnIcon = bundleIcon(EyeTrackingOffFilled, EyeTrackingOffRegular);
+const GroupExpandIcon = bundleIcon(TextExpandFilled, TextExpandRegular);
+const GroupCollapseIcon = bundleIcon(TextCollapseFilled, TextCollapseRegular);
 function HeaderCell({ header, table, tabAttributes }) {
     var _a;
     const { column, id } = header;
@@ -1608,10 +609,10 @@ function HeaderCell({ header, table, tabAttributes }) {
     }, [table, header.column.id]);
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
-        return (jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef }, attributes, listeners, { children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) })));
+        return (jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef }, attributes, listeners, { children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) })));
     }
     const columnName = flexRender(header.column.columnDef.header, header.getContext());
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsx("div", Object.assign({ className: mergeClasses$1(styles.tHeadCellDraggable, isDragging && styles.tHeadCellDraggableDragging) }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
+    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsx("div", Object.assign({ className: mergeClasses(styles.tHeadCellDraggable, isDragging && styles.tHeadCellDraggableDragging) }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
                         : styles.tNonLeafHeadCellContent, children: [jsx("div", { children: jsx(Show, { when: !header.isPlaceholder, children: jsxs(Button, { style: {
                                         display: 'flex',
@@ -1629,7 +630,7 @@ function HeaderCell({ header, table, tabAttributes }) {
                                     }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
                                         asc: (jsx("strong", { children: jsx(SortAscIcon, {}) })),
                                         desc: (jsx("strong", { children: jsx(SortDescIcon, {}) })),
-                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsx("strong", { children: columnName }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(Show, { when: !!isLeafHeaders, children: jsx(HeaderMenu, { header: header, table: table }) })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
+                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsx("strong", { children: columnName }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(Show, { when: !!isLeafHeaders, children: jsx(HeaderMenu, { header: header, table: table }) })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
 }
 function HeaderMenu(props) {
     const { header, table } = props;
@@ -1734,9 +735,9 @@ const useNoItemGridStyles = makeStyles({
     }
 });
 
-const NoItemGrid = ({ message }) => {
+const NoItemGrid = ({ message, }) => {
     const styles = useNoItemGridStyles();
-    return (jsx("div", { className: styles.wrapper, children: jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No Data to Show." }) }) }));
+    return (jsx("div", { className: styles.wrapper, children: jsx(Show, { when: !!message, fallback: jsx(Subtitle2Stronger, { children: "No data to show." }), children: message }) }));
 };
 
 const useNoFilterMatchStyles = makeStyles({
@@ -1801,7 +802,7 @@ function TableCell({ cell, row }) {
     const isSelected = row.getIsSelected();
     const isRowPinned = row.getIsPinned();
     const isCellPinned = cell.column.getIsPinned();
-    const cellClassNames = mergeClasses$1(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
+    const cellClassNames = mergeClasses(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
     const { isDragging, transition, setNodeRef, transform } = useSortable({
         id: cell.column.id,
     });