@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.127

package/dist/taco.cjs.development.js

@@ -14,7 +14,6 @@ var uuid = require('uuid');
 var framerMotion = require('framer-motion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var keycode = _interopDefault(require('keycode'));
 var debounce = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -517,6 +516,22 @@ function IconChevronLeftDouble(props, svgRef) {
 
 var ChevronLeftDouble = /*#__PURE__*/React.forwardRef(IconChevronLeftDouble);
 
+function IconChevronLeftSolid(props, svgRef) {
+  return React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.5 6.207a.5.5 0 00-.854-.353l-5.792 5.792a.5.5 0 000 .708l5.792 5.792a.5.5 0 00.854-.353V6.207z",
+    fill: "currentColor"
+  }));
+}
+
+var ChevronLeftSolid = /*#__PURE__*/React.forwardRef(IconChevronLeftSolid);
+
 function IconChevronLeft(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -545,6 +560,22 @@ function IconChevronRightDouble(props, svgRef) {
 
 var ChevronRightDouble = /*#__PURE__*/React.forwardRef(IconChevronRightDouble);
 
+function IconChevronRightSolid(props, svgRef) {
+  return React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.5 17.793a.5.5 0 00.854.353l5.792-5.792a.5.5 0 000-.708L9.354 5.854a.5.5 0 00-.854.353v11.586z",
+    fill: "currentColor"
+  }));
+}
+
+var ChevronRightSolid = /*#__PURE__*/React.forwardRef(IconChevronRightSolid);
+
 function IconChevronRight(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3025,8 +3056,10 @@ const icons = {
   'chevron-down-solid': ChevronDownSolid,
   'chevron-down': ChevronDown,
   'chevron-left-double': ChevronLeftDouble,
+  'chevron-left-solid': ChevronLeftSolid,
   'chevron-left': ChevronLeft,
   'chevron-right-double': ChevronRightDouble,
+  'chevron-right-solid': ChevronRightSolid,
   'chevron-right': ChevronRight,
   'chevron-up-double': ChevronUpDouble,
   'chevron-up-solid': ChevronUpSolid,
@@ -3203,17 +3236,17 @@ const icons = {
   zoom: Zoom
 };
 
-var _excluded = ["name"];
-var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  var name = props.name,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var Component = icons[name];
+  const {
+    name,
+    ...otherProps
+  } = props;
+  const Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  var className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
+  const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
@@ -3225,7 +3258,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
-var _excluded$1 = ["id"],
+var _excluded = ["id"],
     _excluded2 = ["id", "defaultId", "onChange", "as"];
 var AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
@@ -3263,7 +3296,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
 
 var Item = function Item(props) {
   var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
     value: id
@@ -3318,7 +3351,7 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
   }));
 });
 
-var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
+const VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
   return React.createElement("span", Object.assign({}, props, {
     className: "sr-only",
     ref: ref
@@ -3364,7 +3397,7 @@ const getOutlineClasses = state => {
   }
 };
 
-var _excluded$2 = ["children", "compact", "outline", "state"];
+var _excluded$1 = ["children", "compact", "outline", "state"];
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
   var _cn;
 
@@ -3374,9 +3407,9 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
       _props$outline = props.outline,
       outline = _props$outline === void 0 ? false : _props$outline,
       state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
+  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3436,13 +3469,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? React.createElement("span", null, child) : child) : props.children);
 });
 
-var _excluded$3 = ["title", "children", "placement"];
-var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
-  var title = props.title,
-      children = props.children,
-      placement = props.placement,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-
+const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
+  const {
+    title,
+    children,
+    placement,
+    ...otherProps
+  } = props;
   return React.createElement(TooltipPrimitive.Root, {
     delayDuration: 50
   }, React.createElement(TooltipPrimitive.Trigger, {
@@ -3534,14 +3567,13 @@ const createButton = (props, className, ref) => {
   return button;
 };
 
-var _excluded$4 = ["icon", "rounded"];
-var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
-  var icon = props.icon,
-      _props$rounded = props.rounded,
-      rounded = _props$rounded === void 0 ? false : _props$rounded,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
-
-  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
+  const {
+    icon,
+    rounded = false,
+    ...otherProps
+  } = props;
+  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3552,13 +3584,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton(_extends({}, otherProps, {
+  return createButton({ ...otherProps,
     children: React.createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
     }),
     'data-taco': 'icon-button'
-  }), className, ref);
+  }, className, ref);
 });
 
 var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
@@ -3578,10 +3610,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$5 = ["fluid"];
+var _excluded$2 = ["fluid"];
 var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
   var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3652,27 +3684,21 @@ function useTimer(duration = 0, callback) {
   };
 }
 
-var _excluded$6 = ["delay", "label"];
-var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
-  var _props$delay = props.delay,
-      delay = _props$delay === void 0 ? 500 : _props$delay,
-      label = props.label,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
-
-  var _React$useState = React__default.useState(!delay),
-      visible = _React$useState[0],
-      setVisibility = _React$useState[1];
-
-  React__default.useEffect(function () {
-    var timeout;
+const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  const {
+    delay = 500,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
+  React__default.useEffect(() => {
+    let timeout;
 
     if (delay) {
-      timeout = window.setTimeout(function () {
-        return setVisibility(true);
-      }, delay);
+      timeout = window.setTimeout(() => setVisibility(true), delay);
     }
 
-    return function () {
+    return () => {
       if (timeout) {
         clearTimeout(timeout);
       }
@@ -3683,7 +3709,7 @@ var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
     return null;
   }
 
-  var className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "spinner",
@@ -3763,6 +3789,11 @@ const Toast = ({
   });
   const timer = useTimer(autoClose, handleClose);
   const controls = framerMotion.useAnimation();
+
+  if (!content) {
+    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
+  }
+
   React__default.useEffect(() => {
     if (autoClose) {
       timer.start();
@@ -3798,7 +3829,7 @@ const Toast = ({
     "data-taco": "toast",
     onMouseEnter: timer.pause,
     onMouseLeave: timer.resume
-  }), getBadgeIcon(type), content && React__default.createElement("div", {
+  }), getBadgeIcon(type), React__default.createElement("div", {
     className: "flex-grow"
   }, content), React__default.createElement(IconButton, {
     appearance: "discrete",
@@ -3809,62 +3840,49 @@ const Toast = ({
   }));
 };
 
-var _excluded$7 = ["children"];
-var DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
-var ToastContext = /*#__PURE__*/React.createContext({});
+const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
+const ToastContext = /*#__PURE__*/React.createContext({});
 
-var insertToastWithoutDuplicates = function insertToastWithoutDuplicates(currentToasts, id, content, options, close) {
-  var nextToasts = [].concat(currentToasts);
-  var existingToastIndex = currentToasts.findIndex(function (toast) {
-    return JSON.stringify(toast.content) === JSON.stringify(content);
-  });
+const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
+  const nextToasts = [...currentToasts];
+  const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
 
   if (existingToastIndex > -1) {
     nextToasts[existingToastIndex].lastDuplicateId = id;
     nextToasts[existingToastIndex].lastUpdated = Date.now();
   } else {
     nextToasts.push({
-      id: id,
+      id,
       content: typeof content === 'function' ? content(close) : content,
-      options: options
+      options
     });
   }
 
   return nextToasts;
 };
 
-var ToastProvider = function ToastProvider(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  var _React$useState = React.useState([]),
-      toasts = _React$useState[0],
-      setToasts = _React$useState[1];
+const ToastProvider = ({
+  children,
+  ...props
+}) => {
+  const [toasts, setToasts] = React.useState([]);
 
-  var handleClose = function handleClose(id) {
-    setToasts(function (currentToasts) {
-      return currentToasts.filter(function (toast) {
-        return toast.id !== id;
-      });
-    });
+  const handleClose = id => {
+    setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
   }; // memoize (useCallback) this function,
   // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
 
 
-  var toaster = React.useCallback(function (content, options) {
-    var id = uuid.v4();
+  const toaster = React.useCallback((content, options) => {
+    const id = uuid.v4();
 
-    var close = function close() {
-      return handleClose(id);
-    };
+    const close = () => handleClose(id);
 
-    setToasts(function (currentToasts) {
-      return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
-    });
+    setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
 
-    var update = function update(content, options) {
-      setToasts(function (currentToasts) {
-        var nextToasts = currentToasts.filter(function (toast) {
+    const update = (content, options) => {
+      setToasts(currentToasts => {
+        const nextToasts = currentToasts.filter(toast => {
           if (toast.lastDuplicateId) {
             return toast.lastDuplicateId !== id;
           }
@@ -3875,80 +3893,70 @@ var ToastProvider = function ToastProvider(_ref) {
       });
     };
 
-    var success = function success(content, options) {
-      update(content, _extends({
-        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
-      }, options, {
+    const success = (content, options) => {
+      update(content, {
+        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+        ...options,
         type: 'success'
-      }));
+      });
     };
 
-    var error = function error(content, options) {
-      update(content, _extends({}, options, {
+    const error = (content, options) => {
+      update(content, { ...options,
         type: 'error'
-      }));
+      });
     };
 
-    var warning = function warning(content, options) {
-      update(content, _extends({}, options, {
+    const warning = (content, options) => {
+      update(content, { ...options,
         type: 'warning'
-      }));
+      });
     };
 
-    var information = function information(content, options) {
-      update(content, _extends({}, options, {
+    const information = (content, options) => {
+      update(content, { ...options,
         type: 'information'
-      }));
+      });
     };
 
-    var loading = function loading(content, options) {
-      update(content, _extends({}, options, {
+    const loading = (content, options) => {
+      update(content, { ...options,
         type: 'loading'
-      }));
+      });
     };
 
     return {
-      success: success,
-      error: error,
-      warning: warning,
-      information: information,
-      loading: loading,
-      close: close
+      success,
+      error,
+      warning,
+      information,
+      loading,
+      close
     };
   }, []); // no need to rebind these every render, do them once in an effect
 
-  React.useEffect(function () {
-    toaster.success = function (content, options) {
-      return toaster(content, _extends({
-        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
-      }, options, {
-        type: 'success'
-      }));
-    };
+  React.useEffect(() => {
+    toaster.success = (content, options) => toaster(content, {
+      autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+      ...options,
+      type: 'success'
+    });
 
-    toaster.error = function (content, options) {
-      return toaster(content, _extends({}, options, {
-        type: 'error'
-      }));
-    };
+    toaster.error = (content, options) => toaster(content, { ...options,
+      type: 'error'
+    });
 
-    toaster.warning = function (content, options) {
-      return toaster(content, _extends({}, options, {
-        type: 'warning'
-      }));
-    };
+    toaster.warning = (content, options) => toaster(content, { ...options,
+      type: 'warning'
+    });
 
-    toaster.information = function (content, options) {
-      return toaster(content, _extends({}, options, {
-        type: 'information'
-      }));
-    };
+    toaster.information = (content, options) => toaster(content, { ...options,
+      type: 'information'
+    });
 
-    toaster.loading = function (content, options) {
-      return toaster(content, _extends({}, options, {
-        type: 'loading'
-      }));
-    };
+    toaster.loading = (content, options) => toaster(content, { ...options,
+      type: 'loading'
+    });
   }, []);
   return React.createElement(ToastContext.Provider, Object.assign({}, props, {
     value: toaster
@@ -3958,43 +3966,37 @@ var ToastProvider = function ToastProvider(_ref) {
     role: "log"
   }, React.createElement(framerMotion.AnimatePresence, {
     initial: false
-  }, toasts.map(function (toast) {
-    return React.createElement(framerMotion.motion.div, {
-      key: toast.id,
+  }, toasts.map(toast => React.createElement(framerMotion.motion.div, {
+    key: toast.id,
+    transition: {
+      type: 'spring',
+      damping: 20,
+      stiffness: 300
+    },
+    initial: {
+      opacity: 0,
+      y: 10,
+      scale: 0.5
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.5,
       transition: {
-        type: 'spring',
-        damping: 20,
-        stiffness: 300
-      },
-      initial: {
-        opacity: 0,
-        y: 10,
-        scale: 0.5
-      },
-      animate: {
-        opacity: 1,
-        y: 0,
-        scale: 1
-      },
-      exit: {
-        opacity: 0,
-        scale: 0.5,
-        transition: {
-          duration: 0.2
-        }
+        duration: 0.2
       }
-    }, React.createElement(Toast, Object.assign({}, toast, {
-      onClose: function onClose() {
-        return handleClose(toast.id);
-      }
-    })));
-  }))));
-};
-var useToast = function useToast() {
-  return React.useContext(ToastContext);
+    }
+  }, React.createElement(Toast, Object.assign({}, toast, {
+    onClose: () => handleClose(toast.id)
+  })))))));
 };
+const useToast = () => React.useContext(ToastContext);
 
-var defaultLocalisationTexts = {
+const defaultLocalisationTexts = {
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -4069,44 +4071,32 @@ var defaultLocalisationTexts = {
     inputLabel: 'Search...'
   }
 };
-var defaultLocalizationContext = {
+const defaultLocalizationContext = {
   locale: 'en-GB',
   texts: defaultLocalisationTexts,
   formatting: {
     date: 'dd.mm.yy'
   }
 };
-var Context = /*#__PURE__*/React.createContext({
+const Context = /*#__PURE__*/React.createContext({
   localization: defaultLocalizationContext
 });
-var Provider = function Provider(props) {
-  var children = props.children,
-      _props$localization = props.localization,
-      localization = _props$localization === void 0 ? defaultLocalizationContext : _props$localization;
-  var value = React.useMemo(function () {
-    return {
-      localization: localization
-    };
-  }, [localization]);
+const Provider = props => {
+  const {
+    children,
+    localization = defaultLocalizationContext
+  } = props;
+  const value = React.useMemo(() => ({
+    localization
+  }), [localization]);
   return React.createElement(Context.Provider, {
     value: value
   }, React.createElement(ToastProvider, null, children));
 };
-var useTaco = function useTaco() {
-  return React.useContext(Context);
-};
-var useLocalization = function useLocalization() {
-  return useTaco().localization;
-};
-
-var _excluded$8 = ["onChange", "value"];
-
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
+const useTaco = () => React.useContext(Context);
+const useLocalization = () => useTaco().localization;
 
+var _excluded$3 = ["onChange", "value", "disabledDays"];
 var thisYear = /*#__PURE__*/new Date().getFullYear();
 var years = [];
 
@@ -4178,7 +4168,8 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
 var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   var handleChange = props.onChange,
       value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+      disabledDays = props.disabledDays,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var _useLocalization2 = useLocalization(),
       locale = _useLocalization2.locale,
@@ -4235,14 +4226,13 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
       return null;
     },
     todayButton: texts.calendar.actions.today,
-    showOutsideDays: true,
-    renderDay: renderDay,
     numberOfMonths: 1,
-    ref: ref
+    ref: ref,
+    disabledDays: disabledDays
   })));
 });
 
-var _excluded$9 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
+var _excluded$4 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   var checked = props.checked,
       highlighted = props.highlighted,
@@ -4250,7 +4240,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       invalid = props.invalid,
       label = props.label,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
 
   var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
   props.className, {
@@ -4324,21 +4314,22 @@ const getButtonStateClasses = invalid => {
   return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 };
 
-var _excluded$a = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
-var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
-  var button = props.button,
-      icon = props.icon,
-      invalid = props.invalid,
-      onKeyDown = props.onKeyDown,
-      autoFocus = props.autoFocus,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
-
-  var inputRef = useProxiedRef(ref);
-  var hasContainer = button || icon;
-  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
+const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
+  const {
+    button,
+    icon,
+    highlighted,
+    invalid,
+    onKeyDown,
+    autoFocus,
+    ...otherProps
+  } = props;
+  const inputRef = useProxiedRef(ref);
+  const hasContainer = button || icon;
+  const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
     'pr-8': !!hasContainer
   }, !hasContainer && otherProps.className);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -4346,10 +4337,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
     }
 
@@ -4358,7 +4349,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     }
   };
 
-  var input = React.createElement("input", Object.assign({}, otherProps, {
+  const input = React.createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -4366,19 +4357,19 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   }));
 
   if (hasContainer) {
-    var extra;
+    let extra;
 
     if (button) {
-      var _cn;
-
-      var disabled = button.props.disabled || otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
+      const disabled = button.props.disabled || otherProps.disabled;
+      const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
+        [getButtonStateClasses(invalid)]: !props.disabled
+      }, button.props.className);
       extra = React.cloneElement(button, {
         className: buttonClassName,
-        disabled: disabled
+        disabled
       });
     } else if (icon) {
-      var iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
+      const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
         'text-grey-dark': props.disabled,
         'text-grey-darkest': !props.disabled
       });
@@ -4390,7 +4381,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
       });
     }
 
-    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
     return React.createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
@@ -4400,25 +4391,25 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   return input;
 });
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
+var getNextIndexFromKey = function getNextIndexFromKey(key, length, index, direction) {
   if (direction === void 0) {
     direction = 'vertical';
   }
 
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
+  var previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  var nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
 
-  switch (keyCode) {
-    case keycode(previousKey):
+  switch (key) {
+    case previousKey:
       return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
 
-    case keycode(nextKey):
+    case nextKey:
       return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
 
-    case keycode('home'):
+    case 'Home':
       return 0;
 
-    case keycode('end'):
+    case 'End':
       return length - 1;
 
     default:
@@ -4441,7 +4432,7 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(length, optio
       setIndex = _React$useState[1];
 
   var getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+    var nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
 
     if (nextIndex !== undefined) {
       event.preventDefault();
@@ -4492,7 +4483,7 @@ var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
 const getId = (id, value) => `${id}_${value}`;
 
 const getNextEnabledItem = (event, data, index) => {
-  const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
 
   if (nextIndex) {
     if (nextIndex === index) {
@@ -4675,7 +4666,7 @@ const createCustomKeyboardEvent = event => {
   } else {
     customKeyboardEvent = document.createEvent('Event');
     customKeyboardEvent.initEvent(event.type, true, true);
-    customKeyboardEvent.keyCode = event.keyCode;
+    customKeyboardEvent.key = event.key;
     customKeyboardEvent.charCode = event.charCode;
   }
 
@@ -4986,13 +4977,13 @@ const useCombobox = ({
   const handleInputKeyDown = event => {
     event.persist();
 
-    switch (event.keyCode) {
-      case keycode('backspace'):
+    switch (event.key) {
+      case 'Backspace':
         {
           return;
         }
 
-      case keycode('escape'):
+      case 'Escape':
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
@@ -5000,10 +4991,10 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('tab'):
-      case keycode('enter'):
+      case 'Tab':
+      case 'Enter':
         {
-          if (event.keyCode !== keycode('tab')) {
+          if (event.key !== 'Tab') {
             event.preventDefault();
           }
 
@@ -5012,7 +5003,7 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('down'):
+      case 'ArrowDown':
         if (open) {
           event.preventDefault();
         } else {
@@ -5023,9 +5014,9 @@ const useCombobox = ({
 
         break;
 
-      case keycode('up'):
-      case keycode('home'):
-      case keycode('end'):
+      case 'ArrowUp':
+      case 'Home':
+      case 'End':
         {
           if (open) {
             event.preventDefault();
@@ -5041,9 +5032,9 @@ const useCombobox = ({
     }
 
     if (inline && !open) {
-      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
-        const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
         setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
         setOpen(true);
       }
@@ -5161,12 +5152,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$b = ["className", "dialog", "style"];
+var _excluded$5 = ["className", "dialog", "style"];
 var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       dialog = props.dialog,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
@@ -5459,19 +5450,18 @@ function mergeRefs(refs) {
   };
 }
 
-var _excluded$c = ["children", "trigger"];
-var PopoverContext = /*#__PURE__*/React.createContext({
+const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
+const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
   var _props$children;
 
-  var context = React.useContext(PopoverContext);
-  var children = props.children;
+  const context = React.useContext(PopoverContext);
+  let children = props.children;
 
   if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
-    console.warn("Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    console.warn(`Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
     children = React.createElement("span", null, props.children);
   }
 
@@ -5481,22 +5471,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
     asChild: true
   }));
 });
-var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper(_ref, ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick;
-
-  var close = function close() {
+const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
+  children,
+  onClick
+}, ref) {
+  const close = () => {
     onClick(new CustomEvent('hide'));
   };
 
   return children({
-    close: close,
-    ref: ref
+    close,
+    ref
   });
 });
-var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
-  var className = cn('bg-white focus:border-blue-light', props.className);
-  var output;
+const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+  const className = cn('bg-white focus:border-blue-light', props.className);
+  let output;
 
   if (typeof props.children === 'function') {
     output = React.createElement(PopoverPrimitive.Close, {
@@ -5514,23 +5504,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
     className: "text-white"
   }));
 });
-var Close$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
-    ref: ref,
-    asChild: true
-  }));
-});
-var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
-  var children = props.children,
-      trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]);
+const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
+  ref: ref,
+  asChild: true
+})));
+const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
+  const {
+    children,
+    trigger,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    props: otherProps,
+    ref
+  }), [otherProps]);
   return React.createElement(PopoverContext.Provider, {
     value: context
   }, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
@@ -5539,14 +5526,14 @@ Popover.Trigger = Trigger$1;
 Popover.Content = Content$1;
 Popover.Close = Close$1;
 
-var _excluded$d = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var _excluded$6 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var externalClassName = props.className,
       handleReset = props.onReset,
       style = props.style,
       shortcuts = props.shortcuts,
       shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
   var _useDatepicker = useDatepicker(otherProps, ref),
       calendar = _useDatepicker.calendar,
@@ -5841,7 +5828,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$e = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
+var _excluded$7 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
 
 var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   return React.useMemo(function () {
@@ -5878,7 +5865,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'sm' : _props$size,
       trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
   var _useSeparatedChildren = useSeparatedChildren(initialChildren),
       children = _useSeparatedChildren[0],
@@ -5928,19 +5915,18 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$f = ["disabled", "children", "invalid", "message"];
-var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var disabled = props.disabled,
-      children = props.children,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      message = props.message,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
-
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-darkest': !invalid,
     'text-red': invalid,
     'opacity-50': disabled
@@ -5955,13 +5941,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-var _excluded$g = ["horizontal"];
-var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
-  var _props$horizontal = props.horizontal,
-      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
-
-  var className = cn('yt-form', {
+const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return React.createElement("form", Object.assign({}, otherProps, {
@@ -5971,13 +5956,15 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$h = ["as"];
-var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'span' : _props$as,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$h);
-
-  var className = cn('flex ', props.className);
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', 'gap-2', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "group",
@@ -5985,19 +5972,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$i = ["anchor", "children", "defaultOpen"];
-var HangerContext = /*#__PURE__*/React.createContext({
+const HangerContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
+const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
   var _props$children;
 
-  var context = React.useContext(HangerContext);
-  var children = props.children;
+  const context = React.useContext(HangerContext);
+  let children = props.children;
 
   if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
-    console.warn("Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
     children = React.createElement("span", null, props.children);
   }
 
@@ -6007,22 +5993,21 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
-var Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  var className = cn('mb-1 text-base font-bold flex w-full', props.className);
+const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
   return React.createElement("span", Object.assign({}, props, {
     className: className,
     ref: ref
   }));
 });
-var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
-  var context = React.useContext(HangerContext);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
+const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+  const context = React.useContext(HangerContext);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
+  const handleInteractOutside = event => {
     event.preventDefault();
   };
 
@@ -6044,25 +6029,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
     onClick: context.props.onClose
   })));
 });
-var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
-  var anchor = props.anchor,
-      children = props.children,
-      _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
-
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
+  const {
+    anchor,
+    children,
+    defaultOpen = true,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    props: otherProps,
+    ref
+  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
 
-  React.useEffect(function () {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
@@ -6078,25 +6058,25 @@ Hanger.Anchor = Anchor;
 Hanger.Content = Content$3;
 Hanger.Title = Title$1;
 
-var _excluded$j = ["placement"];
-var Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
+const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
   return React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: ref
   }));
 });
-var Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
-  var placement = externalProps.placement,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$j);
-
-  var className = cn('bg-white rounded p-3 yt-shadow', props.className);
+const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
+  const {
+    placement,
+    ...props
+  } = externalProps;
+  const className = cn('bg-white rounded p-3 yt-shadow', props.className);
   return React.createElement(HoverCardPrimitive.Content, Object.assign({}, props, {
     className: className,
     ref: ref,
     side: placement
   }));
 });
-var HoverCard = function HoverCard(props) {
+const HoverCard = props => {
   return React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
     openDelay: 300
   }));
@@ -6104,24 +6084,24 @@ var HoverCard = function HoverCard(props) {
 HoverCard.Trigger = Trigger$3;
 HoverCard.Content = Content$4;
 
-var _excluded$k = ["onSearch"];
-var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
-  var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  onSearch,
+  ...props
+}, ref) {
+  const {
+    texts
+  } = useLocalization();
 
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (!props.disabled) {
       onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
     }
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     var _props$onKeyDown;
 
-    var isEnterKeyPressed = event.keyCode === keycode('enter');
+    const isEnterKeyPressed = event.key === 'Enter';
 
     if (isEnterKeyPressed) {
       handleClick();
@@ -6224,9 +6204,10 @@ const useListbox = ({
   }, [data]);
 
   const handleListboxKeyDown = event => {
-    const charKey = String.fromCharCode(event.keyCode);
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
 
-    if (charKey.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
@@ -6399,9 +6380,10 @@ const useMultiListbox = ({
   };
 
   const handleListboxKeyDown = (event, index) => {
-    const charKey = String.fromCharCode(event.keyCode);
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
 
-    if (charKey.match(/(\w)/g)) {
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
@@ -6411,22 +6393,22 @@ const useMultiListbox = ({
       return;
     }
 
-    switch (event.keyCode) {
-      case keycode('space'):
+    switch (event.key) {
+      case ' ':
         {
           event.preventDefault();
           setInputValueByIndex(index);
           break;
         }
 
-      case keycode('enter'):
+      case 'Enter':
         {
           setInputValueByIndex(index);
           break;
         }
     }
 
-    setCurrentIndex(index);
+    setCurrentIndex(index !== undefined ? index : 0);
 
     if (onKeyDown) {
       event.persist();
@@ -6490,49 +6472,49 @@ const useMultiListbox = ({
   };
 };
 
-var _excluded$l = ["className"],
-    _excluded2$1 = ["className"];
-var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$l);
-
-  var _useListbox = useListbox(otherProps, ref),
-      list = _useListbox.list,
-      input = _useListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...list.style,
       maxHeight: 'calc(12rem + 2px)'
       /* (6 * option height) + listbox border */
 
-    })
+    }
   })), React.createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
   })));
 });
-var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
-
-  var _useMultiListbox = useMultiListbox(otherProps, ref),
-      list = _useMultiListbox.list,
-      input = _useMultiListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useMultiListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...list.style,
       maxHeight: 'calc(12rem + 2px + 2px)'
       /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
 
-    })
+    }
   })), React.createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
@@ -6715,34 +6697,26 @@ const Checkbox$1 = props => {
   })), children);
 };
 
-var _excluded$m = ["children", "value"],
-    _excluded2$2 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
-var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
-  return String(value !== null && value !== void 0 ? value : '');
-};
-var findByValue$1 = function findByValue(values, valueAsString) {
-  return values.find(function (value) {
-    return getRadioGroupItemValueAsString(value) === valueAsString;
-  });
-};
-var RadioGroupContext = /*#__PURE__*/React.createContext({
+const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
+const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
+const RadioGroupContext = /*#__PURE__*/React.createContext({
   disabled: false,
   invalid: false
 });
-var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
-  var context = React.useContext(RadioGroupContext);
-
-  var children = props.children,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$m);
-
-  var isDisabled = context.disabled || props.disabled;
-  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
+const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
+  const context = React.useContext(RadioGroupContext);
+  const {
+    children,
+    value,
+    ...otherProps
+  } = props;
+  const isDisabled = context.disabled || props.disabled;
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
     'border-grey-dark hover:border-4 focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
     'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
     'border-red hover:border-4 text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
   });
-  var labelClassName = cn('flex items-center gap-2', {
+  const labelClassName = cn('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
     'cursor-not-allowed text-grey-dark': isDisabled
   }, props.className);
@@ -6757,38 +6731,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
     className: "h-2 w-2 rounded-full bg-white"
   })), children);
 });
-var useRadioGroup = function useRadioGroup(props) {
-  var children = props.children,
-      defaultValue = props.defaultValue,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      onChange = props.onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
-
-  var values = React.useMemo(function () {
-    var radioGroupItemValues = [];
-    React.Children.forEach(children, function (child) {
+const useRadioGroup = props => {
+  const {
+    children,
+    defaultValue,
+    disabled,
+    invalid,
+    onChange,
+    orientation = 'vertical',
+    value,
+    ...otherProps
+  } = props;
+  const values = React.useMemo(() => {
+    const radioGroupItemValues = [];
+    React.Children.forEach(children, child => {
       if (React.isValidElement(child)) {
         radioGroupItemValues.push(child.props.value);
       }
     });
     return radioGroupItemValues;
   }, [children]);
-  var context = React.useMemo(function () {
-    return {
-      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-      invalid: invalid !== null && invalid !== void 0 ? invalid : false
-    };
-  }, [disabled, invalid]);
-  var valueProps;
+  const context = React.useMemo(() => ({
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    invalid: invalid !== null && invalid !== void 0 ? invalid : false
+  }), [disabled, invalid]);
+  let valueProps;
 
   if (onChange !== undefined) {
-    var handleChange = function handleChange(value) {
-      return onChange(findByValue$1(values, value));
-    };
+    const handleChange = value => onChange(findByValue$1(values, value));
 
     valueProps = {
       onValueChange: handleChange,
@@ -6801,19 +6771,20 @@ var useRadioGroup = function useRadioGroup(props) {
   }
 
   return {
-    context: context,
-    props: _extends({}, otherProps, valueProps, {
-      children: children,
-      orientation: orientation
-    })
+    context,
+    props: { ...otherProps,
+      ...valueProps,
+      children,
+      orientation
+    }
   };
 };
-var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
-  var _useRadioGroup = useRadioGroup(props),
-      context = _useRadioGroup.context,
-      otherProps = _useRadioGroup.props;
-
-  var className = cn('flex items-start gap-y-2', {
+const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
+  const {
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex items-start gap-y-2', {
     'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
     'flex-col': otherProps.orientation === 'vertical'
   }, otherProps.className);
@@ -6884,39 +6855,22 @@ const Header = props => {
   }));
 };
 
-var _excluded$n = ["children", "trigger"];
-var Menu$1 = function Menu(externalProps) {
-  var children = externalProps.children,
-      trigger = externalProps.trigger,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$n);
-
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  var _React$useState2 = React.useState(false),
-      indented = _React$useState2[0],
-      setIndented = _React$useState2[1];
-
-  var _React$useState3 = React.useState(undefined),
-      minWidth = _React$useState3[0],
-      _setMinWidth = _React$useState3[1];
-
-  var context = React.useMemo(function () {
-    return {
-      indented: indented,
-      registerIndentation: function registerIndentation() {
-        return setIndented(true);
-      },
-      minWidth: minWidth,
-      setMinWidth: function setMinWidth(width) {
-        return _setMinWidth(width);
-      },
-      close: function close() {
-        return setOpen(false);
-      }
-    };
-  }, [indented, minWidth]);
+const Menu$1 = externalProps => {
+  const {
+    children,
+    trigger,
+    ...props
+  } = externalProps;
+  const [open, setOpen] = React.useState(false);
+  const [indented, setIndented] = React.useState(false);
+  const [minWidth, setMinWidth] = React.useState(undefined);
+  const context = React.useMemo(() => ({
+    indented,
+    registerIndentation: () => setIndented(true),
+    minWidth,
+    setMinWidth: width => setMinWidth(width),
+    close: () => setOpen(false)
+  }), [indented, minWidth]);
   return React.createElement(MenuContext.Provider, {
     value: context
   }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
@@ -6934,44 +6888,39 @@ Menu$1.Separator = Separator;
 Menu$1.Header = Header;
 Menu$1.RadioGroup = RadioGroup$1;
 
-var _excluded$o = ["children", "className", "expanded", "title", "fixed", "onClick"];
-var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
+const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
   return React__default.createElement("a", Object.assign({}, props, {
     ref: ref
   }));
 });
-var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
-  var children = props.children,
-      externalClassName = props.className,
-      _props$expanded = props.expanded,
-      initialExpanded = _props$expanded === void 0 ? false : _props$expanded,
-      title = props.title,
-      fixed = props.fixed,
-      onClick = props.onClick,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
-
-  var _React$useState = React__default.useState(fixed || initialExpanded),
-      expanded = _React$useState[0],
-      setExpanded = _React$useState[1];
-
-  React__default.useEffect(function () {
+const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGroup(props, ref) {
+  const {
+    children,
+    className: externalClassName,
+    expanded: initialExpanded = false,
+    title,
+    fixed,
+    onClick,
+    ...otherProps
+  } = props;
+  const [expanded, setExpanded] = React__default.useState(fixed || initialExpanded);
+  React__default.useEffect(() => {
     if (!fixed) {
       setExpanded(fixed || initialExpanded);
     }
   }, [fixed, initialExpanded]);
-  var listClassName = cn('flex-col mb-0', {
+  const listClassName = cn('flex-col mb-0', {
     flex: expanded,
     hidden: !expanded
   });
-
-  var itemProps = _extends({}, otherProps, {
+  const itemProps = { ...otherProps,
     'aria-expanded': expanded,
     role: 'treeitem',
     tabIndex: -1
-  });
+  };
 
-  var handleClick = function handleClick(event) {
-    var nextState = !expanded;
+  const handleClick = event => {
+    const nextState = !expanded;
 
     if (!fixed) {
       setExpanded(nextState);
@@ -6982,7 +6931,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
     }
   };
 
-  var className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
+  const className = typeof externalClassName === 'function' ? externalClassName(expanded) : externalClassName;
   return React__default.createElement("div", Object.assign({}, itemProps, {
     className: className,
     ref: ref
@@ -6991,18 +6940,14 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGrou
   }, typeof title === 'function' ? title(expanded) : title), React__default.createElement("ul", {
     role: "group",
     className: listClassName
-  }, React__default.Children.toArray(children).filter(function (item) {
-    return !!item;
-  }).map(function (item, i) {
-    return React__default.createElement("li", {
-      key: i,
-      role: "none"
-    }, React__default.cloneElement(item, {
-      role: 'treeitem'
-    }));
-  })));
+  }, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => React__default.createElement("li", {
+    key: i,
+    role: "none"
+  }, React__default.cloneElement(item, {
+    role: 'treeitem'
+  })))));
 });
-var Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
+const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     ref: ref,
     role: "tree"
@@ -7048,25 +6993,20 @@ var useDropTarget = function useDropTarget(onDrop) {
   return [isDraggedOver, props];
 };
 
-var _excluded$p = ["active", "children", "onDrop", "postfix", "prefix", "role"],
-    _excluded2$3 = ["children"];
-var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
-  var active = props.active,
-      children = props.children,
-      onDrop = props.onDrop,
-      postfix = props.postfix,
-      prefix = props.prefix,
-      role = props.role,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
-
-  var proxyRef = useProxiedRef(ref);
-
-  var _useDropTarget = useDropTarget(onDrop),
-      isDraggedOver = _useDropTarget[0],
-      dropTargetProps = _useDropTarget[1];
-
-  var isTreeitem = role === 'treeitem';
-  var className = cn('yt-navigation__item cursor-pointer', {
+const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+  const {
+    active,
+    children,
+    onDrop,
+    postfix,
+    prefix,
+    role,
+    ...otherProps
+  } = props;
+  const proxyRef = useProxiedRef(ref);
+  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
+  const isTreeitem = role === 'treeitem';
+  const className = cn('yt-navigation__item cursor-pointer', {
     'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
     'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
     'yt-navigation__item--active': active && !isDraggedOver,
@@ -7074,7 +7014,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     'yt-navigation__item--dropping bg-blue': isDraggedOver
   }, props.className);
 
-  var handleClick = function handleClick(event) {
+  const handleClick = event => {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
       return;
     }
@@ -7097,19 +7037,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     className: "yt-navigation__item__postfix ml-1"
   }, postfix));
 });
-var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     className: cn('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
-var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  var className = cn('flex-shrink-0 space-y-1 outline-none', {
+const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, props.className);
 
-  var title = function title(expanded) {
-    var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+  const title = expanded => {
+    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
       'mb-1': expanded,
       'cursor-pointer hover:text-blue': !props.fixed
     });
@@ -7126,16 +7066,15 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
     ref: ref
   }));
 });
-var Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
-  var scrollableAreas = React__default.useMemo(function () {
-    var scrollableAreas = [];
-    React__default.Children.toArray(props.children).filter(function (child) {
-      return !!child;
-    }).map(function (child) {
+const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
+  const scrollableAreas = React__default.useMemo(() => {
+    const scrollableAreas = [];
+    const children = React__default.Children.toArray(props.children).filter(child => !!child);
+    children.forEach(child => {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
-        var x = scrollableAreas[scrollableAreas.length - 1];
+        const x = scrollableAreas[scrollableAreas.length - 1];
 
         if (Array.isArray(x)) {
           x.push(child);
@@ -7149,19 +7088,18 @@ var Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
   return React__default.createElement(Treeview, Object.assign({}, props, {
     className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
-  }), scrollableAreas.map(function (area, i) {
-    return Array.isArray(area) ? React__default.createElement("div", {
-      className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
-      key: i
-    }, area) : area;
-  }));
+  }), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
+    className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
+    key: i
+  }, area) : area));
 });
 Menu$2.Group = MenuGroup;
-var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
-
-  var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
+const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",
@@ -7269,15 +7207,15 @@ const useSelect = ({
   }, []); // event handlers
 
   const handleButtonKeyDown = event => {
-    if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       event.preventDefault();
       setOpen(true);
     }
   };
 
   const handleListboxKeyDown = event => {
-    switch (event.keyCode) {
-      case keycode('escape'):
+    switch (event.key) {
+      case 'Escape':
         {
           event.preventDefault();
 
@@ -7289,10 +7227,10 @@ const useSelect = ({
           break;
         }
 
-      case keycode('tab'):
-      case keycode('enter'):
+      case 'Tab':
+      case 'Enter':
         {
-          if (event.keyCode !== keycode('tab')) {
+          if (event.key !== 'Tab') {
             event.preventDefault();
           }
 
@@ -7417,54 +7355,52 @@ const useSelect = ({
   };
 };
 
-var _excluded$q = ["autoFocus", "className", "highlighted", "style"],
-    _excluded2$4 = ["editable"];
-var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
-  var autoFocus = props.autoFocus,
-      externalClassName = props.className,
-      style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$q);
-
-  var _useSelect = useSelect(otherProps, ref),
-      button = _useSelect.button,
-      listbox = _useSelect.listbox,
-      popover = _useSelect.popover,
-      input = _useSelect.input,
-      text = _useSelect.text,
-      _useSelect$more = _useSelect.more,
-      more = _useSelect$more === void 0 ? 0 : _useSelect$more;
-
-  var internalRef = React.useRef(null);
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative w-full', {
+const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
+  const {
+    autoFocus,
+    className: externalClassName,
+    highlighted,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    button,
+    listbox,
+    popover,
+    input,
+    text,
+    more = 0
+  } = useSelect(otherProps, ref);
+  const internalRef = React.useRef(null);
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
     }
   }, []);
 
-  var renderMultiSelection = function renderMultiSelection() {
+  const renderMultiSelection = () => {
     return React.createElement(React.Fragment, null, React.createElement("span", {
       className: "flex-grow truncate text-left"
     }, text), more > 0 && React.createElement(Badge, {
       className: "ml-2"
-    }, "+" + more));
+    }, `+${more}`));
   };
 
-  var commonListboxProps = _extends({}, listbox, {
+  const commonListboxProps = { ...listbox,
     className: 'w-auto',
     invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
     tabIndex: popover.open ? 0 : -1
-  });
-
+  };
   return React.createElement("span", {
     className: className,
     "data-taco": "select",
@@ -7487,9 +7423,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
     type: "text"
   }))));
 });
-var Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
-  var editable = props.editable,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
+const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
+  const {
+    editable,
+    ...otherProps
+  } = props;
 
   if (editable) {
     return React.createElement(Combobox, Object.assign({}, otherProps, {
@@ -7511,25 +7449,25 @@ const usePaginationShortcuts = ({
   dangerouslyHijackGlobalKeyboardNavigation: useGlobalKeyboardNavigation
 }) => {
   const onKeyDown = event => {
-    if (setPageIndex && event.keyCode === keycode('home')) {
+    if (setPageIndex && event.key === 'Home') {
       event.preventDefault();
       setPageIndex(0);
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('end')) {
+    if (setPageIndex && event.key === 'End') {
       event.preventDefault();
       setPageIndex(maxPageIndex);
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('page up')) {
+    if (setPageIndex && event.key === 'PageUp') {
       event.preventDefault();
       setPageIndex(Math.max(0, pageIndex - 1));
       return;
     }
 
-    if (setPageIndex && event.keyCode === keycode('page down')) {
+    if (setPageIndex && event.key === 'PageDown') {
       event.preventDefault();
       setPageIndex(Math.min(maxPageIndex, pageIndex + 1));
       return;
@@ -7560,47 +7498,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
   };
 };
 
-var _excluded$r = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
-
-var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
-  var minItemIndex = pageIndex * pageSize + 1;
-  var maxItemIndex = (pageIndex + 1) * pageSize;
+const getShowingLabel = (length, pageIndex, pageSize, texts) => {
+  const minItemIndex = pageIndex * pageSize + 1;
+  const maxItemIndex = (pageIndex + 1) * pageSize;
   return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
 };
 
-var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
-  var length = props.length,
-      pageIndex = props.pageIndex,
-      pageSize = props.pageSize,
-      _props$pageSizes = props.pageSizes,
-      pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100, 500] : _props$pageSizes,
-      setPageIndex = props.setPageIndex,
-      setPageSize = props.setPageSize,
-      _props$showPageContro = props.showPageControls,
-      showPageControls = _props$showPageContro === void 0 ? true : _props$showPageContro,
-      _props$showPageNumber = props.showPageNumbers,
-      showPageNumbers = _props$showPageNumber === void 0 ? true : _props$showPageNumber,
-      _props$showPageSize = props.showPageSize,
-      showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
-      _props$dangerouslyHij = props.dangerouslyHijackGlobalKeyboardNavigation,
-      dangerouslyHijackGlobalKeyboardNavigation = _props$dangerouslyHij === void 0 ? false : _props$dangerouslyHij,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$r);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var maxPageIndex = Math.ceil(length / pageSize) - 1;
-  var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
+const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
+  const {
+    length,
+    pageIndex,
+    pageSize,
+    pageSizes = [10, 25, 50, 100, 500],
+    setPageIndex,
+    setPageSize,
+    showPageControls = true,
+    showPageNumbers = true,
+    showPageSize = true,
+    dangerouslyHijackGlobalKeyboardNavigation = false,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const maxPageIndex = Math.ceil(length / pageSize) - 1;
+  const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
   usePaginationShortcuts({
-    setPageIndex: setPageIndex,
-    maxPageIndex: maxPageIndex,
-    pageIndex: pageIndex,
-    dangerouslyHijackGlobalKeyboardNavigation: dangerouslyHijackGlobalKeyboardNavigation
+    setPageIndex,
+    maxPageIndex,
+    pageIndex,
+    dangerouslyHijackGlobalKeyboardNavigation
   });
-  var pageCount = Math.ceil(length / pageSize);
-  var canPreviousPage = pageIndex > 0;
-  var canNextPage = pageIndex < pageCount - 1;
-  var className = cn('inline-flex relative justify-between items-center', props.className);
+  const pageCount = Math.ceil(length / pageSize);
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = pageIndex < pageCount - 1;
+  const className = cn('inline-flex relative justify-between items-center', props.className);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "pagination",
@@ -7610,13 +7542,11 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   }, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
     "aria-label": texts.pagination.pageSize,
     className: "ml-4 !w-20",
-    data: pageSizes.map(function (pageSize) {
-      return {
-        text: String(pageSize),
-        value: pageSize
-      };
-    }),
-    onChange: function onChange(event) {
+    data: pageSizes.map(pageSize => ({
+      text: String(pageSize),
+      value: pageSize
+    })),
+    onChange: event => {
       setPageIndex(0);
       setPageSize(Number(event.target.value));
     },
@@ -7628,18 +7558,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-start",
-    onClick: function onClick() {
-      return setPageIndex(0);
-    },
+    onClick: () => setPageIndex(0),
     "aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
   }), React.createElement(IconButton, {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-left",
-    onClick: function onClick() {
-      return setPageIndex(pageIndex - 1);
-    },
+    onClick: () => setPageIndex(pageIndex - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
   }), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
@@ -7650,43 +7576,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-right",
-    onClick: function onClick() {
-      return setPageIndex(pageIndex + 1);
-    },
+    onClick: () => setPageIndex(pageIndex + 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
   }), React.createElement(IconButton, {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-end",
-    onClick: function onClick() {
-      return setPageIndex(pageCount - 1);
-    },
+    onClick: () => setPageIndex(pageCount - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
   })));
 });
 
-var _excluded$s = ["duration"];
-var Progress = function Progress(_ref) {
-  var _cn;
-
-  var _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? undefined : _ref$duration,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-
-  var style;
+const Progress = ({
+  duration = undefined,
+  ...props
+}) => {
+  let style;
 
   if (duration) {
     style = {
-      animationDuration: duration + "ms"
+      animationDuration: `${duration}ms`
     };
   }
 
-  var className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
-  var progressClassName = cn('yt-progress__bar block h-1', (_cn = {
-    "w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration
-  }, _cn["w-0 bg-grey-dark animate-[progress_linear]"] = duration, _cn));
+  const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
+  const progressClassName = cn('yt-progress__bar block h-1', {
+    "w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
+    [`w-0 bg-grey-dark animate-[progress_linear]`]: duration
+  });
   return React__default.createElement("span", Object.assign({}, props, {
     "data-taco": "progress",
     className: className
@@ -7978,7 +7897,7 @@ const getActions = (actions, row = undefined) => {
   const secondary = [];
 
   if (actions) {
-    let visibleActions = actions.filter(x => !!x);
+    let visibleActions = actions.filter(x => !!x && typeof x !== 'boolean');
 
     if (row) {
       visibleActions = visibleActions.filter(action => {
@@ -8048,7 +7967,7 @@ const EditModeActions = () => {
     const listener = event => {
       var _event$target, _event$target$form;
 
-      if (event.keyCode === keycode('escape') && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
+      if (event.key === 'Escape' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
         event.preventDefault();
         event.target.form.reset();
       }
@@ -8301,7 +8220,13 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
   const [activeIndex, setActiveIndex] = reactUseControllableState.useControllableState({
     prop: props.activeIndex,
     defaultProp: props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,
-    onChange: props.onChangeActiveIndex
+    onChange: index => {
+      if (index !== undefined) {
+        var _props$onChangeActive;
+
+        (_props$onChangeActive = props.onChangeActiveIndex) === null || _props$onChangeActive === void 0 ? void 0 : _props$onChangeActive.call(props, index);
+      }
+    }
   });
 
   const onKeyDown = event => {
@@ -8324,24 +8249,24 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
       if (currentRow) {
         const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);
 
-        if (rowProps.onRowClick && event.keyCode === keycode('enter')) {
+        if (rowProps.onRowClick && event.key === 'Enter') {
           event.preventDefault();
           rowProps.onRowClick(sanitizedRow);
           return;
         }
 
-        if (currentRow.toggleRowSelected && event.keyCode === keycode('space')) {
+        if (currentRow.toggleRowSelected && event.key === ' ') {
           event.preventDefault();
           currentRow.toggleRowSelected();
           return;
         }
 
         if (currentRow.toggleRowExpanded) {
-          if (currentRow.isExpanded && event.keyCode === keycode('left')) {
+          if (currentRow.isExpanded && event.key === 'ArrowLeft') {
             event.preventDefault();
             currentRow.toggleRowExpanded();
             return;
-          } else if (!currentRow.isExpanded && event.keyCode === keycode('right')) {
+          } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {
             event.preventDefault();
             currentRow.toggleRowExpanded();
             return;
@@ -8351,7 +8276,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
 
         if (currentRow.toggleRowEditing) {
           if (currentRow.canEdit && !currentRow.isEditing) {
-            if (rowProps.onRowCreate && event.shiftKey && event.keyCode === keycode('n')) {
+            if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {
               event.preventDefault();
 
               if (!currentRow.isExpanded) {
@@ -8362,7 +8287,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
               return;
             }
 
-            if (event.keyCode === keycode('e')) {
+            if (event.key === 'e') {
               event.preventDefault();
               currentRow.toggleRowEditing();
               return;
@@ -8370,19 +8295,19 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
           }
         }
 
-        if (rowProps.onRowEdit && event.keyCode === keycode('e') && !isModifierKeyPressed) {
+        if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowEdit(sanitizedRow, event);
           return;
         }
 
-        if (rowProps.onRowCopy && event.keyCode === keycode('c') && !isModifierKeyPressed) {
+        if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowCopy(sanitizedRow, event);
           return;
         }
 
-        if (rowProps.onRowDelete && event.keyCode === keycode('delete') && !isModifierKeyPressed) {
+        if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {
           event.preventDefault();
           rowProps.onRowDelete(sanitizedRow, event);
           return;
@@ -8390,7 +8315,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
       }
     }
 
-    const nextIndex = getNextIndexFromKeycode(event.keyCode, rows.length, activeIndex);
+    const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);
 
     if (nextIndex !== undefined) {
       event.preventDefault();
@@ -8617,7 +8542,7 @@ const useTable = (props, ref) => {
   const {
     children,
     data,
-    dangerouslyHijackGlobalKeyboardNavigation: _1,
+    dangerouslyHijackGlobalKeyboardNavigation: _,
     onRowClick,
     onRowDrag,
     onSelectedRows,
@@ -8630,6 +8555,10 @@ const useTable = (props, ref) => {
     manualSorting,
     onSort,
     sortRules,
+    //index
+    activeIndex: _1,
+    defaultActiveIndex: _2,
+    onChangeActiveIndex: _3,
     // pagination
     disablePagination = true,
     length,
@@ -9301,19 +9230,16 @@ const useTableRowCreation = (data, tableRef) => {
   };
 };
 
-var _excluded$t = ["id", "defaultId", "children", "onChange", "orientation"],
-    _excluded2$5 = ["id", "disabled"],
-    _excluded3 = ["id"];
-var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  var id = props.id,
-      defaultId = props.defaultId,
-      children = props.children,
-      onChange = props.onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
-
-  var className = cn('yt-tabs', "yt-tabs--" + orientation, {
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+  const {
+    id,
+    defaultId,
+    children,
+    onChange,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
@@ -9327,19 +9253,20 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     value: id
   }), children);
 });
-var TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
+const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
   return React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
   }));
 });
-var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var id = props.id,
-      disabled = props.disabled,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
-
-  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
+const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    disabled,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
   return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
     className: className,
     disabled: disabled,
@@ -9350,11 +9277,12 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     value: id
   }));
 });
-var TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
-
-  var className = cn('yt-tab__panel outline-none', props.className);
+const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab__panel outline-none', props.className);
   return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -9365,19 +9293,22 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$u = ["defaultValue", "highlighted", "invalid", "onKeyDown"];
-var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
-  var onKeyDown = props.onKeyDown,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
-
-  var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
+  const {
+    defaultValue: _,
+    highlighted,
+    invalid,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
       event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
     }
@@ -9395,18 +9326,18 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
-var _excluded$v = ["label", "onChange"];
-var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  var label = props.label,
-      onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$v);
-
-  var className = cn('group h-5 w-9 flex rounded-full inline-flex', {
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
+  const {
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
     'mr-2': !!label,
     'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
     'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
   }, props.className);
-  var element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+  const element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
     className: className,
     onCheckedChange: onChange,
     ref: ref
@@ -9415,7 +9346,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   }));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
+    const labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
     return React.createElement("label", {
@@ -9426,25 +9357,24 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   return element;
 });
 
-var _excluded$w = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix", "scrollOffset"];
-
-var Tooltip$1 = function Tooltip(_ref) {
-  var continuous = _ref.continuous,
-      index = _ref.index,
-      isLastStep = _ref.isLastStep,
-      step = _ref.step,
-      backProps = _ref.backProps,
-      primaryProps = _ref.primaryProps,
-      skipProps = _ref.skipProps,
-      tooltipProps = _ref.tooltipProps,
-      size = _ref.size,
-      locale = _ref.locale,
-      disableTourSkipOnEsc = _ref.disableTourSkipOnEsc;
-  var skipButtonRef = React.useRef(null);
-  React.useEffect(function () {
-    var onWindowKeyDown = function onWindowKeyDown(event) {
+const Tooltip$1 = ({
+  continuous,
+  index,
+  isLastStep,
+  step,
+  backProps,
+  primaryProps,
+  skipProps,
+  tooltipProps,
+  size,
+  locale,
+  disableTourSkipOnEsc
+}) => {
+  const skipButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    const onWindowKeyDown = event => {
       if (!disableTourSkipOnEsc) {
-        if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
+        if (event.key === 'Escape' && skipButtonRef.current !== null) {
           event.preventDefault();
           skipButtonRef.current.click();
           return;
@@ -9453,7 +9383,7 @@ var Tooltip$1 = function Tooltip(_ref) {
     };
 
     window.addEventListener('keydown', onWindowKeyDown);
-    return function () {
+    return () => {
       window.removeEventListener('keydown', onWindowKeyDown);
     };
   }, []);
@@ -9472,31 +9402,31 @@ var Tooltip$1 = function Tooltip(_ref) {
     appearance: "discrete"
   }), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
     appearance: "primary"
-  }), continuous ? isLastStep ? locale.last + " (" + (index + 1) + "/" + size + ")" : locale.next + " (" + (index + 1) + "/" + size + ")" : locale.close)));
+  }), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
 }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 
-var TourStep = function TourStep(_props) {
-  return null;
-};
-var Tour = function Tour(props) {
-  var _useLocalization = useLocalization(),
-      tour = _useLocalization.texts.tour;
-
-  var run = props.autoStart,
-      onComplete = props.onComplete,
-      onClose = props.onClose,
-      onReady = props.onReady,
-      spotlightClicks = props.spotlightClicks,
-      disableTourSkipOnEsc = props.disableCloseOnEsc,
-      _props$disableScrollP = props.disableScrollParentFix,
-      disableScrollParentFix = _props$disableScrollP === void 0 ? false : _props$disableScrollP,
-      scrollOffset = props.scrollOffset,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$w);
-
-  var steps = React.useMemo(function () {
-    return React.Children.map(props.children, function (child) {
-      var step = {
+const TourStep = _props => null;
+const Tour = props => {
+  const {
+    texts: {
+      tour
+    }
+  } = useLocalization();
+  const {
+    autoStart: run,
+    onComplete,
+    onClose,
+    onReady,
+    spotlightClicks,
+    disableCloseOnEsc: disableTourSkipOnEsc,
+    disableScrollParentFix = false,
+    scrollOffset,
+    ...rest
+  } = props;
+  const steps = React.useMemo(() => {
+    return React.Children.map(props.children, child => {
+      const step = {
         disableBeacon: !child.props.showBeacon,
         target: child.props.selector,
         placement: child.props.position,
@@ -9506,12 +9436,10 @@ var Tour = function Tour(props) {
       return step;
     });
   }, [props.children]);
-  var getStep = React.useCallback(function (selector) {
+  const getStep = React.useCallback(selector => {
     var _props$children$find;
 
-    return (_props$children$find = props.children.find(function (child) {
-      return child.props.selector === selector;
-    })) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
+    return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
   }, [props.children]);
 
   function callback(state) {
@@ -9541,12 +9469,10 @@ var Tour = function Tour(props) {
     floaterProps: {
       disableAnimation: true
     },
-    tooltipComponent: function tooltipComponent(tooltipProps) {
-      return React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
-        locale: tour,
-        disableTourSkipOnEsc: disableTourSkipOnEsc
-      }));
-    },
+    tooltipComponent: tooltipProps => React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
+      locale: tour,
+      disableTourSkipOnEsc: disableTourSkipOnEsc
+    })),
     locale: tour,
     spotlightPadding: 8,
     spotlightClicks: spotlightClicks,
@@ -9588,10 +9514,10 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
   }, [ref, callback]);
 };
 
-var _excluded$x = ["noPadding"];
+var _excluded$8 = ["noPadding"];
 var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
   var noPadding = externalProps.noPadding,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$x);
+      props = _objectWithoutPropertiesLoose(externalProps, _excluded$8);
 
   var className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
@@ -9672,7 +9598,7 @@ exports.defaultLocalisationTexts = defaultLocalisationTexts;
 exports.findByValue = findByValue$1;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
-exports.getNextIndexFromKeycode = getNextIndexFromKeycode;
+exports.getNextIndexFromKey = getNextIndexFromKey;
 exports.getParentRowIndexPath = getParentRowIndexPath;
 exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
 exports.icons = icons;