@superblocksteam/library 2.0.6-next.0 → 2.0.6-next.10

package/dist/{index-C4PHemM8.js → index-snr_jI8a.js}

@@ -48,7 +48,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "access private method"), method4);
 var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _cancelApi_dec, _runApi_dec, _init2, _renameWidget_dec, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _deleteComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_dec, _init3, _addOptimisticCreateWidget_dec, _processRootWidget_dec, _init4, _refreshPositionsAndGetDropConstraints_dec, _init5, _updateChildPositions_dec, _setWidgetPosition_dec, _setActiveTargetRect_dec, _setActiveDragRect_dec, _setDropTargetId_dec, _setInvalidDropTarget_dec, _setValidRootIds_dec, _cancelNewComponentDrag_dec, _startNewComponentDrag_dec, _setIsDragging_dec, _setWidgetFeatures_dec, _init6;
 import * as React from "react";
-import React__default, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Suspense, Children, memo, useReducer, PureComponent, useSyncExternalStore, createRef } from "react";
+import React__default, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Suspense, Children, memo, useReducer, useSyncExternalStore, PureComponent, createRef } from "react";
 import { S as SvgClose, a as SvgSystemDanger, b as SvgSystemInfo, c as SvgSystemError, d as SvgSystemSuccess, e as SvgPlus, f as SvgHide, g as SvgChevronDown, h as SvgEmptyCheckbox, i as SvgMinus, j as SvgCheckmark, k as SvgCopy, l as SvgExternalLink, m as SvgPlay, n as SvgDownload, o as SvgTrash, p as SvgFilter, q as SvgFreeze, r as SvgSort, s as SvgEllipsis, t as SvgCrossXs, u as SvgClark } from "./icons-NrNO8p_u.js";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { unstable_batchedUpdates, flushSync, createPortal } from "react-dom";
@@ -55191,8 +55191,8 @@ function RawList(props2, ref2) {
     showScrollBar
   }));
 }
-var List$1 = /* @__PURE__ */ React.forwardRef(RawList);
-List$1.displayName = "List";
+var List$2 = /* @__PURE__ */ React.forwardRef(RawList);
+List$2.displayName = "List";
 function isPlatformMac() {
   return /(mac\sos|macintosh)/i.test(navigator.appVersion);
 }
@@ -55384,7 +55384,7 @@ var OptionList = function OptionList2(_15, ref2) {
       width: 0,
       overflow: "hidden"
     }
-  }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /* @__PURE__ */ React.createElement(List$1, {
+  }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /* @__PURE__ */ React.createElement(List$2, {
     itemKey: "key",
     ref: listRef,
     data: memoFlattenOptions,
@@ -57930,7 +57930,7 @@ function WrapperField(_ref6) {
   }));
 }
 var define_process_env_default$16 = {};
-function List(_ref2) {
+function List$1(_ref2) {
   var name = _ref2.name, initialValue = _ref2.initialValue, children = _ref2.children, rules2 = _ref2.rules, validateTrigger = _ref2.validateTrigger, isListField = _ref2.isListField;
   var context2 = React.useContext(Context$1);
   var wrapperListContext = React.useContext(ListContext);
@@ -59101,7 +59101,7 @@ var InternalForm$1 = /* @__PURE__ */ React.forwardRef(Form$3);
 var RefForm = InternalForm$1;
 RefForm.FormProvider = FormProvider$1;
 RefForm.Field = WrapperField;
-RefForm.List = List;
+RefForm.List = List$1;
 RefForm.useForm = useForm$1;
 RefForm.useWatch = useWatch;
 var FormContext = /* @__PURE__ */ React.createContext({
@@ -67437,7 +67437,7 @@ var PanelContext = /* @__PURE__ */ React.createContext({});
 var HIDDEN_STYLE = {
   visibility: "hidden"
 };
-function Header$1(_ref2) {
+function Header$2(_ref2) {
   var prefixCls = _ref2.prefixCls, _ref$prevIcon = _ref2.prevIcon, prevIcon = _ref$prevIcon === void 0 ? "‹" : _ref$prevIcon, _ref$nextIcon = _ref2.nextIcon, nextIcon = _ref$nextIcon === void 0 ? "›" : _ref$nextIcon, _ref$superPrevIcon = _ref2.superPrevIcon, superPrevIcon = _ref$superPrevIcon === void 0 ? "«" : _ref$superPrevIcon, _ref$superNextIcon = _ref2.superNextIcon, superNextIcon = _ref$superNextIcon === void 0 ? "»" : _ref$superNextIcon, onSuperPrev = _ref2.onSuperPrev, onSuperNext = _ref2.onSuperNext, onPrev = _ref2.onPrev, onNext = _ref2.onNext, children = _ref2.children;
   var _React$useContext = React.useContext(PanelContext), hideNextBtn = _React$useContext.hideNextBtn, hidePrevBtn = _React$useContext.hidePrevBtn;
   return /* @__PURE__ */ React.createElement("div", {
@@ -67480,7 +67480,7 @@ function DecadeHeader(props2) {
   var yearNumber = generateConfig2.getYear(viewDate);
   var startYear = Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT;
   var endYear = startYear + DECADE_DISTANCE_COUNT - 1;
-  return /* @__PURE__ */ React.createElement(Header$1, _extends$4({}, props2, {
+  return /* @__PURE__ */ React.createElement(Header$2, _extends$4({}, props2, {
     prefixCls: headerPrefixCls,
     onSuperPrev: onPrevDecades,
     onSuperNext: onNextDecades
@@ -68036,7 +68036,7 @@ function TimeHeader(props2) {
   }
   var prefixCls = props2.prefixCls, generateConfig2 = props2.generateConfig, locale2 = props2.locale, value = props2.value, format3 = props2.format;
   var headerPrefixCls = "".concat(prefixCls, "-header");
-  return /* @__PURE__ */ React.createElement(Header$1, {
+  return /* @__PURE__ */ React.createElement(Header$2, {
     prefixCls: headerPrefixCls
   }, value ? formatValue(value, {
     locale: locale2,
@@ -68495,7 +68495,7 @@ function DateHeader(props2) {
     generateConfig: generateConfig2
   }) : monthsLocale[month]);
   var monthYearNodes = locale2.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
-  return /* @__PURE__ */ React.createElement(Header$1, _extends$4({}, props2, {
+  return /* @__PURE__ */ React.createElement(Header$2, _extends$4({}, props2, {
     prefixCls: headerPrefixCls,
     onSuperPrev: onPrevYear,
     onPrev: onPrevMonth,
@@ -68679,7 +68679,7 @@ function MonthHeader(props2) {
     return null;
   }
   var headerPrefixCls = "".concat(prefixCls, "-header");
-  return /* @__PURE__ */ React.createElement(Header$1, _extends$4({}, props2, {
+  return /* @__PURE__ */ React.createElement(Header$2, _extends$4({}, props2, {
     prefixCls: headerPrefixCls,
     onSuperPrev: onPrevYear,
     onSuperNext: onNextYear
@@ -68797,7 +68797,7 @@ function QuarterHeader(props2) {
     return null;
   }
   var headerPrefixCls = "".concat(prefixCls, "-header");
-  return /* @__PURE__ */ React.createElement(Header$1, _extends$4({}, props2, {
+  return /* @__PURE__ */ React.createElement(Header$2, _extends$4({}, props2, {
     prefixCls: headerPrefixCls,
     onSuperPrev: onPrevYear,
     onSuperNext: onNextYear
@@ -68911,7 +68911,7 @@ function YearHeader(props2) {
   var yearNumber = generateConfig2.getYear(viewDate);
   var startYear = Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
   var endYear = startYear + YEAR_DECADE_COUNT - 1;
-  return /* @__PURE__ */ React.createElement(Header$1, _extends$4({}, props2, {
+  return /* @__PURE__ */ React.createElement(Header$2, _extends$4({}, props2, {
     prefixCls: headerPrefixCls,
     onSuperPrev: onPrevDecade,
     onSuperNext: onNextDecade
@@ -73131,7 +73131,7 @@ var FormList = function FormList2(_a2) {
       status: "error"
     };
   }, [prefixCls]);
-  return /* @__PURE__ */ React.createElement(List, _extends$4({}, props2), function(fields, operation, meta) {
+  return /* @__PURE__ */ React.createElement(List$1, _extends$4({}, props2), function(fields, operation, meta) {
     return /* @__PURE__ */ React.createElement(FormItemPrefixContext.Provider, {
       value: contextValue
     }, children(fields.map(function(field2) {
@@ -82964,7 +82964,7 @@ class Prop {
   }
   default(de2) {
     this.prop.default = de2;
-    if (this.prop.propertiesPanelDisplay) {
+    if (this.prop.propertiesPanelDisplay && this.prop.propertiesPanelDisplay.defaultValue === void 0) {
       this.prop.propertiesPanelDisplay.defaultValue = de2;
     }
     return this;
@@ -83020,7 +83020,7 @@ class Prop {
       controlType: baseControlType,
       isJSConvertible,
       isTriggerProperty,
-      defaultValue: this.prop.default,
+      defaultValue: schema.defaultValue ?? this.prop.default,
       defaultOnAdd: (_a2 = this.prop.propertiesPanelDisplay) == null ? void 0 : _a2.defaultOnAdd,
       inputType,
       ...schema
@@ -83038,7 +83038,7 @@ class Prop {
       (acc, [key2, value]) => {
         if (typeof value === "function") {
           try {
-            acc[key2] = value.bind(entity)(scopedState);
+            acc[key2] = value.bind(entity)(scopedState, this.prop.path);
           } catch (e3) {
             console.error(
               `Error evaluating property ${key2}, for type ${entity == null ? void 0 : entity.type}:`,
@@ -83504,7 +83504,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-CziXG7En.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-B2GVETCf.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83517,7 +83517,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-CziXG7En.js").then((module2) => ({
+  return import("./devtools-consolidated-B2GVETCf.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -91039,14 +91039,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CkqgEhyC.js"
+            "./allPathsLoader-CTr7XzYS.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DzWbuSYz.js"
+            "./splitPathsBySizeLoader-DbNFtg9G.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -117530,12 +117530,18 @@ const AddSectionButton = ({
   sectionInstanceId
 }) => {
   const indexForNewSection = placement === "above" ? indexForBaseSection : indexForBaseSection + 1;
-  const createSection = useCallback(() => {
-    createComponent({
+  const createSection = useCallback(async () => {
+    const newSectionSourceId = await createComponent({
       componentType: "SbSection",
       parent: { id: sectionParentSourceId, index: indexForNewSection },
       scopeName: sectionParentScopeName
     });
+    if (newSectionSourceId) {
+      const newSectionInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
+        newSectionSourceId
+      );
+      getEditStore().ui.selectWidget(newSectionInstanceId);
+    }
   }, [sectionParentSourceId, indexForNewSection, sectionParentScopeName]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Wrapper$2,
@@ -119250,7 +119256,18 @@ const basePropertiesPaneDisplay = {
     title: "Edit custom typography",
     panelIdPropertyName: "textStyle"
   },
-  enableTextColorConfig: true
+  enableTextColorConfig: true,
+  defaultValue: function(_state, path2) {
+    var _a2;
+    const variant = (_a2 = lodashExports.get(this, path2)) == null ? void 0 : _a2.variant;
+    const defaultTextColor = Theme.typographies[variant].textColor.default;
+    return {
+      variant,
+      textColor: {
+        default: defaultTextColor
+      }
+    };
+  }
 };
 const textStyleProp = ({
   baseProp = createTextStyleCompositeBase(),
@@ -119275,20 +119292,14 @@ const labelTextStyle = () => textStyleProp({
     }
   }
 }).default(() => ({
-  variant: DEFAULT_INPUT_WIDGET_LABEL_STYLE_VARIANT,
-  textColor: {
-    default: Theme.colors.neutral700
-  }
+  variant: DEFAULT_INPUT_WIDGET_LABEL_STYLE_VARIANT
 }));
 const inputTextStyle = () => textStyleProp({
   propertiesPanel: {
     label: "Input style"
   }
 }).default(() => ({
-  variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT,
-  textColor: {
-    default: Theme.colors.neutral900
-  }
+  variant: DEFAULT_INPUT_WIDGET_INPUT_STYLE_VARIANT
 }));
 const createPerSideBorder = (border2) => {
   return {
@@ -119388,7 +119399,10 @@ function getDefaultBorderRadius() {
   }
   return createBorderRadiusObject(borderRadius2);
 }
-const textStyle$1 = textStyleProp().default(function() {
+const textStyle$1 = textStyleProp({
+  propertiesPanel: { defaultValue: void 0 }
+  // so it gets overriden by `default()`
+}).default(function() {
   return {
     variant: "buttonLabel",
     textColor: {
@@ -120050,20 +120064,16 @@ const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
 const getCanvasClassName = () => "canvas";
-const getChildName = (child) => {
-  var _a2;
-  return ((_a2 = getBindingIdentifier(child.props.bind)) == null ? void 0 : _a2.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
-};
 const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights) => {
   return orderedNames.reduce(
     (acc, name) => {
       var _a2;
-      const child = childrenArray.find((child2) => getChildName(child2) === name);
+      const child = childrenArray.find((child2) => child2.name === name);
       if (!child) {
         return acc;
       }
-      const marginTopPx = (((_a2 = child.props.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
-      const constraintTop = child.props.constraintTop;
+      const marginTopPx = (((_a2 = child.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
+      const constraintTop = child.constraintTop;
       const bottomFunc = (name2) => {
         const topRow = acc[name2];
         const pxHeight = pxHeights[name2];
@@ -120088,16 +120098,16 @@ const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights
 const orderConstraints = (children) => {
   const childrenMap = children.reduce(
     (acc, child) => {
-      acc[getChildName(child)] = child;
+      acc[child.name] = child;
       return acc;
     },
     {}
   );
   const constraintsMap = children.reduce(
     (acc, child) => {
-      if (child.props.constraintTop) {
-        const constraints = Array.isArray(child.props.constraintTop) ? child.props.constraintTop : [child.props.constraintTop];
-        acc[getChildName(child)] = constraints.filter(
+      if (child.constraintTop) {
+        const constraints = Array.isArray(child.constraintTop) ? child.constraintTop : [child.constraintTop];
+        acc[child.name] = constraints.filter(
           (constraint) => !!childrenMap[constraint]
         );
       }
@@ -120109,24 +120119,24 @@ const orderConstraints = (children) => {
   const foundItems = /* @__PURE__ */ new Set();
   const itemsLeft = /* @__PURE__ */ new Set();
   children.forEach((child) => {
-    const constraints = constraintsMap[getChildName(child)] ?? [];
+    const constraints = constraintsMap[child.name] ?? [];
     const hasNoConstraints = constraints.length === 0;
     if (hasNoConstraints) {
-      foundItems.add(getChildName(child));
-      orderedNames.push(getChildName(child));
+      foundItems.add(child.name);
+      orderedNames.push(child.name);
     } else {
       itemsLeft.add(child);
     }
   });
   while (itemsLeft.size > 0) {
     itemsLeft.forEach((child) => {
-      const constraints = constraintsMap[getChildName(child)] ?? [];
+      const constraints = constraintsMap[child.name] ?? [];
       const constraintsLeft = constraints.filter(
         (constraint) => !foundItems.has(constraint)
       );
       if (constraintsLeft.length === 0) {
-        foundItems.add(getChildName(child));
-        orderedNames.push(getChildName(child));
+        foundItems.add(child.name);
+        orderedNames.push(child.name);
         itemsLeft.delete(child);
       }
     });
@@ -120177,99 +120187,141 @@ const heightReducer = (state, action2) => {
   }
 };
 const EMPTY_ARRAY$1 = [];
-const InternalGrid = ({
-  children = EMPTY_ARRAY$1,
-  ...props2
-}) => {
-  var _a2, _b2;
-  const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
-  const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
-  const rowHeight = ((_b2 = props2.rowHeight) == null ? void 0 : _b2.value) ?? 12;
-  const childrenArray = useMemo$2(() => {
-    let childrenArray2 = Array.isArray(children) ? children : [children];
-    if (!isEditing) {
-      childrenArray2 = childrenArray2.filter(
-        (child) => child.props.isVisible !== false
-      );
-    }
-    return childrenArray2;
-  }, [children, isEditing]);
-  const columns = props2.columns ?? 12;
-  const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
-  const gridPositions = useMemo$2(() => {
-    const orderedNames = orderConstraints(childrenArray);
-    const rowPos = calculateRowPositions(
-      orderedNames,
-      childrenArray,
-      rowHeight,
-      pxHeights
-    );
-    const positions = childrenArray.reduce(
-      (acc, child) => {
-        var _a3, _b3, _c2;
-        let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? (child.type.sbType === "SbTable" || child.type.sbType === "SbContainer" ? 6 : 2);
-        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
-          width = columns;
-        }
-        acc[getChildName(child)] = {
-          top: rowPos[getChildName(child)],
-          left: ((_c2 = child.props.marginLeft) == null ? void 0 : _c2.value) ?? 0,
-          width,
-          height: Math.ceil(pxHeights[getChildName(child)] / rowHeight)
-        };
-        return acc;
-      },
-      {}
-    );
-    return positions;
-  }, [columns, childrenArray, rowHeight, pxHeights]);
-  const gridStyle = React__default.useMemo(() => {
-    const spacingValue = 0;
-    const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
-    return {
-      display: "grid",
-      gridAutoRows: `${rowHeight}px`,
-      gap: `${spacingValue}px`,
-      gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
-      ...style2
-    };
-  }, [columns, rowHeight, style2]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => {
-    var _a3, _b3;
-    const heightMode = ((_a3 = child.props.height) == null ? void 0 : _a3.mode) ?? "fit";
-    const top2 = gridPositions[getChildName(child)].top;
-    const left2 = gridPositions[getChildName(child)].left;
-    const rows = gridPositions[getChildName(child)].height;
-    const columns2 = gridPositions[getChildName(child)].width;
+const GridChild = observer(
+  ({
+    childProps,
+    gridPositions,
+    rowHeight,
+    dispatchHeight,
+    childElement
+  }) => {
+    var _a2, _b2;
+    const heightMode = ((_a2 = childProps.height) == null ? void 0 : _a2.mode) ?? "fit";
+    const top2 = gridPositions[childProps.name].top;
+    const left2 = gridPositions[childProps.name].left;
+    const rows = gridPositions[childProps.name].height;
+    const columns = gridPositions[childProps.name].width;
     const Component3 = heightMode === "fit" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         style: {
           gridRow: `${top2 + 1} / span ${Math.max(1, rows)}`,
-          gridColumn: `${left2 + 1} / span ${Math.max(1, columns2)}`,
+          gridColumn: `${left2 + 1} / span ${Math.max(1, columns)}`,
           width: "100%",
           maxWidth: "100%"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
+            staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
-                name: getChildName(child),
+                name: childProps.name,
                 height
               });
             },
-            children: child
+            children: childElement
           }
         )
       },
-      getChildName(child)
+      childProps.name
     );
-  }) }) });
-};
+  }
+);
+const InternalGrid = observer(
+  ({ children = EMPTY_ARRAY$1, ...props2 }) => {
+    var _a2;
+    const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
+    const rowHeight = ((_a2 = props2.rowHeight) == null ? void 0 : _a2.value) ?? 12;
+    const childrenArray = useObserverMemo(() => {
+      var _a3;
+      const childrenArray2 = Array.isArray(children) ? children : [children];
+      const isEditing = Boolean((_a3 = rootStore.editStore) == null ? void 0 : _a3.isInitialized);
+      const withEvaluatedProps = childrenArray2.reduce((acc, child) => {
+        const bindingIdentifier = getBindingIdentifier(child.props.bind);
+        const entity = bindingIdentifier ? rootStore.entityManager.getEntity(bindingIdentifier.scopeId, {
+          value: bindingIdentifier.entityName,
+          isAnonymous: false
+        }) : null;
+        const marginTop = (entity == null ? void 0 : entity.marginTop) ?? (isDimension(child.props.marginTop) ? child.props.marginTop : void 0);
+        const marginLeft = (entity == null ? void 0 : entity.marginLeft) ?? (isDimension(child.props.marginLeft) ? child.props.marginLeft : void 0);
+        const width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
+        const height = (entity == null ? void 0 : entity.height) ?? (isDimension(child.props.height) ? child.props.height : void 0);
+        const constraintTop = (entity == null ? void 0 : entity.constraintTop) ?? child.props.constraintTop;
+        const isVisible2 = (entity == null ? void 0 : entity.isVisible) ?? child.props.isVisible;
+        const gridChild = {
+          marginTop,
+          marginLeft,
+          width,
+          height,
+          constraintTop,
+          name: (bindingIdentifier == null ? void 0 : bindingIdentifier.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE],
+          // source ID as a fallback
+          sbType: isSbComponent(child) ? child.type.sbType : void 0,
+          element: child
+        };
+        if (isVisible2 !== false || isEditing) {
+          acc.push(gridChild);
+        }
+        return acc;
+      }, []);
+      return withEvaluatedProps;
+    }, [children]);
+    const columns = props2.columns ?? 12;
+    const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
+    const gridPositions = useMemo$2(() => {
+      const orderedNames = orderConstraints(childrenArray);
+      const rowPos = calculateRowPositions(
+        orderedNames,
+        childrenArray,
+        rowHeight,
+        pxHeights
+      );
+      const positions = childrenArray.reduce(
+        (acc, child) => {
+          var _a3, _b2, _c2;
+          let width = ((_a3 = child.width) == null ? void 0 : _a3.value) ?? (child.sbType === "SbTable" || child.sbType === "SbContainer" ? 6 : 2);
+          if (((_b2 = child.width) == null ? void 0 : _b2.mode) === "fill") {
+            width = columns;
+          }
+          acc[child.name] = {
+            top: rowPos[child.name],
+            left: ((_c2 = child.marginLeft) == null ? void 0 : _c2.value) ?? 0,
+            width,
+            height: Math.ceil(pxHeights[child.name] / rowHeight)
+          };
+          return acc;
+        },
+        {}
+      );
+      return positions;
+    }, [columns, childrenArray, rowHeight, pxHeights]);
+    const gridStyle = React__default.useMemo(() => {
+      const spacingValue = 0;
+      const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
+      return {
+        display: "grid",
+        gridAutoRows: `${rowHeight}px`,
+        gap: `${spacingValue}px`,
+        gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
+        ...style2
+      };
+    }, [columns, rowHeight, style2]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GridChild,
+      {
+        childProps: child,
+        childElement: child.element,
+        gridPositions,
+        rowHeight,
+        dispatchHeight
+      },
+      child.name
+    )) }) });
+  }
+);
 const DragDisplay = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -134914,8 +134966,7 @@ const numberFormatProperty = Prop.string().readAndWrite().default("standard").pr
 });
 const textStyle = textStyleProp().default(function() {
   return {
-    variant: DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT,
-    textColor: Theme.typographies.label.textColor
+    variant: DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT
   };
 });
 const propertiesDefinition$b = {
@@ -135947,10 +135998,7 @@ const textStyleProps = {
       label: "Cell text style"
     }
   }).default(() => ({
-    variant: DEFAULT_CELL_TEXT_STYLE_VARIANT,
-    textColor: {
-      default: Theme.colors.neutral900
-    }
+    variant: DEFAULT_CELL_TEXT_STYLE_VARIANT
   })),
   cellBackground: cellBackgroundProp
 };
@@ -143126,7 +143174,7 @@ function Caption(props2) {
   }
   return jsxRuntimeExports.jsx("div", { className: classNames2.caption, style: styles.caption, children: caption });
 }
-function Footer$1(props2) {
+function Footer$2(props2) {
   var _a2 = useDayPicker(), footer = _a2.footer, styles = _a2.styles, tfoot = _a2.classNames.tfoot;
   if (!footer)
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
@@ -144012,7 +144060,7 @@ function Table$2(props2) {
   });
   var HeadComponent = (_a2 = components === null || components === void 0 ? void 0 : components.Head) !== null && _a2 !== void 0 ? _a2 : Head;
   var RowComponent = (_b2 = components === null || components === void 0 ? void 0 : components.Row) !== null && _b2 !== void 0 ? _b2 : Row;
-  var FooterComponent = (_c2 = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c2 !== void 0 ? _c2 : Footer$1;
+  var FooterComponent = (_c2 = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c2 !== void 0 ? _c2 : Footer$2;
   return jsxRuntimeExports.jsxs("table", { id: props2.id, className: classNames2.table, style: styles.table, role: "grid", "aria-labelledby": props2["aria-labelledby"], children: [!hideHead && jsxRuntimeExports.jsx(HeadComponent, {}), jsxRuntimeExports.jsx("tbody", { className: classNames2.tbody, style: styles.tbody, children: weeks2.map(function(week) {
     return jsxRuntimeExports.jsx(RowComponent, { displayMonth: props2.displayMonth, dates: week.dates, weekNumber: week.weekNumber }, week.weekNumber);
   }) }), jsxRuntimeExports.jsx(FooterComponent, { displayMonth: props2.displayMonth })] });
@@ -145508,14 +145556,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CoNAJZeJ.js"
+            "./allPathsLoader-DjBKQsij.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BkYpVgsW.js"
+            "./splitPathsBySizeLoader-Blv6tUe4.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -160955,16 +161003,11 @@ const TagsPopoverContentWrapper = qe$1.div`
   display: flex;
   cursor: default;
 `;
-const sanitizeCellValue = (cellValue) => {
-  const valueStr = `${cellValue}`;
-  return `${valueStr.toLowerCase()}_clean`;
-};
 const TagsCell = ({
   isHidden: isHidden2,
   cellProperties,
   tagValues,
   tagsColorAssignment,
-  tagsCustomColorAssignment,
   rowDensity,
   handleCellFocus,
   maxWidth,
@@ -161042,29 +161085,24 @@ const TagsCell = ({
   ]);
   const backgroundColor = cellProperties.cellBackground ?? theme.colors.neutral;
   const coloredValues = useMemo$2(() => {
+    let i3 = 0;
     return transformedValues.map((value) => {
-      const uniqValueIdx = (tagsColorAssignment == null ? void 0 : tagsColorAssignment.mapping[sanitizeCellValue(value)]) ?? 0;
+      var _a2;
+      const color = (_a2 = tagsColorAssignment == null ? void 0 : tagsColorAssignment[value]) == null ? void 0 : _a2.color;
       let colors2;
-      if (tagsCustomColorAssignment == null ? void 0 : tagsCustomColorAssignment[value]) {
-        colors2 = generateComplementaryTagColors(
-          tagsCustomColorAssignment[value].color,
-          backgroundColor
-        );
+      if (color) {
+        colors2 = generateComplementaryTagColors(color, backgroundColor);
       } else {
-        const nextDefaultColor = tagColorPalette[uniqValueIdx % tagColorPalette.length];
+        const nextDefaultColor = tagColorPalette[i3 % tagColorPalette.length];
         colors2 = generateComplementaryTagColors(
           nextDefaultColor,
           backgroundColor
         );
+        i3++;
       }
       return { value, colors: colors2 };
     });
-  }, [
-    transformedValues,
-    tagsColorAssignment == null ? void 0 : tagsColorAssignment.mapping,
-    tagsCustomColorAssignment,
-    backgroundColor
-  ]);
+  }, [transformedValues, tagsColorAssignment, backgroundColor]);
   const firstHiddenIdx = transformedValues.length - hiddenTagCount;
   const { cellTextStyle, horizontalAlign, verticalAlign, tagsWrap } = cellProperties;
   const [className, styles] = useMemo$2(() => {
@@ -161788,7 +161826,6 @@ const renderCell = ({
           isHidden: isHidden2,
           tagValues: displayValue,
           tagsColorAssignment: cellProps.tagsColorAssignment,
-          tagsCustomColorAssignment: cellProps.tagsCustomColorAssignment,
           rowDensity,
           maxLinesPerRow,
           theme
@@ -162764,6 +162801,7 @@ const propertiesDefinition$9 = {
       visibility: "SHOW_NAME",
       isJSConvertible: false,
       isRemovable: true,
+      defaultOnAdd: () => Property.Computed(""),
       helpText: "Allows specifying the filters that will be used on page load",
       isVisible: function() {
         return this.isFilterable && this.pageType !== "server-side";
@@ -162840,6 +162878,8 @@ const propertiesDefinition$9 = {
       label: "Default sort",
       helpText: "Allows specifying the sort options that will be used on page load",
       controlType: "DEFAULT_TABLE_SORT",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
       childrenDisplayMode: {
         type: "popover",
         title: "Default sort"
@@ -162848,6 +162888,8 @@ const propertiesDefinition$9 = {
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
       helpText: "Sets the default search text",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
       isVisible: function() {
         return this.enableClientSideSearch !== false;
       }
@@ -162886,6 +162928,10 @@ const propertiesDefinition$9 = {
         default: Theme.colors.neutral900
       }
     })),
+    columnHeaderTextWrap: Prop.boolean().readAndWrite().default(false).propertiesPanel({
+      label: "Wrap header text",
+      helpText: "When enabled, overflow text in a column header will wrap to a new line"
+    }),
     "cellProps.textStyle": textStyleProp({
       propertiesPanel: {
         label: "Cell text style"
@@ -168952,6 +168998,7 @@ function useChangedListContentsSizes(callback, itemSize, enabled, scrollContaine
         scrollHeight,
         viewportHeight
       });
+      gap == null ? void 0 : gap(resolveGapValue$1("row-gap", getComputedStyle(el2).rowGap, log3));
       if (ranges !== null) {
         callback(ranges);
       }
@@ -168989,6 +169036,15 @@ function getChangedChildSizes(children, itemSize, field2, log3) {
   }
   return results;
 }
+function resolveGapValue$1(property, value, log3) {
+  if (value !== "normal" && !(value == null ? void 0 : value.endsWith("px"))) {
+    log3(`${property} was not resolved to pixel value correctly`, value, LogLevel.WARN);
+  }
+  if (value === "normal") {
+    return 0;
+  }
+  return parseInt(value != null ? value : "0", 10);
+}
 function correctItemSize(el2, dimension) {
   return Math.round(el2.getBoundingClientRect()[dimension]);
 }
@@ -171475,10 +171531,115 @@ const listComponentPropsSystem = /* @__PURE__ */ system(() => {
     ScrollSeekPlaceholder: distinctProp("ScrollSeekPlaceholder")
   };
 });
-/* @__PURE__ */ system(([listSystem2, propsSystem]) => {
+const combinedSystem$2 = /* @__PURE__ */ system(([listSystem2, propsSystem]) => {
   return { ...listSystem2, ...propsSystem };
 }, tup(listSystem, listComponentPropsSystem));
-({ position: positionStickyCssValue() });
+const DefaultScrollSeekPlaceholder$1 = ({ height }) => /* @__PURE__ */ React__default.createElement("div", { style: { height } });
+const GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1, overflowAnchor: "none" };
+const ITEM_STYLE$1 = { overflowAnchor: "none" };
+const Items$1 = /* @__PURE__ */ React__default.memo(function VirtuosoItems({ showTopList = false }) {
+  const listState = useEmitterValue$2("listState");
+  const sizeRanges = usePublisher$2("sizeRanges");
+  const useWindowScroll = useEmitterValue$2("useWindowScroll");
+  const customScrollParent = useEmitterValue$2("customScrollParent");
+  const windowScrollContainerStateCallback = usePublisher$2("windowScrollContainerState");
+  const _scrollContainerStateCallback = usePublisher$2("scrollContainerState");
+  const scrollContainerStateCallback = customScrollParent || useWindowScroll ? windowScrollContainerStateCallback : _scrollContainerStateCallback;
+  const itemContent = useEmitterValue$2("itemContent");
+  const context2 = useEmitterValue$2("context");
+  const groupContent = useEmitterValue$2("groupContent");
+  const trackItemSizes = useEmitterValue$2("trackItemSizes");
+  const itemSize = useEmitterValue$2("itemSize");
+  const log3 = useEmitterValue$2("log");
+  const listGap = usePublisher$2("gap");
+  const { callbackRef } = useChangedListContentsSizes(
+    sizeRanges,
+    itemSize,
+    trackItemSizes,
+    showTopList ? noop$1 : scrollContainerStateCallback,
+    log3,
+    listGap,
+    customScrollParent
+  );
+  const [deviation, setDeviation] = React__default.useState(0);
+  useEmitter$2("deviation", (value) => {
+    if (deviation !== value) {
+      setDeviation(value);
+    }
+  });
+  const EmptyPlaceholder = useEmitterValue$2("EmptyPlaceholder");
+  const ScrollSeekPlaceholder = useEmitterValue$2("ScrollSeekPlaceholder") || DefaultScrollSeekPlaceholder$1;
+  const ListComponent = useEmitterValue$2("ListComponent");
+  const ItemComponent = useEmitterValue$2("ItemComponent");
+  const GroupComponent = useEmitterValue$2("GroupComponent");
+  const computeItemKey = useEmitterValue$2("computeItemKey");
+  const isSeeking = useEmitterValue$2("isSeeking");
+  const hasGroups2 = useEmitterValue$2("groupIndices").length > 0;
+  const alignToBottom = useEmitterValue$2("alignToBottom");
+  const scrolledToInitialItem = useEmitterValue$2("scrolledToInitialItem");
+  const containerStyle = showTopList ? {} : {
+    boxSizing: "border-box",
+    paddingTop: listState.offsetTop,
+    paddingBottom: listState.offsetBottom,
+    marginTop: deviation !== 0 ? deviation : alignToBottom ? "auto" : 0,
+    ...scrolledToInitialItem ? {} : { visibility: "hidden" }
+  };
+  if (!showTopList && listState.totalCount === 0 && EmptyPlaceholder) {
+    return React__default.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context2));
+  }
+  return React__default.createElement(
+    ListComponent,
+    {
+      ...contextPropIfNotDomElement(ListComponent, context2),
+      ref: callbackRef,
+      style: containerStyle,
+      "data-test-id": showTopList ? "virtuoso-top-item-list" : "virtuoso-item-list"
+    },
+    (showTopList ? listState.topItems : listState.items).map((item) => {
+      const index2 = item.originalIndex;
+      const key2 = computeItemKey(index2 + listState.firstItemIndex, item.data, context2);
+      if (isSeeking) {
+        return React__default.createElement(ScrollSeekPlaceholder, {
+          ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context2),
+          key: key2,
+          index: item.index,
+          height: item.size,
+          type: item.type || "item",
+          ...item.type === "group" ? {} : { groupIndex: item.groupIndex }
+        });
+      }
+      if (item.type === "group") {
+        return React__default.createElement(
+          GroupComponent,
+          {
+            ...contextPropIfNotDomElement(GroupComponent, context2),
+            key: key2,
+            "data-index": index2,
+            "data-known-size": item.size,
+            "data-item-index": item.index,
+            style: GROUP_STYLE
+          },
+          groupContent(item.index, context2)
+        );
+      } else {
+        return React__default.createElement(
+          ItemComponent,
+          {
+            ...contextPropIfNotDomElement(ItemComponent, context2),
+            ...itemPropIfNotDomElement(ItemComponent, item.data),
+            key: key2,
+            "data-index": index2,
+            "data-known-size": item.size,
+            "data-item-index": item.index,
+            "data-item-group-index": item.groupIndex,
+            style: ITEM_STYLE$1
+          },
+          hasGroups2 ? itemContent(item.index, item.groupIndex, item.data, context2) : itemContent(item.index, item.data, context2)
+        );
+      }
+    })
+  );
+});
 const scrollerStyle = {
   height: "100%",
   outline: "none",
@@ -171491,11 +171652,14 @@ const viewportStyle = (alignToBottom) => ({
   height: "100%",
   position: "absolute",
   top: 0,
-  ...{}
-});
-({
-  position: positionStickyCssValue()
+  ...alignToBottom ? { display: "flex", flexDirection: "column" } : {}
 });
+const topItemListStyle = {
+  width: "100%",
+  position: positionStickyCssValue(),
+  top: 0,
+  zIndex: 1
+};
 function contextPropIfNotDomElement(element, context2) {
   if (typeof element === "string") {
     return void 0;
@@ -171505,6 +171669,22 @@ function contextPropIfNotDomElement(element, context2) {
 function itemPropIfNotDomElement(element, item) {
   return { item: typeof element === "string" ? void 0 : item };
 }
+const Header$1 = /* @__PURE__ */ React__default.memo(function VirtuosoHeader() {
+  const Header2 = useEmitterValue$2("HeaderComponent");
+  const headerHeight = usePublisher$2("headerHeight");
+  const headerFooterTag = useEmitterValue$2("headerFooterTag");
+  const ref2 = useSize((el2) => headerHeight(correctItemSize(el2, "height")));
+  const context2 = useEmitterValue$2("context");
+  return Header2 ? React__default.createElement(headerFooterTag, { ref: ref2 }, React__default.createElement(Header2, contextPropIfNotDomElement(Header2, context2))) : null;
+});
+const Footer$1 = /* @__PURE__ */ React__default.memo(function VirtuosoFooter() {
+  const Footer2 = useEmitterValue$2("FooterComponent");
+  const footerHeight = usePublisher$2("footerHeight");
+  const headerFooterTag = useEmitterValue$2("headerFooterTag");
+  const ref2 = useSize((el2) => footerHeight(correctItemSize(el2, "height")));
+  const context2 = useEmitterValue$2("context");
+  return Footer2 ? React__default.createElement(headerFooterTag, { ref: ref2 }, React__default.createElement(Footer2, contextPropIfNotDomElement(Footer2, context2))) : null;
+});
 function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, useEmitterValue: useEmitterValue2 }) {
   const Scroller2 = React__default.memo(function VirtuosoScroller({ style: style2, children, ...props2 }) {
     const scrollContainerStateCallback = usePublisher2("scrollContainerState");
@@ -171573,6 +171753,115 @@ function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitt
   });
   return Scroller2;
 }
+const Viewport$2 = ({ children }) => {
+  const ctx = React__default.useContext(VirtuosoMockContext);
+  const viewportHeight = usePublisher$2("viewportHeight");
+  const fixedItemHeight = usePublisher$2("fixedItemHeight");
+  const alignToBottom = useEmitterValue$2("alignToBottom");
+  const viewportRef = useSize(compose(viewportHeight, (el2) => correctItemSize(el2, "height")));
+  React__default.useEffect(() => {
+    if (ctx) {
+      viewportHeight(ctx.viewportHeight);
+      fixedItemHeight(ctx.itemHeight);
+    }
+  }, [ctx, viewportHeight, fixedItemHeight]);
+  return /* @__PURE__ */ React__default.createElement("div", { style: viewportStyle(alignToBottom), ref: viewportRef, "data-viewport-type": "element" }, children);
+};
+const WindowViewport$2 = ({ children }) => {
+  const ctx = React__default.useContext(VirtuosoMockContext);
+  const windowViewportRect = usePublisher$2("windowViewportRect");
+  const fixedItemHeight = usePublisher$2("fixedItemHeight");
+  const customScrollParent = useEmitterValue$2("customScrollParent");
+  const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+  const alignToBottom = useEmitterValue$2("alignToBottom");
+  React__default.useEffect(() => {
+    if (ctx) {
+      fixedItemHeight(ctx.itemHeight);
+      windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
+    }
+  }, [ctx, windowViewportRect, fixedItemHeight]);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: viewportRef, style: viewportStyle(alignToBottom), "data-viewport-type": "window" }, children);
+};
+const TopItemListContainer = ({ children }) => {
+  const TopItemList = useEmitterValue$2("TopItemListComponent") || "div";
+  const headerHeight = useEmitterValue$2("headerHeight");
+  const style2 = { ...topItemListStyle, marginTop: `${headerHeight}px` };
+  const context2 = useEmitterValue$2("context");
+  return React__default.createElement(TopItemList, { style: style2, ...contextPropIfNotDomElement(TopItemList, context2) }, children);
+};
+const ListRoot = /* @__PURE__ */ React__default.memo(function VirtuosoRoot(props2) {
+  const useWindowScroll = useEmitterValue$2("useWindowScroll");
+  const showTopList = useEmitterValue$2("topItemsIndexes").length > 0;
+  const customScrollParent = useEmitterValue$2("customScrollParent");
+  const TheScroller = customScrollParent || useWindowScroll ? WindowScroller$2 : Scroller$2;
+  const TheViewport = customScrollParent || useWindowScroll ? WindowViewport$2 : Viewport$2;
+  return /* @__PURE__ */ React__default.createElement(TheScroller, { ...props2 }, showTopList && /* @__PURE__ */ React__default.createElement(TopItemListContainer, null, /* @__PURE__ */ React__default.createElement(Items$1, { showTopList: true })), /* @__PURE__ */ React__default.createElement(TheViewport, null, /* @__PURE__ */ React__default.createElement(Header$1, null), /* @__PURE__ */ React__default.createElement(Items$1, null), /* @__PURE__ */ React__default.createElement(Footer$1, null)));
+});
+const {
+  Component: List,
+  usePublisher: usePublisher$2,
+  useEmitterValue: useEmitterValue$2,
+  useEmitter: useEmitter$2
+} = /* @__PURE__ */ systemToComponent(
+  combinedSystem$2,
+  {
+    required: {},
+    optional: {
+      restoreStateFrom: "restoreStateFrom",
+      context: "context",
+      followOutput: "followOutput",
+      itemContent: "itemContent",
+      groupContent: "groupContent",
+      overscan: "overscan",
+      increaseViewportBy: "increaseViewportBy",
+      totalCount: "totalCount",
+      groupCounts: "groupCounts",
+      topItemCount: "topItemCount",
+      firstItemIndex: "firstItemIndex",
+      initialTopMostItemIndex: "initialTopMostItemIndex",
+      components: "components",
+      atBottomThreshold: "atBottomThreshold",
+      atTopThreshold: "atTopThreshold",
+      computeItemKey: "computeItemKey",
+      defaultItemHeight: "defaultItemHeight",
+      fixedItemHeight: "fixedItemHeight",
+      itemSize: "itemSize",
+      scrollSeekConfiguration: "scrollSeekConfiguration",
+      headerFooterTag: "headerFooterTag",
+      data: "data",
+      initialItemCount: "initialItemCount",
+      initialScrollTop: "initialScrollTop",
+      alignToBottom: "alignToBottom",
+      useWindowScroll: "useWindowScroll",
+      customScrollParent: "customScrollParent",
+      scrollerRef: "scrollerRef",
+      logLevel: "logLevel"
+    },
+    methods: {
+      scrollToIndex: "scrollToIndex",
+      scrollIntoView: "scrollIntoView",
+      scrollTo: "scrollTo",
+      scrollBy: "scrollBy",
+      autoscrollToBottom: "autoscrollToBottom",
+      getState: "getState"
+    },
+    events: {
+      isScrolling: "isScrolling",
+      endReached: "endReached",
+      startReached: "startReached",
+      rangeChanged: "rangeChanged",
+      atBottomStateChange: "atBottomStateChange",
+      atTopStateChange: "atTopStateChange",
+      totalListHeightChanged: "totalListHeightChanged",
+      itemsRendered: "itemsRendered",
+      groupIndices: "groupIndices"
+    }
+  },
+  ListRoot
+);
+const Scroller$2 = /* @__PURE__ */ buildScroller({ usePublisher: usePublisher$2, useEmitterValue: useEmitterValue$2, useEmitter: useEmitter$2 });
+const WindowScroller$2 = /* @__PURE__ */ buildWindowScroller({ usePublisher: usePublisher$2, useEmitterValue: useEmitterValue$2, useEmitter: useEmitter$2 });
+const Virtuoso = List;
 const INITIAL_GRID_STATE = {
   items: [],
   offsetBottom: 0,
@@ -172082,7 +172371,7 @@ const Viewport$1 = ({ children }) => {
       itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
     }
   }, [ctx, viewportDimensions, itemDimensions]);
-  return /* @__PURE__ */ React__default.createElement("div", { style: viewportStyle(), ref: viewportRef }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { style: viewportStyle(false), ref: viewportRef }, children);
 };
 const WindowViewport$1 = ({ children }) => {
   const ctx = React__default.useContext(VirtuosoGridMockContext);
@@ -172096,7 +172385,7 @@ const WindowViewport$1 = ({ children }) => {
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth });
     }
   }, [ctx, windowViewportRect, itemDimensions]);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: viewportRef, style: viewportStyle() }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: viewportRef, style: viewportStyle(false) }, children);
 };
 const GridRoot = /* @__PURE__ */ React__default.memo(function GridRoot2({ ...props2 }) {
   const useWindowScroll = useEmitterValue$1("useWindowScroll");
@@ -172292,7 +172581,7 @@ const Viewport = ({ children }) => {
       fixedItemHeight(ctx.itemHeight);
     }
   }, [ctx, viewportHeight, fixedItemHeight]);
-  return /* @__PURE__ */ React__default.createElement("div", { style: viewportStyle(), ref: viewportRef, "data-viewport-type": "element" }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { style: viewportStyle(false), ref: viewportRef, "data-viewport-type": "element" }, children);
 };
 const WindowViewport = ({ children }) => {
   const ctx = React__default.useContext(VirtuosoMockContext);
@@ -172306,7 +172595,7 @@ const WindowViewport = ({ children }) => {
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
     }
   }, [ctx, windowViewportRect, fixedItemHeight]);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: viewportRef, style: viewportStyle(), "data-viewport-type": "window" }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: viewportRef, style: viewportStyle(false), "data-viewport-type": "window" }, children);
 };
 const TableRoot = /* @__PURE__ */ React__default.memo(function TableVirtuosoRoot(props2) {
   const useWindowScroll = useEmitterValue("useWindowScroll");
@@ -173247,7 +173536,8 @@ const ColumnsSetting = (props2) => {
                   {
                     isChecked: col.isVisible,
                     isDisabled: false,
-                    isValid: true
+                    isValid: true,
+                    id: `column-${col.id}-isVisible`
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: col.label })
@@ -173289,503 +173579,6 @@ const ColumnsSetting = (props2) => {
     }
   ) });
 };
-var define_process_env_default = {};
-var hasNativePerformanceNow = typeof performance === "object" && typeof performance.now === "function";
-var now = hasNativePerformanceNow ? function() {
-  return performance.now();
-} : function() {
-  return Date.now();
-};
-function cancelTimeout(timeoutID) {
-  cancelAnimationFrame(timeoutID.id);
-}
-function requestTimeout(callback, delay) {
-  var start2 = now();
-  function tick() {
-    if (now() - start2 >= delay) {
-      callback.call(null);
-    } else {
-      timeoutID.id = requestAnimationFrame(tick);
-    }
-  }
-  var timeoutID = {
-    id: requestAnimationFrame(tick)
-  };
-  return timeoutID;
-}
-var size = -1;
-function getScrollbarSize(recalculate) {
-  if (recalculate === void 0) {
-    recalculate = false;
-  }
-  if (size === -1 || recalculate) {
-    var div2 = document.createElement("div");
-    var style2 = div2.style;
-    style2.width = "50px";
-    style2.height = "50px";
-    style2.overflow = "scroll";
-    document.body.appendChild(div2);
-    size = div2.offsetWidth - div2.clientWidth;
-    document.body.removeChild(div2);
-  }
-  return size;
-}
-var cachedRTLResult = null;
-function getRTLOffsetType(recalculate) {
-  if (recalculate === void 0) {
-    recalculate = false;
-  }
-  if (cachedRTLResult === null || recalculate) {
-    var outerDiv = document.createElement("div");
-    var outerStyle = outerDiv.style;
-    outerStyle.width = "50px";
-    outerStyle.height = "50px";
-    outerStyle.overflow = "scroll";
-    outerStyle.direction = "rtl";
-    var innerDiv = document.createElement("div");
-    var innerStyle = innerDiv.style;
-    innerStyle.width = "100px";
-    innerStyle.height = "100px";
-    outerDiv.appendChild(innerDiv);
-    document.body.appendChild(outerDiv);
-    if (outerDiv.scrollLeft > 0) {
-      cachedRTLResult = "positive-descending";
-    } else {
-      outerDiv.scrollLeft = 1;
-      if (outerDiv.scrollLeft === 0) {
-        cachedRTLResult = "negative";
-      } else {
-        cachedRTLResult = "positive-ascending";
-      }
-    }
-    document.body.removeChild(outerDiv);
-    return cachedRTLResult;
-  }
-  return cachedRTLResult;
-}
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-var defaultItemKey$1 = function defaultItemKey3(index2, data2) {
-  return index2;
-};
-var devWarningsDirection = null;
-var devWarningsTagName$1 = null;
-if (define_process_env_default.NODE_ENV !== "production") {
-  if (typeof window !== "undefined" && typeof window.WeakSet !== "undefined") {
-    devWarningsDirection = /* @__PURE__ */ new WeakSet();
-    devWarningsTagName$1 = /* @__PURE__ */ new WeakSet();
-  }
-}
-function createListComponent(_ref2) {
-  var _class;
-  var getItemOffset3 = _ref2.getItemOffset, getEstimatedTotalSize4 = _ref2.getEstimatedTotalSize, getItemSize3 = _ref2.getItemSize, getOffsetForIndexAndAlignment5 = _ref2.getOffsetForIndexAndAlignment, getStartIndexForOffset3 = _ref2.getStartIndexForOffset, getStopIndexForStartIndex3 = _ref2.getStopIndexForStartIndex, initInstanceProps5 = _ref2.initInstanceProps, shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange, validateProps5 = _ref2.validateProps;
-  return _class = /* @__PURE__ */ function(_PureComponent) {
-    _inheritsLoose(List2, _PureComponent);
-    function List2(props2) {
-      var _this;
-      _this = _PureComponent.call(this, props2) || this;
-      _this._instanceProps = initInstanceProps5(_this.props, _assertThisInitialized(_this));
-      _this._outerRef = void 0;
-      _this._resetIsScrollingTimeoutId = null;
-      _this.state = {
-        instance: _assertThisInitialized(_this),
-        isScrolling: false,
-        scrollDirection: "forward",
-        scrollOffset: typeof _this.props.initialScrollOffset === "number" ? _this.props.initialScrollOffset : 0,
-        scrollUpdateWasRequested: false
-      };
-      _this._callOnItemsRendered = void 0;
-      _this._callOnItemsRendered = memoizeOne(function(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
-        return _this.props.onItemsRendered({
-          overscanStartIndex,
-          overscanStopIndex,
-          visibleStartIndex,
-          visibleStopIndex
-        });
-      });
-      _this._callOnScroll = void 0;
-      _this._callOnScroll = memoizeOne(function(scrollDirection, scrollOffset, scrollUpdateWasRequested) {
-        return _this.props.onScroll({
-          scrollDirection,
-          scrollOffset,
-          scrollUpdateWasRequested
-        });
-      });
-      _this._getItemStyle = void 0;
-      _this._getItemStyle = function(index2) {
-        var _this$props = _this.props, direction = _this$props.direction, itemSize = _this$props.itemSize, layout = _this$props.layout;
-        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
-        var style2;
-        if (itemStyleCache.hasOwnProperty(index2)) {
-          style2 = itemStyleCache[index2];
-        } else {
-          var _offset = getItemOffset3(_this.props, index2, _this._instanceProps);
-          var size2 = getItemSize3(_this.props, index2, _this._instanceProps);
-          var isHorizontal = direction === "horizontal" || layout === "horizontal";
-          var isRtl = direction === "rtl";
-          var offsetHorizontal = isHorizontal ? _offset : 0;
-          itemStyleCache[index2] = style2 = {
-            position: "absolute",
-            left: isRtl ? void 0 : offsetHorizontal,
-            right: isRtl ? offsetHorizontal : void 0,
-            top: !isHorizontal ? _offset : 0,
-            height: !isHorizontal ? size2 : "100%",
-            width: isHorizontal ? size2 : "100%"
-          };
-        }
-        return style2;
-      };
-      _this._getItemStyleCache = void 0;
-      _this._getItemStyleCache = memoizeOne(function(_15, __, ___) {
-        return {};
-      });
-      _this._onScrollHorizontal = function(event) {
-        var _event$currentTarget = event.currentTarget, clientWidth = _event$currentTarget.clientWidth, scrollLeft = _event$currentTarget.scrollLeft, scrollWidth = _event$currentTarget.scrollWidth;
-        _this.setState(function(prevState) {
-          if (prevState.scrollOffset === scrollLeft) {
-            return null;
-          }
-          var direction = _this.props.direction;
-          var scrollOffset = scrollLeft;
-          if (direction === "rtl") {
-            switch (getRTLOffsetType()) {
-              case "negative":
-                scrollOffset = -scrollLeft;
-                break;
-              case "positive-descending":
-                scrollOffset = scrollWidth - clientWidth - scrollLeft;
-                break;
-            }
-          }
-          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollLeft ? "forward" : "backward",
-            scrollOffset,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
-      };
-      _this._onScrollVertical = function(event) {
-        var _event$currentTarget2 = event.currentTarget, clientHeight = _event$currentTarget2.clientHeight, scrollHeight = _event$currentTarget2.scrollHeight, scrollTop = _event$currentTarget2.scrollTop;
-        _this.setState(function(prevState) {
-          if (prevState.scrollOffset === scrollTop) {
-            return null;
-          }
-          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
-            scrollOffset,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
-      };
-      _this._outerRefSetter = function(ref2) {
-        var outerRef = _this.props.outerRef;
-        _this._outerRef = ref2;
-        if (typeof outerRef === "function") {
-          outerRef(ref2);
-        } else if (outerRef != null && typeof outerRef === "object" && outerRef.hasOwnProperty("current")) {
-          outerRef.current = ref2;
-        }
-      };
-      _this._resetIsScrollingDebounced = function() {
-        if (_this._resetIsScrollingTimeoutId !== null) {
-          cancelTimeout(_this._resetIsScrollingTimeoutId);
-        }
-        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
-      };
-      _this._resetIsScrolling = function() {
-        _this._resetIsScrollingTimeoutId = null;
-        _this.setState({
-          isScrolling: false
-        }, function() {
-          _this._getItemStyleCache(-1, null);
-        });
-      };
-      return _this;
-    }
-    List2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      validateSharedProps$1(nextProps, prevState);
-      validateProps5(nextProps);
-      return null;
-    };
-    var _proto = List2.prototype;
-    _proto.scrollTo = function scrollTo2(scrollOffset) {
-      scrollOffset = Math.max(0, scrollOffset);
-      this.setState(function(prevState) {
-        if (prevState.scrollOffset === scrollOffset) {
-          return null;
-        }
-        return {
-          scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
-          scrollOffset,
-          scrollUpdateWasRequested: true
-        };
-      }, this._resetIsScrollingDebounced);
-    };
-    _proto.scrollToItem = function scrollToItem(index2, align) {
-      if (align === void 0) {
-        align = "auto";
-      }
-      var _this$props2 = this.props, itemCount = _this$props2.itemCount, layout = _this$props2.layout;
-      var scrollOffset = this.state.scrollOffset;
-      index2 = Math.max(0, Math.min(index2, itemCount - 1));
-      var scrollbarSize = 0;
-      if (this._outerRef) {
-        var outerRef = this._outerRef;
-        if (layout === "vertical") {
-          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
-        } else {
-          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
-        }
-      }
-      this.scrollTo(getOffsetForIndexAndAlignment5(this.props, index2, align, scrollOffset, this._instanceProps, scrollbarSize));
-    };
-    _proto.componentDidMount = function componentDidMount() {
-      var _this$props3 = this.props, direction = _this$props3.direction, initialScrollOffset = _this$props3.initialScrollOffset, layout = _this$props3.layout;
-      if (typeof initialScrollOffset === "number" && this._outerRef != null) {
-        var outerRef = this._outerRef;
-        if (direction === "horizontal" || layout === "horizontal") {
-          outerRef.scrollLeft = initialScrollOffset;
-        } else {
-          outerRef.scrollTop = initialScrollOffset;
-        }
-      }
-      this._callPropsCallbacks();
-    };
-    _proto.componentDidUpdate = function componentDidUpdate() {
-      var _this$props4 = this.props, direction = _this$props4.direction, layout = _this$props4.layout;
-      var _this$state = this.state, scrollOffset = _this$state.scrollOffset, scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
-      if (scrollUpdateWasRequested && this._outerRef != null) {
-        var outerRef = this._outerRef;
-        if (direction === "horizontal" || layout === "horizontal") {
-          if (direction === "rtl") {
-            switch (getRTLOffsetType()) {
-              case "negative":
-                outerRef.scrollLeft = -scrollOffset;
-                break;
-              case "positive-ascending":
-                outerRef.scrollLeft = scrollOffset;
-                break;
-              default:
-                var clientWidth = outerRef.clientWidth, scrollWidth = outerRef.scrollWidth;
-                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
-                break;
-            }
-          } else {
-            outerRef.scrollLeft = scrollOffset;
-          }
-        } else {
-          outerRef.scrollTop = scrollOffset;
-        }
-      }
-      this._callPropsCallbacks();
-    };
-    _proto.componentWillUnmount = function componentWillUnmount() {
-      if (this._resetIsScrollingTimeoutId !== null) {
-        cancelTimeout(this._resetIsScrollingTimeoutId);
-      }
-    };
-    _proto.render = function render2() {
-      var _this$props5 = this.props, children = _this$props5.children, className = _this$props5.className, direction = _this$props5.direction, height = _this$props5.height, innerRef = _this$props5.innerRef, innerElementType = _this$props5.innerElementType, innerTagName = _this$props5.innerTagName, itemCount = _this$props5.itemCount, itemData = _this$props5.itemData, _this$props5$itemKey = _this$props5.itemKey, itemKey2 = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey, layout = _this$props5.layout, outerElementType = _this$props5.outerElementType, outerTagName = _this$props5.outerTagName, style2 = _this$props5.style, useIsScrolling = _this$props5.useIsScrolling, width = _this$props5.width;
-      var isScrolling = this.state.isScrolling;
-      var isHorizontal = direction === "horizontal" || layout === "horizontal";
-      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
-      var _this$_getRangeToRend = this._getRangeToRender(), startIndex = _this$_getRangeToRend[0], stopIndex = _this$_getRangeToRend[1];
-      var items = [];
-      if (itemCount > 0) {
-        for (var _index = startIndex; _index <= stopIndex; _index++) {
-          items.push(createElement(children, {
-            data: itemData,
-            key: itemKey2(_index, itemData),
-            index: _index,
-            isScrolling: useIsScrolling ? isScrolling : void 0,
-            style: this._getItemStyle(_index)
-          }));
-        }
-      }
-      var estimatedTotalSize = getEstimatedTotalSize4(this.props, this._instanceProps);
-      return createElement(outerElementType || outerTagName || "div", {
-        className,
-        onScroll,
-        ref: this._outerRefSetter,
-        style: _extends$4({
-          position: "relative",
-          height,
-          width,
-          overflow: "auto",
-          WebkitOverflowScrolling: "touch",
-          willChange: "transform",
-          direction
-        }, style2)
-      }, createElement(innerElementType || innerTagName || "div", {
-        children: items,
-        ref: innerRef,
-        style: {
-          height: isHorizontal ? "100%" : estimatedTotalSize,
-          pointerEvents: isScrolling ? "none" : void 0,
-          width: isHorizontal ? estimatedTotalSize : "100%"
-        }
-      }));
-    };
-    _proto._callPropsCallbacks = function _callPropsCallbacks() {
-      if (typeof this.props.onItemsRendered === "function") {
-        var itemCount = this.props.itemCount;
-        if (itemCount > 0) {
-          var _this$_getRangeToRend2 = this._getRangeToRender(), _overscanStartIndex = _this$_getRangeToRend2[0], _overscanStopIndex = _this$_getRangeToRend2[1], _visibleStartIndex = _this$_getRangeToRend2[2], _visibleStopIndex = _this$_getRangeToRend2[3];
-          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
-        }
-      }
-      if (typeof this.props.onScroll === "function") {
-        var _this$state2 = this.state, _scrollDirection = _this$state2.scrollDirection, _scrollOffset = _this$state2.scrollOffset, _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
-      }
-    };
-    _proto._getRangeToRender = function _getRangeToRender() {
-      var _this$props6 = this.props, itemCount = _this$props6.itemCount, overscanCount = _this$props6.overscanCount;
-      var _this$state3 = this.state, isScrolling = _this$state3.isScrolling, scrollDirection = _this$state3.scrollDirection, scrollOffset = _this$state3.scrollOffset;
-      if (itemCount === 0) {
-        return [0, 0, 0, 0];
-      }
-      var startIndex = getStartIndexForOffset3(this.props, scrollOffset, this._instanceProps);
-      var stopIndex = getStopIndexForStartIndex3(this.props, startIndex, scrollOffset, this._instanceProps);
-      var overscanBackward = !isScrolling || scrollDirection === "backward" ? Math.max(1, overscanCount) : 1;
-      var overscanForward = !isScrolling || scrollDirection === "forward" ? Math.max(1, overscanCount) : 1;
-      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
-    };
-    return List2;
-  }(PureComponent), _class.defaultProps = {
-    direction: "ltr",
-    itemData: void 0,
-    layout: "vertical",
-    overscanCount: 2,
-    useIsScrolling: false
-  }, _class;
-}
-var validateSharedProps$1 = function validateSharedProps3(_ref2, _ref3) {
-  var children = _ref2.children, direction = _ref2.direction, height = _ref2.height, layout = _ref2.layout, innerTagName = _ref2.innerTagName, outerTagName = _ref2.outerTagName, width = _ref2.width;
-  var instance = _ref3.instance;
-  if (define_process_env_default.NODE_ENV !== "production") {
-    if (innerTagName != null || outerTagName != null) {
-      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
-        devWarningsTagName$1.add(instance);
-        console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.");
-      }
-    }
-    var isHorizontal = direction === "horizontal" || layout === "horizontal";
-    switch (direction) {
-      case "horizontal":
-      case "vertical":
-        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
-          devWarningsDirection.add(instance);
-          console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
-        }
-        break;
-      case "ltr":
-      case "rtl":
-        break;
-      default:
-        throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". ' + ('"' + direction + '" was specified.'));
-    }
-    switch (layout) {
-      case "horizontal":
-      case "vertical":
-        break;
-      default:
-        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + layout + '" was specified.'));
-    }
-    if (children == null) {
-      throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (children === null ? "null" : typeof children) + '" was specified.'));
-    }
-    if (isHorizontal && typeof width !== "number") {
-      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (width === null ? "null" : typeof width) + '" was specified.'));
-    } else if (!isHorizontal && typeof height !== "number") {
-      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (height === null ? "null" : typeof height) + '" was specified.'));
-    }
-  }
-};
-var FixedSizeList = /* @__PURE__ */ createListComponent({
-  getItemOffset: function getItemOffset2(_ref2, index2) {
-    var itemSize = _ref2.itemSize;
-    return index2 * itemSize;
-  },
-  getItemSize: function getItemSize2(_ref2, index2) {
-    var itemSize = _ref2.itemSize;
-    return itemSize;
-  },
-  getEstimatedTotalSize: function getEstimatedTotalSize3(_ref3) {
-    var itemCount = _ref3.itemCount, itemSize = _ref3.itemSize;
-    return itemSize * itemCount;
-  },
-  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment4(_ref4, index2, align, scrollOffset, instanceProps, scrollbarSize) {
-    var direction = _ref4.direction, height = _ref4.height, itemCount = _ref4.itemCount, itemSize = _ref4.itemSize, layout = _ref4.layout, width = _ref4.width;
-    var isHorizontal = direction === "horizontal" || layout === "horizontal";
-    var size2 = isHorizontal ? width : height;
-    var lastItemOffset = Math.max(0, itemCount * itemSize - size2);
-    var maxOffset = Math.min(lastItemOffset, index2 * itemSize);
-    var minOffset = Math.max(0, index2 * itemSize - size2 + itemSize + scrollbarSize);
-    if (align === "smart") {
-      if (scrollOffset >= minOffset - size2 && scrollOffset <= maxOffset + size2) {
-        align = "auto";
-      } else {
-        align = "center";
-      }
-    }
-    switch (align) {
-      case "start":
-        return maxOffset;
-      case "end":
-        return minOffset;
-      case "center": {
-        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-        if (middleOffset < Math.ceil(size2 / 2)) {
-          return 0;
-        } else if (middleOffset > lastItemOffset + Math.floor(size2 / 2)) {
-          return lastItemOffset;
-        } else {
-          return middleOffset;
-        }
-      }
-      case "auto":
-      default:
-        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
-          return scrollOffset;
-        } else if (scrollOffset < minOffset) {
-          return minOffset;
-        } else {
-          return maxOffset;
-        }
-    }
-  },
-  getStartIndexForOffset: function getStartIndexForOffset2(_ref5, offset3) {
-    var itemCount = _ref5.itemCount, itemSize = _ref5.itemSize;
-    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset3 / itemSize)));
-  },
-  getStopIndexForStartIndex: function getStopIndexForStartIndex2(_ref6, startIndex, scrollOffset) {
-    var direction = _ref6.direction, height = _ref6.height, itemCount = _ref6.itemCount, itemSize = _ref6.itemSize, layout = _ref6.layout, width = _ref6.width;
-    var isHorizontal = direction === "horizontal" || layout === "horizontal";
-    var offset3 = startIndex * itemSize;
-    var size2 = isHorizontal ? width : height;
-    var numVisibleItems = Math.ceil((size2 + scrollOffset - offset3) / itemSize);
-    return Math.max(0, Math.min(
-      itemCount - 1,
-      startIndex + numVisibleItems - 1
-      // -1 is because stop index is inclusive
-    ));
-  },
-  initInstanceProps: function initInstanceProps4(props2) {
-  },
-  shouldResetStyleCacheOnItemSizeChange: true,
-  validateProps: function validateProps4(_ref7) {
-    var itemSize = _ref7.itemSize;
-    if (define_process_env_default.NODE_ENV !== "production") {
-      if (typeof itemSize !== "number") {
-        throw Error('An invalid "itemSize" prop has been specified. Value should be a number. ' + ('"' + (itemSize === null ? "null" : typeof itemSize) + '" was specified.'));
-      }
-    }
-  }
-});
 const SelectClass = styleAsClass`
   &.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
     padding: 0 8px;
@@ -174376,11 +174169,12 @@ const ActionButtonsWrapper = qe$1.div`
   }
 `;
 const UniqueValueListItemWrapper = qe$1.div`
-  line-height: ${VALUES_LIST_ITEM_HEIGHT_PX}px;
+  line-height: ${VALUES_LIST_ITEM_HEIGHT_PX}px !important;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
+  height: ${VALUES_LIST_ITEM_HEIGHT_PX}px;
 `;
 const UniqueValueListItem = (props2) => {
   const { uniqueValue, onChange: onChange2 } = props2;
@@ -174395,7 +174189,6 @@ const UniqueValueListItem = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UniqueValueListItemWrapper,
     {
-      style: props2.style,
       className: CLASS_NAMES.BUILTIN_BODY,
       onClick: handleChange,
       "data-test": `filter-value-${uniqueValue.rawValue}`,
@@ -174405,7 +174198,8 @@ const UniqueValueListItem = (props2) => {
           {
             isChecked: props2.checked,
             isDisabled: false,
-            isValid: true
+            isValid: true,
+            id: `filter-value-${uniqueValue.rawValue}`
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -174550,15 +174344,18 @@ const FilterPopoverContent = ({
       setFilter
     ]
   );
-  const grouppedOpts = {};
-  for (const [type5, spec] of Object.entries(conditionFieldsSpec)) {
-    if (spec.columnTypes === void 0 || spec.columnTypes.includes(columnProperties.columnType)) {
-      (grouppedOpts[spec.group] ?? (grouppedOpts[spec.group] = [])).push([
-        type5,
-        spec
-      ]);
+  const groupedOpts = React__default.useMemo(() => {
+    const groupedOpts2 = {};
+    for (const [type5, spec] of Object.entries(conditionFieldsSpec)) {
+      if (spec.columnTypes === void 0 || spec.columnTypes.includes(columnProperties.columnType)) {
+        (groupedOpts2[spec.group] ?? (groupedOpts2[spec.group] = [])).push([
+          type5,
+          spec
+        ]);
+      }
     }
-  }
+    return groupedOpts2;
+  }, [columnProperties.columnType]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnFilterWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     StyledForm,
     {
@@ -174594,7 +174391,7 @@ const FilterPopoverContent = ({
                         autoFocus: true,
                         "data-test": "filter-select-condition-type",
                         className: `${CLASS_NAMES.BUILTIN_BODY}`,
-                        children: Object.entries(grouppedOpts).map(([group, opts]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        children: Object.entries(groupedOpts).map(([group, opts]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                           Select$1.OptGroup,
                           {
                             label: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -174682,22 +174479,19 @@ const FilterPopoverContent = ({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      FixedSizeList,
+                      Virtuoso,
                       {
-                        height: 200,
-                        itemSize: VALUES_LIST_ITEM_HEIGHT_PX,
-                        itemCount: filteredValues.length,
-                        width: "100%",
-                        itemKey: (filteredIndex) => filteredValues[filteredIndex].index,
-                        style: { marginTop: 8 },
-                        children: ({ index: filteredIndex, style: style2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        style: { height: "200px" },
+                        totalCount: filteredValues.length,
+                        fixedItemHeight: VALUES_LIST_ITEM_HEIGHT_PX,
+                        itemContent: (index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                           UniqueValueListItem,
                           {
-                            checked: !excludedVals.has(filteredValues[filteredIndex]),
-                            uniqueValue: filteredValues[filteredIndex],
-                            style: style2,
+                            checked: !excludedVals.has(filteredValues[index2]),
+                            uniqueValue: filteredValues[index2],
                             onChange: handleCheckboxOnChange
-                          }
+                          },
+                          `filter-value-${filteredValues[index2].rawValue}`
                         )
                       }
                     )
@@ -174868,6 +174662,7 @@ const TableColumnHeaderBtn = ({
       trigger: "click",
       placement: "bottom",
       open,
+      showArrow: false,
       content: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: CLASS_NAMES.BUILTIN_BODY, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           ColumnMenuItemWrapper,
@@ -175104,6 +174899,7 @@ const TableHeaderCell = (props2) => {
   );
   const { key: key2, ...headerProps } = column2.getHeaderProps();
   const headerIconPosition = props2.columnProperties.headerIconPosition ?? "left";
+  const textWrap = props2.columnHeaderTextWrap ? "wrap" : "nowrap";
   const parentRef = useRef(null);
   const columnHeaderClassNames = [columnHeaderClassName];
   if (!props2.isHidden) {
@@ -175160,7 +174956,10 @@ const TableHeaderCell = (props2) => {
       HeaderCellContentWrapper,
       {
         columnProperties: props2.columnProperties,
-        style: columnHeaderStyleProps.style,
+        style: {
+          ...columnHeaderStyleProps.style,
+          textWrap
+        },
         className: columnHeaderClassNames.join(" "),
         draggable: !props2.isHidden,
         onDragStart: (e3) => {
@@ -176608,6 +176407,7 @@ const Table = (props2) => {
                               handleHeaderDropped,
                               mutableHeaderDragRef,
                               columnHeaderProps: props2.columnHeaderTextStyle,
+                              columnHeaderTextWrap: props2.columnHeaderTextWrap,
                               theme,
                               updateProperty: props2.updateProperty
                             },
@@ -176988,6 +176788,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     });
     __publicField(this, "currentCellFocus", []);
     __publicField(this, "eventListenerController");
+    __publicField(this, "cachedTagColorAssignment");
     __publicField(this, "getDisplayedValueForEditCell", ({
       columnId,
       rawValue,
@@ -177939,7 +177740,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           notation: columnNotation
         },
         Cell: (props2) => {
-          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q, _r2, _s2, _t2, _u2, _v, _w;
+          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q, _r2, _s2, _t2, _u2, _v, _w, _x, _y;
           const currentRowIndex = props2.cell.row.index;
           const originalRowIndex = ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
           const isEdited = ((_b2 = this.props.editOverrides) == null ? void 0 : _b2[originalRowIndex]) != null && columnProperties.id in this.props.editOverrides[originalRowIndex];
@@ -177976,8 +177777,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
                 cellProps: {
                   isHidden: isHidden2,
                   cellProperties,
-                  tagsColorAssignment: this.props.tagsColorAssignment,
-                  tagsCustomColorAssignment: columnProperties.tagDisplayConfig,
+                  tagsColorAssignment: (_m2 = this.cachedTagColorAssignment) == null ? void 0 : _m2[columnProperties.id],
                   notation: columnNotation,
                   currency: columnProperties.currency,
                   minimumFractionDigits: columnProperties.minimumFractionDigits,
@@ -178043,7 +177843,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
                     columnProperties,
                     originalRowIndex
                   ),
-                  isEditFocused: ((_m2 = this.props.currentEditFocus) == null ? void 0 : _m2.row) === originalRowIndex && ((_n2 = this.props.currentEditFocus) == null ? void 0 : _n2.columnId) === columnProperties.id,
+                  isEditFocused: ((_n2 = this.props.currentEditFocus) == null ? void 0 : _n2.row) === originalRowIndex && ((_o2 = this.props.currentEditFocus) == null ? void 0 : _o2.columnId) === columnProperties.id,
                   isEdited,
                   currentEditValue: this.props.currentEditValue,
                   editInputType: columnProperties.editInputType,
@@ -178058,7 +177858,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
                   editDropdownClientSideFiltering: columnProperties.editDropdownClientSideFiltering,
                   editOptions: this.editOptions[columnProperties.id],
                   transformation: columnProperties.transformation,
-                  validationErrors: isInserted ? ((_q = (_p2 = (_o2 = this.props.inserts) == null ? void 0 : _o2.insertedRowValidations) == null ? void 0 : _p2[originalRowIndex]) == null ? void 0 : _q[columnProperties.id]) ?? [] : ((_t2 = (_s2 = (_r2 = this.props.editOverrides) == null ? void 0 : _r2[originalRowIndex]) == null ? void 0 : _s2[columnProperties.id]) == null ? void 0 : _t2.validationErrors) ?? [],
+                  validationErrors: isInserted ? ((_r2 = (_q = (_p2 = this.props.inserts) == null ? void 0 : _p2.insertedRowValidations) == null ? void 0 : _q[originalRowIndex]) == null ? void 0 : _r2[columnProperties.id]) ?? [] : ((_u2 = (_t2 = (_s2 = this.props.editOverrides) == null ? void 0 : _s2[originalRowIndex]) == null ? void 0 : _t2[columnProperties.id]) == null ? void 0 : _u2.validationErrors) ?? [],
                   editMinDate: columnProperties.editMinDate,
                   editMaxDate: columnProperties.editMaxDate,
                   editTwentyFourHourTime: columnProperties.editTwentyFourHourTime
@@ -178107,7 +177907,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
                 columnId: columnProperties.id
               },
               maxLinesPerRow: this.props.maxLinesPerRow,
-              tableCellTextStyle: (_u2 = this.props.cellProps) == null ? void 0 : _u2.textStyle,
+              tableCellTextStyle: (_v = this.props.cellProps) == null ? void 0 : _v.textStyle,
               value: props2.cell.value
             });
           } else {
@@ -178117,20 +177917,19 @@ const _TableWidget = class _TableWidget extends React__default.Component {
               columnType: columnProperties.columnType,
               editInputType: columnProperties.editInputType,
               maxLinesPerRow: this.props.maxLinesPerRow,
-              tableCellTextStyle: (_v = this.props.cellProps) == null ? void 0 : _v.textStyle,
+              tableCellTextStyle: (_w = this.props.cellProps) == null ? void 0 : _w.textStyle,
               typographies: this.props.theme.typographies,
               cellProps: {
                 // since these are overridden by the cellProperties
                 ...columnProperties,
                 ...getCellProperties(
-                  (_w = tableProps == null ? void 0 : tableProps.cellProps) == null ? void 0 : _w.textStyle,
+                  (_x = tableProps == null ? void 0 : tableProps.cellProps) == null ? void 0 : _x.textStyle,
                   columnProperties,
                   indexInTableDataWithInserts
                 ),
                 isHidden: isHidden2,
                 cellProperties,
-                tagsColorAssignment: this.props.tagsColorAssignment,
-                tagsCustomColorAssignment: columnProperties.tagDisplayConfig,
+                tagsColorAssignment: (_y = this.cachedTagColorAssignment) == null ? void 0 : _y[columnProperties.id],
                 booleanStyleFalse: columnProperties.booleanStyleFalse,
                 rowDensity: this.props.rowDensity,
                 isFocused: props2.isFocused,
@@ -178173,6 +177972,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     const { pageSize } = this.props;
     const editOverrides = this.props.editOverrides ?? {};
     const filteredTableData = Array.isArray(this.props.filteredTableData) ? this.props.filteredTableData : [];
+    this.assignTagColors(this.props.tableData, this.props.columns);
     const tableColumns = this.getReactTableColumns() || [];
     const transformedData = _TableWidget.transformData(
       filteredTableData || [],
@@ -178180,7 +177980,6 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       tableColumns,
       editOverrides
     );
-    this.assignTagColors(transformedData, tableColumns);
     let pageNo = this.props.pageNo;
     if (pageNo === void 0) {
       pageNo = 1;
@@ -178261,6 +178060,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         tableCellTextStyle: (_c2 = this.props.cellProps) == null ? void 0 : _c2.textStyle,
         tableHeaderTextStyle: (_d2 = this.props.headerProps) == null ? void 0 : _d2.textStyle,
         columnHeaderTextStyle: (_e2 = this.props.columnHeaderProps) == null ? void 0 : _e2.textStyle,
+        columnHeaderTextWrap: this.props.columnHeaderTextWrap,
         searchProps: this.props.searchProps,
         disableNudge: this.props.disableNudge,
         setCurrentCellFocus: this.setCurrentCellFocus,
@@ -178270,43 +178070,47 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
     ) }) });
   }
-  assignTagColors(tableData, columns) {
-    var _a2;
-    let updatedColorAssignment = this.props.tagsColorAssignment ?? {
-      uniqueTagsCount: 0,
-      mapping: {}
-    };
-    let hasTags = false;
-    for (const row of tableData) {
-      if (!row) continue;
-      for (const column2 of columns) {
-        const value = row[column2.columnProperties.id];
-        if (((_a2 = column2.metaProperties) == null ? void 0 : _a2.type) === ColumnType.TAGS && Array.isArray(value)) {
-          hasTags = true;
-          for (const tagValue of value) {
-            const tagValueNorm = sanitizeCellValue(tagValue);
-            let uniqValueIdx = updatedColorAssignment == null ? void 0 : updatedColorAssignment.mapping[tagValueNorm];
-            if (uniqValueIdx === void 0) {
-              if (updatedColorAssignment === this.props.tagsColorAssignment) {
-                updatedColorAssignment = {
-                  uniqueTagsCount: (updatedColorAssignment == null ? void 0 : updatedColorAssignment.uniqueTagsCount) ?? 0,
-                  mapping: { ...updatedColorAssignment == null ? void 0 : updatedColorAssignment.mapping }
-                };
-              }
-              uniqValueIdx = updatedColorAssignment.uniqueTagsCount;
-              updatedColorAssignment.uniqueTagsCount = uniqValueIdx + 1;
-              updatedColorAssignment.mapping = {
-                ...updatedColorAssignment == null ? void 0 : updatedColorAssignment.mapping,
-                [tagValueNorm]: uniqValueIdx
+  assignTagColors(tableData = [], columns = {}) {
+    var _a2, _b2;
+    const updatedTagColorAssignment = {};
+    for (const [columnId, columnSettings] of Object.entries(columns)) {
+      if ((columnSettings == null ? void 0 : columnSettings.columnType) === "tags") {
+        updatedTagColorAssignment[columnId] = {
+          ...(_a2 = this.cachedTagColorAssignment) == null ? void 0 : _a2[columnId],
+          ...columnSettings == null ? void 0 : columnSettings.tagDisplayConfig
+        };
+      } else {
+        (_b2 = this.cachedTagColorAssignment) == null ? true : delete _b2[columnId];
+      }
+    }
+    let i3 = 0;
+    tableData.forEach((row) => {
+      Object.keys(updatedTagColorAssignment).forEach((columnId) => {
+        const data2 = row[columnId];
+        const tagConfig = updatedTagColorAssignment[columnId];
+        if (Array.isArray(data2)) {
+          data2.forEach((tag2) => {
+            if (!tagConfig[tag2]) {
+              tagConfig[tag2] = {
+                color: tagColorPalette[i3 % tagColorPalette.length]
               };
+              i3++;
             }
-          }
+          });
+        } else if (data2 != null && typeof data2 === "string" && !tagConfig[data2]) {
+          tagConfig[data2] = {
+            color: tagColorPalette[i3 % tagColorPalette.length]
+          };
+          i3++;
+        } else if (data2 != null && (typeof data2 === "number" || typeof data2 === "boolean") && !tagConfig[`${data2}`]) {
+          tagConfig[`${data2}`] = {
+            color: tagColorPalette[i3 % tagColorPalette.length]
+          };
+          i3++;
         }
-      }
-    }
-    if (hasTags && updatedColorAssignment !== this.props.tagsColorAssignment) {
-      this.props.updateTagColorAssignment(updatedColorAssignment);
-    }
+      });
+    });
+    this.cachedTagColorAssignment = updatedTagColorAssignment;
   }
 };
 __publicField(_TableWidget, "transformData", (tableData, filteredOrderMap, columns, editOverrides) => {
@@ -178394,7 +178198,10 @@ const SbTable = registerSbComponent(
         const newPageNo = Math.max(value - 1, 0);
         update((e3) => e3.pageNo = newPageNo);
         if (triggerEventHandlers) {
-          onPageChange == null ? void 0 : onPageChange(rowContext);
+          onPageChange == null ? void 0 : onPageChange({
+            ...rowContext,
+            nextPage: newPageNo
+          });
         }
       },
       [update, onPageChange]
@@ -178451,12 +178258,6 @@ const SbTable = registerSbComponent(
       },
       [update]
     );
-    const updateTagColorAssignment = useCallback(
-      (value) => {
-        update((e3) => e3.tagsColorAssignment = value);
-      },
-      [update]
-    );
     const setTableFilters = useCallback(
       (columnId, filter2) => {
         update((e3) => {
@@ -178574,7 +178375,6 @@ const SbTable = registerSbComponent(
         setSortedColumn,
         setColumnSizeMap,
         setSearchText,
-        updateTagColorAssignment,
         onRowClicked: handleRowClick,
         selectAllRows,
         deselectAllRows,
@@ -180749,6 +180549,503 @@ Fuse.config = Config;
 {
   register3(ExtendedSearch);
 }
+var define_process_env_default = {};
+var hasNativePerformanceNow = typeof performance === "object" && typeof performance.now === "function";
+var now = hasNativePerformanceNow ? function() {
+  return performance.now();
+} : function() {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start2 = now();
+  function tick() {
+    if (now() - start2 >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+var size = -1;
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (size === -1 || recalculate) {
+    var div2 = document.createElement("div");
+    var style2 = div2.style;
+    style2.width = "50px";
+    style2.height = "50px";
+    style2.overflow = "scroll";
+    document.body.appendChild(div2);
+    size = div2.offsetWidth - div2.clientWidth;
+    document.body.removeChild(div2);
+  }
+  return size;
+}
+var cachedRTLResult = null;
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement("div");
+    var outerStyle = outerDiv.style;
+    outerStyle.width = "50px";
+    outerStyle.height = "50px";
+    outerStyle.overflow = "scroll";
+    outerStyle.direction = "rtl";
+    var innerDiv = document.createElement("div");
+    var innerStyle = innerDiv.style;
+    innerStyle.width = "100px";
+    innerStyle.height = "100px";
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = "positive-descending";
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = "negative";
+      } else {
+        cachedRTLResult = "positive-ascending";
+      }
+    }
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+  return cachedRTLResult;
+}
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+var defaultItemKey$1 = function defaultItemKey3(index2, data2) {
+  return index2;
+};
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+if (define_process_env_default.NODE_ENV !== "production") {
+  if (typeof window !== "undefined" && typeof window.WeakSet !== "undefined") {
+    devWarningsDirection = /* @__PURE__ */ new WeakSet();
+    devWarningsTagName$1 = /* @__PURE__ */ new WeakSet();
+  }
+}
+function createListComponent(_ref2) {
+  var _class;
+  var getItemOffset3 = _ref2.getItemOffset, getEstimatedTotalSize4 = _ref2.getEstimatedTotalSize, getItemSize3 = _ref2.getItemSize, getOffsetForIndexAndAlignment5 = _ref2.getOffsetForIndexAndAlignment, getStartIndexForOffset3 = _ref2.getStartIndexForOffset, getStopIndexForStartIndex3 = _ref2.getStopIndexForStartIndex, initInstanceProps5 = _ref2.initInstanceProps, shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange, validateProps5 = _ref2.validateProps;
+  return _class = /* @__PURE__ */ function(_PureComponent) {
+    _inheritsLoose(List2, _PureComponent);
+    function List2(props2) {
+      var _this;
+      _this = _PureComponent.call(this, props2) || this;
+      _this._instanceProps = initInstanceProps5(_this.props, _assertThisInitialized(_this));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_this),
+        isScrolling: false,
+        scrollDirection: "forward",
+        scrollOffset: typeof _this.props.initialScrollOffset === "number" ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex,
+          overscanStopIndex,
+          visibleStartIndex,
+          visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function(scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+      _this._getItemStyle = function(index2) {
+        var _this$props = _this.props, direction = _this$props.direction, itemSize = _this$props.itemSize, layout = _this$props.layout;
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+        var style2;
+        if (itemStyleCache.hasOwnProperty(index2)) {
+          style2 = itemStyleCache[index2];
+        } else {
+          var _offset = getItemOffset3(_this.props, index2, _this._instanceProps);
+          var size2 = getItemSize3(_this.props, index2, _this._instanceProps);
+          var isHorizontal = direction === "horizontal" || layout === "horizontal";
+          var isRtl = direction === "rtl";
+          var offsetHorizontal = isHorizontal ? _offset : 0;
+          itemStyleCache[index2] = style2 = {
+            position: "absolute",
+            left: isRtl ? void 0 : offsetHorizontal,
+            right: isRtl ? offsetHorizontal : void 0,
+            top: !isHorizontal ? _offset : 0,
+            height: !isHorizontal ? size2 : "100%",
+            width: isHorizontal ? size2 : "100%"
+          };
+        }
+        return style2;
+      };
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function(_15, __, ___) {
+        return {};
+      });
+      _this._onScrollHorizontal = function(event) {
+        var _event$currentTarget = event.currentTarget, clientWidth = _event$currentTarget.clientWidth, scrollLeft = _event$currentTarget.scrollLeft, scrollWidth = _event$currentTarget.scrollWidth;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            return null;
+          }
+          var direction = _this.props.direction;
+          var scrollOffset = scrollLeft;
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                scrollOffset = -scrollLeft;
+                break;
+              case "positive-descending":
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          }
+          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollLeft ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._onScrollVertical = function(event) {
+        var _event$currentTarget2 = event.currentTarget, clientHeight = _event$currentTarget2.clientHeight, scrollHeight = _event$currentTarget2.scrollHeight, scrollTop = _event$currentTarget2.scrollTop;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            return null;
+          }
+          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._outerRefSetter = function(ref2) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref2;
+        if (typeof outerRef === "function") {
+          outerRef(ref2);
+        } else if (outerRef != null && typeof outerRef === "object" && outerRef.hasOwnProperty("current")) {
+          outerRef.current = ref2;
+        }
+      };
+      _this._resetIsScrollingDebounced = function() {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+      _this._resetIsScrolling = function() {
+        _this._resetIsScrollingTimeoutId = null;
+        _this.setState({
+          isScrolling: false
+        }, function() {
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+      return _this;
+    }
+    List2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps5(nextProps);
+      return null;
+    };
+    var _proto = List2.prototype;
+    _proto.scrollTo = function scrollTo2(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function(prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+          scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+    _proto.scrollToItem = function scrollToItem(index2, align) {
+      if (align === void 0) {
+        align = "auto";
+      }
+      var _this$props2 = this.props, itemCount = _this$props2.itemCount, layout = _this$props2.layout;
+      var scrollOffset = this.state.scrollOffset;
+      index2 = Math.max(0, Math.min(index2, itemCount - 1));
+      var scrollbarSize = 0;
+      if (this._outerRef) {
+        var outerRef = this._outerRef;
+        if (layout === "vertical") {
+          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
+        } else {
+          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
+        }
+      }
+      this.scrollTo(getOffsetForIndexAndAlignment5(this.props, index2, align, scrollOffset, this._instanceProps, scrollbarSize));
+    };
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props, direction = _this$props3.direction, initialScrollOffset = _this$props3.initialScrollOffset, layout = _this$props3.layout;
+      if (typeof initialScrollOffset === "number" && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props4 = this.props, direction = _this$props4.direction, layout = _this$props4.layout;
+      var _this$state = this.state, scrollOffset = _this$state.scrollOffset, scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case "positive-ascending":
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                var clientWidth = outerRef.clientWidth, scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+    _proto.render = function render2() {
+      var _this$props5 = this.props, children = _this$props5.children, className = _this$props5.className, direction = _this$props5.direction, height = _this$props5.height, innerRef = _this$props5.innerRef, innerElementType = _this$props5.innerElementType, innerTagName = _this$props5.innerTagName, itemCount = _this$props5.itemCount, itemData = _this$props5.itemData, _this$props5$itemKey = _this$props5.itemKey, itemKey2 = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey, layout = _this$props5.layout, outerElementType = _this$props5.outerElementType, outerTagName = _this$props5.outerTagName, style2 = _this$props5.style, useIsScrolling = _this$props5.useIsScrolling, width = _this$props5.width;
+      var isScrolling = this.state.isScrolling;
+      var isHorizontal = direction === "horizontal" || layout === "horizontal";
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+      var _this$_getRangeToRend = this._getRangeToRender(), startIndex = _this$_getRangeToRend[0], stopIndex = _this$_getRangeToRend[1];
+      var items = [];
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(createElement(children, {
+            data: itemData,
+            key: itemKey2(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : void 0,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      }
+      var estimatedTotalSize = getEstimatedTotalSize4(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || "div", {
+        className,
+        onScroll,
+        ref: this._outerRefSetter,
+        style: _extends$4({
+          position: "relative",
+          height,
+          width,
+          overflow: "auto",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform",
+          direction
+        }, style2)
+      }, createElement(innerElementType || innerTagName || "div", {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? "100%" : estimatedTotalSize,
+          pointerEvents: isScrolling ? "none" : void 0,
+          width: isHorizontal ? estimatedTotalSize : "100%"
+        }
+      }));
+    };
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === "function") {
+        var itemCount = this.props.itemCount;
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(), _overscanStartIndex = _this$_getRangeToRend2[0], _overscanStopIndex = _this$_getRangeToRend2[1], _visibleStartIndex = _this$_getRangeToRend2[2], _visibleStopIndex = _this$_getRangeToRend2[3];
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+      if (typeof this.props.onScroll === "function") {
+        var _this$state2 = this.state, _scrollDirection = _this$state2.scrollDirection, _scrollOffset = _this$state2.scrollOffset, _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    };
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props6 = this.props, itemCount = _this$props6.itemCount, overscanCount = _this$props6.overscanCount;
+      var _this$state3 = this.state, isScrolling = _this$state3.isScrolling, scrollDirection = _this$state3.scrollDirection, scrollOffset = _this$state3.scrollOffset;
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getStartIndexForOffset3(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex3(this.props, startIndex, scrollOffset, this._instanceProps);
+      var overscanBackward = !isScrolling || scrollDirection === "backward" ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === "forward" ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+    return List2;
+  }(PureComponent), _class.defaultProps = {
+    direction: "ltr",
+    itemData: void 0,
+    layout: "vertical",
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _class;
+}
+var validateSharedProps$1 = function validateSharedProps3(_ref2, _ref3) {
+  var children = _ref2.children, direction = _ref2.direction, height = _ref2.height, layout = _ref2.layout, innerTagName = _ref2.innerTagName, outerTagName = _ref2.outerTagName, width = _ref2.width;
+  var instance = _ref3.instance;
+  if (define_process_env_default.NODE_ENV !== "production") {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.");
+      }
+    }
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    switch (direction) {
+      case "horizontal":
+      case "vertical":
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+        break;
+      case "ltr":
+      case "rtl":
+        break;
+      default:
+        throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". ' + ('"' + direction + '" was specified.'));
+    }
+    switch (layout) {
+      case "horizontal":
+      case "vertical":
+        break;
+      default:
+        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + layout + '" was specified.'));
+    }
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (children === null ? "null" : typeof children) + '" was specified.'));
+    }
+    if (isHorizontal && typeof width !== "number") {
+      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (width === null ? "null" : typeof width) + '" was specified.'));
+    } else if (!isHorizontal && typeof height !== "number") {
+      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (height === null ? "null" : typeof height) + '" was specified.'));
+    }
+  }
+};
+var FixedSizeList = /* @__PURE__ */ createListComponent({
+  getItemOffset: function getItemOffset2(_ref2, index2) {
+    var itemSize = _ref2.itemSize;
+    return index2 * itemSize;
+  },
+  getItemSize: function getItemSize2(_ref2, index2) {
+    var itemSize = _ref2.itemSize;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize3(_ref3) {
+    var itemCount = _ref3.itemCount, itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment4(_ref4, index2, align, scrollOffset, instanceProps, scrollbarSize) {
+    var direction = _ref4.direction, height = _ref4.height, itemCount = _ref4.itemCount, itemSize = _ref4.itemSize, layout = _ref4.layout, width = _ref4.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var size2 = isHorizontal ? width : height;
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size2);
+    var maxOffset = Math.min(lastItemOffset, index2 * itemSize);
+    var minOffset = Math.max(0, index2 * itemSize - size2 + itemSize + scrollbarSize);
+    if (align === "smart") {
+      if (scrollOffset >= minOffset - size2 && scrollOffset <= maxOffset + size2) {
+        align = "auto";
+      } else {
+        align = "center";
+      }
+    }
+    switch (align) {
+      case "start":
+        return maxOffset;
+      case "end":
+        return minOffset;
+      case "center": {
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+        if (middleOffset < Math.ceil(size2 / 2)) {
+          return 0;
+        } else if (middleOffset > lastItemOffset + Math.floor(size2 / 2)) {
+          return lastItemOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case "auto":
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset2(_ref5, offset3) {
+    var itemCount = _ref5.itemCount, itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset3 / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex2(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction, height = _ref6.height, itemCount = _ref6.itemCount, itemSize = _ref6.itemSize, layout = _ref6.layout, width = _ref6.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var offset3 = startIndex * itemSize;
+    var size2 = isHorizontal ? width : height;
+    var numVisibleItems = Math.ceil((size2 + scrollOffset - offset3) / itemSize);
+    return Math.max(0, Math.min(
+      itemCount - 1,
+      startIndex + numVisibleItems - 1
+      // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps4(props2) {
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps4(_ref7) {
+    var itemSize = _ref7.itemSize;
+    if (define_process_env_default.NODE_ENV !== "production") {
+      if (typeof itemSize !== "number") {
+        throw Error('An invalid "itemSize" prop has been specified. Value should be a number. ' + ('"' + (itemSize === null ? "null" : typeof itemSize) + '" was specified.'));
+      }
+    }
+  }
+});
 const TAG_HEIGHT = 26;
 const INPUT_SIZE = 36;
 const MORE_TAGS_SIZE = 90;
@@ -198085,4 +198382,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-C4PHemM8.js.map
+//# sourceMappingURL=index-snr_jI8a.js.map