@economic/taco 1.1.12 → 1.2.0

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');
@@ -38,38 +37,6 @@ var PrimitiveSwitch = require('@radix-ui/react-switch');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 function IconAccountPreview(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3225,14 +3192,12 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
-var _excluded = ["id"],
-    _excluded2 = ["id", "defaultId", "onChange", "as"];
-var AccordionContext = /*#__PURE__*/React__default.createContext({
+const AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
 });
-var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
-  var isExpanded = !!props['aria-expanded'];
-  var className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
+const StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
+  const isExpanded = !!props['aria-expanded'];
+  const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
   return React__default.createElement("button", Object.assign({}, props, {
     ref: ref,
     className: className
@@ -3240,12 +3205,13 @@ var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionSty
     name: isExpanded ? 'chevron-up' : 'chevron-down'
   }));
 });
-var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
-  var children = props.children;
-
-  var _React$useContext = React__default.useContext(AccordionContext),
-      Heading = _React$useContext.as;
-
+const Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
+  const {
+    children
+  } = props;
+  const {
+    as: Heading
+  } = React__default.useContext(AccordionContext);
   return React__default.createElement(AccordionPrimitive.Header, {
     asChild: true
   }, React__default.createElement(Heading, {
@@ -3255,35 +3221,34 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(p
     asChild: true
   }, React__default.createElement(StyledTrigger, null, children))));
 });
-var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
+const Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
   return React__default.createElement(AccordionPrimitive.Content, Object.assign({}, props, {
     ref: ref
   }));
 });
 
-var Item = function Item(props) {
-  var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+const Item = props => {
+  const {
+    id,
+    ...otherProps
+  } = props;
   return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
     value: id
   }));
 };
 
-var Accordion = function Accordion(props) {
-  var id = props.id,
-      defaultId = props.defaultId,
-      onChange = props.onChange,
-      _props$as = props.as,
-      as = _props$as === void 0 ? 'h2' : _props$as,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  var context = React__default.useMemo(function () {
-    return {
-      as: as
-    };
-  }, [as]);
-  var valueProps;
+const Accordion = props => {
+  const {
+    id,
+    defaultId,
+    onChange,
+    as = 'h2',
+    ...otherProps
+  } = props;
+  const context = React__default.useMemo(() => ({
+    as
+  }), [as]);
+  let valueProps;
 
   if (defaultId) {
     valueProps = {
@@ -3296,8 +3261,8 @@ var Accordion = function Accordion(props) {
     };
   }
 
-  var type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
-  var className = cn('divide-y divide-grey', props.className);
+  const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
+  const className = cn('divide-y divide-grey', props.className);
   return React__default.createElement(AccordionContext.Provider, {
     value: context
   }, React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
@@ -3310,8 +3275,8 @@ Accordion.Item = Item;
 Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
-var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]', props.className);
+const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]', props.className);
   return React.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -3364,19 +3329,20 @@ const getOutlineClasses = state => {
   }
 };
 
-var _excluded$1 = ["children", "compact", "outline", "state"];
-var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
-  var _cn;
-
-  var children = props.children,
-      _props$compact = props.compact,
-      compact = _props$compact === void 0 ? false : _props$compact,
-      _props$outline = props.outline,
-      outline = _props$outline === void 0 ? false : _props$outline,
-      state = props.state,
-      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);
+const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
+  const {
+    children,
+    compact = false,
+    outline = false,
+    state,
+    ...otherProps
+  } = props;
+  const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+    [getOutlineClasses(state)]: outline,
+    [`border-transparent ${getStateClasses(state)}`]: !outline,
+    'h-2 w-2 min-w-0': compact,
+    'h-5 py-0 px-1.5': !compact
+  }, props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3560,11 +3526,13 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref)
   }, className, ref);
 });
 
-var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
-  var children = props.children,
-      state = props.state,
-      onClose = props.onClose;
-  var className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
+  const {
+    children,
+    state,
+    onClose
+  } = props;
+  const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return React.createElement("div", {
     className: className,
     "data-taco": "banner",
@@ -3577,32 +3545,32 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$2 = ["fluid"];
-var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-
-  var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
+const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  const {
+    fluid,
+    ...otherProps
+  } = props;
+  const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
-  var children = otherProps.children; // add a chevron icon to menu buttons
+  let children = otherProps.children; // add a chevron icon to menu buttons
 
   if (typeof otherProps.menu === 'function') {
-    children = Array.isArray(children) ? [].concat(children, [React.createElement(Icon, {
+    children = Array.isArray(children) ? [...children, React.createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
-    })]) : [children, React.createElement(Icon, {
+    })] : [children, React.createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
     })];
   }
 
-  return createButton(_extends({}, otherProps, {
-    children: children,
+  return createButton({ ...otherProps,
+    children,
     'data-taco': 'button'
-  }), className, ref);
+  }, className, ref);
 });
 
 function useTimer(duration = 0, callback) {
@@ -3756,6 +3724,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();
@@ -3791,11 +3764,11 @@ 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",
-    className: "text-grey-darkest cursor-pointer -mr-2 !px-0",
+    className: "text-grey-darkest -mr-2 cursor-pointer !px-0",
     icon: "close",
     "aria-label": texts.toasts.dismiss,
     onClick: handleClose
@@ -4058,37 +4031,37 @@ const Provider = props => {
 const useTaco = () => React.useContext(Context);
 const useLocalization = () => useTaco().localization;
 
-var _excluded$3 = ["onChange", "value"];
-
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
+const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
+  className: "dot"
+}) : day.getDate();
 
-var thisYear = /*#__PURE__*/new Date().getFullYear();
-var years = [];
+const thisYear = /*#__PURE__*/new Date().getFullYear();
+const years = [];
 
-for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
 
-var Navbar = /*#__PURE__*/React.memo(function (_ref) {
-  var onMonthChange = _ref.onMonthChange,
-      onNextClick = _ref.onNextClick,
-      onPreviousClick = _ref.onPreviousClick,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? new Date() : _ref$value;
-
-  var _useLocalization = useLocalization(),
-      _useLocalization$text = _useLocalization.texts.calendar,
-      actions = _useLocalization$text.actions,
-      months = _useLocalization$text.months;
+const Navbar = /*#__PURE__*/React.memo(({
+  onMonthChange,
+  onNextClick,
+  onPreviousClick,
+  value = new Date()
+}) => {
+  const {
+    texts: {
+      calendar: {
+        actions,
+        months
+      }
+    }
+  } = useLocalization();
 
-  var handleChange = function handleChange(event) {
-    var _event$target$form = event.target.form,
-        year = _event$target$form.year,
-        month = _event$target$form.month;
+  const handleChange = function handleChange(event) {
+    const {
+      year,
+      month
+    } = event.target.form;
     onMonthChange(new Date(year.value, month.value));
   };
 
@@ -4101,59 +4074,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map(function (month, i) {
-    return React.createElement("option", {
-      key: month,
-      value: i
-    }, month);
-  })), React.createElement("select", {
+  }, months.map((month, i) => React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), React.createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(function (year) {
-    return React.createElement("option", {
-      key: year,
-      value: year
-    }, String(year));
-  }))), React.createElement("div", null, React.createElement(IconButton, {
+  }, years.map(year => React.createElement("option", {
+    key: year,
+    value: year
+  }, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-left",
     "aria-label": actions.previousMonth,
-    onClick: function onClick() {
-      return onPreviousClick();
-    },
+    onClick: () => onPreviousClick(),
     rounded: true
   }), React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-right",
     "aria-label": actions.nextMonth,
-    onClick: function onClick() {
-      return onNextClick();
-    },
+    onClick: () => onNextClick(),
     rounded: true
   })));
 });
-var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  var handleChange = props.onChange,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-
-  var _useLocalization2 = useLocalization(),
-      locale = _useLocalization2.locale,
-      texts = _useLocalization2.texts;
-
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
-      visibleMonth = _React$useState[0],
-      setVisibleMonth = _React$useState[1];
-
-  React.useEffect(function () {
+const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+  const {
+    onChange: handleChange,
+    value,
+    ...otherProps
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  React.useEffect(() => {
     if (visibleMonth !== value) {
       setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
   }, [value]);
 
-  var handleDayClick = function handleDayClick(date, modifiers, event) {
+  const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
     }
@@ -4161,8 +4124,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(date, event);
   };
 
-  var handleCalendarClickToday = function handleCalendarClickToday() {
-    var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
+  const handleCalendarClickToday = () => {
+    const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
 
     today.setHours(12);
     today.setMinutes(0);
@@ -4170,7 +4133,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(today);
   };
 
-  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  const className = cn('flex bg-white text-xs p-4', otherProps.className);
   return React.createElement("div", {
     "data-taco": "calendar"
   }, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
@@ -4181,18 +4144,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     firstDayOfWeek: 1,
     months: texts.calendar.months,
     weekdaysShort: texts.calendar.weekdaysShort,
-    navbarElement: function navbarElement(navProps) {
-      return React.createElement(Navbar, Object.assign({}, navProps, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      }));
-    },
+    navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
+      onMonthChange: setVisibleMonth,
+      value: visibleMonth
+    })),
     onDayClick: handleDayClick,
     onMonthChange: setVisibleMonth,
     onTodayButtonClick: handleCalendarClickToday,
-    captionElement: function captionElement() {
-      return null;
-    },
+    captionElement: () => null,
     todayButton: texts.calendar.actions.today,
     showOutsideDays: true,
     renderDay: renderDay,
@@ -4201,32 +4160,67 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
-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,
-      indeterminate = props.indeterminate,
-      invalid = props.invalid,
-      label = props.label,
-      onChange = props.onChange,
-      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)]
+const Content$1 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
+  const {
+    noPadding,
+    ...props
+  } = externalProps;
+  const className = cn('flex-grow overflow-auto', {
+    'mx-4 mb-4': !noPadding
+  }, props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
+  const {
+    title,
+    menu,
+    children
+  } = props;
+  const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
+  return React.createElement("div", {
+    className: className,
+    "data-taco": "card",
+    ref: ref
+  }, React.createElement("div", {
+    className: "mx-4 mt-4 mb-2 flex"
+  }, title && React.createElement("h4", {
+    className: "mb-0 flex-grow text-left"
+  }, title), menu ? React.createElement(IconButton, {
+    icon: "ellipsis-horizontal",
+    appearance: "discrete",
+    menu: menu,
+    className: "-mt-[4px]"
+  }) : null), children);
+});
+Card.Content = Content$1;
+
+const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
+  const {
+    checked,
+    highlighted,
+    indeterminate,
+    invalid,
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const 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, {
     'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
   });
-  var handleChange;
+  let handleChange;
 
   if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
-    };
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
 
-  var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+  const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -4240,7 +4234,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   })));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    const labelClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
     return React.createElement("label", {
@@ -4251,9 +4245,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   return element;
 });
 
-var useProxiedRef = function useProxiedRef(ref) {
-  var internalRef = React.useRef(null);
-  React.useEffect(function () {
+const useProxiedRef = ref => {
+  const internalRef = React.useRef(null);
+  React.useEffect(() => {
     if (ref) {
       if (typeof ref === 'function') {
         ref(internalRef.current);
@@ -4360,48 +4354,34 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   return input;
 });
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
-  if (direction === void 0) {
-    direction = 'vertical';
-  }
+const getNextIndexFromKey = (key, length, index, direction = 'vertical') => {
+  const previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  const nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
 
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
-
-  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:
       return;
   }
 };
-var useListKeyboardNavigation = function useListKeyboardNavigation(length, options) {
-  if (length === void 0) {
-    length = 0;
-  }
-
-  if (options === void 0) {
-    options = {
-      direction: 'vertical'
-    };
-  }
-
-  var _React$useState = React__default.useState(options.initialIndex),
-      index = _React$useState[0],
-      setIndex = _React$useState[1];
+const useListKeyboardNavigation = (length = 0, options = {
+  direction: 'vertical'
+}) => {
+  const [index, setIndex] = React__default.useState(options.initialIndex);
 
-  var getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+  const getNextIndex = event => {
+    const nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
 
     if (nextIndex !== undefined) {
       event.preventDefault();
@@ -4413,13 +4393,13 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(length, optio
   return [index, setIndex, getNextIndex];
 };
 
-var scrollToChildElement = function scrollToChildElement(parent, child) {
-  var clientHeight = parent.clientHeight;
+const scrollToChildElement = (parent, child) => {
+  const clientHeight = parent.clientHeight;
 
   if (parent.scrollHeight > clientHeight) {
-    var scrollTop = parent.scrollTop;
-    var scrollBottom = clientHeight + scrollTop;
-    var childBottom = child.offsetTop + child.offsetHeight;
+    const scrollTop = parent.scrollTop;
+    const scrollBottom = clientHeight + scrollTop;
+    const childBottom = child.offsetTop + child.offsetHeight;
 
     if (childBottom > scrollBottom) {
       parent.scrollTop = childBottom - clientHeight;
@@ -4429,11 +4409,11 @@ var scrollToChildElement = function scrollToChildElement(parent, child) {
   }
 };
 
-var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
-  var scrollTo = function scrollTo(index) {
+const useListScrollTo = (internalRef, itemRefs) => {
+  const scrollTo = index => {
     if (internalRef && internalRef.current) {
       if (index !== undefined) {
-        var activeRef = itemRefs[index];
+        const activeRef = itemRefs[index];
 
         if (activeRef && activeRef.current) {
           scrollToChildElement(internalRef.current, activeRef.current);
@@ -4445,14 +4425,14 @@ var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
   };
 
   return {
-    scrollTo: scrollTo
+    scrollTo
   };
 };
 
 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) {
@@ -4635,7 +4615,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;
   }
 
@@ -4946,13 +4926,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));
@@ -4960,10 +4940,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();
           }
 
@@ -4972,7 +4952,7 @@ const useCombobox = ({
           return;
         }
 
-      case keycode('down'):
+      case 'ArrowDown':
         if (open) {
           event.preventDefault();
         } else {
@@ -4983,9 +4963,9 @@ const useCombobox = ({
 
         break;
 
-      case keycode('up'):
-      case keycode('home'):
-      case keycode('end'):
+      case 'ArrowUp':
+      case 'Home':
+      case 'End':
         {
           if (open) {
             event.preventDefault();
@@ -5001,9 +4981,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);
       }
@@ -5076,22 +5056,14 @@ const useCombobox = ({
   };
 };
 
-var getVisibility = function getVisibility(element) {
-  return Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
-};
-
-var useBoundingClientRectListener = function useBoundingClientRectListener(ref) {
-  var _React$useState = React.useState(undefined),
-      dimensions = _React$useState[0],
-      setDimensions = _React$useState[1];
+const getVisibility = element => Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
 
-  var isRefElementVisible = getVisibility(ref.current);
+const useBoundingClientRectListener = ref => {
+  const [dimensions, setDimensions] = React.useState(undefined);
+  const isRefElementVisible = getVisibility(ref.current);
+  const [visibility, setVisibility] = React.useState(isRefElementVisible);
 
-  var _React$useState2 = React.useState(isRefElementVisible),
-      visibility = _React$useState2[0],
-      setVisibility = _React$useState2[1];
-
-  var resize = function resize() {
+  const resize = () => {
     if (visibility) {
       var _ref$current;
 
@@ -5099,17 +5071,17 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
     }
   };
 
-  React.useEffect(function () {
-    var timeout = setTimeout(resize, 0);
-    var debouncedResize = debounce(resize, 250);
+  React.useEffect(() => {
+    const timeout = setTimeout(resize, 0);
+    const debouncedResize = debounce(resize, 250);
     window.addEventListener('resize', debouncedResize);
-    return function () {
+    return () => {
       clearTimeout(timeout);
       window.removeEventListener('resize', debouncedResize);
     };
   }, [ref.current, visibility]);
-  React.useEffect(function () {
-    var newRefElementVisibility = getVisibility(ref.current);
+  React.useEffect(() => {
+    const newRefElementVisibility = getVisibility(ref.current);
 
     if (visibility !== newRefElementVisibility) {
       // When visibility of an element changes, then the new visibility of the element can only be checked after the
@@ -5121,27 +5093,26 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-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$5);
-
-  var _useCombobox = useCombobox(otherProps, ref),
-      combobox = _useCombobox.combobox,
-      button = _useCombobox.button,
-      input = _useCombobox.input,
-      popover = _useCombobox.popover,
-      list = _useCombobox.list;
-
-  var internalRef = React.useRef(null);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative', {
+const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
+  const {
+    className: externalClassName,
+    dialog,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    combobox,
+    button,
+    input,
+    popover,
+    list
+  } = useCombobox(otherProps, ref);
+  const internalRef = React.useRef(null);
+  const {
+    texts
+  } = useLocalization();
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return React.createElement("span", {
@@ -5160,7 +5131,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: function onClick() {
+      onClick: () => {
         var _input$ref$current;
 
         popover.onOpenChange(true);
@@ -5172,7 +5143,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: function onFocus(event) {
+      onFocus: event => {
         var _input$ref$current2;
 
         // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
@@ -5185,7 +5156,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     }) : undefined
   })))), React.createElement(PopoverPrimitive.Content, {
     align: "start",
-    onOpenAutoFocus: function onOpenAutoFocus(event) {
+    onOpenAutoFocus: event => {
       event.preventDefault();
     },
     sideOffset: 4
@@ -5198,68 +5169,48 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   })))));
 });
 
-var format = function format(date, mask) {
-  if (mask === void 0) {
-    mask = 'dd.mm.yy';
-  }
-
+const format = (date, mask = 'dd.mm.yy') => {
   if (!date) {
     return undefined;
   }
 
-  var value = dateFns.isDate(date) ? date : dateFns.toDate(date);
+  const value = dateFns.isDate(date) ? date : dateFns.toDate(date);
 
   if (!dateFns.isValid(value)) {
     return undefined;
   }
 
-  var pad = function pad(v) {
-    return String(v).length === 1 ? "0" + v : v.toString();
-  };
+  const pad = v => String(v).length === 1 ? `0${v}` : v.toString();
 
   return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
 };
-var parseFromCustomString = function parseFromCustomString(date, mask) {
-  if (date === void 0) {
-    date = '';
-  }
-
-  if (mask === void 0) {
-    mask = 'dd.mm.yy';
-  }
-
+const parseFromCustomString = (date = '', mask = 'dd.mm.yy') => {
   if (!date || !date.length) {
     return undefined;
   }
 
-  var sanitizedMask = mask.split(/[^dmy]/);
-  var dd = sanitizedMask.findIndex(function (x) {
-    return x === 'dd';
-  });
-  var mm = sanitizedMask.findIndex(function (x) {
-    return x === 'mm';
-  });
-  var yy = sanitizedMask.findIndex(function (x) {
-    return x === 'yy' || x === 'yyyy';
-  });
-  var day;
-  var month;
-  var year;
+  const sanitizedMask = mask.split(/[^dmy]/);
+  const dd = sanitizedMask.findIndex(x => x === 'dd');
+  const mm = sanitizedMask.findIndex(x => x === 'mm');
+  const yy = sanitizedMask.findIndex(x => x === 'yy' || x === 'yyyy');
+  let day;
+  let month;
+  let year;
 
-  var getFullYear = function getFullYear(y) {
+  const getFullYear = y => {
     if (y && y.length === 2) {
-      var z = Number.parseInt(y, 10);
-      return z > 50 ? "19" + y : "20" + y;
+      const z = Number.parseInt(y, 10);
+      return z > 50 ? `19${y}` : `20${y}`;
     }
 
     return y;
   };
 
-  var inputParts = date.split(/\D/);
+  const inputParts = date.split(/\D/);
 
   if (inputParts.length === 1) {
-    var fullDate = inputParts[0];
-    var unseparatedMask = mask.replace(/[^dmy]/g, '');
+    const fullDate = inputParts[0];
+    const unseparatedMask = mask.replace(/[^dmy]/g, '');
     day = fullDate.slice(unseparatedMask.indexOf('d'), unseparatedMask.lastIndexOf('d') + 1);
     month = fullDate.slice(unseparatedMask.indexOf('m'), unseparatedMask.lastIndexOf('m') + 1);
     year = getFullYear(fullDate.slice(unseparatedMask.indexOf('y'), unseparatedMask.lastIndexOf('y') + 3)); // account for full years
@@ -5272,7 +5223,7 @@ var parseFromCustomString = function parseFromCustomString(date, mask) {
   day = Number.parseInt(day, 10);
   month = Number.parseInt(month, 10);
   year = Number.parseInt(year, 10);
-  var currentDate = new Date();
+  const currentDate = new Date();
   return new Date(
   /* year */
   Object.is(year, NaN) ? currentDate.getFullYear() : year,
@@ -5287,8 +5238,8 @@ var parseFromCustomString = function parseFromCustomString(date, mask) {
   0 // set to midday to avoid UTC offset causing dates to be mismatched server side
   );
 };
-var parseFromISOString = function parseFromISOString(date) {
-  var tempDate = new Date(date);
+const parseFromISOString = date => {
+  const tempDate = new Date(date);
   return dateFns.isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
 };
 
@@ -5408,8 +5359,8 @@ const UnstyledContent = /*#__PURE__*/React.forwardRef(function PopoverContent(pr
 });
 
 function mergeRefs(refs) {
-  return function (value) {
-    refs.forEach(function (ref) {
+  return value => {
+    refs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(value);
       } else if (ref != null) {
@@ -5453,7 +5404,7 @@ const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapp
     ref
   });
 });
-const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+const Content$2 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
   const className = cn('bg-white focus:border-blue-light', props.className);
   let output;
 
@@ -5492,26 +5443,26 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   }, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
 });
 Popover.Trigger = Trigger$1;
-Popover.Content = Content$1;
+Popover.Content = Content$2;
 Popover.Close = Close$1;
 
-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$6);
-
-  var _useDatepicker = useDatepicker(otherProps, ref),
-      calendar = _useDatepicker.calendar,
-      input = _useDatepicker.input;
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
+const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
+  const {
+    className: externalClassName,
+    onReset: handleReset,
+    style,
+    shortcuts,
+    shortcutsText,
+    ...otherProps
+  } = props;
+  const {
+    calendar,
+    input
+  } = useDatepicker(otherProps, ref);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
   return React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -5521,40 +5472,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar"
-    })), React.createElement(Popover.Content, null, function (_ref) {
-      var close = _ref.close;
-      return React.createElement("div", {
-        className: "-m-3 flex"
-      }, React.createElement(Calendar$1, Object.assign({}, calendar, {
-        onChange: function onChange(date, event) {
-          calendar.onChange(date, event);
-          close();
-        },
-        tabIndex: -1
-      })), shortcuts && React.createElement("div", {
-        className: "border-grey-dark flex flex-col border-l"
-      }, React.createElement("span", {
-        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map(function (shortcut, i) {
-        return React.createElement("li", {
-          key: i
-        }, React.createElement("button", {
-          className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
-          onClick: function onClick(event) {
-            event.persist();
-            shortcut.onClick(event);
-            close();
-          }
-        }, shortcut.text));
-      })), handleReset && React.createElement("button", {
-        className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
-        onClick: function onClick(event) {
-          event.persist();
-          handleReset(event);
-          close();
-        }
-      }, texts.datepicker.clear)));
-    }))
+    })), React.createElement(Popover.Content, null, ({
+      close
+    }) => React.createElement("div", {
+      className: "-m-3 flex"
+    }, React.createElement(Calendar$1, Object.assign({}, calendar, {
+      onChange: (date, event) => {
+        calendar.onChange(date, event);
+        close();
+      },
+      tabIndex: -1
+    })), shortcuts && React.createElement("div", {
+      className: "border-grey-dark flex flex-col border-l"
+    }, React.createElement("span", {
+      className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
+    }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
+      key: i
+    }, React.createElement("button", {
+      className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
+      onClick: event => {
+        event.persist();
+        shortcut.onClick(event);
+        close();
+      }
+    }, shortcut.text)))), handleReset && React.createElement("button", {
+      className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
+      onClick: event => {
+        event.persist();
+        handleReset(event);
+        close();
+      }
+    }, texts.datepicker.clear)))))
   })));
 });
 
@@ -5668,7 +5616,7 @@ const RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function RenderPropWra
     ...renderProps
   });
 });
-const Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+const Content$3 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
   const dialog = useCurrentDialog();
   const internalRef = useProxiedRef(ref);
   const {
@@ -5797,14 +5745,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$7 = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
-
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return React.useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    React.Children.toArray(initialChildren).forEach(function (child) {
+const useSeparatedChildren = initialChildren => {
+  return React.useMemo(() => {
+    const children = [];
+    let drawer;
+    let extra;
+    React.Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
 
       if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
@@ -5819,55 +5765,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   }, [initialChildren]);
 };
 
-var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
-  var initialChildren = props.children,
-      _props$closeOnEscape = props.closeOnEscape,
-      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
-      defaultOpen = props.defaultOpen,
-      _props$draggable = props.draggable,
-      draggable = _props$draggable === void 0 ? false : _props$draggable,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      open = props.open,
-      _props$showCloseButto = props.showCloseButton,
-      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
-
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
-
-  var _React$useState = React.useState(false),
-      drawerOpen = _React$useState[0],
-      setDrawerOpen = _React$useState[1];
-
-  var context = React.useMemo(function () {
-    return {
-      closeOnEscape: closeOnEscape,
-      draggable: draggable,
-      drawer: {
-        open: drawerOpen,
-        toggle: function toggle() {
-          return setDrawerOpen(function (isDrawerOpen) {
-            return !isDrawerOpen;
-          });
-        }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      showCloseButton: showCloseButton,
-      size: size,
-      ref: ref
-    };
-  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
+  const {
+    children: initialChildren,
+    closeOnEscape = true,
+    defaultOpen,
+    draggable = false,
+    onChange,
+    onClose,
+    open,
+    showCloseButton = true,
+    size = 'sm',
+    trigger,
+    ...otherProps
+  } = props;
+  const [children, drawer, extra] = useSeparatedChildren(initialChildren);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const context = React.useMemo(() => ({
+    closeOnEscape,
+    draggable,
+    drawer: {
+      open: drawerOpen,
+      toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
+    },
+    elements: {
+      drawer,
+      extra
+    },
+    onClose,
+    props: otherProps,
+    showCloseButton,
+    size,
+    ref
+  }), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
   return React.createElement(DialogContext.Provider, {
     value: context
   }, React.createElement(DialogPrimitive.Root, {
@@ -5877,26 +5807,25 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
   }, trigger && React.createElement(Trigger$2, null, trigger), children));
 });
 Dialog.Trigger = Trigger$2;
-Dialog.Content = Content$2;
+Dialog.Content = Content$3;
 Dialog.Title = Title;
 Dialog.Footer = Footer;
 Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$8 = ["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$8);
-
-  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
@@ -5911,13 +5840,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-var _excluded$9 = ["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$9);
-
-  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, {
@@ -5927,13 +5855,15 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$a = ["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$a);
-
-  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",
@@ -5941,19 +5871,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$b = ["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);
   }
 
@@ -5963,22 +5892,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$4 = /*#__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();
   };
 
@@ -6000,25 +5928,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$b);
-
-  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);
     }
@@ -6031,7 +5954,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
   }, anchor && React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
-Hanger.Content = Content$3;
+Hanger.Content = Content$4;
 Hanger.Title = Title$1;
 
 const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
@@ -6040,7 +5963,7 @@ const Trigger$3 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props,
     ref: ref
   }));
 });
-const Content$4 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
+const Content$5 = /*#__PURE__*/React.forwardRef(function HoverCardContent(externalProps, ref) {
   const {
     placement,
     ...props
@@ -6058,7 +5981,7 @@ const HoverCard = props => {
   }));
 };
 HoverCard.Trigger = Trigger$3;
-HoverCard.Content = Content$4;
+HoverCard.Content = Content$5;
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   onSearch,
@@ -6077,7 +6000,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   const handleKeyDown = event => {
     var _props$onKeyDown;
 
-    const isEnterKeyPressed = event.keyCode === keycode('enter');
+    const isEnterKeyPressed = event.key === 'Enter';
 
     if (isEnterKeyPressed) {
       handleClick();
@@ -6180,9 +6103,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) {
@@ -6355,9 +6279,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) {
@@ -6367,15 +6292,15 @@ 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;
@@ -6495,7 +6420,7 @@ const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref)
   })));
 });
 
-const Content$5 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
+const Content$6 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
   const internalRef = useProxiedRef(ref);
   const menu = useCurrentMenu();
   const {
@@ -6667,7 +6592,7 @@ const Checkbox$1 = props => {
     className: "absolute left-0 ml-1.5"
   }, React.createElement(Icon, {
     name: "tick",
-    className: "!h-4 !w-4 -ml-px"
+    className: "-ml-px !h-4 !w-4"
   })), children);
 };
 
@@ -6792,7 +6717,7 @@ const RadioItem = props => {
   }), React.createElement(DropdownMenuPrimitive.ItemIndicator, {
     className: "absolute left-0 ml-1.5"
   }, React.createElement("span", {
-    className: "flex h-1.5 w-1.5 ml-1 rounded-full bg-current "
+    className: "ml-1 flex h-1.5 w-1.5 rounded-full bg-current "
   })), children);
 };
 const MenuRadioGroupContext = /*#__PURE__*/React.createContext({
@@ -6854,7 +6779,7 @@ const Menu$1 = externalProps => {
   }), trigger && React.createElement(Trigger$4, null, trigger), children));
 };
 Menu$1.Trigger = Trigger$4;
-Menu$1.Content = Content$5;
+Menu$1.Content = Content$6;
 Menu$1.Item = Item$1;
 Menu$1.Link = Link;
 Menu$1.Checkbox = Checkbox$1;
@@ -6930,26 +6855,23 @@ const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props,
 Treeview.Group = TreeviewGroup;
 Treeview.Item = TreeviewItem;
 
-var useDropTarget = function useDropTarget(onDrop) {
-  var _React$useState = React__default.useState(false),
-      isDraggedOver = _React$useState[0],
-      setDraggedOver = _React$useState[1];
-
-  var handleDragEnter = React__default.useCallback(function (event) {
+const useDropTarget = onDrop => {
+  const [isDraggedOver, setDraggedOver] = React__default.useState(false);
+  const handleDragEnter = React__default.useCallback(event => {
     event.preventDefault();
     setDraggedOver(true);
   }, []);
-  var handleDragLeave = React__default.useCallback(function (event) {
+  const handleDragLeave = React__default.useCallback(event => {
     event.preventDefault();
 
     if (event.target === event.currentTarget) {
       setDraggedOver(false);
     }
   }, []);
-  var handleDragOver = React__default.useCallback(function (event) {
+  const handleDragOver = React__default.useCallback(event => {
     event.preventDefault();
   }, []);
-  var handleDrop = React__default.useCallback(function (event) {
+  const handleDrop = React__default.useCallback(event => {
     event.preventDefault();
     event.persist();
     setDraggedOver(false);
@@ -6958,7 +6880,7 @@ var useDropTarget = function useDropTarget(onDrop) {
       onDrop(event);
     }
   }, [onDrop]);
-  var props = onDrop ? {
+  const props = onDrop ? {
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
     onDragOver: handleDragOver,
@@ -7180,15 +7102,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();
 
@@ -7200,10 +7122,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();
           }
 
@@ -7422,25 +7344,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;
@@ -7940,7 +7862,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();
       }
@@ -8216,24 +8138,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;
@@ -8243,7 +8165,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) {
@@ -8254,7 +8176,7 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
               return;
             }
 
-            if (event.keyCode === keycode('e')) {
+            if (event.key === 'e') {
               event.preventDefault();
               currentRow.toggleRowEditing();
               return;
@@ -8262,19 +8184,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;
@@ -8282,7 +8204,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();
@@ -8509,7 +8431,7 @@ const useTable = (props, ref) => {
   const {
     children,
     data,
-    dangerouslyHijackGlobalKeyboardNavigation: _1,
+    dangerouslyHijackGlobalKeyboardNavigation: _,
     onRowClick,
     onRowDrag,
     onSelectedRows,
@@ -8522,6 +8444,10 @@ const useTable = (props, ref) => {
     manualSorting,
     onSort,
     sortRules,
+    //index
+    activeIndex: _1,
+    defaultActiveIndex: _2,
+    onChangeActiveIndex: _3,
     // pagination
     disablePagination = true,
     length,
@@ -9337,7 +9263,7 @@ const Tooltip$1 = ({
   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;
@@ -9454,14 +9380,12 @@ const Tour = props => {
 };
 Tour.Step = TourStep;
 
-var useOnClickOutside = function useOnClickOutside(ref, callback) {
-  React__default.useEffect(function () {
-    var listener = function listener(event) {
-      var refs = !Array.isArray(ref) ? [ref] : ref;
+const useOnClickOutside = (ref, callback) => {
+  React__default.useEffect(() => {
+    const listener = event => {
+      const refs = !Array.isArray(ref) ? [ref] : ref;
 
-      if (refs.some(function (currentRef) {
-        return !currentRef.current || currentRef.current.contains(event.target);
-      })) {
+      if (refs.some(currentRef => !currentRef.current || currentRef.current.contains(event.target))) {
         return;
       }
 
@@ -9470,48 +9394,13 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
 
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
-    return function () {
+    return () => {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
   }, [ref, callback]);
 };
 
-var _excluded$c = ["noPadding"];
-var Content$6 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
-  var noPadding = externalProps.noPadding,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded$c);
-
-  var className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
-  }, props.className);
-  return React.createElement("div", Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
-var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
-  var title = props.title,
-      menu = props.menu,
-      children = props.children;
-  var className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
-  return React.createElement("div", {
-    className: className,
-    "data-taco": "card",
-    ref: ref
-  }, React.createElement("div", {
-    className: "mx-4 mt-4 mb-2 flex"
-  }, title && React.createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? React.createElement(IconButton, {
-    icon: "ellipsis-horizontal",
-    appearance: "discrete",
-    menu: menu,
-    className: "-mt-[4px]"
-  }) : null), children);
-});
-Card.Content = Content$6;
-
 exports.Accordion = Accordion;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
@@ -9561,7 +9450,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;