@economic/taco 0.0.6-alpha.0 → 0.0.10-alpha.0

package/dist/taco.cjs.development.js

@@ -9,16 +9,16 @@ var React__default = _interopDefault(React);
 var cn = _interopDefault(require('classnames'));
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var PopoverPrimitive = require('@radix-ui/react-popover');
+var ReactDayPicker = _interopDefault(require('react-day-picker'));
 var uuid = require('uuid');
 var framerMotion = require('framer-motion');
-var DialogPrimitive = require('@radix-ui/react-dialog');
-var interactions = require('@react-aria/interactions');
-var ReactDayPicker = _interopDefault(require('react-day-picker'));
 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');
+var interactions = require('@react-aria/interactions');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var reactTable = require('react-table');
@@ -3108,7 +3108,9 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
 
 var _excluded$1 = ["id"],
     _excluded2 = ["id", "defaultId", "onChange", "as"];
-var AccordionContext = /*#__PURE__*/React__default.createContext({});
+var AccordionContext = /*#__PURE__*/React__default.createContext({
+  as: 'h2'
+});
 var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function (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);
@@ -3123,8 +3125,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var children = props.children;
 
   var _React$useContext = React__default.useContext(AccordionContext),
-      _React$useContext$as = _React$useContext.as,
-      Heading = _React$useContext$as === void 0 ? 'h2' : _React$useContext$as;
+      Heading = _React$useContext.as;
 
   return React__default.createElement(AccordionPrimitive.Header, {
     asChild: true
@@ -3154,9 +3155,15 @@ var Accordion = function Accordion(props) {
   var id = props.id,
       defaultId = props.defaultId,
       onChange = props.onChange,
-      as = props.as,
+      _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;
 
   if (defaultId) {
@@ -3173,25 +3180,24 @@ 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);
   return React__default.createElement(AccordionContext.Provider, {
-    value: {
-      as: as
-    }
+    value: context
   }, React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    type: type,
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;
 Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
-var Backdrop = function Backdrop(props) {
+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)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
   return React.createElement("div", Object.assign({}, props, {
-    className: className
+    className: className,
+    ref: ref
   }));
-};
+});
 
 var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
   return React.createElement("span", Object.assign({}, props, {
@@ -3341,42 +3347,143 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), title)));
 });
 
-var _excluded$5 = ["placement"];
-var UnstyledArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement(PopoverPrimitive.Arrow, {
-    className: "pointer-events-none -mt-px",
-    asChild: true,
-    offset: 2,
-    width: 30,
-    height: 11
-  }, React.createElement("svg", Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 19 30 11",
-    style: {
-      transform: 'rotateZ(180deg)'
-    }
-  }), React.createElement("path", {
-    className: "text-grey-dark group-focus:text-blue-light fill-current",
-    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-  }), React.createElement("path", {
-    className: "fill-current",
-    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-  })));
-});
-var UnstyledContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var side = props.placement,
+var _excluded$5 = ["dialog", "hanger", "menu", "popover", "tooltip"];
+var getButtonClasses = function getButtonClasses() {
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
+};
+var getAppearanceClasses = function getAppearanceClasses(value, icon) {
+  if (icon === void 0) {
+    icon = false;
+  }
+
+  switch (value) {
+    case 'primary':
+      return "yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid";
+
+    case 'danger':
+      return "yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid";
+
+    case 'ghost':
+      return "yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted";
+
+    case 'discrete':
+      {
+        if (icon) {
+          return "bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent";
+        }
+
+        return "yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent";
+      }
+
+    default:
+      return "yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid";
+  }
+};
+var createButton = function createButton(props, className, ref) {
+  var dialog = props.dialog,
+      hanger = props.hanger,
+      menu = props.menu,
+      popover = props.popover,
+      tooltip = props.tooltip,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
 
-  var className = cn('border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group ', props.className);
-  return React.createElement(PopoverPrimitive.Content, Object.assign({}, otherProps, {
+  var button = React__default.createElement(Button, Object.assign({}, otherProps, {
     className: className,
-    side: side,
-    sideOffset: 1,
-    style: _extends({}, props.style, {
-      zIndex: 996
-    }),
     ref: ref
   }));
+
+  if (typeof dialog === 'function') {
+    button = dialog({
+      trigger: button
+    });
+  }
+
+  if (typeof hanger === 'function') {
+    button = hanger({
+      anchor: button
+    });
+  }
+
+  if (typeof menu === 'function') {
+    button = menu({
+      trigger: button
+    });
+  }
+
+  if (typeof popover === 'function') {
+    button = popover({
+      trigger: button
+    });
+  }
+
+  if (tooltip) {
+    button = React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
+
+var _excluded$6 = ["appearance", "icon", "rounded"];
+var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
+  var appearance = props.appearance,
+      icon = props.icon,
+      _props$rounded = props.rounded,
+      rounded = _props$rounded === void 0 ? false : _props$rounded,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+
+  var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
+    'rounded-full': rounded,
+    rounded: !rounded,
+    'cursor-not-allowed opacity-50': props.disabled,
+    'focus:yt-focus active:focus:yt-focus': !props.disabled
+  }, props.className);
+
+  if (!icon) {
+    return null;
+  }
+
+  return createButton(_extends({}, otherProps, {
+    children: React.createElement(Icon, {
+      name: icon,
+      className: "m-0 p-0"
+    }),
+    'data-taco': 'icon-button'
+  }), 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 px-4 h-12 shadow-lg z-10', props.className);
+  return React.createElement("div", {
+    className: className,
+    "data-taco": "banner",
+    ref: ref
+  }, getBannerIcon(state), children, onClose ? React.createElement(IconButton, {
+    className: "ml-auto",
+    icon: "close",
+    appearance: "discrete",
+    onClick: onClose
+  }) : null);
+});
+
+var _excluded$7 = ["appearance", "fluid"];
+var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  var appearance = props.appearance,
+      fluid = props.fluid,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+
+  var className = cn(getButtonClasses(), getAppearanceClasses(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);
+  return createButton(_extends({}, otherProps, {
+    'data-taco': 'button'
+  }), className, ref);
 });
 
 function useTimer(duration, callback) {
@@ -3433,12 +3540,12 @@ function useTimer(duration, callback) {
   };
 }
 
-var _excluded$6 = ["delay", "label"];
+var _excluded$8 = ["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);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
 
   var _React$useState = React__default.useState(!delay),
       visible = _React$useState[0],
@@ -3521,13 +3628,13 @@ var getBadgeIcon = function getBadgeIcon(type) {
   }
 };
 
-var _excluded$7 = ["content", "lastUpdated", "onClose", "options"];
+var _excluded$9 = ["content", "lastUpdated", "onClose", "options"];
 var Toast = function Toast(_ref) {
   var content = _ref.content,
       lastUpdated = _ref.lastUpdated,
       handleClose = _ref.onClose,
       options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -3590,7 +3697,7 @@ var Toast = function Toast(_ref) {
   }));
 };
 
-var _excluded$8 = ["children"];
+var _excluded$a = ["children"];
 var DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
 var ToastContext = /*#__PURE__*/React.createContext({});
 
@@ -3616,7 +3723,7 @@ var insertToastWithoutDuplicates = function insertToastWithoutDuplicates(current
 
 var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var _React$useState = React.useState([]),
       toasts = _React$useState[0],
@@ -3877,112 +3984,195 @@ var useLocalization = function useLocalization() {
   return useTaco().localization;
 };
 
-function mergeRefs(refs) {
-  return function (value) {
-    refs.forEach(function (ref) {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}
+var _excluded$b = ["onChange", "value"];
 
-var _excluded$9 = ["children"];
-var HangerContext = /*#__PURE__*/React.createContext({
-  props: {},
-  ref: null
-});
-var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$children;
+var renderDay = function renderDay(day, modifiers) {
+  return modifiers.disabled ? React.createElement("span", {
+    className: "dot"
+  }) : day.getDate();
+};
 
-  var context = React.useContext(HangerContext);
-  var children = props.children;
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
 
-  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");
-    children = React.createElement("span", null, props.children);
-  }
+for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
 
-  return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
-    children: children,
-    ref: mergeRefs([context.ref, ref]),
-    asChild: true
-  }));
-});
-var Content$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+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 className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
+  var _useLocalization = useLocalization(),
+      _useLocalization$text = _useLocalization.texts.calendar,
+      actions = _useLocalization$text.actions,
+      months = _useLocalization$text.months;
 
-  var handleInteractOutside = function handleInteractOutside(event) {
-    event.preventDefault();
+  var handleChange = function handleChange(event) {
+    var _event$target$form = event.target.form,
+        year = _event$target$form.year,
+        month = _event$target$form.month;
+    onMonthChange(new Date(year.value, month.value));
   };
 
-  return React.createElement(UnstyledContent, {
-    className: className,
-    "data-taco": "hanger",
-    onInteractOutside: handleInteractOutside,
-    placement: props.placement,
-    ref: ref
-  }, props.children, React.createElement(UnstyledArrow, {
-    className: "text-blue"
-  }), React.createElement(PopoverPrimitive.Close, {
-    asChild: true
-  }, React.createElement(IconButton, {
-    appearance: "primary",
-    "aria-label": texts.hanger.close,
-    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
-    icon: "close",
-    onClick: props.onClose
-  })));
-});
-var Hanger = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]);
-  return React.createElement(HangerContext.Provider, {
-    value: context
-  }, React.createElement(PopoverPrimitive.Root, {
-    children: children,
-    defaultOpen: true
-  }));
+  return React.createElement("div", {
+    className: "flex justify-between items-center mb-2"
+  }, React.createElement("form", {
+    className: "inline-flex space-x-1"
+  }, React.createElement("select", {
+    className: "h-8 px-2",
+    name: "month",
+    onChange: handleChange,
+    value: value.getMonth()
+  }, months.map(function (month, i) {
+    return React.createElement("option", {
+      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", {
+      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();
+    },
+    rounded: true
+  }), React.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-right",
+    "aria-label": actions.nextMonth,
+    onClick: function onClick() {
+      return onNextClick();
+    },
+    rounded: true
+  })));
 });
-Hanger.Anchor = Anchor;
-Hanger.Content = Content$1;
+var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+  var handleChange = props.onChange,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
 
-/* eslint-disable @typescript-eslint/no-empty-function */
-var DialogContext = /*#__PURE__*/React.createContext({
-  close: function close() {},
-  draggable: false,
-  drawer: undefined,
-  elements: {
-    drawer: undefined,
-    extra: undefined
-  },
-  onClose: function onClose() {},
-  props: {},
-  ref: null,
-  size: 'sm'
+  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 () {
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    }
+  }, [value]);
+
+  var handleDayClick = function handleDayClick(date, modifiers, event) {
+    if (modifiers.outside || modifiers.disabled) {
+      return;
+    }
+
+    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
+
+    today.setHours(12);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+
+  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  return React.createElement("div", {
+    "data-taco": "calendar"
+  }, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
+    className: className,
+    month: visibleMonth,
+    selectedDays: value,
+    locale: locale.substring(0, 2),
+    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
+      }));
+    },
+    onDayClick: handleDayClick,
+    onMonthChange: setVisibleMonth,
+    onTodayButtonClick: handleCalendarClickToday,
+    captionElement: function captionElement() {
+      return null;
+    },
+    todayButton: texts.calendar.actions.today,
+    showOutsideDays: true,
+    renderDay: renderDay,
+    numberOfMonths: 1,
+    ref: ref
+  })));
 });
-var useCurrentDialog = function useCurrentDialog() {
-  return React.useContext(DialogContext);
-};
 
-var Trigger$1 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, ref) {
-  var dialog = useCurrentDialog();
-  return React.createElement(DialogPrimitive.Trigger, Object.assign({}, dialog.props, props, {
-    ref: mergeRefs([dialog.ref, ref]),
-    asChild: true
-  }));
+var _excluded$c = ["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$c);
+
+  var className = cn('h-5 w-5 border rounded text-sm', {
+    'mr-2': !!label,
+    'border-grey-dark text-blue focus:border-blue focus:yt-focus': !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 focus:border-red focus:yt-focus-red': invalid && !props.disabled
+  }, props.className);
+  var handleChange;
+
+  if (onChange) {
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
+  }
+
+  var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+    "data-taco": "checkbox",
+    checked: indeterminate ? 'indeterminate' : checked,
+    className: className,
+    onCheckedChange: handleChange,
+    ref: ref
+  }), React.createElement(CheckboxPrimitive.Indicator, {
+    className: "flex h-full w-full"
+  }, React.createElement(Icon, {
+    name: indeterminate ? 'line' : 'tick',
+    className: "!h-full !w-full"
+  })));
+
+  if (label) {
+    var labelClassName = cn('flex items-center cursor-pointer', {
+      'cursor-not-allowed text-grey-dark': props.disabled
+    });
+    return React.createElement("label", {
+      className: labelClassName
+    }, element, label);
+  }
+
+  return element;
 });
 
 var useProxiedRef = function useProxiedRef(ref) {
@@ -3999,1896 +4189,1673 @@ var useProxiedRef = function useProxiedRef(ref) {
   return internalRef;
 };
 
-var useDraggable = function useDraggable(ref) {
-  var _React$useState = React__default.useState({
-    x: 0,
-    y: 0
-  }),
-      position = _React$useState[0],
-      setPosition = _React$useState[1];
+var getInputClasses = function getInputClasses(props) {
+  var _cn;
 
-  var _useMove = interactions.useMove({
-    onMove: function onMove(event) {
-      var _ref$current;
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+    'cursor-not-allowed text-black bg-grey': props.readOnly,
+    'border-grey text-opacity-25 cursor-not-allowed': props.disabled
+  }, _cn[getStateClasses$1(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
+};
+var getStateClasses$1 = function getStateClasses(value) {
+  switch (value) {
+    case 'success':
+      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
 
-      var rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(); // Prevent dragging out of bounds
+    case 'error':
+      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
 
-      // Prevent dragging out of bounds
-      if (rect && (rect.left + event.deltaX < 0 || rect.right + event.deltaX > window.innerWidth || rect.top + event.deltaY < 0 || rect.bottom + event.deltaY > window.innerHeight)) {
-        return;
-      }
+    case 'warning':
+      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
 
-      setPosition(function (_ref) {
-        var x = _ref.x,
-            y = _ref.y;
-        x += event.deltaX;
-        y += event.deltaY;
-        return {
-          x: x,
-          y: y
-        };
-      });
-    }
-  }),
-      moveProps = _useMove.moveProps;
+    case 'information':
+      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
 
-  return {
-    position: position,
-    handleProps: moveProps
-  };
+    default:
+      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+  }
 };
+var getButtonStateClasses = function getButtonStateClasses(value) {
+  switch (value) {
+    case 'success':
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
-var MenuContext = /*#__PURE__*/React.createContext(undefined);
-var useCurrentMenu = function useCurrentMenu() {
-  return React.useContext(MenuContext);
-};
+    case 'error':
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
 
-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);
+    case 'warning':
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
-  var className = cn('flex ', props.className);
-  return React.createElement(Tag, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "group",
-    ref: ref
-  }));
-});
+    case 'information':
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 
-var Title = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  return React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
-    className: "text-center",
-    ref: ref
-  }));
-});
-var Footer = /*#__PURE__*/React.forwardRef(function DialogFooter(props, ref) {
-  return React.createElement("div", Object.assign({}, props, {
-    className: "mt-8 flex justify-end",
-    ref: ref
-  }), React.createElement(Group, null, props.children));
-});
-var Close$1 = /*#__PURE__*/React.forwardRef(function DialogClose(props, ref) {
-  var dialog = useCurrentDialog();
-  return React.createElement(DialogPrimitive.Close, Object.assign({
-    onClick: dialog.onClose
-  }, props, {
-    ref: ref,
-    asChild: true
+    default:
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+  }
+};
+
+var _excluded$d = ["button", "icon", "highlighted", "state", "autoFocus"];
+var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
+  var button = props.button,
+      icon = props.icon,
+      state = props.state,
+      autoFocus = props.autoFocus,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+
+  var inputRef = useProxiedRef(ref);
+  var hasContainer = button || icon;
+  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
+    'pr-8': !!hasContainer
+  }, !hasContainer && otherProps.className);
+  React.useEffect(function () {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  var input = React.createElement("input", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "input",
+    ref: inputRef
   }));
-});
-var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
-  var dialog = useCurrentDialog();
-  var internalRef = useProxiedRef(ref);
 
-  var _useDraggable = useDraggable(internalRef),
-      position = _useDraggable.position,
-      dragHandleProps = _useDraggable.handleProps;
+  if (hasContainer) {
+    var extra;
 
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts; // if the dialog was opened by a menu, we need to close the menu when the dialog closes
-  // the menu is still open (and mounted) because it is the trigger for the dialog
+    if (button) {
+      var _button$props$disable, _cn;
+
+      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : 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(state)] = !props.disabled, _cn), button.props.className);
+      extra = React.cloneElement(button, {
+        className: buttonClassName,
+        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', {
+        'text-grey-dark': props.disabled,
+        'text-grey-darkest': !props.disabled
+      });
+      extra = typeof icon === 'string' ? React.createElement(Icon, {
+        className: iconClassName,
+        name: icon
+      }) : React.cloneElement(icon, {
+        className: cn(iconClassName, icon.props.className)
+      });
+    }
 
+    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    return React.createElement("div", {
+      className: containerClassName,
+      "data-taco": "input-container"
+    }, input, extra);
+  }
 
-  var menu = useCurrentMenu();
-  var handleCloseAutoFocus;
+  return input;
+});
 
-  if (menu) {
-    handleCloseAutoFocus = function handleCloseAutoFocus() {
-      return menu.close();
-    };
+var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
+  if (direction === void 0) {
+    direction = 'vertical';
   }
 
-  var className = cn('bg-white rounded mt-16 mx-auto', {
-    'w-128 text-center justify-center': dialog.size === 'dialog',
-    'w-xs': dialog.size === 'xs',
-    'w-sm': dialog.size === 'sm',
-    'w-md': dialog.size === 'md',
-    'w-lg': dialog.size === 'lg'
-  });
-  var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
-    'rounded-b-none': !!dialog.elements.extra
-  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  var previousKey = direction === 'horizontal' ? 'left' : 'up';
+  var nextKey = direction === 'horizontal' ? 'right' : 'down';
 
-  var handleInteractOutside = function handleInteractOutside(event) {
-    return event.preventDefault();
-  };
+  switch (keyCode) {
+    case keycode(previousKey):
+      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
 
-  var output;
+    case keycode(nextKey):
+      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
 
-  if (typeof props.children === 'function') {
-    output = props.children({
-      drawer: dialog.drawer,
-      close: dialog.close
-    });
-  } else {
-    output = props.children;
+    case keycode('home'):
+      return 0;
+
+    case keycode('end'):
+      return length - 1;
+
+    default:
+      return;
+  }
+};
+var useListKeyboardNavigation = function useListKeyboardNavigation(length, options) {
+  if (length === void 0) {
+    length = 0;
   }
 
-  return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
-    asChild: true
-  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
-    className: className,
-    onEscapeKeyDown: dialog.onClose,
-    onInteractOutside: handleInteractOutside,
-    onCloseAutoFocus: handleCloseAutoFocus,
-    ref: ref,
-    style: _extends({}, props.style, {
-      left: dialog.draggable ? "calc(50% + " + position.x + "px)" : undefined,
-      top: dialog.draggable ? "calc(50% + " + position.y + "px)" : undefined
-    })
-  }), React.createElement("div", {
-    className: containerClassName,
-    "data-taco": "dialog"
-  }, output, dialog.draggable && React.createElement("div", Object.assign({}, dragHandleProps, {
-    "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
-  })), React.createElement(DialogPrimitive.Close, {
-    asChild: true,
-    onClick: dialog.onClose
-  }, React.createElement(IconButton, {
-    appearance: "discrete",
-    "aria-label": texts.dialog.close,
-    className: "absolute top-0 right-0 mt-2 mr-2",
-    icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra))));
-});
+  if (options === void 0) {
+    options = {
+      direction: 'vertical'
+    };
+  }
 
-var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
-  var _dialog$drawer, _dialog$drawer2;
+  var _React$useState = React__default.useState(options.initialIndex),
+      index = _React$useState[0],
+      setIndex = _React$useState[1];
 
-  var dialog = useCurrentDialog();
-  return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
-    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
-    "data-taco": "dialog-drawer",
-    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
-    variants: {
-      visible: {
-        left: '100%',
-        display: 'block',
-        transition: {
-          ease: 'easeOut',
-          duration: 0.2
-        }
-      },
-      hidden: {
-        left: '0%',
-        transition: {
-          ease: 'easeOut',
-          duration: 0.2
-        },
-        transitionEnd: {
-          display: 'none'
-        }
-      }
-    },
-    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
-    ref: ref
-  }));
-});
+  var getNextIndex = function getNextIndex(event) {
+    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
 
-var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
-    "data-taco": "dialog-extra",
-    ref: ref
-  }));
-});
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+    }
 
-var _excluded$b = ["children", "draggable", "onClose", "open", "size"];
+    return nextIndex;
+  };
 
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return React.useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    React.Children.forEach(initialChildren, function (child) {
-      if (child.type.displayName === 'Drawer') {
-        drawer = child;
-      } else if (child.type.displayName === 'Extra') {
-        extra = child;
-      } else {
-        children.push(child);
-      }
-    });
-    return [children, drawer, extra];
-  }, [initialChildren]);
+  return [index, setIndex, getNextIndex];
 };
 
-var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var initialChildren = props.children,
-      _props$draggable = props.draggable,
-      draggable = _props$draggable === void 0 ? false : _props$draggable,
-      onClose = props.onClose,
-      defaultOpen = props.open,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+var scrollToChildElement = function scrollToChildElement(parent, child) {
+  var clientHeight = parent.clientHeight;
 
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
+  if (parent.scrollHeight > clientHeight) {
+    var scrollTop = parent.scrollTop;
+    var scrollBottom = clientHeight + scrollTop;
+    var childBottom = child.offsetTop + child.offsetHeight;
 
-  var _React$useState = React.useState(defaultOpen),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+    if (childBottom > scrollBottom) {
+      parent.scrollTop = childBottom - clientHeight;
+    } else if (child.offsetTop < scrollTop) {
+      parent.scrollTop = child.offsetTop;
+    }
+  }
+};
 
-  var _React$useState2 = React.useState(false),
-      drawerOpen = _React$useState2[0],
-      setDrawerOpen = _React$useState2[1];
+var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
+  var scrollTo = function scrollTo(index) {
+    if (internalRef && internalRef.current) {
+      if (index !== undefined) {
+        var activeRef = itemRefs[index];
 
-  var context = React.useMemo(function () {
-    return {
-      close: function close() {
-        return setOpen(false);
-      },
-      draggable: draggable,
-      drawer: {
-        open: drawerOpen,
-        toggle: function toggle() {
-          return setDrawerOpen(function (isDrawerOpen) {
-            return !isDrawerOpen;
-          });
+        if (activeRef && activeRef.current) {
+          scrollToChildElement(internalRef.current, activeRef.current);
         }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      size: size,
-      ref: ref
-    };
-  }, [open, drawerOpen, drawer, extra, otherProps]);
-  return React.createElement(DialogContext.Provider, {
-    value: context
-  }, React.createElement(DialogPrimitive.Root, {
-    children: children,
-    open: open,
-    onOpenChange: setOpen
-  }));
-});
-Dialog.Trigger = Trigger$1;
-Dialog.Content = Content$2;
-Dialog.Title = Title;
-Dialog.Footer = Footer;
-Dialog.Extra = Extra;
-Dialog.Drawer = Drawer;
-Dialog.Close = Close$1;
-
-var _excluded$c = ["children"];
-var PopoverContext = /*#__PURE__*/React.createContext({
-  props: {},
-  ref: null
-});
-var Trigger$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$children;
-
-  var context = React.useContext(PopoverContext);
-  var 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");
-    children = React.createElement("span", null, props.children);
-  }
-
-  return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
-    children: children,
-    ref: mergeRefs([context.ref, ref]),
-    asChild: true
-  }));
-});
-var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick;
-
-  var close = function close() {
-    onClick(new CustomEvent('hide'));
+      } else {
+        internalRef.current.scrollTop = 0;
+      }
+    }
   };
 
-  return children({
-    close: close,
-    ref: ref
-  });
-});
-var Content$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var className = cn('bg-white focus:border-blue-light', props.className);
-  var output;
-
-  if (typeof props.children === 'function') {
-    output = React.createElement(PopoverPrimitive.Close, {
-      asChild: true
-    }, React.createElement(RenderPropWrapper, null, props.children));
-  } else {
-    output = props.children;
-  }
+  return {
+    scrollTo: scrollTo
+  };
+};
 
-  return React.createElement(UnstyledContent, {
-    className: className,
-    placement: props.placement,
-    ref: ref
-  }, output, React.createElement(UnstyledArrow, {
-    className: "text-white"
-  }));
-});
-var Close$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
-    ref: ref,
-    asChild: true
-  }));
-});
-var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+var _excluded$e = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+    _excluded2$1 = ["children", "icon"];
+var getId = function getId(id, value) {
+  return id + "_" + value;
+};
 
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]);
-  return React.createElement(PopoverContext.Provider, {
-    value: context
-  }, React.createElement(PopoverPrimitive.Root, {
-    children: children
-  }));
-});
-Popover.Trigger = Trigger$2;
-Popover.Content = Content$3;
-Popover.Close = Close$2;
+var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
+  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
 
-var _excluded$d = ["dialog", "hanger", "popover", "tooltip"];
-var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
-};
-var getAppearanceClasses = function getAppearanceClasses(value, icon) {
-  if (icon === void 0) {
-    icon = false;
+  if (nextIndex) {
+    if (nextIndex === index) {
+      return index;
+    } else if (data[nextIndex] && data[nextIndex].disabled) {
+      return getNextEnabledItem(event, data, nextIndex);
+    }
   }
 
-  switch (value) {
-    case 'primary':
-      return "yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid";
-
-    case 'danger':
-      return "yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid";
+  return nextIndex;
+};
 
-    case 'ghost':
-      return "yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted";
+var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props, ref) {
+  var data = props.data,
+      disabled = props.disabled,
+      id = props.id,
+      loading = props.loading,
+      setCurrentIndex = props.onChange,
+      onClick = props.onClick,
+      onFocus = props.onFocus,
+      onKeyDown = props.onKeyDown,
+      readOnly = props.readOnly,
+      _props$scrollOnFocus = props.scrollOnFocus,
+      scrollOnFocus = _props$scrollOnFocus === void 0 ? false : _props$scrollOnFocus,
+      currentIndex = props.value,
+      multiselect = props.multiselect,
+      _props$selectedIndexe = props.selectedIndexes,
+      selectedIndexes = _props$selectedIndexe === void 0 ? [] : _props$selectedIndexe,
+      _props$allOptionsSele = props.allOptionsSelected,
+      allOptionsSelected = _props$allOptionsSele === void 0 ? false : _props$allOptionsSele,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
-    case 'discrete':
-      {
-        if (icon) {
-          return "bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent";
-        }
+  var listRef = useProxiedRef(ref);
+  var itemRefs = React.useMemo(function () {
+    return data.map(function () {
+      return React.createRef();
+    });
+  }, [data]);
 
-        return "yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent";
-      }
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
 
-    default:
-      return "yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid";
-  }
-};
-var createButton = function createButton(props, className, ref) {
-  var dialog = props.dialog,
-      hanger = props.hanger,
-      popover = props.popover,
-      tooltip = props.tooltip,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+  var _useListScrollTo = useListScrollTo(listRef, itemRefs),
+      scrollTo = _useListScrollTo.scrollTo;
 
-  var button = React__default.createElement(Button, Object.assign({}, otherProps, {
-    className: className,
-    ref: ref
-  }));
+  React.useEffect(function () {
+    scrollTo(currentIndex);
+  }, [currentIndex]);
 
-  if (hanger) {
-    button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
-  }
+  var handleKeyDown = function handleKeyDown(event) {
+    var nextIndex = getNextEnabledItem(event, data, currentIndex);
 
-  if (dialog) {
-    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
-  }
+    if (nextIndex !== undefined && nextIndex !== currentIndex) {
+      event.preventDefault();
+      scrollTo(nextIndex);
+      setCurrentIndex(nextIndex);
+    }
 
-  if (popover) {
-    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
-  }
+    if (onKeyDown) {
+      event.persist();
+      var index = nextIndex !== undefined ? nextIndex : currentIndex;
+      onKeyDown(event, index);
+    }
+  };
 
-  if (tooltip) {
-    button = React__default.createElement(Tooltip, {
-      title: tooltip
-    }, button);
-  }
+  var handleClick = function handleClick(index) {
+    return function (event) {
+      setCurrentIndex(index);
 
-  return button;
-};
+      if (onClick) {
+        event.persist();
+        onClick(event, index);
+      }
+    };
+  };
 
-var _excluded$e = ["appearance", "icon", "rounded"];
-var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
-  var appearance = props.appearance,
-      icon = props.icon,
-      _props$rounded = props.rounded,
-      rounded = _props$rounded === void 0 ? false : _props$rounded,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+  var handleFocus = function handleFocus(event) {
+    if (scrollOnFocus) {
+      scrollTo(currentIndex);
+    }
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
-    'rounded-full': rounded,
-    rounded: !rounded,
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled
-  }, props.className);
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
 
-  if (!icon) {
-    return null;
-  }
+  var getOptionCheckedState = function getOptionCheckedState(optionValue, index) {
+    if (optionValue === '#ALL-OPTIONS#') {
+      return allOptionsSelected;
+    } else if (!optionValue || !selectedIndexes) {
+      return false;
+    } else {
+      return selectedIndexes.findIndex(function (i) {
+        return i === index;
+      }) !== -1;
+    }
+  };
 
-  return createButton(_extends({}, otherProps, {
-    children: React.createElement(Icon, {
-      name: icon,
-      className: "m-0 p-0"
-    }),
-    'data-taco': 'icon-button'
-  }), 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 px-4 h-12 shadow-lg z-10', props.className);
-  return React.createElement("div", {
-    className: className,
-    "data-taco": "banner",
-    ref: ref
-  }, getBannerIcon(state), children, onClose ? React.createElement(IconButton, {
-    className: "ml-auto",
-    icon: "close",
-    appearance: "discrete",
-    onClick: onClose
-  }) : null);
-});
-
-var _excluded$f = ["appearance", "fluid"];
-var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  var appearance = props.appearance,
-      fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
-
-  var className = cn(getButtonClasses(), getAppearanceClasses(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);
-  return createButton(_extends({}, otherProps, {
-    'data-taco': 'button'
-  }), className, ref);
-});
-
-var _excluded$g = ["onChange", "value"];
-
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
-
-var thisYear = /*#__PURE__*/new Date().getFullYear();
-var years = [];
-
-for (var 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;
-
-  var handleChange = function handleChange(event) {
-    var _event$target$form = event.target.form,
-        year = _event$target$form.year,
-        month = _event$target$form.month;
-    onMonthChange(new Date(year.value, month.value));
-  };
-
-  return React.createElement("div", {
-    className: "flex justify-between items-center mb-2"
-  }, React.createElement("form", {
-    className: "inline-flex space-x-1"
-  }, React.createElement("select", {
-    className: "h-8 px-2",
-    name: "month",
-    onChange: handleChange,
-    value: value.getMonth()
-  }, months.map(function (month, i) {
-    return React.createElement("option", {
-      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", {
-      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();
-    },
-    rounded: true
-  }), React.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "chevron-right",
-    "aria-label": actions.nextMonth,
-    onClick: function onClick() {
-      return onNextClick();
-    },
-    rounded: true
-  })));
-});
-var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  var handleChange = props.onChange,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
-
-  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 () {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
-    }
-  }, [value]);
-
-  var handleDayClick = function handleDayClick(date, modifiers, event) {
-    if (modifiers.outside || modifiers.disabled) {
-      return;
-    }
-
-    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
+  var list = _extends({}, otherProps, {
+    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
+    }, otherProps.className),
+    disabled: disabled,
+    id: id,
+    onFocus: !disabled && !readOnly ? handleFocus : undefined,
+    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
+    readOnly: readOnly,
+    ref: listRef,
+    role: 'listbox',
+    tabIndex: otherProps.tabIndex || 0
+  });
 
-    today.setHours(12);
-    today.setMinutes(0);
-    today.setSeconds(0);
-    handleChange(today);
-  };
+  var options = data.map(function (option, index) {
+    var depth = option.path ? option.path.split('.').length - 1 : 0;
+    return {
+      'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
+      'data-focused': currentIndex === index,
+      children: option.text,
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
+        'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
+      }),
+      disabled: option.disabled,
+      icon: option.icon,
+      id: getId(id, option.value),
+      key: getId(id, option.value),
+      onClick: !disabled && !readOnly ? handleClick(index) : undefined,
+      ref: itemRefs[index],
+      role: 'option',
+      style: depth > 0 ? {
+        paddingLeft: depth + 1 + "rem"
+      } : undefined
+    };
+  });
+  return React.createElement("ul", Object.assign({}, list, {
+    "data-taco": "scrollable-list"
+  }), loading ? React.createElement("li", {
+    className: "yt-list__empty"
+  }, React.createElement("span", null, React.createElement(Spinner$1, {
+    delay: 0
+  })), React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(function (_ref) {
+    var children = _ref.children,
+        icon = _ref.icon,
+        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2$1);
 
-  var className = cn('flex bg-white text-xs p-4', otherProps.className);
-  return React.createElement("div", {
-    "data-taco": "calendar"
-  }, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
-    className: className,
-    month: visibleMonth,
-    selectedDays: value,
-    locale: locale.substring(0, 2),
-    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
-      }));
-    },
-    onDayClick: handleDayClick,
-    onMonthChange: setVisibleMonth,
-    onTodayButtonClick: handleCalendarClickToday,
-    captionElement: function captionElement() {
-      return null;
-    },
-    todayButton: texts.calendar.actions.today,
-    showOutsideDays: true,
-    renderDay: renderDay,
-    numberOfMonths: 1,
-    ref: ref
-  })));
+    return React.createElement("li", Object.assign({}, optionProps), icon, React.createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, children), multiselect && React.createElement(Checkbox, {
+      checked: optionProps['aria-selected'],
+      onChange: function onChange() {
+        return null;
+      },
+      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
+    }));
+  }) : React.createElement("li", {
+    className: "yt-list__empty"
+  }, React.createElement("span", null, texts.listbox.empty)));
 });
 
-var _excluded$h = ["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$h);
-
-  var className = cn('h-5 w-5 border rounded text-sm', {
-    'mr-2': !!label,
-    'border-grey-dark text-blue focus:border-blue focus:yt-focus': !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 focus:border-red focus:yt-focus-red': invalid && !props.disabled
-  }, props.className);
-  var handleChange;
-
-  if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
-    };
-  }
-
-  var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
-    "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    ref: ref
-  }), React.createElement(CheckboxPrimitive.Indicator, {
-    className: "flex h-full w-full"
-  }, React.createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
-    className: "!h-full !w-full"
-  })));
+// returns a custom event compatible with all browsers
+var createCustomEvent = function createCustomEvent(eventType) {
+  var customEvent;
 
-  if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
-      'cursor-not-allowed text-grey-dark': props.disabled
+  if (typeof Event === 'function') {
+    customEvent = new Event(eventType, {
+      bubbles: true
     });
-    return React.createElement("label", {
-      className: labelClassName
-    }, element, label);
+  } else {
+    customEvent = document.createEvent('Event');
+    customEvent.initEvent(eventType, true, true);
   }
 
-  return element;
-});
+  return customEvent;
+}; // returns a custom keyboard event compatible with all browsers
 
-var getInputClasses = function getInputClasses(props) {
-  var _cn;
+var createCustomKeyboardEvent = function createCustomKeyboardEvent(event) {
+  var customKeyboardEvent;
 
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
-    'cursor-not-allowed text-black bg-grey': props.readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': props.disabled
-  }, _cn[getStateClasses$1(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
-};
-var getStateClasses$1 = function getStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
+  if (typeof KeyboardEvent === 'function') {
+    customKeyboardEvent = new KeyboardEvent(event.type, event);
+  } else {
+    customKeyboardEvent = document.createEvent('Event');
+    customKeyboardEvent.initEvent(event.type, true, true);
+    customKeyboardEvent.keyCode = event.keyCode;
+    customKeyboardEvent.charCode = event.charCode;
+  }
+
+  return customKeyboardEvent;
+};
+var setInputValueByRef = function setInputValueByRef(input, value, event) {
+  if (event === void 0) {
+    event = 'change';
+  }
 
-    case 'error':
-      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
+  if (!input) {
+    return;
+  }
 
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
+  var previousValue = input.value;
+  input.value = value || '';
+  var tracker = input._valueTracker;
 
-    case 'information':
-      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+  if (tracker) {
+    tracker.setValue(previousValue);
+  } // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
 
-    default:
-      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
-  }
+
+  input.dispatchEvent(createCustomEvent(event));
 };
-var getButtonStateClasses = function getButtonStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
-    case 'error':
-      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
+var _excluded$f = ["hasChildren", "path"];
+var setInputValueByRef$1 = function setInputValueByRef$1(input, value, event) {
+  if (event === void 0) {
+    event = 'change';
+  }
 
-    case 'warning':
-      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
+  setInputValueByRef(input, value !== undefined && value !== null ? String(value) : '', event);
+};
 
-    case 'information':
-      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+var getValue = function getValue(value) {
+  return value === undefined || value === null ? '' : String(value);
+};
 
-    default:
-      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-  }
+var getIndexFromValue = function getIndexFromValue(data, value) {
+  var index = data.findIndex(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
+  return index > -1 ? index : undefined;
+};
+var getSelectedIndexesFromValue = function getSelectedIndexesFromValue(data, value) {
+  if (typeof value !== 'string') return [];
+  return value.split(',').map(function (v) {
+    return data.findIndex(function (o) {
+      return String(o.value) === v;
+    });
+  }).filter(function (v) {
+    return v !== -1;
+  });
+};
+var findByValue = function findByValue(data, value) {
+  return data.find(function (option) {
+    return getValue(option.value) === getValue(value);
+  });
 };
+var searchForString = function searchForString(child, value, strategy) {
+  if (strategy === void 0) {
+    strategy = 'includes';
+  }
 
-var _excluded$i = ["button", "defaultValue", "icon", "highlighted", "state", "autoFocus"];
-var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
-  var button = props.button,
-      icon = props.icon,
-      state = props.state,
-      autoFocus = props.autoFocus,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
+  try {
+    var _child$props;
 
-  var inputRef = useProxiedRef(ref);
-  var hasContainer = button || icon;
-  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
-    'pr-8': !!hasContainer
-  }, !hasContainer && otherProps.className);
-  React.useEffect(function () {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-  var input = React.createElement("input", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "input",
-    ref: inputRef
-  }));
+    if (typeof child !== 'string' && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+      var _child$props2, _child$props3;
 
-  if (hasContainer) {
-    var extra;
+      if (Array.isArray((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.children)) {
+        return !!child.props.children.find(function (subChild) {
+          return searchForString(subChild, value, strategy);
+        });
+      }
 
-    if (button) {
-      var _button$props$disable, _cn;
+      return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
+    } else {
+      var _String;
 
-      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : 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(state)] = !props.disabled, _cn), button.props.className);
-      extra = React.cloneElement(button, {
-        className: buttonClassName,
-        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', {
-        'text-grey-dark': props.disabled,
-        'text-grey-darkest': !props.disabled
-      });
-      extra = typeof icon === 'string' ? React.createElement(Icon, {
-        className: iconClassName,
-        name: icon
-      }) : React.cloneElement(icon, {
-        className: cn(iconClassName, icon.props.className)
-      });
+      return child.toString().toLowerCase()[strategy]((_String = String(value)) === null || _String === void 0 ? void 0 : _String.toLowerCase());
     }
+  } catch (_unused) {
+    return false;
+  }
+};
 
-    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return React.createElement("div", {
-      className: containerClassName,
-      "data-taco": "input-container"
-    }, input, extra);
+var getIndexInRangeByValue = function getIndexInRangeByValue(data, query, firstIndex, lastIndex) {
+  if (lastIndex === void 0) {
+    lastIndex = data.length;
   }
 
-  return input;
-});
+  var index = data.slice(firstIndex, lastIndex).findIndex(function (option) {
+    if (option.disabled) {
+      return false;
+    }
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
-  if (direction === void 0) {
-    direction = 'vertical';
-  }
+    return searchForString(option.text, query, 'startsWith');
+  });
+  return index > -1 ? index + firstIndex : -1;
+};
 
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
+var findNextIndexByValue = function findNextIndexByValue(data, query, activeIndex) {
+  var firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;
+  var index = getIndexInRangeByValue(data, query, firstIndex);
 
-  switch (keyCode) {
-    case keycode(previousKey):
-      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
+  if (index === -1) {
+    index = getIndexInRangeByValue(data, query, 0, activeIndex);
+  }
 
-    case keycode(nextKey):
-      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
+  return index;
+};
+var getActiveDescendant = function getActiveDescendant(data, currentIndex, id) {
+  return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;
+};
+var useFlattenedData = function useFlattenedData(data) {
+  return React__default.useMemo(function () {
+    var items = [];
 
-    case keycode('home'):
-      return 0;
+    var flatten = function flatten(item, path, parentPath, parentDisabled) {
+      var currentPath = parentPath ? parentPath + "." + path : "" + path;
+      var isItemDisabled = parentDisabled || item.disabled;
+      items.push(_extends({}, item, {
+        disabled: isItemDisabled,
+        path: currentPath,
+        hasChildren: !!item.children
+      }));
 
-    case keycode('end'):
-      return length - 1;
+      if (item.children) {
+        item.children.forEach(function (childItem, childPath) {
+          return flatten(childItem, childPath, currentPath, isItemDisabled);
+        });
+      }
+    };
 
-    default:
-      return;
-  }
+    data.forEach(function (item, index) {
+      flatten(item, index);
+    });
+    return items;
+  }, [data]);
 };
-var useListKeyboardNavigation = function useListKeyboardNavigation(length, options) {
-  if (length === void 0) {
-    length = 0;
-  }
+var sanitizeItem = function sanitizeItem(item) {
+  if (item) {
+    var rest = _objectWithoutPropertiesLoose(item, _excluded$f);
 
-  if (options === void 0) {
-    options = {
-      direction: 'vertical'
-    };
+    return rest;
   }
 
-  var _React$useState = React__default.useState(options.initialIndex),
-      index = _React$useState[0],
-      setIndex = _React$useState[1];
+  return undefined;
+};
+var getOptionParents = function getOptionParents(data, path) {
+  var _path$split;
 
-  var getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+  var indexes = (_path$split = path === null || path === void 0 ? void 0 : path.split('.')) !== null && _path$split !== void 0 ? _path$split : [];
 
-    if (nextIndex !== undefined) {
-      event.preventDefault();
-    }
+  if (indexes.length > 1) {
+    // we don't want to map the current item
+    indexes.pop(); // we need to rebuild the path as we map
 
-    return nextIndex;
-  };
+    var lastPath;
+    return indexes.map(function (i) {
+      lastPath = lastPath ? [lastPath, i].join('.') : i;
+      return sanitizeItem(data.find(function (i) {
+        return i.path === lastPath;
+      }));
+    });
+  }
 
-  return [index, setIndex, getNextIndex];
+  return null;
 };
+var filterData = function filterData(data, value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-var scrollToChildElement = function scrollToChildElement(parent, child) {
-  var clientHeight = parent.clientHeight;
-
-  if (parent.scrollHeight > clientHeight) {
-    var scrollTop = parent.scrollTop;
-    var scrollBottom = clientHeight + scrollTop;
-    var childBottom = child.offsetTop + child.offsetHeight;
-
-    if (childBottom > scrollBottom) {
-      parent.scrollTop = childBottom - clientHeight;
-    } else if (child.offsetTop < scrollTop) {
-      parent.scrollTop = child.offsetTop;
-    }
+  if (value === '' || value === null) {
+    return data;
   }
-};
 
-var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
-  var scrollTo = function scrollTo(index) {
-    if (internalRef && internalRef.current) {
-      if (index !== undefined) {
-        var activeRef = itemRefs[index];
+  var filteredOptionValues = new Set();
 
-        if (activeRef && activeRef.current) {
-          scrollToChildElement(internalRef.current, activeRef.current);
-        }
-      } else {
-        internalRef.current.scrollTop = 0;
-      }
+  var shouldFilterOption = function shouldFilterOption(option) {
+    if (option.disabled) {
+      return false;
     }
-  };
 
-  return {
-    scrollTo: scrollTo
+    return searchForString(option.text, String(value));
   };
-};
-
-var _excluded$j = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
-    _excluded2$1 = ["children", "icon"];
-var getId = function getId(id, value) {
-  return id + "_" + value;
-};
 
-var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
-  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+  data.forEach(function (option) {
+    if (shouldFilterOption(option)) {
+      var parents = getOptionParents(data, option.path);
+      filteredOptionValues.add(option.value);
 
-  if (nextIndex) {
-    if (nextIndex === index) {
-      return index;
-    } else if (data[nextIndex] && data[nextIndex].disabled) {
-      return getNextEnabledItem(event, data, nextIndex);
+      if (parents !== null) {
+        parents.forEach(function (option) {
+          return filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.value);
+        });
+      }
     }
-  }
-
-  return nextIndex;
+  });
+  return data.filter(function (_ref) {
+    var value = _ref.value;
+    return filteredOptionValues.has(value);
+  });
 };
 
-var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props, ref) {
-  var data = props.data,
-      disabled = props.disabled,
-      id = props.id,
-      loading = props.loading,
-      setCurrentIndex = props.onChange,
-      onClick = props.onClick,
-      onFocus = props.onFocus,
-      onKeyDown = props.onKeyDown,
-      readOnly = props.readOnly,
-      _props$scrollOnFocus = props.scrollOnFocus,
-      scrollOnFocus = _props$scrollOnFocus === void 0 ? false : _props$scrollOnFocus,
-      currentIndex = props.value,
-      multiselect = props.multiselect,
-      _props$selectedIndexe = props.selectedIndexes,
-      selectedIndexes = _props$selectedIndexe === void 0 ? [] : _props$selectedIndexe,
-      _props$allOptionsSele = props.allOptionsSelected,
-      allOptionsSelected = _props$allOptionsSele === void 0 ? false : _props$allOptionsSele,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$j);
+var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var debouncer = /*#__PURE__*/debounce(function (f) {
+  return f();
+}, 200);
 
-  var listRef = useProxiedRef(ref);
-  var itemRefs = React.useMemo(function () {
-    return data.map(function () {
-      return React.createRef();
-    });
-  }, [data]);
+var convertToInputValue = function convertToInputValue(value) {
+  return String(value !== null && value !== void 0 ? value : '');
+};
 
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+var useCombobox = function useCombobox(_ref, ref) {
+  var ariaLabelledBy = _ref['aria-labelledby'],
+      _ref$data = _ref.data,
+      unfilteredData = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      onChange = _ref.onChange,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      onSearch = _ref.onSearch,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
-  var _useListScrollTo = useListScrollTo(listRef, itemRefs),
-      scrollTo = _useListScrollTo.scrollTo;
+  var inputRef = useProxiedRef(ref);
+  var listRef = React.useRef(null);
 
-  React.useEffect(function () {
-    scrollTo(currentIndex);
-  }, [currentIndex]);
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var nextIndex = getNextEnabledItem(event, data, currentIndex);
+  var listId = React.useMemo(function () {
+    return uuid.v4();
+  }, []);
 
-    if (nextIndex !== undefined && nextIndex !== currentIndex) {
-      event.preventDefault();
-      scrollTo(nextIndex);
-      setCurrentIndex(nextIndex);
-    }
+  var _React$useState2 = React.useState(convertToInputValue(value)),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
 
-    if (onKeyDown) {
-      event.persist();
-      var index = nextIndex !== undefined ? nextIndex : currentIndex;
-      onKeyDown(event, index);
-    }
-  };
+  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
+  var flattenedData = useFlattenedData(unfilteredData);
+  var data = React.useMemo(function () {
+    return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
+  }, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
 
-  var handleClick = function handleClick(index) {
-    return function (event) {
-      setCurrentIndex(index);
+  var _React$useState3 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
+      currentIndex = _React$useState3[0],
+      setCurrentIndex = _React$useState3[1];
 
-      if (onClick) {
-        event.persist();
-        onClick(event, index);
+  var setInputValueByIndex = function setInputValueByIndex(index) {
+    if (index !== undefined) {
+      var option = data[index];
+
+      if (option && !option.disabled) {
+        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
       }
-    };
+    }
   };
 
-  var handleFocus = function handleFocus(event) {
-    if (scrollOnFocus) {
-      scrollTo(currentIndex);
+  var setCurrentValue = function setCurrentValue(index) {
+    if (index === undefined) {
+      return;
     }
 
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
-  };
+    var option = data[index]; // if the selected option is not already selected, trigger blur event
 
-  var getOptionCheckedState = function getOptionCheckedState(optionValue, index) {
-    if (optionValue === '#ALL-OPTIONS#') {
-      return allOptionsSelected;
-    } else if (!optionValue || !selectedIndexes) {
-      return false;
+    if (option.value !== value) {
+      setInputValueByIndex(index);
     } else {
-      return selectedIndexes.findIndex(function (i) {
-        return i === index;
-      }) !== -1;
+      // if the selected option is already selected, refill input with its value
+      setInputValue(convertToInputValue(value));
     }
-  };
+  }; // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set
 
-  var list = _extends({}, otherProps, {
-    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect,
-      'pointer-events-none': disabled,
-      'cursor-not-allowed': disabled || readOnly
-    }, otherProps.className),
-    disabled: disabled,
-    id: id,
-    onFocus: !disabled && !readOnly ? handleFocus : undefined,
-    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly: readOnly,
-    ref: listRef,
-    role: 'listbox',
-    tabIndex: otherProps.tabIndex || 0
-  });
 
-  var options = data.map(function (option, index) {
-    var depth = option.path ? option.path.split('.').length - 1 : 0;
-    return {
-      'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
-      'data-focused': currentIndex === index,
-      children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
-        'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
-      }),
-      disabled: option.disabled,
-      icon: option.icon,
-      id: getId(id, option.value),
-      key: getId(id, option.value),
-      onClick: !disabled && !readOnly ? handleClick(index) : undefined,
-      ref: itemRefs[index],
-      role: 'option',
-      style: depth > 0 ? {
-        paddingLeft: depth + 1 + "rem"
-      } : undefined
-    };
-  });
-  return React.createElement("ul", Object.assign({}, list, {
-    "data-taco": "scrollable-list"
-  }), loading ? React.createElement("li", {
-    className: "yt-list__empty"
-  }, React.createElement("span", null, React.createElement(Spinner$1, {
-    delay: 0
-  })), React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(function (_ref) {
-    var children = _ref.children,
-        icon = _ref.icon,
-        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2$1);
+  React.useEffect(function () {
+    if (defaultValue && !value) {
+      setInputValueByIndex(getIndexFromValue(data, defaultValue));
+    }
+  }, [data]); // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
 
-    return React.createElement("li", Object.assign({}, optionProps), icon, React.createElement("span", {
-      className: "flex-grow truncate text-left"
-    }, children), multiselect && React.createElement(Checkbox, {
-      checked: optionProps['aria-selected'],
-      onChange: function onChange() {
-        return null;
-      },
-      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
-    }));
-  }) : React.createElement("li", {
-    className: "yt-list__empty"
-  }, React.createElement("span", null, texts.listbox.empty)));
-});
+  React.useEffect(function () {
+    if (value !== undefined && value !== inputValue) {
+      setInputValue(convertToInputValue(value));
+    }
+  }, [value]);
+  React.useEffect(function () {
+    if (onSearch) {
+      debouncer(function () {
+        onSearch(inputValue);
+      });
+    }
+  }, [inputValue]); // show listbox based on input value
 
-// returns a custom event compatible with all browsers
-var createCustomEvent = function createCustomEvent(eventType) {
-  var customEvent;
+  React.useEffect(function () {
+    // don't show the popover if the internal (input) value already is the current value
+    // this prevents the popover showing after selecting a value or pressing escape
+    var isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
 
-  if (typeof Event === 'function') {
-    customEvent = new Event(eventType, {
-      bubbles: true
-    });
-  } else {
-    customEvent = document.createEvent('Event');
-    customEvent.initEvent(eventType, true, true);
-  }
+    if (inputValue && data.length && !isCurrentValue) {
+      setCurrentIndex(0);
 
-  return customEvent;
-}; // returns a custom keyboard event compatible with all browsers
+      if (!open) {
+        setOpen(true);
+      }
+    } else {
+      setOpen(false);
+    }
+  }, [inputValue, data]);
+  React.useEffect(function () {
+    if (open) {
+      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
+    } else {
+      setCurrentIndex(undefined);
+    }
+  }, [open]); // event handlers
 
-var createCustomKeyboardEvent = function createCustomKeyboardEvent(event) {
-  var customKeyboardEvent;
+  var handleInputBlur = function handleInputBlur(event) {
+    event.persist();
 
-  if (typeof KeyboardEvent === 'function') {
-    customKeyboardEvent = new KeyboardEvent(event.type, event);
-  } else {
-    customKeyboardEvent = document.createEvent('Event');
-    customKeyboardEvent.initEvent(event.type, true, true);
-    customKeyboardEvent.keyCode = event.keyCode;
-    customKeyboardEvent.charCode = event.charCode;
-  }
+    if (event.relatedTarget === listRef.current) {
+      event.preventDefault();
+      return;
+    }
 
-  return customKeyboardEvent;
-};
-var setInputValueByRef = function setInputValueByRef(input, value, event) {
-  if (event === void 0) {
-    event = 'change';
-  }
+    if (onChange && event.target.value !== value) {
+      var item = findByValue(flattenedData, event.target.value);
+      event.detail = sanitizeItem(item);
+      var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
 
-  if (!input) {
-    return;
-  }
+      if (parents !== null && parents.length > 0) {
+        event.detail.parents = parents;
+      }
 
-  var previousValue = input.value;
-  input.value = value || '';
-  var tracker = input._valueTracker;
+      onChange(event);
+    }
 
-  if (tracker) {
-    tracker.setValue(previousValue);
-  } // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
 
+  var handleInputChange = function handleInputChange(event) {
+    setInputValue(event.target.value);
+  };
 
-  input.dispatchEvent(createCustomEvent(event));
-};
+  var handleInputClick = function handleInputClick(event) {
+    if (inline || !open && inputValue && data.length) {
+      setOpen(true);
+    }
 
-var _excluded$k = ["hasChildren", "path"];
-var setInputValueByRef$1 = function setInputValueByRef$1(input, value, event) {
-  if (event === void 0) {
-    event = 'change';
-  }
+    if (onClick) {
+      event.persist();
+      onClick(event);
+    }
+  };
 
-  setInputValueByRef(input, value !== undefined && value !== null ? String(value) : '', event);
-};
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    event.persist();
 
-var getValue = function getValue(value) {
-  return value === undefined || value === null ? '' : String(value);
-};
+    switch (event.keyCode) {
+      case keycode('backspace'):
+        {
+          return;
+        }
 
-var getIndexFromValue = function getIndexFromValue(data, value) {
-  var index = data.findIndex(function (option) {
-    return getValue(option.value) === getValue(value);
-  });
-  return index > -1 ? index : undefined;
-};
-var getSelectedIndexesFromValue = function getSelectedIndexesFromValue(data, value) {
-  if (typeof value !== 'string') return [];
-  return value.split(',').map(function (v) {
-    return data.findIndex(function (o) {
-      return String(o.value) === v;
-    });
-  }).filter(function (v) {
-    return v !== -1;
-  });
-};
-var findByValue = function findByValue(data, value) {
-  return data.find(function (option) {
-    return getValue(option.value) === getValue(value);
-  });
-};
-var searchForString = function searchForString(child, value, strategy) {
-  if (strategy === void 0) {
-    strategy = 'includes';
-  }
+      case keycode('escape'):
+        {
+          event.preventDefault();
+          setInputValue(convertToInputValue(value));
+          setOpen(false);
+          return;
+        }
 
-  try {
-    var _child$props;
+      case keycode('tab'):
+      case keycode('enter'):
+        {
+          if (event.keyCode !== keycode('tab')) {
+            event.preventDefault();
+          }
 
-    if (typeof child !== 'string' && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
-      var _child$props2, _child$props3;
+          setCurrentValue(currentIndex);
+          setOpen(false);
+          return;
+        }
 
-      if (Array.isArray((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.children)) {
-        return !!child.props.children.find(function (subChild) {
-          return searchForString(subChild, value, strategy);
-        });
-      }
+      case keycode('up'):
+      case keycode('down'):
+      case keycode('home'):
+      case keycode('end'):
+        {
+          if (open) {
+            event.preventDefault();
+          }
 
-      return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
-    } else {
-      var _String;
+          break;
+        }
+    } // we aren't focused on the list, so manually forward the keydown event to it
 
-      return child.toString().toLowerCase()[strategy]((_String = String(value)) === null || _String === void 0 ? void 0 : _String.toLowerCase());
+
+    if (listRef.current) {
+      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
     }
-  } catch (_unused) {
-    return false;
-  }
-};
 
-var getIndexInRangeByValue = function getIndexInRangeByValue(data, query, firstIndex, lastIndex) {
-  if (lastIndex === void 0) {
-    lastIndex = data.length;
-  }
+    if (inline && !open) {
+      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+        event.preventDefault();
+        var initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
+        setOpen(true);
+      }
+    }
 
-  var index = data.slice(firstIndex, lastIndex).findIndex(function (option) {
-    if (option.disabled) {
-      return false;
+    if (!event.isDefaultPrevented() && onKeyDown) {
+      event.persist();
+      onKeyDown(event);
     }
+  };
 
-    return searchForString(option.text, query, 'startsWith');
-  });
-  return index > -1 ? index + firstIndex : -1;
-};
+  var handleListboxChange = function handleListboxChange(index) {
+    setCurrentIndex(index);
+  };
 
-var findNextIndexByValue = function findNextIndexByValue(data, query, activeIndex) {
-  var firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;
-  var index = getIndexInRangeByValue(data, query, firstIndex);
+  var handleListboxClick = function handleListboxClick(event, index) {
+    event.preventDefault();
+    setCurrentValue(index);
+    setOpen(false);
+  };
 
-  if (index === -1) {
-    index = getIndexInRangeByValue(data, query, 0, activeIndex);
-  }
+  var combobox = {
+    'aria-expanded': open,
+    'aria-owns': listId,
+    'aria-haspopup': 'listbox',
+    role: 'combobox'
+  };
 
-  return index;
+  var input = _extends({}, props, {
+    'aria-controls': listId,
+    // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions
+    // are related to the string that is present in the textbox
+    'aria-autocomplete': 'list',
+    // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element
+    'aria-activedescendant': currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,
+    'aria-labelledby': ariaLabelledBy,
+    disabled: disabled,
+    onBlur: !disabled && !readOnly ? handleInputBlur : undefined,
+    onChange: !disabled && !readOnly ? handleInputChange : undefined,
+    onClick: !disabled && !readOnly ? handleInputClick : undefined,
+    onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,
+    readOnly: readOnly,
+    ref: inputRef,
+    type: 'text',
+    value: inputValue || ''
+  });
+
+  var list = {
+    'aria-labelledby': ariaLabelledBy,
+    data: data,
+    disabled: disabled,
+    id: listId,
+    onChange: handleListboxChange,
+    onClick: handleListboxClick,
+    ref: listRef,
+    scrollOnFocus: false,
+    tabIndex: -1,
+    value: currentIndex
+  };
+  return {
+    combobox: combobox,
+    input: input,
+    list: list,
+    popover: {
+      open: open,
+      onOpenChange: setOpen
+    }
+  };
 };
-var getActiveDescendant = function getActiveDescendant(data, currentIndex, id) {
-  return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;
+
+var getVisibility = function getVisibility(element) {
+  return Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
 };
-var useFlattenedData = function useFlattenedData(data) {
-  return React__default.useMemo(function () {
-    var items = [];
 
-    var flatten = function flatten(item, path, parentPath, parentDisabled) {
-      var currentPath = parentPath ? parentPath + "." + path : "" + path;
-      var isItemDisabled = parentDisabled || item.disabled;
-      items.push(_extends({}, item, {
-        disabled: isItemDisabled,
-        path: currentPath,
-        hasChildren: !!item.children
-      }));
+var useBoundingClientRectListener = function useBoundingClientRectListener(ref) {
+  var _React$useState = React.useState(undefined),
+      dimensions = _React$useState[0],
+      setDimensions = _React$useState[1];
 
-      if (item.children) {
-        item.children.forEach(function (childItem, childPath) {
-          return flatten(childItem, childPath, currentPath, isItemDisabled);
-        });
-      }
-    };
+  var isRefElementVisible = getVisibility(ref.current);
 
-    data.forEach(function (item, index) {
-      flatten(item, index);
-    });
-    return items;
-  }, [data]);
-};
-var sanitizeItem = function sanitizeItem(item) {
-  if (item) {
-    var rest = _objectWithoutPropertiesLoose(item, _excluded$k);
+  var _React$useState2 = React.useState(isRefElementVisible),
+      visibility = _React$useState2[0],
+      setVisibility = _React$useState2[1];
 
-    return rest;
-  }
+  var resize = function resize() {
+    if (visibility) {
+      var _ref$current;
 
-  return undefined;
+      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
+    }
+  };
+
+  React.useEffect(function () {
+    var timeout = setTimeout(resize, 0);
+    var debouncedResize = debounce(resize, 250);
+    window.addEventListener('resize', debouncedResize);
+    return function () {
+      clearTimeout(timeout);
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, [ref.current, visibility]);
+  React.useEffect(function () {
+    var 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
+      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
+      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
+      setVisibility(newRefElementVisibility);
+    }
+  });
+  return dimensions;
 };
-var getOptionParents = function getOptionParents(data, path) {
-  var _path$split;
 
-  var indexes = (_path$split = path === null || path === void 0 ? void 0 : path.split('.')) !== null && _path$split !== void 0 ? _path$split : [];
+var _excluded$h = ["className", "style"];
+var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
+  var externalClassName = props.className,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$h);
 
-  if (indexes.length > 1) {
-    // we don't want to map the current item
-    indexes.pop(); // we need to rebuild the path as we map
+  var _useCombobox = useCombobox(otherProps, ref),
+      combobox = _useCombobox.combobox,
+      input = _useCombobox.input,
+      popover = _useCombobox.popover,
+      list = _useCombobox.list;
 
-    var lastPath;
-    return indexes.map(function (i) {
-      lastPath = lastPath ? [lastPath, i].join('.') : i;
-      return sanitizeItem(data.find(function (i) {
-        return i.path === lastPath;
-      }));
-    });
-  }
+  var internalRef = React.useRef(null);
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative', {
+    'yt-combobox--inline': props.inline
+  }, externalClassName);
+  return React.createElement("span", {
+    className: className,
+    "data-taco": "combobox",
+    style: style
+  }, React.createElement(PopoverPrimitive.Root, Object.assign({}, popover), React.createElement(PopoverPrimitive.Anchor, {
+    asChild: true,
+    ref: internalRef
+  }, React.createElement("div", Object.assign({}, combobox, {
+    className: "inline w-full",
+    ref: ref
+  }), React.createElement(Input, Object.assign({}, input, {
+    autoComplete: "off",
+    button: props.inline ? React.createElement(IconButton, {
+      appearance: "discrete",
+      className: "focus:!border-none focus:!shadow-none active:!border-none",
+      icon: popover.open ? 'chevron-up' : 'chevron-down',
+      onClick: function onClick() {
+        return popover.onOpenChange(true);
+      },
+      tabIndex: -1
+    }) : props.button
+  })))), React.createElement(PopoverPrimitive.Content, {
+    align: "start",
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
+      event.preventDefault();
+    },
+    sideOffset: 4
+  }, React.createElement(ScrollableList, Object.assign({}, list, {
+    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.open ? 0 : -1
+  })))));
+});
 
-  return null;
-};
-var filterData = function filterData(data, value) {
-  if (value === void 0) {
-    value = '';
+var format = function format(date, mask) {
+  if (mask === void 0) {
+    mask = 'dd.mm.yy';
   }
 
-  if (value === '' || value === null) {
-    return data;
+  if (!date) {
+    return undefined;
   }
 
-  var filteredOptionValues = new Set();
+  var value = dateFns.isDate(date) ? date : dateFns.toDate(date);
 
-  var shouldFilterOption = function shouldFilterOption(option) {
-    if (option.disabled) {
-      return false;
-    }
+  if (!dateFns.isValid(value)) {
+    return undefined;
+  }
 
-    return searchForString(option.text, String(value));
+  var pad = function pad(v) {
+    return String(v).length === 1 ? "0" + v : v.toString();
   };
 
-  data.forEach(function (option) {
-    if (shouldFilterOption(option)) {
-      var parents = getOptionParents(data, option.path);
-      filteredOptionValues.add(option.value);
-
-      if (parents !== null) {
-        parents.forEach(function (option) {
-          return filteredOptionValues.add(option === null || option === void 0 ? void 0 : option.value);
-        });
-      }
-    }
-  });
-  return data.filter(function (_ref) {
-    var value = _ref.value;
-    return filteredOptionValues.has(value);
-  });
-};
-
-var _excluded$l = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
-var debouncer = /*#__PURE__*/debounce(function (f) {
-  return f();
-}, 200);
-
-var convertToInputValue = function convertToInputValue(value) {
-  return String(value !== null && value !== void 0 ? value : '');
+  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 = '';
+  }
 
-var useCombobox = function useCombobox(_ref, ref) {
-  var ariaLabelledBy = _ref['aria-labelledby'],
-      _ref$data = _ref.data,
-      unfilteredData = _ref$data === void 0 ? [] : _ref$data,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      inline = _ref.inline,
-      onChange = _ref.onChange,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onSearch = _ref.onSearch,
-      readOnly = _ref.readOnly,
-      value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-
-  var inputRef = useProxiedRef(ref);
-  var listRef = React.useRef(null);
+  if (mask === void 0) {
+    mask = 'dd.mm.yy';
+  }
 
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+  if (!date || !date.length) {
+    return undefined;
+  }
 
-  var listId = React.useMemo(function () {
-    return uuid.v4();
-  }, []);
+  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;
 
-  var _React$useState2 = React.useState(convertToInputValue(value)),
-      inputValue = _React$useState2[0],
-      setInputValue = _React$useState2[1];
+  var getFullYear = function getFullYear(y) {
+    if (y && y.length === 2) {
+      var z = Number.parseInt(y, 10);
+      return z > 50 ? "19" + y : "20" + y;
+    }
 
-  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
-  var flattenedData = useFlattenedData(unfilteredData);
-  var data = React.useMemo(function () {
-    return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
-  }, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
+    return y;
+  };
 
-  var _React$useState3 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
-      currentIndex = _React$useState3[0],
-      setCurrentIndex = _React$useState3[1];
+  var inputParts = date.split(/\D/);
 
-  var setInputValueByIndex = function setInputValueByIndex(index) {
-    if (index !== undefined) {
-      var option = data[index];
+  if (inputParts.length === 1) {
+    var fullDate = inputParts[0];
+    var 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
+  } else {
+    day = inputParts[dd];
+    month = inputParts[mm];
+    year = getFullYear(inputParts[yy]);
+  }
 
-      if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
-      }
-    }
-  };
+  day = Number.parseInt(day, 10);
+  month = Number.parseInt(month, 10);
+  year = Number.parseInt(year, 10);
+  var currentDate = new Date();
+  return new Date(
+  /* year */
+  Object.is(year, NaN) ? currentDate.getFullYear() : year,
+  /* month */
+  Object.is(month, NaN) ? currentDate.getMonth() : month - 1, // months are zero based in javascript, so subtract a day
 
-  var setCurrentValue = function setCurrentValue(index) {
-    if (index === undefined) {
-      return;
-    }
+  /* day */
+  Object.is(day, NaN) ? currentDate.getDate() : day,
+  /* hours */
+  12,
+  /* minutes */
+  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);
+  return dateFns.isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
+};
 
-    var option = data[index]; // if the selected option is not already selected, trigger blur event
+var _excluded$i = ["defaultValue", "calendar", "onBlur", "onChange", "value"];
+var useDatepicker = function useDatepicker(_ref, ref) {
+  var calendar = _ref.calendar,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
-    if (option.value !== value) {
-      setInputValueByIndex(index);
-    } else {
-      // if the selected option is already selected, refill input with its value
-      setInputValue(convertToInputValue(value));
-    }
-  }; // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set
+  var inputRef = useProxiedRef(ref);
 
+  var _useLocalization = useLocalization(),
+      formatting = _useLocalization.formatting;
 
-  React.useEffect(function () {
-    if (defaultValue && !value) {
-      setInputValueByIndex(getIndexFromValue(data, defaultValue));
-    }
-  }, [data]); // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
+  var _React$useState = React.useState(value ? format(value, formatting.date) : ''),
+      internalValue = _React$useState[0],
+      setInternalValue = _React$useState[1]; // update internal value if it changed 'externally'
 
-  React.useEffect(function () {
-    if (value !== undefined && value !== inputValue) {
-      setInputValue(convertToInputValue(value));
-    }
-  }, [value]);
-  React.useEffect(function () {
-    if (onSearch) {
-      debouncer(function () {
-        onSearch(inputValue);
-      });
-    }
-  }, [inputValue]); // show listbox based on input value
 
   React.useEffect(function () {
-    // don't show the popover if the internal (input) value already is the current value
-    // this prevents the popover showing after selecting a value or pressing escape
-    var isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
-
-    if (inputValue && data.length && !isCurrentValue) {
-      setCurrentIndex(0);
+    if (value) {
+      var formattedValue = format(value, formatting.date);
 
-      if (!open) {
-        setOpen(true);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
       }
     } else {
-      setOpen(false);
-    }
-  }, [inputValue, data]);
-  React.useEffect(function () {
-    if (open) {
-      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
-    } else {
-      setCurrentIndex(undefined);
+      setInternalValue('');
     }
-  }, [open]); // event handlers
+  }, [value]); // event handlers
 
   var handleInputBlur = function handleInputBlur(event) {
     event.persist();
+    var valueAsDate = parseFromCustomString(event.target.value);
+    var formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
 
-    if (event.relatedTarget === listRef.current) {
-      event.preventDefault();
-      return;
-    }
-
-    if (onChange && event.target.value !== value) {
-      var item = findByValue(flattenedData, event.target.value);
-      event.detail = sanitizeItem(item);
-      var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
-
-      if (parents !== null && parents.length > 0) {
-        event.detail.parents = parents;
-      }
-
+    if (onChange) {
+      event.detail = valueAsDate;
       onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
     }
 
-    if (props.onBlur) {
-      props.onBlur(event);
+    if (onBlur) {
+      onBlur(event);
     }
   };
 
   var handleInputChange = function handleInputChange(event) {
-    setInputValue(event.target.value);
+    setInternalValue(event.target.value);
   };
 
-  var handleInputClick = function handleInputClick(event) {
-    if (inline || !open && inputValue && data.length) {
-      setOpen(true);
-    }
-
-    if (onClick) {
-      event.persist();
-      onClick(event);
-    }
+  var handleChange = function handleChange(date) {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
 
-  var handleInputKeyDown = function handleInputKeyDown(event) {
-    event.persist();
-
-    switch (event.keyCode) {
-      case keycode('backspace'):
-        {
-          return;
-        }
-
-      case keycode('escape'):
-        {
-          event.preventDefault();
-          setInputValue(convertToInputValue(value));
-          setOpen(false);
-          return;
-        }
-
-      case keycode('tab'):
-      case keycode('enter'):
-        {
-          if (event.keyCode !== keycode('tab')) {
-            event.preventDefault();
-          }
-
-          setCurrentValue(currentIndex);
-          setOpen(false);
-          return;
-        }
-
-      case keycode('up'):
-      case keycode('down'):
-      case keycode('home'):
-      case keycode('end'):
-        {
-          if (open) {
-            event.preventDefault();
-          }
-
-          break;
-        }
-    } // we aren't focused on the list, so manually forward the keydown event to it
-
-
-    if (listRef.current) {
-      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
-    }
+  var inputProps = _extends({}, props, {
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  });
 
-    if (inline && !open) {
-      if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
-        event.preventDefault();
-        var initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
-        setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
-        setOpen(true);
-      }
-    }
+  var calendarProps = _extends({}, calendar, {
+    onChange: handleChange,
+    value: value
+  });
 
-    if (!event.isDefaultPrevented() && onKeyDown) {
-      event.persist();
-      onKeyDown(event);
-    }
+  return {
+    input: inputProps,
+    calendar: calendarProps
   };
+};
 
-  var handleListboxChange = function handleListboxChange(index) {
-    setCurrentIndex(index);
-  };
+var _excluded$j = ["placement"];
+var UnstyledArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return React.createElement(PopoverPrimitive.Arrow, {
+    className: "pointer-events-none -mt-px",
+    asChild: true,
+    offset: 2,
+    width: 30,
+    height: 11
+  }, React.createElement("svg", Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 19 30 11",
+    style: {
+      transform: 'rotateZ(180deg)'
+    }
+  }), React.createElement("path", {
+    className: "text-grey-dark group-focus:text-blue-light fill-current",
+    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+  }), React.createElement("path", {
+    className: "fill-current",
+    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+  })));
+});
+var UnstyledContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var side = props.placement,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$j);
 
-  var handleListboxClick = function handleListboxClick(event, index) {
-    event.preventDefault();
-    setCurrentValue(index);
-    setOpen(false);
-  };
+  var className = cn('border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group ', props.className);
+  return React.createElement(PopoverPrimitive.Content, Object.assign({}, otherProps, {
+    className: className,
+    side: side,
+    sideOffset: 1,
+    style: _extends({}, props.style, {
+      zIndex: 996
+    }),
+    ref: ref
+  }));
+});
 
-  var combobox = {
-    'aria-expanded': open,
-    'aria-owns': listId,
-    'aria-haspopup': 'listbox',
-    role: 'combobox'
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
   };
+}
 
-  var input = _extends({}, props, {
-    'aria-controls': listId,
-    // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions
-    // are related to the string that is present in the textbox
-    'aria-autocomplete': 'list',
-    // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element
-    'aria-activedescendant': currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,
-    'aria-labelledby': ariaLabelledBy,
-    disabled: disabled,
-    onBlur: !disabled && !readOnly ? handleInputBlur : undefined,
-    onChange: !disabled && !readOnly ? handleInputChange : undefined,
-    onClick: !disabled && !readOnly ? handleInputClick : undefined,
-    onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,
-    readOnly: readOnly,
-    ref: inputRef,
-    type: 'text',
-    value: inputValue || ''
-  });
+var _excluded$k = ["children", "trigger"];
+var PopoverContext = /*#__PURE__*/React.createContext({
+  props: {},
+  ref: null
+});
+var Trigger$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
 
-  var list = {
-    'aria-labelledby': ariaLabelledBy,
-    data: data,
-    disabled: disabled,
-    id: listId,
-    onChange: handleListboxChange,
-    onClick: handleListboxClick,
-    ref: listRef,
-    scrollOnFocus: false,
-    tabIndex: -1,
-    value: currentIndex
-  };
-  return {
-    combobox: combobox,
-    input: input,
-    list: list,
-    popover: {
-      open: open,
-      onOpenChange: setOpen
-    }
-  };
-};
+  var context = React.useContext(PopoverContext);
+  var children = props.children;
 
-var getVisibility = function getVisibility(element) {
-  return Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
-};
+  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");
+    children = React.createElement("span", null, props.children);
+  }
 
-var useBoundingClientRectListener = function useBoundingClientRectListener(ref) {
-  var _React$useState = React.useState(undefined),
-      dimensions = _React$useState[0],
-      setDimensions = _React$useState[1];
+  return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+    children: children,
+    ref: mergeRefs([context.ref, ref]),
+    asChild: true
+  }));
+});
+var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
 
-  var isRefElementVisible = getVisibility(ref.current);
+  var close = function close() {
+    onClick(new CustomEvent('hide'));
+  };
 
-  var _React$useState2 = React.useState(isRefElementVisible),
-      visibility = _React$useState2[0],
-      setVisibility = _React$useState2[1];
+  return children({
+    close: close,
+    ref: ref
+  });
+});
+var Content$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = cn('bg-white focus:border-blue-light', props.className);
+  var output;
 
-  var resize = function resize() {
-    if (visibility) {
-      var _ref$current;
+  if (typeof props.children === 'function') {
+    output = React.createElement(PopoverPrimitive.Close, {
+      asChild: true
+    }, React.createElement(RenderPropWrapper, null, props.children));
+  } else {
+    output = props.children;
+  }
 
-      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  };
+  return React.createElement(UnstyledContent, {
+    className: className,
+    placement: props.placement,
+    ref: ref
+  }, output, React.createElement(UnstyledArrow, {
+    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 (props, ref) {
+  var children = props.children,
+      trigger = props.trigger,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$k);
 
-  React.useEffect(function () {
-    var timeout = setTimeout(resize, 0);
-    var debouncedResize = debounce(resize, 250);
-    window.addEventListener('resize', debouncedResize);
-    return function () {
-      clearTimeout(timeout);
-      window.removeEventListener('resize', debouncedResize);
+  var context = React.useMemo(function () {
+    return {
+      props: otherProps,
+      ref: ref
     };
-  }, [ref.current, visibility]);
-  React.useEffect(function () {
-    var newRefElementVisibility = getVisibility(ref.current);
+  }, [otherProps]);
+  return React.createElement(PopoverContext.Provider, {
+    value: context
+  }, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
+});
+Popover.Trigger = Trigger$1;
+Popover.Content = Content$1;
+Popover.Close = Close$1;
 
-    if (visibility !== newRefElementVisibility) {
-      // When visibility of an element changes, then the new visibility of the element can only be checked after the
-      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
-      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
-      setVisibility(newRefElementVisibility);
-    }
-  });
-  return dimensions;
-};
+var _excluded$l = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
+  var _input$disabled;
 
-var _excluded$m = ["className", "style"];
-var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
+      handleReset = props.onReset,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$m);
+      shortcuts = props.shortcuts,
+      shortcutsText = props.shortcutsText,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$l);
 
-  var _useCombobox = useCombobox(otherProps, ref),
-      combobox = _useCombobox.combobox,
-      input = _useCombobox.input,
-      popover = _useCombobox.popover,
-      list = _useCombobox.list;
+  var _useDatepicker = useDatepicker(otherProps, ref),
+      calendar = _useDatepicker.calendar,
+      input = _useDatepicker.input;
 
-  var internalRef = React.useRef(null);
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative', {
-    'yt-combobox--inline': props.inline
-  }, externalClassName);
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
   return React.createElement("span", {
     className: className,
-    "data-taco": "combobox",
+    "data-taco": "datepicker",
     style: style
-  }, React.createElement(PopoverPrimitive.Root, Object.assign({}, popover), React.createElement(PopoverPrimitive.Anchor, {
-    asChild: true,
-    ref: internalRef
-  }, React.createElement("div", Object.assign({}, combobox, {
-    className: "inline w-full",
-    ref: ref
-  }), React.createElement(Input, Object.assign({}, input, {
-    autoComplete: "off",
-    button: props.inline ? React.createElement(IconButton, {
-      appearance: "discrete",
-      className: "focus:!border-none focus:!shadow-none active:!border-none",
-      icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: function onClick() {
-        return popover.onOpenChange(true);
-      },
-      tabIndex: -1
-    }) : props.button
-  })))), React.createElement(PopoverPrimitive.Content, {
-    align: "start",
-    onOpenAutoFocus: function onOpenAutoFocus(event) {
-      event.preventDefault();
-    },
-    sideOffset: 4
-  }, React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
-    style: {
-      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
-    },
-    tabIndex: popover.open ? 0 : -1
-  })))));
+  }, React.createElement(Input, Object.assign({}, input, {
+    button: React.createElement(Popover, null, React.createElement(Popover.Trigger, null, React.createElement(IconButton, {
+      "aria-label": texts.datepicker.expand,
+      disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
+      icon: "calendar"
+    })), React.createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return React.createElement("div", {
+        className: "flex -m-3"
+      }, 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-l border-grey-dark flex flex-col"
+      }, React.createElement("span", {
+        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
+      }, 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: "w-full px-4 py-1 flex items-start hover:bg-grey-light 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 inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
+        onClick: function onClick(event) {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)));
+    }))
+  })));
+});
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+var DialogContext = /*#__PURE__*/React.createContext({
+  closeOnEscape: true,
+  draggable: false,
+  drawer: undefined,
+  elements: {
+    drawer: undefined,
+    extra: undefined
+  },
+  onClose: function onClose() {},
+  props: {},
+  ref: null,
+  showCloseButton: true,
+  size: 'sm'
+});
+var useCurrentDialog = function useCurrentDialog() {
+  return React.useContext(DialogContext);
+};
+
+var Trigger$2 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, ref) {
+  var dialog = useCurrentDialog();
+  return React.createElement(DialogPrimitive.Trigger, Object.assign({}, dialog.props, props, {
+    ref: mergeRefs([dialog.ref, ref]),
+    asChild: true
+  }));
 });
 
-var format = function format(date, mask) {
-  if (mask === void 0) {
-    mask = 'dd.mm.yy';
-  }
+var useDraggable = function useDraggable(ref) {
+  var _React$useState = React__default.useState({
+    x: 0,
+    y: 0
+  }),
+      position = _React$useState[0],
+      setPosition = _React$useState[1];
 
-  if (!date) {
-    return undefined;
-  }
+  var _useMove = interactions.useMove({
+    onMove: function onMove(event) {
+      var _ref$current;
 
-  var value = dateFns.isDate(date) ? date : dateFns.toDate(date);
+      var rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(); // Prevent dragging out of bounds
 
-  if (!dateFns.isValid(value)) {
-    return undefined;
-  }
+      // Prevent dragging out of bounds
+      if (rect && (rect.left + event.deltaX < 0 || rect.right + event.deltaX > window.innerWidth || rect.top + event.deltaY < 0 || rect.bottom + event.deltaY > window.innerHeight)) {
+        return;
+      }
 
-  var pad = function pad(v) {
-    return String(v).length === 1 ? "0" + v : v.toString();
-  };
+      setPosition(function (_ref) {
+        var x = _ref.x,
+            y = _ref.y;
+        x += event.deltaX;
+        y += event.deltaY;
+        return {
+          x: x,
+          y: y
+        };
+      });
+    }
+  }),
+      moveProps = _useMove.moveProps;
 
-  return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
+  return {
+    position: position,
+    handleProps: moveProps
+  };
 };
-var parseFromCustomString = function parseFromCustomString(date, mask) {
-  if (date === void 0) {
-    date = '';
-  }
-
-  if (mask === void 0) {
-    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;
+var MenuContext = /*#__PURE__*/React.createContext(undefined);
+var useCurrentMenu = function useCurrentMenu() {
+  return React.useContext(MenuContext);
+};
 
-  var getFullYear = function getFullYear(y) {
-    if (y && y.length === 2) {
-      var z = Number.parseInt(y, 10);
-      return z > 50 ? "19" + y : "20" + y;
-    }
+var Title = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  var className = cn('text-center', props.className);
+  return React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+var Footer = /*#__PURE__*/React.forwardRef(function DialogFooter(props, ref) {
+  var className = cn('mt-8 flex justify-end', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+var Close$2 = /*#__PURE__*/React.forwardRef(function DialogClose(props, ref) {
+  var dialog = useCurrentDialog();
+  return React.createElement(DialogPrimitive.Close, Object.assign({
+    onClick: dialog.onClose
+  }, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+var RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      renderProps = _ref.renderProps;
 
-    return y;
+  var close = function close() {
+    onClick(new CustomEvent('close'));
   };
 
-  var inputParts = date.split(/\D/);
-
-  if (inputParts.length === 1) {
-    var fullDate = inputParts[0];
-    var 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
-  } else {
-    day = inputParts[dd];
-    month = inputParts[mm];
-    year = getFullYear(inputParts[yy]);
-  }
+  return children(_extends({
+    close: close,
+    ref: ref
+  }, renderProps));
+});
+var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+  var dialog = useCurrentDialog();
+  var internalRef = useProxiedRef(ref);
 
-  day = Number.parseInt(day, 10);
-  month = Number.parseInt(month, 10);
-  year = Number.parseInt(year, 10);
-  var currentDate = new Date();
-  return new Date(
-  /* year */
-  Object.is(year, NaN) ? currentDate.getFullYear() : year,
-  /* month */
-  Object.is(month, NaN) ? currentDate.getMonth() : month - 1, // months are zero based in javascript, so subtract a day
+  var _useDraggable = useDraggable(internalRef),
+      position = _useDraggable.position,
+      dragHandleProps = _useDraggable.handleProps;
 
-  /* day */
-  Object.is(day, NaN) ? currentDate.getDate() : day,
-  /* hours */
-  12,
-  /* minutes */
-  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);
-  return dateFns.isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
-};
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts; // if the dialog was opened by a menu, we need to close the menu when the dialog closes
+  // the menu is still open (and mounted) because it is the trigger for the dialog
 
-var _excluded$n = ["defaultValue", "calendar", "onBlur", "onChange", "value"];
-var useDatepicker = function useDatepicker(_ref, ref) {
-  var calendar = _ref.calendar,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
-  var inputRef = useProxiedRef(ref);
+  var menu = useCurrentMenu();
+  var handleCloseAutoFocus;
 
-  var _useLocalization = useLocalization(),
-      formatting = _useLocalization.formatting;
+  if (menu) {
+    handleCloseAutoFocus = function handleCloseAutoFocus() {
+      return menu.close();
+    };
+  }
 
-  var _React$useState = React.useState(value ? format(value, formatting.date) : ''),
-      internalValue = _React$useState[0],
-      setInternalValue = _React$useState[1]; // update internal value if it changed 'externally'
+  var className = cn('bg-white rounded relative mt-16 mx-auto', {
+    'w-128 text-center justify-center': dialog.size === 'dialog',
+    'w-xs': dialog.size === 'xs',
+    'w-sm': dialog.size === 'sm',
+    'w-md': dialog.size === 'md',
+    'w-lg': dialog.size === 'lg'
+  });
+  var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
+    'rounded-b-none': !!dialog.elements.extra
+  }, props.className);
 
+  var handleEscapeKeyDown = function handleEscapeKeyDown(event) {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  }; // the chosen behaviour in taco is that outside clicks do not close the dialog
 
-  React.useEffect(function () {
-    if (value) {
-      var formattedValue = format(value, formatting.date);
 
-      if (formattedValue !== internalValue) {
-        setInternalValue(formattedValue);
-      }
-    } else {
-      setInternalValue('');
-    }
-  }, [value]); // event handlers
+  var handleInteractOutside = function handleInteractOutside(event) {
+    return event.preventDefault();
+  };
 
-  var handleInputBlur = function handleInputBlur(event) {
-    event.persist();
-    var valueAsDate = parseFromCustomString(event.target.value);
-    var formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
-    event.target.value = formattedValue;
+  var output;
 
-    if (onChange) {
-      event.detail = valueAsDate;
-      onChange(event);
-    } else {
-      // update the internal value to use the formatted date
-      setInternalValue(formattedValue);
-    }
+  if (typeof props.children === 'function') {
+    output = React.createElement(DialogPrimitive.Close, {
+      asChild: true
+    }, React.createElement(RenderPropWrapper$1, {
+      renderProps: {
+        drawer: dialog.drawer
+      }
+    }, props.children));
+  } else {
+    output = props.children;
+  }
 
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
+  return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
+    asChild: true
+  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+    className: className,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: handleInteractOutside,
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: _extends({}, props.style, {
+      left: dialog.draggable ? position.x + "px" : undefined,
+      top: dialog.draggable ? position.y + "px" : undefined
+    })
+  }), React.createElement("div", {
+    className: containerClassName,
+    "data-taco": "dialog"
+  }, output, dialog.draggable && React.createElement("div", Object.assign({}, dragHandleProps, {
+    "aria-label": texts.dialog.drag,
+    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
+  })), dialog.showCloseButton ? React.createElement(DialogPrimitive.Close, {
+    onClick: dialog.onClose,
+    asChild: true
+  }, React.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.dialog.close,
+    className: "absolute top-0 right-0 mt-2 mr-2",
+    icon: "close"
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
+});
 
-  var handleInputChange = function handleInputChange(event) {
-    setInternalValue(event.target.value);
-  };
+var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
 
-  var handleChange = function handleChange(date) {
-    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
-  };
+  var dialog = useCurrentDialog();
+  var className = cn('absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-drawer",
+    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
+    variants: {
+      visible: {
+        left: '100%',
+        display: 'block',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        }
+      },
+      hidden: {
+        left: '0%',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        },
+        transitionEnd: {
+          display: 'none'
+        }
+      }
+    },
+    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
+    ref: ref
+  }));
+});
 
-  var inputProps = _extends({}, props, {
-    autoComplete: 'off',
-    onBlur: handleInputBlur,
-    onChange: handleInputChange,
-    ref: inputRef,
-    type: 'text',
-    value: internalValue
-  });
+var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-extra",
+    ref: ref
+  }));
+});
 
-  var calendarProps = _extends({}, calendar, {
-    onChange: handleChange,
-    value: value
-  });
+var _excluded$m = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
 
-  return {
-    input: inputProps,
-    calendar: calendarProps
-  };
+var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
+  return React.useMemo(function () {
+    var children = [];
+    var drawer;
+    var extra;
+    React.Children.forEach(initialChildren, function (child) {
+      if (child.type.displayName === 'Drawer') {
+        drawer = child;
+      } else if (child.type.displayName === 'Extra') {
+        extra = child;
+      } else {
+        children.push(child);
+      }
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
 };
 
-var _excluded$o = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
-var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
-  var _input$disabled;
-
-  var externalClassName = props.className,
-      handleReset = props.onReset,
-      style = props.style,
-      shortcuts = props.shortcuts,
-      shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+var Dialog = /*#__PURE__*/React.forwardRef(function (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$m);
 
-  var _useDatepicker = useDatepicker(otherProps, ref),
-      calendar = _useDatepicker.calendar,
-      input = _useDatepicker.input;
+  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
+      children = _useSeparatedChildren[0],
+      drawer = _useSeparatedChildren[1],
+      extra = _useSeparatedChildren[2];
 
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+  var _React$useState = React.useState(false),
+      drawerOpen = _React$useState[0],
+      setDrawerOpen = _React$useState[1];
 
-  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
-  return React.createElement("span", {
-    className: className,
-    "data-taco": "datepicker",
-    style: style
-  }, React.createElement(Input, Object.assign({}, input, {
-    button: React.createElement(Popover, null, React.createElement(Popover.Trigger, null, React.createElement(IconButton, {
-      "aria-label": texts.datepicker.expand,
-      disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
-      icon: "calendar"
-    })), React.createElement(Popover.Content, null, function (_ref) {
-      var close = _ref.close;
-      return React.createElement("div", {
-        className: "flex -m-3"
-      }, 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-l border-grey-dark flex flex-col"
-      }, React.createElement("span", {
-        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
-      }, 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: "w-full px-4 py-1 flex items-start hover:bg-grey-light 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 inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
-        onClick: function onClick(event) {
-          event.persist();
-          handleReset(event);
-          close();
+  var context = React.useMemo(function () {
+    return {
+      closeOnEscape: closeOnEscape,
+      draggable: draggable,
+      drawer: {
+        open: drawerOpen,
+        toggle: function toggle() {
+          return setDrawerOpen(function (isDrawerOpen) {
+            return !isDrawerOpen;
+          });
         }
-      }, texts.datepicker.clear)));
-    }))
-  })));
+      },
+      elements: {
+        drawer: drawer,
+        extra: extra
+      },
+      onClose: onClose,
+      props: otherProps,
+      showCloseButton: showCloseButton,
+      size: size,
+      ref: ref
+    };
+  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+  return React.createElement(DialogContext.Provider, {
+    value: context
+  }, React.createElement(DialogPrimitive.Root, {
+    defaultOpen: defaultOpen,
+    open: open,
+    onOpenChange: onChange
+  }, trigger && React.createElement(Trigger$2, null, trigger), children));
 });
+Dialog.Trigger = Trigger$2;
+Dialog.Content = Content$2;
+Dialog.Title = Title;
+Dialog.Footer = Footer;
+Dialog.Extra = Extra;
+Dialog.Drawer = Drawer;
+Dialog.Close = Close$2;
 
-var _excluded$p = ["horizontal"];
+var _excluded$n = ["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$p);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
   var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
@@ -5900,6 +5867,90 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
+var _excluded$o = ["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$o);
+
+  var className = cn('flex ', props.className);
+  return React.createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+var _excluded$p = ["anchor", "children"];
+var HangerContext = /*#__PURE__*/React.createContext({
+  props: {},
+  ref: null
+});
+var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
+
+  var context = React.useContext(HangerContext);
+  var 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");
+    children = React.createElement("span", null, props.children);
+  }
+
+  return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
+    children: children,
+    ref: mergeRefs([context.ref, ref]),
+    asChild: true
+  }));
+});
+var Content$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  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', props.className);
+
+  var handleInteractOutside = function handleInteractOutside(event) {
+    event.preventDefault();
+  };
+
+  return React.createElement(UnstyledContent, {
+    className: className,
+    "data-taco": "hanger",
+    onInteractOutside: handleInteractOutside,
+    placement: props.placement,
+    ref: ref
+  }, props.children, React.createElement(UnstyledArrow, {
+    className: "text-blue"
+  }), React.createElement(PopoverPrimitive.Close, {
+    asChild: true
+  }, React.createElement(IconButton, {
+    appearance: "primary",
+    "aria-label": texts.hanger.close,
+    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
+    icon: "close",
+    onClick: props.onClose
+  })));
+});
+var Hanger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var anchor = props.anchor,
+      children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+
+  var context = React.useMemo(function () {
+    return {
+      props: otherProps,
+      ref: ref
+    };
+  }, [otherProps]);
+  return React.createElement(HangerContext.Provider, {
+    value: context
+  }, React.createElement(PopoverPrimitive.Root, {
+    defaultOpen: true
+  }, anchor && React.createElement(Anchor, null, anchor), children));
+});
+Hanger.Anchor = Anchor;
+Hanger.Content = Content$3;
+
 var _excluded$q = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
   var onSearch = _ref.onSearch,
@@ -6833,7 +6884,12 @@ var Header = function Header(props) {
   }));
 };
 
-var Menu = function Menu(props) {
+var _excluded$B = ["children", "trigger"];
+var Menu = function Menu(externalProps) {
+  var children = externalProps.children,
+      trigger = externalProps.trigger,
+      props = _objectWithoutPropertiesLoose(externalProps, _excluded$B);
+
   var _React$useState = React.useState(false),
       open = _React$useState[0],
       setOpen = _React$useState[1];
@@ -6874,7 +6930,7 @@ var Menu = function Menu(props) {
   }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
     open: open,
     onOpenChange: setOpen
-  })));
+  }), trigger && React.createElement(Trigger$3, null, trigger), children));
 };
 Menu.Trigger = Trigger$3;
 Menu.Content = Content$4;
@@ -6885,7 +6941,7 @@ Menu.Separator = Separator;
 Menu.Header = Header;
 Menu.RadioGroup = RadioGroup$1;
 
-var _excluded$B = ["children", "className", "expanded", "title", "fixed", "onClick"];
+var _excluded$C = ["children", "className", "expanded", "title", "fixed", "onClick"];
 var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   return React__default.createElement("a", Object.assign({}, props, {
     ref: ref
@@ -6899,7 +6955,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref)
       title = props.title,
       fixed = props.fixed,
       onClick = props.onClick,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   var _React$useState = React__default.useState(fixed || initialExpanded),
       expanded = _React$useState[0],
@@ -6999,7 +7055,7 @@ var useDropTarget = function useDropTarget(onDrop) {
   return [isDraggedOver, props];
 };
 
-var _excluded$C = ["active", "children", "onDrop", "postfix", "prefix", "role"],
+var _excluded$D = ["active", "children", "onDrop", "postfix", "prefix", "role"],
     _excluded2$4 = ["children"];
 var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   var active = props.active,
@@ -7008,7 +7064,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
       postfix = props.postfix,
       prefix = props.prefix,
       role = props.role,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   var proxyRef = useProxiedRef(ref);
 
@@ -7172,7 +7228,7 @@ var PageNumbers = function PageNumbers(_ref) {
   }));
 };
 
-var _excluded$D = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "emptyValue", "id", "multiselect", "onClick", "onChange", "readOnly", "value"];
+var _excluded$E = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "emptyValue", "id", "multiselect", "onClick", "onChange", "readOnly", "value"];
 var useSelect = function useSelect(_ref, ref) {
   var ariaLabel = _ref['aria-label'],
       ariaLabelledBy = _ref['aria-labelledby'],
@@ -7187,7 +7243,7 @@ var useSelect = function useSelect(_ref, ref) {
       readOnly = _ref.readOnly,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? emptyValue : _ref$value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -7369,13 +7425,13 @@ var useSelect = function useSelect(_ref, ref) {
   };
 };
 
-var _excluded$E = ["autoFocus", "className", "highlighted", "style"],
+var _excluded$F = ["autoFocus", "className", "highlighted", "style"],
     _excluded2$5 = ["editable"];
 var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
   var autoFocus = props.autoFocus,
       externalClassName = props.className,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   var _useSelect = useSelect(otherProps, ref),
       button = _useSelect.button,
@@ -7524,7 +7580,7 @@ var usePagination = function usePagination(initialPageIndex, initialPageSize) {
   };
 };
 
-var _excluded$F = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
+var _excluded$G = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
 
 var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
   var minItemIndex = pageIndex * pageSize + 1;
@@ -7548,7 +7604,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
       showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
       _props$dangerouslyHij = props.dangerouslyHijackGlobalKeyboardNavigation,
       dangerouslyHijackGlobalKeyboardNavigation = _props$dangerouslyHij === void 0 ? false : _props$dangerouslyHij,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -7631,13 +7687,13 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   })));
 });
 
-var _excluded$G = ["duration"];
+var _excluded$H = ["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$G);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
 
   var style;
 
@@ -7661,7 +7717,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 
-var _excluded$H = ["children"];
+var _excluded$I = ["children"];
 var sanitizeRowProps = function sanitizeRowProps(row, rowExpansionRenderer) {
   var _row$subRows;
 
@@ -7701,7 +7757,7 @@ var getColumnsFromChildren = function getColumnsFromChildren(children, rowExpans
   .map(function (_ref) {
     var _ref$props = _ref.props,
         groupChildren = _ref$props.children,
-        props = _objectWithoutPropertiesLoose(_ref$props, _excluded$H);
+        props = _objectWithoutPropertiesLoose(_ref$props, _excluded$I);
 
     var column = _extends({}, props);
 
@@ -8198,7 +8254,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
   return plugin;
 };
 
-var _excluded$I = ["onChange"],
+var _excluded$J = ["onChange"],
     _excluded2$6 = ["onChange"];
 
 var toggleBetween = function toggleBetween(fromRowIndex, toRowIndex) {
@@ -8246,7 +8302,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
                 rows = _ref.rows;
 
             var _getToggleAllRowsSele = getToggleAllRowsSelectedProps(),
-                props = _objectWithoutPropertiesLoose(_getToggleAllRowsSele, _excluded$I);
+                props = _objectWithoutPropertiesLoose(_getToggleAllRowsSele, _excluded$J);
 
             var onChange = function onChange(checked) {
               if (checked) {
@@ -8561,7 +8617,7 @@ var useRowDraggable = function useRowDraggable(onRowDrag) {
   return plugin;
 };
 
-var _excluded$J = ["children", "data", "dangerouslyHijackGlobalKeyboardNavigation", "onRowClick", "onRowDrag", "onSelectedRows", "rowClassName", "rowExpansionRenderer", "rowHeight", "selectedRows", "disableSorting", "manualSorting", "onSort", "sortRules", "disablePagination", "length", "onPaginate", "pageSize", "pageIndex", "inlineEditingUniqueId", "onRowCreate", "actions", "onRowEdit", "onRowCopy", "onRowDelete", "onRowActive", "windowed"],
+var _excluded$K = ["children", "data", "dangerouslyHijackGlobalKeyboardNavigation", "onRowClick", "onRowDrag", "onSelectedRows", "rowClassName", "rowExpansionRenderer", "rowHeight", "selectedRows", "disableSorting", "manualSorting", "onSort", "sortRules", "disablePagination", "length", "onPaginate", "pageSize", "pageIndex", "inlineEditingUniqueId", "onRowCreate", "actions", "onRowEdit", "onRowCopy", "onRowDelete", "onRowActive", "windowed"],
     _excluded2$7 = ["headerGroups", "rows", "sortedRows", "prepareRow", "state", "page", "gotoPage", "setPageSize"];
 
 var useTableRowActive = function useTableRowActive(activeIndex, rows, rowExpansionRenderer, handleonRowActive) {
@@ -8635,6 +8691,8 @@ var useTableSortingListener = function useTableSortingListener(data, sortedRows,
 
 var DEFAULT_PAGE_SIZE = 10;
 var useTable = function useTable(props, ref) {
+  var _otherProps$tabIndex;
+
   var children = props.children,
       data = props.data,
       onRowClick = props.onRowClick,
@@ -8666,7 +8724,7 @@ var useTable = function useTable(props, ref) {
       onRowActive = props.onRowActive,
       _props$windowed = props.windowed,
       windowed = _props$windowed === void 0 ? false : _props$windowed,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$J);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$K);
 
   if (onSelectedRows && !selectedRows || !onSelectedRows && selectedRows) {
     throw new Error('Selected rows in a Table component are fully controlled - you must pass both the `onSelectedRows` and `selectedRows` props when using row selection');
@@ -8767,7 +8825,8 @@ var useTable = function useTable(props, ref) {
     tableProps: _extends({}, otherProps, {
       headerGroups: headerGroups,
       onFocus: handleFocus,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      tabIndex: (_otherProps$tabIndex = otherProps.tabIndex) !== null && _otherProps$tabIndex !== void 0 ? _otherProps$tabIndex : 0
     }),
     state: state,
     pagination: !disablePagination ? {
@@ -8783,7 +8842,7 @@ var useTable = function useTable(props, ref) {
   };
 };
 
-var _excluded$K = ["row", "index", "instance", "headerGroups"];
+var _excluded$L = ["row", "index", "instance", "headerGroups"];
 
 var renderCell = function renderCell(cell, row) {
   var props = _extends({}, cell.getCellProps(), {
@@ -8807,7 +8866,7 @@ var Row = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var row = _ref.row,
       index = _ref.index,
       instance = _ref.instance,
-      rowProps = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+      rowProps = _objectWithoutPropertiesLoose(_ref, _excluded$L);
 
   var activeIndex = rowProps.activeIndex,
       onRowClick = rowProps.onRowClick,
@@ -8917,7 +8976,7 @@ var Column = function Column(_ref) {
   }) : null);
 };
 
-var _excluded$L = ["autoFocus", "children", "disableSorting", "headerGroups", "headerRef", "bodyRef"];
+var _excluded$M = ["autoFocus", "children", "disableSorting", "headerGroups", "headerRef", "bodyRef"];
 var DefaultEmptyState = function DefaultEmptyState() {
   return null;
 };
@@ -8929,7 +8988,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
       headerGroups = props.headerGroups,
       headerRef = props.headerRef,
       bodyRef = props.bodyRef,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$L);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$M);
 
   React__default.useEffect(function () {
     if (autoFocus && tableRef.current) {
@@ -8964,11 +9023,11 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
   }, children));
 });
 
-var _excluded$M = ["emptyStateRenderer"];
+var _excluded$N = ["emptyStateRenderer"];
 var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
   var _props$emptyStateRend = props.emptyStateRenderer,
       emptyStateRenderer = _props$emptyStateRend === void 0 ? DefaultEmptyState : _props$emptyStateRend,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$M);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$N);
 
   var tableRef = useProxiedRef(ref);
 
@@ -8996,8 +9055,7 @@ var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
   }
 
   return React__default.createElement(React__default.Fragment, null, paginationElement, React__default.createElement(BaseTable, Object.assign({}, tableProps, {
-    ref: tableRef,
-    tabIndex: 0
+    ref: tableRef
   }), rows.length ? rows.map(function (row, index) {
     prepareRow(row, index);
     return React__default.createElement(Row, Object.assign({}, rowProps, {
@@ -9033,14 +9091,14 @@ PaginatedTable.Group = function () {
   return null;
 };
 
-var _excluded$N = ["height"],
+var _excluded$O = ["height"],
     _excluded2$8 = ["emptyStateRenderer", "length", "loadMore"];
 var ROW_HEIGHT = 40;
 var VariableRow = /*#__PURE__*/React__default.memo(function (_ref) {
   var data = _ref.data,
       index = _ref.index,
       _ref$style = _ref.style,
-      style = _objectWithoutPropertiesLoose(_ref$style, _excluded$N);
+      style = _objectWithoutPropertiesLoose(_ref$style, _excluded$O);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -9209,7 +9267,6 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
   return React__default.createElement(BaseTable, Object.assign({}, tableProps, {
     className: className,
     headerRef: headerRef,
-    tabIndex: 0,
     ref: tableRef
   }), list ? list : emptyStateRenderer());
 });
@@ -9406,7 +9463,7 @@ var useTableRowCreation = function useTableRowCreation(data, tableRef) {
   };
 };
 
-var _excluded$O = ["id", "defaultId", "children", "onChange", "orientation"],
+var _excluded$P = ["id", "defaultId", "children", "onChange", "orientation"],
     _excluded2$9 = ["id", "disabled"],
     _excluded3 = ["id"];
 var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
@@ -9416,7 +9473,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
       onChange = props.onChange,
       _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$O);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$P);
 
   var className = cn('yt-tabs', "yt-tabs--" + orientation, {
     'flex w-full': orientation === 'vertical'
@@ -9470,9 +9527,9 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$P = ["defaultValue", "highlighted", "state"];
+var _excluded$Q = ["defaultValue", "highlighted", "state"];
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
-  var otherProps = _objectWithoutPropertiesLoose(props, _excluded$P);
+  var otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
 
   var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
   return React.createElement("textarea", Object.assign({}, otherProps, {
@@ -9481,11 +9538,11 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
-var _excluded$Q = ["label", "onChange"];
+var _excluded$R = ["label", "onChange"];
 var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   var label = props.label,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$R);
 
   var className = cn('group h-6 w-10 flex rounded-full inline-flex', {
     'mr-2': !!label,
@@ -9512,7 +9569,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   return element;
 });
 
-var _excluded$R = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
+var _excluded$S = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
 
 var Tooltip$1 = function Tooltip(_ref) {
   var continuous = _ref.continuous,
@@ -9577,7 +9634,7 @@ var Tour = function Tour(props) {
       disableTourSkipOnEsc = props.disableCloseOnEsc,
       _props$disableScrollP = props.disableScrollParentFix,
       disableScrollParentFix = _props$disableScrollP === void 0 ? false : _props$disableScrollP,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$R);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$S);
 
   var steps = React.useMemo(function () {
     return React.Children.map(props.children, function (child) {