@economic/taco 1.22.8 → 1.23.0

package/dist/taco.cjs.development.js

@@ -6,8 +6,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var cn = _interopDefault(require('classnames'));
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ReactDayPicker = _interopDefault(require('react-day-picker'));
@@ -45,131 +45,95 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
 
-/* eslint-disable @typescript-eslint/no-empty-function */
-const AlertDialogContext = /*#__PURE__*/React__default.createContext({
-  props: {},
-  ref: null
-});
-const useCurrentAlertDialog = () => {
-  return React__default.useContext(AlertDialogContext);
+const AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
+const getColorByState = state => {
+  switch (state) {
+    case 'information':
+      return 'blue';
+    case 'warning':
+      return 'yellow';
+    case 'error':
+      return 'red';
+    case 'success':
+      return 'green';
+    default:
+      return 'grey';
+  }
 };
-
-function mergeRefs(refs) {
-  return value => {
-    refs.forEach(ref => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}
-
-const Trigger = /*#__PURE__*/React.forwardRef(function AlertDialogTrigger(props, externalRef) {
-  const {
-    ref: parentRef,
-    props: parentProps
-  } = useCurrentAlertDialog();
-  const refCallback = mergeRefs([parentRef, externalRef]);
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Trigger, Object.assign({}, parentProps, props, {
-    ref: refCallback,
-    asChild: true
-  }));
-});
-
-const Footer = /*#__PURE__*/React.forwardRef(function AlertDialogFooter(props, ref) {
-  const className = 'flex justify-end gap-2';
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }), props.children);
-});
-const Cancel = /*#__PURE__*/React.forwardRef(function AlertDialogCancel(props, ref) {
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Cancel, Object.assign({}, props, {
-    ref: ref,
-    asChild: true
-  }));
-});
-const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, ref) {
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Action, Object.assign({}, props, {
-    className: props.className,
-    ref: ref,
-    asChild: true
-  }));
-});
-
-const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible', props.className);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: className,
-    "data-taco": "backdrop",
-    ref: ref
-  }));
-});
-
-const getDialogSizeClassnames = size => {
-  switch (size) {
-    case 'dialog':
-      return 'w-128';
-    case 'xs':
-      return 'w-xs';
-    case 'sm':
-      return 'w-sm';
-    case 'md':
-      return 'w-md';
-    case 'lg':
-      return 'w-lg';
+const getOutlineColorShadeClasses = state => {
+  switch (state) {
+    case 'green':
+      return 'border-green-700 text-green-700';
+    case 'yellow':
+      return 'border-yellow-700 text-yellow-700';
+    case 'red':
+      return 'border-red-500 text-red-500';
+    case 'blue':
+      return 'border-blue-500 text-blue-500';
+    case 'purple':
+      return 'border-purple-700 text-purple-700';
+    case 'brown':
+      return 'border-brown-700 text-brown-700';
+    case 'pink':
+      return 'border-pink-700 text-pink-700';
+    case 'orange':
+      return 'border-orange-700 text-orange-700';
+    case 'transparent':
+    case 'grey':
+    default:
+      return 'border-grey-700 text-grey-700';
+  }
+};
+const getSubtleColorShadeClasses = value => {
+  switch (value) {
+    case 'green':
+      return 'wcag-green-100';
+    case 'yellow':
+      return 'wcag-yellow-100';
+    case 'red':
+      return 'wcag-red-100';
+    case 'blue':
+      return 'wcag-blue-100';
+    case 'purple':
+      return 'wcag-purple-100';
+    case 'brown':
+      return 'wcag-brown-100';
+    case 'pink':
+      return 'wcag-pink-100';
+    case 'orange':
+      return 'wcag-orange-100';
+    case 'transparent':
+      return 'wcag-transparent';
+    case 'grey':
+    default:
+      return 'wcag-grey-200';
+  }
+};
+const getColorShadeClasses = value => {
+  switch (value) {
+    case 'green':
+      return 'wcag-green-700';
+    case 'yellow':
+      return 'wcag-yellow-500';
+    case 'red':
+      return 'wcag-red-500';
+    case 'blue':
+      return 'wcag-blue-500';
+    case 'purple':
+      return 'wcag-purple-700';
+    case 'brown':
+      return 'wcag-brown-700';
+    case 'pink':
+      return 'wcag-pink-500';
+    case 'orange':
+      return 'wcag-orange-700';
+    case 'transparent':
+      return 'wcag-transparent';
+    case 'grey':
+    default:
+      return 'wcag-grey-700';
   }
 };
-const getDialogPositionClassnames = () => 'mt-16 mx-auto';
-const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
-
-const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref) {
-  const className = cn('text-center', props.className);
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Title, Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
-const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
-  const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Content, Object.assign({}, props, {
-    ref: ref,
-    className: className,
-    onEscapeKeyDown: event => event.preventDefault()
-  }), props.children))));
-});
-
-const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, ref) {
-  const {
-    children: initialChildren,
-    defaultOpen,
-    onChange,
-    open,
-    trigger,
-    ...otherProps
-  } = props;
-  const context = React.useMemo(() => ({
-    props: otherProps,
-    ref
-  }), [open, otherProps]);
-  return /*#__PURE__*/React.createElement(AlertDialogContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Root, Object.assign({}, props, {
-    defaultOpen: defaultOpen,
-    open: open,
-    onOpenChange: onChange
-  }), trigger && /*#__PURE__*/React.createElement(Trigger, null, trigger), props.children));
-});
-AlertDialog.Trigger = Trigger;
-AlertDialog.Content = Content;
-AlertDialog.Title = Title;
-AlertDialog.Cancel = Cancel;
-AlertDialog.Action = Action;
-AlertDialog.Footer = Footer;
 
 function IconAccountPreview(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -3249,6 +3213,196 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
+const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+  const {
+    color,
+    icon,
+    subtle,
+    ...otherProps
+  } = props;
+  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center w-5 h-5 border-transparent [&>*]:max-h-full`, {
+    [getSubtleColorShadeClasses(color)]: subtle,
+    [getColorShadeClasses(color)]: !subtle
+  }, props.className);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
+    "aria-label": "icon",
+    className: className,
+    "data-taco": "badge-icon",
+    ref: ref,
+    role: "status",
+    title: props['aria-label']
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: icon
+  }));
+});
+
+const getIconName = state => {
+  switch (state) {
+    case 'information':
+      return 'info';
+    case 'warning':
+      return 'warning';
+    case 'error':
+      return 'close';
+    case 'success':
+      return 'tick';
+    default:
+      return 'refresh';
+  }
+};
+const Alert = /*#__PURE__*/React__default.forwardRef(function Alert(props, ref) {
+  const {
+    children,
+    title,
+    state,
+    onClose
+  } = props;
+  const className = cn(`flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(getColorByState(state))}`, props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    ref: ref,
+    className: className,
+    role: "alert"
+  }), /*#__PURE__*/React__default.createElement(BadgeIcon, {
+    className: "flex-none",
+    icon: getIconName(state),
+    color: getColorByState(state)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "grow text-sm"
+  }, title && /*#__PURE__*/React__default.createElement("div", {
+    className: "font-bold"
+  }, title), children), onClose && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "flex-none cursor-pointer",
+    name: "close",
+    onClick: onClose
+  }));
+});
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const AlertDialogContext = /*#__PURE__*/React__default.createContext({
+  props: {},
+  ref: null
+});
+const useCurrentAlertDialog = () => {
+  return React__default.useContext(AlertDialogContext);
+};
+
+function mergeRefs(refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+const Trigger = /*#__PURE__*/React.forwardRef(function AlertDialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentAlertDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Trigger, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }));
+});
+
+const Footer = /*#__PURE__*/React.forwardRef(function AlertDialogFooter(props, ref) {
+  const className = 'flex justify-end gap-2';
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+const Cancel = /*#__PURE__*/React.forwardRef(function AlertDialogCancel(props, ref) {
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Cancel, Object.assign({}, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, ref) {
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Action, Object.assign({}, props, {
+    className: props.className,
+    ref: ref,
+    asChild: true
+  }));
+});
+
+const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible', props.className);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "backdrop",
+    ref: ref
+  }));
+});
+
+const getDialogSizeClassnames = size => {
+  switch (size) {
+    case 'dialog':
+      return 'w-128';
+    case 'xs':
+      return 'w-xs';
+    case 'sm':
+      return 'w-sm';
+    case 'md':
+      return 'w-md';
+    case 'lg':
+      return 'w-lg';
+  }
+};
+const getDialogPositionClassnames = () => 'mt-16 mx-auto';
+const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
+
+const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref) {
+  const className = cn('text-center', props.className);
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Title, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
+  const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Content, Object.assign({}, props, {
+    ref: ref,
+    className: className,
+    onEscapeKeyDown: event => event.preventDefault()
+  }), props.children))));
+});
+
+const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, ref) {
+  const {
+    children: initialChildren,
+    defaultOpen,
+    onChange,
+    open,
+    trigger,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    props: otherProps,
+    ref
+  }), [open, otherProps]);
+  return /*#__PURE__*/React.createElement(AlertDialogContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Root, Object.assign({}, props, {
+    defaultOpen: defaultOpen,
+    open: open,
+    onOpenChange: onChange
+  }), trigger && /*#__PURE__*/React.createElement(Trigger, null, trigger), props.children));
+});
+AlertDialog.Trigger = Trigger;
+AlertDialog.Content = Content;
+AlertDialog.Title = Title;
+AlertDialog.Cancel = Cancel;
+AlertDialog.Action = Action;
+AlertDialog.Footer = Footer;
+
 const AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
 });
@@ -3335,51 +3489,40 @@ const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(pro
   }));
 });
 
-const getStateClasses = value => {
-  switch (value) {
-    case 'information':
-      return 'yt-blue-solid';
-    case 'warning':
-      return 'yt-yellow-solid';
-    case 'error':
-      return 'yt-red-solid';
-    case 'success':
-      return 'yt-green-solid';
-    default:
-      return 'yt-grey-solid';
-  }
-};
-const getOutlineClasses = state => {
-  switch (state) {
-    case 'information':
-    case 'primary':
-      return 'yt-blue-inverted';
-    case 'warning':
-      return 'yt-yellow-inverted';
-    case 'error':
-    case 'danger':
-      return 'yt-red-inverted';
-    case 'success':
-      return 'yt-green-inverted';
-    default:
-      return 'yt-grey-inverted';
-  }
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
   const {
     children,
     compact = false,
     outline = false,
-    state,
+    status = false,
+    subtle = false,
+    small = false,
+    color,
     ...otherProps
   } = props;
-  const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
-    [getOutlineClasses(state)]: outline,
-    [`border-transparent ${getStateClasses(state)}`]: !outline,
+  const isTransparent = color === 'transparent';
+  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+    [`border ${getOutlineColorShadeClasses(color)}`]: outline,
+    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
-    'h-5 py-0 px-1.5': !compact
+    'font-bold': outline || !subtle,
+    'text-sm': !small,
+    'h-5 py-0 px-1.5': !compact && !small,
+    '!bg-grey-700': compact && isTransparent
   }, props.className);
+  const content = () => {
+    if (compact) {
+      return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
+    }
+    if (status) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
+      }), children);
+    }
+    return children;
+  };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3388,7 +3531,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ref: ref,
     role: "status",
     title: props['aria-label']
-  }), compact ? /*#__PURE__*/React.createElement(VisuallyHidden, null, children) : children);
+  }), content());
 });
 
 const getBannerIcon = type => {
@@ -6892,6 +7035,7 @@ const useSelect = ({
   onClick,
   onChange,
   readOnly,
+  tabIndex,
   value,
   ...otherProps
 }, ref) => {
@@ -7019,6 +7163,7 @@ const useSelect = ({
     disabled: disabled || readOnly,
     id: buttonId,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
+    tabIndex,
     type: 'button'
   };
   const listbox = {
@@ -7653,6 +7798,12 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     if (event.target !== event.currentTarget) {
       return;
     }
+    if (otherProps.onKeyDown) {
+      otherProps.onKeyDown(event);
+    }
+    if (event.isDefaultPrevented()) {
+      return;
+    }
     const options = getOptionsFromCollection(event.currentTarget, querySelector);
     if (options) {
       if (isAriaDirectionKey(event)) {
@@ -7750,9 +7901,9 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
   }, /*#__PURE__*/React__default.createElement(Root, Object.assign({}, otherProps, {
     "aria-multiselectable": multiple ? true : undefined,
     id: id,
+    querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
     ref: ref,
-    role: "listbox",
-    querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
+    role: "listbox"
   }), children)));
 });
 const createListboxValueSetter = (multiple, setValue) => nextValue => {
@@ -7860,17 +8011,6 @@ const Title$3 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(pr
   }));
 });
 
-const TAG_COLORS = {
-  green: 'wcag-green-100',
-  yellow: 'wcag-yellow-100',
-  red: 'wcag-red-100',
-  blue: 'wcag-blue-100',
-  purple: 'wcag-purple-100',
-  orange: 'wcag-orange-100',
-  brown: 'wcag-brown-100',
-  pink: 'wcag-pink-100',
-  grey: 'wcag-grey-200'
-};
 const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     children,
@@ -7887,7 +8027,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     'hover:bg-opacity-75': !disabled,
     'cursor-pointer': !!otherProps.onClick,
     'pointer-events-none': disabled || readOnly
-  }, color ? TAG_COLORS[color] : TAG_COLORS.grey, props.className);
+  }, getSubtleColorShadeClasses(color), props.className);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -7907,7 +8047,9 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }) : null);
 });
 
-const createOptionClassName = () => 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:wcag-grey-200 aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
+const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none', {
+  'hover:wcag-grey-200': !shouldPauseHoverState
+});
 const createCollectionClassName = () => 'flex flex-col gap-px';
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
@@ -7943,7 +8085,6 @@ function _finallyRethrows(body, finalizer) {
   return finalizer(false, result);
 }
 
-const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(TAG_COLORS);
 const EditPopover = props => {
   const {
     color: initialColor,
@@ -8104,7 +8245,7 @@ const Colours = props => {
     value: color
   }, AVAILABLE_COLORS.map(availableColor => /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
     "aria-label": color,
-    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', TAG_COLORS[availableColor]),
+    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', getSubtleColorShadeClasses(availableColor)),
     key: availableColor,
     onFocus: () => onChangeColor(availableColor),
     value: availableColor
@@ -8128,7 +8269,6 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     icon,
     ...otherProps
   } = props;
-  const className = createOptionClassName();
   const {
     onDelete,
     onEdit,
@@ -8136,9 +8276,11 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     multiple,
     ref: selectRef,
     setOpen,
+    shouldPauseHoverState,
     tags,
     value
   } = useSelect2Context();
+  const className = createOptionClassName(shouldPauseHoverState);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -8507,7 +8649,7 @@ const useIsFormControl = (ref, reset) => {
         formElement.removeEventListener('reset', reset);
       }
     };
-  }, [ref]);
+  }, [ref.current]);
   return isFormControl;
 };
 
@@ -8767,12 +8909,26 @@ const Collection = props => {
   }, children);
 };
 
+const useIsHoverStatePaused = () => {
+  const [shouldPauseHoverState, setShouldPauseHoverState] = React__default.useState(false);
+  // as soon as the mouse starts moving again, unpause hover state
+  React__default.useEffect(() => {
+    const move = () => setShouldPauseHoverState(false);
+    if (shouldPauseHoverState) {
+      document.addEventListener('mousemove', move);
+    }
+    return () => {
+      document.removeEventListener('mousemove', move);
+    };
+  }, [shouldPauseHoverState]);
+  return [shouldPauseHoverState, setShouldPauseHoverState];
+};
+
 const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, ref) {
   const {
     children: initialChildren,
     defaultValue: defaultProp,
     disabled = false,
-    disableSearch = false,
     emptyValue = undefined,
     highlighted = false,
     invalid = false,
@@ -8783,7 +8939,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     onDelete,
     onEdit,
     readOnly = false,
-    tabIndex = 0,
     tags = false,
     value: prop,
     ...otherProps
@@ -8808,6 +8963,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   });
   const setValue = createListboxValueSetter(multiple, _setValue);
   const [validationError, setValidationError] = React__default.useState();
+  const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();
   const {
     flattenedChildren,
     filteredChildren,
@@ -8840,6 +8996,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     setSearchQuery,
     setValidationError,
     setValue,
+    shouldPauseHoverState,
+    setShouldPauseHoverState,
     tags,
     validationError,
     value
@@ -8872,6 +9030,11 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       }
     };
   }
+  const handleListboxKeyDown = event => {
+    if (isAriaDirectionKey(event)) {
+      setShouldPauseHoverState(true);
+    }
+  };
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -8916,7 +9079,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, !disableSearch && (flattenedChildren.length > 0 || onCreate) ? /*#__PURE__*/React__default.createElement(Search$1, {
+  }, flattenedChildren.length > 0 || onCreate ? /*#__PURE__*/React__default.createElement(Search$1, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef
   }) : null, flattenedChildren.length <= 0 ? /*#__PURE__*/React__default.createElement("div", {
@@ -8927,6 +9090,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     customSelector: ":scope > button",
     disabled: disabled,
     multiple: multiple,
+    onKeyDown: handleListboxKeyDown,
     readOnly: readOnly,
     ref: listboxRef,
     setValue: setValue,
@@ -10468,13 +10632,15 @@ const RowContext = /*#__PURE__*/React__default.createContext({
     rowMoveReason: {},
     setRowMoveReason: () => undefined
   },
+  rowIndex: undefined,
   isHovered: false,
   setIsHovered: () => undefined
 });
 const RowContextProvider = ({
   isActiveRow,
   children,
-  meta
+  meta,
+  rowIndex
 }) => {
   // we use non-css hovered state to determine whether to render actions or not, for performance
   const [isHovered, setIsHovered] = React__default.useState(false);
@@ -10501,10 +10667,11 @@ const RowContextProvider = ({
         rowMoveReason,
         setRowMoveReason
       },
+      rowIndex,
       isHovered,
       setIsHovered
     };
-  }, [isActiveRow, isHovered, rowMoveReason, validationErrors]);
+  }, [isActiveRow, isHovered, rowMoveReason, validationErrors, rowIndex]);
   return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
     value: context
   }, children);
@@ -10762,7 +10929,8 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
 }) => {
   const {
     isActive,
-    isHovered
+    isHovered,
+    rowIndex
   } = useRowContext();
   if (!isActive && (!isHovered || shouldPauseHoverState) || isEditing) {
     return null;
@@ -10799,6 +10967,7 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
     icon: "more",
     onClick: event => {
       event.preventDefault();
+      table.options.meta.setActiveRowIndex(rowIndex);
     },
     tabIndex: tabIndex,
     menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, visibleMoreActions.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, {
@@ -12048,16 +12217,17 @@ function useColumnDefinitions(children, options, tableRef) {
           accessorKey: child.props.accessor,
           id: child.props.accessor,
           cell: props => {
-            const value = props.getValue();
+            var _value;
+            let value = props.getValue();
             if (typeof child.props.renderer === 'function') {
-              return child.props.renderer(value, props.row.original);
+              value = child.props.renderer(value, props.row.original);
             }
             if (typeof value === 'string' || typeof value === 'number') {
               return /*#__PURE__*/React__default.createElement("span", {
                 className: "truncate"
               }, value);
             }
-            return value !== null && value !== void 0 ? value : null;
+            return (_value = value) !== null && _value !== void 0 ? _value : null;
           },
           header: child.props.header,
           meta: {
@@ -12214,21 +12384,6 @@ const useActiveRowStateListener = (table, rows, activeRowIndex) => {
   }, [table.getState().columnFilters, rows.length]);
 };
 
-const useShouldPauseHoverState = () => {
-  const [shouldPauseHoverState, setShouldPauseHoverState] = React__default.useState(false);
-  // as soon as the mouse starts moving again, unpause hover state
-  React__default.useEffect(() => {
-    const move = () => setShouldPauseHoverState(false);
-    if (shouldPauseHoverState) {
-      document.addEventListener('mousemove', move);
-    }
-    return () => {
-      document.removeEventListener('mousemove', move);
-    };
-  }, [shouldPauseHoverState]);
-  return [shouldPauseHoverState, setShouldPauseHoverState];
-};
-
 function useTable$1(children, props, ref) {
   var _settings$columnOrder, _ref, _settings$columnPinni, _settings$columnPinni2, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
@@ -12296,7 +12451,7 @@ function useTable$1(children, props, ref) {
   const dataColumnEndOffset = actionsForRow.length ? 1 : 0;
   // custom
   const activeRow = useActiveRow(defaultActiveRowIndex);
-  const [shouldPauseHoverState, setShouldPauseHoverState] = useShouldPauseHoverState();
+  const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();
   const editMode = useEditMode(onSave);
   const [columnOffsets, setColumnOffsets] = React__default.useState({});
   const [rowDensity, setRowDensity] = React__default.useState((_settings$rowDensity = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _settings$rowDensity !== void 0 ? _settings$rowDensity : 'normal');
@@ -12837,21 +12992,23 @@ const ColumnSettingsButton = ({
       align: "end"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-60 flex-col gap-2"
-    }, /*#__PURE__*/React__default.createElement(Input, {
+    }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
       onChange: event => setQuery(event.target.value),
       placeholder: texts.table2.columnSettings.search,
       value: query
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }) : null, /*#__PURE__*/React__default.createElement("div", {
       className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
-    }, query ? columns.filter(column => {
+    }, query ? /*#__PURE__*/React__default.createElement("div", {
+      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
+    }, columns.filter(column => {
       var _column$columnDef$hea2;
-      return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().includes(query);
+      return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().toLowerCase().includes(query.toLowerCase());
     }).map(column => /*#__PURE__*/React__default.createElement(OrderableColumn, {
       key: column.id,
       canBeReordered: false,
       column: column,
       isReorderingAllowed: false
-    })) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
+    }))) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
       state: state,
       moveColumn: pinColumn,
       reorderColumn: reorderColumn,
@@ -13003,7 +13160,8 @@ const Row$1 = props => {
   const isActiveRow = meta.activeRowIndex === props.rowIndex;
   return /*#__PURE__*/React__default.createElement(RowContextProvider, {
     isActiveRow: isActiveRow,
-    meta: props.table.options.meta
+    meta: props.table.options.meta,
+    rowIndex: props.rowIndex
   }, /*#__PURE__*/React__default.createElement(InternalRow, Object.assign({}, props)));
 };
 
@@ -14096,9 +14254,11 @@ const useOnClickOutside = (ref, callback) => {
 };
 
 exports.Accordion = Accordion;
+exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
+exports.BadgeIcon = BadgeIcon;
 exports.Banner = Banner;
 exports.Base = Base;
 exports.Button = Button$1;
@@ -14134,7 +14294,6 @@ exports.Select2 = Select2;
 exports.Shortcut = Shortcut$1;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
-exports.TAG_COLORS = TAG_COLORS;
 exports.Table = Table;
 exports.Table2 = Table2;
 exports.Tabs = Tabs;