@zextras/carbonio-design-system 2.3.0 → 3.0.0

package/dist/zapp-ui.bundle.js

@@ -7009,6 +7009,27 @@ const Spinner = /*#__PURE__*/React__namespace.default.forwardRef(function Spinne
   }, rest));
 });
 
+/**
+ * This method returns `undefined`.
+ *
+ * @static
+ * @memberOf _
+ * @since 2.3.0
+ * @category Util
+ * @example
+ *
+ * _.times(2, _.noop);
+ * // => [undefined, undefined]
+ */
+
+function noop$1() {
+  // No operation performed.
+}
+
+var noop_1 = noop$1;
+
+var _noop = /*@__PURE__*/getDefaultExportFromCjs(noop_1);
+
 /**
  * A specialized version of `_.forEach` for arrays without support for
  * iteratee shorthands.
@@ -7173,178 +7194,178 @@ var _map = /*@__PURE__*/getDefaultExportFromCjs(map_1);
 
 function getFocusableElement(focusedElement, direction) {
   const siblingElement = focusedElement[direction];
-  if (!siblingElement) {
+  if (!(siblingElement instanceof HTMLElement)) {
     return null;
   }
   if (siblingElement.tabIndex >= 0) {
-    return focusedElement[direction];
+    return siblingElement;
   }
   return getFocusableElement(siblingElement, direction);
 }
-function getKeyboardPreset(type, callback) {
-  let ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  let keys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  let modifier = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  function handleArrowUp() {
-    if (ref?.current) {
-      const focusedElement = ref.current.querySelector('[tabindex]:focus');
-      if (focusedElement) {
-        const prevEl = getFocusableElement(focusedElement, 'previousElementSibling');
-        if (prevEl) {
-          prevEl.focus();
-        } else {
-          const lastChild = ref.current.querySelector('[tabindex]:last-child');
-          lastChild && lastChild.focus();
-        }
+function handleArrowUp(ref) {
+  if (ref?.current) {
+    const focusedElement = ref.current.querySelector('[tabindex]:focus');
+    if (focusedElement) {
+      const prevEl = getFocusableElement(focusedElement, 'previousElementSibling');
+      if (prevEl) {
+        prevEl.focus();
       } else {
-        const firstChild = ref.current.querySelector('[tabindex]:first-child');
-        firstChild && firstChild.focus();
+        const lastChild = ref.current.querySelector('[tabindex]:last-child');
+        lastChild && lastChild.focus();
       }
+    } else {
+      const firstChild = ref.current.querySelector('[tabindex]:first-child');
+      firstChild && firstChild.focus();
     }
   }
-  function handleArrowDown() {
-    if (ref?.current) {
-      const focusedElement = ref.current.querySelector('[tabindex]:focus');
-      if (focusedElement) {
-        const nextEl = getFocusableElement(focusedElement, 'nextElementSibling');
-        if (nextEl) {
-          nextEl.focus();
-        } else {
-          const firstChild = ref.current.querySelector('[tabindex]:first-child');
-          firstChild && firstChild.focus();
-        }
+}
+function handleArrowDown(ref) {
+  if (ref?.current) {
+    const focusedElement = ref.current.querySelector('[tabindex]:focus');
+    if (focusedElement) {
+      const nextEl = getFocusableElement(focusedElement, 'nextElementSibling');
+      if (nextEl) {
+        nextEl.focus();
       } else {
         const firstChild = ref.current.querySelector('[tabindex]:first-child');
         firstChild && firstChild.focus();
       }
+    } else {
+      const firstChild = ref.current.querySelector('[tabindex]:first-child');
+      firstChild && firstChild.focus();
     }
   }
-  function handleEscape() {
-    if (ref?.current) {
-      const focusedElement = ref.current.querySelector('[tabindex]:focus');
-      if (focusedElement) {
-        focusedElement.blur();
-      }
+}
+function handleEscape(ref) {
+  if (ref?.current) {
+    const focusedElement = ref.current.querySelector('[tabindex]:focus');
+    if (focusedElement) {
+      focusedElement.blur();
     }
   }
-  const findFirstChildWithClick = element => {
-    let result = element;
-    while (!result?.onclick && result !== null) {
-      result = result.firstElementChild;
-    }
-    return result;
-  };
-  const handleEnter = () => {
-    if (ref?.current) {
-      const focusedElement = ref.current.querySelector('[tabindex]:focus');
-      if (focusedElement) {
-        const firstChild = findFirstChildWithClick(focusedElement);
-        if (firstChild) {
-          firstChild.click();
-        }
+}
+const findFirstChildWithClick = element => {
+  let result = element;
+  while (!result?.onclick && result !== null) {
+    result = result.firstElementChild;
+  }
+  return result;
+};
+const handleEnter = ref => {
+  if (ref?.current) {
+    const focusedElement = ref.current.querySelector('[tabindex]:focus');
+    if (focusedElement) {
+      const firstChild = findFirstChildWithClick(focusedElement);
+      if (firstChild) {
+        firstChild.click();
       }
     }
-  };
-  function handleCtrlArrowUp() {
-    if (ref?.current) {
-      const firstChild = ref.current.querySelector('[tabindex]:first-child');
-      firstChild && firstChild.focus();
-    }
   }
-  function handleCtrlArrowDown() {
-    if (ref?.current) {
-      const lastChild = ref.current.querySelector('[tabindex]:last-child');
-      lastChild && lastChild.focus();
-    }
+};
+function handleCtrlArrowUp(ref) {
+  if (ref?.current) {
+    const firstChild = ref.current.querySelector('[tabindex]:first-child');
+    firstChild && firstChild.focus();
   }
-  const eventsArray = [];
+}
+function handleCtrlArrowDown(ref) {
+  if (ref?.current) {
+    const lastChild = ref.current.querySelector('[tabindex]:last-child');
+    lastChild && lastChild.focus();
+  }
+}
+function getListItemKeyboardPreset(callback, modifier) {
+  return [{
+    type: 'keypress',
+    callback,
+    keys: ['Enter', 'NumpadEnter'],
+    modifier
+  }];
+}
+function getButtonKeyboardPreset(callback, modifier) {
+  return [{
+    type: 'keyup',
+    callback,
+    keys: ['Space'],
+    modifier
+  }, {
+    type: 'keypress',
+    callback: e => e.preventDefault(),
+    keys: ['Space'],
+    modifier
+  }, {
+    type: 'keypress',
+    callback,
+    keys: ['Enter', 'NumpadEnter'],
+    modifier
+  }];
+}
+function getListKeyboardPreset(ref, modifier) {
+  return [{
+    type: 'keydown',
+    callback: () => handleArrowUp(ref),
+    keys: ['ArrowUp'],
+    modifier
+  }, {
+    type: 'keydown',
+    callback: () => handleArrowDown(ref),
+    keys: ['ArrowDown'],
+    modifier
+  }, {
+    type: 'keydown',
+    callback: () => handleCtrlArrowUp(ref),
+    keys: ['ArrowUp'],
+    modifier: true
+  }, {
+    type: 'keydown',
+    callback: () => handleCtrlArrowDown(ref),
+    keys: ['ArrowDown'],
+    modifier: true
+  }, {
+    type: 'keydown',
+    callback: () => handleEscape(ref),
+    keys: ['Escape'],
+    modifier
+  }, {
+    type: 'keydown',
+    callback: () => handleEnter(ref),
+    keys: ['Enter', 'NumpadEnter'],
+    modifier
+  }];
+}
+function getKeyboardPreset(type) {
+  let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop;
+  let ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  let keys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  let modifier = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   switch (type) {
     case 'listItem':
-      {
-        eventsArray.push({
-          type: 'keypress',
-          callback,
-          keys: ['Enter', 'NumpadEnter'],
-          modifier
-        });
-        break;
-      }
+      return getListItemKeyboardPreset(callback, modifier);
     case 'button':
-      {
-        eventsArray.push({
-          type: 'keyup',
-          callback,
-          keys: ['Space'],
-          modifier
-        });
-        eventsArray.push({
-          type: 'keypress',
-          callback: e => e.preventDefault(),
-          keys: ['Space'],
-          modifier
-        });
-        eventsArray.push({
-          type: 'keypress',
-          callback,
-          keys: ['Enter', 'NumpadEnter'],
-          modifier
-        });
-        break;
-      }
+      return getButtonKeyboardPreset(callback, modifier);
     case 'list':
-      {
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleArrowUp,
-          keys: ['ArrowUp'],
-          modifier
-        });
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleArrowDown,
-          keys: ['ArrowDown'],
-          modifier
-        });
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleCtrlArrowUp,
-          keys: ['ArrowUp'],
-          modifier: true
-        });
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleCtrlArrowDown,
-          keys: ['ArrowDown'],
-          modifier: true
-        });
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleEscape,
-          keys: ['Escape'],
-          modifier
-        });
-        eventsArray.push({
-          type: 'keydown',
-          callback: handleEnter,
-          keys: ['Enter', 'NumpadEnter'],
-          modifier
-        });
-        break;
-      }
+      return getListKeyboardPreset(ref, modifier);
     case 'chipInputKeys':
-      {
-        eventsArray.push({
-          type: 'keypress',
-          callback,
-          keys,
-          modifier
-        });
-        break;
-      }
+      return [{
+        type: 'keypress',
+        callback,
+        keys,
+        modifier
+      }];
+    default:
+      return [];
   }
-  return eventsArray;
 }
+
+/**
+ * Attach listeners for the given events to the given ref.
+ *
+ * Note: an event with the `keys` field set to an empty array is considered as an event for any key.
+ * In order to have an event for no key, you should either provide an event with the `keys` field set
+ * to an array with an empty key (`['']`), or not provide an event at all.
+ */
 function useKeyboard(ref, events) {
+  let registerListener = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const keyEvents = React.useMemo(() => _map(events, _ref => {
     let {
       keys,
@@ -7362,12 +7383,12 @@ function useKeyboard(ref, events) {
     };
   }), [events]);
   React.useEffect(() => {
-    if (ref.current) {
+    const refSave = ref.current;
+    if (refSave && registerListener) {
       _forEach(keyEvents, (keyEvent, index) => {
-        ref.current && ref.current.addEventListener(events[index].type, keyEvent);
+        refSave.addEventListener(events[index].type, keyEvent);
       });
     }
-    const refSave = ref.current;
     return () => {
       if (refSave) {
         _forEach(keyEvents, (keyEvent, index) => {
@@ -7375,8 +7396,7 @@ function useKeyboard(ref, events) {
         });
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [events, keyEvents, ref, ref.current]);
+  }, [events, keyEvents, ref, registerListener]);
 }
 
 const StyledIcon = styled__default.default(Icon).withConfig({
@@ -7408,7 +7428,7 @@ const StyledIcon = styled__default.default(Icon).withConfig({
   } = _ref5;
   return $size;
 });
-const StyledText$1 = styled__default.default(Text).withConfig({
+const StyledText$2 = styled__default.default(Text).withConfig({
   displayName: "Button__StyledText",
   componentId: "sc-1oof15b-1"
 })(["user-select:none;text-transform:uppercase;font-size:", ";", ";"], _ref6 => {
@@ -7462,7 +7482,7 @@ const StyledButton = styled__default.default.button.attrs(_ref8 => {
     iconPlacement = 'left'
   } = _ref12;
   return iconPlacement === 'left' && 1 || iconPlacement === 'right' && 2;
-}, StyledText$1, _ref13 => {
+}, StyledText$2, _ref13 => {
   let {
     iconPlacement = 'left'
   } = _ref13;
@@ -7618,6 +7638,7 @@ const Button$1 = /*#__PURE__*/React__namespace.default.forwardRef(function Butto
     buttonRef = null,
     ...rest
   } = _ref22;
+  const gridRef = useCombinedRefs(ref);
   const innerButtonRef = useCombinedRefs(buttonRef);
   const clickHandler = React.useCallback(e => {
     if (!disabled && onClick && !e.defaultPrevented) {
@@ -7636,11 +7657,22 @@ const Button$1 = /*#__PURE__*/React__namespace.default.forwardRef(function Butto
     type,
     ...rest
   }), [type, rest]);
+  const setFocusOnPrimaryButton = React.useCallback(() => {
+    innerButtonRef.current?.focus();
+  }, [innerButtonRef]);
+  React.useEffect(() => {
+    const gridElement = gridRef.current;
+    gridElement?.addEventListener('focus', setFocusOnPrimaryButton);
+    return () => {
+      gridElement?.removeEventListener('focus', setFocusOnPrimaryButton);
+    };
+  }, [gridRef, setFocusOnPrimaryButton]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledGrid, {
     width: width,
     minWidth: minWidth,
     padding: SIZES$2[size].padding,
-    ref: ref
+    ref: gridRef,
+    tabIndex: -1
   }, /*#__PURE__*/React__namespace.default.createElement(StyledButton, _extends({}, rest, {
     backgroundColor: colors.backgroundColor,
     color: colors.color,
@@ -7660,7 +7692,7 @@ const Button$1 = /*#__PURE__*/React__namespace.default.forwardRef(function Butto
     color: "currentColor",
     $size: SIZES$2[size].icon,
     $loading: loading
-  }), label && /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
+  }), label && /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
     color: "currentColor",
     $size: SIZES$2[size].label,
     $loading: loading
@@ -8326,7 +8358,8 @@ const Checkbox = /*#__PURE__*/React__namespace.default.forwardRef(function Check
     style: {
       cursor: disabled ? 'default' : 'pointer'
     },
-    crossAlignment: "flex-start"
+    crossAlignment: "flex-start",
+    "data-testid": 'checkbox'
   }, rest), /*#__PURE__*/React__namespace.default.createElement(IconWrapper$2, {
     iconColor: iconColor,
     disabled: disabled,
@@ -8476,27 +8509,6 @@ function arrayIncludesWith$1(array, value, comparator) {
 
 var _arrayIncludesWith = arrayIncludesWith$1;
 
-/**
- * This method returns `undefined`.
- *
- * @static
- * @memberOf _
- * @since 2.3.0
- * @category Util
- * @example
- *
- * _.times(2, _.noop);
- * // => [undefined, undefined]
- */
-
-function noop$1() {
-  // No operation performed.
-}
-
-var noop_1 = noop$1;
-
-var _noop = /*@__PURE__*/getDefaultExportFromCjs(noop_1);
-
 var Set$1 = _Set,
     noop = noop_1,
     setToArray$1 = _setToArray;
@@ -9763,6 +9775,15 @@ function usePrevious(value) {
  */
 const INPUT_BACKGROUND_COLOR = 'gray5';
 const INPUT_DIVIDER_COLOR = 'gray3';
+const TIMERS = {
+  DROPDOWN: {
+    IS_OPEN: 1,
+    CLOSE_NESTED: 500
+  },
+  MODAL: {
+    DELAY_OPEN: 1
+  }
+};
 
 const ActionIcon = styled__default.default(Icon).withConfig({
   displayName: "Chip__ActionIcon",
@@ -10119,6 +10140,37 @@ var some_1 = some;
 
 var _some = /*@__PURE__*/getDefaultExportFromCjs(some_1);
 
+/**
+ * Gets the first element of `array`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @alias first
+ * @category Array
+ * @param {Array} array The array to query.
+ * @returns {*} Returns the first element of `array`.
+ * @example
+ *
+ * _.head([1, 2, 3]);
+ * // => 1
+ *
+ * _.head([]);
+ * // => undefined
+ */
+
+function head(array) {
+  return (array && array.length) ? array[0] : undefined;
+}
+
+var head_1 = head;
+
+var _head = /*@__PURE__*/getDefaultExportFromCjs(head_1);
+
+var first = head_1;
+
+var _first = /*@__PURE__*/getDefaultExportFromCjs(first);
+
 const ContainerEl$2 = styled__default.default(Container).withConfig({
   displayName: "Dropdown__ContainerEl",
   componentId: "sc-1jmq2vf-0"
@@ -10208,7 +10260,8 @@ function PopperListItem(_ref3) {
     tabIndex: disabled ? -1 : 0,
     $disabled: disabled,
     $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined,
-    background: selected && selectedBackgroundColor ? selectedBackgroundColor : undefined
+    background: selected && selectedBackgroundColor ? selectedBackgroundColor : undefined,
+    "data-testid": 'dropdown-item'
   }, rest), customComponent || /*#__PURE__*/React__namespace.default.createElement(ListItemContent, {
     icon: icon,
     label: label,
@@ -10226,7 +10279,6 @@ function NestListItem(_ref4) {
     label,
     onClick,
     selected,
-    open,
     customComponent,
     disabled = false,
     items,
@@ -10235,13 +10287,101 @@ function NestListItem(_ref4) {
     itemTextSize,
     itemPaddingBetween,
     keepOpen,
-    dropdownListRef,
+    dropdownListRef = null,
     tooltipLabel,
+    onOpen,
+    onClose,
     ...rest
   } = _ref4;
+  const [open, setOpen] = React.useState(false);
   const itemRef = React.useRef(null);
-  const keyEvents = React.useMemo(() => onClick && getKeyboardPreset('listItem', onClick) || [], [onClick]);
-  useKeyboard(itemRef, keyEvents);
+  const innerDropdownListRef = useCombinedRefs(dropdownListRef);
+  const closeNestedDropdownTimeoutRef = React.useRef();
+  React.useEffect(() => () => {
+    if (closeNestedDropdownTimeoutRef.current !== undefined) {
+      clearTimeout(closeNestedDropdownTimeoutRef.current);
+    }
+  }, []);
+  const openNestedDropdown = React.useCallback(() => {
+    if (closeNestedDropdownTimeoutRef.current !== undefined) {
+      clearTimeout(closeNestedDropdownTimeoutRef.current);
+      closeNestedDropdownTimeoutRef.current = undefined;
+    }
+    setOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const closeNestedDropdown = React.useCallback(() => {
+    if (closeNestedDropdownTimeoutRef.current !== undefined) {
+      clearTimeout(closeNestedDropdownTimeoutRef.current);
+      closeNestedDropdownTimeoutRef.current = undefined;
+    }
+    setOpen(false);
+    onClose?.();
+    itemRef.current?.focus({
+      preventScroll: true
+    });
+  }, [onClose]);
+  const itemKeyEvents = React.useMemo(() => {
+    const presets = [{
+      type: 'keydown',
+      callback: openNestedDropdown,
+      keys: ['ArrowRight']
+    }];
+    if (onClick) {
+      presets.push(...getKeyboardPreset('listItem', onClick));
+    }
+    return presets;
+  }, [onClick, openNestedDropdown]);
+  useKeyboard(itemRef, itemKeyEvents);
+  const dropdownKeyEvents = React.useMemo(() => [{
+    type: 'keydown',
+    callback: closeNestedDropdown,
+    keys: ['Escape']
+  }, {
+    type: 'keydown',
+    callback: closeNestedDropdown,
+    keys: ['ArrowLeft']
+  }], [closeNestedDropdown]);
+  const [registerNestedListener, setRegisterNestedListener] = React.useState(open);
+  React.useEffect(() => {
+    let timeout;
+    if (open) {
+      timeout = setTimeout(() => {
+        setRegisterNestedListener(true);
+      }, TIMERS.DROPDOWN.IS_OPEN);
+    }
+    return () => {
+      setRegisterNestedListener(false);
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [open]);
+  useKeyboard(innerDropdownListRef, dropdownKeyEvents, registerNestedListener);
+  const closeOnMouseLeave = React.useCallback(event => {
+    if (event.target instanceof Node) {
+      const eventIsOnTrigger = itemRef.current?.contains(event.target);
+      const eventIsOnDropdown = innerDropdownListRef.current?.contains(event.target);
+      if (!eventIsOnDropdown && !eventIsOnTrigger) {
+        if (closeNestedDropdownTimeoutRef.current === undefined) {
+          closeNestedDropdownTimeoutRef.current = setTimeout(() => {
+            closeNestedDropdown();
+          }, TIMERS.DROPDOWN.CLOSE_NESTED);
+        }
+      } else if (closeNestedDropdownTimeoutRef.current !== undefined) {
+        clearTimeout(closeNestedDropdownTimeoutRef.current);
+        closeNestedDropdownTimeoutRef.current = undefined;
+      }
+    }
+  }, [closeNestedDropdown, innerDropdownListRef]);
+  React.useEffect(() => {
+    if (open) {
+      window.addEventListener('mouseover', closeOnMouseLeave);
+    }
+    return () => {
+      window.removeEventListener('mouseover', closeOnMouseLeave);
+    };
+  }, [closeOnMouseLeave, open]);
   return /*#__PURE__*/React__namespace.default.createElement(ContainerEl$2, _extends({
     "data-keep-open": keepOpen,
     ref: itemRef,
@@ -10254,7 +10394,9 @@ function NestListItem(_ref4) {
     onClick: disabled ? undefined : onClick,
     tabIndex: disabled ? undefined : 0,
     $disabled: disabled,
-    $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined
+    $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined,
+    "data-testid": 'dropdown-item',
+    onMouseEnter: openNestedDropdown
   }, rest), /*#__PURE__*/React__namespace.default.createElement(Dropdown, {
     display: "block",
     items: items,
@@ -10264,7 +10406,7 @@ function NestListItem(_ref4) {
     itemIconSize: itemIconSize,
     itemTextSize: itemTextSize,
     itemPaddingBetween: itemPaddingBetween,
-    dropdownListRef: dropdownListRef
+    dropdownListRef: innerDropdownListRef
   }, /*#__PURE__*/React__namespace.default.createElement(Container, {
     orientation: "horizontal",
     mainAlignment: "space-between",
@@ -10359,14 +10501,14 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     onOpen,
     onClose,
     children,
-    triggerRef = /*#__PURE__*/React.createRef(),
+    triggerRef = null,
     disablePortal = false,
     preventDefault = true,
     selectedBackgroundColor,
     itemIconSize = 'medium',
     itemTextSize = 'medium',
     itemPaddingBetween = 'small',
-    dropdownListRef = /*#__PURE__*/React.createRef(),
+    dropdownListRef = null,
     ...rest
   } = _ref14;
   const {
@@ -10380,29 +10522,24 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
   const startSentinelRef = React.useRef(null);
   const endSentinelRef = React.useRef(null);
   const [position, setPosition] = React.useState(null);
-  const [currentHover, setCurrentHover] = React.useState(null);
-  const openPopperTimoutRef = React.useRef();
   const nestedDropdownsRef = React.useRef([]);
-  React.useEffect(
-  // clear timers on unmount
-  () => () => {
-    openPopperTimoutRef.current && clearTimeout(openPopperTimoutRef.current);
-  }, []);
   React.useEffect(() => {
     setOpen(forceOpen);
+    openRef.current = forceOpen;
   }, [forceOpen]);
   const openPopper = React.useCallback(() => {
     setOpen(true);
-    onOpen && onOpen();
+    openRef.current = true;
+    onOpen?.();
   }, [onOpen]);
   const closePopper = React.useCallback(e => {
-    e && e.stopPropagation();
+    e?.stopPropagation();
     setOpen(forceOpen);
-    setCurrentHover(null);
-    !disableRestoreFocus && innerTriggerRef.current && innerTriggerRef.current.focus();
-    onClose && onClose();
+    openRef.current = forceOpen;
+    !disableRestoreFocus && innerTriggerRef.current?.focus();
+    onClose?.();
   }, [disableRestoreFocus, forceOpen, innerTriggerRef, onClose]);
-  const handleClick = React.useCallback(e => {
+  const toggleOpen = React.useCallback(e => {
     if (openRef.current) {
       e.preventDefault();
       closePopper();
@@ -10411,12 +10548,10 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
       openPopper();
     }
   }, [closePopper, disabled, openPopper]);
-
-  // TODO: it probably makes sense to merge this callback and the handleClick
   const handleLeftClick = React.useCallback(e => {
-    children.props.onClick && children.props.onClick(e);
-    handleClick(e);
-  }, [children.props, handleClick]);
+    children.props.onClick?.(e);
+    toggleOpen(e);
+  }, [children.props, toggleOpen]);
   const handleRightClick = React.useCallback(e => {
     e.preventDefault();
     const virtualElement = {
@@ -10429,16 +10564,13 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
         left: e.clientX,
         x: e.clientX,
         y: e.clientY,
-        toJSON: () => 'TODO' // TODO: check what this should return
+        toJSON: () => ''
       })
     };
-
     setPosition(virtualElement);
-    openPopperTimoutRef.current = setTimeout(() => {
-      if (!disabled && !openRef.current) {
-        openPopper();
-      }
-    }, 1);
+    if (!disabled && !openRef.current) {
+      openPopper();
+    }
   }, [disabled, openPopper]);
   const clickOutsidePopper = React.useCallback(e => {
     const clickedOnDropdown = dropdownRef.current && (e.target === dropdownRef.current || dropdownRef.current.contains(e.target));
@@ -10451,31 +10583,24 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     }
   }, [closePopper, contextMenu, dropdownRef, innerTriggerRef]);
   const onStartSentinelFocus = React.useCallback(() => {
-    const lastChild = popperItemsRef.current && popperItemsRef.current.querySelector('div[tabindex]:last-child');
-    lastChild && lastChild.focus();
+    const lastChild = popperItemsRef.current?.querySelector('[tabindex]:last-child');
+    lastChild?.focus();
   }, []);
   const onEndSentinelFocus = React.useCallback(() => {
-    const lastChild = popperItemsRef.current && popperItemsRef.current.querySelector('div[tabindex]:first-child');
-    lastChild && lastChild.focus();
+    const firstChild = popperItemsRef.current?.querySelector('[tabindex]:first-child');
+    firstChild?.focus();
   }, []);
-  const triggerEvents = React.useMemo(() => handleTriggerEvents ? getKeyboardPreset('button', handleClick) : [], [handleClick, handleTriggerEvents]);
+  const triggerEvents = React.useMemo(() => handleTriggerEvents ? getKeyboardPreset('button', toggleOpen) : [], [toggleOpen, handleTriggerEvents]);
   useKeyboard(innerTriggerRef, triggerEvents);
-
-  // We need to add 'open' as dependency because we want to reattach these events each time we open the dropdown
-  const listEvents = React.useMemo(() => getKeyboardPreset('list', () => undefined, popperItemsRef),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [open, popperItemsRef]);
-  useKeyboard(popperItemsRef, listEvents);
-  // We need to add 'open' as dependency because we want to reattach these events each time we open the dropdown
+  const listEvents = React.useMemo(() => getKeyboardPreset('list', undefined, popperItemsRef), [popperItemsRef]);
+  useKeyboard(popperItemsRef, listEvents, open);
   const escapeEvent = React.useMemo(() => [{
     type: 'keydown',
     callback: closePopper,
     keys: ['Escape'],
     modifier: false
-  }],
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [open, closePopper]);
-  useKeyboard(dropdownRef, escapeEvent);
+  }], [closePopper]);
+  useKeyboard(dropdownRef, escapeEvent, open);
   React.useLayoutEffect(() => {
     let popperInstance;
     if (open) {
@@ -10495,27 +10620,29 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     let timeout;
     if (!disableAutoFocus && open) {
       timeout = setTimeout(() => {
-        const selectedItems = dropdownRef.current ? dropdownRef.current.querySelectorAll('.zapp-selected') : [];
-        selectedItems.length > 0 ? selectedItems[0].focus() : popperItemsRef.current && popperItemsRef.current.children[0] && popperItemsRef.current.children[0] instanceof HTMLElement && popperItemsRef.current.children[0].focus();
-      }, 1);
+        const selectedItems = dropdownRef.current?.querySelectorAll('.zapp-selected');
+        if (selectedItems && selectedItems.length > 0) {
+          selectedItems[0].focus();
+        } else {
+          const firstElement = _first(popperItemsRef.current?.children);
+          if (firstElement instanceof HTMLElement) {
+            firstElement.focus();
+          }
+        }
+      }, TIMERS.DROPDOWN.IS_OPEN);
     }
     return () => {
       timeout && clearTimeout(timeout);
     };
   }, [disableAutoFocus, dropdownRef, open]);
   React.useEffect(() => {
-    openRef.current = open;
-    let timeout;
     if (open) {
-      timeout = setTimeout(() => {
-        windowObj.document.addEventListener('click', clickOutsidePopper, true);
-        contextMenu && windowObj.document.addEventListener('contextmenu', clickOutsidePopper, true);
-      }, 1);
+      windowObj.document.addEventListener('click', clickOutsidePopper, true);
+      contextMenu && windowObj.document.addEventListener('contextmenu', clickOutsidePopper, true);
     }
     return () => {
       windowObj.document.removeEventListener('click', clickOutsidePopper, true);
       windowObj.document.removeEventListener('contextmenu', clickOutsidePopper, true);
-      timeout && clearTimeout(timeout);
     };
   }, [open, closePopper, clickOutsidePopper, contextMenu, windowObj.document]);
   React.useEffect(() => {
@@ -10523,24 +10650,23 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     const startSentinelRefElement = startSentinelRef.current;
     const endSentinelRefElement = endSentinelRef.current;
     if (open && !disableAutoFocus) {
-      popperItemRefElement && popperItemRefElement.focus({
+      popperItemRefElement?.focus({
         preventScroll: true
       });
-      startSentinelRefElement && startSentinelRefElement.addEventListener('focus', onStartSentinelFocus);
-      endSentinelRefElement && endSentinelRefElement.addEventListener('focus', onEndSentinelFocus);
+      startSentinelRefElement?.addEventListener('focus', onStartSentinelFocus);
+      endSentinelRefElement?.addEventListener('focus', onEndSentinelFocus);
     }
     return () => {
-      startSentinelRefElement && startSentinelRefElement.removeEventListener('focus', onStartSentinelFocus);
-      endSentinelRefElement && endSentinelRefElement.removeEventListener('focus', onEndSentinelFocus);
+      startSentinelRefElement?.removeEventListener('focus', onStartSentinelFocus);
+      endSentinelRefElement?.removeEventListener('focus', onEndSentinelFocus);
     };
   }, [open, startSentinelRef, endSentinelRef, onStartSentinelFocus, onEndSentinelFocus, disableAutoFocus]);
   const listItemClickHandler = React.useCallback((onClick, keepOpen) => event => {
-    onClick && onClick(event);
-    !multiple && !keepOpen && closePopper();
+    onClick?.(event);
+    if (!multiple && !keepOpen) {
+      closePopper();
+    }
   }, [closePopper, multiple]);
-  const listItemMouseEnterHandler = React.useCallback(id => () => {
-    setCurrentHover(id);
-  }, []);
   const popperListItems = React.useMemo(() => {
     nestedDropdownsRef.current = [];
     if (items) {
@@ -10568,12 +10694,10 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
           onClick: listItemClickHandler(onClick, keepOpen),
           keepOpen: keepOpen,
           selected: selected,
-          open: currentHover === id,
           key: id,
           customComponent: customComponent,
           disabled: itemDisabled,
           items: subItems,
-          onMouseEnter: listItemMouseEnterHandler(id),
           selectedBackgroundColor: selectedBackgroundColor,
           itemIconSize: itemIconSize,
           itemTextSize: itemTextSize,
@@ -10588,7 +10712,6 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
           key: id,
           customComponent: customComponent,
           disabled: itemDisabled,
-          onMouseEnter: listItemMouseEnterHandler(id),
           selectedBackgroundColor: selectedBackgroundColor,
           itemIconSize: itemIconSize,
           itemTextSize: itemTextSize,
@@ -10597,7 +10720,7 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
       });
     }
     return null;
-  }, [items, listItemClickHandler, currentHover, listItemMouseEnterHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
+  }, [items, listItemClickHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
   const popperListPreventDefaultHandler = React.useCallback(event => {
     preventDefault && event.preventDefault();
   }, [preventDefault]);
@@ -10685,7 +10808,7 @@ const ContainerEl$1 = styled__default.default(Container).withConfig({
 const ScrollContainer = styled__default.default.div.withConfig({
   displayName: "ChipInput__ScrollContainer",
   componentId: "sc-1y52mik-1"
-})(["display:flex;flex:1 1 auto;justify-content:flex-start;align-items:center;width:auto;gap:0.5rem;flex-wrap:", ";overflow-x:auto;overflow-x:overlay;-ms-overflow-style:", ";scrollbar-width:", ";&::-webkit-scrollbar{display:", ";}margin-top:", ";max-height:", ";overflow-y:auto;"], _ref6 => {
+})(["display:flex;flex:1 1 auto;justify-content:flex-start;align-items:center;width:auto;gap:0.5rem;flex-wrap:", ";overflow-x:auto;-ms-overflow-style:", ";scrollbar-width:", ";&::-webkit-scrollbar{display:", ";}margin-top:", ";max-height:", ";overflow-y:auto;"], _ref6 => {
   let {
     wrap
   } = _ref6;
@@ -10720,7 +10843,7 @@ const ScrollContainer = styled__default.default.div.withConfig({
 const InputEl$2 = styled__default.default.input.withConfig({
   displayName: "ChipInput__InputEl",
   componentId: "sc-1y52mik-2"
-})(["border:none !important;height:auto !important;width:1em;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";pointer-events:none;}transition:background 0.2s ease-out;line-height:1.5;padding:0;min-width:1em;overflow-wrap:break-word;max-width:100%;&::placeholder{color:transparent;}"], _ref12 => {
+})(["border:none !important;height:auto !important;width:1em;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";pointer-events:none;}transition:background 0.2s ease-out;line-height:1.5;padding:0;min-width:1em;overflow-wrap:break-word;max-width:100%;&::placeholder{color:transparent;font-size:0;user-select:none;}"], _ref12 => {
   let {
     theme
   } = _ref12;
@@ -10999,7 +11122,7 @@ const ChipInput = /*#__PURE__*/React__namespace.default.forwardRef(function Chip
     const inputValue = inputElRef.current?.value || '';
     inputValue.length && saveValue(inputValue);
   }, [inputElRef, saveValue]);
-  const saveCurrentEvent = React.useMemo(() => getKeyboardPreset('chipInputKeys', saveCurrentValue, undefined, separatorKeys), [saveCurrentValue, separatorKeys]);
+  const saveCurrentEvent = React.useMemo(() => separatorKeys.length > 0 ? getKeyboardPreset('chipInputKeys', saveCurrentValue, undefined, separatorKeys) : [], [saveCurrentValue, separatorKeys]);
   useKeyboard(inputElRef, saveCurrentEvent);
   const onBackspace = React.useCallback(e => {
     const inputElement = e.currentTarget instanceof HTMLInputElement && e.currentTarget;
@@ -11593,7 +11716,7 @@ const InputContainer = styled__default.default(Container).withConfig({
 const InputEl$1 = styled__default.default.input.withConfig({
   displayName: "Input__InputEl",
   componentId: "sc-1ssz6rm-0"
-})(["border:none !important;height:auto !important;width:100%;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";}transition:background 0.2s ease-out;line-height:1.5;padding:0;&::placeholder{color:transparent;font-size:0;}"], _ref => {
+})(["border:none !important;height:auto !important;width:100%;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";}transition:background 0.2s ease-out;line-height:1.5;padding:0;&::placeholder{color:transparent;font-size:0;user-select:none;}"], _ref => {
   let {
     theme
   } = _ref;
@@ -12317,7 +12440,7 @@ const SelectComponent = /*#__PURE__*/React__namespace.default.forwardRef(functio
   let {
     background = INPUT_BACKGROUND_COLOR,
     disabled = false,
-    items = [],
+    items,
     label,
     onChange,
     defaultSelection,
@@ -21352,7 +21475,7 @@ const AccordionContainerEl = styled__default.default(Container).withConfig({
   } = _ref4;
   return !$disableHover && pseudoClasses(theme, $active ? 'highlight' : background);
 });
-const StyledText = styled__default.default(Text).withConfig({
+const StyledText$1 = styled__default.default(Text).withConfig({
   displayName: "Accordion__StyledText",
   componentId: "sc-gwif5c-1"
 })(["min-width:0;flex-basis:0;flex-grow:1;"]);
@@ -21382,7 +21505,7 @@ const AccordionItem = /*#__PURE__*/React__namespace.default.forwardRef(function
     customColor: item.iconCustomColor,
     color: item.iconColor,
     size: "large"
-  })), item.label && /*#__PURE__*/React__namespace.default.createElement(StyledText, _extends({
+  })), item.label && /*#__PURE__*/React__namespace.default.createElement(StyledText$1, _extends({
     size: "medium"
   }, item.textProps), item.label), item.badgeCounter !== undefined && /*#__PURE__*/React__namespace.default.createElement(Padding, {
     left: "small"
@@ -21521,33 +21644,6 @@ var last_1 = last;
 
 var _last = /*@__PURE__*/getDefaultExportFromCjs(last_1);
 
-/**
- * Gets the first element of `array`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @alias first
- * @category Array
- * @param {Array} array The array to query.
- * @returns {*} Returns the first element of `array`.
- * @example
- *
- * _.head([1, 2, 3]);
- * // => 1
- *
- * _.head([]);
- * // => undefined
- */
-
-function head(array) {
-  return (array && array.length) ? array[0] : undefined;
-}
-
-var head_1 = head;
-
-var _head = /*@__PURE__*/getDefaultExportFromCjs(head_1);
-
 var baseSlice = _baseSlice,
     toInteger = toInteger_1;
 
@@ -21967,8 +22063,7 @@ const List = /*#__PURE__*/React__namespace.default.forwardRef(function ListFn(_r
   } = _ref6;
   const selecting = React.useMemo(() => _some(selected, i => !!i), [selected]);
   const listRef = React.useRef(null);
-  const useKeyboardShortcuts = () => undefined;
-  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', useKeyboardShortcuts, listRef), [listRef, keyboardShortcutsIsDisabled]);
+  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', undefined, listRef), [listRef, keyboardShortcutsIsDisabled]);
   useKeyboard(listRef, keyEvents);
   return /*#__PURE__*/React__namespace.default.createElement("div", {
     ref: listRef,
@@ -22039,8 +22134,7 @@ const ListV2 = /*#__PURE__*/React__namespace.default.forwardRef(function ListV2F
     ...rest
   } = _ref3;
   const listRef = useCombinedRefs(ref);
-  const useKeyboardShortcuts = () => undefined;
-  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', useKeyboardShortcuts, listRef), [listRef, keyboardShortcutsIsDisabled]);
+  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', undefined, listRef), [listRef, keyboardShortcutsIsDisabled]);
   useKeyboard(listRef, keyEvents);
   const listItems = React.useMemo(() => children.map(child => /*#__PURE__*/React__namespace.default.cloneElement(child, {
     listRef,
@@ -22350,57 +22444,79 @@ const Popover = /*#__PURE__*/React__namespace.default.forwardRef(function Popove
   }, children));
 });
 
-const TableRow = styled__default.default.tr.withConfig({
-  displayName: "Table__TableRow",
+const StyledCheckbox = styled__default.default(Checkbox).withConfig({
+  displayName: "Table__StyledCheckbox",
   componentId: "sc-1ez1j74-0"
-})(["transition:background-color 0.2s ease-out;&:nth-child(odd){background-color:", ";&:hover{background-color:", ";}}&:nth-child(even){background-color:", ";&:hover{background-color:", ";}}", ";", ";"], _ref => {
+})(["display:", ";"], _ref => {
   let {
-    theme
+    show
   } = _ref;
-  return theme.palette.gray6.regular;
-}, _ref2 => {
+  return show ? 'block' : 'none';
+});
+const StyledText = styled__default.default(Text).withConfig({
+  displayName: "Table__StyledText",
+  componentId: "sc-1ez1j74-1"
+})([""]);
+const StyledTr = styled__default.default.tr.withConfig({
+  displayName: "Table__StyledTr",
+  componentId: "sc-1ez1j74-2"
+})(["&:hover,&:focus{", "{display:block;}}"], StyledCheckbox);
+const TableRow = styled__default.default.tr.withConfig({
+  displayName: "Table__TableRow",
+  componentId: "sc-1ez1j74-3"
+})(["transition:background-color 0.2s ease-out;&:nth-child(odd){background-color:", ";&:hover{background-color:", ";}}&:nth-child(even){background-color:", ";&:hover{background-color:", ";}}", ";", ";&:hover,&:focus{", "{display:block;}}", ";"], _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.palette.gray6.hover;
+  return theme.palette.gray6.regular;
 }, _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.palette.gray5.regular;
+  return theme.palette.gray6.hover;
 }, _ref4 => {
   let {
     theme
   } = _ref4;
-  return theme.palette.gray5.hover;
+  return theme.palette.gray5.regular;
 }, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.palette.gray5.hover;
+}, _ref6 => {
   let {
     selected,
     highlight,
     theme
-  } = _ref5;
+  } = _ref6;
   return (selected || highlight) && styled.css(["background-color:", " !important;"], theme.palette.highlight.regular);
-}, _ref6 => {
+}, _ref7 => {
   let {
     clickable,
     showCheckbox
-  } = _ref6;
+  } = _ref7;
   return (clickable === true || typeof clickable === 'undefined' && showCheckbox === false) && styled.css(["cursor:pointer;"]);
+}, StyledCheckbox, _ref8 => {
+  let {
+    showCheckbox
+  } = _ref8;
+  return showCheckbox && styled.css(["&:hover,&:focus{", "{display:none;}}"], StyledText);
 });
 const TableContainer = styled__default.default.div.withConfig({
   displayName: "Table__TableContainer",
-  componentId: "sc-1ez1j74-1"
+  componentId: "sc-1ez1j74-4"
 })(["position:relative;display:block;"]);
 const StyledTable = styled__default.default.table.withConfig({
   displayName: "Table__StyledTable",
-  componentId: "sc-1ez1j74-2"
-})(["border-collapse:collapse;table-layout:fixed;&,thead,tbody,tr{width:100%;}thead{&,th{background-color:", ";}th{position:sticky;top:0;}}th,td{padding:0 0.5rem;height:1.875rem;}"], _ref7 => {
+  componentId: "sc-1ez1j74-5"
+})(["border-collapse:collapse;table-layout:fixed;&,thead,tbody,tr{width:100%;}thead{&,th{background-color:", ";}th{position:sticky;top:0;}}th,td{padding:0 0.5rem;height:1.875rem;}"], _ref9 => {
   let {
     theme
-  } = _ref7;
+  } = _ref9;
   return theme.palette.gray3.regular;
 });
-const DefaultHeaderFactory = _ref8 => {
+const DefaultHeaderFactory = _ref10 => {
   let {
     headers,
     onChange,
@@ -22408,16 +22524,15 @@ const DefaultHeaderFactory = _ref8 => {
     selectionMode,
     multiSelect,
     showCheckbox
-  } = _ref8;
-  const [showCkb, setShowCkb] = React.useState(false);
+  } = _ref10;
   const trRef = React.useRef(null);
-  const LabelFactory = React.useCallback(_ref9 => {
+  const LabelFactory = React.useCallback(_ref11 => {
     let {
       label,
       open,
       focus,
       bold
-    } = _ref9;
+    } = _ref11;
     return /*#__PURE__*/React__namespace.default.createElement(Container, {
       orientation: "horizontal",
       width: "fill",
@@ -22443,29 +22558,6 @@ const DefaultHeaderFactory = _ref8 => {
       }
     }));
   }, []);
-  const displayCheckbox = React.useCallback(() => {
-    setShowCkb(true);
-  }, []);
-  const hideCheckbox = React.useCallback(() => {
-    setShowCkb(false);
-  }, []);
-  React.useEffect(() => {
-    const refSave = trRef.current;
-    if (refSave && showCheckbox) {
-      refSave.addEventListener('mouseenter', displayCheckbox);
-      refSave.addEventListener('mouseleave', hideCheckbox);
-      refSave.addEventListener('focus', displayCheckbox);
-      refSave.addEventListener('blur', hideCheckbox);
-    }
-    return () => {
-      if (refSave) {
-        refSave.removeEventListener('mouseenter', displayCheckbox);
-        refSave.removeEventListener('mouseleave', hideCheckbox);
-        refSave.removeEventListener('focus', displayCheckbox);
-        refSave.removeEventListener('blur', hideCheckbox);
-      }
-    };
-  }, [displayCheckbox, hideCheckbox, showCheckbox]);
   const headerData = React.useMemo(() => headers.map(column => {
     const hasItems = column.items !== undefined && column.items.length > 0;
     return /*#__PURE__*/React__namespace.default.createElement("th", {
@@ -22487,18 +22579,19 @@ const DefaultHeaderFactory = _ref8 => {
       weight: column.bold ? 'bold' : 'regular'
     }, column.label));
   }), [LabelFactory, headers]);
-  return /*#__PURE__*/React__namespace.default.createElement("tr", {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTr, {
     ref: trRef
   }, /*#__PURE__*/React__namespace.default.createElement("th", {
     align: "center"
-  }, showCheckbox && multiSelect && (showCkb || selectionMode || allSelected) && /*#__PURE__*/React__namespace.default.createElement(Checkbox, {
+  }, showCheckbox && multiSelect && /*#__PURE__*/React__namespace.default.createElement(StyledCheckbox, {
     size: 'small',
     value: allSelected,
     onClick: onChange,
-    iconColor: selectionMode ? 'primary' : 'text'
+    iconColor: selectionMode ? 'primary' : 'text',
+    show: selectionMode
   })), headerData);
 };
-const DefaultRowFactory = _ref10 => {
+const DefaultRowFactory = _ref12 => {
   let {
     index,
     row,
@@ -22507,10 +22600,9 @@ const DefaultRowFactory = _ref10 => {
     selectionMode,
     multiSelect,
     showCheckbox
-  } = _ref10;
+  } = _ref12;
   const ckbRef = React.useRef(null);
   const trRef = React.useRef(null);
-  const [showCkb, setShowCkb] = React.useState(selected || selectionMode);
   const clickableRow = React.useMemo(() => !showCheckbox && typeof row.clickable === undefined || row.clickable, [showCheckbox, row.clickable]);
   const _onChange = () => {
     !clickableRow && onChange(row.id);
@@ -22519,32 +22611,10 @@ const DefaultRowFactory = _ref10 => {
     showCheckbox && ckbRef.current && e.target !== ckbRef.current && !ckbRef.current.contains(e.target) && row.onClick && row.onClick(e);
     clickableRow && onChange(row.id);
   }, [row, onChange, clickableRow, showCheckbox]);
-  const displayCheckbox = React.useCallback(() => {
-    setShowCkb(true);
-  }, []);
-  const hideCheckbox = React.useCallback(() => {
-    setShowCkb(false);
-  }, []);
-  React.useEffect(() => {
-    const refSave = trRef.current;
-    if (refSave && showCheckbox) {
-      refSave.addEventListener('mouseenter', displayCheckbox);
-      refSave.addEventListener('mouseleave', hideCheckbox);
-      refSave.addEventListener('focus', displayCheckbox);
-      refSave.addEventListener('blur', hideCheckbox);
-    }
-    return () => {
-      if (refSave) {
-        refSave.removeEventListener('mouseenter', displayCheckbox);
-        refSave.removeEventListener('mouseleave', hideCheckbox);
-        refSave.removeEventListener('focus', displayCheckbox);
-        refSave.removeEventListener('blur', hideCheckbox);
-      }
-    };
-  }, [displayCheckbox, hideCheckbox, showCheckbox]);
   const rowData = React.useMemo(() => row.columns.map((column, i) => /*#__PURE__*/React__namespace.default.createElement("td", {
     key: i
   }, typeof column === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Text, null, column) : column)), [row.columns]);
+  const displayBlockCheckbox = React.useMemo(() => selected || selectionMode && multiSelect, [multiSelect, selected, selectionMode]);
   return /*#__PURE__*/React__namespace.default.createElement(TableRow, {
     ref: trRef,
     onClick: onClick,
@@ -22554,13 +22624,14 @@ const DefaultRowFactory = _ref10 => {
     showCheckbox: showCheckbox
   }, /*#__PURE__*/React__namespace.default.createElement("td", null, /*#__PURE__*/React__namespace.default.createElement(Row, {
     mainAlignment: 'center'
-  }, showCheckbox && (showCkb || selected || multiSelect && selectionMode) ? /*#__PURE__*/React__namespace.default.createElement(Checkbox, {
+  }, showCheckbox && /*#__PURE__*/React__namespace.default.createElement(StyledCheckbox, {
     ref: ckbRef,
     size: 'small',
     value: selected,
     onClick: _onChange,
-    iconColor: multiSelect && selectionMode || selected ? 'primary' : 'text'
-  }) : /*#__PURE__*/React__namespace.default.createElement(Text, null, index))), rowData);
+    iconColor: displayBlockCheckbox ? 'primary' : 'text',
+    show: displayBlockCheckbox
+  }), (!showCheckbox || !displayBlockCheckbox) && /*#__PURE__*/React__namespace.default.createElement(StyledText, null, index))), rowData);
 };
 const SELECT_ACTION = {
   TOGGLE: 'toggle',
@@ -22595,7 +22666,7 @@ function selectedReducer(state, action) {
       }
   }
 }
-const Table = /*#__PURE__*/React__namespace.default.forwardRef(function TableFn(_ref11, ref) {
+const Table = /*#__PURE__*/React__namespace.default.forwardRef(function TableFn(_ref13, ref) {
   let {
     rows = [],
     headers = [],
@@ -22607,7 +22678,7 @@ const Table = /*#__PURE__*/React__namespace.default.forwardRef(function TableFn(
     selectedRows,
     multiSelect = true,
     ...rest
-  } = _ref11;
+  } = _ref13;
   const [selected, dispatchSelected] = React.useReducer(selectedReducer, defaultSelection || selectedRows || []);
   const controlledMode = React.useMemo(() => selectedRows !== undefined, [selectedRows]);
   const controlledOnToggle = React.useCallback(id => {
@@ -22845,12 +22916,14 @@ const CustomModal = /*#__PURE__*/React__namespace.default.forwardRef(function Mo
     maxHeight,
     zIndex = 999,
     onClick,
+    containerWindow,
     ...rest
   } = _ref;
   const [delayedOpen, setDelayedOpen] = React.useState(false);
   const {
-    windowObj
+    windowObj: themeWindowObj
   } = React.useContext(styled.ThemeContext);
+  const windowObj = containerWindow ?? themeWindowObj;
   const modalRef = useCombinedRefs(ref);
   const modalContentRef = React.useRef(null);
   const startSentinelRef = React.useRef(null);
@@ -22910,19 +22983,17 @@ const CustomModal = /*#__PURE__*/React__namespace.default.forwardRef(function Mo
     };
   }, [open, onStartSentinelFocus, onEndSentinelFocus, windowObj]);
   React.useEffect(() => {
-    const timeout = setTimeout(() => setDelayedOpen(open), 1);
+    // delay the open of the modal after the show of the portal
+    // in order to make the transition visible
+    const timeout = setTimeout(() => setDelayedOpen(open), TIMERS.MODAL.DELAY_OPEN);
     return () => {
       clearTimeout(timeout);
     };
   }, [open]);
-  const modalWrapperClickHandler = React.useCallback(e => {
-    if (e) {
-      e.preventDefault();
-    }
-  }, []);
   return /*#__PURE__*/React__namespace.default.createElement(Portal, {
     show: open,
-    disablePortal: disablePortal
+    disablePortal: disablePortal,
+    container: windowObj.document.body
   }, /*#__PURE__*/React__namespace.default.createElement(ModalContainer, _extends({
     ref: modalRef,
     open: delayedOpen,
@@ -22936,9 +23007,7 @@ const CustomModal = /*#__PURE__*/React__namespace.default.forwardRef(function Mo
   }), /*#__PURE__*/React__namespace.default.createElement(Transition, {
     type: "scale-in",
     apply: delayedOpen
-  }, /*#__PURE__*/React__namespace.default.createElement(ModalWrapper, {
-    onClick: modalWrapperClickHandler
-  }, /*#__PURE__*/React__namespace.default.createElement(ModalContent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(ModalWrapper, null, /*#__PURE__*/React__namespace.default.createElement(ModalContent, {
     ref: modalContentRef,
     background: background,
     $size: size,
@@ -23173,11 +23242,8 @@ function copyToClipboard(node, windowObj) {
 }
 const Modal = /*#__PURE__*/React__namespace.default.forwardRef(function ModalFn(_ref, ref) {
   let {
-    background = 'gray6',
     type = 'default',
     title: Title,
-    size = 'small',
-    open = false,
     centered = false,
     onConfirm,
     confirmLabel = 'OK',
@@ -23191,113 +23257,21 @@ const Modal = /*#__PURE__*/React__namespace.default.forwardRef(function ModalFn(
     customFooter,
     hideFooter = false,
     showCloseIcon = true,
-    minHeight,
-    maxHeight,
     children,
     containerWindow,
-    disablePortal = false,
-    zIndex = 999,
-    onClick,
     closeIconTooltip,
     ...rest
   } = _ref;
-  const [delayedOpen, setDelayedOpen] = React.useState(false);
   const {
     windowObj: themeWindowObj
   } = React.useContext(styled.ThemeContext);
   const windowObj = containerWindow ?? themeWindowObj;
-  const innerRef = React.useRef(null);
-  const modalRef = useCombinedRefs(ref, innerRef);
-  const modalContentRef = React.useRef(null);
   const modalBodyRef = React.useRef(null);
-  const startSentinelRef = React.useRef(null);
-  const endSentinelRef = React.useRef(null);
-  const onBackdropClick = React.useCallback(e => {
-    if (e) {
-      e.stopPropagation();
-    }
-    if (!e.defaultPrevented && modalContentRef.current && e.target instanceof Node && !modalContentRef.current.contains(e.target) && onClose) {
-      onClose(e);
-    }
-  }, [onClose]);
   const onCopyClipboard = React.useCallback(() => copyToClipboard(modalBodyRef.current, windowObj), [windowObj]);
-  const onStartSentinelFocus = React.useCallback(() => {
-    if (modalContentRef.current) {
-      const nodeList = modalContentRef.current.querySelectorAll('[tabindex]');
-      nodeList[nodeList.length - 1].focus();
-    }
-  }, []);
-  const onEndSentinelFocus = React.useCallback(() => {
-    if (modalContentRef.current != null) {
-      modalContentRef.current.querySelector('[tabindex]')?.focus();
-    }
-  }, []);
-  const escapeEvent = React.useMemo(() => [{
-    type: 'keydown',
-    callback: onClose || _noop,
-    keys: ['Escape'],
-    modifier: false
-  }], [onClose]);
-  useKeyboard(modalRef, escapeEvent);
-  React.useEffect(() => {
-    if (open) {
-      const defaultOverflowY = windowObj.document.body.style.overflowY;
-      const defaultPaddingRight = windowObj.document.body.style.paddingRight;
-      windowObj.document.body.style.overflowY = 'hidden';
-      modalRef.current != null && isBodyOverflowing(modalRef, windowObj) && (windowObj.document.body.style.paddingRight = `${getScrollbarSize(windowObj)}px`);
-      return () => {
-        windowObj.document.body.style.overflowY = defaultOverflowY;
-        windowObj.document.body.style.paddingRight = defaultPaddingRight;
-      };
-    }
-    return () => undefined;
-  }, [modalRef, open, windowObj]);
-  React.useEffect(() => {
-    const focusedElement = windowObj.document.activeElement;
-    if (open) {
-      modalContentRef.current?.focus();
-      startSentinelRef.current?.addEventListener('focus', onStartSentinelFocus);
-      endSentinelRef.current?.addEventListener('focus', onEndSentinelFocus);
-    }
-    const startSentinelRefSave = startSentinelRef.current;
-    const endSentinelRefSave = endSentinelRef.current;
-    return () => {
-      startSentinelRefSave && startSentinelRefSave.removeEventListener('focus', onStartSentinelFocus);
-      endSentinelRefSave && endSentinelRefSave.removeEventListener('focus', onEndSentinelFocus);
-      open && focusedElement && focusedElement.focus();
-    };
-  }, [open, onStartSentinelFocus, onEndSentinelFocus, windowObj]);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => setDelayedOpen(open), 1);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [open]);
-  return /*#__PURE__*/React__namespace.default.createElement(Portal, {
-    show: open,
-    disablePortal: disablePortal,
-    container: windowObj.document.body
-  }, /*#__PURE__*/React__namespace.default.createElement(ModalContainer, _extends({
-    ref: modalRef,
-    open: delayedOpen,
-    mounted: open,
-    onClick: onBackdropClick,
-    zIndex: zIndex,
-    "data-testid": "modal"
-  }, rest), /*#__PURE__*/React__namespace.default.createElement("div", {
-    tabIndex: 0,
-    ref: startSentinelRef
-  }), /*#__PURE__*/React__namespace.default.createElement(Transition, {
-    type: "scale-in",
-    apply: delayedOpen
-  }, /*#__PURE__*/React__namespace.default.createElement(ModalWrapper, null, /*#__PURE__*/React__namespace.default.createElement(ModalContent, {
-    ref: modalContentRef,
-    background: background,
-    $size: size,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
-    onClick: onClick
-  }, /*#__PURE__*/React__namespace.default.createElement(ModalHeader, {
+  return /*#__PURE__*/React__namespace.default.createElement(CustomModal, _extends({
+    onClose: onClose,
+    ref: ref
+  }, rest), /*#__PURE__*/React__namespace.default.createElement(ModalHeader, {
     centered: centered,
     type: type,
     title: Title,
@@ -23321,9 +23295,6 @@ const Modal = /*#__PURE__*/React__namespace.default.forwardRef(function ModalFn(
     secondaryActionLabel: secondaryActionLabel,
     onErrorAction: onCopyClipboard,
     errorActionLabel: copyLabel
-  }))))), /*#__PURE__*/React__namespace.default.createElement("div", {
-    tabIndex: 0,
-    ref: endSentinelRef
   })));
 });
 
@@ -23772,7 +23743,7 @@ const Snackbar = /*#__PURE__*/React__namespace.default.forwardRef(function Snack
     "data-testid": "snackbar",
     padding: {
       top: '0.5rem',
-      right: '0.5rem',
+      right: hideButton ? '1.5rem' : '0.5rem',
       bottom: '0.5rem',
       left: '1.5rem'
     },
@@ -25886,6 +25857,24 @@ const SvgBug = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
 }));
 var SvgBug$1 = SvgBug;
 
+const SvgBuilding = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  d: "M9 9V4a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h3Zm3-3.4a.6.6 0 0 1 .6-.6h.8a.6.6 0 0 1 .6.6v.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6v-.8Zm3.6-.6a.6.6 0 0 0-.6.6v.8a.6.6 0 0 0 .6.6h.8a.6.6 0 0 0 .6-.6v-.8a.6.6 0 0 0-.6-.6h-.8ZM12 8.6a.6.6 0 0 1 .6-.6h.8a.6.6 0 0 1 .6.6v.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6v-.8Zm3.6-.6a.6.6 0 0 0-.6.6v.8a.6.6 0 0 0 .6.6h.8a.6.6 0 0 0 .6-.6v-.8a.6.6 0 0 0-.6-.6h-.8ZM12 11.6a.6.6 0 0 1 .6-.6h.8a.6.6 0 0 1 .6.6v.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6v-.8Zm3.6-.6a.6.6 0 0 0-.6.6v.8a.6.6 0 0 0 .6.6h.8a.6.6 0 0 0 .6-.6v-.8a.6.6 0 0 0-.6-.6h-.8ZM12 14.6a.6.6 0 0 1 .6-.6h.8a.6.6 0 0 1 .6.6v.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6v-.8Zm3.6-.6a.6.6 0 0 0-.6.6v.8a.6.6 0 0 0 .6.6h.8a.6.6 0 0 0 .6-.6v-.8a.6.6 0 0 0-.6-.6h-.8ZM7 12.6a.6.6 0 0 1 .6-.6h.8a.6.6 0 0 1 .6.6v.8a.6.6 0 0 1-.6.6h-.8a.6.6 0 0 1-.6-.6v-.8Zm.6 2.4a.6.6 0 0 0-.6.6v.8a.6.6 0 0 0 .6.6h.8a.6.6 0 0 0 .6-.6v-.8a.6.6 0 0 0-.6-.6h-.8Z",
+  clipRule: "evenodd"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M0 0h24v24H0z"
+}))));
+var SvgBuilding$1 = SvgBuilding;
+
 const SvgBulb = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -29713,6 +29702,7 @@ var fillData = /*#__PURE__*/Object.freeze({
   Brush: SvgBrush$1,
   Bucket: SvgBucket$1,
   Bug: SvgBug$1,
+  Building: SvgBuilding$1,
   Bulb: SvgBulb$1,
   Cake: SvgCake$1,
   Calendar: SvgCalendar$1,
@@ -30849,6 +30839,84 @@ const SvgBugOutline = props => /*#__PURE__*/React__namespace.createElement("svg"
 }));
 var SvgBugOutline$1 = SvgBugOutline;
 
+const SvgBuildingOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  d: "M9 4v5H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Zm2 0h7v16H6v-9h5V4Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 12,
+  y: 5,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 15,
+  y: 5,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 12,
+  y: 8,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 15,
+  y: 8,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 12,
+  y: 11,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 15,
+  y: 11,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 12,
+  y: 14,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 15,
+  y: 14,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 7,
+  y: 12,
+  rx: 0.6
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 7,
+  y: 15,
+  rx: 0.6
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M0 0h24v24H0z"
+}))));
+var SvgBuildingOutline$1 = SvgBuildingOutline;
+
 const SvgBulbOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -35028,6 +35096,7 @@ var outlineData = /*#__PURE__*/Object.freeze({
   BrushOutline: SvgBrushOutline$1,
   BucketOutline: SvgBucketOutline$1,
   BugOutline: SvgBugOutline$1,
+  BuildingOutline: SvgBuildingOutline$1,
   BulbOutline: SvgBulbOutline$1,
   CakeOutline: SvgCakeOutline$1,
   CalendarBookShareWithMeOutline: SvgCalendarBookShareWithMeOutline$1,