@economic/taco 2.41.4 → 2.42.1-alpha.0

package/dist/taco.cjs.development.js

@@ -3911,12 +3911,38 @@ const getDialogSizeClassnames = size => {
 const getDialogPositionClassnames = () => 'mt-16 mx-auto';
 const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
 
+const iconPropsByVariant = variant => {
+  switch (variant) {
+    case 'information':
+      return {
+        color: 'blue',
+        icon: 'info'
+      };
+    case 'error':
+      return {
+        color: 'red',
+        icon: 'close'
+      };
+    case 'warning':
+      return {
+        color: 'yellow',
+        icon: 'warning'
+      };
+    default:
+      return undefined;
+  }
+};
 const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref) {
-  const className = cn('text-center', props.className);
+  const {
+    props: parentProps
+  } = useCurrentAlertDialog();
+  const iconProps = iconPropsByVariant(parentProps.variant);
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Title, Object.assign({}, props, {
-    className: className,
+    className: cn('flex items-center', props.className),
     ref: ref
-  }));
+  }), iconProps ? /*#__PURE__*/React.createElement(BadgeIcon, Object.assign({}, iconProps, {
+    className: "mr-2"
+  })) : undefined, props.children);
 });
 const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
   const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
@@ -4011,25 +4037,33 @@ 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 = {
-      defaultValue: defaultId || undefined
+    valueProps = type === 'single' ? {
+      type: 'single',
+      defaultValue: defaultId
+    } : {
+      type: 'multiple',
+      defaultValue: defaultId
     };
   } else {
-    valueProps = {
+    valueProps = type === 'single' ? {
+      type: 'single',
+      onValueChange: onChange,
+      value: id || undefined
+    } : {
+      type: 'multiple',
       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,
-    type: type
+    className: className
   })));
 };
 Accordion.Item = Item;
@@ -5060,14 +5094,16 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   const {
     title,
     menu,
-    children
+    children,
+    className,
+    ...otherProps
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
+  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
+    className: cardClassName,
     "data-taco": "card",
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "mx-4 mb-2 mt-4 flex justify-between"
   }, title && (/*#__PURE__*/React.createElement(Truncate, {
     tooltip: title
@@ -5708,7 +5744,13 @@ 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 {
-      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
+      const childLowerCase = child.toString().toLowerCase();
+      const valueLowerCase = String(value).toLowerCase();
+      if (strategy === 'startsWith') {
+        return childLowerCase.startsWith(valueLowerCase);
+      } else {
+        return childLowerCase.includes(valueLowerCase);
+      }
     }
   } catch {
     return false;
@@ -6294,7 +6336,8 @@ const UnstyledArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props,
       transform: 'rotateZ(180deg)'
     }
   }), /*#__PURE__*/React.createElement("path", {
-    className: "text-grey-300 fill-current group-focus:text-blue-300",
+    // rgba(89, 85, 98, 0.35) is the primary color of the yt-shadow, giving the arrow a shadow-like appearance
+    className: "text-[rgba(89, 85, 98, 0.35)] fill-current",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
   }), /*#__PURE__*/React.createElement("path", {
     className: "fill-current",
@@ -6645,7 +6688,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   }), /*#__PURE__*/React.createElement("div", {
     className: containerClassName,
     "data-taco": "dialog"
-  }, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
     role: "button",
     draggable: true,
     "aria-grabbed": dragging,
@@ -6659,7 +6702,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     "aria-label": texts.dialog.close,
     className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
-  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
+  }))) : null)), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -6852,12 +6895,12 @@ const Bar = props => {
     className: className
   }));
 };
-const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
+const Thumb = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, {
   className: "flex-[1] rounded bg-black opacity-50"
-}));
-const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
+});
+const Corner = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, {
   className: "bg-grey-500"
-}));
+});
 const ScrollArea = props => {
   const {
     children,
@@ -9746,136 +9789,6 @@ const Provider = props => {
 })(exports.FontSizes || (exports.FontSizes = {}));
 const fixedForwardRef = React__default.forwardRef;
 
-function getSortingFn(dataType, customFnOrBuiltIn) {
-  if (typeof customFnOrBuiltIn === 'function') {
-    return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
-  }
-  // if a built in is being used, just return that
-  if (customFnOrBuiltIn) {
-    return customFnOrBuiltIn;
-  }
-  // some times we alias based on the type
-  if (dataType && dataType !== 'boolean' && dataType !== 'number') {
-    return dataType;
-  }
-  // otherwise fall back to auto
-  return 'auto';
-}
-
-function isInternalColumn(id) {
-  return id === null || id === void 0 ? void 0 : id.startsWith('__');
-}
-// column widths
-const getCellMinWidth = (fontSize = 'medium') => {
-  switch (fontSize) {
-    case exports.FontSizes.small:
-      return 57;
-    case exports.FontSizes.large:
-      return 83;
-    default:
-    case exports.FontSizes.medium:
-      return 72;
-  }
-};
-// highlighting
-function isCellHighlighted(query, value, dataType) {
-  if (value === undefined || value === null) {
-    return false;
-  }
-  return String(getCellValueAsString(value, dataType)).toLocaleLowerCase().includes(query.toLocaleLowerCase());
-}
-function getCellValueAsString(value, dataType) {
-  if (value === undefined || value === null) {
-    return '';
-  } else if (dateFns.isDate(value)) {
-    var _format;
-    return (_format = format(value)) !== null && _format !== void 0 ? _format : '';
-  } else if (dataType === 'datetime' && typeof value === 'string') {
-    var _format2;
-    return (_format2 = format(parseFromISOString(value))) !== null && _format2 !== void 0 ? _format2 : '';
-  }
-  return String(value);
-}
-function orderColumn(column, {
-  orderingDisabled,
-  orderingEnabled
-}) {
-  const groupedColumn = column;
-  if (Array.isArray(groupedColumn.columns) && groupedColumn.columns.length > 0) {
-    groupedColumn.columns.forEach(subcolumn => orderColumn(subcolumn, {
-      orderingDisabled,
-      orderingEnabled
-    }));
-  } else {
-    var _column$meta;
-    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
-      orderingEnabled.push(column.id);
-    } else {
-      orderingDisabled.push(column.id);
-    }
-  }
-}
-// ordering
-function ensureOrdering(columns, settingsOrder, pinnedOrder = [], internalColumnsPinnedToTheRight = ['__actions']) {
-  // internal columns come with a defined order
-  const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
-  // columns with ordering disabled should be moved to the front
-  const orderingDisabled = [];
-  let orderingEnabled = [];
-  let orderedColumns = columns;
-  // if settings is defined, make sure the columns that are actual children are sorted by it
-  if (Array.isArray(settingsOrder)) {
-    orderedColumns = columns.slice().sort(
-    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
-    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
-  }
-  orderedColumns.forEach(column => {
-    if (isInternalColumn(column.id)) {
-      return;
-    }
-    orderColumn(column, {
-      orderingDisabled,
-      orderingEnabled
-    });
-  });
-  if (settingsOrder && settingsOrder.length > 0) {
-    const columnsAbsentInSettingsOrder = [];
-    orderingEnabled = orderingEnabled.reduce((acc, column) => {
-      const index = settingsOrder.indexOf(column);
-      if (index > -1) {
-        acc[index] = column;
-      } else {
-        columnsAbsentInSettingsOrder.push(column);
-      }
-      return acc;
-    }, []).filter(column => !!column)
-    // Append absent columns at the end
-    .concat(columnsAbsentInSettingsOrder);
-  }
-  // if pinned columns are defined, make sure they are sorted first, this ensures state matches the freezing "upto" behaviour
-  if (Array.isArray(pinnedOrder)) {
-    orderingEnabled.sort(
-    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
-    (a, b) => (pinnedOrder.indexOf(a) >>> 0) - (pinnedOrder.indexOf(b) >>> 0));
-  }
-  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
-  // actions should always be last, enforce that
-  internalColumnsPinnedToTheRight.forEach(id => {
-    if (columns.findIndex(column => column.id === id) > -1) {
-      order.push(id);
-    }
-  });
-  return order;
-}
-// freezing - we use the react-table pinning state, but that requires some mapping between them
-function unfreezeAllExternalColumns(leftPinnedState) {
-  var _leftPinnedState$filt;
-  return (_leftPinnedState$filt = leftPinnedState === null || leftPinnedState === void 0 ? void 0 : leftPinnedState.filter(id => isInternalColumn(id) && id !== '__actions')) !== null && _leftPinnedState$filt !== void 0 ? _leftPinnedState$filt : [];
-}
-function freezeUptoExternalColumn(index, columns) {
-  return columns.slice(0, index + 1);
-}
-
 // filtering
 (function (TableFilterComparator) {
   TableFilterComparator[TableFilterComparator["Contains"] = 0] = "Contains";
@@ -9899,6 +9812,74 @@ function freezeUptoExternalColumn(index, columns) {
   TableServerLoadAllState[TableServerLoadAllState["Completed"] = 2] = "Completed";
 })(exports.TableServerLoadAllState || (exports.TableServerLoadAllState = {}));
 
+const dataTypes = {
+  auto: {
+    sortingFn: 'auto',
+    filterComparators: [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  // base
+  text: {
+    sortingFn: 'alphanumeric',
+    filterComparators: [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  number: {
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty]
+  },
+  datetime: {
+    sortingFn: 'datetime',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty],
+    getDisplayValue: (value, options) => {
+      if (value === undefined) {
+        return '';
+      }
+      if (dateFns.isDate(value)) {
+        var _format, _options$localization;
+        return (_format = format(value, options === null || options === void 0 ? void 0 : (_options$localization = options.localization) === null || _options$localization === void 0 ? void 0 : _options$localization.formatting.date)) !== null && _format !== void 0 ? _format : '';
+      } else if (typeof value === 'string') {
+        var _format2, _options$localization2;
+        return (_format2 = format(parseFromISOString(value), options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.formatting.date)) !== null && _format2 !== void 0 ? _format2 : '';
+      }
+      return String(value);
+    }
+  },
+  boolean: {
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo]
+  },
+  // advanced
+  amount: {
+    align: 'right',
+    sortingFn: 'basic',
+    filterComparators: [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThanOrEqualTo, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty],
+    getDisplayValue: (value, options) => {
+      var _options$localization3;
+      if (value === undefined) {
+        return '';
+      }
+      return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization3 = options.localization) === null || _options$localization3 === void 0 ? void 0 : _options$localization3.locale, {
+        minimumFractionDigits: 2
+      }).format(Number(value));
+    }
+  }
+};
+function getDataTypeProperties(dataType) {
+  var _dataTypes;
+  return (_dataTypes = dataTypes[dataType !== null && dataType !== void 0 ? dataType : 'text']) !== null && _dataTypes !== void 0 ? _dataTypes : dataTypes.text;
+}
+
+function getSortingFn(dataType, customFnOrBuiltIn) {
+  // custom functions should override any that come from dataType
+  if (typeof customFnOrBuiltIn === 'function') {
+    return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
+  }
+  // if a built in is being used, just return that
+  if (customFnOrBuiltIn) {
+    return customFnOrBuiltIn;
+  }
+  return getDataTypeProperties(dataType).sortingFn;
+}
+
 const toLowerCase = value => String(value !== null && value !== void 0 ? value : '').toLocaleLowerCase();
 const isWeakContains = (left, right) => toLowerCase(left).includes(toLowerCase(right));
 const isWeakEqual$1 = (left, right) => toLowerCase(left) === toLowerCase(right);
@@ -10009,19 +9990,189 @@ function columnFilterFn(value, filter) {
     return true;
   }
 }
-function globalFilterFn(row, columnId, searchQuery) {
+
+function isMatched(searchQuery, cellValue, dataType, localization) {
+  const cellValueAsString = String(cellValue !== null && cellValue !== void 0 ? cellValue : '');
+  if (cellValueAsString !== undefined && isWeakContains(cellValueAsString, searchQuery)) {
+    return true;
+  } else {
+    const dataTypeProperties = getDataTypeProperties(dataType);
+    if (dataTypeProperties.getDisplayValue) {
+      const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
+        localization
+      });
+      if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function globalFilterFn(row, columnId, searchQuery, localization) {
   try {
     if (row.original) {
       var _row$_getAllCellsByCo, _row$_getAllCellsByCo2;
+      const cellValue = row.original[columnId];
       const dataType = (_row$_getAllCellsByCo = row._getAllCellsByColumnId()[columnId]) === null || _row$_getAllCellsByCo === void 0 ? void 0 : (_row$_getAllCellsByCo2 = _row$_getAllCellsByCo.column.columnDef.meta) === null || _row$_getAllCellsByCo2 === void 0 ? void 0 : _row$_getAllCellsByCo2.dataType;
-      const cellValue = getCellValueAsString(row.original[columnId], dataType);
-      return isWeakContains(cellValue, searchQuery);
+      return isMatched(searchQuery, cellValue, dataType, localization);
     }
   } catch {
     // we don't care, just fail silently and return no results
   }
   return false;
 }
+function resetHighlightedColumnIndexes(searchQuery, table, localization) {
+  const tableMeta = table.options.meta;
+  let firstRowIndex;
+  if (searchQuery) {
+    const indexes = [];
+    const columns = table.getVisibleLeafColumns();
+    const rowGrouping = table.getState().grouping;
+    table.getRowModel().rows.forEach((row, rowIndex) => {
+      columns.forEach((column, columnIndex) => {
+        try {
+          let allowSearch = true;
+          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
+            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
+            if (row.getIsGrouped()) {
+              allowSearch = column.getIsGrouped();
+            }
+            // otherwise for other rows, don't search the grouped column - because it isn't visible
+            else if (rowGrouping.includes(column.id)) {
+              allowSearch = false;
+            }
+          }
+          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
+            var _column$columnDef$met;
+            const cellValue = get(row.original, column.id);
+            const dataType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType;
+            if (isMatched(searchQuery, cellValue, dataType, localization)) {
+              indexes.push([rowIndex, columnIndex]);
+            }
+          }
+        } catch (e) {
+          //
+        }
+      });
+    });
+    tableMeta.search.setHighlightedColumnIndexes(indexes);
+    if (indexes.length) {
+      firstRowIndex = indexes[0][0];
+      tableMeta.search.setCurrentHighlightColumnIndex(0);
+    } else {
+      tableMeta.search.setCurrentHighlightColumnIndex(undefined);
+    }
+  } else {
+    tableMeta.search.setHighlightedColumnIndexes([]);
+    tableMeta.search.setCurrentHighlightColumnIndex(undefined);
+  }
+  if (firstRowIndex !== undefined) {
+    tableMeta.rowActive.setRowActiveIndex(firstRowIndex);
+  }
+  return firstRowIndex;
+}
+
+function isInternalColumn(id) {
+  return id === null || id === void 0 ? void 0 : id.startsWith('__');
+}
+// column widths
+const getCellMinWidth = (fontSize = 'medium') => {
+  switch (fontSize) {
+    case exports.FontSizes.small:
+      return 57;
+    case exports.FontSizes.large:
+      return 83;
+    default:
+    case exports.FontSizes.medium:
+      return 72;
+  }
+};
+// highlighting
+function isCellHighlighted(query, value, dataType, localization) {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  return isMatched(query, value, dataType, localization);
+}
+function orderColumn(column, {
+  orderingDisabled,
+  orderingEnabled
+}) {
+  const groupedColumn = column;
+  if (Array.isArray(groupedColumn.columns) && groupedColumn.columns.length > 0) {
+    groupedColumn.columns.forEach(subcolumn => orderColumn(subcolumn, {
+      orderingDisabled,
+      orderingEnabled
+    }));
+  } else {
+    var _column$meta;
+    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
+      orderingEnabled.push(column.id);
+    } else {
+      orderingDisabled.push(column.id);
+    }
+  }
+}
+// ordering
+function ensureOrdering(columns, settingsOrder, pinnedOrder = [], internalColumnsPinnedToTheRight = ['__actions']) {
+  // internal columns come with a defined order
+  const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
+  // columns with ordering disabled should be moved to the front
+  const orderingDisabled = [];
+  let orderingEnabled = [];
+  let orderedColumns = columns;
+  // if settings is defined, make sure the columns that are actual children are sorted by it
+  if (Array.isArray(settingsOrder)) {
+    orderedColumns = columns.slice().sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
+  }
+  orderedColumns.forEach(column => {
+    if (isInternalColumn(column.id)) {
+      return;
+    }
+    orderColumn(column, {
+      orderingDisabled,
+      orderingEnabled
+    });
+  });
+  if (settingsOrder && settingsOrder.length > 0) {
+    const columnsAbsentInSettingsOrder = [];
+    orderingEnabled = orderingEnabled.reduce((acc, column) => {
+      const index = settingsOrder.indexOf(column);
+      if (index > -1) {
+        acc[index] = column;
+      } else {
+        columnsAbsentInSettingsOrder.push(column);
+      }
+      return acc;
+    }, []).filter(column => !!column)
+    // Append absent columns at the end
+    .concat(columnsAbsentInSettingsOrder);
+  }
+  // if pinned columns are defined, make sure they are sorted first, this ensures state matches the freezing "upto" behaviour
+  if (Array.isArray(pinnedOrder)) {
+    orderingEnabled.sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (pinnedOrder.indexOf(a) >>> 0) - (pinnedOrder.indexOf(b) >>> 0));
+  }
+  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
+  // actions should always be last, enforce that
+  internalColumnsPinnedToTheRight.forEach(id => {
+    if (columns.findIndex(column => column.id === id) > -1) {
+      order.push(id);
+    }
+  });
+  return order;
+}
+// freezing - we use the react-table pinning state, but that requires some mapping between them
+function unfreezeAllExternalColumns(leftPinnedState) {
+  var _leftPinnedState$filt;
+  return (_leftPinnedState$filt = leftPinnedState === null || leftPinnedState === void 0 ? void 0 : leftPinnedState.filter(id => isInternalColumn(id) && id !== '__actions')) !== null && _leftPinnedState$filt !== void 0 ? _leftPinnedState$filt : [];
+}
+function freezeUptoExternalColumn(index, columns) {
+  return columns.slice(0, index + 1);
+}
 
 function getSettings(table) {
   const meta = table.options.meta;
@@ -10054,7 +10205,7 @@ function ignoreInternalColumns(data) {
 }
 
 // mapping children to react-table columns
-function processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId) {
+function processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization) {
   const columnHelper = reactTable.createColumnHelper();
   if (/*#__PURE__*/React__default.isValidElement(child) && child.props.children) {
     const {
@@ -10065,11 +10216,12 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
     columns.push(columnHelper.group({
       id,
       header,
-      columns: React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId), []),
+      columns: React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization), []),
       // we don't want to let column groups be grouped/aggregrated
       enableGrouping: false
     }));
   } else if (/*#__PURE__*/React__default.isValidElement(child) && (child.props.accessor || child.props.id)) {
+    var _meta$align;
     const {
       id: untypedId,
       accessor: accessorKey = untypedId,
@@ -10098,6 +10250,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       ...meta
     } = child.props;
     const id = untypedId;
+    const dataTypeProperties = getDataTypeProperties(child.props.dataType);
     if (defaultHidden && enableHiding) {
       defaultVisibility[id] = false;
     }
@@ -10130,6 +10283,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       // meta
       meta: {
         ...meta,
+        align: (_meta$align = meta.align) !== null && _meta$align !== void 0 ? _meta$align : dataTypeProperties.align,
         defaultWidth,
         enableOrdering: isGrouped ? false : enableOrdering,
         enablePrinting,
@@ -10139,9 +10293,18 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
         renderer
       }
     };
-    // renderers
+    // renderers - use defined renderers first, then fall back to data type renderers (if there is one)
     if (typeof renderer === 'function') {
       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, {
+          localization
+        })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
+      };
+      column.cell = info => dataTypeRenderer(info.getValue());
+      column.meta.renderer = dataTypeRenderer;
     }
     if (typeof footer === 'function') {
       column.footer = info => footer(info.table.getRowModel().rows.flatMap(row => row.original !== undefined ? row.original : []));
@@ -10195,7 +10358,7 @@ function createInternalColumn(id, column, defaultSizing) {
     }
   };
 }
-function mapTableChildrenToColumns(props, settings, options, internalColumns) {
+function mapTableChildrenToColumns(props, settings, options, internalColumns, localization) {
   const {
     children,
     defaultRowGroupColumnId
@@ -10203,7 +10366,7 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
   const defaultSizing = {};
   const defaultSorting = [];
   const defaultVisibility = {};
-  const columns = React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId), []);
+  const columns = React__default.Children.toArray(children).reduce((columns, child) => processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId, localization), []);
   if (internalColumns) {
     var _props$rowActions;
     if (options.enableRowExpansion && props.rowExpansionRenderer && internalColumns.rowExpansion) {
@@ -10230,7 +10393,7 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
     defaultVisibility
   };
 }
-function configureReactTableOptions(options, props) {
+function configureReactTableOptions(options, props, localization) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
@@ -10277,7 +10440,7 @@ function configureReactTableOptions(options, props) {
   if (options.enableSearch) {
     // always set these because enableGlobalFilter can be toggled on and off by the user
     tableOptions.getFilteredRowModel = reactTable.getFilteredRowModel();
-    tableOptions.globalFilterFn = globalFilterFn;
+    tableOptions.globalFilterFn = (row, columnId, searchQuery) => globalFilterFn(row, columnId, searchQuery, localization);
     tableOptions.getColumnCanGlobalFilter = column => {
       var _column$columnDef$met, _column$columnDef$met2;
       return (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
@@ -11394,64 +11557,14 @@ function useTableRowSelectionListener(table, onRowSelect) {
   }, [!!table.options.enableRowSelection, !!table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
 }
 
-function resetHighlightedColumnIndexes(value, table) {
-  const tableMeta = table.options.meta;
-  let firstRowIndex;
-  if (value) {
-    const indexes = [];
-    const columns = table.getVisibleLeafColumns();
-    const rowGrouping = table.getState().grouping;
-    table.getRowModel().rows.forEach((row, rowIndex) => {
-      columns.forEach((column, columnIndex) => {
-        try {
-          let allowSearch = true;
-          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
-            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
-            if (row.getIsGrouped()) {
-              allowSearch = column.getIsGrouped();
-            }
-            // otherwise for other rows, don't search the grouped column - because it isn't visible
-            else if (rowGrouping.includes(column.id)) {
-              allowSearch = false;
-            }
-          }
-          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
-            var _column$columnDef$met;
-            const cellValue = getCellValueAsString(get(row.original, column.id), (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
-            // indexes don't map to sorted data
-            if (cellValue !== undefined && isWeakContains(cellValue, value)) {
-              indexes.push([rowIndex, columnIndex]);
-            }
-          }
-        } catch (e) {
-          //
-        }
-      });
-    });
-    tableMeta.search.setHighlightedColumnIndexes(indexes);
-    if (indexes.length) {
-      firstRowIndex = indexes[0][0];
-      tableMeta.search.setCurrentHighlightColumnIndex(0);
-    } else {
-      tableMeta.search.setCurrentHighlightColumnIndex(undefined);
-    }
-  } else {
-    tableMeta.search.setHighlightedColumnIndexes([]);
-    tableMeta.search.setCurrentHighlightColumnIndex(undefined);
-  }
-  if (firstRowIndex !== undefined) {
-    tableMeta.rowActive.setRowActiveIndex(firstRowIndex);
-  }
-  return firstRowIndex;
-}
-
 function useTableSearchListener(table, onChangeSearch) {
   const meta = table.options.meta;
+  const localization = useLocalization();
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
       const query = table.getState().globalFilter;
-      resetHighlightedColumnIndexes(query, table);
+      resetHighlightedColumnIndexes(query, table, localization);
       if (typeof onChangeSearch === 'function') {
         onChangeSearch(query);
       }
@@ -11571,6 +11684,7 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
 const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, meta, internalColumns) {
   var _props$data, _props$length, _meta$editing, _instance$options$met;
+  const localization = useLocalization();
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
@@ -11603,7 +11717,7 @@ function useTableManager(props, meta, internalColumns) {
   const {
     columns,
     ...defaultState
-  } = mapTableChildrenToColumns(props, settings, options, internalColumns);
+  } = mapTableChildrenToColumns(props, settings, options, internalColumns, localization);
   // configure initial table state
   const initialState = useReactTableInitialState(props, columns, settings, defaultState);
   // create a react-table instance
@@ -11614,7 +11728,7 @@ function useTableManager(props, meta, internalColumns) {
     initialState,
     getCoreRowModel: reactTable.getCoreRowModel(),
     // configure react-table built-in features
-    ...configureReactTableOptions(options, props),
+    ...configureReactTableOptions(options, props, localization),
     // settings that can be toggled by the user, and therefore require our own state
     enableGlobalFilter: search.enableGlobalFilter,
     // custom context
@@ -12568,6 +12682,7 @@ function getCellAttributes(cell, index, isHighlighted) {
   };
 }
 function useSearchHighlighting(cell, cellIndex, ref) {
+  const localization = useLocalization();
   const {
     rowIndex
   } = React__default.useContext(RowContext);
@@ -12580,7 +12695,7 @@ function useSearchHighlighting(cell, cellIndex, ref) {
     }
     let isHighlighted = false;
     if (context.table.getState().globalFilter) {
-      isHighlighted = isCellHighlighted(context.table.getState().globalFilter, cell.getValue(), columnMeta.dataType);
+      isHighlighted = isCellHighlighted(context.table.getState().globalFilter, cell.getValue(), columnMeta.dataType, localization);
     }
     if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {
       return undefined;
@@ -13118,11 +13233,11 @@ function HeaderMenu(props) {
                 return Promise.reject(e);
               }
             };
-            popoverElement = props => /*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
+            popoverElement = props => (/*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
               open: true,
               onChange: handleClosePopover,
               onGoto: goto
-            }));
+            })));
           }
         }
     }
@@ -13465,10 +13580,10 @@ const FOCUS_MANAGER_OPTIONS_ARROW_KEYS = {
 };
 function useAugmentedFocusManager() {
   const focusManager = focus.useFocusManager();
-  const focusPrevious = (arrowNavigation = false) => focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusNext = (arrowNavigation = false) => focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
-  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusPrevious = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusNext = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusFirst = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusLast = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
   return {
     focusPrevious,
     focusNext,
@@ -13985,7 +14100,7 @@ function Container(externalProps) {
     if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id === overList.id) {
       return;
     }
-    move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
+    move === null || move === void 0 ? void 0 : move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
   }
   function handleDragEnd(event) {
     const {
@@ -14804,7 +14919,6 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
-    onClick,
     onKeyDown
   } = props;
   const {
@@ -14813,7 +14927,6 @@ const Colours = props => {
   return /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Root, {
     "aria-label": texts.select2.chooseColor,
     className: "grid grid-cols-4 gap-2 focus:outline-none",
-    onClick: onClick,
     onKeyDown: onKeyDown,
     onValueChange: color => onChangeColor(color),
     value: color
@@ -15411,19 +15524,20 @@ const filterOption = (child, searchQuery) => {
 };
 
 const getNextColor = options => {
-  let occurrences = {};
-  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
-    occurrences = {
-      ...occurrences,
-      [color]: 0
-    };
-  });
-  options.reduce((occurrences, option) => {
+  const occurrences = AVAILABLE_COLORS.reduce((prev, color) => {
+    if (color !== 'transparent') {
+      return {
+        ...prev,
+        [color]: 0
+      };
+    }
+    return prev;
+  }, {});
+  options.forEach(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];
@@ -16076,16 +16190,13 @@ function guessComparatorsBasedOnControl(column) {
       }
     }
   }
-  if (columnMeta.dataType === 'number') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-  }
-  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
+  if (columnMeta.control === 'datepicker') {
+    return getDataTypeProperties('datetime').filterComparators;
   }
   if (columnMeta.control === 'switch') {
-    return [exports.TableFilterComparator.IsEqualTo];
+    return getDataTypeProperties('boolean').filterComparators;
   }
-  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+  return getDataTypeProperties(columnMeta.dataType).filterComparators;
 }
 
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -16264,6 +16375,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 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
     if (controlRenderer === 'switch' && value === undefined) {
@@ -16274,7 +16386,8 @@ function Control(props) {
     return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
       setValue: value => onChange(value),
-      value
+      value,
+      ref
     }), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
@@ -18242,11 +18355,11 @@ function useTableEditingListener(table, tableRef) {
   }, [saveChanges, tableMeta.editing.isEditing]);
 }
 
-function willRowMove(cell, change, rowIndex) {
+function willRowMove(cell, change, rowIndex, localization) {
   const {
     table
   } = cell.getContext();
-  if (willRowMoveAfterSearch(cell, change, table)) {
+  if (willRowMoveAfterSearch(cell, change, table, localization)) {
     return 'search';
   } else if (willRowMoveAfterFilter(cell, change)) {
     return 'filter';
@@ -18255,7 +18368,7 @@ function willRowMove(cell, change, rowIndex) {
   }
   return undefined;
 }
-function willRowMoveAfterSearch(cell, change, table) {
+function willRowMoveAfterSearch(cell, change, table, localization) {
   const searchQuery = table.getState().globalFilter;
   if (!table.options.enableGlobalFilter || !searchQuery) {
     return false;
@@ -18267,7 +18380,7 @@ function willRowMoveAfterSearch(cell, change, table) {
       [cell.column.id]: change
     }
   };
-  return !globalFilterFn(rowWithChange, cell.column.id, searchQuery);
+  return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);
 }
 function willRowMoveAfterFilter(cell, change) {
   if (!cell.column.getIsFiltered()) {
@@ -18300,7 +18413,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   if (rowIndex < rows.length - 1) {
     miniSortRows.push(rows[rowIndex + 1]);
   }
-  const resortedRows = [...miniSortRows].sort((rowA, rowB) => {
+  const sortRows = (rowA, rowB) => {
     const sortFn = cell.column.getSortingFn();
     const sortUndefined = cell.column.columnDef.sortUndefined;
     if (!table.options.manualSorting && sortUndefined) {
@@ -18313,7 +18426,8 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       }
     }
     return sortFn(rowA, rowB, cell.column.id);
-  });
+  };
+  const resortedRows = [...miniSortRows].sort(sortRows);
   if (cell.column.getIsSorted() === 'desc') {
     resortedRows.reverse();
   }
@@ -18499,7 +18613,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
         [cell.column.id]: change
       };
       setPendingChanges(currentChanges => {
-        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes);
+        const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes, localization);
         pendingChangesUpdater.syncCellChanges(nextChanges);
         return nextChanges;
       });
@@ -18543,6 +18657,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
       return Promise.reject(e);
     }
   };
+  const localization = useLocalization();
   const [pendingChanges, setPendingChanges] = React__default.useState({});
   // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted
   const [saveStates, setSaveState] = React__default.useState({});
@@ -18676,6 +18791,7 @@ function useLastFocusedCellIndex() {
   return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];
 }
 function usePendingChangesUpdater(handleChange, setPendingChanges) {
+  const localization = useLocalization();
   const updatersRef = React__default.useRef({});
   const runCellUpdates = React__default.useCallback(lodash.debounce(function (changes, cell, rowIndex) {
     try {
@@ -18691,7 +18807,7 @@ function usePendingChangesUpdater(handleChange, setPendingChanges) {
           };
           return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextValues, previousValues)).then(function (updates) {
             if (updates && Object.keys(updates).length) {
-              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates));
+              setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates, localization));
             }
           });
         }
@@ -18709,7 +18825,7 @@ function usePendingChangesUpdater(handleChange, setPendingChanges) {
     runCellUpdates
   };
 }
-function createPendingChangesSetter(currentChanges, row, rowIndex, changes) {
+function createPendingChangesSetter(currentChanges, row, rowIndex, changes, localization) {
   var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
   // prepare
   const nextChanges = {
@@ -18736,7 +18852,7 @@ function createPendingChangesSetter(currentChanges, row, rowIndex, changes) {
     if (change !== row.original[accessor]) {
       rowChanges[accessor] = change;
       // determine if the row will move position based on this change, and save why it will move
-      const reason = willRowMove(cells[accessor], change, rowIndex);
+      const reason = willRowMove(cells[accessor], change, rowIndex, localization);
       if (reason) {
         rowChanges._meta.moveReason[accessor] = reason;
       } else {
@@ -19351,7 +19467,10 @@ function Row$2(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      setDataFocusAttribute(focusManager.focusFirst());
+      const element = focusManager.focusFirst();
+      if (element) {
+        setDataFocusAttribute(element);
+      }
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -19840,7 +19959,7 @@ const Tooltip$1 = ({
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute top-0 right-0 mt-1 mr-1"
+    className: "absolute right-0 top-0 mr-1 mt-1"
   })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
     className: "mt-4 justify-end"
   }, index > 0 && (/*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
@@ -20202,13 +20321,15 @@ const AgreementDisplay = props => {
   }));
 };
 
-const Container$1 = props => {
+const Container$1 = ({
+  children
+}) => {
   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"
-  }), props.children);
+  }), children);
 };
 function AgreementSelector(props) {
   const {
@@ -20280,7 +20401,7 @@ function AgreementSelector(props) {
     }
     return button;
   })), handleAddAgreement ? (/*#__PURE__*/React__default.createElement(Button$1, {
-    className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
+    className: "focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
     onClick: handleAddAgreement
   }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
     className: "my-0 h-px w-full bg-white/[0.08]"