@economic/taco 2.45.0-alpha.2 → 2.45.0-alpha.25

package/dist/taco.cjs.development.js

@@ -31,12 +31,12 @@ var reactPortal = require('@radix-ui/react-portal');
 var reactTable = require('@tanstack/react-table');
 var get = _interopDefault(require('lodash/get'));
 var reactVirtual = require('@tanstack/react-virtual');
-var reactIntersectionObserver = require('react-intersection-observer');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var SortablePrimitive = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var reactTable$1 = require('react-table');
+var reactIntersectionObserver = require('react-intersection-observer');
 var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
 var set = _interopDefault(require('lodash/set'));
@@ -48,6 +48,7 @@ var setWith = _interopDefault(require('lodash/setWith'));
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
+var Recharts = require('recharts');
 
 const AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
 const getColorByState = state => {
@@ -58,6 +59,8 @@ const getColorByState = state => {
       return 'yellow';
     case 'error':
       return 'red';
+    case 'experiment':
+      return 'purple';
     case 'success':
       return 'green';
     default:
@@ -390,6 +393,36 @@ function IconAttach(props, svgRef) {
 }
 var Attach = /*#__PURE__*/React.forwardRef(IconAttach);
 
+function IconAutopayPaused(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.356 2.503a.743.743 0 10.449 1.417 9.323 9.323 0 011.909-.391 8.998 8.998 0 011.883.013.743.743 0 10.168-1.476 10.484 10.484 0 00-2.195-.016 10.81 10.81 0 00-2.214.453zM7.46 5.037a.743.743 0 10-.817-1.241c-.628.413-1.215.893-1.747 1.433-.52.528-.978 1.103-1.366 1.712a.743.743 0 101.253.798 8.928 8.928 0 011.17-1.467A9.28 9.28 0 017.46 5.037zm9.14-2.22a.743.743 0 00-.59 1.363 7.904 7.904 0 011.611.935c.484.363.914.776 1.287 1.229a.743.743 0 001.147-.945 9.004 9.004 0 00-1.54-1.472 9.387 9.387 0 00-1.915-1.11zM3.767 10.008a.743.743 0 10-1.432-.396A9.316 9.316 0 002 11.795a.743.743 0 101.485.048 7.83 7.83 0 01.282-1.835zm17.716-2.152a.743.743 0 10-1.389.529c.21.549.353 1.126.425 1.723a.743.743 0 101.476-.18 8.81 8.81 0 00-.512-2.072zm-9.28-.732c-.26 0-.527.127-.527.505v.406c-1.567.145-2.577 1.085-2.577 2.426 0 1.125.639 1.862 1.907 2.182l1.296.285c.836.18 1.167.435 1.167.87 0 .558-.441.923-1.26.923-.586 0-1.154-.244-1.67-.714-.332-.278-.54-.36-.796-.36-.412 0-.743.256-.743.709 0 .348.186.684.51.98.482.447 1.26.72 2.143.796v.354c0 .371.272.505.533.505.262 0 .529-.134.529-.505v-.366c1.625-.191 2.64-1.143 2.64-2.519 0-1.133-.652-1.845-1.978-2.156l-1.3-.27c-.738-.145-1.075-.424-1.075-.859 0-.488.436-.876 1.12-.876.581 0 .999.185 1.492.655.29.25.528.36.842.36.366 0 .667-.267.667-.65 0-.325-.174-.667-.499-.975-.43-.418-1.12-.685-1.892-.783v-.418c0-.372-.267-.505-.528-.505zm8.802 8.025a.743.743 0 00-.946.457 7.718 7.718 0 01-2.763 3.704 8.23 8.23 0 01-4.48 1.548 8.628 8.628 0 01-4.69-1.152c-.906-.524-1.649-1.03-2.262-1.749l.79.276a.743.743 0 10.49-1.404l-2.732-.952a.743.743 0 00-.946.458l-.997 2.86a.743.743 0 101.403.49l.45-1.294c.84 1.193 1.88 1.918 3.06 2.601a10.114 10.114 0 005.5 1.35 9.715 9.715 0 005.287-1.83 9.204 9.204 0 003.293-4.417.743.743 0 00-.457-.946z",
+    fill: "currentColor"
+  }));
+}
+var AutopayPaused = /*#__PURE__*/React.forwardRef(IconAutopayPaused);
+
+function IconAutopay(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.367 6.142a.734.734 0 011.003.269l.83 1.438a9.885 9.885 0 017.774-5.769 9.993 9.993 0 015.73.975 10.135 10.135 0 014.249 4.002.734.734 0 01-1.272.734 8.667 8.667 0 00-3.633-3.422 8.525 8.525 0 00-4.888-.832 8.417 8.417 0 00-6.355 4.376l.749-.433a.734.734 0 01.734 1.271l-2.56 1.479a.734.734 0 01-1.004-.269L1.098 7.145a.734.734 0 01.27-1.003zm2.895 10.273a.734.734 0 011.003.269 7.627 7.627 0 003.384 3.09 8.195 8.195 0 004.668.668 8.64 8.64 0 004.376-2.005c.792-.684 1.427-1.318 1.895-2.138l-.731.422a.734.734 0 01-.734-1.27l2.495-1.442a.734.734 0 011.003.27l1.501 2.6a.734.734 0 01-1.271.734l-.683-1.183c-.6 1.326-1.485 2.229-2.516 3.118a10.107 10.107 0 01-5.122 2.346 9.664 9.664 0 01-5.504-.79 9.095 9.095 0 01-4.032-3.686.734.734 0 01.268-1.003zm7.382-8.75c0-.372.264-.498.522-.498s.521.132.521.499v.413c.763.097 1.446.361 1.87.774.321.304.493.642.493.963 0 .379-.298.643-.66.643-.309 0-.544-.11-.83-.356-.488-.464-.901-.648-1.475-.648-.676 0-1.107.384-1.107.866 0 .43.333.706 1.062.849l1.285.267c1.31.307 1.955 1.01 1.955 2.13 0 1.36-1.004 2.3-2.61 2.489v.361c0 .367-.264.5-.522.5s-.527-.133-.527-.5v-.35c-.872-.074-1.64-.344-2.116-.785-.322-.293-.505-.625-.505-.97 0-.447.327-.7.734-.7.252 0 .459.081.786.357.51.464 1.072.705 1.651.705.809 0 1.245-.361 1.245-.912 0-.43-.327-.682-1.153-.86l-1.281-.282c-1.253-.316-1.885-1.044-1.885-2.155 0-1.325.998-2.254 2.547-2.398v-.401z",
+    fill: "currentColor"
+  }));
+}
+var Autopay = /*#__PURE__*/React.forwardRef(IconAutopay);
+
 function IconAutotextInsert(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1584,6 +1617,22 @@ function IconExpenses(props, svgRef) {
 }
 var Expenses = /*#__PURE__*/React.forwardRef(IconExpenses);
 
+function IconExperiment(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }));
+}
+var Experiment = /*#__PURE__*/React.forwardRef(IconExperiment);
+
 function IconExportToExcel(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2625,6 +2674,21 @@ function IconPersonPlus(props, svgRef) {
 }
 var PersonPlus = /*#__PURE__*/React.forwardRef(IconPersonPlus);
 
+function IconPersonSolid(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zM12 2c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2z",
+    fill: "currentColor"
+  }));
+}
+var PersonSolid = /*#__PURE__*/React.forwardRef(IconPersonSolid);
+
 function IconPersonTick(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2638,6 +2702,21 @@ function IconPersonTick(props, svgRef) {
 }
 var PersonTick = /*#__PURE__*/React.forwardRef(IconPersonTick);
 
+function IconPerson(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zm0 1.5c-3.684 0-5.696 1.84-6.346 6.002-.01.061-.015.123-.015.186 0 .68.565 1.238 1.288 1.305l.147.007h9.852c.068 0 .136-.004.203-.013.784-.103 1.329-.768 1.217-1.485C17.696 14.84 15.684 13 12 13zm0-11c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2zm0 1.5c-1.13 0-2.186 1.174-2.186 2.75S10.87 9 12 9s2.186-1.174 2.186-2.75S13.129 3.5 12 3.5z",
+    fill: "currentColor"
+  }));
+}
+var Person = /*#__PURE__*/React.forwardRef(IconPerson);
+
 function IconPhoneSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3407,6 +3486,21 @@ function IconUnreconciled(props, svgRef) {
 }
 var Unreconciled = /*#__PURE__*/React.forwardRef(IconUnreconciled);
 
+function IconWallet(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.75 4.5h14.5a.25.25 0 01.25.25V7H16a5 5 0 000 10h3.5v2.25a.25.25 0 01-.25.25H4.75a.25.25 0 01-.25-.25V4.75a.25.25 0 01.25-.25zM22 7h-1V4.75A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V17h1a1 1 0 001-1V8a1 1 0 00-1-1zm-.5 1.5H16a3.5 3.5 0 100 7h5.5v-7zm-5.5 5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
+    fill: "currentColor"
+  }));
+}
+var Wallet = /*#__PURE__*/React.forwardRef(IconWallet);
+
 function IconWarning(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3504,6 +3598,8 @@ const icons = {
   'attach-cancel': AttachCancel,
   'attach-warning': AttachWarning,
   attach: Attach,
+  'autopay-paused': AutopayPaused,
+  autopay: Autopay,
   'autotext-insert': AutotextInsert,
   autotext: Autotext,
   'basic-tabs': BasicTabs,
@@ -3594,6 +3690,7 @@ const icons = {
   envelope: Envelope,
   'expand-view': ExpandView,
   expenses: Expenses,
+  experiment: Experiment,
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
@@ -3670,7 +3767,9 @@ const icons = {
   'person-change': PersonChange,
   'person-minus': PersonMinus,
   'person-plus': PersonPlus,
+  'person-solid': PersonSolid,
   'person-tick': PersonTick,
+  person: Person,
   'phone-solid': PhoneSolid,
   phone: Phone,
   play: Play,
@@ -3729,6 +3828,7 @@ const icons = {
   undo: Undo,
   undock: Undock,
   unreconciled: Unreconciled,
+  wallet: Wallet,
   warning: Warning,
   webshop: Webshop,
   website: Website,
@@ -3798,6 +3898,8 @@ const getIconName = state => {
       return 'warning';
     case 'error':
       return 'close';
+    case 'experiment':
+      return 'experiment';
     case 'success':
       return 'tick';
     default:
@@ -4038,33 +4140,25 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
-  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      defaultValue: defaultId
-    } : {
-      type: 'multiple',
-      defaultValue: defaultId
+    valueProps = {
+      defaultValue: defaultId || undefined
     };
   } else {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      onValueChange: onChange,
-      value: id || undefined
-    } : {
-      type: 'multiple',
+    valueProps = {
       onValueChange: onChange,
       value: id || undefined
     };
   }
+  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;
@@ -4090,10 +4184,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -4105,12 +4199,15 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
@@ -4138,6 +4235,11 @@ const getBannerIcon = type => {
           icon: "close",
           color: "red"
         });
+      case 'experiment':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "experiment",
+          color: "purple"
+        });
       case 'warning':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
           icon: "warning",
@@ -4230,6 +4332,9 @@ function isElementTriggeredFromContainer(element, container) {
       return true;
     }
     const elementInDocument = document.querySelector(escapedSelector);
+    if (elementInDocument === container) {
+      return true;
+    }
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementTriggeredFromContainer(elementInDocument, container);
@@ -4252,7 +4357,15 @@ function isElementInteractive(element) {
   if (!element) {
     return false;
   }
-  return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];
+  const isInteractive = interactiveElements.includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled
+  // so search for a focusable parent
+  if (!isInteractive) {
+    const focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));
+    return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;
+  }
+  return isInteractive;
 }
 function isElementInsideTable3OrReport(element) {
   return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
@@ -4374,18 +4487,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/React.createElement("div", {
-    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white print:hidden",
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
+    className: "-mt-px fill-blue-900 stroke-blue-900"
   }), title))));
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
@@ -4866,7 +4979,8 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, props.className);
   return createButtonWithTooltip({
     ...otherProps,
-    'data-taco': 'button'
+    'data-taco': 'button',
+    'data-appearance': appearance
   }, className, ref);
 });
 const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
@@ -5096,7 +5210,7 @@ const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalPro
     ...props
   } = externalProps;
   const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+    'px-4 pb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
@@ -5118,7 +5232,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex justify-between"
+    className: "flex justify-between px-4 pb-2 pt-4"
   }, title && (/*#__PURE__*/React.createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/React.createElement("h4", {
@@ -5187,8 +5301,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
-    'self-start': !!label
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+    'self-start': !!label,
+    'mt-[0.1rem]': !label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
     'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
@@ -5254,7 +5369,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',
   // hide the arrow controls on input[type=number]
   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', {
     'bg-white': !props.highlighted && !readOnly,
@@ -5758,13 +5873,7 @@ const searchForString = (child, value, strategy = 'includes') => {
       }
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      const childLowerCase = child.toString().toLowerCase();
-      const valueLowerCase = String(value).toLowerCase();
-      if (strategy === 'startsWith') {
-        return childLowerCase.startsWith(valueLowerCase);
-      } else {
-        return childLowerCase.includes(valueLowerCase);
-      }
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
   } catch {
     return false;
@@ -5897,7 +6006,7 @@ const useCombobox = ({
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+        handleChange(option.value);
       }
     }
   };
@@ -5919,7 +6028,7 @@ const useCombobox = ({
     if (defaultValue && !value) {
       setInputValueByIndex(getIndexFromValue(data, defaultValue));
     }
-  }, [data]);
+  }, [defaultValue]);
   // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
   React.useEffect(() => {
     if (value !== undefined && value !== inputValue) {
@@ -5954,22 +6063,27 @@ const useCombobox = ({
       setCurrentIndex(undefined);
     }
   }, [open]);
+  const handleChange = nextValue => {
+    //const event = createCustomEvent('change');
+    if (onChange && nextValue !== String(value)) {
+      const item = findByValue(flattenedData, nextValue);
+      const sanitizedItem = sanitizeItem(item);
+      onChange(sanitizedItem === null || sanitizedItem === void 0 ? void 0 : sanitizedItem.value);
+    }
+  };
   // event handlers
   const handleInputBlur = event => {
-    event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
     }
-    // event.target.value is always a string so it is important to cast value to a string before checking the equality
-    if (onChange && event.target.value !== String(value)) {
-      const item = findByValue(flattenedData, event.target.value);
-      event.detail = sanitizeItem(item);
-      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
-      if (parents !== null && parents.length > 0) {
-        event.detail.parents = parents;
-      }
-      onChange(event);
+    // listbox is open
+    if (currentIndex !== undefined) {
+      setCurrentValue(currentIndex);
+    } else if (inputValue !== value) {
+      handleChange(inputValue);
+    } else if (inputValue === '') {
+      handleChange(undefined);
     }
     if (props.onBlur) {
       props.onBlur(event);
@@ -5983,12 +6097,10 @@ const useCombobox = ({
       setOpen(true);
     }
     if (onClick) {
-      event.persist();
       onClick(event);
     }
   };
   const handleInputKeyDown = event => {
-    event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -6004,7 +6116,6 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
             setOpen(false);
             return;
           }
@@ -6057,7 +6168,6 @@ const useCombobox = ({
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
-      event.persist();
       onKeyDown(event);
     }
   };
@@ -6292,6 +6402,12 @@ const useDatepicker = ({
       setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
     }
   }, [value]);
+  const isDisabledDay = React.useMemo(() => {
+    if (originalValueAsDate && calendar !== null && calendar !== void 0 && calendar.disabledDays) {
+      return reactDayPicker.isMatch(originalValueAsDate, calendar === null || calendar === void 0 ? void 0 : calendar.disabledDays); // can happen if you type a disabled date in input.
+    }
+    return false;
+  }, [originalValueAsDate]);
   // event handlers
   const handleInputBlur = event => {
     event.persist();
@@ -6313,6 +6429,7 @@ const useDatepicker = ({
     setInternalValue(event.target.value);
   };
   const handleChange = date => {
+    // Update both the input value and calendar view date when selecting a date
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
   const handleKeyDown = event => {
@@ -6328,6 +6445,7 @@ const useDatepicker = ({
   const inputProps = {
     ...props,
     autoComplete: 'off',
+    invalid: props.invalid || isDisabledDay,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     onKeyDown: handleKeyDown,
@@ -6497,11 +6615,24 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     e.preventDefault();
     (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
   }, [input.ref]);
+  // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.
+  // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,
+  // without it, datepicker cannot be set into detailed editing mode by pressing "Enter",
+  // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.
+  const handleInputKeyDown = event => {
+    var _props$onKeyDown;
+    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
+    if (!event.defaultPrevented) {
+      var _input$onKeyDown;
+      (_input$onKeyDown = input.onKeyDown) === null || _input$onKeyDown === void 0 ? void 0 : _input$onKeyDown.call(input, event);
+    }
+  };
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
+    onKeyDown: handleInputKeyDown,
     button: input.readOnly ? undefined : (/*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
@@ -6680,8 +6811,10 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full', {
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
+  // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.
+  'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -7210,7 +7343,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
@@ -7223,7 +7356,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     "aria-label": texts.drawer.close,
     className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
-  }))) : null);
+  }))) : null));
   const styleProp = {
     ...style,
     ...{
@@ -7440,7 +7573,8 @@ const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
 });
 const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
-    placement: side
+    placement: side,
+    hideWhenDetached = false
   } = props;
   const context = React.useContext(HangerContext);
   const {
@@ -7456,7 +7590,8 @@ const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
     onInteractOutside: handleInteractOutside,
     side: side,
     sideOffset: 1,
-    ref: ref
+    ref: ref,
+    hideWhenDetached: hideWhenDetached
   }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow, {
     className: "text-blue-500"
   }), /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
@@ -8222,6 +8357,11 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
       if (child.props.shortcut) {
         shortcuts.push(createShortcutKeyDownHandler(child.props.shortcut, event => {
           event.preventDefault();
+          const dialog = document.querySelector('[role="dialog"]');
+          // Don't trigger the shortcut if it is outside of the dialog
+          if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+            return;
+          }
           menu === null || menu === void 0 ? void 0 : menu.open();
           setTimeout(() => {
             var _childrenRefs$current, _childrenRefs$current2;
@@ -8296,7 +8436,7 @@ const Shortcut = ({
     className: className
   }), texts.map(key => (/*#__PURE__*/React__default.createElement("kbd", {
     key: key,
-    className: "font-display text-grey-700 [[data-taco=tooltip]_&]:bg-grey-300/[0.25] rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-taco=tooltip]_&]:text-white"
+    className: "font-display text-grey-700 [[data-taco=tooltip]_&]:bg-grey-300/[0.25] rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:text-white"
   }, key))));
 };
 
@@ -9364,16 +9504,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
 });
 const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
   const {
-    editable,
     ...otherProps
   } = props;
-  if (editable) {
-    return /*#__PURE__*/React.createElement(Combobox, Object.assign({}, otherProps, {
-      dialog: undefined,
-      inline: true,
-      ref: ref
-    }));
-  }
   return /*#__PURE__*/React.createElement(BaseSelect, Object.assign({}, otherProps, {
     ref: ref
   }));
@@ -9835,12 +9967,9 @@ const fixedForwardRef = React__default.forwardRef;
   TableFilterComparator[TableFilterComparator["HasAnyOf"] = 11] = "HasAnyOf";
   TableFilterComparator[TableFilterComparator["HasAllOf"] = 12] = "HasAllOf";
   TableFilterComparator[TableFilterComparator["HasNoneOf"] = 13] = "HasNoneOf";
+  TableFilterComparator[TableFilterComparator["IsOneOf"] = 14] = "IsOneOf";
+  TableFilterComparator[TableFilterComparator["IsNoneOf"] = 15] = "IsNoneOf";
 })(exports.TableFilterComparator || (exports.TableFilterComparator = {}));
-(function (TableServerLoadAllState) {
-  TableServerLoadAllState[TableServerLoadAllState["Incomplete"] = 0] = "Incomplete";
-  TableServerLoadAllState[TableServerLoadAllState["Loading"] = 1] = "Loading";
-  TableServerLoadAllState[TableServerLoadAllState["Completed"] = 2] = "Completed";
-})(exports.TableServerLoadAllState || (exports.TableServerLoadAllState = {}));
 
 const dataTypes = {
   auto: {
@@ -9878,9 +10007,13 @@ const dataTypes = {
       if (value === undefined) {
         return '';
       }
-      return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
+      const formatter = new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
         minimumFractionDigits: 2
-      }).format(Number(value));
+      });
+      const decimalSeperator = formatter.format(1.1).substring(1, 2);
+      const localisedValue = formatter.format(Number(value));
+      const localisedValueWithoutThousandsSeperator = decimalSeperator === '.' ? localisedValue.replace(',', '') : localisedValue.replace('.', '');
+      return [localisedValue, localisedValueWithoutThousandsSeperator];
     }
   }
 };
@@ -10004,6 +10137,12 @@ function columnFilterFn(value, filter) {
         return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.every(item => value.includes(item) === false) : false;
       case exports.TableFilterComparator.HasAllOf:
         return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.filter(v => value.includes(v)).length === filter.value.length : false;
+      case exports.TableFilterComparator.IsOneOf:
+        if (!Array.isArray(filter.value)) return false;
+        return filter.value.some(v => isWeakEqual$1(value, v));
+      case exports.TableFilterComparator.IsNoneOf:
+        if (!Array.isArray(filter.value)) return false;
+        return filter.value.every(v => !isWeakEqual$1(value, v));
     }
     return false;
   } catch (e) {
@@ -10028,7 +10167,13 @@ function isMatched(searchQuery, cellValue, dataType, localization) {
         const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
           localization
         });
-        if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        if (Array.isArray(cellDisplayValue)) {
+          for (const displayValue of cellDisplayValue) {
+            if (isWeakContains(displayValue, searchQuery)) {
+              return true;
+            }
+          }
+        } else if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
           return true;
         }
       }
@@ -10201,6 +10346,9 @@ function unfreezeAllExternalColumns(leftPinnedState) {
 function freezeUptoExternalColumn(index, columns) {
   return columns.slice(0, index + 1);
 }
+function getHiddenColumns(columnVisibility = {}) {
+  return Object.keys(columnVisibility).filter(c => columnVisibility[c] === false);
+}
 
 function getSettings(table) {
   const meta = table.options.meta;
@@ -10326,10 +10474,15 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       column.cell = info => renderer(info.getValue(), info.row.original);
     } else if (dataTypeProperties.getDisplayValue) {
       const dataTypeRenderer = value => {
-        var _dataTypeProperties$g, _dataTypeProperties$g2;
-        return (_dataTypeProperties$g = (_dataTypeProperties$g2 = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g2 === void 0 ? void 0 : _dataTypeProperties$g2.call(dataTypeProperties, value, {
+        var _dataTypeProperties$g;
+        const displayValue = (_dataTypeProperties$g = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g === void 0 ? void 0 : _dataTypeProperties$g.call(dataTypeProperties, value, {
           localization
-        })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
+        });
+        if (Array.isArray(displayValue)) {
+          var _displayValue$;
+          return (_displayValue$ = displayValue[0]) !== null && _displayValue$ !== void 0 ? _displayValue$ : value;
+        }
+        return displayValue !== null && displayValue !== void 0 ? displayValue : value;
       };
       column.cell = info => dataTypeRenderer(info.getValue());
       column.meta.renderer = dataTypeRenderer;
@@ -10460,7 +10613,8 @@ function configureReactTableOptions(options, props, localization) {
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
     getRowId,
-    groupedColumnMode: false
+    groupedColumnMode: false,
+    keepPinnedRows: false
   };
   if (tableOptions.enableColumnResizing) {
     tableOptions.columnResizeMode = 'onChange';
@@ -10482,6 +10636,12 @@ function configureReactTableOptions(options, props, localization) {
       var _column$columnDef$met;
       return ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enableSearch) !== false && column.getIsVisible();
     };
+    // enter controlled search mode (controlled could be local state, but usually the server)
+    if (props.onChangeSearch) {
+      if (props._experimentalDataLoader2) {
+        tableOptions.manualFiltering = true;
+      }
+    }
   }
   if (tableOptions.enableSorting) {
     // enter controlled sort mode (controlled could be local state, but usually the server)
@@ -10539,6 +10699,7 @@ const DEFAULT_PRESET = {
   enableColumnHiding: false,
   enableColumnResizing: false,
   enableRowExpansion: false,
+  enableRowExpansionAll: true,
   enableRowSelection: false,
   // custom -- common between all table types
   enableColumnOrdering: false,
@@ -10565,6 +10726,7 @@ const presets = {
     enableColumnHiding: true,
     enableColumnResizing: true,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: true,
@@ -10590,6 +10752,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10615,6 +10778,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10632,7 +10796,7 @@ const presets = {
   }
 };
 function getTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowExpan2, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -10640,6 +10804,7 @@ function getTableFeaturePreset(props) {
   const enableRowDrop = (_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop;
   const enableRowGoto = (_props$enableRowGoto = props.enableRowGoto) !== null && _props$enableRowGoto !== void 0 ? _props$enableRowGoto : presetOptions.enableRowGoto;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
+  const enableRowExpansionAll = (_props$enableRowExpan2 = props.enableRowExpansionAll) !== null && _props$enableRowExpan2 !== void 0 ? _props$enableRowExpan2 : presetOptions.enableRowExpansionAll;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
   return {
     // react-table built-in
@@ -10664,6 +10829,7 @@ function getTableFeaturePreset(props) {
     enableRowDrag: enableRowDrag && !!props.onRowDrag,
     enableRowDrop: enableRowDrop && !!props.onRowDrop,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
+    enableRowExpansionAll: enableRowExpansion && enableRowExpansionAll && !!props.rowExpansionRenderer,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
     enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
@@ -10783,8 +10949,17 @@ function useTablePrintingSettings(tableId) {
 
 const DEFAULT_ROW_ACTIONS_LENGTH = 4;
 function useTableRowActions(isEnabled = false, rowActions, rowActionsLength = DEFAULT_ROW_ACTIONS_LENGTH) {
+  const [handlers, setHandlers] = React__default.useState({});
+  const registerHandler = (key, handler) => {
+    return setHandlers(h => ({
+      ...h,
+      [key]: handler
+    }));
+  };
   return {
+    handlers,
     isEnabled,
+    registerHandler,
     rowActions: isEnabled ? rowActions : undefined,
     rowActionsLength: rowActions ? Math.min(rowActions.length, rowActionsLength) : 0
   };
@@ -10859,7 +11034,7 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
         return index;
       });
     }
-  }, [rowActiveIndex, length, isEnabled]);
+  }, [rowActiveIndex, isEnabled]);
   return {
     isEnabled,
     rowActiveIndex,
@@ -10908,9 +11083,10 @@ function useTableRowClick(isEnabled = false, onRowClick) {
   };
 }
 
-function useTableRowExpansion(isEnabled = false, rowExpansionRenderer) {
+function useTableRowExpansion(isEnabled = false, canExpandAll = true, rowExpansionRenderer) {
   return {
     isEnabled,
+    canExpandAll,
     rowExpansionRenderer: isEnabled ? rowExpansionRenderer : undefined
   };
 }
@@ -10974,7 +11150,7 @@ function useTableRowSelection(isEnabled = false) {
     - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)
     - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off
 */
-function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
+function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFilter = false) {
   const [enableGlobalFilter, _setEnableGlobalFilter] = React__default.useState(defaultEnableGlobalFilter);
   function setEnableGlobalFilter(enabled, instance) {
     _setEnableGlobalFilter(enabled);
@@ -10999,7 +11175,8 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     highlightedColumnIndexes,
     setHighlightedColumnIndexes,
     currentHighlightColumnIndex,
-    setCurrentHighlightColumnIndex
+    setCurrentHighlightColumnIndex,
+    handleSearch: isEnabled && typeof onChangeSearch === 'function' ? onChangeSearch : undefined
   };
 }
 
@@ -11209,9 +11386,10 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   const _lastUsedSorting = React__default.useRef([]);
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
+  const _lastUsedHiddenColumns = React__default.useRef([]);
   const _lastUsedPageIndex = React__default.useRef();
   const _forceReset = React__default.useRef(false);
-  const loadPage = function (pageIndex, sorting, filters) {
+  const loadPage = function (pageIndex, sorting, filters, hiddenColumns) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
@@ -11233,9 +11411,10 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
+      _lastUsedHiddenColumns.current = hiddenColumns;
       const _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters)).then(function (response) {
+          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns)).then(function (response) {
             // update state, here we do some "magic" to support "load in place"
             setData(currentData => {
               let nextData;
@@ -11264,14 +11443,15 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const loadAll = function (sorting, filters) {
+  const loadAll = function (sorting, filters, hiddenColumns) {
     try {
       // set the sorting so we can track if it changed between loads
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
+      _lastUsedHiddenColumns.current = hiddenColumns;
       const _temp2 = _catch(function () {
-        return Promise.resolve(fetchAll(sorting, filters)).then(function (response) {
+        return Promise.resolve(fetchAll(sorting, filters, hiddenColumns)).then(function (response) {
           length.current = response.length;
           setData(() => {
             let nextData;
@@ -11296,11 +11476,11 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       _forceReset.current = true;
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        return loadAll(_lastUsedSorting.current, _lastUsedFilters.current);
+        return loadAll(_lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       } else {
         var _lastUsedPageIndex$cu;
         // load the last page that we scrolled to
-        return loadPage((_lastUsedPageIndex$cu = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu !== void 0 ? _lastUsedPageIndex$cu : 0, _lastUsedSorting.current, _lastUsedFilters.current);
+        return loadPage((_lastUsedPageIndex$cu = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu !== void 0 ? _lastUsedPageIndex$cu : 0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       }
     } catch (e) {
       return Promise.reject(e);
@@ -11312,13 +11492,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
     try {
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        loadAll(sorting, _lastUsedFilters.current);
+        return loadAll(sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       } else {
         var _lastUsedPageIndex$cu2;
         // load the last page that we scrolled to
-        loadPage((_lastUsedPageIndex$cu2 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu2 !== void 0 ? _lastUsedPageIndex$cu2 : 0, sorting, _lastUsedFilters.current);
+        return loadPage((_lastUsedPageIndex$cu2 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu2 !== void 0 ? _lastUsedPageIndex$cu2 : 0, sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11327,13 +11506,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
     try {
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
-        loadAll(_lastUsedSorting.current, filters);
+        return loadAll(_lastUsedSorting.current, filters, _lastUsedHiddenColumns.current);
       } else {
         var _lastUsedPageIndex$cu3;
         // load the last page that we scrolled to
-        loadPage((_lastUsedPageIndex$cu3 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu3 !== void 0 ? _lastUsedPageIndex$cu3 : 0, _lastUsedSorting.current, filters);
+        return loadPage((_lastUsedPageIndex$cu3 = _lastUsedPageIndex.current) !== null && _lastUsedPageIndex$cu3 !== void 0 ? _lastUsedPageIndex$cu3 : 0, _lastUsedSorting.current, filters, _lastUsedHiddenColumns.current);
       }
-      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11361,10 +11539,17 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   }, invalidate];
 }
 
-function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
+function useTableServerLoading(length, data, loadPage, loadAll, pages, pageSize = DEFAULT_PAGE_SIZE, _experimentalDataLoader2 = false) {
   const isEnabled = !!loadPage && !!loadAll;
   const [isReady, setReady] = React__default.useState(false);
-  const [loadAllStatus, setLoadedStatus] = React__default.useState(exports.TableServerLoadAllState.Incomplete);
+  const [loading, setLoading] = React__default.useState(false);
+  const hasLoadedAll = React__default.useMemo(() => {
+    var _data$some;
+    if (data.length !== length || !!((_data$some = data.some) !== null && _data$some !== void 0 && _data$some.call(data, x => x === undefined))) {
+      return false;
+    }
+    return true;
+  }, [data, length]);
   let _loadPage;
   let _loadAll;
   let _loadAllIfNeeded;
@@ -11389,9 +11574,9 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
       try {
         const _temp2 = function () {
           if (typeof loadAll === 'function') {
-            setLoadedStatus(exports.TableServerLoadAllState.Loading);
+            setLoading(true);
             return Promise.resolve(loadAll(...args)).then(function () {
-              setLoadedStatus(exports.TableServerLoadAllState.Completed);
+              setLoading(false);
               setReady(true);
             });
           }
@@ -11404,7 +11589,7 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
     _loadAllIfNeeded = function (...args) {
       try {
         const _temp3 = function () {
-          if (loadAllStatus === exports.TableServerLoadAllState.Incomplete) {
+          if (!hasLoadedAll) {
             var _loadAll2;
             return Promise.resolve((_loadAll2 = _loadAll) === null || _loadAll2 === void 0 ? void 0 : _loadAll2(...args)).then(function () {});
           }
@@ -11415,14 +11600,18 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
       }
     };
   }
+  const pageCount = Math.ceil(length / pageSize);
   return {
+    pages,
     isEnabled,
     isReady,
     loadPage: _loadPage,
     loadAll: _loadAll,
     loadAllIfNeeded: _loadAllIfNeeded,
-    loadAllStatus,
-    pageSize
+    loading,
+    pageSize,
+    pageCount,
+    _experimentalDataLoader2
   };
 }
 
@@ -11494,22 +11683,21 @@ function useLazyEffect(effect, deps) {
   const readyRef = React__default.useRef(false);
   React__default.useEffect(() => {
     if (readyRef.current) {
-      effect();
+      return effect();
     } else {
       readyRef.current = true;
     }
   }, deps);
 }
 
-function useTableDataListener(table) {
+function useTableDataListener(table, length) {
   const meta = table.options.meta;
-  const rows = table.getRowModel().rows;
   useLazyEffect(() => {
     const rowActiveIndex = meta.rowActive.rowActiveIndex;
-    if (rowActiveIndex !== undefined && rowActiveIndex > rows.length) {
+    if (rowActiveIndex !== undefined && rowActiveIndex > length) {
       meta.rowActive.setRowActiveIndex(0);
     }
-  }, [rows.length]);
+  }, [length]);
 }
 
 // we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
@@ -11519,7 +11707,8 @@ function useTableFilterListener(table, onFilter) {
   const columnFilters = table.getState().columnFilters;
   useLazyEffect(() => {
     if (table.options.enableColumnFilters && typeof onFilter === 'function') {
-      onFilter(columnFilters);
+      const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+      onFilter(columnFilters, hiddenColumns);
       if (table.options.enableRowSelection) {
         table.resetRowSelection();
       }
@@ -11536,7 +11725,8 @@ function useTableFontSizeListener(table) {
     table.setColumnSizing(sizes => {
       return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
         var _column$columnDef$min;
-        const column = table.getColumn(columnName);
+        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+        const column = table.getAllColumns().find(x => x.id === columnName);
         if (isInternalColumn(columnName)) {
           var _column$getSize;
           return [columnName, (_column$getSize = column === null || column === void 0 ? void 0 : column.getSize()) !== null && _column$getSize !== void 0 ? _column$getSize : prevColumnSize];
@@ -11577,11 +11767,12 @@ function useTableRowHeightListener(table) {
 }
 
 function useTableRowSelectionListener(table, onRowSelect) {
+  // note that the selected row model may not contain all rows in state when using server loading
   const rows = table.getSelectedRowModel().flatRows;
-  const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
+  const state = table.getState().rowSelection;
   useLazyEffect(() => {
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
-      onRowSelect(rowSelection);
+      onRowSelect(rows.map(row => row.original), Object.keys(state));
     }
     /**
      * Casting to a boolean, since enableRowSelection can be a function,
@@ -11589,33 +11780,33 @@ function useTableRowSelectionListener(table, onRowSelect) {
      * we only need to know if selection was enabled or disabled, because enableRowSelection function
      * will be applied directly to particular rows.
      */
-  }, [!!table.options.enableRowSelection, JSON.stringify(rowSelection)]);
+  }, [!!table.options.enableRowSelection, JSON.stringify(state)]);
 }
 
-function useTableSearchListener(table, onChangeSearch) {
+function useTableSearchListener(table) {
   const meta = table.options.meta;
   const localization = useLocalization();
-  const visibleColumns = table.getVisibleFlatColumns();
+  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+  const query = table.getState().globalFilter;
   // Need to re-run search when columns are getting shown/hidden.
-  React__default.useEffect(() => {
-    if (meta.search.isEnabled && visibleColumns.length > 0) {
-      const currentFilter = table.getState().globalFilter;
+  useLazyEffect(() => {
+    if (meta.search.isEnabled) {
+      const currentFilter = query;
       requestAnimationFrame(() => {
         table.resetGlobalFilter();
         table.setGlobalFilter(currentFilter);
       });
+      if (meta.search.handleSearch && meta.search.enableGlobalFilter && query) {
+        meta.search.handleSearch(query, hiddenColumns);
+      }
     }
-  }, [visibleColumns.length]);
+  }, [hiddenColumns.length]);
   // recalculates highlighted indexes whenever something important changes
-  React__default.useEffect(() => {
+  useLazyEffect(() => {
     if (meta.search.isEnabled) {
-      const query = table.getState().globalFilter;
       resetHighlightedColumnIndexes(query, table, localization);
-      if (typeof onChangeSearch === 'function') {
-        onChangeSearch(query);
-      }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
+  }, [meta.server.loading, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, query, JSON.stringify(table.getState().sorting)]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11699,12 +11890,15 @@ function useTableSortingListener(table, onSort) {
 }
 
 function useTableServerLoadingListener(table, loadPage) {
-  const sorting = table.getState().sorting;
-  const columnFilters = table.getState().columnFilters;
+  const meta = table.options.meta;
   // trigger load of the first page on mount
   React__default.useEffect(() => {
     if (loadPage) {
-      loadPage(0, sorting, columnFilters);
+      const sorting = table.getState().sorting;
+      const columnFilters = table.getState().columnFilters;
+      const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
+      const search = meta.search.enableGlobalFilter ? table.getState().globalFilter : undefined;
+      loadPage(0, sorting, columnFilters, hiddenColumns, search);
     }
   }, []);
 }
@@ -11751,13 +11945,13 @@ function useTableManager(props, meta, internalColumns) {
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
   const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
   const rowDrop = useTableRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, props.rowExpansionRenderer);
+  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, options.enableRowExpansionAll, props.rowExpansionRenderer);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
   const rowSelection = useTableRowSelection(!!options.enableRowSelection);
-  const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
-  const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
+  const search = useTableSearch(options.enableSearch, props.onChangeSearch, settings.excludeUnmatchedRecordsInSearch);
+  const server = useTableServerLoading(length, data, props.loadPage, props.loadAll, props.pages, props.pageSize, props._experimentalDataLoader2);
   // TODO: memoise
   // convert jsx column components into valid table columns
   const {
@@ -11803,12 +11997,12 @@ function useTableManager(props, meta, internalColumns) {
     }
   });
   // state listeners - we have these so that we don't have to control state outside the table
-  useTableDataListener(instance);
+  useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   useTableFontSizeListener(instance);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
-  useTableSearchListener(instance, props.onChangeSearch);
+  useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
@@ -11877,9 +12071,9 @@ function useTableStyleGrid(tableId, table, fontSize) {
     };
     // printing grid
     // we have to be specific so that nested tables don't inherit the same css
-    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} tr > td[data-cell-id='${id}']\n`).join(',');
     const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: repeat(${printGridTemplateColumns}, auto) !important; }
-        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; }}`;
+        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; } table[data-taco^='table']#${tableId} tr { page-break-inside: avoid; break-inside: avoid;}}`;
     return {
       style,
       stylesheet
@@ -12034,7 +12228,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
       if (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current)) {
         return;
       }
-      tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex);
+      tableMeta.rowActive.handleKeyDown(event, tableMeta.length, scrollToIndex);
       tableMeta.rowSelection.handleKeyDown(event, table);
       if (tableMeta.rowActive.rowActiveIndex !== undefined) {
         var _rows$tableMeta$rowAc;
@@ -12047,7 +12241,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
     };
   },
   // scrollToIndex function changes when row count changes, so it is important to update handlers
-  [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
+  [tableRef.current, tableMeta.length, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
 }
 
 function useTableRef(table, ref) {
@@ -12070,57 +12264,131 @@ const ROW_HEIGHT_ESTIMATES = {
   'extra-tall': 57
 };
 
+const RowContext = /*#__PURE__*/React__default.createContext({
+  hideInternalColumns: false,
+  hideRowActions: false,
+  isHovered: false,
+  rowIndex: -1
+});
+
+const DELAY_BEFORE_LOAD_MS = 250;
+/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
+function Row(props) {
+  const {
+    renderer: RowRenderer,
+    cellRenderer: CellRenderer,
+    hideInternalColumns = false,
+    hideRowActions = false,
+    scrollDirection,
+    skipPageLoading = false,
+    ...displayRowProps
+  } = props;
+  const tableMeta = props.table.options.meta;
+  const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;
+  // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
+  const contextValue = React__default.useMemo(() => ({
+    isHovered,
+    rowIndex: props.index,
+    hideInternalColumns,
+    hideRowActions
+  }), [isHovered, props.index, hideInternalColumns, hideRowActions]);
+  React__default.useEffect(() => {
+    let timeout;
+    if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 && !skipPageLoading) {
+      const pageIndex = Math.floor(props.index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
+      const sorting = props.table.getState().sorting;
+      const filters = props.table.getState().columnFilters;
+      const search = props.table.getState().globalFilter;
+      const hiddenColumns = getHiddenColumns(props.table.getState().columnVisibility);
+      const pageIndexesToFetch = [];
+      // if there's no direction, it means the scroll bar got dropped un unloaded pages,
+      // in that case, load forward and backward pages to prevent skeletons
+      if (scrollDirection === 'backward' || !scrollDirection) {
+        const backIndex = pageIndex - 1;
+        if (backIndex > -1) {
+          pageIndexesToFetch.push(backIndex);
+        }
+      }
+      // always load the next page
+      if ((scrollDirection === 'forward' || !scrollDirection) && pageIndex + 2 < tableMeta.server.pageCount) {
+        pageIndexesToFetch.push(pageIndex + 1);
+      }
+      if (pageIndexesToFetch.length) {
+        // the virtualiser fetches a page ahead, so this won't get called in most cases
+        // but it provides a fallback for some edge cases
+        timeout = setTimeout(() => {
+          pageIndexesToFetch.forEach(index => {
+            var _tableMeta$server$loa, _tableMeta$server;
+            // this can be called by every row within the current page, but loadPage returns early if a pending request exists
+            (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, index, sorting, filters, hiddenColumns, tableMeta.search.enableGlobalFilter ? search : undefined);
+          });
+        }, DELAY_BEFORE_LOAD_MS);
+      }
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [tableMeta.server.pages]);
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default.createElement(RowRenderer, Object.assign({}, displayRowProps, {
+    cellRenderer: CellRenderer
+  })));
+}
+
+const DELAY_BEFORE_LOAD_MS$1 = 150;
 function SkeletonRow(props) {
   const {
     index,
-    row,
     table
   } = props;
   const tableMeta = table.options.meta;
   if (tableMeta.server.isEnabled) {
-    return /*#__PURE__*/React__default.createElement(RowWithServerLoading, Object.assign({}, props, {
-      index: index
-    }));
+    return /*#__PURE__*/React__default.createElement(RowWithServerLoading, Object.assign({}, props));
   }
   return /*#__PURE__*/React__default.createElement(Skeleton, {
-    cellsCount: row.getVisibleCells().length
+    cellsCount: table.getVisibleFlatColumns().length,
+    index: index
   });
 }
 function RowWithServerLoading(props) {
   var _table$getState$group, _table$getState;
   const {
     index,
-    row,
     table
   } = props;
   const tableMeta = table.options.meta;
   const pageIndex = Math.floor(index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
-  const {
-    ref,
-    inView
-  } = reactIntersectionObserver.useInView({
-    threshold: 0,
-    triggerOnce: true,
-    initialInView: pageIndex === 0
-  });
   React__default.useEffect(() => {
-    if (inView) {
-      var _tableMeta$server$loa, _tableMeta$server;
-      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters);
+    let timeout;
+    if (tableMeta.server.isEnabled) {
+      const sorting = props.table.getState().sorting;
+      const filters = props.table.getState().columnFilters;
+      const search = props.table.getState().globalFilter;
+      const hiddenColumns = getHiddenColumns(props.table.getState().columnVisibility);
+      timeout = setTimeout(() => {
+        var _tableMeta$server$loa, _tableMeta$server;
+        (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, sorting, filters, hiddenColumns, tableMeta.search.enableGlobalFilter ? search : undefined);
+      }, DELAY_BEFORE_LOAD_MS$1);
     }
-  }, [inView]);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
   const groupedCellCount = (_table$getState$group = (_table$getState = table.getState()) === null || _table$getState === void 0 ? void 0 : _table$getState.grouping.length) !== null && _table$getState$group !== void 0 ? _table$getState$group : 0;
-  const ungroupedCellCount = row.getVisibleCells().length - groupedCellCount;
+  const ungroupedCellCount = table.getVisibleFlatColumns().length - groupedCellCount;
   return /*#__PURE__*/React__default.createElement(Skeleton, {
     cellsCount: ungroupedCellCount,
-    ref: ref
+    index: index
   });
 }
 const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props, ref) {
   const {
-    cellsCount
+    cellsCount,
+    index
   } = props;
   return /*#__PURE__*/React__default.createElement("tr", {
+    "data-row-index": index,
     ref: ref
   }, Array(cellsCount).fill(null).map((_, index) => (/*#__PURE__*/React__default.createElement("td", {
     key: index
@@ -12129,38 +12397,6 @@ const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props,
   })))));
 });
 
-const RowContext = /*#__PURE__*/React__default.createContext({
-  isHovered: false,
-  rowIndex: -1,
-  hideRowActions: false
-});
-
-/* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
-function Row(props) {
-  const {
-    renderer: RowRenderer,
-    cellRenderer: CellRenderer,
-    hideRowActions = false,
-    ...displayRowProps
-  } = props;
-  const tableMeta = props.table.options.meta;
-  const isHovered = tableMeta.rowActive.rowHoverIndex === props.index;
-  // context - it must be here for cells to read it, since they render alongside the row inside DisplayRow
-  const contextValue = React__default.useMemo(() => ({
-    isHovered,
-    rowIndex: props.index,
-    hideRowActions
-  }), [isHovered, props.index, hideRowActions]);
-  if (props.row.original === undefined) {
-    return /*#__PURE__*/React__default.createElement(SkeletonRow, Object.assign({}, props));
-  }
-  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React__default.createElement(RowRenderer, Object.assign({}, displayRowProps, {
-    cellRenderer: CellRenderer
-  })));
-}
-
 // scroll padding end is designed to always show half of the next row
 function getScrollPaddingEndOffset(table) {
   const tableMeta = table.options.meta;
@@ -12185,8 +12421,8 @@ function getPaddingEndOffset(table, options) {
   const bottomRows = (_table$getBottomRows = table.getBottomRows()) !== null && _table$getBottomRows !== void 0 ? _table$getBottomRows : [];
   return ROW_HEIGHT_ESTIMATES.medium * ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 1) * bottomRows.length;
 }
-function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, options) {
-  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
+function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
+  var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _virtualItems$end, _virtualItems;
   const tableMeta = table.options.meta;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   const rows = (_table$getCenterRows = table.getCenterRows()) !== null && _table$getCenterRows !== void 0 ? _table$getCenterRows : [];
@@ -12199,11 +12435,12 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
   const rangeExtractor = useRowGroupVirtualisation(table);
   // account for thead and tfoot in the scroll area - both are always medium row height
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
+  const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;
   const virtualiser = reactVirtual.useVirtualizer({
-    count: rows.length,
+    count,
     estimateSize,
     getScrollElement: () => tableRef.current,
-    overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
+    overscan: tableMeta.printing.isPrinting ? count : undefined,
     rangeExtractor,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
@@ -12223,19 +12460,19 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
     if (tableRef.current) {
       if (index === 0) {
         virtualiser.scrollToOffset(0, notSmooth);
-      } else if (index === rows.length - 1) {
+      } else if (index === count - 1) {
         // sometimes the last row doesn't fully show, so we just force scroll to the bottom
         tableRef.current.scrollTop = tableRef.current.scrollHeight;
       } else {
         virtualiser.scrollToIndex(index, options);
       }
     }
-  }, [virtualItems.length, tableRef.current, totalSize, rows.length]);
+  }, [virtualItems.length, tableRef.current, totalSize, count]);
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
+  const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;
   const startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
   // styling for offsetting rows - this "is" the virtualisation
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref !== void 0 ? _ref : 0)] : [0, 0];
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, totalSize - ((_virtualItems$end = (_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end) !== null && _virtualItems$end !== void 0 ? _virtualItems$end : 0))] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -12248,23 +12485,52 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
   // rendered output
   let style = {};
   let content = null;
-  if (rows.length) {
+  // bottom rows aren't virtualised (they're sticky) but we need to set the height
+  if (count || table.getBottomRows().length) {
     style = {
       height: totalSize,
-      paddingBottom,
-      paddingTop
+      paddingBottom: isNaN(paddingBottom) ? 0 : paddingBottom,
+      paddingTop: isNaN(paddingTop) ? 0 : paddingTop
     };
+  }
+  // only render non sticky rows
+  if (count) {
     content = virtualItems.map(virtualRow => {
+      var _row, _virtualiser$scrollDi2;
       // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here
       if (!virtualRow) {
         return null;
       }
-      const row = rows[virtualRow.index];
+      let row;
+      if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {
+        var _tableMeta$server$pag, _tableMeta$server$pag2;
+        const currentPageIndex = Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
+        const pagePosition = (_tableMeta$server$pag = (_tableMeta$server$pag2 = tableMeta.server.pages) === null || _tableMeta$server$pag2 === void 0 ? void 0 : _tableMeta$server$pag2.indexOf(currentPageIndex)) !== null && _tableMeta$server$pag !== void 0 ? _tableMeta$server$pag : -1;
+        if (pagePosition > -1) {
+          // "flatten" row indexes down into the dataloader2 dataset size
+          // for example, with a page size of 100...
+          // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)
+          const fakeIndex = pagePosition * tableMeta.server.pageSize + virtualRow.index % tableMeta.server.pageSize;
+          row = rows[fakeIndex];
+        }
+      } else {
+        row = rows[virtualRow.index];
+      }
+      if (!((_row = row) !== null && _row !== void 0 && _row.original)) {
+        var _virtualiser$scrollDi;
+        return /*#__PURE__*/React__default.createElement(SkeletonRow, {
+          key: virtualRow.index,
+          index: virtualRow.index,
+          scrollDirection: (_virtualiser$scrollDi = virtualiser.scrollDirection) !== null && _virtualiser$scrollDi !== void 0 ? _virtualiser$scrollDi : undefined,
+          table: table
+        });
+      }
       const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
       return /*#__PURE__*/React__default.createElement(Row, {
         key: row.id,
         row: row,
         index: virtualRow.index,
+        scrollDirection: (_virtualiser$scrollDi2 = virtualiser.scrollDirection) !== null && _virtualiser$scrollDi2 !== void 0 ? _virtualiser$scrollDi2 : undefined,
         table: table,
         measureRow: measureRow,
         renderer: renderers.row,
@@ -12371,8 +12637,9 @@ function Actions$1(props) {
   const {
     texts
   } = useLocalization();
+  const tableMeta = table.options.meta;
   // we don't want to document passing table, so it isn't on the type
-  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
+  const visibleActions = actions.map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
@@ -12411,9 +12678,9 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
     table
   } = context;
   const {
+    hideRowActions,
     isHovered,
-    rowIndex,
-    hideRowActions
+    rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
   const actions = tableMeta.rowActions.rowActions;
@@ -12421,7 +12688,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;
   const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;
-  if (!hideRowActions && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
+  const isRowGrouped = row.getIsGrouped();
+  if (!hideRowActions && !isRowGrouped && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
     return /*#__PURE__*/React__default.createElement(Actions$1, {
       actions: actions,
       actionsLength: actionsLength,
@@ -12452,6 +12720,12 @@ function Cell$1() {
   const {
     texts
   } = useLocalization();
+  const {
+    hideInternalColumns
+  } = React__default.useContext(RowContext);
+  if (hideInternalColumns) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table.columns.drag.tooltip,
     name: "drag",
@@ -12479,6 +12753,10 @@ function Header$3(context) {
   const {
     table
   } = context;
+  const tableMeta = table.options.meta;
+  if (!tableMeta.rowExpansion.canExpandAll) {
+    return null;
+  }
   const isSomeRowsExpanded = table.getIsSomeRowsExpanded();
   const handleClick = event => {
     event.stopPropagation();
@@ -12500,7 +12778,13 @@ function Cell$2(context) {
   const {
     texts
   } = useLocalization();
+  const {
+    hideInternalColumns
+  } = React__default.useContext(RowContext);
   const tableMeta = context.table.options.meta;
+  if (hideInternalColumns) {
+    return null;
+  }
   const hasExpandedRow = (_tableMeta$rowExpansi = (_tableMeta$rowExpansi2 = tableMeta.rowExpansion).rowExpansionRenderer) === null || _tableMeta$rowExpansi === void 0 ? void 0 : _tableMeta$rowExpansi.call(_tableMeta$rowExpansi2, context.row.original);
   if (hasExpandedRow) {
     const isActiveRow = tableMeta.rowActive.rowActiveIndex === context.row.index;
@@ -12554,8 +12838,9 @@ function Header$4(context) {
       }
       const _temp = function () {
         if (tableMeta.server.loadAllIfNeeded) {
+          const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -12571,7 +12856,7 @@ function Header$4(context) {
     className: "hover:border-blue !-mt-px",
     checked: isAllRowsSelected,
     indeterminate: isSomeRowsSelected && !isAllRowsSelected,
-    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    loading: tableMeta.server.loading,
     onChange: handleChange
   }));
 }
@@ -12590,10 +12875,11 @@ function Cell$3(context) {
     table
   } = context;
   const {
+    hideInternalColumns,
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
-  if (table.options.enableGrouping && (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length && !row.getIsGrouped()) {
+  if (hideInternalColumns || table.options.enableGrouping && (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length && !row.getIsGrouped()) {
     return null;
   }
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
@@ -12613,6 +12899,7 @@ function Cell$3(context) {
             if (event.shiftKey) {
               var _tableMeta$rowSelecti;
               function _temp4() {
+                const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
                 table.setRowSelection(currentRowSelection => ({
                   ...currentRowSelection,
                   ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
@@ -12622,11 +12909,11 @@ function Cell$3(context) {
                 }));
               }
               const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
-              const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
               const _temp3 = function () {
-                if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
+                if (tableMeta.server.loadAllIfNeeded) {
+                  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
                   // don't pass the search query because we need all data - not filtered data
-                  return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+                  return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
                 }
               }();
               return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -12684,7 +12971,7 @@ function useTable(props, externalRef, renderers, meta, options) {
   // configure the table
   const manager = useTableManager(props, meta, INTERNAL_RENDERERS);
   // configure the virtualised renderer
-  const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex, options);
+  const renderer = useTableRenderer(renderers, manager.instance, ref, manager.meta.length, props.defaultRowActiveIndex, options);
   // configure dynamic styling
   const {
     style,
@@ -12797,7 +13084,9 @@ function GroupedCell(props) {
   } = React__default.useContext(RowContext);
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const canShowActions = isActiveRow || isHovered && !tableMeta.rowActive.isHoverStatePaused;
-  const colSpan = cell.row.getVisibleCells().filter(c => !isInternalColumn(c.column.id)).length - 1;
+  // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that
+  // rowGroupActions aligns with rowActions.
+  const colSpan = cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;
   const content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
   const subRows = cell.getContext().row.subRows.map(row => row.original);
   return /*#__PURE__*/React__default.createElement(MemoedGroupedCell, Object.assign({}, attributes, {
@@ -12822,22 +13111,27 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     table,
     ...attributes
   } = props;
-  return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
-    ref: cellRef,
-    style: {
-      gridColumn: `span ${colSpan} / span ${colSpan}`
-    }
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "grow"
-  }, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? (/*#__PURE__*/React__default.createElement(Actions$1, {
-    actions: rowActions,
-    actionsLength: 4,
-    data: subRows,
-    isActiveRow: true,
-    rowId: rowId,
-    table: table
-  })) : null);
-});
+  return (
+    /*#__PURE__*/
+    // pr-1 is needed to align group row actions with row actions in sibling rows, if present
+    React__default.createElement("td", Object.assign({}, attributes, {
+      className: "!pr-1",
+      ref: cellRef,
+      style: {
+        gridColumn: `span ${colSpan} / span ${colSpan}`
+      }
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "grow"
+    }, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? (/*#__PURE__*/React__default.createElement(Actions$1, {
+      actions: rowActions,
+      actionsLength: 4,
+      data: subRows,
+      isActiveRow: true,
+      rowId: rowId,
+      table: table
+    })) : null)
+  );
+});
 
 function Cell$4(props) {
   const {
@@ -12897,7 +13191,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   if (tableMeta.rowActive.isEnabled) {
     attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
     // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes
-    attributes.onPointerDown = handleClickCapture;
+    attributes.onClickCapture = handleClickCapture;
   }
   // row click
   if (tableMeta.rowClick.isEnabled(row.original)) {
@@ -12979,10 +13273,13 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
+  const isGrouped = row.getIsGrouped();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", Object.assign({}, attributes, {
     className: className,
     ref: ref
-  }), children, row.getVisibleCells().map((cell, cellIndex) => (/*#__PURE__*/React__default.createElement(Cell$4, {
+  }), children, row.getVisibleCells()
+  // Filter out the row actions cell from rendering in Grouped Row
+  .filter(cell => !(isGrouped && cell.column.id === '__actions')).map((cell, cellIndex) => (/*#__PURE__*/React__default.createElement(Cell$4, {
     key: cell.id,
     cell: cell,
     index: cellIndex,
@@ -13368,7 +13665,9 @@ function HeaderMenu(props) {
   return /*#__PURE__*/React__default.createElement(IconButton, {
     className: className,
     icon: "more",
-    menu: popoverElement ? undefined : menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, memoedMenuItems))),
+    menu: popoverElement ? undefined : menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
+      onFocusOutside: event => event.preventDefault()
+    }, memoedMenuItems))),
     popover: popoverElement,
     onClickCapture: event => event.preventDefault(),
     onKeyDown: event => {
@@ -13742,21 +14041,22 @@ function Summary(props) {
     locale,
     texts
   } = useLocalization();
-  const length = table.options.meta.length;
+  const tableMeta = table.options.meta;
+  const length = tableMeta.length;
   const currentLength = table.getRowModel().rows.length;
   let label;
   let count;
   // row selection
-  const rowsSelectedLength = table.getSelectedRowModel().rows.length;
+  // use table state and not the selected row model because of the way server loading works
+  const rowsSelectedLength = Object.keys(table.getState().rowSelection).length;
   if (rowsSelectedLength > 0) {
     label = texts.table.footer.summary.selected;
     count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
-  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  } else if (!tableMeta.server.isEnabled && ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
   // filtered data
-  !!table.getState().globalFilter && table.options.enableGlobalFilter // search with hide enabled
-  ) {
+  !!table.getState().globalFilter && table.options.enableGlobalFilter)) {
     label = texts.table.footer.summary.records;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(currentLength)), "\u00A0", texts.table.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
@@ -13768,8 +14068,13 @@ function Summary(props) {
 }
 
 function Foot(props) {
-  const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  const {
+    children,
+    table,
+    ...attributes
+  } = props;
+  const nonGroupedHeaders = table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  return /*#__PURE__*/React__default.createElement("tfoot", Object.assign({}, attributes), children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -13817,16 +14122,29 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
 });
 
 function EmptyStateBody(props) {
+  var _ref$current, _ref$current$parentNo;
   const {
     emptyState: Placeholder,
+    isReady,
     reason,
     ...attributes
   } = props;
+  const ref = React__default.useRef(null);
+  if (!isReady) {
+    return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
+      className: "!auto-rows-fr"
+    }));
+  }
   return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
-    className: "!auto-rows-fr"
+    ref: ref,
+    className: "!auto-rows-fr",
+    "data-taco": "empty-state"
   }), /*#__PURE__*/React__default.createElement("tr", {
-    className: "!auto-rows-fr"
+    className: "!auto-rows-fr "
   }, /*#__PURE__*/React__default.createElement("td", {
+    style: {
+      maxWidth: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$parentNo = _ref$current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.clientWidth
+    },
     className: "col-span-full !border-0 !p-0 hover:!bg-white"
   }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, {
     reason: reason
@@ -13845,6 +14163,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
     shortcut,
+    showTotal = true,
     value,
     ...attributes
   } = props;
@@ -13923,10 +14242,12 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (hasFind && isActive) {
       postfix = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-        className: "text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2"
-      }, loading ? /*#__PURE__*/React__default.createElement(Spinner, {
+        className: "text-grey-700 flex h-4 items-center"
+      }, loading ? (/*#__PURE__*/React__default.createElement(Spinner, {
         className: "h-4 w-4"
-      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      })) : showTotal ? (/*#__PURE__*/React__default.createElement("span", {
+        className: "border-r border-black/[0.25] pr-2"
+      }, `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`)) : null), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findPrevious,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-up",
@@ -14030,6 +14351,7 @@ function Search$1(props) {
   const scrollTo = rowIndex => scrollToIndex(rowIndex, {
     align: 'center'
   });
+  const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
   React__default.useEffect(() => {
     if (tableMeta.search.highlightedColumnIndexes.length) {
       scrollTo(tableMeta.search.highlightedColumnIndexes[0][0]);
@@ -14038,9 +14360,11 @@ function Search$1(props) {
   const handleFocus = function () {
     try {
       const _temp = function () {
-        if (tableMeta.server.loadAllIfNeeded) {
+        if (tableMeta.server.loadAllIfNeeded && !tableMeta.server._experimentalDataLoader2) {
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, hiddenColumns,
+          // the old data loader doesn't have server side search
+          undefined)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -14049,8 +14373,20 @@ function Search$1(props) {
       return Promise.reject(e);
     }
   };
+  const [loading, setLoading] = React__default.useState(false);
+  const searchTimeoutRef = React__default.useRef();
   const handleChange = query => {
     table.setGlobalFilter(String(query !== null && query !== void 0 ? query : ''));
+    if (tableMeta.search.enableGlobalFilter && tableMeta.search.handleSearch) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = setTimeout(() => {
+        var _tableMeta$search$han, _tableMeta$search;
+        setLoading(true);
+        (_tableMeta$search$han = (_tableMeta$search = tableMeta.search).handleSearch) === null || _tableMeta$search$han === void 0 ? void 0 : _tableMeta$search$han.call(_tableMeta$search, query, hiddenColumns).then(() => {
+          setLoading(false);
+        });
+      }, 150);
+    }
   };
   const handleToggleExcludeUnmatchedResults = enabled => {
     tableMeta.search.setEnableGlobalFilter(enabled, table);
@@ -14058,6 +14394,12 @@ function Search$1(props) {
       var _ref$current;
       return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     });
+    if (tableMeta.search.handleSearch) {
+      setLoading(true);
+      tableMeta.search.handleSearch(enabled ? query : undefined, hiddenColumns).then(() => {
+        setLoading(false);
+      });
+    }
   };
   const handleNextResult = () => {
     if (!tableMeta.search.highlightedColumnIndexes.length) {
@@ -14101,7 +14443,7 @@ function Search$1(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
     findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
     findTotal: (_tableMeta$search$hig = (_tableMeta$search$hig2 = tableMeta.search.highlightedColumnIndexes) === null || _tableMeta$search$hig2 === void 0 ? void 0 : _tableMeta$search$hig2.length) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : null,
-    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    loading: tableMeta.server._experimentalDataLoader2 ? loading : tableMeta.server.loading,
     name: "table-search",
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
@@ -14116,6 +14458,7 @@ function Search$1(props) {
       meta: true,
       shift: false
     },
+    showTotal: !tableMeta.server._experimentalDataLoader2,
     value: query
   }));
 }
@@ -14469,9 +14812,11 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     var _collection$querySele;
     (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
     option.setAttribute('aria-current', 'true');
-    option.scrollIntoView({
-      block: 'nearest'
-    });
+    if (!props['aria-multiselectable']) {
+      option.scrollIntoView({
+        block: 'nearest'
+      });
+    }
     setActiveIndex(index);
   };
   const setActiveIndexByElement = React__default.useCallback(option => {
@@ -14793,14 +15138,16 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: ref,
     "data-taco": "tag"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate px-2",
+    className: "flex items-center truncate px-2",
     ref: textRef
   }, icon ? typeof icon === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
-    className: "-ml-1 -mt-0.5 mr-1 !h-5 !w-5"
+    className: "-ml-1 mr-1 !h-5 !w-5"
   })) : (/*#__PURE__*/React__default.cloneElement(icon, {
-    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
-  })) : null, children), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
+    className: cn(icon.props.className, 'mr-1 -ml-1')
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children)), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "close",
     onClick: onDelete,
     className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
@@ -15077,12 +15424,13 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }), hasValue ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
-  })) : null, isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
+  })) : null, typeof children !== 'string' ? (/*#__PURE__*/React__default.createElement("span", null, children)) : isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
     className: "pointer-events-none my-1",
     color: color,
     icon: prefix
   }, children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: prefix
+    name: prefix,
+    className: "!h-5 !w-5"
   }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex w-full justify-between"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -15091,9 +15439,10 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-col self-center"
-  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: postfix
-  }) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
+  }, postfix ? typeof postfix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix,
+    className: "!h-5 !w-5"
+  })) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
@@ -15259,7 +15608,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate items-center gap-1');
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (placeholder && currentValue === undefined) {
@@ -15269,13 +15618,13 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
-      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+      if (typeof currentValue.props.children === 'string') output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
         icon: currentValue.props.prefix,
         readOnly: readOnly
-      }, currentValue.props.children);
+      }, currentValue.props.children);else output = currentValue.props.children;
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
         name: currentValue.props.prefix,
@@ -15326,7 +15675,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, valuesAsChildren.length === 0 ? (/*#__PURE__*/React__default.createElement(Placeholder, {
       disabled: disabled,
       readOnly: readOnly
-    }, placeholder)) : valuesAsChildren.map(child => (/*#__PURE__*/React__default.createElement(Tag$1, {
+    }, placeholder)) : valuesAsChildren.map(child => typeof child.props.children === 'string' ? (/*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -15340,7 +15689,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
         }
       },
       readOnly: readOnly
-    }, child.props.children)))));
+    }, child.props.children)) : (/*#__PURE__*/React__default.cloneElement(child.props.children, {
+      key: String(child.props.value),
+      className: '!pr-0 !pl-1.5',
+      children: (/*#__PURE__*/React__default.createElement("span", {
+        className: "flex items-center"
+      }, child.props.children.props.children, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "close",
+        onClick: event => {
+          event === null || event === void 0 ? void 0 : event.stopPropagation();
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          if (!disabled && !readOnly) {
+            setValue(child.props.value);
+          }
+        },
+        className: "ml-0.5 !h-5 !w-5 shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+      })))
+    })))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       onClick: forwardClick,
@@ -15371,6 +15736,18 @@ const MultipleValue = ({
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
+  // Retrieves the relevant text content from any JSX.Element passed as a select option, handling nested elements, arrays, and direct text
+  const getTooltipTitle = child => {
+    const children = child.props.children;
+    if (typeof children === 'string') return children;
+    if (typeof children.props.children === 'string') {
+      return children.props.children;
+    }
+    if (Array.isArray(children.props.children)) {
+      return children.props.children.filter(item => typeof item === 'string');
+    }
+    return '';
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex w-full items-center gap-1 overflow-hidden",
     onClick: onClick
@@ -15381,26 +15758,35 @@ const MultipleValue = ({
     disabled: disabled,
     readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
-    const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
-      key: String(child.props.value),
+    const classNames = {
+      truncate: index === boundaryIndex,
+      hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
+    };
+    let output;
+    if (typeof child.props.children === 'string') {
+      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+        key: String(child.props.value),
+        className: cn('cursor-pointer', classNames),
+        color: tags ? child.props.color : undefined,
+        disabled: disabled,
+        icon: child.props.prefix,
+        readOnly: readOnly
+      }, child.props.children);
+    } else output = /*#__PURE__*/React__default.cloneElement(child.props.children, {
       className: cn('cursor-pointer', {
-        truncate: index === boundaryIndex,
-        hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
-      }),
-      color: tags ? child.props.color : undefined,
-      disabled: disabled,
-      icon: child.props.prefix,
-      readOnly: readOnly
-    }, child.props.children);
+        'shrink-0': index !== boundaryIndex
+      }, classNames),
+      key: String(child.props.value)
+    });
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
         key: String(child.props.value),
-        title: String(child.props.children)
-      }, tag);
+        title: String(getTooltipTitle(child))
+      }, output);
     }
-    return tag;
+    return output;
   })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (/*#__PURE__*/React__default.createElement(Tooltip, {
-    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
+    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(getTooltipTitle(child)) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
   }, "+", valuesAsChildren.length - (boundaryIndex + 1)))) : null);
@@ -15465,7 +15851,7 @@ const BubbleSelect = props => {
     if (prevValue !== value && setValue) {
       if (Array.isArray(value)) {
         value.forEach(v => {
-          const option = select.querySelector(`option[value='${v}']`);
+          const option = select.querySelector(`option[value='${CSS.escape(v)}']`);
           if (option) {
             option.selected = true;
           }
@@ -15593,20 +15979,19 @@ const useChildren = ({
 };
 
 const getNextColor = options => {
-  const occurrences = AVAILABLE_COLORS.reduce((prev, color) => {
-    if (color !== 'transparent') {
-      return {
-        ...prev,
-        [color]: 0
-      };
-    }
-    return prev;
-  }, {});
-  options.forEach(option => {
+  let occurrences = {};
+  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
+    occurrences = {
+      ...occurrences,
+      [color]: 0
+    };
+  });
+  options.reduce((occurrences, option) => {
     if (option.props.color) {
       occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
     }
-  });
+    return occurrences;
+  }, occurrences);
   const colors = Object.keys(occurrences);
   if (colors.length) {
     return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
@@ -16160,8 +16545,9 @@ function Print$1(props) {
       const toastRef = toast.loading(texts.table.print.loading);
       const _temp2 = function () {
         if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
+          const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
           const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, hiddenColumns, tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -16275,10 +16661,11 @@ function guessComparatorsBasedOnControl(column) {
   return getDataTypeProperties(columnMeta.dataType).filterComparators;
 }
 
+const FilterContext = /*#__PURE__*/React__default.createContext([]);
+
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
-    filters,
     onChange: handleChange,
     value = null,
     ...attributes
@@ -16286,6 +16673,7 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     texts
   } = useLocalization();
+  const filters = React__default.useContext(FilterContext);
   const selectedColumn = allColumns.find(column => column.id === value);
   const warning = selectedColumn && !selectedColumn.getIsVisible();
   return /*#__PURE__*/React__default.createElement("div", {
@@ -16369,6 +16757,10 @@ function getComparatorText(comparator, texts, column) {
       return texts.table.filters.comparators.hasAllOf;
     case exports.TableFilterComparator.HasNoneOf:
       return texts.table.filters.comparators.hasNoneOf;
+    case exports.TableFilterComparator.IsOneOf:
+      return texts.table.filters.comparators.isOneOf;
+    case exports.TableFilterComparator.IsNoneOf:
+      return texts.table.filters.comparators.isNoneOf;
     default:
       return '';
   }
@@ -16451,6 +16843,7 @@ function Control(props) {
   } = props;
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  const filters = React__default.useContext(FilterContext);
   const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
@@ -16464,7 +16857,7 @@ function Control(props) {
       setValue: value => onChange(value),
       value,
       ref
-    }), {
+    }, undefined, filters), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
     });
@@ -16506,7 +16899,6 @@ function Filter$1(props) {
   const {
     allColumns,
     filter,
-    filters,
     onChange: handleChange,
     onRemove,
     position
@@ -16581,7 +16973,6 @@ function Filter$1(props) {
     className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
   }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
     allColumns: allColumns,
-    filters: filters,
     onChange: handleChangeColumn,
     value: id,
     ref: ref
@@ -16685,7 +17076,9 @@ function ManageFiltersPopover(props) {
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     onChange: handleClose
-  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
+    value: filters
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-[40rem] flex-col gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-8"
@@ -16701,7 +17094,6 @@ function ManageFiltersPopover(props) {
     key: `filter_${index}`,
     allColumns: allColumns,
     filter: filter,
-    filters: filters,
     position: index,
     onChange: handleChangeFilter,
     onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
@@ -16717,7 +17109,7 @@ function ManageFiltersPopover(props) {
   }, texts.table.filters.buttons.clear), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     onClick: handleApply
-  }, texts.table.filters.buttons.apply)))));
+  }, texts.table.filters.buttons.apply))))));
 }
 
 function Filters(props) {
@@ -16820,7 +17212,7 @@ function Table(props) {
 }
 Table.Toolbar = TableToolbar;
 Table.Grid = TableGrid;
-function getFilterReason(table) {
+function getEmptyStateReason(table) {
   if (table.instance.getFilteredRowModel().rows.length === 0 && table.instance.getCoreRowModel().rows.length !== 0) {
     const state = table.instance.getState();
     if (table.meta.search.enableGlobalFilter && !!state.globalFilter) {
@@ -16837,13 +17229,14 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    footerRows,
     table,
     ...attributes
   } = props;
   const handleFocus = table.meta.rowActive.rowActiveIndex === undefined ? event => {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
-  const filterReason = getFilterReason(table);
+  const emptyStateReason = getEmptyStateReason(table);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
@@ -16864,9 +17257,10 @@ function TableGrid(props) {
     key: props.id,
     header: props,
     scrollToIndex: table.renderer.scrollToIndex
-  }))))))), filterReason ? (/*#__PURE__*/React__default.createElement(EmptyStateBody, {
+  }))))))), emptyStateReason ? (/*#__PURE__*/React__default.createElement(EmptyStateBody, {
     emptyState: props.table.props.emptyState,
-    reason: filterReason
+    isReady: table.meta.server.isEnabled ? table.meta.server.isReady : true,
+    reason: emptyStateReason
   })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
@@ -16878,12 +17272,11 @@ function TableGrid(props) {
     } : table.renderer.style
   }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, footerRows) : null)))));
 }
 
-function Column$1(_) {
-  return null;
-}
+const Column$1 = () => null;
+Column$1.displayName = 'Table3Column';
 function Group$4(_) {
   return null;
 }
@@ -18471,19 +18864,26 @@ const shortcut = {
   meta: true,
   shift: false
 };
+function isTableScrolled(ref) {
+  if (ref.current) {
+    var _ref$current, _ref$current$querySel, _ref$current2, _ref$current2$querySe;
+    const height = parseFloat(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$querySel = _ref$current.querySelector('tbody')) === null || _ref$current$querySel === void 0 ? void 0 : _ref$current$querySel.style.height) || '0') + parseFloat(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$querySe = _ref$current2.querySelector('tbody')) === null || _ref$current2$querySe === void 0 ? void 0 : _ref$current2$querySe.style.paddingBottom) || '0');
+    return height > ref.current.scrollHeight;
+  }
+  return false;
+}
 
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();
-  // save when the row changes
-  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
-  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
-      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      tableMeta.editing.saveChanges(table);
-    }
-  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
+    return () => {
+      if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _table$getRowModel$ro;
+        tableMeta.editing.saveChanges(table, (_table$getRowModel$ro = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id);
+      }
+    };
+  }, [tableMeta.rowActive.rowActiveIndex]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {
@@ -18509,9 +18909,9 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     const onClickOutside = event => {
       if (tableMeta.editing.isEditing) {
         const element = event.target;
-        const insideTable = element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
+        const isTableOrIsInsideTable = element.tagName === 'TABLE' || element.tagName === 'TBODY' || element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || !document.body.contains(element) || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
         // users can click the white space below rows which could be inside the table, but a valid scenario to save
-        if (!insideTable || element.tagName === 'TABLE' || element.tagName === 'TBODY') {
+        if (!isTableOrIsInsideTable) {
           tableMeta.editing.saveChanges(table);
         }
       }
@@ -18519,18 +18919,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  const rows = table.getRowModel().rows;
-  // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-    const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-    pendingChanges.forEach(pendingChange => {
-      try {
-        table.getRow(pendingChange.rowId);
-      } catch {
-        tableMeta.editing.discardChanges(pendingChange.rowId, table);
-      }
-    });
-  }, [rows.length]);
+  React__default.useEffect(() => {
+    if (tableMeta.editing.isEnabled) {
+      tableMeta.rowActions.registerHandler('cleanup', rowId => {
+        tableMeta.editing.discardChanges(rowId, table);
+      });
+    }
+  }, []);
   // shortcuts
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
     event.preventDefault();
@@ -18558,6 +18953,7 @@ function reducer$2(state, action) {
       {
         const {
           columnId,
+          index,
           row,
           value
         } = payload;
@@ -18567,7 +18963,8 @@ function reducer$2(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
             originals: setWith(state.changes.originals, rowId, row, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeCellValue':
@@ -18601,6 +18998,7 @@ function reducer$2(state, action) {
       {
         const {
           cellErrors,
+          index,
           moveReasons,
           original,
           value
@@ -18610,12 +19008,13 @@ function reducer$2(state, action) {
           changes: {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
-            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors.cells[rowId], Object),
+            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors[rowId], Object),
             originals: setWith(state.changes.originals, rowId, original !== null && original !== void 0 ? original : state.changes.originals[rowId], Object),
             moveReasons: setWith(state.changes.moveReasons, rowId, moveReasons !== null && moveReasons !== void 0 ? moveReasons : state.changes.moveReasons[rowId], Object),
             // status can be undefined, so don't use ??
             status: setWith(state.changes.status, rowId, undefined, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     case 'removeRow':
@@ -18633,6 +19032,7 @@ function reducer$2(state, action) {
             originals: omit(state.changes.originals, rowId),
             status: omit(state.changes.status, rowId)
           },
+          indexes: omit(state.indexes, rowId),
           temporaryRows: state.temporaryRows.filter(row => row[rowIdentityAccessor] !== rowId)
         };
       }
@@ -18662,9 +19062,10 @@ function reducer$2(state, action) {
           }
         };
       }
-    case 'createRow':
+    case 'insertTemporaryRow':
       {
         const {
+          index,
           value
         } = payload;
         return {
@@ -18674,14 +19075,36 @@ function reducer$2(state, action) {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
             originals: setWith(state.changes.originals, rowId, value, Object)
-          }
+          },
+          indexes: setWith(state.indexes, rowId, index, Object)
         };
       }
     default:
       return state;
   }
 }
-function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator) {
+function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
+  const discardChanges = function (rowId, table) {
+    try {
+      // remove any new rows from pinned state before discarding them
+      table.resetRowPinning(true);
+      dispatch({
+        type: 'removeRow',
+        rowId,
+        payload: {
+          rowIdentityAccessor
+        }
+      });
+      const _temp8 = function () {
+        if (typeof handleDiscard === 'function') {
+          return Promise.resolve(handleDiscard()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const saveChanges = function (table, rowId = undefined) {
     try {
       let _exit = false;
@@ -18694,35 +19117,38 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         [rowId]: state.changes.rows[rowId]
       } : state.changes.rows;
       let completed = true;
-      const _temp9 = _forOf(Object.keys(changes), function (rowId) {
+      const _temp7 = _forOf(Object.keys(changes), function (rowId) {
         const status = getRowStatus(rowId);
         return _catch(function () {
-          function _temp8(_result) {
+          var _changes$rowId;
+          function _temp6(_result) {
             return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
               // cleanup changes, we don't need them after saving
-              discardChanges(rowId, table);
-              // show the saved status, then remove it after a delay
-              setRowStatus(rowId, 'saved');
-              setTimeout(() => {
-                setRowStatus(rowId, undefined);
-              }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              return Promise.resolve(discardChanges(rowId, table)).then(function () {
+                // show the saved status, then remove it after a delay
+                setRowStatus(rowId, 'saved');
+                setTimeout(() => {
+                  setRowStatus(rowId, undefined);
+                }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+              });
             });
           }
+          const rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
           // don't try to save if - already saving, or there are known errors
-          if (status === 'saving' || status === 'errored') {
+          if (!Object.keys(rowChanges).length || status === 'saving' || status === 'errored') {
             return;
           }
           setRowStatus(rowId, 'saving');
           const changeSet = {
             ...state.changes.originals[rowId],
-            ...changes[rowId]
+            ...rowChanges
           };
           // if we had to create a temporary id, delete it first - it's our data, not theirs
           if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
             delete changeSet[rowIdentityAccessor];
           }
           // re-run validation, maybe a cell is already invalid but has never been blurred
-          const _temp7 = function () {
+          const _temp5 = function () {
             if (validator) {
               return Promise.resolve(validator(changeSet)).then(function (errors) {
                 if (errors && Object.keys(errors).length) {
@@ -18731,7 +19157,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               });
             }
           }();
-          return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7); // send new data to the server
+          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5); // send new data to the server
         }, function (error) {
           var _error$response;
           if (error instanceof ReferenceError || error instanceof TypeError || (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) >= 500) {
@@ -18771,18 +19197,18 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }, function () {
         return _exit;
       });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result3) {
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function (_result3) {
         return _exit ? _result3 : completed;
-      }) : _exit ? _temp9 : completed);
+      }) : _exit ? _temp7 : completed);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const onCellChanged = function (cell, rowIndex, shouldRunUpdaters = true) {
+  const onCellChanged = function (cell, rowIndex, nextValue, shouldRunUpdaters = true) {
     try {
-      function _temp6() {
+      function _temp4() {
         var _state$changes$errors11;
-        function _temp4() {
+        function _temp2() {
           // only set errors and move reasons for the cells we're currently acting on
           // why? because the UX is not good if we set them for cells the user hasn't touched yet
           const cellsToActOn = [cell.column.id, ...Object.keys(updatesForOtherCells)];
@@ -18813,6 +19239,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
             rowId: cell.row.id,
             payload: {
               cellErrors: nextCellErrors,
+              index: rowIndex,
               moveReasons: nextMoveReasons,
               value: nextChanges
             }
@@ -18820,7 +19247,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }
         // create a projection of the next state, so we can act against it
         const nextChanges = {
-          ...state.changes.rows[cell.row.id],
+          ...changes,
           ...updatesForOtherCells
         };
         const nextMoveReasons = {
@@ -18829,29 +19256,35 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         const nextCellErrors = {
           ...((_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells)
         };
-        // run validation
+        // run validation - if there are changes, and if there is an original stored
         let validationErrors = {};
-        const _temp3 = function () {
-          if (validator) {
+        const _temp = function () {
+          if (validator && Object.keys(nextChanges).length && state.changes.originals[cell.row.id]) {
+            // merge with the original so we get a full row
             const nextRowValue = {
               ...state.changes.originals[cell.row.id],
               ...changes,
               ...updatesForOtherCells
             };
-            return Promise.resolve(validator(nextRowValue)).then(function (_validator2) {
-              validationErrors = _validator2 !== null && _validator2 !== void 0 ? _validator2 : {};
+            return Promise.resolve(validator(nextRowValue)).then(function (_validator) {
+              validationErrors = _validator !== null && _validator !== void 0 ? _validator : {};
             });
           }
         }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       }
-      const changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      const changes = nextValue !== undefined ? {
+        ...state.changes.rows[cell.row.id],
+        [cell.column.id]: nextValue
+      } : {
+        ...state.changes.rows[cell.row.id]
+      };
+      if (!Object.keys(changes).length) {
         return Promise.resolve();
       }
       let updatesForOtherCells = {};
       // run the updater handler if there is one, to see if there are any other cells to update
-      const _temp5 = function () {
+      const _temp3 = function () {
         if (typeof handleChange === 'function' && shouldRunUpdaters) {
           const previousRowValue = {
             ...state.changes.originals[cell.row.id]
@@ -18865,42 +19298,11 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
           });
         }
       }();
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
     } catch (e) {
       return Promise.reject(e);
     }
   }; // general
-  // rows
-  const setRowValue = function (rowId, original, value) {
-    try {
-      function _temp2() {
-        dispatch({
-          type: 'updateRow',
-          rowId,
-          payload: {
-            cellErrors,
-            original,
-            value
-          }
-        });
-      }
-      let cellErrors;
-      const _temp = function () {
-        if (validator) {
-          const row = {
-            ...original,
-            ...value
-          };
-          return Promise.resolve(validator(row)).then(function (_validator) {
-            cellErrors = _validator !== null && _validator !== void 0 ? _validator : {};
-          });
-        }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   const localization = useLocalization();
   const [state, dispatch] = React__default.useReducer(reducer$2, {
     changes: {
@@ -18910,8 +19312,10 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       originals: {},
       status: {}
     },
+    indexes: {},
     temporaryRows: []
   });
+  // rows
   function getRowValue(rowId) {
     var _state$changes$rows$r, _state$changes$rows;
     return (_state$changes$rows$r = (_state$changes$rows = state.changes.rows) === null || _state$changes$rows === void 0 ? void 0 : _state$changes$rows[rowId]) !== null && _state$changes$rows$r !== void 0 ? _state$changes$rows$r : undefined;
@@ -18949,23 +19353,24 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }
     });
   }
-  function createRow(data) {
+  function insertTemporaryRow(data, rowIndex) {
     const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
     const value = {
       ...data,
       [rowIdentityAccessor]: newRowId
     };
     dispatch({
-      type: 'createRow',
+      type: 'insertTemporaryRow',
       rowId: newRowId,
       payload: {
+        index: rowIndex,
         value
       }
     });
     return newRowId;
   }
   // cells
-  function setCellValue(cell, value) {
+  function setCellValue(cell, rowIndex, value) {
     const rowId = cell.row.id;
     const columnId = cell.column.id;
     // update if the change is different to the original value
@@ -18975,6 +19380,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         rowId,
         payload: {
           columnId,
+          index: rowIndex,
           row: cell.row.original,
           value
         }
@@ -19007,6 +19413,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     }
     return rowsWithErrors.filter(hasRowErrorsShownInAlert).map(rowId => ({
       rowId,
+      index: state.indexes[rowId],
       changes: state.changes.rows[rowId],
       errors: state.changes.errors[rowId]
     }));
@@ -19017,20 +19424,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
   function hasChanges(rowId) {
     return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
   }
-  function discardChanges(rowId, table) {
-    // remove any new rows from pinned state before discarding them
-    table.resetRowPinning(true);
-    dispatch({
-      type: 'removeRow',
-      rowId,
-      payload: {
-        rowIdentityAccessor
-      }
-    });
-  }
   return {
     // row
-    setRowValue,
     getRowValue,
     getRowMoveReason,
     hasRowErrors,
@@ -19050,12 +19445,66 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     discardChanges,
     hasSaved,
     // new rows
-    createRow,
+    insertTemporaryRow,
     temporaryRows: state.temporaryRows
   };
 }
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, handleDiscard, rowIdentityAccessor, validator) {
+  const createRow = function (table, row) {
+    try {
+      let _exit = false;
+      function _temp2(_result) {
+        if (_exit) return _result;
+        const changeset = row !== null && row !== void 0 ? row : handleCreate();
+        try {
+          if (changeset) {
+            // set the active row to the new row before toggling editing on
+            const temporaryRows = tableMeta.editing.temporaryRows;
+            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            const newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
+            // prep the row
+            table.setRowPinning(currentState => {
+              var _ref, _currentState$bottom;
+              return {
+                ...currentState,
+                bottom: (_ref = (_currentState$bottom = currentState.bottom) !== null && _currentState$bottom !== void 0 ? _currentState$bottom : []) === null || _ref === void 0 ? void 0 : _ref.concat(newRowId)
+              };
+            });
+            // prep editing mode
+            toggleDetailedMode(false);
+            setLastFocusedCellIndex(undefined);
+            // wait until set states have run
+            requestAnimationFrame(() => {
+              tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+              table.resetRowSelection();
+              if (!tableMeta.editing.isEditing) {
+                setEditing(true);
+              }
+            });
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      if (!handleCreate) {
+        return Promise.resolve();
+      }
+      const tableMeta = table.options.meta;
+      const _temp = function () {
+        if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+          return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+            if (!saved) {
+              _exit = true;
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   // used to switch the table into editing mode
   const [isEditing, setEditing] = React__default.useState(false);
   // used to switch the editing between "detailed" mode
@@ -19064,26 +19513,27 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentit
   const createRowButtonRef = React__default.useRef(null);
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
   const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
-  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
+  const pendingChangesFns = usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator);
   function toggleEditing(enabled, table, scrollToIndex) {
-    var _tableMeta$rowActive$, _table$getRowModel$ro;
-    if (!enabled) {
-      // save
-      pendingChangesFns.saveChanges(table);
+    const tableMeta = table.options.meta;
+    if (enabled) {
+      var _tableMeta$rowActive$, _table$getRowModel$ro;
+      const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
+      if (tableMeta.rowActive.rowActiveIndex === undefined) {
+        console.log('edit toggle active', index);
+        tableMeta.rowActive.setRowActiveIndex(index);
+      }
+      if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
+        scrollToIndex(index);
+      }
+    } else if (!enabled) {
       // reset detailed mode
       toggleDetailedMode(false);
       // reset the last index back to the first focusable element, when editing gets turned off
       setLastFocusedCellIndex(undefined);
     }
-    const tableMeta = table.options.meta;
-    const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
-    if (tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(index);
-    }
     setEditing(enabled);
-    if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
-      scrollToIndex(index);
-    }
+    pendingChangesFns.saveChanges(table);
   }
   return {
     isEnabled,
@@ -19093,6 +19543,7 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentit
     toggleEditing: isEnabled ? toggleEditing : () => undefined,
     lastFocusedCellIndex,
     setLastFocusedCellIndex,
+    createRow,
     createRowButtonRef,
     ...pendingChangesFns
   };
@@ -19349,24 +19800,30 @@ function EditingControlCell(props) {
     var _cellRef$current;
     return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
   }, [cellRef.current]);
-  const handleChange = nextValue => {
+  const handleChange = React__default.useCallback(nextValue => {
     if (nextValue !== value) {
-      tableMeta.editing.setCellValue(cell, nextValue);
+      tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
       if (hasNonTextControl) {
-        tableMeta.editing.onCellChanged(cell, rowIndex);
+        requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }
     }
-  };
-  const handleBlur = () => {
+  }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]);
+  const blur = React__default.useCallback(function blur() {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
-  };
+    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+  }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]);
+  const handleBlur = React__default.useCallback(event => {
+    if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+      return;
+    }
+    blur();
+  }, [blur]);
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
     const ref = cellRef.current;
     return () => {
       if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {
-        handleBlur();
+        blur();
       }
     };
   }, []);
@@ -19514,11 +19971,21 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
         props.onChange(newDate);
       }
     };
+    const handleDatepickerInputKeyDown = event => {
+      // When in detailed mode, we want to handle the change, when 'Enter' is pressed.
+      // To make it possible, we just need to prevent handleInputKeyDown from being executed, and give the full control to Datepicker,
+      // by doing this, Datepicker will exit "detailed mode" by itself when a valid date change event is triggered.
+      // In any other cases we'll just execute the "handleInputKeyDown" handler.
+      if (isDetailedMode && event.key === 'Enter' && event.target.value !== '') {
+        return;
+      }
+      handleInputKeyDown(event);
+    };
     return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, commonProps, {
       invalid: invalid,
       onChange: handleChange,
       onFocus: handleFocus,
-      onKeyDown: handleInputKeyDown,
+      onKeyDown: handleDatepickerInputKeyDown,
       ref: controlRef,
       value: valueAsDate
     }));
@@ -19610,14 +20077,13 @@ function DiscardChangesConfirmationDialog(props) {
   }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
     tabIndex: 0
   }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    autoFocus: true,
     tabIndex: 0,
     appearance: "primary",
     onClick: handleDiscard
   }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
 }
 
-function EditingActionMenu(props) {
+function EditingActionsMenu(props) {
   const {
     hasChanges,
     hasErrors,
@@ -19646,7 +20112,8 @@ function EditingActionMenu(props) {
     icon: "more",
     onKeyDown: handleKeyDown,
     menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
-      onKeyDown: handleMenuContentKeyDown
+      onKeyDown: handleMenuContentKeyDown,
+      onFocusOutside: event => event.preventDefault()
     }, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "tick",
       disabled: !hasChanges || hasErrors,
@@ -19769,7 +20236,7 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.onEditingCreate, props.onEditingDiscard, props.rowIdentityAccessor, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
   // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
   const data = React__default.useMemo(() => {
@@ -19784,12 +20251,20 @@ function useTable3(props, ref) {
     data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
     // Display EditingActionMenu instead of row actions while editing
-    rowActions: editing.isEditing ? [(_, rowId, table) => {
+    rowActions: editing.isEditing ? [(_, rowId, __, table) => {
       const tableMeta = table.options.meta;
-      return /*#__PURE__*/React__default.createElement(EditingActionMenu, {
+      return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
         hasChanges: editing.hasChanges(rowId),
         hasErrors: editing.hasRowErrors(rowId),
-        onDiscard: () => editing.discardChanges(rowId, table),
+        onDiscard: () => {
+          editing.discardChanges(rowId, table);
+          if (editing.temporaryRows.length) {
+            requestAnimationFrame(() => {
+              var _editing$createRowBut;
+              return (_editing$createRowBut = editing.createRowButtonRef.current) === null || _editing$createRowBut === void 0 ? void 0 : _editing$createRowBut.focus();
+            });
+          }
+        },
         onEditingSave: function () {
           try {
             return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
@@ -19813,6 +20288,9 @@ function useTable3(props, ref) {
   React__default.useEffect(() => {
     if (table.ref.current) {
       table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance, table.renderer.scrollToIndex);
+      if (props.onEditingCreate) {
+        table.ref.current.instance.createRow = row => table.meta.editing.createRow(table.instance, row);
+      }
     }
   }, [table.ref.current]);
   return table;
@@ -19851,22 +20329,26 @@ function Alert$1(props) {
   // generate links to each invalid row, to go into the error message
   const links = [];
   const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
-  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ?
+  // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+  table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor)) : undefined;
   pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
+    var _row;
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
+    // note: if this row click functionality is removed, indexes can be removed from useEditingState
     const handleClick = () => {
       // if row is visible
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (pendingChangeWithError.index > -1) {
+        scrollToRow(pendingChangeWithError.index);
+        tableMeta.rowActive.setRowActiveIndex(pendingChangeWithError.index);
       }
       // if row is filtered out
       else {
-        setShowFilterResetDialog(pendingChangeWithError.rowId);
+        setShowFilterResetDialog(pendingChangeWithError.index);
       }
     };
     let tooltip;
@@ -19878,7 +20360,12 @@ function Alert$1(props) {
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
       tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
-    const row = table.getRow(pendingChangeWithError.rowId).original;
+    let row = undefined;
+    try {
+      row = table.getRow(pendingChangeWithError.rowId).original;
+    } catch {
+      // because of server loading, some rows may not be accessible
+    }
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
       key: pendingChangeWithError.rowId,
       title: tooltip
@@ -19886,7 +20373,7 @@ function Alert$1(props) {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? (_row = row) === null || _row === void 0 ? void 0 : _row[rowIdentityColumn.id] : pendingChangeWithError.index + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -19907,9 +20394,8 @@ function Alert$1(props) {
     table.resetGlobalFilter();
     table.resetColumnFilters();
     requestAnimationFrame(() => {
-      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (showFilterResetDialog && showFilterResetDialog > -1) {
+        scrollToRow(showFilterResetDialog);
       }
       setShowFilterResetDialog(false);
     });
@@ -19973,11 +20459,9 @@ function CreateNewRow(props) {
   var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
-    onEditingCreate: handleEditingCreate,
-    scrollToIndex,
+    isScrolled,
     table,
-    tableMeta,
-    tableRef
+    tableMeta
   } = props;
   const {
     texts
@@ -19986,46 +20470,19 @@ function CreateNewRow(props) {
   const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
   const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
   const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
-  const createRow = function (row) {
+  const handleCreate = function () {
     try {
-      if (!handleEditingCreate || isDisabled) {
+      if (isDisabled) {
         return Promise.resolve();
       }
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
-        const changeset = row !== null && row !== void 0 ? row : handleEditingCreate();
-        try {
-          if (changeset) {
-            const rowId = tableMeta.editing.createRow(changeset);
-            table.getRow(rowId).pin('bottom');
-            // set the active row to the new row before toggling editing on
-            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-            tableMeta.editing.toggleEditing(true, table, scrollToIndex);
-            tableMeta.editing.setLastFocusedCellIndex(0);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      });
+      return Promise.resolve(tableMeta.editing.createRow(table)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // allow programmatic access to creating rows from outside the table
-  React__default.useEffect(() => {
-    if (tableRef.current) {
-      tableRef.current.instance.createRow = createRow;
-    }
-  }, [tableRef.current, createRow]);
-  const handleCreate = function () {
-    return createRow();
-  };
   const shortcut = {
     key: 'Enter',
-    shift: true
+    meta: true
   };
   let tooltip;
   if (isSaving) {
@@ -20037,11 +20494,9 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
-    'border-t-2': isScrolled,
     'border-b': !isScrolled
   });
   return /*#__PURE__*/React__default.createElement("tr", {
@@ -20066,6 +20521,7 @@ function CreateNewRow(props) {
 function TemporaryRow(props) {
   const {
     createRowButtonRef,
+    isScrolled,
     table,
     tableMeta,
     tableRef
@@ -20128,10 +20584,9 @@ function TemporaryRow(props) {
       }
     }
   };
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
-  const className = cn('group/row border-grey-300 !sticky z-[22]', {
-    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
-    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+  const className = cn('group/row border-grey-300 !sticky z-[22] print:hidden', {
+    'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
@@ -20145,14 +20600,13 @@ function TemporaryRow(props) {
     className: className,
     onKeyDown: handleKeyDown,
     onKeyDownCapture: handleKeyDownCapture,
-    // Row actions should only be hidden on temporary rows when editing is turned off
-    hideRowActions: !tableMeta.editing.isEditing
+    hideInternalColumns: true,
+    hideRowActions: !tableMeta.editing.isEditing,
+    skipPageLoading: true
   }))));
 }
 
-function Column$3(_) {
-  return null;
-}
+const Column$3 = () => null;
 Column$3.displayName = 'Table3Column';
 function Group$5(_) {
   return null;
@@ -20165,8 +20619,25 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
+  const rowsById = table3.instance.getCoreRowModel().rowsById;
+  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {
+    if (table3.meta.server._experimentalDataLoader2) {
+      // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.
+      return true;
+    }
+    return rowsById[row.rowId];
+  }).length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const isScrolled = isTableScrolled(table3.ref);
+  let createWorkflow;
+  if (hasCreateWorkflow) {
+    createWorkflow = /*#__PURE__*/React__default.createElement(CreateNewRow, {
+      buttonRef: table3.meta.editing.createRowButtonRef,
+      isScrolled: isScrolled,
+      table: table3.instance,
+      tableMeta: table3.meta
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -20179,20 +20650,15 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    footerRows: hasCreateWorkflow && isScrolled ? createWorkflow : undefined,
     table: table3
   }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
     createRowButtonRef: table3.meta.editing.createRowButtonRef,
+    isScrolled: isScrolled,
     table: table3.instance,
     tableMeta: table3.meta,
     tableRef: table3.ref
-  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
-    buttonRef: table3.meta.editing.createRowButtonRef,
-    onEditingCreate: props.onEditingCreate,
-    scrollToIndex: table3.renderer.scrollToIndex,
-    table: table3.instance,
-    tableMeta: table3.meta,
-    tableRef: table3.ref
-  }))) : null));
+  }), !isScrolled ? createWorkflow : null)) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);
@@ -20428,6 +20894,796 @@ const Tour = props => {
 };
 Tour.Step = TourStep;
 
+// NOTE: this file is intentianally a js file so that it can be consumed by tailwind.config.js
+
+const THEME_COLORS = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  white: '#fff',
+  black: '#1c1c1c',
+  brand: {
+    vismaRed: '#E70641',
+    paleOrange: '#FFF5E5',
+    sunsetOrange: '#E89C2E',
+    midnightBlue: '#29283E',
+    coolBlue: '#F5F7F9'
+  },
+  grey: {
+    lightest: '#fafafa',
+    light: '#F6F6F6',
+    DEFAULT: '#EBEBEB',
+    dark: '#DDDDDD',
+    darker: '#ACACAC',
+    darkest: '#595959',
+    darkNew: '#a5a6a9',
+    50: '#fafafa',
+    100: '#F6F6F6',
+    200: '#EBEBEB',
+    300: '#DDDDDD',
+    500: '#ACACAC',
+    700: '#595959',
+    900: '#303030'
+  },
+  purple: {
+    lightest: '#585c74',
+    light: '#4b4f64',
+    DEFAULT: '#3d4153',
+    dark: '#353a48',
+    darker: '#29283e',
+    darkest: '#212032',
+    darkNew_1: '#373647',
+    darkNew_2: '#414050',
+    100: '#EEE5FF',
+    200: '#ddd1ff',
+    300: '#CBBCFE',
+    500: '#9270FA',
+    700: '#6542D1',
+    900: '#412970'
+  },
+  blue: {
+    lightest: '#DEEBFF',
+    light: '#75A0F5',
+    DEFAULT: '#4573D2',
+    dark: '#2B57B4',
+    100: '#DEEBFF',
+    200: '#AACCFF',
+    300: '#75A0F5',
+    500: '#4573D2',
+    700: '#2B57B4',
+    900: '#29283E'
+  },
+  red: {
+    lightest: '#FFDAD2',
+    light: '#E66568',
+    DEFAULT: '#CE3F42',
+    dark: '#950027',
+    100: '#FFDAD2',
+    200: '#f3a09d',
+    300: '#E66568',
+    500: '#CE3F42',
+    700: '#950027',
+    900: '#64001B'
+  },
+  green: {
+    lightest: '#cdf0e7',
+    light: '#52C7AB',
+    DEFAULT: '#08AE87',
+    dark: '#028465',
+    100: '#cdf0e7',
+    200: '#9be1ce',
+    300: '#52C7AB',
+    500: '#08AE87',
+    700: '#028465',
+    900: '#14493A'
+  },
+  yellow: {
+    lightest: '#FFF1C3',
+    light: '#FFD665',
+    DEFAULT: '#FFBD3B',
+    dark: '#e89c2e',
+    100: '#FFF1C3',
+    200: '#ffe494',
+    300: '#FFD665',
+    500: '#FFBD3B',
+    700: '#e89c2e',
+    900: '#733700'
+  },
+  pink: {
+    100: '#FFE3F7',
+    200: '#fcb9e9',
+    300: '#F98EDB',
+    500: '#E165BF',
+    700: '#CF49AA',
+    900: '#870062'
+  },
+  brown: {
+    100: '#EEE0DA',
+    200: '#DFCCC2',
+    300: '#C4AB9E',
+    500: '#93715D',
+    700: '#73503B',
+    900: '#45291F'
+  },
+  orange: {
+    100: '#FFE3BB',
+    200: '#FCCB80',
+    300: '#FAB64D',
+    500: '#F99702',
+    700: '#EF7D00',
+    900: '#4A2811'
+  }
+};
+
+const mapColor = (palette, prefix = '') => {
+  return Object.keys(palette).reduce((accum, color) => {
+    if (color === 'current') {
+      return accum;
+    } else if (typeof palette[color] === 'string') {
+      return {
+        ...accum,
+        [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
+      };
+    } else {
+      return {
+        ...accum,
+        ...mapColor(palette[color], color)
+      };
+    }
+  }, {});
+};
+const colors = /*#__PURE__*/mapColor(THEME_COLORS);
+const getThemeColor = color => colors[color];
+
+function Legend(props) {
+  const {
+    activeIndex,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    payload,
+    layout,
+    activeItems
+  } = props;
+  const [hoverIndex, setHoverIndex] = React.useState(null);
+  const handleMouseEnter = (entry, index) => {
+    setHoverIndex(index);
+    if (activeItems[entry.dataKey]) onMouseEnter(entry, index);
+  };
+  const handleMouseLeave = () => {
+    onMouseLeave();
+    setHoverIndex(null);
+  };
+  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "transparent",
+    className: "text-grey-700"
+  }, moreButtonText));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-auto max-w-full overflow-hidden"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('mb-0 ml-0 flex justify-center', {
+      'flex-col': layout === 'vertical'
+    })
+  }, /*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "w-full items-center py-1",
+    moreButton: moreButton
+  }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement("span", {
+    key: `${entry.dataKey}-${index}`,
+    className: cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
+      'bg-grey-100 rounded': activeIndex === index
+    }),
+    onMouseEnter: () => handleMouseEnter(entry, index),
+    onMouseLeave: handleMouseLeave,
+    onClick: onClick ? () => onClick(entry) : undefined
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-700 flex items-center gap-[4px]"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
+      'border-grey-300 border !bg-white': !activeItems[entry.dataKey]
+    }),
+    style: {
+      backgroundColor: entry.color
+    }
+  }, hoverIndex === index && activeItems[entry.dataKey] && (/*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick-bold",
+    className: "!h-full !w-full text-white"
+  }))), entry.value)))))));
+}
+
+const Tooltip$2 = ({
+  active,
+  formatter,
+  payload,
+  style,
+  singlePieDonutChart
+}) => {
+  const getColor = entry => {
+    var _ref, _entry$color;
+    if (singlePieDonutChart) {
+      // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+      // and one with multiple pies.
+      return getThemeColor(entry.payload.color);
+    }
+    return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
+  };
+  if (active && payload && payload.length) {
+    return /*#__PURE__*/React__default.createElement("dl", {
+      className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
+      style: style
+    }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${entry.name}-${index}`
+    }, /*#__PURE__*/React__default.createElement("dt", {
+      className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-px h-2.5 w-2.5 rounded-sm",
+      style: {
+        background: getColor(entry)
+      }
+    }),
+    // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+    // and one with multiple pies.
+    singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
+      className: "mb-0 text-right font-bold text-black "
+    }, formatter ? formatter(entry.value) : entry.value)))));
+  }
+  return null;
+};
+
+const getCartesianGridProps = () => ({
+  vertical: false
+});
+const getXAxisProps = props => ({
+  axisLine: false,
+  dataKey: props.accessor,
+  fontSize: 12,
+  scale: props.xAxisScale,
+  tickLine: false,
+  tickFormatter: props.xAxisTickFormat
+});
+const getYAxisProps = props => ({
+  axisLine: false,
+  fontSize: 12,
+  scale: props.yAxisScale,
+  tickLine: false,
+  tickFormatter: props.yAxisTickFormat
+});
+const getLegendProps = props => ({
+  content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
+});
+const getTooltipProps = (props = undefined) => ({
+  content: /*#__PURE__*/React__default.createElement(Tooltip$2, Object.assign({}, props)),
+  wrapperStyle: {
+    outline: 'none'
+  }
+});
+
+// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
+const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(Recharts.ResponsiveContainer, Object.assign({
+  className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
+}, props)));
+
+const Area = _ => null;
+const AreaChart = function AreaChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredArea, setHoveredArea] = React.useState(null);
+  const [activeAreas, setActiveAreas] = React.useState(() => {
+    const areas = {};
+    React__default.Children.forEach(children, child => {
+      areas[child.props.accessor] = true;
+    });
+    return areas;
+  });
+  const handleLegendClick = entry => {
+    setHoveredArea(null);
+    setActiveAreas({
+      ...activeAreas,
+      [entry.dataKey]: !activeAreas[entry.dataKey]
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.AreaChart, {
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: -25,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: entry => setHoveredArea(entry.dataKey),
+    onMouseLeave: () => setHoveredArea(null),
+    activeItems: activeAreas
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => {
+    var _child$props$color, _child$props$color2, _child$props$color3;
+    return /*#__PURE__*/React__default.createElement(Recharts.Area, {
+      activeDot: {
+        fill: getThemeColor((_child$props$color = child.props.color) !== null && _child$props$color !== void 0 ? _child$props$color : 'blue-300')
+      },
+      isAnimationActive: false,
+      dataKey: child.props.accessor,
+      dot: false,
+      fill: getThemeColor((_child$props$color2 = child.props.color) !== null && _child$props$color2 !== void 0 ? _child$props$color2 : 'grey-100'),
+      name: child.props.label,
+      strokeWidth: 2,
+      stroke: getThemeColor((_child$props$color3 = child.props.color) !== null && _child$props$color3 !== void 0 ? _child$props$color3 : 'grey-300'),
+      stackId: child.props.stackId,
+      hide: !activeAreas[child.props.accessor],
+      opacity: hoveredArea && child.props.accessor !== hoveredArea ? 0.3 : 1
+    });
+  })));
+};
+AreaChart.Area = Area;
+
+const Bar$1 = _ => null;
+const getXAxisVerticalProps = props => ({
+  ...getXAxisProps(props),
+  ...{
+    type: 'number',
+    dataKey: undefined
+  }
+});
+const getYAxisVerticalProps = props => ({
+  ...getYAxisProps(props),
+  ...{
+    dataKey: props.accessor,
+    type: 'category'
+  }
+});
+const BarChart = function BarChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    layout = 'horizontal',
+    ...props
+  } = externalProps;
+  const [activeIndex, setActiveIndex] = React__default.useState(undefined);
+  const [hoveredBar, setHoveredBar] = React__default.useState(null);
+  const [activeBars, setActiveBars] = React__default.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,
+  // so we can't set proper radiuses without some "magic"
+  const stacks = {};
+  React__default.Children.forEach(children, child => {
+    if (child.props.stackId) {
+      if (!stacks[child.props.stackId]) {
+        stacks[child.props.stackId] = [child.props.accessor];
+      } else {
+        stacks[child.props.stackId].push(child.props.accessor);
+      }
+    }
+  });
+  const handleLegendClick = entry => {
+    setHoveredBar(null);
+    setActiveBars({
+      ...activeBars,
+      [entry.dataKey]: !activeBars[entry.dataKey]
+    });
+  };
+  const handleLegendHover = (entry, index) => {
+    setHoveredBar(entry.dataKey);
+    setActiveIndex(index);
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.BarChart, {
+    layout: layout,
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: layout === 'vertical' ? 0 : -25,
+      bottom: 0
+    },
+    onMouseMove: chartState => setActiveIndex(chartState.activeTooltipIndex),
+    onMouseLeave: () => setActiveIndex(undefined)
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, layout === 'vertical' ? getXAxisVerticalProps(props) : getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, layout === 'vertical' ? getYAxisVerticalProps(props) : getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: handleLegendHover,
+    onMouseLeave: () => setHoveredBar(null),
+    activeItems: activeBars
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => (/*#__PURE__*/React__default.createElement(Recharts.Bar, {
+    isAnimationActive: false,
+    barSize: 16,
+    dataKey: child.props.accessor,
+    name: child.props.label,
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(undefined),
+    fill: getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`),
+    radius: getBarRadius(stacks, child.props.accessor, child.props.stackId, activeBars),
+    stackId: child.props.stackId,
+    style: child.props.stackId ? {
+      stroke: '#fff',
+      strokeWidth: '2px'
+    } : undefined,
+    hide: !activeBars[child.props.accessor]
+  }, data.map((_, index) => (/*#__PURE__*/React__default.createElement(Recharts.Cell, {
+    key: `cell-${index}`,
+    opacity: hoveredBar && child.props.accessor !== hoveredBar || activeIndex !== undefined && activeIndex !== index ? 0.3 : 1
+  }))))))));
+};
+BarChart.Bar = Bar$1;
+const getBarRadius = (stacks, accessor, stackId, activeBars) => {
+  if (stackId && Array.isArray(stacks[stackId])) {
+    const length = stacks[stackId].length - 1;
+    const index = stacks[stackId].indexOf(accessor);
+    if (Object.entries(activeBars).filter(item => item[0] !== accessor).every(item => !item[1])) {
+      return [3, 3, 0, 0];
+    }
+    if (activeBars[stacks[stackId][index + 1]] === false) {
+      return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];
+    }
+    if (index !== 0 && index !== length) {
+      return 0;
+    }
+    return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];
+  }
+  return 3;
+};
+
+const Legend$1 = ({
+  legendPosition,
+  hoveredItem,
+  selectedItem,
+  data,
+  onClick,
+  setHoveredItem,
+  formatter,
+  total,
+  visibleItems,
+  label
+}) => {
+  const isTotalLegendSelected = selectedItem.length === data.length;
+  const isTotalLegendHovered = hoveredItem.length === data.length;
+  const handleMouseLeave = () => setHoveredItem([]);
+  const renderLegendItem = (entry, index) => {
+    const isTotal = entry === null;
+    // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.
+    const itemData = entry === null ? {
+      id: 'total',
+      label,
+      value: total,
+      color: 'grey-300'
+    } : entry;
+    const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);
+    const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: isTotal ? 'total' : `${itemData.label}-${index}`,
+      className: cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {
+        'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),
+        'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right')
+      }),
+      onClick: () => onClick(isTotal ? data : itemData),
+      onMouseEnter: () => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id]),
+      onMouseLeave: handleMouseLeave
+    }, legendPosition === 'bottom' ? (/*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center gap-1"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: cn('ml-1 h-3 w-3 rounded-sm', {
+        'border-grey-300 border !bg-white': !visibleItems[itemData.id]
+      }),
+      style: {
+        backgroundColor: getThemeColor(itemData.color)
+      }
+    }, visibleItems[itemData.id] && isHovered && (/*#__PURE__*/React__default.createElement(Icon, {
+      name: "tick-bold",
+      className: "mb-2.5 !h-full !w-full text-white"
+    }))), /*#__PURE__*/React__default.createElement("div", null, itemData.label))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      className: "ml-1 mt-1 h-9 w-2 rounded-[1px]",
+      style: {
+        backgroundColor: getThemeColor(itemData.color)
+      }
+    }), /*#__PURE__*/React__default.createElement("div", null, itemData.label, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-1 flex w-full text-lg font-bold"
+    }, formatter ? formatter(itemData.value) : itemData.value)))));
+  };
+  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "transparent",
+    className: "text-grey-700"
+  }, moreButtonText));
+  const className = cn('flex-grow pl-4', {
+    'w-full': legendPosition === 'bottom'
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: cn('mb-0 ml-0 mt-4 flex justify-center space-y-1', legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row')
+  }, legendPosition === 'right' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderLegendItem(null), data.map(renderLegendItem))) : (/*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "w-full items-center py-1",
+    moreButton: moreButton
+  }, data.map(renderLegendItem)))));
+};
+
+const DONUT_WIDTH = 16;
+const HOVER_DONUT_WIDTH = 10;
+
+const CenteredLabel = ({
+  radius,
+  legendPosition,
+  label,
+  total,
+  formatter,
+  showLegend
+}) => {
+  const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
+  const diameter = radius * 2;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute mt-1 flex h-12 flex-col text-center",
+    style: {
+      top: `calc(${radius}px - (3rem / 2))`,
+      left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,
+      width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "w-full truncate text-lg font-bold"
+  }, formatter ? formatter(total) : total), label);
+};
+
+const ActiveShape = props => {
+  var _getThemeColor;
+  const {
+    cx,
+    cy,
+    id,
+    innerRadius,
+    onClick,
+    outerRadius = 0,
+    pieColors,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
+  return /*#__PURE__*/React__default.createElement("g", {
+    onClick: () => onClick(id),
+    className: cn({
+      'cursor-pointer': !!onClick
+    })
+  }, /*#__PURE__*/React__default.createElement(Recharts.Sector, {
+    cx: cx,
+    cy: cy,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    fill: fill
+  }), /*#__PURE__*/React__default.createElement(Recharts.Sector, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    innerRadius: outerRadius + 2,
+    outerRadius: outerRadius + HOVER_DONUT_WIDTH,
+    fill: id !== undefined ? (_getThemeColor = getThemeColor(pieColors[id])) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-500') : getThemeColor('blue-500'),
+    opacity: 0.3
+  }));
+};
+
+const Segment = _ => null;
+const DonutChart = function DonutChart({
+  children,
+  formatter,
+  onClick,
+  showLegend = false,
+  legendPosition = 'bottom',
+  label
+}) {
+  const ref = React__default.useRef(null);
+  const [radius, setRadius] = React__default.useState(0);
+  const [hoveredItem, setHoveredItem] = React__default.useState([]);
+  // used for right legends
+  const [selectedItem, setSelectedItem] = React__default.useState([]);
+  // used for bottom legends
+  const [visibleItems, setVisibleItems] = React__default.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.id] = true;
+    });
+    return keys;
+  });
+  React__default.useEffect(() => {
+    if (ref.current) {
+      var _ref$current$parentEl;
+      const rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
+      if (rect) {
+        const width = showLegend ? rect.width / 2 : rect.width;
+        const max = rect.height < width ? rect.height : width;
+        setRadius(max / 2);
+      }
+    }
+  }, [showLegend]);
+  const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut
+  const data = React__default.Children.map(children, child => ({
+    id: child.props.id,
+    color: child.props.color,
+    label: child.props.label,
+    value: child.props.value
+  }));
+  const displayedData = data.filter(child => visibleItems[child.id]);
+  const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);
+  const showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;
+  const handleLegendClick = entry => {
+    if (legendPosition === 'bottom' && !Array.isArray(entry)) {
+      setVisibleItems({
+        ...visibleItems,
+        [entry.id]: !visibleItems[entry.id]
+      });
+    } else {
+      const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];
+      // Using slice to avoid mutation of the react state 'selectedItem'
+      const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
+      if (onClick && !isCurrentSegmentActive) {
+        onClick(entry);
+      }
+      setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
+    }
+  };
+  const handlePieClick = React__default.useCallback(pieId => {
+    if (onClick && pieId !== undefined) {
+      const pieProps = displayedData.find(item => item.id === pieId);
+      onClick(pieProps);
+    }
+  }, [onClick, displayedData]);
+  const singlePieDonutChart = displayedData.length === 1;
+  const activeShapeColor = React__default.useMemo(() => {
+    const getSegmentColor = item => item.reduce((colors, itemId) => {
+      const visibleHoveredItem = displayedData.find(dataItem => dataItem.id === itemId);
+      if (visibleHoveredItem) {
+        colors[visibleHoveredItem.id] = visibleHoveredItem.color;
+      }
+      return colors;
+    }, {});
+    const hoveredSegmentColor = getSegmentColor(hoveredItem);
+    const selectedSegmentColor = getSegmentColor(selectedItem);
+    return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
+  }, [hoveredItem, selectedItem, legendPosition]);
+  if (ref.current && !radius) {
+    return null;
+  }
+  const getActiveIndex = () => {
+    if (hoveredItem.length > 0) {
+      return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));
+    }
+    return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));
+  };
+  const content = () => {
+    const elements = React__default.Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child) && visibleItems[child.props.id]);
+    return elements.length > 0 ? elements.map((child, index) => {
+      var _getThemeColor;
+      return /*#__PURE__*/React__default.createElement(Recharts.Cell, {
+        key: `cell-${index}`,
+        name: child.props.label,
+        fill: (_getThemeColor = getThemeColor(child.props.color)) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-300')
+      });
+    }) : (/*#__PURE__*/React__default.createElement(Recharts.Cell, {
+      key: "empty-chart",
+      name: '',
+      fill: getThemeColor('grey-200')
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn('relative h-full w-full', {
+      [`flex `]: showLegend,
+      'flex-col items-center': legendPosition === 'bottom'
+    }),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(CenteredLabel, {
+    radius: radius,
+    legendPosition: legendPosition,
+    label: label,
+    total: total,
+    formatter: formatter,
+    showLegend: showLegend
+  }), /*#__PURE__*/React__default.createElement(Recharts.PieChart, {
+    data: data,
+    height: diameter,
+    width: diameter,
+    style: {
+      transform: 'rotate(90deg) scale(-1,1)'
+    }
+  }, showTooltip ? (/*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps({
+    style: {
+      transform: 'rotate(90deg) scale(-1,1)'
+    },
+    singlePieDonutChart
+  })))) : null, /*#__PURE__*/React__default.createElement(Recharts.Pie, {
+    isAnimationActive: false,
+    activeIndex: getActiveIndex(),
+    activeShape: /*#__PURE__*/React__default.createElement(ActiveShape, {
+      pieColors: activeShapeColor,
+      onClick: handlePieClick
+    }),
+    data: displayedData.length > 0 ? displayedData : [],
+    dataKey: "value",
+    innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
+    onMouseEnter: segment => displayedData.length > 0 && setHoveredItem([segment.id]),
+    onMouseLeave: () => setHoveredItem([]),
+    outerRadius: radius - HOVER_DONUT_WIDTH,
+    paddingAngle: 2,
+    // Prevents the pie group element from being focusable
+    rootTabIndex: -1
+  }, content())), showLegend && (/*#__PURE__*/React__default.createElement(Legend$1, {
+    data: data,
+    visibleItems: visibleItems,
+    onClick: handleLegendClick,
+    total: total,
+    setHoveredItem: setHoveredItem,
+    label: label,
+    legendPosition: legendPosition,
+    hoveredItem: hoveredItem,
+    selectedItem: selectedItem,
+    formatter: formatter
+  })));
+};
+DonutChart.Segment = Segment;
+
+const Line$1 = _ => null;
+const LineChart = function LineChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredLine, setHoveredLine] = React.useState(null);
+  const [activeLines, setActiveLines] = React.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  const handleLegendClick = entry => {
+    setHoveredLine(null);
+    setActiveLines({
+      ...activeLines,
+      [entry.dataKey]: !activeLines[entry.dataKey]
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.LineChart, {
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: -25,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: entry => setHoveredLine(entry.dataKey),
+    onMouseLeave: () => setHoveredLine(null),
+    activeItems: activeLines
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => {
+    var _child$props$color, _child$props$color2;
+    return /*#__PURE__*/React__default.createElement(Recharts.Line, {
+      activeDot: {
+        fill: getThemeColor((_child$props$color = child.props.color) !== null && _child$props$color !== void 0 ? _child$props$color : 'blue-300')
+      },
+      dataKey: child.props.accessor,
+      isAnimationActive: false,
+      dot: false,
+      name: child.props.label,
+      stroke: getThemeColor((_child$props$color2 = child.props.color) !== null && _child$props$color2 !== void 0 ? _child$props$color2 : 'blue-300'),
+      strokeWidth: 2,
+      hide: !activeLines[child.props.accessor],
+      opacity: hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1
+    });
+  })));
+};
+LineChart.Line = Line$1;
+
 const Button$4 = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
   const {
     ...attributes
@@ -20700,15 +21956,13 @@ const AgreementDisplay = props => {
   }));
 };
 
-const Container$1 = ({
-  children
-}) => {
+const Container$1 = props => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
-  }), children);
+  }), props.children);
 };
 function AgreementSelector(props) {
   const {
@@ -21141,6 +22395,223 @@ Navigation2.Link = Link$3;
 Navigation2.Section = Section;
 Navigation2.Content = Content$a;
 
+const DATASET_SIZE_MULTIPLIER = 15;
+function useTableDataLoader2(fetchPage, fetchAll, options = {
+  pageSize: DEFAULT_PAGE_SIZE
+}) {
+  const loadPage = function (pageIndex, sorting, filters, hiddenColumns, search, reset = false) {
+    try {
+      // if a request is already pending for this page (and it's not a reset), skip it
+      if (_pendingPageRequests.current[pageIndex] && !reset) {
+        return Promise.resolve();
+      }
+      const hasChangedData = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || search !== _lastUsedSearch.current;
+      // if the page is already loaded and has actual rows, abort
+      if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {
+        return Promise.resolve();
+      }
+      // create an id to track the update
+      const requestId = uuid.v4();
+      // set the page as loading, so that subsequent requests don't retrigger it
+      _pendingPageRequests.current[pageIndex] = true;
+      const _temp2 = _catch(function () {
+        _lastRequestId.current = requestId;
+        return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search)).then(function (response) {
+          length.current = response.length;
+          // update state, here we do some "magic" to support "load in place"
+          setData(currentData => {
+            // if this request wasn't the last one, just return the current state to prevent weird updates
+            if (_lastRequestId.current !== requestId) {
+              return currentData;
+            }
+            const direction = getDirection(pageIndex, currentData.pages);
+            const nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);
+            // set values so we can track if they changed between loads
+            _lastUsedSorting.current = sorting;
+            _lastUsedFilters.current = filters;
+            _lastUsedSearch.current = search;
+            _lastUsedHiddenColumns.current = hiddenColumns;
+            // cache data as an object to prevent any duplicates for pages
+            let nextCache;
+            if (reset || hasChangedData || !direction) {
+              nextCache = nextPages.reduce((acc, p) => ({
+                ...acc,
+                [p]: Array(pageSize).fill(undefined)
+              }), {});
+            } else {
+              nextCache = {
+                ...currentData.cache
+              };
+            }
+            nextCache[pageIndex] = response.data;
+            // cleanup "unloaded" pages
+            if (direction === 'forward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[0]];
+            } else if (direction === 'backward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[currentData.pages.length - 1]];
+            }
+            // remap rows from the cached data - do it here and not in render to save some performance
+            const rows = Object.values(nextCache).reduce((acc, p) => acc.concat(p), []);
+            return {
+              cache: nextCache,
+              pages: nextPages,
+              rows: rows,
+              lastFetchedPage: pageIndex
+            };
+          });
+          // reset pending requests
+          delete _pendingPageRequests.current[pageIndex];
+        });
+      }, function () {});
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const {
+    pageSize
+  } = options;
+  const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;
+  // track the data length, we don't know it until the first request
+  const length = React__default.useRef(0);
+  // data will be filled after the first request
+  const [data, setData] = React__default.useState({
+    rows: [],
+    pages: [],
+    cache: {},
+    lastFetchedPage: undefined
+  });
+  // track which pages have been loaded to dedupe requests
+  const _pendingPageRequests = React__default.useRef({});
+  // it's possible to spam updates, e.g. sort, so we don't set state if the last request wasn't the current oen
+  const _lastRequestId = React__default.useRef();
+  // store last used properties
+  const _lastUsedSorting = React__default.useRef([]);
+  const _lastUsedFilters = React__default.useRef([]);
+  const _lastUsedSearch = React__default.useRef();
+  const _lastUsedHiddenColumns = React__default.useRef([]);
+  const loadAll = function (sorting, filters, hiddenColumns, search) {
+    try {
+      // set values so we can track if they changed between loads
+      _lastUsedSorting.current = sorting;
+      _lastUsedFilters.current = filters;
+      _lastUsedSearch.current = search;
+      _lastUsedHiddenColumns.current = hiddenColumns;
+      const _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(fetchAll(sorting, filters, hiddenColumns, search)).then(function (response) {
+            length.current = response.length;
+            const pages = [];
+            const cache = {};
+            const pageCount = Math.ceil(response.length / pageSize);
+            Array.from(Array(pageCount).keys()).forEach(index => {
+              pages.push(index);
+              const startIndex = index * pageSize;
+              cache[index] = response.data.slice(startIndex, startIndex + pageSize);
+            });
+            setData({
+              cache,
+              pages,
+              rows: response.data,
+              lastFetchedPage: undefined
+            });
+          });
+        }, function () {});
+      }, function (_wasThrown, _result) {
+        // reset pending requests
+        _pendingPageRequests.current = {};
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const invalidate = function () {
+    try {
+      // reset stuff
+      _pendingPageRequests.current = {};
+      // load the current page again
+      return loadPage(getCurrentPage(data.pages), _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSort = function (sorting) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(getCurrentPage(data.pages), sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleFilter = function (filters, hiddenColumns) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSearch = function (search, hiddenColumns) {
+    try {
+      // reset before loading the current page
+      _pendingPageRequests.current = {};
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search, true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return [{
+    data: data.rows,
+    pages: data.pages,
+    length: length.current,
+    loadAll,
+    loadPage,
+    onChangeFilter: handleFilter,
+    onChangeSearch: handleSearch,
+    onChangeSort: handleSort,
+    pageSize,
+    _experimentalDataLoader2: true
+  }, invalidate];
+}
+function getCurrentPage(currentPages) {
+  if (currentPages.length <= 2) {
+    return currentPages[0];
+  }
+  // for even page lengths we can't know which is the current visible page - it could even be both
+  // so we load one of them and rely on the "load next/previous page" functionality in row
+  const middle = Math.floor(currentPages.length / 2);
+  return currentPages[middle];
+}
+function getDirection(pageIndex, currentPages) {
+  if (currentPages.length) {
+    if (pageIndex === currentPages[currentPages.length - 1] + 1) {
+      return 'forward';
+    } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
+      return 'backward';
+    }
+  }
+  return undefined;
+}
+function getPages(pageIndex, lastUsedPageIndex, currentPages, direction) {
+  if (currentPages.length && (pageIndex === lastUsedPageIndex || currentPages.includes(pageIndex))) {
+    return currentPages;
+  }
+  if (direction === 'forward') {
+    const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(1) : currentPages;
+    return nextPages.concat(pageIndex);
+  }
+  if (direction === 'backward') {
+    const nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;
+    return [pageIndex].concat(nextPages);
+  }
+  return [pageIndex];
+}
+
 const useBoundaryOverflowDetection = (ref, dependencies = []) => {
   const [boundaryIndex, setBoundaryIndex] = React__default.useState();
   const dimensions = useBoundingClientRectListener(ref, dependencies);
@@ -21174,10 +22645,12 @@ const useOnClickOutside = (ref, callback) => {
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AreaChart = AreaChart;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.BadgeIcon = BadgeIcon;
 exports.Banner = Banner;
+exports.BarChart = BarChart;
 exports.Base = Base;
 exports.Button = Button$1;
 exports.Calendar = Calendar$1;
@@ -21188,6 +22661,7 @@ exports.Combobox = Combobox;
 exports.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
+exports.DonutChart = DonutChart;
 exports.Drawer = Drawer;
 exports.Field = Field;
 exports.Form = Form;
@@ -21199,6 +22673,7 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Layout = Layout$1;
+exports.LineChart = LineChart;
 exports.List = List$1;
 exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;
@@ -21276,6 +22751,7 @@ exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;
 exports.useRadioGroup = useRadioGroup;
 exports.useTableDataLoader = useTableDataLoader;
+exports.useTableDataLoader2 = useTableDataLoader2;
 exports.useTableRowCreation = useTableRowCreation;
 exports.useToast = useToast;
 //# sourceMappingURL=taco.cjs.development.js.map