@economic/taco 2.53.2 → 2.55.0-EC-64018.0

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.d.ts

@@ -4,6 +4,6 @@ import { Select2Props } from '../../../../../../../../components/Select2/Select2
 export declare type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {
     allColumns: ReactTableColumn<TType, unknown>[];
 };
-export declare const FilterColumn: React.ForwardRefExoticComponent<Pick<Select2Props, "defaultValue" | "onChange" | "value" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "emptyValue" | "disabled" | "fontSize" | "highlighted" | "invalid" | "loading" | "multiple" | "name" | "onCreate" | "onDelete" | "onEdit" | "readOnly" | "required" | "tags" | "createDialog" | "createTriggerText"> & {
+export declare const FilterColumn: React.ForwardRefExoticComponent<Pick<Select2Props, "defaultValue" | "onChange" | "value" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "emptyValue" | "disabled" | "fontSize" | "highlighted" | "invalid" | "loading" | "multiple" | "name" | "onCreate" | "onDelete" | "onEdit" | "placeholder" | "readOnly" | "required" | "tags" | "createDialog" | "createTriggerText"> & {
     allColumns: ReactTableColumn<unknown, unknown>[];
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterComparator.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Column as ReactTableColumn } from '@tanstack/react-table';
 import { Select2Props } from '../../../../../../../../components/Select2/Select2';
 export declare type FilterComparatorProps<TType = unknown> = Omit<Select2Props, 'children'> & {
     column?: ReactTableColumn<TType, unknown>;
 };
-export declare function FilterComparator<TType = unknown>(props: FilterComparatorProps<TType>): JSX.Element;
+export declare function FilterComparator<TType = unknown>(props: FilterComparatorProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Column as ReactTableColumn } from '@tanstack/react-table';
 import { TableFilterComparator } from '../../../../../../types';
 export declare type FilterValueProps<TType = unknown> = {
@@ -7,4 +7,4 @@ export declare type FilterValueProps<TType = unknown> = {
     onChange: (value: any) => void;
     value: any;
 };
-export declare function FilterValue<TType = unknown>(props: FilterValueProps<TType>): JSX.Element | null;
+export declare function FilterValue<TType = unknown>(props: FilterValueProps<TType>): React.JSX.Element | null;

package/dist/primitives/Table/Core/components/Toolbar/components/Print/Print.d.ts

@@ -6,4 +6,4 @@ export declare type PrintProps<TType = unknown> = {
     tableId: string;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function Print<TType = unknown>(props: PrintProps<TType>): JSX.Element;
+export declare function Print<TType = unknown>(props: PrintProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Print/PrintDialog.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { Select2Value } from '../../../../../../../components/Select2/Select2';
 import { RadioGroupItemValue } from '../../../../../../../components/RadioGroup/RadioGroup';
@@ -14,4 +14,4 @@ export declare type PrintDialogProps<TType = unknown> = {
     splitGroups: boolean;
     setSplitGroups: (splitGroups: boolean) => void;
 };
-export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): JSX.Element;
+export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Search/Search.d.ts

@@ -6,5 +6,5 @@ declare type SearchProps<TType = unknown> = {
     table: ReactTable<TType>;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function Search<TType = unknown>(props: SearchProps<TType>): JSX.Element;
+export declare function Search<TType = unknown>(props: SearchProps<TType>): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { PopoverProps } from '../../../../../../../components/Popover/Popover';
 export declare type HideOrOrderPopoverProps<TType = unknown> = PopoverProps & {
     table: ReactTable<TType>;
 };
-export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): JSX.Element;
+export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/Settings.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { TableCustomSettingsRenderer } from '../../../../../types';
 export declare type SettingsProps<TType = unknown> = {
     customSettings?: TableCustomSettingsRenderer;
     table: ReactTable<TType>;
 };
-export declare function Settings<TType = unknown>(props: SettingsProps<TType>): JSX.Element;
+export declare function Settings<TType = unknown>(props: SettingsProps<TType>): React.JSX.Element;

package/dist/taco.cjs.development.js

@@ -11,9 +11,9 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
-var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var uuid = require('uuid');
+var reactAriaComponents = require('react-aria-components');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var uuid = require('uuid');
 var debounce$1 = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -24,7 +24,6 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
-var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -4327,10 +4326,11 @@ function isElementTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     if (elementInDocument === container) {
       return true;
     }
@@ -5245,11 +5245,6 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
 });
 Card.Content = Content$2;
 
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
-};
-
 const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 350,
@@ -5292,75 +5287,53 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
+    className,
+    defaultChecked,
     indeterminate,
+    readOnly,
     invalid,
-    label,
-    loading,
+    disabled,
+    required,
     onChange,
+    loading,
+    label,
+    onClick,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  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', {
+  // Converts the forwarded ref to an object ref, as required by RAC Checkbox.
+  const inputRef = useMergedRef(ref);
+  const checkboxContainerClassName = cn('group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.
+  const checkboxClassName = cn('bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer', {
     '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
-  } : {
-    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
-    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
-  }, props.className);
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      event.currentTarget.click();
-    }
-  };
-  const spinnerClassname = cn(
-  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
-  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
-    'text-blue-500': !checked && !indeterminate
-  });
-  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
-    "aria-invalid": invalid ? 'true' : undefined,
+  }, className);
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Checkbox, Object.assign({}, otherProps, {
+    className: checkboxContainerClassName,
+    "data-taco": "checkbox-container",
+    defaultSelected: defaultChecked,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    isInvalid: invalid,
+    isRequired: required,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    inputRef: inputRef,
+    onChange: onChange
+  }), ({
+    isIndeterminate,
+    isSelected
+  }) => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: checkboxClassName,
     "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }), loading ? (/*#__PURE__*/React.createElement(Spinner, {
-    className: spinnerClassname
-  })) : (/*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
+    onClick: onClick
+  }, loading ? (/*#__PURE__*/React.createElement(Spinner, {
+    className: "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white"
+  })) : (isIndeterminate || isSelected) && (/*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    name: isIndeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "checkbox-container"
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+  }))), label)));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -5798,10 +5771,13 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    tabIndex: -1,
+    excludeFromTabOrder: true,
     checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
+    onChange: () => {
+      var _optionProps$ref, _optionProps$ref$curr;
+      (_optionProps$ref = optionProps.ref) === null || _optionProps$ref === void 0 ? void 0 : (_optionProps$ref$curr = _optionProps$ref.current) === null || _optionProps$ref$curr === void 0 ? void 0 : _optionProps$ref$curr.click();
+    },
+    className: "ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty))));
@@ -6001,22 +5977,23 @@ const useCombobox = ({
   const data = React.useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, event) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+        const eventType = event !== null && event !== void 0 ? event : 'focusout';
+        setInputValueByRef$1(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, event) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, event);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -6112,7 +6089,8 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
+            // default focusout will trigger onBlur and we don't want to trigger it twice
+            setCurrentValue(currentIndex, 'change');
             setOpen(false);
             return;
           }
@@ -6127,7 +6105,8 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              // we need to focusout to trigger onBlur as we are not actually blurring the input
+              setCurrentValue(currentIndex, 'focusout');
               setOpen(false);
             }
             return;
@@ -7769,44 +7748,46 @@ const Collapsible = /*#__PURE__*/React__default.forwardRef(function Accordion(pr
 
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     label,
     onChange,
+    disabled,
+    onClick,
+    className,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
-    'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
-  }, props.className);
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
-    className: className,
+  const inputRef = useMergedRef(ref);
+  const switchContainerClassName = cn('group flex self-start', 'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  const switchClassName = cn('h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500', 'group-data-[focus-visible]:yt-focus', {
+    'mr-2': !!label
+  }, 'group-hover:bg-grey-700',
+  // When switch is selected
+  'group-data-[selected]:bg-blue-500',
+  // When switch is selected and hovered
+  'group-hover:group-data-[selected]:bg-blue-700',
+  // When switch is disabled
+  'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',
+  // When switch is disabled and selected
+  'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50', className);
+  const switchThumbClassName = cn('pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform', 'group-data-[disabled]:opacity-50', 'group-data-[selected]:translate-x-[1.1rem]');
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
+    className: switchContainerClassName,
+    "data-taco": "switch-container",
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    defaultSelected: defaultChecked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: switchClassName,
     "data-taco": "switch",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
-  }));
-  if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "switch-container"
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: switchThumbClassName
+  })), label);
 });
 Switch.displayName = 'Switch';
 
@@ -7864,13 +7845,18 @@ const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:bg-grey-700',
+  // When ToggleItem is hovered and switch inside it is selected
+  'group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Switch, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -7891,13 +7877,18 @@ const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:border-grey-700',
+  // When ToggleItem is hovered and checkbox inside it is selected
+  'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -8844,20 +8835,41 @@ Menu$1.SubMenu = SubMenu;
 
 const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     onChange,
+    disabled,
+    className,
     ...otherProps
   } = props;
-  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
-  }, props.className);
-  return /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "mode",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  const inputRef = useMergedRef(ref);
+  const switchClassName = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500', 'data-[focus-visible]:yt-focus', 'hover:bg-grey-700',
+  // When modeswitch is selected
+  'data-[selected]:bg-blue-500',
+  // When modeswitch is selected and hovered
+  'hover:data-[selected]:bg-blue-700',
+  // When modeswitch is disabled
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',
+  // When modeswitch is disabled and selected
+  'data-[disabled]:data-[selected]:!bg-blue-500', className);
+  const switchThumbClassName = cn('pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',
+  // When modeswitch is disabled
+  'group-data-[disabled]:opacity-50',
+  // When modeswitch is selected
+  'group-data-[selected]:translate-x-full');
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
+    className: switchClassName,
+    defaultSelected: defaultChecked,
+    id: otherProps.id,
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: switchThumbClassName,
+    "data-taco": "mode"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"
@@ -11179,10 +11191,10 @@ function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFi
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting
@@ -13868,6 +13880,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-align": isGroup ? 'center' : align,
     "data-cell-id": id,
     "data-cell-pinned": isPinned ? isPinned : undefined,
+    "data-taco": isGroup ? 'grouped-column-header' : 'column-header',
     style: style,
     ref: setRef
   }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {
@@ -14022,6 +14035,8 @@ function Body(props) {
     onKeyDown: handleKeyDown,
     onMouseLeave: handleMouseLeave,
     onMouseMove: handleMouseMove,
+    // Prevents menu dropdowns inside the row from being closed straight after being opened, wehn clicked on a menu trigger
+    onFocus: e => e.stopPropagation(),
     ref: ref
   }));
 }
@@ -14787,6 +14802,11 @@ function RowHeightMenuItem({
   }, texts.table.rowHeight.sizes.extraTall)));
 }
 
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+};
+
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;
@@ -17278,9 +17298,8 @@ function TableGrid(props) {
   }, footerRows) : null)))));
 }
 
-function Column$1(_) {
-  return null;
-}
+const Column$1 = () => null;
+Column$1.displayName = 'Table3Column';
 function Group$4(_) {
   return null;
 }
@@ -19811,8 +19830,10 @@ function EditingControlCell(props) {
     }
   }, [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, undefined, !hasNonTextControl);
+    requestAnimationFrame(() => {
+      tableMeta.editing.toggleDetailedMode(false);
+      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)) {
@@ -20618,9 +20639,7 @@ function TemporaryRow(props) {
   }))));
 }
 
-function Column$3(_) {
-  return null;
-}
+const Column$3 = () => null;
 Column$3.displayName = 'Table3Column';
 function Group$5(_) {
   return null;
@@ -20818,7 +20837,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, {
@@ -22214,9 +22233,9 @@ const Top = props => {
     setSidebarOpen
   } = React__default.useContext(LayoutContext);
   const toggleSidebar = () => setSidebarOpen(open => !open);
-  return typeof props.children === 'function' ? props.children({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof props.children === 'function' ? props.children({
     toggleSidebar
-  }) : props.children;
+  }) : props.children);
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {
@@ -22415,11 +22434,11 @@ function useTableDataLoader2(fetchPage, fetchAll, options = {
 }) {
   const loadPage = function (pageIndex, sorting, filters, hiddenColumns, search, reset = false) {
     try {
+      const hasChangedData = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || search !== _lastUsedSearch.current;
       // if a request is already pending for this page (and it's not a reset), skip it
-      if (_pendingPageRequests.current[pageIndex] && !reset) {
+      if (_pendingPageRequests.current[pageIndex] && !hasChangedData && !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();